src/components/Activities/AttendcesLogs.jsx

@@ -9,6 +9,7 @@ import DateRangePicker from "../common/DateRangePicker";
 import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
 import eventBus from "../../services/eventBus";
 import AttendanceRepository from "../../repositories/AttendanceRepository";
+import { useAttendancesLogs } from "../../hooks/useAttendance";
 
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -37,9 +38,12 @@ const AttendanceLog = ({
   setshowOnlyCheckout,
   showOnlyCheckout,
 }) => {
+  const selectedProject = useSelector((store)=>store.localVariables.projectId)
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
-  const { data, loading, error } = useSelector((store) => store.attendanceLogs);
+  const [loading,setLoading]  = useState(false)
+  // const { data, loading, error } = useSelector((store) => store.attendanceLogs);
+
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [processedData, setProcessedData] = useState([]);
 
@@ -69,18 +73,18 @@ const AttendanceLog = ({
     return nameA?.localeCompare(nameB);
   };
 
-  useEffect(() => {
+  // useEffect(() => {
-    const { startDate, endDate } = dateRange;
+  //   const { startDate, endDate } = dateRange;
-    dispatch(
+  //   dispatch(
-      fetchAttendanceData({
+  //     fetchAttendanceData({
-        projectId,
+  //       projectId,
-        fromDate: startDate,
+  //       fromDate: startDate,
-        toDate: endDate,
+  //       toDate: endDate,
-      })
+  //     })
-    );
+  //   );
-    setIsRefreshing(false);
+  //   setIsRefreshing(false);
-  }, [dateRange, projectId, dispatch, isRefreshing]);
+  // }, [dateRange, projectId, dispatch, isRefreshing]);
-
+  const {data= [],isLoading, error, refetch,isFetching} = useAttendancesLogs(selectedProject,dateRange.startDate, dateRange.endDate)
   const filtering = (data) => {
     const filteredData = showOnlyCheckout
       ? data.filter((item) => item.checkOutTime === null)
@@ -146,7 +150,6 @@ const AttendanceLog = ({
     resetPage,
   } = usePagination(processedData, 20);
 
-  // Reset to the first page whenever processedData changes (due to switch on/off)
   useEffect(() => {
     resetPage();
   }, [processedData, resetPage]);
@@ -225,10 +228,10 @@ const AttendanceLog = ({
         <div className="col-md-2 m-0 text-end">
           <i
             className={`bx bx-refresh cursor-pointer fs-4 ${
-              loading || isRefreshing ? "spin" : ""
+              isFetching ? "spin" : ""
             }`}
             title="Refresh"
-            onClick={() => setIsRefreshing(true)}
+            onClick={()=>refetch()}
           />
         </div>
       </div>
@@ -331,14 +334,9 @@ const AttendanceLog = ({
             </tbody>
           </table>
         )}
-        {!loading && !isRefreshing && data.length === 0 && (
+        {!loading && !isRefreshing && data?.length === 0 && (
          <span className="text-muted">No employee logs</span>
         )}
-        {/* {error && !loading && !isRefreshing && (
-          <tr>
-            <td colSpan={6}>{error}</td>
-          </tr>
-        )} */}
       </div>
       {!loading && !isRefreshing && processedData.length > 10 && (
         <nav aria-label="Page ">

src/components/Activities/CheckCheckOutForm.jsx

@@ -8,6 +8,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { markAttendance } from "../../slices/apiSlice/attedanceLogsSlice";
 import showToast from "../../services/toastService";
 import { checkIfCurrentDate } from "../../utils/dateUtils";
+import { useMarkAttendance } from "../../hooks/useAttendance";
 
 
 const schema = z.object({
@@ -18,6 +19,7 @@ const schema = z.object({
 const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
 
   const projectId = useSelector((store) => store.localVariables.projectId)
+  const {mutate:MarkAttendance} = useMarkAttendance()
   const [isLoading, setIsLoading] = useState(false);
   const coords = usePositionTracker();
   const dispatch = useDispatch()
@@ -44,29 +46,34 @@ const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
 
   const onSubmit = (data) => {
     let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, employeeId: modeldata.employeeId, action: modeldata.action, id: modeldata?.id || null }
-    if (modeldata.forWhichTab === 1) {
+    // if (modeldata.forWhichTab === 1 || modeldata.forWhichTab === 2) {
-      handleSubmitForm(record)
+      // handleSubmitForm(record)
-    } else {
+          const payload = {
+          Id: modeldata?.id || null,
+          comment: data.description,
+          employeeID: modeldata.employeeId,
+          projectId: projectId,
+          date: new Date().toISOString(),
+          markTime: data.markTime,
+          latitude: coords.latitude.toString(),
+          longitude: coords.longitude.toString(),
+          action: modeldata.action,
+          image: null,
+        };
+      MarkAttendance({payload,forWhichTab:modeldata.forWhichTab})
+    // } else {
+    //   dispatch(markAttendance(record))
+    //     .unwrap()
+    //     .then((data) => {
 
-      //  if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
+    //       showToast("Attendance Marked Successfully", "success");
-      //  {
+    //     })
-      dispatch(markAttendance(record))
+    //     .catch((error) => {
-        .unwrap()
-        .then((data) => {
 
-          showToast("Attendance Marked Successfully", "success");
+    //       showToast(error, "error");
-        })
-        .catch((error) => {
 
-          showToast(error, "error");
+    //     });
-
+    // }
-        });
-
-      //  } else
-      //  {
-      //   let formData = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude,employeeId:modeldata.employeeId,projectId:projectId,action:modeldata.action,id:modeldata?.id || null}
-      //  }
-    }
 
     closeModal()
   };
@@ -175,7 +182,6 @@ export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
 
 
   const onSubmit = (data) => {
-
     let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, }
     handleSubmitForm(record)
     closeModal()

src/components/Activities/RegularizationActions.jsx

@@ -6,12 +6,16 @@ import { usePositionTracker } from '../../hooks/usePositionTracker';
 import {markCurrentAttendance} from '../../slices/apiSlice/attendanceAllSlice';
 import {cacheData, getCachedData} from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
+import { useMarkAttendance } from '../../hooks/useAttendance';
+import { useQueryClient } from '@tanstack/react-query';
 
 
 const RegularizationActions = ({attendanceData,handleRequest,refresh}) => {
 const [status,setStatus] = useState()
 const [loadingApprove,setLoadingForApprove] = useState(false)
 const [loadingReject,setLoadingForReject] = useState(false)
+const {mutate:MarkAttendance,isPending} = useMarkAttendance()
+const queryClient = useQueryClient()
 
 const projectId = useSelector((store)=>store.localVariables.projectId)
 const {latitude,longitude} = usePositionTracker();
@@ -24,11 +28,11 @@ const dispatch = useDispatch()
     }else{
       setLoadingForReject(true)
     }
-  //  setLoading(true)
+
-    let req_Data = {
+    let payload = {
       id:request_attendance.id || null,
-      description: ` ${IsReqularize ? "Approved" : "Rejected"}! regularization request`,
+      comment: ` ${IsReqularize ? "Approved" : "Rejected"}! regularization request`,
-      employeeId:request_attendance?.employeeId,
+      employeeID:request_attendance?.employeeId,
       projectId:projectId,
       date:new Date().toISOString(),
       markTime:new Date().toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }),
@@ -37,22 +41,46 @@ const dispatch = useDispatch()
       action:IsReqularize ? 4 : 5,
       image:null 
     }
-  
-    dispatch( markCurrentAttendance( req_Data ) ).then( ( action ) =>
-    {
-
-      const regularizedList = getCachedData("regularizedList")
-      
-      const updatedata = regularizedList?.data?.filter( item => item.id !== action.payload.id );
      
-      cacheData("regularizedList",{data:updatedata,projectId:projectId})
+
-      setLoadingForApprove( false )
+    MarkAttendance(
-      setLoadingForReject( false )
+    { payload, forWhichTab: 3 },
-      refresh()
-   }).catch( ( error ) =>
     {
-      showToast(error.message,"error")
+      onSuccess: () => {
-  });
+       queryClient.invalidateQueries({queryKey:["regularizedList"]})
+         if (IsReqularize) {
+          setLoadingForApprove(false);
+        } else {
+          setLoadingForReject(false);
+        }
+        showToast(`Successfully ${IsReqularize ? "approved" : "rejected"}`, "success");
+      },
+      onError: (error) => {
+        showToast(error.message || "Failed to submit", "error");
+        if (IsReqularize) {
+          setLoadingForApprove(false);
+        } else {
+          setLoadingForReject(false);
+        }
+      },
+    }
+  );
+  
+  //   dispatch( markCurrentAttendance( req_Data ) ).then( ( action ) =>
+  //   {
+
+  //     const regularizedList = getCachedData("regularizedList")
+      
+  //     const updatedata = regularizedList?.data?.filter( item => item.id !== action.payload.id );
+     
+  //     cacheData("regularizedList",{data:updatedata,projectId:projectId})
+  //     setLoadingForApprove( false )
+  //     setLoadingForReject( false )
+  //     refresh()
+  //  }).catch( ( error ) =>
+  //   {
+  //     showToast(error.message,"error")
+  // });
     
     
   }

src/hooks/useAttendance.js

@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import AttendanceRepository from "../repositories/AttendanceRepository";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import showToast from "../services/toastService";
+import { useSelector } from "react-redux";
+import { store } from "../store/store";
 
 // export const useAttendace =(projectId)=>{
 
@@ -114,7 +116,7 @@ import showToast from "../services/toastService";
 // ----------------------------Query-----------------------------
 
 
-export const useAttendace = (projectId) => {
+export const useAttendance = (projectId) => {
   const {
     data: attendance = [],
     isLoading: loading,
@@ -122,8 +124,7 @@ export const useAttendace = (projectId) => {
     refetch: recall,
   } = useQuery({
     queryKey: ["attendance", projectId],
-    queryFn: async ({ queryKey }) => {
+    queryFn: async () => {
-      const [, projectId] = queryKey; 
       const response = await AttendanceRepository.getAttendance(projectId);
       return response.data;
     },
@@ -141,6 +142,23 @@ export const useAttendace = (projectId) => {
   };
 };
 
+export const useAttendancesLogs = (projectId, fromDate, toDate) => {
+  const enabled = !!projectId && !!fromDate && !!toDate;
+  return useQuery({
+    queryKey: ["attendanceLogs", projectId, fromDate, toDate],
+    queryFn: async () => {
+      const res = await AttendanceRepository.getAttendanceFilteredByDate(
+        projectId,
+        fromDate,
+        toDate
+      );
+      return res.data;
+    },
+    enabled,
+  });
+};
+
+
 
 export const useEmployeeAttendacesLog = (id) => {
   const {
@@ -168,6 +186,19 @@ export const useEmployeeAttendacesLog = (id) => {
   };
 };
 
+export const useAttendanceByEmployee = (employeeId, fromDate, toDate) => {
+  const enabled = !!employeeId && !!fromDate && !!toDate;
+
+  return useQuery({
+    queryKey: ["employeeAttendance", employeeId, fromDate, toDate],
+    queryFn: async () => {
+      const res = await AttendanceRepository.getAttendanceByEmployee(employeeId, fromDate, toDate);
+      return res.data;
+    },
+    enabled,
+  });
+};
+
 export const useRegularizationRequests = (projectId) => {
   const {
     data: regularizes = [],
@@ -175,7 +206,7 @@ export const useRegularizationRequests = (projectId) => {
     error,
     refetch,
   } = useQuery({
-    queryKey: ["regularizationRequests", projectId],
+    queryKey: ["regularizedList", projectId],
     queryFn: async () => {
       const response = await AttendanceRepository.getRegularizeList(projectId);
       return response.data;
@@ -193,3 +224,37 @@ export const useRegularizationRequests = (projectId) => {
     refetch,
   };
 };
+
+
+// -------------------Mutation--------------------------------------
+
+export const useMarkAttendance = () => {
+  const queryClient = useQueryClient();
+  const selectedProject = useSelector((store)=>store.localVariables.projectId)
+
+  return useMutation({
+    mutationFn: async ({payload,forWhichTab}) => {
+      const res = await AttendanceRepository.markAttendance(payload);
+      return res.data;
+    },
+
+    onSuccess: (data,variables) => {
+      if(variables.forWhichTab == 1){
+      queryClient.setQueryData(["attendance",selectedProject], (oldData) => {
+        if (!oldData) return oldData;
+        return oldData.map((emp) =>
+          emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
+        );
+      });
+    }else{
+      queryClient.invalidateQueries({
+        queryKey: ["attendanceLogs"], 
+     });
+    }
+     if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success");
+    },
+    onError: (error) => {
+      showToast(error.message || "Failed to mark attendance", "error");
+    },
+  });
+};

src/pages/Activities/AttendancePage.jsx

@@ -12,7 +12,7 @@ import AttendanceModel from "../../components/Activities/AttendanceModel";
 import showToast from "../../services/toastService";
 // import { useProjects } from "../../hooks/useProjects";
 import Regularization from "../../components/Activities/Regularization";
-import { useAttendace } from "../../hooks/useAttendance";
+import { useAttendance  } from "../../hooks/useAttendance";
 import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
@@ -22,10 +22,16 @@ import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
 import eventBus from "../../services/eventBus";
 import AttendanceRepository from "../../repositories/AttendanceRepository";
 import { useProjectName } from "../../hooks/useProjects";
+import GlobalModel from "../../components/common/GlobalModel";
+import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
+import AttendLogs from "../../components/Activities/AttendLogs";
+import Confirmation from "../../components/Activities/Confirmation";
+import { useQueryClient } from "@tanstack/react-query";
 
 const AttendancePage = () => {
   const [activeTab, setActiveTab] = useState("all");
   const [ShowPending, setShowPending] = useState(false);
+  const queryClient = useQueryClient()
   const loginUser = getCachedProfileData();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
   const dispatch = useDispatch()
@@ -33,7 +39,7 @@ const AttendancePage = () => {
     attendance,
     loading: attLoading,
     recall: attrecall,
-  } = useAttendace(selectedProject);
+  } = useAttendance(selectedProject);
   const [attendances, setAttendances] = useState();
   const [empRoles, setEmpRoles] = useState(null);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -56,11 +62,17 @@ const AttendancePage = () => {
             ? { ...item, ...msg.response }
             : item
         );
-        cacheData("Attendance", {
+        // cacheData("Attendance", {
-          data: updatedAttendance,
+        //   data: updatedAttendance,
-          projectId: selectedProject,
+        //   projectId: selectedProject,
-        });
+        // });
-        setAttendances(updatedAttendance);
+        queryClient.setQueryData(["attendance",selectedProject], (oldData) => {
+        if (!oldData) return oldData;
+        return oldData.map((emp) =>
+          emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
+        );
+      });
+        // setAttendances(updatedAttendance);
       }
     },
     [selectedProject, attrecall]
@@ -69,14 +81,16 @@ const AttendancePage = () => {
   const employeeHandler = useCallback(
     (msg) => {
       if (attendances.some((item) => item.employeeId == msg.employeeId)) {
-        AttendanceRepository.getAttendance(selectedProject)
+        // AttendanceRepository.getAttendance(selectedProject)
-          .then((response) => {
+        //   .then((response) => {
-            cacheData("Attendance", { data: response.data, selectedProject });
+        //     cacheData("Attendance", { data: response.data, selectedProject });
-            setAttendances(response.data);
+        //     setAttendances(response.data);
-          })
+        //   })
-          .catch((error) => {
+        //   .catch((error) => {
-            console.error(error);
+        //     console.error(error);
-          });
+        //   });
+
+        attrecall()
       }
     },
     [selectedProject, attendances]
@@ -100,34 +114,34 @@ const AttendancePage = () => {
   const closeModal = () => {
     setModelConfig(null);
     setIsCreateModalOpen(false);
-    const modalElement = document.getElementById("check-Out-modal");
+    // const modalElement = document.getElementById("check-Out-modal");
-    if (modalElement) {
+    // if (modalElement) {
-      modalElement.classList.remove("show");
+    //   modalElement.classList.remove("show");
-      modalElement.style.display = "none";
+    //   modalElement.style.display = "none";
-      document.body.classList.remove("modal-open");
+    //   document.body.classList.remove("modal-open");
-      document.querySelector(".modal-backdrop")?.remove();
+    //   document.querySelector(".modal-backdrop")?.remove();
-    }
+    // }
   };
 
-  const handleSubmit = (formData) => {
+  // const handleSubmit = (formData) => {
-    dispatch(markCurrentAttendance(formData))
+  //   dispatch(markCurrentAttendance(formData))
-      .then((action) => {
+  //     .then((action) => {
-        const updatedAttendance = attendances.map((item) =>
+  //       const updatedAttendance = attendances.map((item) =>
-          item.employeeId === action.payload.employeeId
+  //         item.employeeId === action.payload.employeeId
-            ? { ...item, ...action.payload }
+  //           ? { ...item, ...action.payload }
-            : item
+  //           : item
-        );
+  //       );
-        cacheData("Attendance", {
+  //       cacheData("Attendance", {
-          data: updatedAttendance,
+  //         data: updatedAttendance,
-          projectId: selectedProject,
+  //         projectId: selectedProject,
-        });
+  //       });
-        setAttendances(updatedAttendance);
+  //       setAttendances(updatedAttendance);
-        showToast("Attedance Marked Successfully", "success");
+  //       showToast("Attedance Marked Successfully", "success");
-      })
+  //     })
-      .catch((error) => {
+  //     .catch((error) => {
-        showToast(error.message, "error");
+  //       showToast(error.message, "error");
-      });
+  //     });
-  };
+  // };
 
   const handleToggle = (event) => {
     setShowOnlyCheckout(event.target.checked);
@@ -166,11 +180,11 @@ const AttendancePage = () => {
   }, [employeeHandler]);
   return (
     <>
-      {isCreateModalOpen && modelConfig && (
+      {/* {isCreateModalOpen && modelConfig && (
         <div
           className="modal fade show"
           style={{ display: "block" }}
-          id="check-Out-modal"
+          id="check-Out-modalg"
           tabIndex="-1"
           aria-hidden="true"
         >
@@ -180,8 +194,28 @@ const AttendancePage = () => {
             handleSubmitForm={handleSubmit}
           />
         </div>
-      )}
+      )} */}
 
+{isCreateModalOpen && modelConfig && (
+  <GlobalModel isOpen={isCreateModalOpen} size={modelConfig?.action === 6 && "lg"} closeModal={closeModal}>
+     {(modelConfig?.action === 0 || modelConfig?.action === 1 ||  modelConfig?.action === 2) && (
+          <CheckCheckOutmodel modeldata={modelConfig} closeModal={closeModal}   />
+      
+       )}
+      {/* For view logs */}
+       {modelConfig?.action === 6 && (
+            <AttendLogs Id={modelConfig?.id} closeModal={closeModal}  />
+         
+      )}
+      {
+        modelConfig?.action === 7 &&(
+          <Confirmation closeModal={closeModal} />
+        )
+      }
+  </GlobalModel>
+)}
+
+      
       <div className="container-fluid">
         <Breadcrumb
           data={[
@@ -267,7 +301,8 @@ const AttendancePage = () => {
 
             {activeTab === "regularization" && DoRegularized && (
               <div className="tab-pane fade show active py-0">
-                <Regularization handleRequest={handleSubmit} />
+                {/* <Regularization handleRequest={handleSubmit} /> */}
+                <Regularization  />
               </div>
             )}
 

src/pages/employee/AttendancesEmployeeRecords.jsx

@@ -8,6 +8,7 @@ import Avatar from "../../components/common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "../../components/Activities/RenderAttendanceStatus";
 import AttendLogs from "../../components/Activities/AttendLogs";
+import { useAttendanceByEmployee } from "../../hooks/useAttendance";
 
 const AttendancesEmployeeRecords = ({ employee }) => {
   const [attendances, setAttendnaces] = useState([]);
@@ -15,10 +16,12 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [attendanceId, setAttendanecId] = useState();
+  const {data =[],isLoading:loading,isFetching,error,refetch} = useAttendanceByEmployee(employee,dateRange.startDate, dateRange.endDate)
   const dispatch = useDispatch();
-  const { data, loading, error } = useSelector(
+
-    (store) => store.employeeAttendance
+  // const { data, loading, error } = useSelector(
-  );
+  //   (store) => store.employeeAttendance
+  // );
 
   const [isRefreshing, setIsRefreshing] = useState(true);
 
@@ -88,18 +91,18 @@ const AttendancesEmployeeRecords = ({ employee }) => {
     20
   );
 
-  useEffect(() => {
+  // useEffect(() => {
-    const { startDate, endDate } = dateRange;
+  //   const { startDate, endDate } = dateRange;
-    if (startDate && endDate) {
+  //   if (startDate && endDate) {
-      dispatch(
+  //     dispatch(
-        fetchEmployeeAttendanceData({
+  //       fetchEmployeeAttendanceData({
-          employeeId: employee,
+  //         employeeId: employee,
-          fromDate: startDate,
+  //         fromDate: startDate,
-          toDate: endDate,
+  //         toDate: endDate,
-        })
+  //       })
-      );
+  //     );
-    }
+  //   }
-  }, [dateRange, employee, isRefreshing]);
+  // }, [dateRange, employee, isRefreshing]);
 
   const openModal = (id) => {
     setAttendanecId(id);
@@ -145,11 +148,11 @@ const AttendancesEmployeeRecords = ({ employee }) => {
           </div>
           <div className="col-md-2 m-0 text-end">
             <i
-              className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
+              className={`bx bx-refresh cursor-pointer fs-4 ${isFetching ? "spin" : ""
                 }`}
               data-toggle="tooltip"
               title="Refresh"
-              onClick={() => setIsRefreshing(!isRefreshing)}
+              onClick={() => refetch()}
             />
           </div>
         </div>