src/pages/Directory/DirectoryListTableHeader.jsx

@@ -7,38 +7,33 @@ const DirectoryListTableHeader = ({ children }) => {
       <table className="table px-2">
         <thead>
           <tr>
-            <th colSpan={2} className="text-start">
+            <th colSpan={2}>
               <div className="d-flex align-items-center gap-1">
                 <span>Name</span>
               </div>
             </th>
             <th className="px-2 text-start">
-              <div className="d-flex align-items-center gap-1">
+              <div className="d-flex text-center align-items-center gap-1 justify-content-start">
                 <span>Email</span>
               </div>
             </th>
-            <th className="mx-2 text-start">
-              <div className="d-flex align-items-center gap-1">
+            <th className="mx-2">
+              <div className="d-flex align-items-center m-0 p-0 gap-1">
                 <span>Phone</span>
               </div>
             </th>
-            <th colSpan={2} className="mx-2 ps-20 text-start">
-              <span>Organization</span>
-            </th>
-            <th className="mx-2 text-start">
-              <span>Category</span>
-            </th>
-            <th className="text-start">
-              <span>Action</span>
+            <th colSpan={2} className="mx-2 ps-20">
+              Organization
             </th>
+            <th className="mx-2">Category</th>
+            <th>Action</th>
           </tr>
         </thead>
-        <tbody className="table-border-bottom-0 overflow-auto text-start">
+        <tbody className="table-border-bottom-0 overflow-auto">
           {children}
         </tbody>
       </table>
     </div>
   );
 };
-
 export default DirectoryListTableHeader;

src/pages/employee/EmployeeList.jsx

@@ -6,13 +6,13 @@ import Avatar from "../../components/common/Avatar";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import ManageEmp from "../../components/Employee/ManageRole";
 import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
-import { useProjects } from "../../hooks/useProjects"; // Keep if you use projects elsewhere
-import { useProfile } from "../../hooks/useProfile"; // Keep if you use profile elsewhere
-import { hasUserPermission } from "../../utils/authUtils"; // Keep if you use this elsewhere
+import { useProjects } from "../../hooks/useProjects";
+import { useProfile } from "../../hooks/useProfile";
+import { hasUserPermission } from "../../utils/authUtils";
 import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
 import { clearCacheKey } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
+import SuspendEmp from "../../components/Employee/SuspendEmp";
 import {
   exportToCSV,
   exportToExcel,
@@ -24,9 +24,13 @@ import ManageEmployee from "../../components/Employee/ManageEmployee";
 import ConfirmModal from "../../components/common/ConfirmModal";
 import { useSelector } from "react-redux";
 import eventBus from "../../services/eventBus";
-import { newlineChars } from "pdf-lib"; // Unused import, consider removing
+import { newlineChars } from "pdf-lib";
 
 const EmployeeList = () => {
+  // const selectedProjectId = useSelector((store) => store.localVariables.projectId);
+  // const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || "");
+  // const { projects, loading: projectLoading } = useProjects();
+
   const selectedProjectId = useSelector(
     (store) => store.localVariables.projectId
   );
@@ -36,8 +40,9 @@ const EmployeeList = () => {
   const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
+    // useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive);
     useEmployeesAllOrByProjectId(
-      showAllEmployees ? null : selectedProjectId, // Use selectedProjectId here
+      showAllEmployees ? null : selectedProjectId,
       showInactive
     );
 
@@ -68,7 +73,7 @@ const EmployeeList = () => {
     }
     const lowercasedText = text.toLowerCase();
     return data.filter((item) => {
-      const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
+      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() : "";
@@ -100,12 +105,13 @@ const EmployeeList = () => {
       setEmployeeList(sorted);
       const results = applySearchFilter(sorted, searchText);
       setFilteredData(results);
+
     } else if (!loading && !employees) {
       setEmployeeList([]);
       setFilteredData([]);
     }
-  }, [loading, employees, showAllEmployees, searchText, selectedProjectId]); // Add selectedProjectId to dependencies
-
+  }, [loading, employees, showAllEmployees, searchText, selectedProjectId]);
+  
   const displayData = filteredData;
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -134,7 +140,7 @@ const EmployeeList = () => {
     }
     setShowModal(false);
     clearCacheKey("employeeProfile");
-    recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
+    recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
   };
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
@@ -149,7 +155,7 @@ const EmployeeList = () => {
         clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
         // Recall data based on current filter states after deletion to refresh the table
-        recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
+        recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
         setemployeeLodaing(false);
         setIsDeleteModalOpen(false);
       })
@@ -198,7 +204,7 @@ const EmployeeList = () => {
 
   const handleToggle = (e) => {
     setShowInactive(e.target.checked);
-    recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
+    recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProject);
   };
 
   const handleAllEmployeesToggle = (e) => {
@@ -211,7 +217,7 @@ const EmployeeList = () => {
       recallEmployeeData(false, selectedProjectId);
     }
 
-    // recallEmployeeData(false, isChecked ? null : selectedProject); // This line also used selectedProject
+    // recallEmployeeData(false, isChecked ? null : selectedProject);
   };
 
   const handleEmployeeModel = (id) => {
@@ -224,6 +230,10 @@ const EmployeeList = () => {
     setIsDeleteModalOpen(true);
   };
 
+  // useEffect(() => {
+  //   setSelectedProject(selectedProjectId || "");
+  // }, [selectedProjectId]);
+
   useEffect(() => {
     if (!showAllEmployees) {
       recallEmployeeData(showInactive, selectedProjectId);
@@ -234,9 +244,9 @@ const EmployeeList = () => {
     (msg) => {
       if(employees.some((item) => item.id == msg.employeeId)){
         setEmployeeList([]);
-        recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
+        recallEmployeeData(showInactive);
       }
-    },[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
+    },[employees]
   );
 
   useEffect(() => {
@@ -360,6 +370,8 @@ const EmployeeList = () => {
                           className="form-control form-control-sm"
                           placeholder="Search User"
                           aria-controls="DataTables_Table_0"
+                        // The 'disabled' attribute is intentionally removed here
+                        // to keep the search box always active as requested.
                         />
                       </label>
                     </div>
@@ -715,4 +727,4 @@ const EmployeeList = () => {
   );
 };
 
-export default EmployeeList;
+export default EmployeeList;