src/components/Activities/AttendcesLogs.jsx

@@ -4,7 +4,7 @@ import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import { useSelector, useDispatch } from "react-redux";
-import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
+import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
 import DateRangePicker from "../common/DateRangePicker";
 import eventBus from "../../services/eventBus";
 
@@ -28,14 +28,15 @@ const usePagination = (data, itemsPerPage) => {
     }
   }, [maxPage]);
 
-  const resetPage = useCallback(() => setCurrentPage(1), []); // This is returned by the hook
+  // Ensure resetPage is returned by the hook
+  const resetPage = useCallback(() => setCurrentPage(1), []);
 
   return {
     currentPage,
     totalPages: maxPage,
     currentItems,
     paginate,
-    resetPage, // Ensure resetPage is returned here
+    resetPage,
   };
 };
 
@@ -173,32 +174,29 @@ const AttendanceLog = ({
     resetPage, // Destructure resetPage here
   } = usePagination(processedData, 20);
 
-  // Reset page when processedData changes (due to filters/search)
+  // Effect to reset pagination when search query changes
   useEffect(() => {
     resetPage();
-  }, [processedData, resetPage]); // Add resetPage to dependency array
+  }, [searchQuery, resetPage]); // Add resetPage to dependencies
 
   const handler = useCallback(
     (msg) => {
       const { startDate, endDate } = dateRange;
-      const checkIn = msg.response.checkInTime ? msg.response.checkInTime.substring(0, 10) : null;
-
+      const checkIn = msg.response.checkInTime.substring(0, 10);
       if (
         projectId === msg.projectId &&
-        checkIn &&
         startDate <= checkIn &&
         checkIn <= endDate
       ) {
-        dispatch(
-          fetchAttendanceData({
-            projectId,
-            fromDate: startDate,
-            toDate: endDate,
-          })
+        const updatedAttendance = data.map((item) =>
+          item.id === msg.response.id
+            ? { ...item, ...msg.response }
+            : item
         );
+        dispatch(setAttendanceData(updatedAttendance)); // Update Redux store
       }
     },
-    [projectId, dateRange, dispatch]
+    [projectId, dateRange, data, dispatch]
   );
 
   useEffect(() => {
@@ -367,8 +365,7 @@ const AttendanceLog = ({
               No employee logs.
             </div>
           )
-        )
-        }
+        )}
       </div>
       {!loading && !isRefreshing && processedData.length > 20 && (
         <nav aria-label="Page ">