Replaced normal hooks to react-query Hook - Employee

package-lock.json

@@ -11,6 +11,8 @@
         "@hookform/resolvers": "^3.10.0",
         "@microsoft/signalr": "^8.0.7",
         "@reduxjs/toolkit": "^2.5.0",
+        "@tanstack/react-query": "^5.81.2",
+        "@tanstack/react-query-devtools": "^5.81.2",
         "@types/web": "^0.0.216",
         "@vitejs/plugin-react": "^4.3.4",
         "apexcharts": "^4.5.0",
@@ -1423,6 +1425,59 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.81.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.2.tgz",
+      "integrity": "sha512-QLYkPdrudoMATDFa3MiLEwRhNnAlzHWDf0LKaXUqJd0/+QxN8uTPi7bahRlxoAyH0UbLMBdeDbYzWALj7THOtw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.81.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.81.2.tgz",
+      "integrity": "sha512-jCeJcDCwKfoyyBXjXe9+Lo8aTkavygHHsUHAlxQKKaDeyT0qyQNLKl7+UyqYH2dDF6UN/14873IPBHchcsU+Zg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.81.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.2.tgz",
+      "integrity": "sha512-pe8kFlTrL2zFLlcAj2kZk9UaYYHDk9/1hg9EBaoO3cxDhOZf1FRGJeziSXKrVZyxIfs7b3aoOj/bw7Lie0mDUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.81.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.81.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.2.tgz",
+      "integrity": "sha512-TX0OQ4cbgX6z2uN8c9x0QUNbyePGyUGdcgrGnV6TYEJc7KPT8PqeASuzoA5NGw1CiMGvyFAkIGA2KipvhM9d1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.81.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.81.2",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",

package.json

@@ -14,6 +14,8 @@
     "@hookform/resolvers": "^3.10.0",
     "@microsoft/signalr": "^8.0.7",
     "@reduxjs/toolkit": "^2.5.0",
+    "@tanstack/react-query": "^5.81.2",
+    "@tanstack/react-query-devtools": "^5.81.2",
     "@types/web": "^0.0.216",
     "@vitejs/plugin-react": "^4.3.4",
     "apexcharts": "^4.5.0",

src/App.tsx

@@ -1,21 +1,33 @@
 import { DireProvider } from "./Context/DireContext";
 import AppRoutes from "./router/AppRoutes";
 import { ToastContainer } from "react-toastify";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,      // 5 min: data considered fresh
+      refetchOnWindowFocus: false,   // refresh on tab switch
+      refetchOnReconnect: true,     // re-fetch if network was lost
+      retry: false,   
+    },
+  },
+});
 
 const App = () => {
   return (
     <div className="app">
+      <QueryClientProvider client={queryClient}>
         <DireProvider>
           <AppRoutes />
         </DireProvider>
 
-      <ToastContainer>
+        <ToastContainer />
-        
+        <ReactQueryDevtools initialIsOpen={false} />
-    </ToastContainer>
+      </QueryClientProvider>
-
     </div>
   );
 };
 
-export default App
+export default App;

src/components/Directory/ManageBucket.jsx

@@ -19,7 +19,7 @@ import { useProfile } from "../../hooks/useProfile";
 const ManageBucket = () => {
   const { profile } = useProfile();
   const [bucketList, setBucketList] = useState([]);
-  const { employeesList } = useAllEmployees(false);
+  const {employeesList} = useAllEmployees( false );
   const [selectedEmployee, setSelectEmployee] = useState([]);
   const { buckets, loading, refetch } = useBuckets();
   const [action_bucket, setAction_bucket] = useState(false);

src/components/Employee/ManageEmployee.jsx

@@ -9,20 +9,21 @@ import { useDispatch } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { formatDate } from "../../utils/dateUtils";
-import { useEmployeeProfile } from "../../hooks/useEmployees";
+import { useEmployeeProfile, useUpdateEmployee } from "../../hooks/useEmployees";
 import {
   cacheData,
   clearCacheKey,
   getCachedData,
 } from "../../slices/apiDataManager";
 import { clearApiCacheKey } from "../../slices/apiCacheSlice";
+import {useMutation} from "@tanstack/react-query";
 
 const mobileNumberRegex = /^[0-9]\d{9}$/;
 
 const ManageEmployee = ({ employeeId, onClosed }) => {
   const dispatch = useDispatch();
+const { mutate: updateEmployee, isLoading } = useUpdateEmployee();
 
-  // const { employeeId } = useParams();
   const {
     employee,
     error,
@@ -163,39 +164,53 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
 
   const AadharNumberValue = watch("aadharNumber") || "";
 
+  // const onSubmit = (data) => {
+  //   setLoading(true);
+  //   if (data.email == "") {
+  //     data.email = null;
+  //   }
+  //   EmployeeRepository.manageEmployee(data)
+  //     .then((response) => {
+  //       cacheData("employeeProfileInfo", data);
+  //       showToast(
+  //         `Employee details ${
+  //           data.id == null ? "created" : "updated"
+  //         } successfully.`,
+  //         "success"
+  //       );
+  //       clearCacheKey("employeeListByProject");
+  //       clearCacheKey("allEmployeeList");
+  //       clearCacheKey("allInactiveEmployeeList");
+  //       clearCacheKey("employeeProfile");
+
+  //       setLoading(false);
+  //       reset();
+  //       // navigation("/employees");
+  //       onClosed();
+  //     })
+  //     .catch((error) => {
+  //       const message =
+  //         error?.response?.data?.message ||
+  //         error?.message ||
+  //         "Error occured during api calling";
+  //       showToast(message, "error");
+  //       setLoading(false);
+  //     });
+  // };
+ 
  const onSubmit = (data) => {
-    setLoading(true);
+  if (data.email === "") {
-    if (data.email == "") {
     data.email = null;
   }
-    EmployeeRepository.manageEmployee(data)
-      .then((response) => {
-        cacheData("employeeProfileInfo", data);
-        showToast(
-          `Employee details ${
-            data.id == null ? "created" : "updated"
-          } successfully.`,
-          "success"
-        );
-        clearCacheKey("employeeListByProject");
-        clearCacheKey("allEmployeeList");
-        clearCacheKey("allInactiveEmployeeList");
-        clearCacheKey("employeeProfile");
 
-        setLoading(false);
+  updateEmployee(data, {
+    onSuccess: () => {
       reset();
-        // navigation("/employees");
       onClosed();
-      })
+    },
-      .catch((error) => {
-        const message =
-          error?.response?.data?.message ||
-          error?.message ||
-          "Error occured during api calling";
-        showToast(message, "error");
-        setLoading(false);
   });
-  };
+};
+
 
   useEffect(() => {
     if (!loading && !error && employee) {
@@ -233,12 +248,6 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
 
   return (
     <>
-     
-            {/* <div className="c">
-              {!currentEmployee && empLoading && employeeId && (
-                <p>Loading Employee Data...</p>
-              )} */}
-
       <form onSubmit={handleSubmit( onSubmit )} className="p-sm-0 p-2">
         <div className="text-center"><p className="fs-6 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p></div>
                 <div className="row mb-3">

src/components/Employee/ManageRole.jsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState, useMemo } from "react";
-import useMaster from "../../hooks/masterHook/useMaster";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { RolesRepository } from "../../repositories/MastersRepository";
-import { useEmployeeRoles } from "../../hooks/useEmployees";
 import { useDispatch } from "react-redux";
+
+import { useEmployeeRoles, useUpdateEmployeeRoles } from "../../hooks/useEmployees";
+import useMaster from "../../hooks/masterHook/useMaster";
 import { changeMaster } from "../../slices/localVariablesSlice";
+import { RolesRepository } from "../../repositories/MastersRepository";
 import showToast from "../../services/toastService";
 
 const formSchema = z.object({
@@ -15,44 +16,17 @@ const formSchema = z.object({
 
 const ManageRole = ( {employeeId, onClosed} ) =>
 {
+  const dispatch = useDispatch();
+  const formStateRef = useRef({});
 
-  const disptach = useDispatch();
-useEffect(()=>{
-  disptach(changeMaster("Application Role"));
-},[disptach])
-  const [isLoading, setIsLoading] = useState(false);
-  const { employeeRoles, loading } = useEmployeeRoles(employeeId);
-  const { data, loading: roleLoading } = useMaster();
-
-  const buildDefaultRoles = () => {
-    const defaults = {};
-    data.forEach((role) => {
-      const isRoleEnabled = employeeRoles?.some(
-        (empRole) => empRole.roleId === role.id
-      );
-      defaults[role.id] = isRoleEnabled;
-    });
-
-    return defaults;
-  };
-
-  const [initialRoles, setInitialRoles] = useState({});
 
   useEffect(() => {
-    if (employeeRoles && data) {
+    dispatch(changeMaster("Application Role"));
-      if (employeeRoles.length > 0) {
+  }, [dispatch]);
-        const updatedRoles = buildDefaultRoles();
-        setInitialRoles(updatedRoles);
-      } else {
-        setInitialRoles({});
-      }
-    } else {
-      setInitialRoles({});
-    }
-  }, [employeeRoles, data]);
-  
 
 
+  const { employeeRoles = [], loading: empLoading } = useEmployeeRoles(employeeId);
+  const { data: roles = [], loading: roleLoading } = useMaster();
   const {
     register,
     handleSubmit,
@@ -60,83 +34,53 @@ useEffect(()=>{
     reset,
   } = useForm({
     resolver: zodResolver(formSchema),
-  
+    defaultValues: { selectedRole: {} },
   });
-
+  const {
-  useEffect(() => {
+    updateRoles,
-    if (!data) return;
+    isPending : isLoading,
-  
+    isError,
-    const updatedRoles = {};
+    error,
-    data.forEach((role) => {
+  } = useUpdateEmployeeRoles({
-      const isRoleEnabled = employeeRoles?.some(
+    onClose: onClosed,
+    resetForm: reset,
+  });
+  // Prepare default form values based on roles and current assignments
+  const selectedRoleDefaults = useMemo(() => {
+    const defaults = {};
+    roles.forEach((role) => {
+      const enabled = employeeRoles.some(
         (empRole) => empRole.roleId === role.id && empRole.isEnabled
       );
-      updatedRoles[role.id] = isRoleEnabled || false;
+      defaults[role.id] = enabled;
     });
+    return defaults;
+  }, [roles, employeeRoles]);
 
-    setInitialRoles(updatedRoles);
+  // Avoid infinite loop by comparing previous form values
+  useEffect(() => {
+    const prev = JSON.stringify(formStateRef.current);
+    const next = JSON.stringify(selectedRoleDefaults);
 
-    reset({
+    if (prev !== next) {
-      selectedRole: updatedRoles,
+      formStateRef.current = selectedRoleDefaults;
-    });
+      reset({ selectedRole: selectedRoleDefaults });
-  }, [employeeRoles, data, reset]);
+    }
+  }, [selectedRoleDefaults, reset]);
 
-  // const onSubmit = (formdata) => {
+  const onSubmit = async (formData) => {
     // setIsLoading(true);
-  //   const result = [];
 
-  //   const selectedRoles = formdata.selectedRole;
+    const updates = [];
+    const selected = formData.selectedRole;
 
-  //   for (const [roleId, isChecked] of Object.entries(selectedRoles)) {
+    for (const [roleId, isChecked] of Object.entries(selected)) {
-  //     const existingRole = employeeRoles?.find((role) => role.roleId === roleId);
+      const existing = employeeRoles.find((r) => r.roleId === roleId);
-  //     const wasChecked = !!existingRole?.isEnabled;
+      const wasChecked = !!existing?.isEnabled;
 
-  //     // Only push if the checked status has changed
-  //     if (isChecked !== wasChecked) {
-  //       result.push({
-  //         id: existingRole?.id || "00000000-0000-0000-0000-000000000000",
-  //         employeeId,
-  //         roleId,
-  //         isEnabled: isChecked,
-  //       });
-  //     }
-  //   }
-  
-  //   if (result.length === 0) {
-  //     showToast("No changes made", "info");
-  //     setIsLoading(false);
-  //     return;
-  //   }
-  
-  //   console.log(result);
-  
-  //   RolesRepository.createEmployeeRoles(result)
-  //     .then(() => {
-  //       showToast("Roles updated successfully", "success");
-  //       setIsLoading(false);
-  //       reset();
-  //       onClosed();
-  //     })
-  //     .catch((err) => {
-  //       console.error(err);
-  //       showToast(err.message, "error");
-  //       setIsLoading(false);
-  //     });
-  // };
-  
-  const onSubmit = (formdata) => {
-    setIsLoading(true);
-    const result = [];
-    const selectedRoles = formdata.selectedRole;
-  
-    for (const [roleId, isChecked] of Object.entries(selectedRoles)) {
-      const existingRole = employeeRoles?.find((role) => role.roleId === roleId);
-      const wasChecked = !!existingRole?.isEnabled;
-  
-      // Only push if the checked status has changed
       if (isChecked !== wasChecked) {
-        result.push({
+        updates.push({
-          id: existingRole?.id || "00000000-0000-0000-0000-000000000000",
+          id: existing?.id || "00000000-0000-0000-0000-000000000000",
           employeeId,
           roleId,
           isEnabled: isChecked,
@@ -144,83 +88,69 @@ useEffect(()=>{
       }
     }
 
-    if (result.length === 0) {
+    if (updates.length === 0) {
       showToast("No changes made", "info");
-      setIsLoading(false);
+      // setIsLoading(false);
       return;
     }
 
-    console.log(result);
+    // try {
-  
+    //   await RolesRepository.createEmployeeRoles(updates);
-    RolesRepository.createEmployeeRoles(result)
+    //   showToast("Roles updated successfully", "success");
-      .then(() => {
+    //   reset();
-        showToast("Roles updated successfully", "success");
+    //   onClosed();
-        setIsLoading(false);
+    // } catch (err) {
-        reset();
+    //   const message =
-        onClosed();
+    //     err?.response?.data?.message || err?.message || "Error occurred while updating roles";
-      })
+    //   showToast(message, "error");
-      .catch((error) => {
+    // } finally {
-        const message  = error?.response?.data?.message || error?.message || "Error occured during api calling"
+    //   setIsLoading(false);
-        showToast(message, "error");
+    // }
-        setIsLoading(false);
+    updateRoles(updates);
-      });
   };
 
+  const isLoadingData = roleLoading || empLoading;
+
   return (
-    <div
-      className={`modal fade `}
-      id="managerole-modal"
-      tabIndex="-1"
-      aria-hidden="true"
-    >
-      <div className="modal-dialog  modal-simple modal-md d-flex align-items-center justify-content-center">
-        <div className="modal-content ">
-          <div className="modal-body">
-            <button
-              type="button"
-              className="btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
             <form onSubmit={handleSubmit(onSubmit)}>
-              <div className="text-start my-0">
+              <div className="text-start mb-3">
                 <p className="lead">Select Roles</p>
               </div>
 
+              {isLoadingData ? (
+                <p>Loading...</p>
+              ) : (
                 <div
-                className="d-flex flex-wrap justify-content-between align-items-center pb-5 "
+                  className="d-flex flex-wrap justify-content-between pb-4"
-                style={{ maxHeight: "70vh", overflowY: "scroll" }}
+                  style={{ maxHeight: "70vh", overflowY: "auto" }}
                 >
-                {roleLoading && <p>Loading...</p>}
+                  {roles.map((role) => (
-                {loading && <p>Loading...</p>}
+                    <div className="col-md-6 col-lg-4 mb-3" key={role.id}>
-                {data &&
-                  data.map((item) => (
-                    <div className="col-md-6 col-lg-4 mb-4" key={item.id}>
                       <div className="form-check ms-2 text-start">
                         <input
                           className="form-check-input"
                           type="checkbox"
-                          id={item.id}
+                          id={role.id}
-                          {...register(`selectedRole.${item.id}`)}
+                          {...register(`selectedRole.${role.id}`)}
-
                         />
-                        <label
+                        <label className="form-check-label" htmlFor={role.id}>
-                          className="form-check-label text-bold"
+                          <small>{role.role || "--"}</small>
-                          htmlFor={item.id}
-                        >
-                          <small>{item.role || "--"}</small>
                         </label>
                       </div>
                     </div>
                   ))}
                 </div>
-              {errors.selected && (
-                <div className="text-center">{errors.selected.message}</div>
               )}
 
-              <div className="col-12 text-center">
+              {errors.selectedRole && (
-                <button type="submit" className="btn btn-sm btn-primary me-3">
+                <div className="text-danger text-center">
-                  {isLoading ? "Please Wait" : "Submit"}
+                  {errors.selectedRole.message}
+                </div>
+              )}
+
+              <div className="text-center mt-3">
+                <button type="submit" className="btn btn-sm btn-primary me-3" disabled={isLoading}>
+                  {isLoading ? "Please Wait..." : "Submit"}
                 </button>
                 <button
                   type="reset"
@@ -232,10 +162,6 @@ useEffect(()=>{
                 </button>
               </div>
             </form>
-          </div>
-        </div>
-      </div>
-    </div>
   );
 };
 

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();

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 () => {
+// export const useAllEmployees = (showInactive) => {
-    try {
+//   const [employeesList, setEmployeeList] = useState([]);
-      let EmployeeList_cached = getCachedData("AllEmployees");
+//   const [loading, setLoading] = useState(false);
-      if (!EmployeeList_cached) {
+//   const [error, setError] = useState();
-        setLoading(true);
+
-        const response = await EmployeeRepository.getAllEmployeeList(showInactive);
+//   const fetchData = async () => {
-        cacheData("AllEmployees", response.data);
+//     try {
-        setEmployeeList(response.data);
+//       let EmployeeList_cached = getCachedData("AllEmployees");
-        setLoading(false);
+//       if (!EmployeeList_cached) {
-      } else {
+//         setLoading(true);
-        setEmployeeList(EmployeeList_cached);
+//         const response = await EmployeeRepository.getAllEmployeeList(showInactive);
-        setLoading(false);
+//         cacheData("AllEmployees", response.data);
-      }
+//         setEmployeeList(response.data);
-    } catch (error) {
+//         setLoading(false);
-      setError("Failed to fetch data.");
+//       } else {
-      setLoading(false);
+//         setEmployeeList(EmployeeList_cached);
-    }
+//         setLoading(false);
+//       }
+//     } catch (error) {
+//       setError("Failed to fetch data.");
+//       setLoading(false);
+//     }
+//   };
+
+//   useEffect(() => {
+//     fetchData();
+//   }, []);
+//   return { employeesList, loading, error };
+// };
+
+
+
+// export const useEmployees = (selectedProject) => {
+//   const [employees, setEmployeeList] = useState([]);
+//   const [loading, setLoading] = useState(true);
+//   const [projects, setProjects] = useState([]);
+
+//   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 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);
+//     }
+//   };
+
+//   useEffect(() => {
+//     if (employeeId) {
+//       fetchData(employeeId);
+//     }
+//   }, [employeeId]);
+
+//   return { employeeRoles, loading, error };
+// };
+
+// export const useEmployeesByProject = (projectId) => {
+//   const [loading, setLoading] = useState(false);
+//   const [error, setError] = useState();
+//   const [employees, setEmployees] = useState([]);
+
+//   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(() => {
+//     fetchData(projectId);
+//   }, [projectId]);
+
+//   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, 
   };
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-  return { employeesList, loading, error };
 };
 
-export const useEmployees = (selectedProject) => {
+//  ManageBucket.jsx
-  const [employees, setEmployeeList] = useState([]);
+export const useEmployees = ( selectedProject ) =>
-  const [loading, setLoading] = useState(true);
+{
-  const [projects, setProjects] = useState([]);
 
-  const fetchData = async (projectid) => {
+  const {
-    try {
+    data = [],
-      let EmployeeByProject_Cache = getCachedData("employeeListByProject");
+    isLoading,
-      if (
+    error,
-        !EmployeeByProject_Cache ||
+    refetch,
-        !EmployeeByProject_Cache.projectId === projectid
+  } = useQuery({
-      ) {
+    queryKey: ["employeeListByProject", selectedProject],
-        EmployeeRepository.getEmployeeListByproject(projectid)
+    queryFn: async () => {
-          .then((response) => {
+      const res = await EmployeeRepository.getEmployeeListByproject(selectedProject);
-            setEmployeeList(response);
+      return res.data || res;
-            cacheData("employeeListByProject", {
+    },
-              data: response,
+    enabled: !!selectedProject,
-              projectId: projectid,
   });
-          })
+
-          .catch((error) => {
+  return {
-            setError("Failed to fetch data.");
+    employees: data,
-          });
+    loading: isLoading,
-      } else {
+    projects: [], // if needed, pass this separately or manage from another hook
-        setEmployeeList(EmployeeByProject_Cache.data);
+    reCallAllEmployee: refetch,
-      }
+    error,
-      setLoading(false);
-    } catch (err) {
-      setError("Failed to fetch data.");
-      setLoading(false);
-    }
   };
-
-  useEffect(() => {
-    if (selectedProject) {
-      fetchData(selectedProject);
-    }
-  }, [selectedProject]);
-
-  return { employees, loading, projects, reCallAllEmployee };
 };
 
+// ManageRole.jsx
 export const useEmployeeRoles = (employeeId) => {
-  const [loading, setLoading] = useState(true);
+  const {
-  const [error, setError] = useState();
+    data = [],
-  const [employeeRoles, setEmployeeRoles] = useState([]);
+    isLoading: loading,
-  const fetchData = async (employeeid) => {
+    error,
-    try {
+  } = useQuery({
-      let response = await RolesRepository.getEmployeeRoles(employeeid);
+    queryKey: ['employeeRoles', employeeId],
-      setEmployeeRoles(response.data);
+    queryFn: async () => {
-      cacheData("employeelist", response.data);
+      const res = await RolesRepository.getEmployeeRoles(employeeId);
-    } catch (err) {
+      return res.data;
-      setError("Failed to fetch data.");
+    },
-      setEmployeeRoles([]);
+     enabled: !!employeeId,
-    } finally {
+  });
-      setLoading(false);
+
-    }
+  return {
+    employeeRoles: data,
+    loading,
+    error,
   };
-
-  useEffect(() => {
-    if (employeeId) {
-      fetchData(employeeId);
-    }
-  }, [employeeId]);
-
-  return { employeeRoles, loading, error };
 };
 
+// EmployeeProfile.jsx
 export const useEmployeesByProject = (projectId) => {
-  const [loading, setLoading] = useState(false);
+  const {
-  const [error, setError] = useState();
+    data = [],
-  const [employees, setEmployees] = useState([]);
+    isLoading: loading,
+    error,
+    refetch: recallProjectEmplloyee,
+  } = useQuery({
+    queryKey: ['projectEmployees', projectId],
+    queryFn: async () => {
+      const res = await ProjectRepository.getEmployeesByProject(projectId);
+      return res.data;
+    },
+    enabled: !!projectId, 
+  });
 
-  const fetchData = async () => {
+  return {
-    const Employees_cache = getCachedData("employeeListByProject");
+    employees: data,
-    if (!Employees_cache || Employees_cache.projectId !== projectId) {
+    loading,
-      setEmployees(true);
+    error,
-      ProjectRepository.getEmployeesByProject(projectId)
+    recallProjectEmplloyee,
-        .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(() => {
-    fetchData(projectId);
-  }, [projectId]);
-
-  return { employees, loading, error, recallProjectEmplloyee: fetchData };
 };
 
+// EmployeeList.jsx
 export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
-  const [employees, setEmployees] = useState([]);
+  const isAllEmployees = !projectId && projectId !== undefined;
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
 
-  const fetchData = async (showInactive) => {
+  const queryKey = isAllEmployees
-    if ( projectId )
+    ? ['allEmployees', showInactive]
-    {
+    : ['projectEmployees', projectId];
-      const Employees_cache = getCachedData("employeeListByProject");
+
-      if (!Employees_cache || Employees_cache.projectId !== projectId) {
+  const queryFn = async () => {
-        setLoading(true);
+    if (isAllEmployees) {
-        setError(null);
+      const res = await EmployeeRepository.getAllEmployeeList(showInactive);
-        try {
+      return res.data;
-          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);
+      const res = await ProjectRepository.getEmployeesByProject(projectId);
-        setLoading(false);
+      return res.data;
-      }
-    } 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(() => {
+  const {
-    fetchData(showInactive); // Fetch data when the component mounts or projectId changes
+    data: employees = [],
-  }, [projectId]); // Re-fetch when projectId changes
+    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 () => {
+// Mutation------------------------------------------------------------------
-    if (!employeeId) {
+
-        // Reset the state if no employeeId (e.g., opening for 'add' mode)
+
-        setEmployees(null);
+
-        setLoading(false);
+export const useUpdateEmployee = () =>
-        return;
+{
-      }
+    const selectedProject = useSelector((store)=>store.localVariables.projectId)
-    const Employee_cache = getCachedData("employeeProfile");
+  const queryClient = useQueryClient();
-    if (!Employee_cache || Employee_cache.employeeId !== employeeId) {
+
-      EmployeeRepository.getEmployeeProfile(employeeId)
+  return useMutation({
-        .then((response) => {
+    mutationFn: (employeeData) => EmployeeRepository.manageEmployee(employeeData),
-          setEmployees(response.data);
+    onSuccess: (_, variables) => {
-          cacheData("employeeProfile", { data: response.data, employeeId });
+      const id = variables.id || variables.employeeId;
-          setLoading(false);
+
-        })
+      // Cache invalidation
-        .catch((error) => {
+      queryClient.invalidateQueries( ['allEmployee',false]);
-          setError("Failed to fetch data.");
+      queryClient.invalidateQueries(['employeeProfile', id]);
-          setLoading(false);
+      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');
+    },
   });
-    } else {
+};
-      setEmployees(Employee_cache.data);
+
-      setLoading(false);
+
-    }
+
-  };
+export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
-
+  const queryClient = useQueryClient();
-  useEffect(() => {
+
-      fetchData();
+  return useMutation({
-  }, [employeeId]);
+    mutationFn: (id) => {
-
+      setemployeeLodaing(true);
-  return { employee, loading, error };
+      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,
+  };
 };

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("");
+
+//   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);
+//       }
+//     }
+  
+//       setProfile(loggedUser);
+//   }
+
+//   useEffect(() => {
+//     validation();
+//   }, [loggedUser]);
+
+//   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 loggedUser = useSelector((store) => store.globalVariables.loginUser);
-  const [profile, setProfile] = useState(null);
+  const queryClient = useQueryClient();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
 
-  const fetchData = async () => {
+  const {
-    try {
+    data: profile,
-      setLoading(true);
+    error,
-      let response = await AuthRepository.profile();
+    isLoading,
-      setProfile(response.data);
+    refetch,
+  } = useQuery({
+    queryKey: ["profile"],
+    queryFn: async () => {
+      const response = await AuthRepository.profile();
       cacheProfileData(response.data);
-    } catch (error) {
+      return response.data;
-      setError("Failed to fetch data.");
+    },
-    } finally {
+    initialData: loggedUser || undefined,
-      setLoading(false);
+    enabled: true, 
-    }
+    staleTime: 10 * 60 * 1000,
-  };
+  });
 
-  const validation = () => {
+  const handler = useCallback(() => {
-    if (!hasFetched) {
+    queryClient.invalidateQueries({ queryKey: ["profile"] });
-      hasFetched = true;
+  }, [queryClient]);
-      if (!loggedUser) {
-        fetchData();
-      } else {
-        setProfile(loggedUser);
-      }
-    }
-  
-      setProfile(loggedUser);
-  }
-
-  useEffect(() => {
-    validation();
-  }, [loggedUser]);
-
-  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 };
+  return {
+    profile,
+    loading: isLoading,
+    error,
+    refetch,
+  };
 };

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 [ modelConfig, setModelConfig ] = useState();
-  const [currentPage, setCurrentPage] = useState(1);
+  const [EmpForManageRole,setEmpForManageRole] = useState(null)
-  const [itemsPerPage] = useState(ITEMS_PER_PAGE);
+  // 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,49 +76,26 @@ 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 { currentPage, totalPages, currentItems, paginate,setCurrentPage } = usePagination(
-  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+            displayData,
-  const currentItems = Array.isArray(displayData)
+           ITEMS_PER_PAGE
-    ? displayData.slice(indexOfFirstItem, indexOfLastItem)
+          );
-    : [];
-
-  const paginate = (pageNumber) => setCurrentPage(pageNumber);
-  const totalPages = Array.isArray(displayData)
-    ? Math.ceil(displayData.length / itemsPerPage)
-    : 0;
-
    const openModal = () => {
     setIsCreateModalOpen(true);
    };
@@ -127,32 +115,50 @@ const EmployeeList = () => {
     recallEmployeeData(showInactive);
   };
   const handleShow = () => setShowModal(true);
-  const handleClose = () => setShowModal(false);
+  const handleClose = () => setShowModal( false );
   
-  const suspendEmployee = (id) => {
+    useEffect(() => {
-    setemployeeLodaing(true);
+  setCurrentPage(1)
-    EmployeeRepository.deleteEmployee(id)
+
-      .then((response) => {
+    if (!loading && Array.isArray(employees)) {
-        showToast("Employee deleted successfully.", "success");
+      // Sort by full name (firstName + lastName)
-        clearCacheKey("employeeListByProject");
+      const sorted = [...employees].sort((a, b) => {
-        clearCacheKey("allEmployeeList");
+        const nameA = `${a.firstName || ""}${a.middleName || ""}${b.lastName || ""
-        clearCacheKey("allInactiveEmployeeList");
+          }`.toLowerCase();
-        clearCacheKey("employeeProfile");
+        const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
-        setEmployeeList([]);
+          }`.toLowerCase();
-        recallEmployeeData(showInactive);
+        return nameA?.localeCompare(nameB);
-        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);
       });
-  };
+
+      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 && (
-        <ManageEmp employeeId={modelConfig} onClosed={closeModal} />
+        <GlobalModel isOpen={EmpForManageRole} closeModal={() => setEmpForManageRole( null )}>
+            <ManageEmp employeeId={EmpForManageRole} onClosed={()=>setEmpForManageRole(null)} />
+      </GlobalModel>
       )}
-      {/* {showModal && (<div
-        className={`modal fade ${showModal ? "show" : ""} `}
-        tabIndex="-1"
-        role="dialog"
-        style={{ display: showModal ? "block" : "none" }}
-        aria-hidden={!showModal}
-      >
-        <div className="modal-dialog modal-xl modal-dialog-centered ">
-          <div
-            className="modal-content overflow-y-auto overflow-x-hidden"
-            style={{ maxHeight: "90vh" }}
-          >
-            <ManageEmployee
-              employeeId={selectedEmployeeId}
-              onClosed={closeModal}
-            />
-          </div>
-        </div>
-      </div> )} */}
       
       {showModal && (
         <GlobalModel isOpen={showModal} size="lg" closeModal={()=>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)
                                         }
                                       >
                                         <i className="bx bx-cog bx-sm"></i>{" "}
@@ -670,7 +659,7 @@ const handleAllEmployeesToggle = (e) => {
                 <div style={{ width: "1%" }}></div>
 
                 {/* Pagination */}
-                {!loading && displayData.length > itemsPerPage && (
+                {!loading && displayData.length > ITEMS_PER_PAGE && (
                   <nav aria-label="Page">
                     <ul className="pagination pagination-sm justify-content-end py-1">
                       <li