From 8b2aef8a52d9449da9e34133740a45b53bc8f6ff Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Mon, 28 Jul 2025 11:21:37 +0530 Subject: [PATCH] All the changes of Search functionality in Attendance page. --- src/components/Activities/Attendance.jsx | 81 +++-- src/components/Activities/AttendcesLogs.jsx | 318 ++++++++---------- .../Activities/CheckCheckOutForm.jsx | 1 + src/components/Activities/Regularization.jsx | 129 ++++--- src/components/Dashboard/Tasks.jsx | 1 - src/components/Layout/Header.jsx | 2 +- src/hooks/useDashboard_Data.jsx | 6 +- src/pages/Activities/AttendancePage.jsx | 140 +++----- 8 files changed, 298 insertions(+), 380 deletions(-) diff --git a/src/components/Activities/Attendance.jsx b/src/components/Activities/Attendance.jsx index 75979e7b..16315099 100644 --- a/src/components/Activities/Attendance.jsx +++ b/src/components/Activities/Attendance.jsx @@ -6,34 +6,27 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus"; import usePagination from "../../hooks/usePagination"; import { useNavigate } from "react-router-dom"; import { ITEMS_PER_PAGE } from "../../utils/constants"; -import { useAttendance } from "../../hooks/useAttendance"; +import { useAttendance } from "../../hooks/useAttendance"; // This hook is already providing data import { useSelector } from "react-redux"; import { useQueryClient } from "@tanstack/react-query"; import eventBus from "../../services/eventBus"; -const Attendance = ({ getRole, handleModalData }) => { +const Attendance = ({ getRole, handleModalData, attendance: filteredAndSearchedAttendanceFromParent, showOnlyCheckout, setshowOnlyCheckout }) => { const queryClient = useQueryClient(); - const [loading, setLoading] = useState(false); const navigate = useNavigate(); const [todayDate, setTodayDate] = useState(new Date()); - const [ShowPending, setShowPending] = useState(false); + const selectedProject = useSelector( (store) => store.localVariables.projectId ); const { - attendance, loading: attLoading, recall: attrecall, isFetching - } = useAttendance(selectedProject); - const filteredAttendance = ShowPending - ? attendance?.filter( - (att) => att?.checkInTime !== null && att?.checkOutTime === null - ) - : attendance; + } = useAttendance(selectedProject); // Keep this hook to manage recall and fetching status - const attendanceList = Array.isArray(filteredAttendance) - ? filteredAttendance + const attendanceList = Array.isArray(filteredAndSearchedAttendanceFromParent) + ? filteredAndSearchedAttendanceFromParent : []; const sortByName = (a, b) => { @@ -41,6 +34,7 @@ const Attendance = ({ getRole, handleModalData }) => { const nameB = (b.firstName + b.lastName).toLowerCase(); return nameA?.localeCompare(nameB); }; + const group1 = attendanceList .filter((d) => d.activity === 1 || d.activity === 4) .sort(sortByName); @@ -48,41 +42,39 @@ const Attendance = ({ getRole, handleModalData }) => { .filter((d) => d.activity === 0) .sort(sortByName); - const filteredData = [...group1, ...group2]; + const finalFilteredDataForPagination = [...group1, ...group2]; + const { currentPage, totalPages, currentItems, paginate } = usePagination( - filteredData, + finalFilteredDataForPagination, // Use the data that's already been searched and grouped ITEMS_PER_PAGE ); const handler = useCallback( (msg) => { - if (selectedProject == msg.projectId) { - // const updatedAttendance = attendances.map((item) => - // item.employeeId === msg.response.employeeId - // ? { ...item, ...msg.response } - // : item - // ); + if (selectedProject === msg.projectId) { queryClient.setQueryData(["attendance", selectedProject], (oldData) => { if (!oldData) { - queryClient.invalidateQueries({queryKey:["attendance"]}) - }; + queryClient.invalidateQueries({ queryKey: ["attendance"] }); + return; // Exit to avoid mapping on undefined oldData + } return oldData.map((record) => record.employeeId === msg.response.employeeId ? { ...record, ...msg.response } : record ); }); } }, - [selectedProject, attrecall] + [selectedProject, queryClient] // Added queryClient to dependencies ); const employeeHandler = useCallback( (msg) => { - if (attendances.some((item) => item.employeeId == msg.employeeId)) { + if (attrecall) { // Check if attrecall function exists attrecall(); } }, - [selectedProject, attendance] + [attrecall] // Dependency should be attrecall, not `selectedProject` or `attendance` here ); + useEffect(() => { eventBus.on("attendance", handler); return () => eventBus.off("attendance", handler); @@ -105,13 +97,14 @@ const Attendance = ({ getRole, handleModalData }) => { role="switch" id="inactiveEmployeesCheckbox" disabled={isFetching} - checked={ShowPending} - onChange={(e) => setShowPending(e.target.checked)} + checked={showOnlyCheckout} // Use prop for checked state + onChange={(e) => setshowOnlyCheckout(e.target.checked)} // Use prop for onChange /> - {Array.isArray(attendance) && attendance.length > 0 ? ( + {/* Use `filteredAndSearchedAttendanceFromParent` for the initial check of data presence */} + {Array.isArray(filteredAndSearchedAttendanceFromParent) && filteredAndSearchedAttendanceFromParent.length > 0 ? ( <> @@ -129,7 +122,7 @@ const Attendance = ({ getRole, handleModalData }) => { - {currentItems && + {currentItems && currentItems.length > 0 ? ( // Check currentItems length before mapping currentItems .sort((a, b) => { const checkInA = a?.checkInTime @@ -186,18 +179,22 @@ const Attendance = ({ getRole, handleModalData }) => { /> - ))} - {!attendance && ( - No employees assigned to the project! + )) + ) : ( + + + )}
+ No matching records found. +
- {!loading && filteredData.length > 20 && ( + {!attLoading && finalFilteredDataForPagination.length > ITEMS_PER_PAGE && ( // Use the data before pagination for total count check