Changes in Attendance Switch on-off button.

src/components/Activities/AttendcesLogs.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo, useCallback } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -7,13 +7,28 @@ import { useSelector, useDispatch } from "react-redux";
 import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
 import DateRangePicker from "../common/DateRangePicker";
 import { getCachedData } from "../../slices/apiDataManager";
-import usePagination from "../../hooks/usePagination";
+
+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;
+    return data.slice(startIndex, endIndex);
+  }, [data, currentPage, itemsPerPage]);
+
+  const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
+  const resetPage = useCallback(() => setCurrentPage(1), []);
+
+  return { currentPage, totalPages: maxPage, currentItems, paginate, resetPage };
+};
 
 const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
   const { data, loading, error } = useSelector((store) => store.attendanceLogs);
-  const [isRefreshing, setIsRefreshing] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
   const [processedData, setProcessedData] = useState([]);
 
   const today = new Date();
@@ -44,21 +59,19 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
 
   useEffect(() => {
     const { startDate, endDate } = dateRange;
-    if (startDate && endDate) {
-      dispatch(
-        fetchAttendanceData({
-          projectId,
-          fromDate: startDate,
-          toDate: endDate,
-        })
-      );
-    }
-  }, [dateRange, projectId, isRefreshing]);
+    dispatch(
+      fetchAttendanceData({
+        projectId,
+        fromDate: startDate,
+        toDate: endDate,
+      })
+    );
+    setIsRefreshing(false);
+  }, [dateRange, projectId, dispatch, isRefreshing]);
 
   useEffect(() => {
-    // Filter the raw data based on showOnlyCheckout
     const filteredData = showOnlyCheckout
-      ? data.filter((item) => item.checkInTime && item.checkOutTime)
+      ? data.filter((item) => item.checkOutTime === null)
       : data;
 
     const group1 = filteredData
@@ -95,13 +108,18 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
     // Create the final sorted array
     const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
     setProcessedData(finalData);
-  }, [data, showOnlyCheckout]); // Re-run this effect when data or showOnlyCheckout changes
+  }, [data, showOnlyCheckout]);
 
-  const { currentPage, totalPages, currentItems: paginatedAttendances, paginate } = usePagination(
+  const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination(
     processedData,
     10
   );
 
+  // Reset to the first page whenever processedData changes (due to switch on/off)
+  useEffect(() => {
+    resetPage();
+  }, [processedData, resetPage]);
+
   return (
     <>
       <div
@@ -113,10 +131,10 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
         </div>
         <div className="col-md-2 m-0 text-end">
           <i
-            className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
+            className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
               }`}
             title="Refresh"
-            onClick={() => setIsRefreshing(!isRefreshing)}
+            onClick={() => setIsRefreshing(true)}
           />
         </div>
       </div>
@@ -139,8 +157,12 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
               </tr>
             </thead>
             <tbody>
-              {loading && <td colSpan={5}>Loading...</td>}
-              {paginatedAttendances.reduce((acc, attendance, index, arr) => {
+              {(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");
                 const previousAttendance = arr[index - 1];
                 const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
@@ -196,10 +218,14 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
             </tbody>
           </table>
         )}
-        {!loading && data.length === 0 && <span>No employee logs</span>}
-        {error && <td colSpan={6}>{error}</td>}
+        {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
+        {error && !loading && !isRefreshing && (
+          <tr>
+            <td colSpan={6}>{error}</td>
+          </tr>
+        )}
       </div>
-      {!loading && processedData.length > 10 && (
+      {!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" : ""}`}>
@@ -231,6 +257,4 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
   );
 };
 
-export default AttendanceLog;
-
-
+export default AttendanceLog;

src/pages/Activities/AttendancePage.jsx

@@ -107,10 +107,13 @@ const AttendancePage = () => {
 
 
   // Filter attendance data based on the toggle
+  // const filteredAttendance = showOnlyCheckout
+  //   ? attendances?.filter(
+  //     (att) => att?.checkOutTime !== null && att?.checkInTime !== null
+  //   )
+  //   : attendances;
   const filteredAttendance = showOnlyCheckout
-    ? attendances?.filter(
-      (att) => att?.checkOutTime !== null && att?.checkInTime !== null
-    )
+    ? attendances?.filter((att) => att?.checkOutTime === null)
     : attendances;
 
 
@@ -212,7 +215,7 @@ const AttendancePage = () => {
               </button>
             </li>
 
-            <li className="nav-item ms-auto"> {/* Added ms-auto to push to the right */}
+            <li className={`nav-item ms-auto ${activeTab === "regularization" ? "d-none" : ""}`}>
               <label className="switch switch-primary">
                 <input
                   type="checkbox"
@@ -225,7 +228,7 @@ const AttendancePage = () => {
                   <span className="switch-off"></span>
                 </span>
                 <span className="switch-label m-2">
-                  Show Employees
+                  Pending
                 </span>
               </label>
             </li>