src/hooks/useEmployees.js

@@ -277,37 +277,27 @@ export const useSuspendEmployee = ({
   );
 
   return useMutation({
-    // Expect both employeeId and active status
+    mutationFn: async (employeeId) => {
-    mutationFn: async ({ employeeId, active }) => {
       setemployeeLodaing(true);
-      return await EmployeeRepository.deleteEmployee(employeeId, active);
+      return await EmployeeRepository.deleteEmployee(employeeId);
     },
 
-    onSuccess: (_, { employeeId, active }) => {
+    onSuccess: (_, employeeId) => {
-      const message =
+      showToast("Employee suspended successfully.", "success");
-        active === false
-          ? "Employee suspended successfully."
-          : "Employee reactivated successfully.";
-
-      showToast(message, "success");
       setIsDeleteModalOpen(false);
 
-      // Invalidate relevant queries
+      // Invalidate only the required employee-related queries
       queryClient.invalidateQueries({ queryKey: ["employee", employeeId] });
       queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
 
       if (selectedProjectId) {
-        queryClient.invalidateQueries({
+        queryClient.invalidateQueries({ queryKey: ["projectEmployees", selectedProjectId] });
-          queryKey: ["projectEmployees", selectedProjectId],
-        });
       }
     },
 
     onError: (error) => {
       showToast(
-        error.response?.data?.message ||
+        error.response?.data?.message || error.message || "An unexpected error occurred",
-          error.message ||
-          "An unexpected error occurred",
         "error"
       );
       setIsDeleteModalOpen(false);
@@ -319,7 +309,6 @@ export const useSuspendEmployee = ({
   });
 };
 
-
 export const useUpdateEmployeeRoles = ({
   onClose,
   resetForm,

src/pages/employee/EmployeeList.jsx

@@ -176,10 +176,12 @@ const EmployeeList = () => {
   useEffect(() => {
     if (!loading && Array.isArray(employees)) {
       const sorted = [...employees].sort((a, b) => {
-        const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""
+        const nameA = `${a.firstName || ""}${a.middleName || ""}${
-          }`.toLowerCase();
+          a.lastName || ""
-        const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
+        }`.toLowerCase();
-          }`.toLowerCase();
+        const nameB = `${b.firstName || ""}${b.middleName || ""}${
+          b.lastName || ""
+        }`.toLowerCase();
         return nameA?.localeCompare(nameB);
       });
 
@@ -272,21 +274,12 @@ const EmployeeList = () => {
         >
           <ConfirmModal
             type={"delete"}
-            header={
+            header={"Suspend Employee"}
-              selectedEmpFordelete?.isActive
+            message={"Are you sure you want delete?"}
-                ? "Suspend Employee"
+            onSubmit={suspendEmployee}
-                : "Reactivate Employee"
-            }
-            message={`Are you sure you want to ${selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
-              } this employee?`}
-            onSubmit={() =>
-              suspendEmployee({
-                employeeId: selectedEmpFordelete.id,
-                active: !selectedEmpFordelete.isActive,
-              })
-            }
             onClose={() => setIsDeleteModalOpen(false)}
             loading={employeeLodaing}
+            paramData={selectedEmpFordelete}
           />
         </div>
       )}
@@ -510,8 +503,9 @@ const EmployeeList = () => {
                         Status
                       </th>
                       <th
-                        className={`sorting_disabled  ${!Manage_Employee && "d-none"
+                        className={`sorting_disabled  ${
-                          }`}
+                          !Manage_Employee && "d-none"
+                        }`}
                         rowSpan="1"
                         colSpan="1"
                         style={{ width: "50px" }}
@@ -531,9 +525,9 @@ const EmployeeList = () => {
                     )}
                     {/* Conditional messages for no data or no search results */}
                     {!loading &&
-                      displayData?.length === 0 &&
+                    displayData?.length === 0 &&
-                      searchText &&
+                    searchText &&
-                      !showAllEmployees ? (
+                    !showAllEmployees ? (
                       <tr>
                         <td colSpan={8}>
                           <small className="muted">
@@ -543,8 +537,8 @@ const EmployeeList = () => {
                       </tr>
                     ) : null}
                     {!loading &&
-                      displayData?.length === 0 &&
+                    displayData?.length === 0 &&
-                      (!searchText || showAllEmployees) ? (
+                    (!searchText || showAllEmployees) ? (
                       <tr>
                         <td
                           colSpan={8}
@@ -636,56 +630,47 @@ const EmployeeList = () => {
                                   <i className="bx bx-dots-vertical-rounded bx-md"></i>
                                 </button>
                                 <div className="dropdown-menu dropdown-menu-end">
-                                  {/* View always visible */}
                                   <button
-                                    onClick={() => navigate(`/employee/${item.id}`)}
+                                    onClick={() =>
+                                      navigate(`/employee/${item.id}`)
+                                    }
                                     className="dropdown-item py-1"
                                   >
                                     <i className="bx bx-detail bx-sm"></i> View
                                   </button>
-
+                                  <button
-                                  {/* If ACTIVE employee */}
+                                    className="dropdown-item py-1"
-                                  {item.isActive && (
+                                    onClick={() => {
+                                      handleEmployeeModel(item.id);
+                                    }}
+                                  >
+                                    <i className="bx bx-edit bx-sm"></i> Edit
+                                  </button>
+                                  {!item.isSystem && (
                                     <>
                                       <button
                                         className="dropdown-item py-1"
-                                        onClick={() => handleEmployeeModel(item.id)}
+                                        onClick={() =>
+                                          handleOpenDelete(item.id)
+                                        }
                                       >
-                                        <i className="bx bx-edit bx-sm"></i> Edit
+                                        <i className="bx bx-task-x bx-sm"></i>{" "}
+                                        Suspend
                                       </button>
-
-                                      {/* Suspend only when active */}
-                                      {item.isActive && (
-                                        <button
-                                          className="dropdown-item py-1"
-                                          onClick={() => handleOpenDelete(item)}
-                                        >
-                                          <i className="bx bx-task-x bx-sm"></i> Suspend
-                                        </button>
-                                      )}
-
                                       <button
                                         className="dropdown-item py-1"
                                         type="button"
                                         data-bs-toggle="modal"
                                         data-bs-target="#managerole-modal"
-                                        onClick={() => setEmpForManageRole(item.id)}
+                                        onClick={() =>
+                                          setEmpForManageRole(item.id)
+                                        }
                                       >
-                                        <i className="bx bx-cog bx-sm"></i> Manage Role
+                                        <i className="bx bx-cog bx-sm"></i>{" "}
+                                        Manage Role
                                       </button>
-
                                     </>
                                   )}
-
-                                  {/* If INACTIVE employee AND inactive toggle is ON */}
-                                  {!item.isActive && showInactive && (
-                                    <button
-                                      className="dropdown-item py-1"
-                                      onClick={() => handleOpenDelete(item)}
-                                    >
-                                      <i className="bx bx-refresh bx-sm me-1"></i> Re-activate
-                                    </button>
-                                  )}
                                 </div>
                               </div>
                             </td>
@@ -702,8 +687,9 @@ const EmployeeList = () => {
                   <nav aria-label="Page">
                     <ul className="pagination pagination-sm justify-content-end py-1">
                       <li
-                        className={`page-item ${currentPage === 1 ? "disabled" : ""
+                        className={`page-item ${
-                          }`}
+                          currentPage === 1 ? "disabled" : ""
+                        }`}
                       >
                         <button
                           className="page-link btn-xs"
@@ -716,8 +702,9 @@ const EmployeeList = () => {
                       {[...Array(totalPages)]?.map((_, index) => (
                         <li
                           key={index}
-                          className={`page-item ${currentPage === index + 1 ? "active" : ""
+                          className={`page-item ${
-                            }`}
+                            currentPage === index + 1 ? "active" : ""
+                          }`}
                         >
                           <button
                             className="page-link"
@@ -729,8 +716,9 @@ const EmployeeList = () => {
                       ))}
 
                       <li
-                        className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                        className={`page-item ${
-                          }`}
+                          currentPage === totalPages ? "disabled" : ""
+                        }`}
                       >
                         <button
                           className="page-link"

src/repositories/EmployeeRepository.jsx

@@ -10,7 +10,7 @@ const EmployeeRepository = {
   updateEmployee: (id, data) => api.put(`/users/${id}`, data),
   // deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
   getEmployeeProfile: (id) => api.get(`/api/employee/profile/get/${id}`),
-  deleteEmployee: (id,active) => api.delete(`/api/employee/${id}?active=${active}`),
+  deleteEmployee: (id) => api.delete(`/api/employee/${id}`),
  getEmployeeName: (projectId, search) => {
   const params = new URLSearchParams();