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

Merge pull request 'Implemented date-wise grouping of the Attendance Log based on the selected date range.' (#71) from Ashutosh_Bug#180_Display_Attendance_Log_BasedOnDate into Issue_May_2W

Browse Source 
Reviewed-on: #71
This commit is contained in:
Gitea Admin 2025-05-07 11:09:54 +00:00
commit a2f23ee5ae
2 changed files with 138 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
const dispatch = useDispatch();
const { data, loading, error } = useSelector((store) => store.attendanceLogs);
const [isRefreshing, setIsRefreshing] = useState(true);
const [dates, setDates] = useState([]);
const today = new Date();
today.setHours(0, 0, 0, 0); // Strip time to compare dates only
@ -40,13 +41,27 @@ 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)).sort(sortByName);
const group5 = data.filter(d => d.activity === 5).sort(sortByName);
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))
.sort(sortByName);
const group5 = data.filter((d) => d.activity === 5).sort(sortByName);
const sortedFinalList = [...group1, ...group2, ...group3, ...group4, ...group5];
const sortedFinalList = [
...group1,
...group2,
...group3,
...group4,
...group5,
];
const currentDate = new Date().toLocaleDateString("en-CA");
const { currentPage, totalPages, currentItems, paginate } = usePagination(
@ -67,6 +82,14 @@ 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);
}
}, [data]);
return (
<>
@ -84,12 +107,11 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
}`}
title="Refresh"
onClick={() => setIsRefreshing(!isRefreshing)}
/>
</div>
</div>
<div className="table-responsive text-nowrap">
{(data && data.length > 0 ) && (
{data && data.length > 0 && (
<table className="table mb-0">
<thead>
<tr>
@ -109,7 +131,17 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
</thead>
<tbody>
{loading && <td colSpan={5}>Loading...</td>}
{currentItems?.map( ( attendance, index ) => (
{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">
@ -118,7 +150,10 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
lastName={attendance.lastName}
/>
<div className="d-flex flex-column">
<a href="#" className="text-heading text-truncate">
<a
href="#"
className="text-heading text-truncate"
>
<span className="fw-normal">
{attendance.firstName} {attendance.lastName}
</span>
@ -128,7 +163,9 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
</td>
<td>
{" "}
{moment( attendance.checkInTime ).format( "DD-MMM-YYYY" )}
{moment(attendance.checkInTime).format(
"DD-MMM-YYYY"
)}
</td>
<td>{convertShortTime(attendance.checkInTime)}</td>
<td>
@ -146,22 +183,19 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
</td>
</tr>
))}
</React.Fragment>
);
})}
</tbody>
</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>}
</div>
{!loading && (
<nav aria-label="Page ">
<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
className="page-link btn-xs"
onClick={() => paginate(currentPage - 1)}

1
src/pages/Activities/DailyTask.jsx
View File

@ -87,7 +87,6 @@ const DailyTask = () => {
useEffect(() => {
popoverRefs.current.forEach((el) => {
console.log(el);
if (el) {
new bootstrap.Popover(el, {
trigger: "focus",