resolved localCompare error

added pending filter for attendaces using toggle buttons
fixed togger for active and inactive employee
2025-06-13 18:06:09 +05:30 · 2025-06-13 17:52:22 +05:30 · 2025-06-13 13:27:34 +05:30 · 2025-06-13 13:03:27 +05:30
17 changed files with 245 additions and 156 deletions
--- a/src/components/Activities/Attendance.jsx
+++ b/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' }}>
-                  <td style={{ borderBottom: 'none' }}>
-                    <strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
-                  </td>
-                  <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">
+                <tr className="border-top-1">
+                  <th colSpan={2}>Name</th>
+                  <th>Role</th>
+                  <th>
                    <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 "
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/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
-      .filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
+    const group4 = filteredData.filter(
+      (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(
-    processedData,
-    20
-  );
+  const {
+    currentPage,
+    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
-          className="dataTables_length text-start py-2 d-flex justify-content-between"
-          id="DataTables_Table_0_length"
-        >
-          <div className="col-md-3 my-0 ">
-            <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
-          </div>
-          <div className="col-md-2 m-0 text-end">
-            <i
-              className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
-                }`}
-              title="Refresh"
-              onClick={() => setIsRefreshing(true)}
+      <div
+        className="dataTables_length text-start py-2 d-flex justify-content-between"
+        id="DataTables_Table_0_length"
+      >
+        <div className="d-flex align-items-center my-0 ">
+          <DateRangePicker
+            onRangeChange={setDateRange}
+            defaultStartDate={yesterday}
+          />
+          <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>
-        <div className="table-responsive text-nowrap" style={{ minHeight: "250px" }}>
-          {data && data.length > 0 && (
-            <table className="table mb-0">
-              <thead>
+        <div className="col-md-2 m-0 text-end">
+          <i
+            className={`bx bx-refresh cursor-pointer fs-4 ${
+              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}>
-                    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>
+                  <td colSpan={6}>Loading...</td>
                </tr>
-              </thead>
-              <tbody>
-                {(loading || isRefreshing) && (
-                  <tr>
-                    <td colSpan={6}>Loading...</td>
-                  </tr>
-                )}
-                {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
-                  const currentDate = moment(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
-                              href="#"
-                              className="text-heading text-truncate"
-                            >
+                            <a 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>
-            </table>
-
-
-          )}
-          {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
-          {error && !loading && !isRefreshing && (
-            <tr>
-              <td colSpan={6}>{error}</td>
-            </tr>
-          )}
-        </div>
+            </tbody>
+          </table>
+        )}
+        {!loading && !isRefreshing && data.length === 0 && (
+          <span>No employee logs</span>
+        )}
+        {error && !loading && !isRefreshing && (
+          <tr>
+            <td colSpan={6}>{error}</td>
+          </tr>
+        )}
+      </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) => (
-              <li
-                key={pageNumber}
-                className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
-              >
-                <button className="page-link" onClick={() => paginate(pageNumber)}>
-                  {pageNumber}
-                </button>
-              </li>
-            ))}
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+              (pageNumber) => (
+                <li
+                  key={pageNumber}
+                  className={`page-item ${
+                    currentPage === pageNumber ? "active" : ""
+                  }`}
+                >
+                  <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>
@ -260,4 +333,4 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
  );
 };

-export default AttendanceLog;
+export default AttendanceLog;
--- a/src/components/Activities/Regularization.jsx
+++ b/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);

--- a/src/components/Employee/ManageEmployee.jsx
+++ b/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}{" "}
--- a/src/components/Project/Infrastructure/EditActivityModal.jsx
+++ b/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 || ""
                        )
                      )
--- a/src/components/Project/Infrastructure/FloorModel.jsx
+++ b/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 || ""
                            )
                          )
--- a/src/components/Project/Infrastructure/TaskModel.jsx
+++ b/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}>
--- a/src/components/Project/Infrastructure/WorkAreaModel.jsx
+++ b/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}>
--- a/src/components/common/ImagePreviewstyle.css
+++ b/src/components/common/ImagePreviewstyle.css
@ -43,8 +43,12 @@
 }

 .img-preview {
+     width: 100%;
+    height: 500px;
+    object-fit: cover;
+    object-position: center;
+}
+.img-preview img{
    width: 100%;
-  height: 500px;
-  background-color: #E9E9E9;
-  text-align: center;
+    height: 100%
 }
--- a/src/hooks/useEmployees.js
+++ b/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);
        }
-      }
+      
    }
  };

--- a/src/hooks/useProjects.js
+++ b/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");
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/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>
--- a/src/pages/Directory/Directory.jsx
+++ b/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,
--- a/src/pages/employee/AttendancesEmployeeRecords.jsx
+++ b/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
--- a/src/pages/employee/EmployeeList.jsx
+++ b/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 ? (
--- a/src/pages/master/MasterTable.jsx
+++ b/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
--- a/src/pages/project/ProjectList.jsx
+++ b/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())
          )
        );
Author	SHA1	Message	Date
Pramod Mahajan	7c9607cb78	resolved localCompare error	2025-06-13 18:06:09 +05:30
Pramod Mahajan	cbf376d5b6	added pending filter for attendaces using toggle buttons	2025-06-13 17:52:22 +05:30
Pramod Mahajan	00902fff9f	fixed togger for active and inactive employee	2025-06-13 13:27:34 +05:30
Pramod Mahajan	c254b98405	Fixed image scaling inside preview container to fully fill the space	2025-06-13 13:03:27 +05:30