index.html

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

src/hooks/useAttendance.js

@@ -1,109 +1,195 @@
 import { useEffect, useState } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import AttendanceRepository from "../repositories/AttendanceRepository";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import showToast from "../services/toastService";
 
-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(()=>{
+//     if ( projectId && projectId != 1 )
+//     {
+//       fetchData(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 useAttendace = (projectId) => {
+  const {
+    data: attendance = [],
+    isLoading: loading,
+    error,
+    refetch: recall,
+  } = useQuery({
+    queryKey: ["attendance", projectId],
+    queryFn: async ({ queryKey }) => {
+      const [, projectId] = queryKey; 
+      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,
   };
-
-
-  useEffect(()=>{
-    if ( projectId && projectId != 1 )
-    {
-      fetchData(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);
 
+export const useEmployeeAttendacesLog = (id) => {
+  const {
+    data: logs = [],
+    isLoading: loading,
+    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");
+    },
+  });
 
-  const fetchData =  () => {
+  return {
-    const regularizedList_cache = getCachedData("regularizedList");
+    logs,
-    if(!regularizedList_cache || regularizedList_cache.projectId !== projectId  ){
+    loading,
-       setLoading(true)
+    error,
-       AttendanceRepository.getRegularizeList(projectId).then((response)=>{     
+    recall,
-        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(() => {
+export const useRegularizationRequests = (projectId) => {
-    if (projectId) {
+  const {
-      fetchData(); 
+    data: regularizes = [],
-    }
+    isLoading: loading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["regularizationRequests", 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");
+    },
+  });
 
-  }, [ projectId ] );
+  return {
-  return {regularizes,loading,error,refetch:fetchData}
+    regularizes,
-}
+    loading,
+    error,
+    refetch,
+  };
+};

src/pages/Activities/AttendancePage.jsx

@@ -190,41 +190,7 @@ 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">