diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index 0a917968..7a346f67 100644 --- a/src/components/Activities/AttendcesLogs.jsx +++ b/src/components/Activities/AttendcesLogs.jsx @@ -38,134 +38,134 @@ const usePagination = (data, itemsPerPage) => { }; const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => { -const selectedProject = useSelectedProject(); -const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); -const dispatch = useDispatch(); -const [loading, setLoading] = useState(false); -const [showPending, setShowPending] = useState(false); -const [isRefreshing, setIsRefreshing] = useState(false); + const selectedProject = useSelectedProject(); + const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); + const dispatch = useDispatch(); + const [loading, setLoading] = useState(false); + const [showPending, setShowPending] = useState(false); + const [isRefreshing, setIsRefreshing] = useState(false); -const today = new Date(); -today.setHours(0, 0, 0, 0); + const today = new Date(); + today.setHours(0, 0, 0, 0); -const yesterday = new Date(); -yesterday.setDate(yesterday.getDate() - 1); + const yesterday = new Date(); + yesterday.setDate(yesterday.getDate() - 1); -const isSameDay = (dateStr) => { - if (!dateStr) return false; - const d = new Date(dateStr); - d.setHours(0, 0, 0, 0); - return d.getTime() === today.getTime(); -}; + const isSameDay = (dateStr) => { + if (!dateStr) return false; + const d = new Date(dateStr); + d.setHours(0, 0, 0, 0); + return d.getTime() === today.getTime(); + }; -const isBeforeToday = (dateStr) => { - if (!dateStr) return false; - const d = new Date(dateStr); - d.setHours(0, 0, 0, 0); - return d.getTime() < today.getTime(); -}; + const isBeforeToday = (dateStr) => { + if (!dateStr) return false; + const d = new Date(dateStr); + d.setHours(0, 0, 0, 0); + return d.getTime() < today.getTime(); + }; -const sortByName = (a, b) => { - const nameA = (a.firstName + a.lastName).toLowerCase(); - const nameB = (b.firstName + b.lastName).toLowerCase(); - return nameA.localeCompare(nameB); -}; + const sortByName = (a, b) => { + const nameA = (a.firstName + a.lastName).toLowerCase(); + const nameB = (b.firstName + b.lastName).toLowerCase(); + return nameA.localeCompare(nameB); + }; -const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs( - selectedProject, - dateRange.startDate, - dateRange.endDate, - organizationId -); - -const processedData = useMemo(() => { - const filteredData = showPending - ? data.filter((item) => item.checkOutTime === null) - : data; - - const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName); - const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName); - const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName); - const group4 = filteredData.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime)); - const group5 = filteredData.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime)).sort(sortByName); - const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName); - - const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6]; - - const groupedByDate = sortedList.reduce((acc, item) => { - const date = (item.checkInTime || item.checkOutTime)?.split("T")[0]; - if (date) { - acc[date] = acc[date] || []; - acc[date].push(item); - } - return acc; - }, {}); - - const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a)); - return sortedDates.flatMap((date) => groupedByDate[date]); -}, [data, showPending]); - -const filteredSearchData = useMemo(() => { - if (!searchTerm) return processedData; - - const lowercased = searchTerm.toLowerCase(); - return processedData.filter((item) => - `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased) + const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs( + selectedProject, + dateRange.startDate, + dateRange.endDate, + organizationId ); -}, [processedData, searchTerm]); -const { - currentPage, - totalPages, - currentItems: paginatedAttendances, - paginate, - resetPage, -} = usePagination(filteredSearchData, 20); + const processedData = useMemo(() => { + const filteredData = showPending + ? data.filter((item) => item.checkOutTime === null) + : data; -useEffect(() => { - resetPage(); -}, [filteredSearchData]); + const group1 = filteredData.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName); + const group2 = filteredData.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName); + const group3 = filteredData.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName); + const group4 = filteredData.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime)); + const group5 = filteredData.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime)).sort(sortByName); + const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName); -const handler = useCallback( - (msg) => { - const { startDate, endDate } = dateRange; - const checkIn = msg.response.checkInTime.substring(0, 10); + const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6]; - if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) { - queryClient.setQueriesData(["attendanceLogs"], (oldData) => { - if (!oldData) { - queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] }); - return; - } - return oldData.map((record) => - record.id === msg.response.id ? { ...record, ...msg.response } : record - ); - }); - resetPage(); - } - }, - [selectedProject, dateRange, resetPage] -); + const groupedByDate = sortedList.reduce((acc, item) => { + const date = (item.checkInTime || item.checkOutTime)?.split("T")[0]; + if (date) { + acc[date] = acc[date] || []; + acc[date].push(item); + } + return acc; + }, {}); -useEffect(() => { - eventBus.on("attendance_log", handler); - return () => eventBus.off("attendance_log", handler); -}, [handler]); + const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a)); + return sortedDates.flatMap((date) => groupedByDate[date]); + }, [data, showPending]); -const employeeHandler = useCallback( - (msg) => { - const { startDate, endDate } = dateRange; - if (data.some((item) => item.employeeId == msg.employeeId)) { - refetch(); - } - }, - [data, refetch] -); + const filteredSearchData = useMemo(() => { + if (!searchTerm) return processedData; -useEffect(() => { - eventBus.on("employee", employeeHandler); - return () => eventBus.off("employee", employeeHandler); -}, [employeeHandler]); + const lowercased = searchTerm.toLowerCase(); + return processedData.filter((item) => + `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased) + ); + }, [processedData, searchTerm]); + + const { + currentPage, + totalPages, + currentItems: paginatedAttendances, + paginate, + resetPage, + } = usePagination(filteredSearchData, 20); + + useEffect(() => { + resetPage(); + }, [filteredSearchData]); + + const handler = useCallback( + (msg) => { + const { startDate, endDate } = dateRange; + const checkIn = msg.response.checkInTime.substring(0, 10); + + if (selectedProject === msg.projectId && startDate <= checkIn && checkIn <= endDate) { + queryClient.setQueriesData(["attendanceLogs"], (oldData) => { + if (!oldData) { + queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] }); + return; + } + return oldData.map((record) => + record.id === msg.response.id ? { ...record, ...msg.response } : record + ); + }); + resetPage(); + } + }, + [selectedProject, dateRange, resetPage] + ); + + useEffect(() => { + eventBus.on("attendance_log", handler); + return () => eventBus.off("attendance_log", handler); + }, [handler]); + + const employeeHandler = useCallback( + (msg) => { + const { startDate, endDate } = dateRange; + if (data.some((item) => item.employeeId == msg.employeeId)) { + refetch(); + } + }, + [data, refetch] + ); + + useEffect(() => { + eventBus.on("employee", employeeHandler); + return () => eventBus.off("employee", employeeHandler); + }, [employeeHandler]); @@ -232,9 +232,9 @@ useEffect(() => { const previousAttendance = arr[index - 1]; const previousDate = previousAttendance ? moment( - previousAttendance.checkInTime || - previousAttendance.checkOutTime - ).format("YYYY-MM-DD") + previousAttendance.checkInTime || + previousAttendance.checkOutTime + ).format("YYYY-MM-DD") : null; if (!previousDate || currentDate !== previousDate) { @@ -297,8 +297,7 @@ useEffect(() => { ) : (