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();
       }
     },
@@ -66,10 +67,12 @@ const Regularization = ({ handleRequest }) => {
   }, [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>
+        </div>
+      ) : currentItems?.length > 0 ? (
         <table className="table mb-0">
           <thead>
             <tr>
@@ -85,15 +88,7 @@ const Regularization = ({ handleRequest }) => {
             </tr>
           </thead>
           <tbody>
-          {/* {loading && (
+            {currentItems?.map((att, index) => (
-            <td colSpan={6} className="text-center py-5">
-              Loading...
-            </td>
-          )} */}
-
-          {!loading &&
-            (currentItems?.length > 0 ? (
-              currentItems?.map((att, index) => (
               <tr key={index}>
                 <td colSpan={2}>
                   <div className="d-flex justify-content-start align-items-center">
@@ -113,12 +108,9 @@ const Regularization = ({ handleRequest }) => {
                 <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
                 <td>{convertShortTime(att.checkInTime)}</td>
                 <td>
-                    {att.checkOutTime
+                  {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
-                      ? convertShortTime(att.checkOutTime)
-                      : "--"}
                 </td>
                 <td className="text-center ">
-                    {/* <div className='d-flex  justify-content-center align-items-center gap-3'> */}
                   <RegularizationActions
                     attendanceData={att}
                     handleRequest={handleRequest}
@@ -127,24 +119,12 @@ const Regularization = ({ handleRequest }) => {
                   {/* </div> */}
                 </td>
               </tr>
-              ))
-            ) : (
-              <tr>
-                <td
-                  colSpan={6}
-                  className="text-center"
-                  style={{
-                    height: "200px",
-                    verticalAlign: "middle",
-                    borderBottom: "none",
-                  }}
-                >
-                  No Record Found
-                </td>
-              </tr>
             ))}
           </tbody>
         </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">

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) => {