admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

In the Attendance Component, dates are filtered to show logs from the last 7 days, including yesterday. #122

Merged
vikas.nale merged 1 commits from Kartik_Enhancement#273 into Issue_May_4W 2025-05-20 07:32:13 +00:00
Conversation 0 Commits 1 Files Changed 2 +114 -133
2 changed files with 114 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3d3dcb4f69 - Show all commits

243
src/components/Activities/AttendcesLogs.jsx
View File

@ -10,16 +10,17 @@ import { getCachedData } from "../../slices/apiDataManager";
import usePagination from "../../hooks/usePagination"; import usePagination from "../../hooks/usePagination";
const AttendanceLog = ({ handleModalData, projectId }) => { const AttendanceLog = ({ handleModalData, projectId }) => {
const [attendances, setAttendnaces] = useState([]);
const [selectedDate, setSelectedDate] = useState("");
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
const dispatch = useDispatch(); const dispatch = useDispatch();
const { data, loading, error } = useSelector((store) => store.attendanceLogs); const { data, loading, error } = useSelector((store) => store.attendanceLogs);
const [isRefreshing, setIsRefreshing] = useState(true); const [isRefreshing, setIsRefreshing] = useState(true);
const [dates, setDates] = useState([]); const [processedData, setProcessedData] = useState([]);
const today = new Date(); 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) => { const isSameDay = (dateStr) => {
if (!dateStr) return false; if (!dateStr) return false;
@ -41,38 +42,6 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
return nameA.localeCompare(nameB); 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(() => { useEffect(() => {
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
if (startDate && endDate) { if (startDate && endDate) {
@ -87,14 +56,47 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
}, [dateRange, projectId, isRefreshing]); }, [dateRange, projectId, isRefreshing]);
useEffect(() => { useEffect(() => {
const attendanceDate = [ const group1 = data
...new Set(sortedFinalList.map((item) => item.checkInTime.split("T")[0])), .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
].sort((a, b) => new Date(b) - new Date(a)); .sort(sortByName);
if (attendanceDate != dates) { const group2 = data
setDates(attendanceDate); .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]); }, [data]);
const { currentPage, totalPages, currentItems: paginatedAttendances, paginate } = usePagination(
processedData,
10
);
return ( return (
<> <>
<div <div
@ -102,13 +104,12 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
id="DataTables_Table_0_length" id="DataTables_Table_0_length"
> >
<div className="col-md-3 my-0 "> <div className="col-md-3 my-0 ">
<DateRangePicker onRangeChange={setDateRange} /> <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
</div> </div>
<div className="col-md-2 m-0 text-end"> <div className="col-md-2 m-0 text-end">
<i <i
className={`bx bx-refresh cursor-pointer fs-4 ${ className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
loading ? "spin" : "" }`}
}`}
title="Refresh" title="Refresh"
onClick={() => setIsRefreshing(!isRefreshing)} onClick={() => setIsRefreshing(!isRefreshing)}
/> />
@ -124,8 +125,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
</th> </th>
<th className="border-top-1">Date</th> <th className="border-top-1">Date</th>
<th> <th>
<i className="bx bxs-down-arrow-alt text-success"></i>{" "} <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
Check-In
</th> </th>
<th> <th>
<i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
@ -135,106 +135,87 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
</thead> </thead>
<tbody> <tbody>
{loading && <td colSpan={5}>Loading...</td>} {loading && <td colSpan={5}>Loading...</td>}
{dates.map((date, i) => { {paginatedAttendances.reduce((acc, attendance, index, arr) => {
return ( const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
<React.Fragment key={i}> const previousAttendance = arr[index - 1];
{currentItems.some( const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
(item) => item.checkInTime.split("T")[0] === date
) && ( if (!previousDate || currentDate !== previousDate) {
<tr className="table-row-header"> acc.push(
<td colSpan={7} className="text-start"> <tr key={`header-${currentDate}`} className="table-row-header">
<strong>{date}</strong> <td colSpan={6} className="text-start">
</td> <strong>{moment(currentDate).format("YYYY-MM-DD")}</strong>
</tr> </td>
)} </tr>
{currentItems );
?.filter((item) => item.checkInTime.includes(date)) }
.map((attendance, index) => ( acc.push(
<tr key={index}> <tr key={index}>
<td colSpan={2}> <td colSpan={2}>
<div className="d-flex justify-content-start align-items-center"> <div className="d-flex justify-content-start align-items-center">
<Avatar <Avatar
firstName={attendance.firstName} firstName={attendance.firstName}
lastName={attendance.lastName} lastName={attendance.lastName}
/> />
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<a <a
href="#" href="#"
className="text-heading text-truncate" className="text-heading text-truncate"
> >
<span className="fw-normal"> <span className="fw-normal">
{attendance.firstName} {attendance.lastName} {attendance.firstName} {attendance.lastName}
</span> </span>
</a> </a>
</div> </div>
</div> </div>
</td> </td>
<td> <td>
{" "} {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
{moment(attendance.checkInTime).format( </td>
"DD-MMM-YYYY" <td>{convertShortTime(attendance.checkInTime)}</td>
)} <td>
</td> {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
<td>{convertShortTime(attendance.checkInTime)}</td> </td>
<td> <td className="text-center">
{attendance.checkOutTime <RenderAttendanceStatus
? convertShortTime(attendance.checkOutTime) attendanceData={attendance}
: "--"} handleModalData={handleModalData}
</td> Tab={2}
<td className="text-center"> currentDate={today.toLocaleDateString("en-CA")}
<RenderAttendanceStatus />
attendanceData={attendance} </td>
handleModalData={handleModalData} </tr>
Tab={2}
currentDate={currentDate}
/>
</td>
</tr>
))}
</React.Fragment>
); );
})} return acc;
}, [])}
</tbody> </tbody>
</table> </table>
)} )}
{!loading && data.length === 0 && <span>No employee logs</span>} {!loading && data.length === 0 && <span>No employee logs</span>}
{error && <td colSpan={5}>{error}</td>} {error && <td colSpan={6}>{error}</td>}
</div> </div>
{!loading && ( {!loading && processedData.length > 10 && (
<nav aria-label="Page "> <nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}> <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
<button <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
className="page-link btn-xs"
onClick={() => paginate(currentPage - 1)}
>
&laquo; &laquo;
</button> </button>
</li> </li>
{[...Array(totalPages)].map((_, index) => ( {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
<li <li
key={index} key={pageNumber}
className={`page-item ${ className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
currentPage === index + 1 ? "active" : ""
}`}
> >
<button <button className="page-link" onClick={() => paginate(pageNumber)}>
className="page-link " {pageNumber}
onClick={() => paginate(index + 1)}
>
{index + 1}
</button> </button>
</li> </li>
))} ))}
<li <li
className={`page-item ${ className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
currentPage === totalPages ? "disabled" : ""
}`}
> >
<button <button className="page-link" onClick={() => paginate(currentPage + 1)}>
className="page-link "
onClick={() => paginate(currentPage + 1)}
>
&raquo; &raquo;
</button> </button>
</li> </li>
@ -245,4 +226,4 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
); );
}; };
export default AttendanceLog; export default AttendanceLog;

4
src/components/common/DateRangePicker.jsx
View File

@ -1,10 +1,10 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
const DateRangePicker = ({ onRangeChange, DateDifference = 15 }) => { const DateRangePicker = ({ onRangeChange, DateDifference = 7,defaultStartDate = new Date() -1 }) => {
const inputRef = useRef(null); const inputRef = useRef(null);
useEffect(() => { useEffect(() => {
const today = new Date(); const today = defaultStartDate;
const fifteenDaysAgo = new Date(); const fifteenDaysAgo = new Date();
fifteenDaysAgo.setDate(today.getDate() - DateDifference); fifteenDaysAgo.setDate(today.getDate() - DateDifference);