sync data within regularize request and appove or reject between

src/components/Activities/Attendance.jsx

@@ -24,6 +24,7 @@ const Attendance = ({ getRole, handleModalData }) => {
     attendance,
     loading: attLoading,
     recall: attrecall,
+    isFetching
   } = useAttendance(selectedProject);
   const filteredAttendance = ShowPending
     ? attendance?.filter(
@@ -100,6 +101,7 @@ const Attendance = ({ getRole, handleModalData }) => {
               className="form-check-input"
               role="switch"
               id="inactiveEmployeesCheckbox"
+              disabled={isFetching}
               checked={ShowPending}
               onChange={(e) => setShowPending(e.target.checked)}
             />

src/components/Activities/AttendcesLogs.jsx

@@ -214,6 +214,7 @@ const AttendanceLog = ({
               type="checkbox"
               className="form-check-input"
               role="switch"
+              disabled={isFetching}
               id="inactiveEmployeesCheckbox"
               checked={showOnlyCheckout}
               onChange={(e) => setshowOnlyCheckout(e.target.checked)}
@@ -233,7 +234,7 @@ const AttendanceLog = ({
       </div>
       <div className="table-responsive text-nowrap">
         {isLoading ? (
-          <div>Loading...</div>
+          <div><p className="text-secondary">Loading...</p></div>
         ) : data?.length > 0 ? (
           <table className="table mb-0">
             <thead>

src/components/Activities/Regularization.jsx

@@ -28,12 +28,13 @@ const Regularization = ({ handleRequest }) => {
   const handler = useCallback(
     (msg) => {
       if (selectedProject == msg.projectId) {
-        const updatedAttendance = regularizes?.filter( item => item.id !== msg.response.id );
+        const updatedAttendance = regularizes?.filter(
+          (item) => item.id !== msg.response.id
+        );
         cacheData("regularizedList", {
           data: updatedAttendance,
           projectId: selectedProject,
         });
-        // clearCacheKey("regularizedList")
         refetch();
       }
     },
@@ -51,7 +52,7 @@ const Regularization = ({ handleRequest }) => {
     return () => eventBus.off("regularization", handler);
   }, [handler]);
 
-     const employeeHandler = useCallback(
+  const employeeHandler = useCallback(
     (msg) => {
       if (regularizes.some((item) => item.employeeId == msg.employeeId)) {
         refetch();
@@ -60,91 +61,70 @@ const Regularization = ({ handleRequest }) => {
     [regularizes]
   );
 
-    useEffect(() => {
+  useEffect(() => {
     eventBus.on("employee", employeeHandler);
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
   return (
-    <div
+    <div className="table-responsive text-nowrap pb-4">
-      className="table-responsive text-nowrap pb-4"
+      {loading ? (
-      
+        <div className="my-2">
-    >
+          <p className="text-secondary">Loading...</p>
-      <table className="table mb-0">
+        </div>
-        <thead>
+      ) : currentItems?.length > 0 ? (
-          <tr>
+        <table className="table mb-0">
-            <th colSpan={2}>Name</th>
+          <thead>
-            <th>Date</th>
+            <tr>
-            <th>
+              <th colSpan={2}>Name</th>
-              <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
+              <th>Date</th>
-            </th>
+              <th>
-            <th>
+                <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
-              <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
+              </th>
-            </th>
+              <th>
-            <th>Action</th>
+                <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
-          </tr>
+              </th>
-        </thead>
+              <th>Action</th>
-        <tbody>
+            </tr>
-          {/* {loading && (
+          </thead>
-            <td colSpan={6} className="text-center py-5">
+          <tbody>
-              Loading...
+            {currentItems?.map((att, index) => (
-            </td>
+              <tr key={index}>
-          )} */}
+                <td colSpan={2}>
-
+                  <div className="d-flex justify-content-start align-items-center">
-          {!loading &&
+                    <Avatar
-            (currentItems?.length > 0 ? (
+                      firstName={att.firstName}
-              currentItems?.map((att, index) => (
+                      lastName={att.lastName}
-                <tr key={index}>
+                    ></Avatar>
-                  <td colSpan={2}>
+                    <div className="d-flex flex-column">
-                    <div className="d-flex justify-content-start align-items-center">
+                      <a href="#" className="text-heading text-truncate">
-                      <Avatar
+                        <span className="fw-normal">
-                        firstName={att.firstName}
+                          {att.firstName} {att.lastName}
-                        lastName={att.lastName}
+                        </span>
-                      ></Avatar>
+                      </a>
-                      <div className="d-flex flex-column">
-                        <a href="#" className="text-heading text-truncate">
-                          <span className="fw-normal">
-                            {att.firstName} {att.lastName}
-                          </span>
-                        </a>
-                      </div>
                     </div>
-                  </td>
+                  </div>
-                  <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
+                </td>
-                  <td>{convertShortTime(att.checkInTime)}</td>
+                <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
-                  <td>
+                <td>{convertShortTime(att.checkInTime)}</td>
-                    {att.checkOutTime
+                <td>
-                      ? convertShortTime(att.checkOutTime)
+                  {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
-                      : "--"}
+                </td>
-                  </td>
+                <td className="text-center ">
-                  <td className="text-center ">
+                  <RegularizationActions
-                    {/* <div className='d-flex  justify-content-center align-items-center gap-3'> */}
+                    attendanceData={att}
-                    <RegularizationActions
+                    handleRequest={handleRequest}
-                      attendanceData={att}
+                    refresh={refetch}
-                      handleRequest={handleRequest}
+                  />
-                      refresh={refetch}
+                  {/* </div> */}
-                    />
-                    {/* </div> */}
-                  </td>
-                </tr>
-              ))
-            ) : (
-              <tr>
-                <td
-                  colSpan={6}
-                  className="text-center"
-                  style={{
-                    height: "200px",
-                    verticalAlign: "middle",
-                    borderBottom: "none",
-                  }}
-                >
-                  No Record Found
                 </td>
               </tr>
             ))}
-        </tbody>
+          </tbody>
-      </table>
+        </table>
+      ) : (
+       <div className="my-4"> <span className="text-muted">No Requests Found</span></div>
+      )}
       {!loading && totalPages > 1 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1 mt-3">
@@ -190,4 +170,4 @@ const Regularization = ({ handleRequest }) => {
   );
 };
 
-export default Regularization;
+export default Regularization;

src/hooks/useAttendance.js

@@ -124,6 +124,7 @@ export const useAttendance = (projectId) => {
     isLoading: loading,
     error,
     refetch: recall,
+    isFetching
   } = useQuery({
     queryKey: ["attendance", projectId],
     queryFn: async () => {
@@ -141,6 +142,7 @@ export const useAttendance = (projectId) => {
     loading,
     error,
     recall,
+    isFetching
   };
 };
 
@@ -263,17 +265,25 @@ export const useMarkAttendance = () => {
           emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
         );
       });
-    }else{
+    }else if(variables.forWhichTab == 2){
     //   queryClient.invalidateQueries({
     //     queryKey: ["attendanceLogs"], 
     //  });
      queryClient.setQueryData(["attendanceLogs",selectedProject,selectedDateRange.startDate,selectedDateRange.endDate], (oldData) => {
         if (!oldData) return oldData;
-        return oldData.map((emp) =>
+        return oldData.map((record) =>
-          emp.id === data.id ? { ...emp, ...data } : emp
+          record.id === data.id ? { ...record, ...data } : record
         );
       });
-    }
+       queryClient.invalidateQueries({queryKey:["regularizedList"]})
+    }else(
+       queryClient.setQueryData(["regularizedList",selectedProject], (oldData) => {
+        if (!oldData) return oldData;
+        return oldData.filter((record) => record.id !== data.id)
+      }),
+      queryClient.invalidateQueries({queryKey:["attendanceLogs"]})
+    )
+
      if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success");
     },
     onError: (error) => {