src/components/Activities/AttendcesLogs.jsx

@@ -38,47 +38,47 @@ const usePagination = (data, itemsPerPage) => {
 };
 
 const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
-const selectedProject = useSelectedProject();
+  const selectedProject = useSelectedProject();
-const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
+  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
-const dispatch = useDispatch();
+  const dispatch = useDispatch();
-const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
-const [showPending, setShowPending] = useState(false);
+  const [showPending, setShowPending] = useState(false);
-const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
 
-const today = new Date();
+  const today = new Date();
-today.setHours(0, 0, 0, 0);
+  today.setHours(0, 0, 0, 0);
 
-const yesterday = new Date();
+  const yesterday = new Date();
-yesterday.setDate(yesterday.getDate() - 1);
+  yesterday.setDate(yesterday.getDate() - 1);
 
-const isSameDay = (dateStr) => {
+  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) => {
+  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 sortByName = (a, b) => {
     const nameA = (a.firstName + a.lastName).toLowerCase();
     const nameB = (b.firstName + b.lastName).toLowerCase();
     return nameA.localeCompare(nameB);
-};
+  };
 
-const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
+  const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
     selectedProject,
     dateRange.startDate,
     dateRange.endDate,
     organizationId
-);
+  );
 
-const processedData = useMemo(() => {
+  const processedData = useMemo(() => {
     const filteredData = showPending
       ? data.filter((item) => item.checkOutTime === null)
       : data;
@@ -103,30 +103,30 @@ const processedData = useMemo(() => {
 
     const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
     return sortedDates.flatMap((date) => groupedByDate[date]);
-}, [data, showPending]);
+  }, [data, showPending]);
 
-const filteredSearchData = useMemo(() => {
+  const filteredSearchData = useMemo(() => {
     if (!searchTerm) return processedData;
 
     const lowercased = searchTerm.toLowerCase();
     return processedData.filter((item) =>
       `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
     );
-}, [processedData, searchTerm]);
+  }, [processedData, searchTerm]);
 
-const {
+  const {
     currentPage,
     totalPages,
     currentItems: paginatedAttendances,
     paginate,
     resetPage,
-} = usePagination(filteredSearchData, 20);
+  } = usePagination(filteredSearchData, 20);
 
-useEffect(() => {
+  useEffect(() => {
     resetPage();
-}, [filteredSearchData]);
+  }, [filteredSearchData]);
 
-const handler = useCallback(
+  const handler = useCallback(
     (msg) => {
       const { startDate, endDate } = dateRange;
       const checkIn = msg.response.checkInTime.substring(0, 10);
@@ -145,14 +145,14 @@ const handler = useCallback(
       }
     },
     [selectedProject, dateRange, resetPage]
-);
+  );
 
-useEffect(() => {
+  useEffect(() => {
     eventBus.on("attendance_log", handler);
     return () => eventBus.off("attendance_log", handler);
-}, [handler]);
+  }, [handler]);
 
-const employeeHandler = useCallback(
+  const employeeHandler = useCallback(
     (msg) => {
       const { startDate, endDate } = dateRange;
       if (data.some((item) => item.employeeId == msg.employeeId)) {
@@ -160,12 +160,12 @@ const employeeHandler = useCallback(
       }
     },
     [data, refetch]
-);
+  );
 
-useEffect(() => {
+  useEffect(() => {
     eventBus.on("employee", employeeHandler);
     return () => eventBus.off("employee", employeeHandler);
-}, [employeeHandler]);
+  }, [employeeHandler]);
 
 
 
@@ -174,7 +174,7 @@ useEffect(() => {
       <div
         className="dataTables_length text-start py-2 d-flex flex-wrap justify-content-between"
         id="DataTables_Table_0_length"
->
+      >
         <div className="d-flex flex-wrap align-items-center my-0 gap-2">
           <DateRangePicker
             onRangeChange={setDateRange}
@@ -193,7 +193,7 @@ useEffect(() => {
             <label className="form-check-label ms-2 mb-0">Pending Attendance</label>
           </div>
         </div>
-</div>
+      </div>
 
       <div
         className="table-responsive text-nowrap"
@@ -327,8 +327,7 @@ useEffect(() => {
               (pageNumber) => (
                 <li
                   key={pageNumber}
-                  className={`page-item ${
+                  className={`page-item ${currentPage === pageNumber ? "active" : ""
-                    currentPage === pageNumber ? "active" : ""
                     }`}
                 >
                   <button
@@ -341,8 +340,7 @@ useEffect(() => {
               )
             )}
             <li
-              className={`page-item ${
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                currentPage === totalPages ? "disabled" : ""
                 }`}
             >
               <button

src/components/Activities/Regularization.jsx

@@ -33,8 +33,8 @@ const Regularization = ({
   );
 
   useEffect(() => {
-    if(!regularizes) return
+    if (!regularizes) return
-    if(regularizes?.length) {
+    if (regularizes?.length) {
       setregularizedList(regularizes);
 
     }
@@ -102,6 +102,7 @@ const Regularization = ({
   }, [employeeHandler]);
 
   return (
+    <div>
       <div
         className="table-responsive text-nowrap pb-4"
         style={{ minHeight: "200px" }}
@@ -160,7 +161,7 @@ const Regularization = ({
                   </td>
 
                   <td colSpan={2}>
-                     {att.requestedBy ? ( <div className="d-flex justify-content-start align-items-center">
+                    {att.requestedBy ? (<div className="d-flex justify-content-start align-items-center">
                       <Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} />
                       <div className="d-flex flex-column">
                         <a href="#" className="text-heading text-truncate">
@@ -169,10 +170,10 @@ const Regularization = ({
                           </span>
                         </a>
                       </div>
-                  </div>):(<small>--</small>)}
+                    </div>) : (<small>--</small>)}
                   </td>
                   <td>
-                  {att?.requestedAt ? formatUTCToLocalTime(att.requestedAt,true) : "--"}
+                    {att?.requestedAt ? formatUTCToLocalTime(att.requestedAt, true) : "--"}
                   </td>
                   <td className="text-center ">
                     <RegularizationActions
@@ -197,6 +198,7 @@ const Regularization = ({
             </span>
           </div>
         )}
+      </div>
       {totalPages > 0 && (
         <Pagination
           currentPage={currentPage}
@@ -204,6 +206,7 @@ const Regularization = ({
           onPageChange={paginate}
         />
       )}
+
     </div>
   );
 };