From 1c68e3a3d5d98157157965487f36f82f56f771e9 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Fri, 18 Jul 2025 10:54:44 +0530
Subject: [PATCH] fixed signalr issue due to occured integrated query

---
 src/components/Activities/Attendance.jsx    | 23 ++++++----
 src/components/Activities/AttendcesLogs.jsx | 49 ++++++++++++---------
 src/pages/Activities/AttendancePage.jsx     |  3 --
 3 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/components/Activities/Attendance.jsx b/src/components/Activities/Attendance.jsx
index f7dd4ba7..808ba466 100644
--- a/src/components/Activities/Attendance.jsx
+++ b/src/components/Activities/Attendance.jsx
@@ -57,15 +57,17 @@ const Attendance = ({ getRole, handleModalData }) => {
   const handler = useCallback(
     (msg) => {
       if (selectedProject == msg.projectId) {
-        const updatedAttendance = attendances.map((item) =>
-          item.employeeId === msg.response.employeeId
-            ? { ...item, ...msg.response }
-            : item
-        );
+        // const updatedAttendance = attendances.map((item) =>
+        //   item.employeeId === msg.response.employeeId
+        //     ? { ...item, ...msg.response }
+        //     : item
+        // );
         queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
-          if (!oldData) return oldData;
-          return oldData.map((emp) =>
-            emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
+          if (!oldData) {
+            queryClient.invalidateQueries({queryKey:["attendance"]})
+          };
+          return oldData.map((record) =>
+            emp.employeeId === msg.response.employeeId ? { ...emp, ...msg.response } : record
           );
         });
       }
@@ -90,6 +92,7 @@ const Attendance = ({ getRole, handleModalData }) => {
     eventBus.on("employee", employeeHandler);
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
+
   return (
     <>
       <div className="table-responsive text-nowrap h-100" >
@@ -245,6 +248,10 @@ const Attendance = ({ getRole, handleModalData }) => {
               : "Attendance data unavailable"}
           </div>
         )}
+
+        {currentItems?.length == 0 && attendance.length > 0 && (
+          <div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
+        )}
       </div>
     </>
   );
diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx
index 982ef879..0a28ffd3 100644
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/src/components/Activities/AttendcesLogs.jsx
@@ -10,6 +10,7 @@ import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
 import eventBus from "../../services/eventBus";
 import AttendanceRepository from "../../repositories/AttendanceRepository";
 import { useAttendancesLogs } from "../../hooks/useAttendance";
+import { queryClient } from "../../layouts/AuthLayout";
 
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -34,9 +35,6 @@ const usePagination = (data, itemsPerPage) => {
 
 const AttendanceLog = ({
   handleModalData,
-  projectId,
-  setshowOnlyCheckout,
-  showOnlyCheckout,
 }) => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
@@ -44,6 +42,7 @@ const AttendanceLog = ({
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
   const [loading, setLoading] = useState(false);
+  const [showPending,setShowPending] = useState(false)
 
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [processedData, setProcessedData] = useState([]);
@@ -86,7 +85,7 @@ const AttendanceLog = ({
     dateRange.endDate
   );
   const filtering = (data) => {
-    const filteredData = showOnlyCheckout
+    const filteredData = showPending
       ? data.filter((item) => item.checkOutTime === null)
       : data;
 
@@ -138,7 +137,7 @@ const AttendanceLog = ({
 
   useEffect(() => {
     filtering(data);
-  }, [data, showOnlyCheckout]);
+  }, [data, showPending]);
 
   const {
     currentPage,
@@ -157,19 +156,24 @@ const AttendanceLog = ({
       const { startDate, endDate } = dateRange;
       const checkIn = msg.response.checkInTime.substring(0, 10);
       if (
-        projectId === msg.projectId &&
+        selectedProject === msg.projectId &&
         startDate <= checkIn &&
         checkIn <= endDate
       ) {
-        const updatedAttendance = data.map((item) =>
-          item.id === msg.response.id ? { ...item, ...msg.response } : item
+        queryClient.setQueriesData(["attendanceLogs"],(oldData)=>{
+          if(!oldData) {
+            queryClient.invalidateQueries({queryKey:["attendanceLogs"]})
+          }
+          return oldData.map((record) =>
+          record.id === msg.response.id ? { ...record, ...msg.response } : record
         );
+        })
 
         filtering(updatedAttendance);
         resetPage();
       }
     },
-    [projectId, dateRange, data, filtering, resetPage]
+    [selectedProject, dateRange, data, filtering, resetPage]
   );
 
   useEffect(() => {
@@ -181,16 +185,18 @@ const AttendanceLog = ({
     (msg) => {
       const { startDate, endDate } = dateRange;
       if (data.some((item) => item.employeeId == msg.employeeId)) {
-        dispatch(
-          fetchAttendanceData({
-            projectId,
-            fromDate: startDate,
-            toDate: endDate,
-          })
-        );
+        // dispatch(
+        //   fetchAttendanceData({
+        //     ,
+        //     fromDate: startDate,
+        //     toDate: endDate,
+        //   })
+        // );
+
+        refetch()
       }
     },
-    [projectId, dateRange, data]
+    [selectedProject, dateRange, data]
   );
 
   useEffect(() => {
@@ -216,8 +222,8 @@ const AttendanceLog = ({
               role="switch"
               disabled={isFetching}
               id="inactiveEmployeesCheckbox"
-              checked={showOnlyCheckout}
-              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
+              checked={showPending}
+              onChange={(e) => setShowPending(e.target.checked)}
             />
             <label className="form-check-label ms-0">Show Pending</label>
           </div>
@@ -323,9 +329,12 @@ const AttendanceLog = ({
             </tbody>
           </table>
         ) : (
-          <span className="text-muted">No employee logs</span>
+           <div className="my-4"><span className="text-secondary">No Record Available !</span></div>
         )}
       </div>
+        {paginatedAttendances?.length == 0 && data?.length > 0 && (
+          <div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
+        )}
       {processedData.length > 10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx
index bfc31a3b..0aaa4b43 100644
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/src/pages/Activities/AttendancePage.jsx
@@ -229,9 +229,6 @@ const AttendancePage = () => {
               <div className="tab-pane fade show active py-0">
                 <AttendanceLog
                   handleModalData={handleModalData}
-                  projectId={selectedProject}
-                  setshowOnlyCheckout={setShowPending}
-                  showOnlyCheckout={ShowPending}
                 />
               </div>
             )}