From 75ca3d15040a6ca017ca6dd2bc4fa312fc68962e Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 11 Sep 2025 17:49:32 +0530
Subject: [PATCH] Display Only "Re-activate" Button for Inactive Employees in
 Action Column

---
 src/pages/employee/EmployeeList.jsx | 151 ++++++++++++++--------------
 1 file changed, 78 insertions(+), 73 deletions(-)

diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 37bccb60..a7d6b918 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -18,7 +18,7 @@ import {
   VIEW_ALL_EMPLOYEES,
   VIEW_TEAM_MEMBERS,
 } from "../../utils/constants";
-import { clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
+import { clearCacheKey } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
 import {
@@ -38,10 +38,9 @@ import usePagination from "../../hooks/usePagination";
 import { setProjectId } from "../../slices/localVariablesSlice";
 
 const EmployeeList = () => {
-  // const selectedProjectId = useSelector(
-  //   (store) => store.localVariables.projectId
-  // );
-  const selectedProjectId = useSelectedProject();
+  const selectedProjectId = useSelector(
+    (store) => store.localVariables.projectId
+  );
   const { projectNames, loading: projectLoading, fetchData } = useProjectName();
 
   const dispatch = useDispatch();
@@ -79,11 +78,11 @@ const EmployeeList = () => {
     }
   );
 
-useEffect(() => {
-  if (!selectedProjectId  && projectNames?.length > 0) {
-    dispatch(setProjectId(projectNames[0].id));
-  }
-}, [selectedProjectId, projectNames, dispatch]);
+  useEffect(() => {
+    if (selectedProjectId === null) {
+      dispatch(setProjectId(projectNames[0]?.id));
+    }
+  }, [selectedProjectId]);
   const navigate = useNavigate();
 
   const applySearchFilter = (data, text) => {
@@ -177,12 +176,10 @@ useEffect(() => {
   useEffect(() => {
     if (!loading && Array.isArray(employees)) {
       const sorted = [...employees].sort((a, b) => {
-        const nameA = `${a.firstName || ""}${a.middleName || ""}${
-          a.lastName || ""
-        }`.toLowerCase();
-        const nameB = `${b.firstName || ""}${b.middleName || ""}${
-          b.lastName || ""
-        }`.toLowerCase();
+        const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""
+          }`.toLowerCase();
+        const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
+          }`.toLowerCase();
         return nameA?.localeCompare(nameB);
       });
 
@@ -221,10 +218,10 @@ useEffect(() => {
         recallEmployeeData(
           showInactive,
           showAllEmployees ? null : selectedProjectId
-        );
+        ); // Use selectedProjectId here
       }
     },
-    [employees, showInactive, showAllEmployees, selectedProjectId]
+    [employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
   );
 
   useEffect(() => {
@@ -247,7 +244,7 @@ useEffect(() => {
       )}
 
       {showModal && (
-        <GlobalModel  
+        <GlobalModel
           isOpen={showModal}
           size="lg"
           closeModal={() => setShowModal(false)}
@@ -259,18 +256,24 @@ useEffect(() => {
           />
         </GlobalModel>
       )}
-        {IsDeleteModalOpen && (
+
+      {IsDeleteModalOpen && (
         <ConfirmModal
           isOpen={IsDeleteModalOpen}
           type="delete"
-          header="Suspend Employee"
-          message="Are you sure you want suspend?"
+          header={
+            selectedEmpFordelete?.isActive
+              ? "Suspend Employee"
+              : "Reactivate Employee"
+          }
+          message={`Are you sure you want to ${selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
+            } this employee?`}
           onSubmit={(id) =>
-              suspendEmployee({
-                employeeId:id ,
-                active: !selectedEmpFordelete.isActive,
-              })
-            }
+            suspendEmployee({
+              employeeId: id,
+              active: !selectedEmpFordelete.isActive,
+            })
+          }
           onClose={() => setIsDeleteModalOpen(false)}
           loading={employeeLodaing}
           paramData={selectedEmpFordelete.id}
@@ -496,9 +499,8 @@ useEffect(() => {
                         Status
                       </th>
                       <th
-                        className={`sorting_disabled  ${
-                          !Manage_Employee && "d-none"
-                        }`}
+                        className={`sorting_disabled  ${!Manage_Employee && "d-none"
+                          }`}
                         rowSpan="1"
                         colSpan="1"
                         style={{ width: "50px" }}
@@ -518,9 +520,9 @@ useEffect(() => {
                     )}
                     {/* Conditional messages for no data or no search results */}
                     {!loading &&
-                    displayData?.length === 0 &&
-                    searchText &&
-                    !showAllEmployees ? (
+                      displayData?.length === 0 &&
+                      searchText &&
+                      !showAllEmployees ? (
                       <tr>
                         <td colSpan={8}>
                           <small className="muted">
@@ -530,14 +532,14 @@ useEffect(() => {
                       </tr>
                     ) : null}
                     {!loading &&
-                    displayData?.length === 0 &&
-                    (!searchText || showAllEmployees) ? (
+                      displayData?.length === 0 &&
+                      (!searchText || showAllEmployees) ? (
                       <tr>
                         <td
                           colSpan={8}
                           style={{ paddingTop: "20px", textAlign: "center" }}
                         >
-                         No team members assigned yet
+                          No Data Found
                         </td>
                       </tr>
                     ) : null}
@@ -556,9 +558,7 @@ useEffect(() => {
                               <div className="d-flex flex-column">
                                 <a
                                   onClick={() =>
-                                    navigate(
-                                      `/employee/${item.id}?for=attendance`
-                                    )
+                                    navigate(`/employee/${item.id}`)
                                   }
                                   className="text-heading text-truncate cursor-pointer"
                                 >
@@ -594,10 +594,9 @@ useEffect(() => {
                               {item.jobRole || "Not Assign Yet"}
                             </span>
                           </td>
+
                           <td className=" d-none  d-md-table-cell">
-                            {item.joiningDate
-                              ? moment(item.joiningDate).format("DD-MMM-YYYY")
-                              : "NA"}
+                            {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
                           </td>
                           <td>
                             {showInactive ? (
@@ -626,47 +625,56 @@ useEffect(() => {
                                   <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
-                                    className="dropdown-item py-1"
-                                    onClick={() => {
-                                      handleEmployeeModel(item.id);
-                                    }}
-                                  >
-                                    <i className="bx bx-edit bx-sm"></i> Edit
-                                  </button>
-                                  {!item.isSystem && (
+
+                                  {/* If ACTIVE employee */}
+                                  {item.isActive && (
                                     <>
                                       <button
                                         className="dropdown-item py-1"
-                                        onClick={() =>
-                                          handleOpenDelete(item)
-                                        }
+                                        onClick={() => handleEmployeeModel(item.id)}
                                       >
-                                        <i className="bx bx-task-x bx-sm"></i>{" "}
-                                        Suspend
+                                        <i className="bx bx-edit bx-sm"></i> Edit
                                       </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>
@@ -683,9 +691,8 @@ useEffect(() => {
                   <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"
@@ -698,9 +705,8 @@ useEffect(() => {
                       {[...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"
@@ -712,9 +718,8 @@ useEffect(() => {
                       ))}
 
                       <li
-                        className={`page-item ${
-                          currentPage === totalPages ? "disabled" : ""
-                        }`}
+                        className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                          }`}
                       >
                         <button
                           className="page-link"