index.html

@@ -51,7 +51,7 @@
   <!-- Timer Picker -->
   <!-- Flatpickr CSS -->
   <link rel="stylesheet" href="/assets/vendor/libs/flatpickr/flatpickr.css" />
-  <link rel="stylesheet" href="/assets/vendor/libs/jquery-timepicker/jquery-timepicker.css" />
+  <link rel="stylesheet" href="./src/assets/vendor/libs/jquery-timepicker/jquery-timepicker.css" />
 
 
 

public/assets/js/main.js

@@ -115,38 +115,4 @@ function Main () {
 
   // Auto update menu collapsed/expanded based on the themeConfig
   window.Helpers.setCollapsed(true, false);
-
-   
-
-
-  // perfect scrolling
-    const verticalExample = document.getElementById('vertical-example'),
-      horizontalExample = document.getElementById('horizontal-example'),
-      horizVertExample = document.getElementById('both-scrollbars-example');
-
-    // Vertical Example
-    // --------------------------------------------------------------------
-    if (verticalExample) {
-      new PerfectScrollbar(verticalExample, {
-        wheelPropagation: false
-      });
-    }
-
-    // Horizontal Example
-    // --------------------------------------------------------------------
-    if (horizontalExample) {
-      new PerfectScrollbar(horizontalExample, {
-        wheelPropagation: false,
-        suppressScrollY: true
-      });
-    }
-
-    // Both vertical and Horizontal Example
-    // --------------------------------------------------------------------
-    if (horizVertExample) {
-      new PerfectScrollbar(horizVertExample, {
-        wheelPropagation: false
-      });
-    }
-
 };

src/components/Activities/AttendcesLogs.jsx

@@ -9,7 +9,6 @@ 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);
@@ -38,12 +37,9 @@ const AttendanceLog = ({
   setshowOnlyCheckout,
   showOnlyCheckout,
 }) => {
-  const selectedProject = useSelector((store)=>store.localVariables.projectId)
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
-  const [loading,setLoading]  = useState(false)
+  const { data, loading, error } = useSelector((store) => store.attendanceLogs);
-  // const { data, loading, error } = useSelector((store) => store.attendanceLogs);
-
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [processedData, setProcessedData] = useState([]);
 
@@ -73,18 +69,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)
@@ -150,6 +146,7 @@ const AttendanceLog = ({
     resetPage,
   } = usePagination(processedData, 20);
 
+  // Reset to the first page whenever processedData changes (due to switch on/off)
   useEffect(() => {
     resetPage();
   }, [processedData, resetPage]);
@@ -228,10 +225,10 @@ const AttendanceLog = ({
         <div className="col-md-2 m-0 text-end">
           <i
             className={`bx bx-refresh cursor-pointer fs-4 ${
-              isFetching ? "spin" : ""
+              loading || isRefreshing ? "spin" : ""
             }`}
             title="Refresh"
-            onClick={()=>refetch()}
+            onClick={() => setIsRefreshing(true)}
           />
         </div>
       </div>
@@ -334,9 +331,14 @@ 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,7 +8,6 @@ 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({
@@ -19,7 +18,6 @@ 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()
@@ -46,34 +44,29 @@ 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 || modeldata.forWhichTab === 2) {
+    if (modeldata.forWhichTab === 1) {
-      // handleSubmitForm(record)
+      handleSubmitForm(record)
-          const payload = {
+    } else {
-          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) => {
 
-    //       showToast("Attendance Marked Successfully", "success");
+      //  if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
-    //     })
+      //  {
-    //     .catch((error) => {
+      dispatch(markAttendance(record))
+        .unwrap()
+        .then((data) => {
 
-    //       showToast(error, "error");
+          showToast("Attendance Marked Successfully", "success");
+        })
+        .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()
   };
@@ -182,6 +175,7 @@ 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,16 +6,12 @@ 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();
@@ -28,11 +24,11 @@ const dispatch = useDispatch()
     }else{
       setLoadingForReject(true)
     }
-
+  //  setLoading(true)
-    let payload = {
+    let req_Data = {
       id:request_attendance.id || null,
-      comment: ` ${IsReqularize ? "Approved" : "Rejected"}! regularization request`,
+      description: ` ${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" }),
@@ -42,45 +38,21 @@ const dispatch = useDispatch()
       image:null 
     }
   
-
+    dispatch( markCurrentAttendance( req_Data ) ).then( ( action ) =>
-    MarkAttendance(
-    { payload, forWhichTab: 3 },
     {
-      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 regularizedList = getCachedData("regularizedList")
+      const updatedata = regularizedList?.data?.filter( item => item.id !== action.payload.id );
      
-  //     const updatedata = regularizedList?.data?.filter( item => item.id !== action.payload.id );
+      cacheData("regularizedList",{data:updatedata,projectId:projectId})
-     
+      setLoadingForApprove( false )
-  //     cacheData("regularizedList",{data:updatedata,projectId:projectId})
+      setLoadingForReject( false )
-  //     setLoadingForApprove( false )
+      refresh()
-  //     setLoadingForReject( false )
+   }).catch( ( error ) =>
-  //     refresh()
+    {
-  //  }).catch( ( error ) =>
+      showToast(error.message,"error")
-  //   {
+  });
-  //     showToast(error.message,"error")
-  // });
     
     
   }

src/hooks/useAttendance.js

@@ -1,260 +1,109 @@
 import { useEffect, useState } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import AttendanceRepository from "../repositories/AttendanceRepository";
-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)=>{
+export const useAttendace =(projectId)=>{
 
-//   const [attendance, setAttendance] = useState([]);
+  const [attendance, setAttendance] = useState([]);
-//   const[loading,setLoading] = useState(true)
+  const[loading,setLoading] = useState(true)
-//   const [error, setError] = useState(null); 
+  const [error, setError] = useState(null); 
 
-//    const fetchData =  () => {
+   const fetchData =  () => {
-//      const Attendance_cache = getCachedData("Attendance");
+     const Attendance_cache = getCachedData("Attendance");
-//      if(!Attendance_cache || Attendance_cache.projectId !== projectId){
+     if(!Attendance_cache || Attendance_cache.projectId !== projectId){
       
-//         setLoading(true);
+        setLoading(true);
-//          AttendanceRepository.getAttendance(projectId)
+         AttendanceRepository.getAttendance(projectId)
-//            .then((response) => {
+           .then((response) => {
-//              setAttendance(response.data);
+             setAttendance(response.data);
-//              cacheData( "Attendance", {data: response.data, projectId} )
+             cacheData( "Attendance", {data: response.data, projectId} )
-//              setLoading(false)
+             setLoading(false)
-//            })
+           })
-//            .catch((error) => {
+           .catch((error) => {
-//             setLoading(false)
+            setLoading(false)
-//             setError("Failed to fetch data.");
+            setError("Failed to fetch data.");
-//            })
+           })
-//       }  else {
+      }  else {
-//         setAttendance(Attendance_cache.data);
+        setAttendance(Attendance_cache.data);
-//         setLoading(false)
+        setLoading(false)
-//       }
+      }
-//     };
+    };
 
 
-//   useEffect(()=>{
+  useEffect(()=>{
-//     if ( projectId && projectId != 1 )
+    if ( projectId && projectId != 1 )
-//     {
+    {
-//       fetchData(projectId);
+      fetchData(projectId);
-//     }
+    }
-//   },[projectId])
+  },[projectId])
-
-//   return {attendance,loading,error,recall:fetchData}
-// }
-
-// export const useEmployeeAttendacesLog = (id) => {
-//   const [logs, setLogs] = useState([]);
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState(null);
-
-   
-//   const fetchData =  () => {
-//     const AttendanceLog_cache = getCachedData("AttendanceLogs");
-//     if(!AttendanceLog_cache || AttendanceLog_cache.id !== id  ){
-//        setLoading(true)
-//        AttendanceRepository.getAttendanceLogs(id).then((response)=>{     
-//         setLogs(response.data)
-//         cacheData("AttendanceLogs", { data: response.data, id })
-//         setLoading(false)
-//         }).catch((error)=>{
-//           setError("Failed to fetch data.");
-//           setLoading(false);
-//         })     
-//     }else{
-     
-//       setLogs(AttendanceLog_cache.data);
-//     }
-//   };
-
-//   useEffect(() => {
-//     if (id) {
-//       fetchData(); 
-//     }
-
-//   }, [id]);
-
-//   return { logs, loading, error };
-// };
-
-// export const useRegularizationRequests = ( projectId ) =>
-// {
-//   const [regularizes, setregularizes] = useState([]);
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState(null);
-
-   
-//   const fetchData =  () => {
-//     const regularizedList_cache = getCachedData("regularizedList");
-//     if(!regularizedList_cache || regularizedList_cache.projectId !== projectId  ){
-//        setLoading(true)
-//        AttendanceRepository.getRegularizeList(projectId).then((response)=>{     
-//         setregularizes( response.data )
-//         cacheData("regularizedList", { data: response.data, projectId })
-//         setLoading(false)
-//         }).catch((error)=>{
-//           setError("Failed to fetch data.");
-//           setLoading(false);
-//         })     
-//     }else{
-     
-//       setregularizes(regularizedList_cache.data);
-//     }
-//   };
-
-//   useEffect(() => {
-//     if (projectId) {
-//       fetchData(); 
-//     }
-
-//   }, [ projectId ] );
-//   return {regularizes,loading,error,refetch:fetchData}
-// }
-
-
-// ----------------------------Query-----------------------------
-
-
-export const useAttendance = (projectId) => {
-  const {
-    data: attendance = [],
-    isLoading: loading,
-    error,
-    refetch: recall,
-  } = useQuery({
-    queryKey: ["attendance", projectId],
-    queryFn: async () => {
-      const response = await AttendanceRepository.getAttendance(projectId);
-      return response.data;
-    },
-    enabled: !!projectId,
-    onError: (error) => {
-      showToast(error.message || "Error while fetching Attendance", "error");
-    },
-  });
-
-  return {
-    attendance,
-    loading,
-    error,
-    recall,
-  };
-};
-
-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,
-  });
-};
-
 
+  return {attendance,loading,error,recall:fetchData}
+}
 
 export const useEmployeeAttendacesLog = (id) => {
-  const {
+  const [logs, setLogs] = useState([]);
-    data: logs = [],
+  const [loading, setLoading] = useState(false);
-    isLoading: loading,
+  const [error, setError] = useState(null);
-    error,
-    refetch: recall,
-  } = useQuery({
-    queryKey: ["employeeAttendanceLogs", id],
-    queryFn: async () => {
-      const response = await AttendanceRepository.getAttendanceLogs(id);
-      return response.data;
-    },
-    enabled: !!id,
-    onError: (error) => {
-      showToast(error.message || "Error while fetching Attendance Logs", "error");
-    },
-  });
-
-  return {
-    logs,
-    loading,
-    error,
-    recall,
-  };
-};
-
-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 = [],
-    isLoading: loading,
-    error,
-    refetch,
-  } = useQuery({
-    queryKey: ["regularizedList", projectId],
-    queryFn: async () => {
-      const response = await AttendanceRepository.getRegularizeList(projectId);
-      return response.data;
-    },
-    enabled: !!projectId,
-    onError: (error) => {
-      showToast(error.message || "Error while fetching Regularization Requests", "error");
-    },
-  });
-
-  return {
-    regularizes,
-    loading,
-    error,
-    refetch,
-  };
-};
 
    
-// -------------------Mutation--------------------------------------
+  const fetchData =  () => {
-
+    const AttendanceLog_cache = getCachedData("AttendanceLogs");
-export const useMarkAttendance = () => {
+    if(!AttendanceLog_cache || AttendanceLog_cache.id !== id  ){
-  const queryClient = useQueryClient();
+       setLoading(true)
-  const selectedProject = useSelector((store)=>store.localVariables.projectId)
+       AttendanceRepository.getAttendanceLogs(id).then((response)=>{     
-
+        setLogs(response.data)
-  return useMutation({
+        cacheData("AttendanceLogs", { data: response.data, id })
-    mutationFn: async ({payload,forWhichTab}) => {
+        setLoading(false)
-      const res = await AttendanceRepository.markAttendance(payload);
+        }).catch((error)=>{
-      return res.data;
+          setError("Failed to fetch data.");
-    },
+          setLoading(false);
-
+        })     
-    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"], 
+      setLogs(AttendanceLog_cache.data);
-     });
     }
-     if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success");
+  };
-    },
+
-    onError: (error) => {
+  useEffect(() => {
-      showToast(error.message || "Failed to mark attendance", "error");
+    if (id) {
-    },
+      fetchData(); 
-  });
+    }
+
+  }, [id]);
+
+  return { logs, loading, error };
 };
+
+export const useRegularizationRequests = ( projectId ) =>
+{
+  const [regularizes, setregularizes] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+   
+  const fetchData =  () => {
+    const regularizedList_cache = getCachedData("regularizedList");
+    if(!regularizedList_cache || regularizedList_cache.projectId !== projectId  ){
+       setLoading(true)
+       AttendanceRepository.getRegularizeList(projectId).then((response)=>{     
+        setregularizes( response.data )
+        cacheData("regularizedList", { data: response.data, projectId })
+        setLoading(false)
+        }).catch((error)=>{
+          setError("Failed to fetch data.");
+          setLoading(false);
+        })     
+    }else{
+     
+      setregularizes(regularizedList_cache.data);
+    }
+  };
+
+  useEffect(() => {
+    if (projectId) {
+      fetchData(); 
+    }
+
+  }, [ projectId ] );
+  return {regularizes,loading,error,refetch:fetchData}
+}

src/index.css

@@ -101,7 +101,25 @@ button:focus-visible {
   flex: 1;
 }
 
+/* Custom Scrollbar for Webkit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: 6px; /* Width of the scrollbar */
+  height: 6px; /* Height of the scrollbar (for horizontal scrollbar) */
+}
 
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1; /* Background of the scrollbar track */
+  border-radius: 2px; /* Rounded corners for the track */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #888; /* Color of the scrollbar thumb */
+  border-radius: 10px; /* Rounded corners for the thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555; /* Color of the thumb on hover */
+}
 
 @keyframes spin {
   100% {

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 { useAttendance  } from "../../hooks/useAttendance";
+import { useAttendace } from "../../hooks/useAttendance";
 import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
@@ -22,16 +22,10 @@ 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()
@@ -39,7 +33,7 @@ const AttendancePage = () => {
     attendance,
     loading: attLoading,
     recall: attrecall,
-  } = useAttendance(selectedProject);
+  } = useAttendace(selectedProject);
   const [attendances, setAttendances] = useState();
   const [empRoles, setEmpRoles] = useState(null);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -62,17 +56,11 @@ const AttendancePage = () => {
             ? { ...item, ...msg.response }
             : item
         );
-        // cacheData("Attendance", {
+        cacheData("Attendance", {
-        //   data: updatedAttendance,
+          data: updatedAttendance,
-        //   projectId: selectedProject,
+          projectId: selectedProject,
-        // });
+        });
-        queryClient.setQueryData(["attendance",selectedProject], (oldData) => {
+        setAttendances(updatedAttendance);
-        if (!oldData) return oldData;
-        return oldData.map((emp) =>
-          emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
-        );
-      });
-        // setAttendances(updatedAttendance);
       }
     },
     [selectedProject, attrecall]
@@ -81,16 +69,14 @@ 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]
@@ -114,34 +100,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);
@@ -180,11 +166,11 @@ const AttendancePage = () => {
   }, [employeeHandler]);
   return (
     <>
-      {/* {isCreateModalOpen && modelConfig && (
+      {isCreateModalOpen && modelConfig && (
         <div
           className="modal fade show"
           style={{ display: "block" }}
-          id="check-Out-modalg"
+          id="check-Out-modal"
           tabIndex="-1"
           aria-hidden="true"
         >
@@ -194,27 +180,7 @@ 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
@@ -224,7 +190,41 @@ const AttendancePage = () => {
           ]}
         ></Breadcrumb>
         <div className="nav-align-top nav-tabs-shadow">
-
+          {/* <ul className="nav nav-tabs" role="tablist">
+            <div
+              className="dataTables_length text-start py-2 px-2 d-flex "
+              id="DataTables_Table_0_length"
+            >
+              {loginUser && loginUser?.projects?.length > 1 && (
+                <label>
+                  <select
+                    name="DataTables_Table_0_length"
+                    aria-controls="DataTables_Table_0"
+                    className="form-select form-select-sm"
+                    value={selectedProject}
+                    onChange={(e) => dispatch(setProjectId(e.target.value))}
+                    aria-label=""
+                  >
+                    {!projectLoading &&
+                      projects
+                        ?.filter((project) =>
+                          loginUser?.projects?.map(String).includes(project.id)
+                        )
+                        .map((project) => (
+                          <option value={project.id} key={project.id}>
+                            {project.name}
+                          </option>
+                        ))}
+                    {projectLoading && (
+                      <option value="Loading..." disabled>
+                        Loading...
+                      </option>
+                    )}
+                  </select>
+                </label>
+              )}
+            </div>
+          </ul> */}
 
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
@@ -301,8 +301,7 @@ 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,7 +8,6 @@ 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([]);
@@ -16,12 +15,10 @@ 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(
-  // const { data, loading, error } = useSelector(
+    (store) => store.employeeAttendance
-  //   (store) => store.employeeAttendance
+  );
-  // );
 
   const [isRefreshing, setIsRefreshing] = useState(true);
 
@@ -91,18 +88,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);
@@ -148,11 +145,11 @@ const AttendancesEmployeeRecords = ({ employee }) => {
           </div>
           <div className="col-md-2 m-0 text-end">
             <i
-              className={`bx bx-refresh cursor-pointer fs-4 ${isFetching ? "spin" : ""
+              className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
                 }`}
               data-toggle="tooltip"
               title="Refresh"
-              onClick={() => refetch()}
+              onClick={() => setIsRefreshing(!isRefreshing)}
             />
           </div>
         </div>