resolved localCompare error

src/components/Activities/Attendance.jsx

@@ -5,9 +5,15 @@ import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import usePagination from "../../hooks/usePagination";
 import { useNavigate } from "react-router-dom";
-import {ITEMS_PER_PAGE} from "../../utils/constants";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
 
-const Attendance = ({ attendance, getRole, handleModalData }) => {
+const Attendance = ({
+  attendance,
+  getRole,
+  handleModalData,
+  setshowOnlyCheckout,
+  showOnlyCheckout,
+}) => {
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
   const [todayDate, setTodayDate] = useState(new Date());
@@ -19,7 +25,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
   const sortByName = (a, b) => {
     const nameA = (a.firstName + a.lastName).toLowerCase();
     const nameB = (b.firstName + b.lastName).toLowerCase();
-    return nameA.localeCompare(nameB);
+    return nameA?.localeCompare(nameB);
   };
 
   // Filter employees based on activity
@@ -39,41 +45,47 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
   return (
     <>
       <div className="table-responsive text-nowrap">
+        <div className="d-flex text-start align-items-center py-2">
+          <strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong>
+
+          <div className="form-check form-switch text-start m-0 ms-5">
+            <input
+              type="checkbox"
+              className="form-check-input"
+              role="switch"
+              id="inactiveEmployeesCheckbox"
+              checked={showOnlyCheckout}
+              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
+            />
+            <label className="form-check-label ms-0">Show Pending</label>
+          </div>
+        </div>
         {attendance && attendance.length > 0 && (
           <>
             <table className="table ">
               <thead>
-                <tr className="border-none" style={{ textAlign: 'left' }}>
+                <tr className="border-top-1">
-                  <td style={{ borderBottom: 'none' }}>
+                  <th colSpan={2}>Name</th>
-                    <strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
+                  <th>Role</th>
-                  </td>
+                  <th>
-                  <td style={{ paddingLeft: '20px', borderBottom: 'none' }}></td>
-                </tr>
-
-                <tr>
-                  <th className="border-top-0" colSpan={2}>
-                    Name
-                  </th>
-                  <th className="border-top-0">Role</th>
-                  <th className="border-top-0">
                     <i className="bx bxs-down-arrow-alt text-success"></i>
                     Check-In
                   </th>
-                  <th className="border-top-0">
+                  <th>
                     <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
                   </th>
-                  <th className="border-top-0">Actions</th>
+                  <th>Actions</th>
                 </tr>
               </thead>
-              <tbody className="table-border-bottom-0">
+              <tbody className="table-border-bottom-0 ">
                 {currentItems &&
                   currentItems
                     .sort((a, b) => {
                       // If checkInTime exists, compare it, otherwise, treat null as earlier than a date
-                      const checkInA = a.checkInTime
+                      const checkInA = a?.checkInTime
                         ? new Date(a.checkInTime)
                         : new Date(0);
-                      const checkInB = b.checkInTime
+                      const checkInB = b?.checkInTime
                         ? new Date(b.checkInTime)
                         : new Date(0);
                       return checkInB - checkInA; // Sort in descending order of checkInTime
@@ -131,12 +143,13 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
               </tbody>
             </table>
 
-            {!loading>20 && (
+            {!loading > 20 && (
               <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"
@@ -148,8 +161,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                   {[...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 "
@@ -160,8 +174,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                     </li>
                   ))}
                   <li
-                    className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                    className={`page-item ${
-                      }`}
+                      currentPage === totalPages ? "disabled" : ""
+                    }`}
                   >
                     <button
                       className="page-link "

src/components/Activities/AttendcesLogs.jsx

@@ -11,7 +11,6 @@ import { getCachedData } from "../../slices/apiDataManager";
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
   const maxPage = Math.ceil(data.length / itemsPerPage);
-
   const currentItems = useMemo(() => {
     const startIndex = (currentPage - 1) * itemsPerPage;
     const endIndex = startIndex + itemsPerPage;
@@ -21,10 +20,21 @@ const usePagination = (data, itemsPerPage) => {
   const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
   const resetPage = useCallback(() => setCurrentPage(1), []);
 
-  return { currentPage, totalPages: maxPage, currentItems, paginate, resetPage };
+  return {
+    currentPage,
+    totalPages: maxPage,
+    currentItems,
+    paginate,
+    resetPage,
+  };
 };
 
-const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
+const AttendanceLog = ({
+  handleModalData,
+  projectId,
+  setshowOnlyCheckout,
+  showOnlyCheckout,
+}) => {
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
   const { data, loading, error } = useSelector((store) => store.attendanceLogs);
@@ -54,7 +64,7 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
   const sortByName = (a, b) => {
     const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
     const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-    return nameA.localeCompare(nameB);
+    return nameA?.localeCompare(nameB);
   };
 
   useEffect(() => {
@@ -83,14 +93,24 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
     const group3 = filteredData
       .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
       .sort(sortByName);
-    const group4 = filteredData
+    const group4 = filteredData.filter(
-      .filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
+      (d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
+    );
     const group5 = filteredData
       .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
       .sort(sortByName);
-    const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
+    const group6 = filteredData
+      .filter((d) => d.activity === 5)
+      .sort(sortByName);
 
-    const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
+    const sortedList = [
+      ...group1,
+      ...group2,
+      ...group3,
+      ...group4,
+      ...group5,
+      ...group6,
+    ];
 
     // Group by date
     const groupedByDate = sortedList.reduce((acc, item) => {
@@ -103,17 +123,22 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
     }, {});
 
     // Sort dates in descending order
-    const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
+    const sortedDates = Object.keys(groupedByDate).sort(
+      (a, b) => new Date(b) - new Date(a)
+    );
 
     // Create the final sorted array
     const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
     setProcessedData(finalData);
   }, [data, showOnlyCheckout]);
 
-  const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination(
+  const {
-    processedData,
+    currentPage,
-    20
+    totalPages,
-  );
+    currentItems: paginatedAttendances,
+    paginate,
+    resetPage,
+  } = usePagination(processedData, 20);
 
   // Reset to the first page whenever processedData changes (due to switch on/off)
   useEffect(() => {
@@ -122,57 +147,89 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
 
   return (
     <>
-      
+      <div
-        <div
+        className="dataTables_length text-start py-2 d-flex justify-content-between"
-          className="dataTables_length text-start py-2 d-flex justify-content-between"
+        id="DataTables_Table_0_length"
-          id="DataTables_Table_0_length"
+      >
-        >
+        <div className="d-flex align-items-center my-0 ">
-          <div className="col-md-3 my-0 ">
+          <DateRangePicker
-            <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
+            onRangeChange={setDateRange}
-          </div>
+            defaultStartDate={yesterday}
-          <div className="col-md-2 m-0 text-end">
+          />
-            <i
+          <div className="form-check form-switch text-start m-0 ms-5">
-              className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
+            <input
-                }`}
+              type="checkbox"
-              title="Refresh"
+              className="form-check-input"
-              onClick={() => setIsRefreshing(true)}
+              role="switch"
+              id="inactiveEmployeesCheckbox"
+              checked={showOnlyCheckout}
+              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
             />
+            <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
-        <div className="table-responsive text-nowrap" style={{ minHeight: "250px" }}>
+        <div className="col-md-2 m-0 text-end">
-          {data && data.length > 0 && (
+          <i
-            <table className="table mb-0">
+            className={`bx bx-refresh cursor-pointer fs-4 ${
-              <thead>
+              loading || isRefreshing ? "spin" : ""
+            }`}
+            title="Refresh"
+            onClick={() => setIsRefreshing(true)}
+          />
+        </div>
+      </div>
+      <div
+        className="table-responsive text-nowrap"
+        style={{ minHeight: "250px" }}
+      >
+        {data && data.length > 0 && (
+          <table className="table mb-0">
+            <thead>
+              <tr>
+                <th className="border-top-1" colSpan={2}>
+                  Name
+                </th>
+                <th className="border-top-1">Date</th>
+                <th>
+                  <i className="bx bxs-down-arrow-alt text-success"></i>{" "}
+                  Check-In
+                </th>
+                <th>
+                  <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
+                </th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {(loading || isRefreshing) && (
                 <tr>
-                  <th className="border-top-1" colSpan={2}>
+                  <td colSpan={6}>Loading...</td>
-                    Name
-                  </th>
-                  <th className="border-top-1">Date</th>
-                  <th>
-                    <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
-                  </th>
-                  <th>
-                    <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
-                  </th>
-                  <th>Action</th>
                 </tr>
-              </thead>
+              )}
-              <tbody>
+              {!loading &&
-                {(loading || isRefreshing) && (
+                !isRefreshing &&
-                  <tr>
+                paginatedAttendances.reduce((acc, attendance, index, arr) => {
-                    <td colSpan={6}>Loading...</td>
+                  const currentDate = moment(
-                  </tr>
+                    attendance.checkInTime || attendance.checkOutTime
-                )}
+                  ).format("YYYY-MM-DD");
-                {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
-                  const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
                   const previousAttendance = arr[index - 1];
-                  const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
+                  const previousDate = previousAttendance
+                    ? moment(
+                        previousAttendance.checkInTime ||
+                          previousAttendance.checkOutTime
+                      ).format("YYYY-MM-DD")
+                    : null;
 
                   if (!previousDate || currentDate !== previousDate) {
                     acc.push(
-                      <tr key={`header-${currentDate}`} className="table-row-header">
+                      <tr
+                        key={`header-${currentDate}`}
+                        className="table-row-header"
+                      >
                         <td colSpan={6} className="text-start">
-                          <strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
+                          <strong>
+                            {moment(currentDate).format("DD-MM-YYYY")}
+                          </strong>
                         </td>
                       </tr>
                     );
@@ -186,10 +243,7 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
                             lastName={attendance.lastName}
                           />
                           <div className="d-flex flex-column">
-                            <a
+                            <a href="#" className="text-heading text-truncate">
-                              href="#"
-                              className="text-heading text-truncate"
-                            >
                               <span className="fw-normal">
                                 {attendance.firstName} {attendance.lastName}
                               </span>
@@ -198,11 +252,15 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
                         </div>
                       </td>
                       <td>
-                        {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
+                        {moment(
+                          attendance.checkInTime || attendance.checkOutTime
+                        ).format("DD-MMM-YYYY")}
                       </td>
                       <td>{convertShortTime(attendance.checkInTime)}</td>
                       <td>
-                        {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
+                        {attendance.checkOutTime
+                          ? convertShortTime(attendance.checkOutTime)
+                          : "--"}
                       </td>
                       <td className="text-center">
                         <RenderAttendanceStatus
@@ -216,40 +274,55 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
                   );
                   return acc;
                 }, [])}
-              </tbody>
+            </tbody>
-            </table>
+          </table>
-
+        )}
-
+        {!loading && !isRefreshing && data.length === 0 && (
-          )}
+          <span>No employee logs</span>
-          {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
+        )}
-          {error && !loading && !isRefreshing && (
+        {error && !loading && !isRefreshing && (
-            <tr>
+          <tr>
-              <td colSpan={6}>{error}</td>
+            <td colSpan={6}>{error}</td>
-            </tr>
+          </tr>
-          )}
+        )}
-        </div>
+      </div>
       {!loading && !isRefreshing && processedData.length > 10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
             <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
-              <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
+              <button
+                className="page-link btn-xs"
+                onClick={() => paginate(currentPage - 1)}
+              >
                 &laquo;
               </button>
             </li>
-            {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
-              <li
+              (pageNumber) => (
-                key={pageNumber}
+                <li
-                className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
+                  key={pageNumber}
-              >
+                  className={`page-item ${
-                <button className="page-link" onClick={() => paginate(pageNumber)}>
+                    currentPage === pageNumber ? "active" : ""
-                  {pageNumber}
+                  }`}
-                </button>
+                >
-              </li>
+                  <button
-            ))}
+                    className="page-link"
+                    onClick={() => paginate(pageNumber)}
+                  >
+                    {pageNumber}
+                  </button>
+                </li>
+              )
+            )}
             <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
+              className={`page-item ${
+                currentPage === totalPages ? "disabled" : ""
+              }`}
             >
-              <button className="page-link" onClick={() => paginate(currentPage + 1)}>
+              <button
+                className="page-link"
+                onClick={() => paginate(currentPage + 1)}
+              >
                 &raquo;
               </button>
             </li>

src/components/Activities/Regularization.jsx

@@ -20,7 +20,7 @@ const Regularization = ({ handleRequest }) => {
   const sortByName = (a, b) => {
     const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
     const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-    return nameA.localeCompare(nameB);
+    return nameA?.localeCompare(nameB);
   };
   const filteredData = [...regularizesList]?.sort(sortByName);
 

src/components/Employee/ManageEmployee.jsx

@@ -510,7 +510,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                           Select Role
                         </option>
                         {[...job_role]
-                          .sort((a, b) => a.name.localeCompare(b.name))
+                          .sort((a, b) => a?.name?.localeCompare(b.name))
                           .map((item) => (
                             <option value={item?.id} key={item.id}>
                               {item?.name}{" "}

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -273,7 +273,7 @@ const EditActivityModal = ({
                     activities
                       .slice()
                       .sort((a, b) =>
-                        (a.activityName || "").localeCompare(
+                        (a.activityName || "")?.localeCompare(
                           b.activityName || ""
                         )
                       )
@@ -312,7 +312,7 @@ const EditActivityModal = ({
                     categories
                       .slice()
                       .sort((a, b) =>
-                        (a.name || "").localeCompare(
+                        (a.name || "")?.localeCompare(
                           b.name || ""
                         )
                       )

src/components/Project/Infrastructure/FloorModel.jsx

@@ -140,7 +140,7 @@ const FloorModel = ({
                     buildings
                       .filter((building) => building?.name)
                       .sort((a, b) =>
-                        (a.name || "").localeCompare(b.name || "")
+                        (a.name || "")?.localeCompare(b.name || "")
                       )
                       .map((building) => (
                         <option key={building.id} value={building.id}>
@@ -172,7 +172,7 @@ const FloorModel = ({
                         [...selectedBuilding.floors]
                           .filter((floor) => floor?.floorName)
                           .sort((a, b) =>
-                            (a.floorName || "").localeCompare(
+                            (a.floorName || "")?.localeCompare(
                               b.floorName || ""
                             )
                           )

src/components/Project/Infrastructure/TaskModel.jsx

@@ -159,7 +159,7 @@ const TaskModel = ({
       const newCategories = categories?.slice()?.sort((a, b) => {
         const nameA = a?.name || "";
         const nameB = b?.name || "";
-        return nameA.localeCompare(nameB);
+        return nameA?.localeCompare(nameB);
       });
       setCategoryData(newCategories);
       setSelectedCategory(newCategories[0])
@@ -230,7 +230,7 @@ const TaskModel = ({
                         (floor) =>
                           floor?.floorName && Array.isArray(floor.workAreas)
                       )
-                      ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
+                      ?.sort((a, b) => a.floorName?.localeCompare(b.floorName))
                       ?.map((floor) => (
                         <option key={floor.id} value={floor.id}>
                           {floor.floorName} - ({floor.workAreas.length} Work
@@ -263,7 +263,7 @@ const TaskModel = ({
                     <option value="0">Select Work Area</option>
                     {selectedFloor.workAreas
                       ?.filter((workArea) => workArea?.areaName)
-                      ?.sort((a, b) => a.areaName.localeCompare(b.areaName))
+                      ?.sort((a, b) => a.areaName?.localeCompare(b.areaName))
                       ?.map((workArea) => (
                         <option key={workArea.id} value={workArea.id}>
                           {workArea.areaName}
@@ -299,7 +299,7 @@ const TaskModel = ({
                         ?.sort((a, b) => {
                           const nameA = a?.activityName || "";
                           const nameB = b?.activityName || "";
-                          return nameA.localeCompare(nameB);
+                          return nameA?.localeCompare(nameB);
                         })
                         ?.map((activity) => (
                           <option key={activity.id} value={activity.id}>

src/components/Project/Infrastructure/WorkAreaModel.jsx

@@ -197,7 +197,7 @@ const WorkAreaModel = ({
                       ?.sort((a, b) => {
                         const nameA = a.floorName || "";
                         const nameB = b.floorName || "";
-                        return nameA.localeCompare(nameB);
+                        return nameA?.localeCompare(nameB);
                       })
                       ?.map((floor) => (
                         <option key={floor.id} value={floor.id}>
@@ -231,7 +231,7 @@ const WorkAreaModel = ({
                         ?.sort((a, b) => {
                           const nameA = a.areaName || "";
                           const nameB = b.areaName || "";
-                          return nameA.localeCompare(nameB);
+                          return nameA?.localeCompare(nameB);
                         })
                         ?.map((workArea) => (
                           <option key={workArea.id} value={workArea.id}>

src/components/common/ImagePreviewstyle.css

@@ -43,8 +43,12 @@
 }
 
 .img-preview {
-    width: 100%;
+     width: 100%;
-  height: 500px;
+    height: 500px;
-  background-color: #E9E9E9;
+    object-fit: cover;
-  text-align: center;
+    object-position: center;
+}
+.img-preview img{
+    width: 100%;
+    height: 100%
 }

src/hooks/useEmployees.js

@@ -143,7 +143,8 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
   const [error, setError] = useState(null);
 
   const fetchData = async (showInactive) => {
-    if (projectId) {
+    if ( projectId )
+    {
       const Employees_cache = getCachedData("employeeListByProject");
       if (!Employees_cache || Employees_cache.projectId !== projectId) {
         setLoading(true);
@@ -166,18 +167,11 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
         setEmployees(Employees_cache.data);
         setLoading(false);
       }
-    } else {
+    } else
+    {
       const cacheKey = showInactive
         ? "allInactiveEmployeeList"
         : "allEmployeeList";
-      const employeesCache = getCachedData(cacheKey);
-
-      if (employeesCache) {
-        setEmployees(employeesCache.data);
-        setLoading(false);
-      } else {
-        setLoading(true);
-        setError(null);
 
         try {
           const response = await EmployeeRepository.getAllEmployeeList(
@@ -190,7 +184,7 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
           setError("Failed to fetch data.");
           setLoading(false);
         }
-      }
+      
     }
   };
 

src/hooks/useProjects.js

@@ -18,7 +18,7 @@ export const useProjects = () => {
     const filterProjects = (projectsList) => {
       return projectsList
         .filter((proj) => projectIds.includes(String(proj.id)))
-        .sort((a, b) => a.name.localeCompare(b.name));
+        .sort((a, b) => a?.name?.localeCompare(b.name));
     };
 
     const projects_cache = getCachedData("projectslist");

src/pages/Activities/AttendancePage.jsx

@@ -21,7 +21,7 @@ import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
 
 const AttendancePage = () => {
   const [activeTab, setActiveTab] = useState("all");
-  const [showOnlyCheckout, setShowOnlyCheckout] = useState(false);
+  const [showOnlyCheckout, setShowOnlyCheckout] = useState();
   const loginUser = getCachedProfileData();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
   const { projects, loading: projectLoading } = useProjects();
@@ -112,7 +112,7 @@ const AttendancePage = () => {
   //   )
   //   : attendances;
   const filteredAttendance = showOnlyCheckout
-    ? attendances?.filter((att) => att?.checkOutTime === null)
+    ? attendances?.filter((att) => att?.checkInTime !== null && att?.checkOutTime === null)
     : attendances;
 
   return (
@@ -230,6 +230,8 @@ const AttendancePage = () => {
                     attendance={filteredAttendance}
                     handleModalData={handleModalData}
                     getRole={getRole}
+                    setshowOnlyCheckout={setShowOnlyCheckout}
+                    showOnlyCheckout={showOnlyCheckout}
                   />
                 </div>
               </>
@@ -240,6 +242,7 @@ const AttendancePage = () => {
                 <AttendanceLog
                   handleModalData={handleModalData}
                   projectId={selectedProject}
+                  setshowOnlyCheckout={setShowOnlyCheckout}
                   showOnlyCheckout={showOnlyCheckout}
                 />
               </div>

src/pages/Directory/Directory.jsx

@@ -181,7 +181,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         (c.bucketIds || []).some((id) => selectedBucketIds.includes(id));
 
       return matchesSearch && matchesCategory && matchesBucket;
-    }).sort((a, b) => a.name.localeCompare(b.name));
+    }).sort((a, b) => a?.name?.localeCompare(b.name));
   }, [
     ContactList,
     searchText,

src/pages/employee/AttendancesEmployeeRecords.jsx

@@ -42,7 +42,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const sortByName = (a, b) => {
     const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
     const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-    return nameA.localeCompare(nameB);
+    return nameA?.localeCompare(nameB);
   };
 
   const group1 = data

src/pages/employee/EmployeeList.jsx

@@ -9,7 +9,7 @@ import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
 import { useProjects } from "../../hooks/useProjects";
 import { useProfile } from "../../hooks/useProfile";
 import { hasUserPermission } from "../../utils/authUtils";
-import { MANAGE_EMPLOYEES } from "../../utils/constants";
+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";
@@ -29,10 +29,9 @@ const EmployeeList = () => {
   const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || "");
   const { projects, loading: projectLoading } = useProjects();
   const [showInactive, setShowInactive] = useState(false);
-  const [showAllEmployees, setShowAllEmployees] = useState(false); // New state for "All Employee"
+  const [showAllEmployees, setShowAllEmployees] = useState(false); 
   const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
 
-  // Modify the hook to conditionally pass selectedProject or null based on showAllEmployees
   const { employees, loading, setLoading, error, recallEmployeeData } =
     useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive);
   const [projectsList, setProjectsList] = useState(projects || []);
@@ -40,7 +39,7 @@ const EmployeeList = () => {
   const [employeeList, setEmployeeList] = useState([]);
   const [modelConfig, setModelConfig] = useState();
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(20);
+  const [itemsPerPage] = useState(ITEMS_PER_PAGE);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
@@ -86,7 +85,7 @@ const EmployeeList = () => {
           }`.toLowerCase();
         const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
           }`.toLowerCase();
-        return nameA.localeCompare(nameB);
+        return nameA?.localeCompare(nameB);
       });
 
       setEmployeeList(sorted);
@@ -189,10 +188,11 @@ const EmployeeList = () => {
     recallEmployeeData(e.target.checked);
   };
 
-  // New handler for "All Employee" toggle
   const handleAllEmployeesToggle = (e) => {
     const isChecked = e.target.checked;
-    setShowAllEmployees(isChecked);
+    setShowInactive(false)
+    setShowAllEmployees( isChecked );
+
     recallEmployeeData(showInactive, isChecked ? null : selectedProject);
   };
 
@@ -304,7 +304,7 @@ const EmployeeList = () => {
                     </div>
 
                     {/* Show Inactive Employees Switch */}
-                    {!showAllEmployees && (
+                    {showAllEmployees && (
                       <div className="form-check form-switch text-start">
                         <input
                           type="checkbox"
@@ -559,7 +559,7 @@ const EmployeeList = () => {
                           </td>
 
                           <td className=" d-none  d-md-table-cell">
-                            {moment(item.joiningDate).format("DD-MMM-YYYY")}
+                            {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
                           </td>
                           <td>
                             {showInactive ? (

src/pages/master/MasterTable.jsx

@@ -34,7 +34,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
     if (!sortKey) return 0;
     const aValue = a[sortKey] || "";
     const bValue = b[sortKey] || "";
-    return aValue.localeCompare(bValue);
+    return aValue?.localeCompare(bValue);
   });
 
   // Pagination logic

src/pages/project/ProjectList.jsx

@@ -50,7 +50,7 @@ const ProjectList = () => {
         .filter((statusId) => grouped[statusId])
         .flatMap((statusId) =>
           grouped[statusId].sort((a, b) =>
-            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+            a.name.toLowerCase()?.localeCompare(b.name.toLowerCase())
           )
         );