Merge pull request 'Ensured all table headers and cells are left-aligned for consistent layout and better readability.' (#214) from Kartik_Enhancement#517 into Issues_Jun_3W

Reviewed-on: #214

src/pages/Directory/DirectoryListTableHeader.jsx

@@ -7,33 +7,38 @@ const DirectoryListTableHeader = ({ children }) => {
       <table className="table px-2">
         <thead>
           <tr>
-            <th colSpan={2}>
+            <th colSpan={2} className="text-start">
               <div className="d-flex align-items-center gap-1">
                 <span>Name</span>
               </div>
             </th>
             <th className="px-2 text-start">
-              <div className="d-flex text-center align-items-center gap-1 justify-content-start">
+              <div className="d-flex align-items-center gap-1">
                 <span>Email</span>
               </div>
             </th>
-            <th className="mx-2">
-              <div className="d-flex align-items-center m-0 p-0 gap-1">
+            <th className="mx-2 text-start">
+              <div className="d-flex align-items-center gap-1">
                 <span>Phone</span>
               </div>
             </th>
-            <th colSpan={2} className="mx-2 ps-20">
-              Organization
+            <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>
-            <th className="mx-2">Category</th>
-            <th>Action</th>
           </tr>
         </thead>
-        <tbody className="table-border-bottom-0 overflow-auto">
+        <tbody className="table-border-bottom-0 overflow-auto text-start">
           {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";
-import { useProfile } from "../../hooks/useProfile";
-import { hasUserPermission } from "../../utils/authUtils";
+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 { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
 import { clearCacheKey } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import SuspendEmp from "../../components/Employee/SuspendEmp";
+import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
 import {
   exportToCSV,
   exportToExcel,
@@ -24,13 +24,9 @@ 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";
+import { newlineChars } from "pdf-lib"; // Unused import, consider removing
 
 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
   );
@@ -40,9 +36,8 @@ const EmployeeList = () => {
   const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
-    // useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive);
     useEmployeesAllOrByProjectId(
-      showAllEmployees ? null : selectedProjectId,
+      showAllEmployees ? null : selectedProjectId, // Use selectedProjectId here
       showInactive
     );
 
@@ -73,7 +68,7 @@ const EmployeeList = () => {
     }
     const lowercasedText = text.toLowerCase();
     return data.filter((item) => {
-      const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
+      const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
       const email = item.email ? item.email.toLowerCase() : "";
       const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : "";
       const jobRole = item.jobRole ? item.jobRole.toLowerCase() : "";
@@ -105,13 +100,12 @@ const EmployeeList = () => {
       setEmployeeList(sorted);
       const results = applySearchFilter(sorted, searchText);
       setFilteredData(results);
-
     } else if (!loading && !employees) {
       setEmployeeList([]);
       setFilteredData([]);
     }
-  }, [loading, employees, showAllEmployees, searchText, selectedProjectId]);
-  
+  }, [loading, employees, showAllEmployees, searchText, selectedProjectId]); // Add selectedProjectId to dependencies
+
   const displayData = filteredData;
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -140,7 +134,7 @@ const EmployeeList = () => {
     }
     setShowModal(false);
     clearCacheKey("employeeProfile");
-    recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
+    recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
   };
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
@@ -155,7 +149,7 @@ const EmployeeList = () => {
         clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
         // Recall data based on current filter states after deletion to refresh the table
-        recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
+        recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
         setemployeeLodaing(false);
         setIsDeleteModalOpen(false);
       })
@@ -204,7 +198,7 @@ const EmployeeList = () => {
 
   const handleToggle = (e) => {
     setShowInactive(e.target.checked);
-    recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProject);
+    recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
   };
 
   const handleAllEmployeesToggle = (e) => {
@@ -217,7 +211,7 @@ const EmployeeList = () => {
       recallEmployeeData(false, selectedProjectId);
     }
 
-    // recallEmployeeData(false, isChecked ? null : selectedProject);
+    // recallEmployeeData(false, isChecked ? null : selectedProject); // This line also used selectedProject
   };
 
   const handleEmployeeModel = (id) => {
@@ -230,10 +224,6 @@ const EmployeeList = () => {
     setIsDeleteModalOpen(true);
   };
 
-  // useEffect(() => {
-  //   setSelectedProject(selectedProjectId || "");
-  // }, [selectedProjectId]);
-
   useEffect(() => {
     if (!showAllEmployees) {
       recallEmployeeData(showInactive, selectedProjectId);
@@ -244,9 +234,9 @@ const EmployeeList = () => {
     (msg) => {
       if(employees.some((item) => item.id == msg.employeeId)){
         setEmployeeList([]);
-        recallEmployeeData(showInactive);
+        recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
       }
-    },[employees]
+    },[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
   );
 
   useEffect(() => {
@@ -370,8 +360,6 @@ 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>
@@ -727,4 +715,4 @@ const EmployeeList = () => {
   );
 };
 
-export default EmployeeList;
+export default EmployeeList;