Attendance page search functionality and Attendance Log Page Resets to First Page After Performing Action on Other Pages.

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,
   };
 };
 
@@ -177,26 +178,30 @@ const AttendanceLog = ({
     resetPage, // Destructure resetPage here
   } = usePagination(processedData, 20);
 
-const handler = useCallback(
-  (msg) => {
-    const { startDate, endDate } = dateRange;
-    const checkIn = msg.response.checkInTime.substring(0, 10);
-    if (
-      projectId === msg.projectId &&
-      startDate <= checkIn &&
-      checkIn <= endDate
-    ) {
-      const updatedAttendance = data.map((item) =>
-        item.id === msg.response.id
-          ? { ...item, ...msg.response }
-          : item
-      );
+  // Effect to reset pagination when search query changes
+  useEffect(() => {
+    resetPage();
+  }, [searchQuery, resetPage]); // Add resetPage to dependencies
 
-      filtering(updatedAttendance);
-    }
-  },
-  [projectId, dateRange, data, filtering] // ✅ removed resetPage from deps
-);
+  const handler = useCallback(
+    (msg) => {
+      const { startDate, endDate } = dateRange;
+      const checkIn = msg.response.checkInTime.substring(0, 10);
+      if (
+        projectId === msg.projectId &&
+        startDate <= checkIn &&
+        checkIn <= endDate
+      ) {
+        const updatedAttendance = data.map((item) =>
+          item.id === msg.response.id
+            ? { ...item, ...msg.response }
+            : item
+        );
+        dispatch(setAttendanceData(updatedAttendance)); // Update Redux store
+      }
+    },
+    [projectId, dateRange, data, dispatch]
+  );
 
   useEffect(() => {
   useEffect(() => {
@@ -368,8 +373,7 @@ const handler = useCallback(
               No employee logs.
             </div>
           )
-        )
-        }
+        )}
       </div>
       {!loading && !isRefreshing && processedData.length > 20 && (
         <nav aria-label="Page ">