In the Attendance Component, dates are filtered to show logs from the last 7 days, including yesterday. #122
@ -10,16 +10,17 @@ import { getCachedData } from "../../slices/apiDataManager";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
|
||||
const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
const [attendances, setAttendnaces] = useState([]);
|
||||
const [selectedDate, setSelectedDate] = useState("");
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading, error } = useSelector((store) => store.attendanceLogs);
|
||||
const [isRefreshing, setIsRefreshing] = useState(true);
|
||||
const [dates, setDates] = useState([]);
|
||||
const [processedData, setProcessedData] = useState([]);
|
||||
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0); // Strip time to compare dates only
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
|
||||
const isSameDay = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
@ -41,38 +42,6 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
|
||||
const group1 = data
|
||||
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group2 = data
|
||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group3 = data
|
||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group4 = data
|
||||
.filter( ( d ) => d.activity === 4 && isBeforeToday( d.checkOutTime ) )
|
||||
|
||||
const group5 = data
|
||||
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group6 = data.filter((d) => d.activity === 5).sort(sortByName);
|
||||
|
||||
const sortedFinalList = [
|
||||
...group1,
|
||||
...group2,
|
||||
...group3,
|
||||
...group4,
|
||||
...group5,
|
||||
...group6,
|
||||
];
|
||||
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
sortedFinalList,
|
||||
10
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
if (startDate && endDate) {
|
||||
@ -87,14 +56,47 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
}, [dateRange, projectId, isRefreshing]);
|
||||
|
||||
useEffect(() => {
|
||||
const attendanceDate = [
|
||||
...new Set(sortedFinalList.map((item) => item.checkInTime.split("T")[0])),
|
||||
].sort((a, b) => new Date(b) - new Date(a));
|
||||
if (attendanceDate != dates) {
|
||||
setDates(attendanceDate);
|
||||
}
|
||||
const group1 = data
|
||||
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group2 = data
|
||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group3 = data
|
||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group4 = data
|
||||
.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
|
||||
const group5 = data
|
||||
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group6 = data.filter((d) => d.activity === 5).sort(sortByName);
|
||||
|
||||
const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
|
||||
|
||||
// Group by date
|
||||
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;
|
||||
}, {});
|
||||
|
||||
// Sort dates in descending order
|
||||
const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
|
||||
|
||||
// Create the final sorted array
|
||||
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
||||
setProcessedData(finalData);
|
||||
}, [data]);
|
||||
|
||||
const { currentPage, totalPages, currentItems: paginatedAttendances, paginate } = usePagination(
|
||||
processedData,
|
||||
10
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@ -102,13 +104,12 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<DateRangePicker onRangeChange={setDateRange} />
|
||||
<DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
|
||||
</div>
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${
|
||||
loading ? "spin" : ""
|
||||
}`}
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing(!isRefreshing)}
|
||||
/>
|
||||
@ -124,8 +125,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
</th>
|
||||
<th className="border-top-1">Date</th>
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
|
||||
Check-In
|
||||
<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
|
||||
@ -135,106 +135,87 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <td colSpan={5}>Loading...</td>}
|
||||
{dates.map((date, i) => {
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
{currentItems.some(
|
||||
(item) => item.checkInTime.split("T")[0] === date
|
||||
) && (
|
||||
<tr className="table-row-header">
|
||||
<td colSpan={7} className="text-start">
|
||||
<strong>{date}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{currentItems
|
||||
?.filter((item) => item.checkInTime.includes(date))
|
||||
.map((attendance, index) => (
|
||||
<tr key={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).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={currentDate}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
{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("YYYY-MM-DD")}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
acc.push(
|
||||
<tr key={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>
|
||||
)}
|
||||
{!loading && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && <td colSpan={5}>{error}</td>}
|
||||
{error && <td colSpan={6}>{error}</td>}
|
||||
</div>
|
||||
{!loading && (
|
||||
{!loading && processedData.length > 10 && (
|
||||
<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)}
|
||||
>
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
key={pageNumber}
|
||||
className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
<button className="page-link" onClick={() => paginate(pageNumber)}>
|
||||
{pageNumber}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
<button className="page-link" onClick={() => paginate(currentPage + 1)}>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
@ -245,4 +226,4 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default AttendanceLog;
|
||||
export default AttendanceLog;
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
const DateRangePicker = ({ onRangeChange, DateDifference = 15 }) => {
|
||||
const DateRangePicker = ({ onRangeChange, DateDifference = 7,defaultStartDate = new Date() -1 }) => {
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const today = new Date();
|
||||
const today = defaultStartDate;
|
||||
const fifteenDaysAgo = new Date();
|
||||
fifteenDaysAgo.setDate(today.getDate() - DateDifference);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user