From c18b3529b25ecd0ff31f831bdd70b8d3c05e61eb Mon Sep 17 00:00:00 2001 From: pramod mahajan Date: Wed, 16 Jul 2025 09:50:11 +0530 Subject: [PATCH 01/13] removed unsed scroll bar css --- src/index.css | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/index.css b/src/index.css index 8758bf11..e0f8ce52 100644 --- a/src/index.css +++ b/src/index.css @@ -101,25 +101,7 @@ 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% { -- 2.43.0 From d6d98c75152d1a509461a57016ca0c7275d403e8 Mon Sep 17 00:00:00 2001 From: pramod mahajan Date: Wed, 16 Jul 2025 09:50:37 +0530 Subject: [PATCH 02/13] configure perfect scroll bar --- public/assets/js/main.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/public/assets/js/main.js b/public/assets/js/main.js index 4ad0cfe9..cc356fa7 100644 --- a/public/assets/js/main.js +++ b/public/assets/js/main.js @@ -115,4 +115,38 @@ 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 + }); + } + }; -- 2.43.0 From 1978460169f8aa606559292cf2c01b91cc85371e Mon Sep 17 00:00:00 2001 From: pramod mahajan Date: Wed, 16 Jul 2025 16:17:49 +0530 Subject: [PATCH 03/13] added query fetching techniq in attendances --- index.html | 2 +- src/hooks/useAttendance.js | 262 ++++++++++++++++-------- src/pages/Activities/AttendancePage.jsx | 36 +--- 3 files changed, 176 insertions(+), 124 deletions(-) diff --git a/index.html b/index.html index 748027e9..5bc1c55b 100644 --- a/index.html +++ b/index.html @@ -51,7 +51,7 @@ - + diff --git a/src/hooks/useAttendance.js b/src/hooks/useAttendance.js index c18ba1c2..81e327d1 100644 --- a/src/hooks/useAttendance.js +++ b/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[loading,setLoading] = useState(true) - const [error, setError] = useState(null); +// const [attendance, setAttendance] = useState([]); +// const[loading,setLoading] = useState(true) +// const [error, setError] = useState(null); - const fetchData = () => { - const Attendance_cache = getCachedData("Attendance"); - if(!Attendance_cache || Attendance_cache.projectId !== projectId){ +// const fetchData = () => { +// const Attendance_cache = getCachedData("Attendance"); +// if(!Attendance_cache || Attendance_cache.projectId !== projectId){ - setLoading(true); - AttendanceRepository.getAttendance(projectId) - .then((response) => { - setAttendance(response.data); - cacheData( "Attendance", {data: response.data, projectId} ) - setLoading(false) - }) - .catch((error) => { - setLoading(false) - setError("Failed to fetch data."); - }) - } else { - setAttendance(Attendance_cache.data); - setLoading(false) - } - }; +// setLoading(true); +// AttendanceRepository.getAttendance(projectId) +// .then((response) => { +// setAttendance(response.data); +// cacheData( "Attendance", {data: response.data, projectId} ) +// setLoading(false) +// }) +// .catch((error) => { +// setLoading(false) +// setError("Failed to fetch data."); +// }) +// } else { +// setAttendance(Attendance_cache.data); +// setLoading(false) +// } +// }; - useEffect(()=>{ - if ( projectId && projectId != 1 ) - { - fetchData(projectId); - } - },[projectId]) +// useEffect(()=>{ +// if ( projectId && projectId != 1 ) +// { +// fetchData(projectId); +// } +// },[projectId]) - return {attendance,loading,error,recall:fetchData} -} +// return {attendance,loading,error,recall:fetchData} +// } -export const useEmployeeAttendacesLog = (id) => { - const [logs, setLogs] = useState([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(null); +// 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{ +// 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); - } +// 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 (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); - } +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"); + }, + }); + + return { + logs, + loading, + error, + recall, }; +}; - useEffect(() => { - if (projectId) { - fetchData(); - } +export const useRegularizationRequests = (projectId) => { + const { + 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 {regularizes,loading,error,refetch:fetchData} -} \ No newline at end of file + return { + regularizes, + loading, + error, + refetch, + }; +}; diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx index f4e6c58c..c613c69a 100644 --- a/src/pages/Activities/AttendancePage.jsx +++ b/src/pages/Activities/AttendancePage.jsx @@ -190,41 +190,7 @@ const AttendancePage = () => { ]} >
- {/*
    -
    - {loginUser && loginUser?.projects?.length > 1 && ( - - )} -
    -
*/} +
  • -- 2.43.0 From 59196b3cf0bfd1c91da5312543bd25c02b11594e Mon Sep 17 00:00:00 2001 From: pramod mahajan Date: Thu, 17 Jul 2025 09:52:14 +0530 Subject: [PATCH 04/13] added query hook for fetching and posting data --- src/components/Activities/AttendcesLogs.jsx | 42 +++--- .../Activities/CheckCheckOutForm.jsx | 48 ++++--- .../Activities/RegularizationActions.jsx | 64 ++++++--- src/hooks/useAttendance.js | 75 ++++++++++- src/pages/Activities/AttendancePage.jsx | 125 +++++++++++------- .../employee/AttendancesEmployeeRecords.jsx | 37 +++--- 6 files changed, 263 insertions(+), 128 deletions(-) diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index 505c7c61..5642c65a 100644 --- a/src/components/Activities/AttendcesLogs.jsx +++ b/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(() => { - const { startDate, endDate } = dateRange; - dispatch( - fetchAttendanceData({ - projectId, - fromDate: startDate, - toDate: endDate, - }) - ); - setIsRefreshing(false); - }, [dateRange, projectId, dispatch, isRefreshing]); - + // useEffect(() => { + // const { startDate, endDate } = dateRange; + // dispatch( + // fetchAttendanceData({ + // projectId, + // fromDate: startDate, + // toDate: endDate, + // }) + // ); + // setIsRefreshing(false); + // }, [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 = ({
    setIsRefreshing(true)} + onClick={()=>refetch()} />
@@ -331,14 +334,9 @@ const AttendanceLog = ({ )} - {!loading && !isRefreshing && data.length === 0 && ( + {!loading && !isRefreshing && data?.length === 0 && ( No employee logs )} - {/* {error && !loading && !isRefreshing && ( - - {error} - - )} */} {!loading && !isRefreshing && processedData.length > 10 && (