-
);
};
-export default ManageRole;
\ No newline at end of file
+export default ManageRole;
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
index a66be189..7dd05bf0 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@@ -20,7 +20,7 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT } from "../../utils/constants";
const Header = () => {
- const { profile } = useProfile();
+ const {profile} = useProfile();
const location = useLocation();
const dispatch = useDispatch(changeMaster("Job Role"));
const { data, loading } = useMaster();
diff --git a/src/hooks/useEmployees.js b/src/hooks/useEmployees.js
index 67c9f6b8..bc39a861 100644
--- a/src/hooks/useEmployees.js
+++ b/src/hooks/useEmployees.js
@@ -3,236 +3,518 @@ import { cacheData, getCachedData } from "../slices/apiDataManager";
import { RolesRepository } from "../repositories/MastersRepository";
import EmployeeRepository from "../repositories/EmployeeRepository";
import ProjectRepository from "../repositories/ProjectRepository";
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import showToast from "../services/toastService";
+import {useSelector} from "react-redux";
+import {store} from "../store/store";
-export const useAllEmployees = (showInactive) => {
- const [employeesList, setEmployeeList] = useState([]);
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState();
- const fetchData = async () => {
- try {
- let EmployeeList_cached = getCachedData("AllEmployees");
- if (!EmployeeList_cached) {
- setLoading(true);
- const response = await EmployeeRepository.getAllEmployeeList(showInactive);
- cacheData("AllEmployees", response.data);
- setEmployeeList(response.data);
- setLoading(false);
- } else {
- setEmployeeList(EmployeeList_cached);
- setLoading(false);
- }
- } catch (error) {
- setError("Failed to fetch data.");
- setLoading(false);
- }
- };
+// export const useAllEmployees = (showInactive) => {
+// const [employeesList, setEmployeeList] = useState([]);
+// const [loading, setLoading] = useState(false);
+// const [error, setError] = useState();
- useEffect(() => {
- fetchData();
- }, []);
- return { employeesList, loading, error };
-};
+// const fetchData = async () => {
+// try {
+// let EmployeeList_cached = getCachedData("AllEmployees");
+// if (!EmployeeList_cached) {
+// setLoading(true);
+// const response = await EmployeeRepository.getAllEmployeeList(showInactive);
+// cacheData("AllEmployees", response.data);
+// setEmployeeList(response.data);
+// setLoading(false);
+// } else {
+// setEmployeeList(EmployeeList_cached);
+// setLoading(false);
+// }
+// } catch (error) {
+// setError("Failed to fetch data.");
+// setLoading(false);
+// }
+// };
-export const useEmployees = (selectedProject) => {
- const [employees, setEmployeeList] = useState([]);
- const [loading, setLoading] = useState(true);
- const [projects, setProjects] = useState([]);
+// useEffect(() => {
+// fetchData();
+// }, []);
+// return { employeesList, loading, error };
+// };
- const fetchData = async (projectid) => {
- try {
- let EmployeeByProject_Cache = getCachedData("employeeListByProject");
- if (
- !EmployeeByProject_Cache ||
- !EmployeeByProject_Cache.projectId === projectid
- ) {
- EmployeeRepository.getEmployeeListByproject(projectid)
- .then((response) => {
- setEmployeeList(response);
- cacheData("employeeListByProject", {
- data: response,
- projectId: projectid,
- });
- })
- .catch((error) => {
- setError("Failed to fetch data.");
- });
- } else {
- setEmployeeList(EmployeeByProject_Cache.data);
- }
- setLoading(false);
- } catch (err) {
- setError("Failed to fetch data.");
- setLoading(false);
- }
- };
- useEffect(() => {
- if (selectedProject) {
- fetchData(selectedProject);
- }
- }, [selectedProject]);
- return { employees, loading, projects, reCallAllEmployee };
-};
+// export const useEmployees = (selectedProject) => {
+// const [employees, setEmployeeList] = useState([]);
+// const [loading, setLoading] = useState(true);
+// const [projects, setProjects] = useState([]);
-export const useEmployeeRoles = (employeeId) => {
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState();
- const [employeeRoles, setEmployeeRoles] = useState([]);
- const fetchData = async (employeeid) => {
- try {
- let response = await RolesRepository.getEmployeeRoles(employeeid);
- setEmployeeRoles(response.data);
- cacheData("employeelist", response.data);
- } catch (err) {
- setError("Failed to fetch data.");
- setEmployeeRoles([]);
- } finally {
- setLoading(false);
- }
- };
+// const fetchData = async (projectid) => {
+// try {
+// let EmployeeByProject_Cache = getCachedData("employeeListByProject");
+// if (
+// !EmployeeByProject_Cache ||
+// !EmployeeByProject_Cache.projectId === projectid
+// ) {
+// EmployeeRepository.getEmployeeListByproject(projectid)
+// .then((response) => {
+// setEmployeeList(response);
+// cacheData("employeeListByProject", {
+// data: response,
+// projectId: projectid,
+// });
+// })
+// .catch((error) => {
+// setError("Failed to fetch data.");
+// });
+// } else {
+// setEmployeeList(EmployeeByProject_Cache.data);
+// }
+// setLoading(false);
+// } catch (err) {
+// setError("Failed to fetch data.");
+// setLoading(false);
+// }
+// };
- useEffect(() => {
- if (employeeId) {
- fetchData(employeeId);
- }
- }, [employeeId]);
+// useEffect(() => {
+// if (selectedProject) {
+// fetchData(selectedProject);
+// }
+// }, [selectedProject]);
- return { employeeRoles, loading, error };
-};
+// return { employees, loading, projects, reCallAllEmployee };
+// };
-export const useEmployeesByProject = (projectId) => {
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState();
- const [employees, setEmployees] = useState([]);
+// export const useEmployeeRoles = (employeeId) => {
+// const [loading, setLoading] = useState(true);
+// const [error, setError] = useState();
+// const [employeeRoles, setEmployeeRoles] = useState([]);
+// const fetchData = async (employeeid) => {
+// try {
+// let response = await RolesRepository.getEmployeeRoles(employeeid);
+// setEmployeeRoles(response.data);
+// cacheData("employeelist", response.data);
+// } catch (err) {
+// setError("Failed to fetch data.");
+// setEmployeeRoles([]);
+// } finally {
+// setLoading(false);
+// }
+// };
- const fetchData = async () => {
- const Employees_cache = getCachedData("employeeListByProject");
- if (!Employees_cache || Employees_cache.projectId !== projectId) {
- setEmployees(true);
- ProjectRepository.getEmployeesByProject(projectId)
- .then((response) => {
- setEmployees(response.data);
- cacheData("employeeListByProject", {
- data: response.data,
- projectId,
- });
- setLoading(false);
- })
- .catch((error) => {
- setError("Failed to fetch data.");
- setLoading(false);
- });
- } else {
- setEmployees(Employees_cache.data);
- setLoading(false);
- }
- };
+// useEffect(() => {
+// if (employeeId) {
+// fetchData(employeeId);
+// }
+// }, [employeeId]);
- useEffect(() => {
- fetchData(projectId);
- }, [projectId]);
+// return { employeeRoles, loading, error };
+// };
- return { employees, loading, error, recallProjectEmplloyee: fetchData };
-};
+// export const useEmployeesByProject = (projectId) => {
+// const [loading, setLoading] = useState(false);
+// const [error, setError] = useState();
+// const [employees, setEmployees] = useState([]);
-export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
- const [employees, setEmployees] = useState([]);
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState(null);
+// const fetchData = async () => {
+// const Employees_cache = getCachedData("employeeListByProject");
+// if (!Employees_cache || Employees_cache.projectId !== projectId) {
+// setEmployees(true);
+// ProjectRepository.getEmployeesByProject(projectId)
+// .then((response) => {
+// setEmployees(response.data);
+// cacheData("employeeListByProject", {
+// data: response.data,
+// projectId,
+// });
+// setLoading(false);
+// })
+// .catch((error) => {
+// setError("Failed to fetch data.");
+// setLoading(false);
+// });
+// } else {
+// setEmployees(Employees_cache.data);
+// setLoading(false);
+// }
+// };
- const fetchData = async (showInactive) => {
- if ( projectId )
- {
- const Employees_cache = getCachedData("employeeListByProject");
- if (!Employees_cache || Employees_cache.projectId !== projectId) {
- setLoading(true);
- setError(null);
- try {
- const response = await ProjectRepository.getEmployeesByProject(
- projectId
- );
- setEmployees(response.data);
- cacheData("employeeListByProject", {
- data: response.data,
- projectId,
- });
- setLoading(false);
- } catch (err) {
- setError("Failed to fetch data.");
- setLoading(false);
- }
- } else {
- setEmployees(Employees_cache.data);
- setLoading(false);
- }
- } else
- {
- const cacheKey = showInactive
- ? "allInactiveEmployeeList"
- : "allEmployeeList";
+// useEffect(() => {
+// fetchData(projectId);
+// }, [projectId]);
- try {
- const response = await EmployeeRepository.getAllEmployeeList(
- showInactive
- );
- setEmployees(response.data);
- cacheData(cacheKey, { data: response.data });
- setLoading(false);
- } catch (err) {
- setError("Failed to fetch data.");
- setLoading(false);
- }
+// return { employees, loading, error, recallProjectEmplloyee: fetchData };
+// };
+
+
+
+// export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
+// const [employees, setEmployees] = useState([]);
+// const [loading, setLoading] = useState(false);
+// const [error, setError] = useState(null);
+
+// const fetchData = async (showInactive) => {
+// if ( projectId )
+// {
+// const Employees_cache = getCachedData("employeeListByProject");
+// if (!Employees_cache || Employees_cache.projectId !== projectId) {
+// setLoading(true);
+// setError(null);
+// try {
+// const response = await ProjectRepository.getEmployeesByProject(
+// projectId
+// );
+// setEmployees(response.data);
+// cacheData("employeeListByProject", {
+// data: response.data,
+// projectId,
+// });
+// setLoading(false);
+// } catch (err) {
+// setError("Failed to fetch data.");
+// setLoading(false);
+// }
+// } else {
+// setEmployees(Employees_cache.data);
+// setLoading(false);
+// }
+// } else
+// {
+// const cacheKey = showInactive
+// ? "allInactiveEmployeeList"
+// : "allEmployeeList";
+
+// try {
+// const response = await EmployeeRepository.getAllEmployeeList(
+// showInactive
+// );
+// setEmployees(response.data);
+// cacheData(cacheKey, { data: response.data });
+// setLoading(false);
+// } catch (err) {
+// setError("Failed to fetch data.");
+// setLoading(false);
+// }
+// }
+// };
+
+// useEffect(() => {
+// fetchData(showInactive); // Fetch data when the component mounts or projectId changes
+// }, [projectId]); // Re-fetch when projectId changes
+
+// return {
+// employees,
+// loading,
+// error,
+// recallEmployeeData: fetchData,
+// };
+// };
+
+
+
+
+// export const useEmployeeProfile = (employeeId) => {
+// const [loading, setLoading] = useState(true);
+// const [error, setError] = useState();
+// const [employee, setEmployees] = useState(null);
+
+// const fetchData = async () => {
+// if (!employeeId) {
+// // Reset the state if no employeeId (e.g., opening for 'add' mode)
+// setEmployees(null);
+// setLoading(false);
+// return;
+// }
+// const Employee_cache = getCachedData("employeeProfile");
+// if (!Employee_cache || Employee_cache.employeeId !== employeeId) {
+// EmployeeRepository.getEmployeeProfile(employeeId)
+// .then((response) => {
+// setEmployees(response.data);
+// cacheData("employeeProfile", { data: response.data, employeeId });
+// setLoading(false);
+// })
+// .catch((error) => {
+// setError("Failed to fetch data.");
+// setLoading(false);
+// });
+// } else {
+// setEmployees(Employee_cache.data);
+// setLoading(false);
+// }
+// };
+
+// useEffect(() => {
+// fetchData();
+// }, [employeeId]);
+
+// return { employee, loading, error };
+// };
+
+
+
+
+
+
+
+
+
+// Query ---------------------------------------------------------------------------
+
+
+
+
+
+export const useAllEmployees = ( showInactive ) =>
+{
+ const {
+ data = [],
+ isLoading,
+ error,
+ refetch, // optional if you want recall functionality
+ } = useQuery({
+ queryKey: ['allEmployee', showInactive],
+ queryFn: async () => {
+ const res = await EmployeeRepository.getAllEmployeeList(showInactive);
+ return res.data;
+ },
+ });
+
+ return {
+ employeesList: data,
+ loading: isLoading,
+ error,
+ recallEmployeeData: refetch,
+ };
+};
+
+// ManageBucket.jsx
+export const useEmployees = ( selectedProject ) =>
+{
+
+ const {
+ data = [],
+ isLoading,
+ error,
+ refetch,
+ } = useQuery({
+ queryKey: ["employeeListByProject", selectedProject],
+ queryFn: async () => {
+ const res = await EmployeeRepository.getEmployeeListByproject(selectedProject);
+ return res.data || res;
+ },
+ enabled: !!selectedProject,
+ });
+
+ return {
+ employees: data,
+ loading: isLoading,
+ projects: [], // if needed, pass this separately or manage from another hook
+ reCallAllEmployee: refetch,
+ error,
+ };
+};
+
+// ManageRole.jsx
+export const useEmployeeRoles = (employeeId) => {
+ const {
+ data = [],
+ isLoading: loading,
+ error,
+ } = useQuery({
+ queryKey: ['employeeRoles', employeeId],
+ queryFn: async () => {
+ const res = await RolesRepository.getEmployeeRoles(employeeId);
+ return res.data;
+ },
+ enabled: !!employeeId,
+ });
+
+ return {
+ employeeRoles: data,
+ loading,
+ error,
+ };
+};
+
+// EmployeeProfile.jsx
+export const useEmployeesByProject = (projectId) => {
+ const {
+ data = [],
+ isLoading: loading,
+ error,
+ refetch: recallProjectEmplloyee,
+ } = useQuery({
+ queryKey: ['projectEmployees', projectId],
+ queryFn: async () => {
+ const res = await ProjectRepository.getEmployeesByProject(projectId);
+ return res.data;
+ },
+ enabled: !!projectId,
+ });
+
+ return {
+ employees: data,
+ loading,
+ error,
+ recallProjectEmplloyee,
+ };
+};
+
+// EmployeeList.jsx
+export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
+ const isAllEmployees = !projectId && projectId !== undefined;
+
+ const queryKey = isAllEmployees
+ ? ['allEmployees', showInactive]
+ : ['projectEmployees', projectId];
+
+ const queryFn = async () => {
+ if (isAllEmployees) {
+ const res = await EmployeeRepository.getAllEmployeeList(showInactive);
+ return res.data;
+ } else {
+ const res = await ProjectRepository.getEmployeesByProject(projectId);
+ return res.data;
}
};
- useEffect(() => {
- fetchData(showInactive); // Fetch data when the component mounts or projectId changes
- }, [projectId]); // Re-fetch when projectId changes
+ const {
+ data: employees = [],
+ isLoading,
+ error,
+ refetch,
+ } = useQuery({
+ queryKey,
+ queryFn,
+ enabled: isAllEmployees || !!projectId,
+ });
return {
employees,
+ loading: isLoading,
+ error,
+ recallEmployeeData: refetch,
+ };
+};
+
+// ManageEmployee.jsx
+export const useEmployeeProfile = (employeeId) => {
+ const isEnabled = !!employeeId;
+
+ const {
+ data = null,
+ isLoading: loading,
+ error,
+ } = useQuery({
+ queryKey: ['employeeProfile', employeeId],
+ queryFn: async () => {
+ if (!employeeId) return null;
+ const res = await EmployeeRepository.getEmployeeProfile(employeeId);
+ return res.data;
+ },
+ enabled: isEnabled,
+ });
+
+ return {
+ employee: data,
loading,
error,
- recallEmployeeData: fetchData,
};
};
-export const useEmployeeProfile = (employeeId) => {
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState();
- const [employee, setEmployees] = useState(null);
- const fetchData = async () => {
- if (!employeeId) {
- // Reset the state if no employeeId (e.g., opening for 'add' mode)
- setEmployees(null);
- setLoading(false);
- return;
- }
- const Employee_cache = getCachedData("employeeProfile");
- if (!Employee_cache || Employee_cache.employeeId !== employeeId) {
- EmployeeRepository.getEmployeeProfile(employeeId)
- .then((response) => {
- setEmployees(response.data);
- cacheData("employeeProfile", { data: response.data, employeeId });
- setLoading(false);
- })
- .catch((error) => {
- setError("Failed to fetch data.");
- setLoading(false);
- });
- } else {
- setEmployees(Employee_cache.data);
- setLoading(false);
- }
- };
+// Mutation------------------------------------------------------------------
- useEffect(() => {
- fetchData();
- }, [employeeId]);
- return { employee, loading, error };
+
+export const useUpdateEmployee = () =>
+{
+ const selectedProject = useSelector((store)=>store.localVariables.projectId)
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (employeeData) => EmployeeRepository.manageEmployee(employeeData),
+ onSuccess: (_, variables) => {
+ const id = variables.id || variables.employeeId;
+
+ // Cache invalidation
+ queryClient.invalidateQueries( ['allEmployee',false]);
+ queryClient.invalidateQueries(['employeeProfile', id]);
+ queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
+
+ queryClient.invalidateQueries( [ 'employeeListByProject' ,selectedProject] );
+ showToast( `Employee ${ id ? 'updated' : 'created' } successfully`, 'success' );
+ },
+ onError: (error) => {
+ const msg = error?.response?.data?.message || error.message || 'Something went wrong';
+ showToast(msg, 'error');
+ },
+ });
+};
+
+
+
+export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: (id) => {
+ setemployeeLodaing(true);
+ return EmployeeRepository.deleteEmployee(id);
+ },
+
+ onSuccess: () => {
+ showToast("Employee deleted successfully.", "success");
+
+ queryClient.invalidateQueries( ['allEmployee',false]);
+ queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
+ queryClient.invalidateQueries( [ 'employeeListByProject' ,selectedProject] );
+
+ setIsDeleteModalOpen(false);
+ },
+
+ onError: (error) => {
+ const message =
+ error.response?.data?.message ||
+ error.message ||
+ "An unexpected error occurred";
+ showToast(message, "error");
+ setIsDeleteModalOpen(false);
+ },
+
+ onSettled: () => {
+ setemployeeLodaing(false);
+ },
+ });
+};
+
+// Manage Role
+
+
+export const useUpdateEmployeeRoles = ({ onClose, resetForm, onSuccessCallback } = {}) => {
+ const queryClient = useQueryClient();
+ const mutation = useMutation({
+ mutationFn: (updates) => RolesRepository.createEmployeeRoles(updates),
+ onSuccess: () => {
+ showToast("Roles updated successfully", "success");
+
+ resetForm?.();
+ onClose?.();
+ onSuccessCallback?.();
+
+ queryClient.invalidateQueries( {queryKey: [ "employeeRoles" ]} );
+ queryClient.invalidateQueries( {queryKey: [ "profile" ]} );
+ },
+ onError: (err) => {
+ const message =
+ err?.response?.data?.message || err?.message || "Error occurred while updating roles";
+ showToast(message, "error");
+ },
+ });
+
+ return {
+ updateRoles: mutation.mutate,
+ isPending: mutation.isPending,
+ isError: mutation.isError,
+ error: mutation.error,
+ };
};
diff --git a/src/hooks/useProfile.js b/src/hooks/useProfile.js
index c8eeee8c..0a222cc2 100644
--- a/src/hooks/useProfile.js
+++ b/src/hooks/useProfile.js
@@ -3,60 +3,99 @@ import AuthRepository from "../repositories/AuthRepository";
import {cacheData, cacheProfileData, getCachedData, getCachedProfileData} from "../slices/apiDataManager";
import {useSelector} from "react-redux";
import eventBus from "../services/eventBus";
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
let hasFetched = false;
let hasReceived = false;
-export const useProfile = () => {
- const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser );
- const [profile, setProfile] = useState(null);
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState("");
+// export const useProfile = () => {
+// const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser );
+// const [profile, setProfile] = useState(null);
+// const [loading, setLoading] = useState(false);
+// const [error, setError] = useState("");
- const fetchData = async () => {
- try {
- setLoading(true);
- let response = await AuthRepository.profile();
- setProfile(response.data);
- cacheProfileData(response.data);
- } catch (error) {
- setError("Failed to fetch data.");
- } finally {
- setLoading(false);
- }
- };
+// const fetchData = async () => {
+// try {
+// setLoading(true);
+// let response = await AuthRepository.profile();
+// setProfile(response.data);
+// cacheProfileData(response.data);
+// } catch (error) {
+// setError("Failed to fetch data.");
+// } finally {
+// setLoading(false);
+// }
+// };
- const validation = () => {
- if (!hasFetched) {
- hasFetched = true;
- if (!loggedUser) {
- fetchData();
- } else {
- setProfile(loggedUser);
- }
- }
+// const validation = () => {
+// if (!hasFetched) {
+// hasFetched = true;
+// if (!loggedUser) {
+// fetchData();
+// } else {
+// setProfile(loggedUser);
+// }
+// }
- setProfile(loggedUser);
- }
+// setProfile(loggedUser);
+// }
- useEffect(() => {
- validation();
- }, [loggedUser]);
+// useEffect(() => {
+// validation();
+// }, [loggedUser]);
- const handler = useCallback(
- (data) => {
- if(!getCachedData("hasReceived")){
- cacheData("hasReceived", true);
- hasFetched = false;
- validation();
- }
- },[]
- );
+// const handler = useCallback(
+// (data) => {
+// if(!getCachedData("hasReceived")){
+// cacheData("hasReceived", true);
+// hasFetched = false;
+// validation();
+// }
+// },[]
+// );
+
+// useEffect(() => {
+// eventBus.on("assign_project_one", handler);
+// return () => eventBus.off("assign_project_one", handler);
+// }, [handler]);
+
+// return { profile, loading, error };
+// };
+
+export const useProfile = () => {
+ const loggedUser = useSelector((store) => store.globalVariables.loginUser);
+ const queryClient = useQueryClient();
+
+ const {
+ data: profile,
+ error,
+ isLoading,
+ refetch,
+ } = useQuery({
+ queryKey: ["profile"],
+ queryFn: async () => {
+ const response = await AuthRepository.profile();
+ cacheProfileData(response.data);
+ return response.data;
+ },
+ initialData: loggedUser || undefined,
+ enabled: true,
+ staleTime: 10 * 60 * 1000,
+ });
+
+ const handler = useCallback(() => {
+ queryClient.invalidateQueries({ queryKey: ["profile"] });
+ }, [queryClient]);
useEffect(() => {
eventBus.on("assign_project_one", handler);
return () => eventBus.off("assign_project_one", handler);
}, [handler]);
- return { profile, loading, error };
+ return {
+ profile,
+ loading: isLoading,
+ error,
+ refetch,
+ };
};
diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 3ad59861..c5d08d4d 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -5,7 +5,7 @@ import { Link, NavLink, useNavigate } from "react-router-dom";
import Avatar from "../../components/common/Avatar";
import Breadcrumb from "../../components/common/Breadcrumb";
import ManageEmp from "../../components/Employee/ManageRole";
-import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
+import { useEmployeesAllOrByProjectId, useSuspendEmployee } from "../../hooks/useEmployees";
import { useProjects } from "../../hooks/useProjects";
import { useProfile } from "../../hooks/useProfile";
import { hasUserPermission } from "../../utils/authUtils";
@@ -26,6 +26,7 @@ import { useSelector } from "react-redux";
import eventBus from "../../services/eventBus";
import { newlineChars } from "pdf-lib";
import GlobalModel from "../../components/common/GlobalModel";
+import usePagination from "../../hooks/usePagination";
const EmployeeList = () => {
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
@@ -40,9 +41,10 @@ const EmployeeList = () => {
const [projectsList, setProjectsList] = useState(projects || []);
const [employeeList, setEmployeeList] = useState([]);
- const [modelConfig, setModelConfig] = useState();
- const [currentPage, setCurrentPage] = useState(1);
- const [itemsPerPage] = useState(ITEMS_PER_PAGE);
+ const [ modelConfig, setModelConfig ] = useState();
+ const [EmpForManageRole,setEmpForManageRole] = useState(null)
+ // const [currentPage, setCurrentPage] = useState(1);
+ // const [itemsPerPage] = useState(ITEMS_PER_PAGE);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
const [searchText, setSearchText] = useState("");
@@ -51,7 +53,16 @@ const EmployeeList = () => {
const [selectedEmployeeId, setSelecedEmployeeId] = useState(null);
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
- const [employeeLodaing, setemployeeLodaing] = useState(false);
+ const [ employeeLodaing, setemployeeLodaing ] = useState( false );
+ const {
+ mutate: suspendEmployee,
+ isPending: empLodaing
+} = useSuspendEmployee({
+ setIsDeleteModalOpen,
+ setemployeeLodaing
+} );
+
+
const navigate = useNavigate();
@@ -65,52 +76,29 @@ const EmployeeList = () => {
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
const email = item.email ? item.email.toLowerCase() : "";
const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : "";
- const jobRole = item.jobRole ? item.jobRole.toLowerCase() : ""; // Get jobRole and convert to lowercase
+ const jobRole = item.jobRole ? item.jobRole.toLowerCase() : "";
return (
fullName.includes(value) ||
email.includes(value) ||
phoneNumber.includes(value) ||
- jobRole.includes(value) // Include jobRole in the search
+ jobRole.includes(value)
);
});
setFilteredData(results);
};
- useEffect(() => {
- setCurrentPage(1);
- if (!loading && Array.isArray(employees)) {
- // Sort by full name (firstName + lastName)
- const sorted = [...employees].sort((a, b) => {
- const nameA = `${a.firstName || ""}${a.middleName || ""}${b.lastName || ""
- }`.toLowerCase();
- const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
- }`.toLowerCase();
- return nameA?.localeCompare(nameB);
- });
- setEmployeeList(sorted);
- setFilteredData(sorted);
- }
- }, [loading, employees, selectedProject, showAllEmployees]); // Add showAllEmployees to dependencies
-
- const displayData = searchText ? filteredData : employeeList;
- const indexOfLastItem = currentPage * itemsPerPage;
- const indexOfFirstItem = indexOfLastItem - itemsPerPage;
- const currentItems = Array.isArray(displayData)
- ? displayData.slice(indexOfFirstItem, indexOfLastItem)
- : [];
-
- const paginate = (pageNumber) => setCurrentPage(pageNumber);
- const totalPages = Array.isArray(displayData)
- ? Math.ceil(displayData.length / itemsPerPage)
- : 0;
-
- const openModal = () => {
+ const displayData = searchText ? filteredData : employeeList;
+ const { currentPage, totalPages, currentItems, paginate,setCurrentPage } = usePagination(
+ displayData,
+ ITEMS_PER_PAGE
+ );
+ const openModal = () => {
setIsCreateModalOpen(true);
- };
+ };
const closeModal = () => {
setIsCreateModalOpen(false);
@@ -127,32 +115,50 @@ const EmployeeList = () => {
recallEmployeeData(showInactive);
};
const handleShow = () => setShowModal(true);
- const handleClose = () => setShowModal(false);
+ const handleClose = () => setShowModal( false );
+
+ useEffect(() => {
+ setCurrentPage(1)
- const suspendEmployee = (id) => {
- setemployeeLodaing(true);
- EmployeeRepository.deleteEmployee(id)
- .then((response) => {
- showToast("Employee deleted successfully.", "success");
- clearCacheKey("employeeListByProject");
- clearCacheKey("allEmployeeList");
- clearCacheKey("allInactiveEmployeeList");
- clearCacheKey("employeeProfile");
- setEmployeeList([]);
- recallEmployeeData(showInactive);
- setemployeeLodaing(false);
- setIsDeleteModalOpen(false);
- })
- .catch((error) => {
- const message =
- error.response?.data?.message ||
- error.message ||
- "An unexpected error occurred";
- showToast(message, "error");
- setemployeeLodaing(false);
- setIsDeleteModalOpen(false);
+ if (!loading && Array.isArray(employees)) {
+ // Sort by full name (firstName + lastName)
+ const sorted = [...employees].sort((a, b) => {
+ const nameA = `${a.firstName || ""}${a.middleName || ""}${b.lastName || ""
+ }`.toLowerCase();
+ const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
+ }`.toLowerCase();
+ return nameA?.localeCompare(nameB);
});
- };
+
+ setEmployeeList(sorted);
+ setFilteredData(sorted);
+ }
+ }, [loading, employees, selectedProject, showAllEmployees]);
+
+ // const suspendEmployee = (id) => {
+ // setemployeeLodaing(true);
+ // EmployeeRepository.deleteEmployee(id)
+ // .then((response) => {
+ // showToast("Employee deleted successfully.", "success");
+ // clearCacheKey("employeeListByProject");
+ // clearCacheKey("allEmployeeList");
+ // clearCacheKey("allInactiveEmployeeList");
+ // clearCacheKey("employeeProfile");
+ // setEmployeeList([]);
+ // recallEmployeeData(showInactive);
+ // setemployeeLodaing(false);
+ // setIsDeleteModalOpen(false);
+ // })
+ // .catch((error) => {
+ // const message =
+ // error.response?.data?.message ||
+ // error.message ||
+ // "An unexpected error occurred";
+ // showToast(message, "error");
+ // setemployeeLodaing(false);
+ // setIsDeleteModalOpen(false);
+ // });
+ // };
const handleConfigData = (config) => {
setModelConfig(config);
@@ -241,28 +247,11 @@ const handleAllEmployeesToggle = (e) => {
return (
<>
- {isCreateModalOpen && (
-
+ {EmpForManageRole && (
+
setEmpForManageRole( null )}>
+ setEmpForManageRole(null)} />
+
)}
- {/* {showModal && (
)} */}
{showModal && (
setShowModal(false)}>
@@ -650,7 +639,7 @@ const handleAllEmployeesToggle = (e) => {
data-bs-toggle="modal"
data-bs-target="#managerole-modal"
onClick={() =>
- handleConfigData(item.id)
+ setEmpForManageRole(item.id)
}
>
{" "}
@@ -670,7 +659,7 @@ const handleAllEmployeesToggle = (e) => {
{/* Pagination */}
- {!loading && displayData.length > itemsPerPage && (
+ {!loading && displayData.length > ITEMS_PER_PAGE && (