450 lines
15 KiB
JavaScript
450 lines
15 KiB
JavaScript
import React, { useEffect, useState, useMemo, useCallback } from "react";
|
|
import moment from "moment";
|
|
import Avatar from "../common/Avatar";
|
|
import { convertShortTime } from "../../utils/dateUtils";
|
|
import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; // Make sure setAttendanceData is correctly imported
|
|
import DateRangePicker from "../common/DateRangePicker";
|
|
import eventBus from "../../services/eventBus";
|
|
|
|
// Custom hook for pagination
|
|
const usePagination = (data, itemsPerPage) => {
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
// Ensure data is an array before accessing length
|
|
const totalItems = Array.isArray(data) ? data.length : 0;
|
|
const maxPage = Math.ceil(totalItems / itemsPerPage);
|
|
|
|
const currentItems = useMemo(() => {
|
|
if (!Array.isArray(data) || data.length === 0) {
|
|
return [];
|
|
}
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
const endIndex = startIndex + itemsPerPage;
|
|
return data.slice(startIndex, endIndex);
|
|
}, [data, currentPage, itemsPerPage]);
|
|
|
|
const paginate = useCallback((pageNumber) => {
|
|
if (pageNumber > 0 && pageNumber <= maxPage) {
|
|
setCurrentPage(pageNumber);
|
|
}
|
|
}, [maxPage]);
|
|
|
|
const resetPage = useCallback(() => setCurrentPage(1), []);
|
|
|
|
return {
|
|
currentPage,
|
|
totalPages: maxPage,
|
|
currentItems,
|
|
paginate,
|
|
resetPage,
|
|
};
|
|
};
|
|
|
|
const AttendanceLog = ({
|
|
handleModalData,
|
|
projectId,
|
|
setshowOnlyCheckout,
|
|
showOnlyCheckout,
|
|
searchQuery,
|
|
}) => {
|
|
const selectedProject = useSelector(
|
|
(store) => store.localVariables.projectId
|
|
);
|
|
// Initialize date range with sensible defaults, e.g., last 7 days or current day
|
|
const defaultEndDate = moment().format("YYYY-MM-DD");
|
|
const defaultStartDate = moment().subtract(6, 'days').format("YYYY-MM-DD"); // Last 7 days including today
|
|
|
|
const [dateRange, setDateRange] = useState({
|
|
startDate: defaultStartDate,
|
|
endDate: defaultEndDate
|
|
});
|
|
const dispatch = useDispatch();
|
|
|
|
const { data: attendanceLogsData, loading: logsLoading, isFetching: logsFetching } = useSelector(
|
|
(state) => state.attendanceLogs
|
|
);
|
|
|
|
const [isRefreshing, setIsRefreshing] = useState(false); // Local state for refresh spinner
|
|
|
|
// Memoize today and yesterday dates to prevent re-creation on every render
|
|
const today = useMemo(() => {
|
|
const d = new Date();
|
|
d.setHours(0, 0, 0, 0);
|
|
return d;
|
|
}, []);
|
|
|
|
const yesterday = useMemo(() => {
|
|
const d = new Date();
|
|
d.setDate(d.getDate() - 1);
|
|
d.setHours(0, 0, 0, 0); // Set to start of day for accurate comparison
|
|
return d;
|
|
}, []);
|
|
|
|
const isSameDay = useCallback((dateStr) => {
|
|
if (!dateStr) return false;
|
|
const d = new Date(dateStr);
|
|
d.setHours(0, 0, 0, 0);
|
|
return d.getTime() === today.getTime();
|
|
}, [today]);
|
|
|
|
const isBeforeToday = useCallback((dateStr) => {
|
|
if (!dateStr) return false;
|
|
const d = new Date(dateStr);
|
|
d.setHours(0, 0, 0, 0);
|
|
return d.getTime() < today.getTime();
|
|
}, [today]);
|
|
|
|
const sortByName = useCallback((a, b) => {
|
|
const nameA = `${a.firstName || ""} ${a.lastName || ""}`.toLowerCase();
|
|
const nameB = `${b.firstName || ""} ${b.lastName || ""}`.toLowerCase();
|
|
return nameA.localeCompare(nameB);
|
|
}, []);
|
|
|
|
// Effect to fetch attendance data when dateRange or projectId changes, or when refreshed
|
|
useEffect(() => {
|
|
const { startDate, endDate } = dateRange;
|
|
dispatch(
|
|
fetchAttendanceData({
|
|
projectId,
|
|
fromDate: startDate,
|
|
toDate: endDate,
|
|
})
|
|
);
|
|
// Reset refreshing state only after the dispatch, assuming fetchAttendanceData
|
|
// will eventually update logsLoading/logsFetching
|
|
const timer = setTimeout(() => { // Give Redux time to update
|
|
setIsRefreshing(false);
|
|
}, 500); // Small delay to show spinner for a bit longer
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [dateRange, projectId, dispatch, isRefreshing]);
|
|
|
|
const processedData = useMemo(() => {
|
|
let filteredData = showOnlyCheckout
|
|
? (attendanceLogsData || []).filter((item) => item.checkOutTime === null) // Ensure attendanceLogsData is an array
|
|
: (attendanceLogsData || []); // Ensure attendanceLogsData is an array
|
|
|
|
// Apply search query filter
|
|
if (searchQuery) {
|
|
const lowerCaseSearchQuery = searchQuery.toLowerCase();
|
|
filteredData = filteredData.filter((att) => {
|
|
const fullName = [att.firstName, att.middleName, att.lastName]
|
|
.filter(Boolean)
|
|
.join(" ")
|
|
.toLowerCase();
|
|
|
|
return (
|
|
att.employeeName?.toLowerCase().includes(lowerCaseSearchQuery) ||
|
|
att.employeeId?.toLowerCase().includes(lowerCaseSearchQuery) ||
|
|
fullName.includes(lowerCaseSearchQuery)
|
|
);
|
|
});
|
|
}
|
|
|
|
// Grouping and sorting logic remains mostly the same, ensuring 'filteredData' is used
|
|
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,
|
|
];
|
|
|
|
// Group by date
|
|
const groupedByDate = sortedList.reduce((acc, item) => {
|
|
// Use checkInTime for activity 1, and checkOutTime for others or if checkInTime is null
|
|
const dateString = item.activity === 1 ? item.checkInTime : item.checkOutTime;
|
|
const date = dateString ? moment(dateString).format("YYYY-MM-DD") : null;
|
|
|
|
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)
|
|
);
|
|
|
|
// Create the final sorted array
|
|
return sortedDates.flatMap((date) => groupedByDate[date]);
|
|
}, [attendanceLogsData, showOnlyCheckout, searchQuery, isSameDay, isBeforeToday, sortByName]);
|
|
|
|
const {
|
|
currentPage,
|
|
totalPages,
|
|
currentItems: paginatedAttendances,
|
|
paginate,
|
|
resetPage,
|
|
} = usePagination(processedData, 20);
|
|
|
|
// Effect to reset pagination when search query or showOnlyCheckout changes
|
|
useEffect(() => {
|
|
resetPage();
|
|
}, [searchQuery, showOnlyCheckout, resetPage]);
|
|
|
|
// Handler for 'attendance_log' event from eventBus
|
|
// This will now trigger a re-fetch of data
|
|
const handler = useCallback(
|
|
(msg) => {
|
|
// Check if the event is relevant to the current project and date range
|
|
const { startDate, endDate } = dateRange;
|
|
const eventDate = (msg.response.checkInTime || msg.response.checkOutTime)?.substring(0, 10);
|
|
|
|
// Only refetch if the event relates to the currently viewed project and date range
|
|
if (
|
|
projectId === msg.projectId &&
|
|
eventDate &&
|
|
eventDate >= startDate && // Ensure eventDate is within the current range
|
|
eventDate <= endDate
|
|
) {
|
|
// Trigger a re-fetch of attendance data to get the latest state
|
|
dispatch(
|
|
fetchAttendanceData({
|
|
projectId,
|
|
fromDate: startDate,
|
|
toDate: endDate,
|
|
})
|
|
);
|
|
}
|
|
},
|
|
[projectId, dateRange, dispatch]
|
|
);
|
|
|
|
|
|
useEffect(() => {
|
|
eventBus.on("attendance_log", handler);
|
|
return () => eventBus.off("attendance_log", handler);
|
|
}, [handler]);
|
|
|
|
// Handler for 'employee' event from eventBus (already triggers a refetch)
|
|
const employeeHandler = useCallback(
|
|
(msg) => {
|
|
const { startDate, endDate } = dateRange;
|
|
dispatch(
|
|
fetchAttendanceData({
|
|
projectId,
|
|
fromDate: startDate,
|
|
toDate: endDate,
|
|
})
|
|
);
|
|
},
|
|
[projectId, dateRange, dispatch]
|
|
);
|
|
|
|
useEffect(() => {
|
|
eventBus.on("employee", employeeHandler);
|
|
return () => eventBus.off("employee", employeeHandler);
|
|
}, [employeeHandler]);
|
|
|
|
const handleRefreshClick = () => {
|
|
setIsRefreshing(true); // Set refreshing state to true
|
|
// The useEffect for fetching data will automatically trigger due to isRefreshing dependency
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="dataTables_length text-start py-2 d-flex justify-content-between"
|
|
id="DataTables_Table_0_length"
|
|
>
|
|
<div className="d-flex align-items-center my-0 ">
|
|
<DateRangePicker
|
|
onRangeChange={setDateRange}
|
|
defaultStartDate={yesterday.toLocaleDateString("en-CA")} // Pass default as string YYYY-MM-DD
|
|
/>
|
|
<div className="form-check form-switch text-start m-0 ms-5">
|
|
<input
|
|
type="checkbox"
|
|
className="form-check-input"
|
|
role="switch"
|
|
disabled={logsFetching}
|
|
id="inactiveEmployeesCheckbox"
|
|
checked={showOnlyCheckout}
|
|
onChange={(e) => setshowOnlyCheckout(e.target.checked)}
|
|
/>
|
|
<label className="form-check-label ms-0">Show Pending</label>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-2 m-0 text-end">
|
|
<i
|
|
className={`bx bx-refresh cursor-pointer fs-4 ${logsLoading || isRefreshing ? "spin" : ""
|
|
}`}
|
|
title="Refresh"
|
|
onClick={handleRefreshClick}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="table-responsive text-nowrap"
|
|
style={{ minHeight: "200px", display: 'flex' }}
|
|
>
|
|
{/* Conditional rendering for loading state */}
|
|
{(logsLoading || isRefreshing) ? (
|
|
<div className="d-flex justify-content-center align-items-center text-muted w-100">
|
|
Loading...
|
|
</div>
|
|
) : processedData && processedData.length > 0 ? (
|
|
<table className="table mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th className="border-top-1" colSpan={2}>
|
|
Name
|
|
</th>
|
|
<th className="border-top-1">Date</th>
|
|
<th>
|
|
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
|
|
Check-In
|
|
</th>
|
|
<th>
|
|
<i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
|
|
</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{paginatedAttendances.reduce((acc, attendance, index, arr) => {
|
|
const currentDate = moment(
|
|
attendance.checkInTime || attendance.checkOutTime
|
|
).format("YYYY-MM-DD");
|
|
const previousAttendance = arr[index - 1];
|
|
const previousDate = previousAttendance
|
|
? moment(
|
|
previousAttendance.checkInTime ||
|
|
previousAttendance.checkOutTime
|
|
).format("YYYY-MM-DD")
|
|
: null;
|
|
|
|
if (!previousDate || currentDate !== previousDate) {
|
|
acc.push(
|
|
<tr
|
|
key={`header-${currentDate}`}
|
|
className="table-row-header"
|
|
>
|
|
<td colSpan={6} className="text-start">
|
|
<strong>
|
|
{moment(currentDate).format("DD-MM-YYYY")}
|
|
</strong>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
acc.push(
|
|
<tr key={attendance.id || index}>
|
|
<td colSpan={2}>
|
|
<div className="d-flex justify-content-start align-items-center">
|
|
<Avatar
|
|
firstName={attendance.firstName}
|
|
lastName={attendance.lastName}
|
|
/>
|
|
<div className="d-flex flex-column">
|
|
<a href="#" className="text-heading text-truncate">
|
|
<span className="fw-normal">
|
|
{attendance.firstName} {attendance.lastName}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{moment(
|
|
attendance.checkInTime || attendance.checkOutTime
|
|
).format("DD-MMM-YYYY")}
|
|
</td>
|
|
<td>{convertShortTime(attendance.checkInTime)}</td>
|
|
<td>
|
|
{attendance.checkOutTime
|
|
? convertShortTime(attendance.checkOutTime)
|
|
: "--"}
|
|
</td>
|
|
<td className="text-center">
|
|
<RenderAttendanceStatus
|
|
attendanceData={attendance}
|
|
handleModalData={handleModalData}
|
|
Tab={2}
|
|
currentDate={today.toLocaleDateString("en-CA")}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
);
|
|
return acc;
|
|
}, [])}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<div
|
|
className="d-flex justify-content-center align-items-center text-muted w-100"
|
|
style={{ height: "200px" }} // Added height for better visual during no data
|
|
>
|
|
No employee logs.
|
|
</div>
|
|
)}
|
|
</div>
|
|
{!logsLoading && !isRefreshing && processedData.length > 20 && (
|
|
<nav aria-label="Page ">
|
|
<ul className="pagination pagination-sm justify-content-end py-1">
|
|
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
|
<button
|
|
className="page-link btn-xs"
|
|
onClick={() => paginate(currentPage - 1)}
|
|
>
|
|
«
|
|
</button>
|
|
</li>
|
|
{Array.from({ length: totalPages }, (_, i) => i + 1).map(
|
|
(pageNumber) => (
|
|
<li
|
|
key={pageNumber}
|
|
className={`page-item ${currentPage === pageNumber ? "active" : ""
|
|
}`}
|
|
>
|
|
<button
|
|
className="page-link"
|
|
onClick={() => paginate(pageNumber)}
|
|
>
|
|
{pageNumber}
|
|
</button>
|
|
</li>
|
|
)
|
|
)}
|
|
<li
|
|
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
|
}`}
|
|
>
|
|
<button
|
|
className="page-link"
|
|
onClick={() => paginate(currentPage + 1)}
|
|
>
|
|
»
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AttendanceLog;
|