added sorting group by name, checkIn , checkOut, regularize, approved and reject

src/components/Activities/Attendance.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState,useEffect } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -7,17 +7,37 @@ import usePagination from "../../hooks/usePagination";
 import { useNavigate } from "react-router-dom";
 
 const Attendance = ({ attendance, getRole, handleModalData }) => {
-  const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    attendance,
-    5
-  );
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
 
+  // Ensure attendance is an array
+  const attendanceList = Array.isArray(attendance) ? attendance : [];
+
+  // Function to sort by first and last name
+  const sortByName = (a, b) => {
+    const nameA = (a.firstName + a.lastName).toLowerCase();
+    const nameB = (b.firstName + b.lastName).toLowerCase();
+    return nameA.localeCompare(nameB);
+  };
+
+  // Filter employees based on activity
+  const group1 = attendanceList
+    .filter((d) => d.activity === 1 || d.activity === 4)
+    .sort(sortByName);
+  const group2 = attendanceList
+    .filter((d) => d.activity === 0)
+    .sort(sortByName);
+
+  const filteredData = [...group1, ...group2];
+
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
+    filteredData,
+    5
+  );
   return (
     <>
       <div className="table-responsive text-nowrap">
-        {attendance && attendance.length > 0 ? (
+        {attendance && attendance.length > 0 && (
           <>
             <table className="table ">
               <thead>
@@ -96,6 +116,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                         </td>
                       </tr>
                     ))}
+                    {!attendance && (
+                  <span>No employees assigned to the project</span>
+                )}
               </tbody>
             </table>
 
@@ -145,8 +168,6 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
               </nav>
             )}
           </>
-        ) : (
-          <span>No employees assigned to the project</span>
         )}
       </div>
     </>

src/components/Activities/AttendcesLogs.jsx

@@ -16,9 +16,41 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
   const dispatch = useDispatch();
   const { data, loading, error } = useSelector((store) => store.attendanceLogs);
   const [isRefreshing, setIsRefreshing] = useState(true);
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0); // Strip time to compare dates only
+  
+  const isSameDay = (dateStr) => {
+    if (!dateStr) return false;
+    const d = new Date(dateStr);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime() === today.getTime();
+  };
+  
+  const isBeforeToday = (dateStr) => {
+    if (!dateStr) return false;
+    const d = new Date(dateStr);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime() < today.getTime();
+  };
+  
+  const sortByName = (a, b) => {
+    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
+    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
+    return nameA.localeCompare(nameB);
+  };
+  
+  const group1 = data.filter(d => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
+  const group2 = data.filter(d => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
+  const group3 = data.filter(d => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
+  const group4 = data.filter(d => d.activity === 4 && isBeforeToday(d.checkOutTime)).sort(sortByName);
+  const group5 = data.filter(d => d.activity === 5).sort(sortByName);
+  
+  const sortedFinalList = [...group1, ...group2, ...group3, ...group4, ...group5];
+
   const currentDate = new Date().toLocaleDateString( "en-CA" );
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    data,
+    sortedFinalList,
     5
   );
 
@@ -35,7 +67,6 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
     }
   }, [dateRange, projectId, isRefreshing]);
   
-
   return (
     <>
       <div

src/components/Activities/Regularization.jsx

@@ -5,6 +5,7 @@ import RegularizationActions from "./RegularizationActions";
 import { useSelector } from "react-redux";
 import { useRegularizationRequests } from "../../hooks/useAttendance";
 import moment from "moment";
+import usePagination from "../../hooks/usePagination";
 
 const Regularization = ({ handleRequest }) => {
   var selectedProject = useSelector((store) => store.localVariables.projectId);
@@ -16,6 +17,19 @@ const Regularization = ({ handleRequest }) => {
     setregularizedList(regularizes);
   }, [regularizes]);
 
+  const sortByName = (a, b) => {
+    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
+    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
+    return nameA.localeCompare(nameB);
+  };
+
+  const filteredData = regularizesList.sort(sortByName)
+  
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
+    filteredData,
+    5
+  );
+
   return (
     <div className="table-responsive text-nowrap">
       <table className="table mb-0">
@@ -79,6 +93,51 @@ const Regularization = ({ handleRequest }) => {
             ))}
         </tbody>
       </table>
+      {!loading && (
+              <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)}
+                    >
+                      &laquo;
+                    </button>
+                  </li>
+                  {[...Array(totalPages)].map((_, index) => (
+                    <li
+                      key={index}
+                      className={`page-item ${
+                        currentPage === index + 1 ? "active" : ""
+                      }`}
+                    >
+                      <button
+                        className="page-link "
+                        onClick={() => paginate(index + 1)}
+                      >
+                        {index + 1}
+                      </button>
+                    </li>
+                  ))}
+                  <li
+                    className={`page-item ${
+                      currentPage === totalPages ? "disabled" : ""
+                    }`}
+                  >
+                    <button
+                      className="page-link "
+                      onClick={() => paginate(currentPage + 1)}
+                    >
+                      &raquo;
+                    </button>
+                  </li>
+                </ul>
+              </nav>
+            )}
     </div>
   );
 };