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

Changes in Emp Attendance and DateRange picker.

Browse Source
This commit is contained in:
Kartik Sharma 2025-10-15 11:00:18 +05:30
parent da56c59ac9
commit dec15278fa
3 changed files with 160 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,47 +38,47 @@ const usePagination = (data, itemsPerPage) => {
}; };
const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => { const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
const selectedProject = useSelectedProject(); const selectedProject = useSelectedProject();
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
const dispatch = useDispatch(); const dispatch = useDispatch();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [showPending, setShowPending] = useState(false); const [showPending, setShowPending] = useState(false);
const [isRefreshing, setIsRefreshing] = useState(false); const [isRefreshing, setIsRefreshing] = useState(false);
const today = new Date(); const today = new Date();
today.setHours(0, 0, 0, 0); today.setHours(0, 0, 0, 0);
const yesterday = new Date(); const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1); yesterday.setDate(yesterday.getDate() - 1);
const isSameDay = (dateStr) => { const isSameDay = (dateStr) => {
if (!dateStr) return false; if (!dateStr) return false;
const d = new Date(dateStr); const d = new Date(dateStr);
d.setHours(0, 0, 0, 0); d.setHours(0, 0, 0, 0);
return d.getTime() === today.getTime(); return d.getTime() === today.getTime();
}; };
const isBeforeToday = (dateStr) => { const isBeforeToday = (dateStr) => {
if (!dateStr) return false; if (!dateStr) return false;
const d = new Date(dateStr); const d = new Date(dateStr);
d.setHours(0, 0, 0, 0); d.setHours(0, 0, 0, 0);
return d.getTime() < today.getTime(); return d.getTime() < today.getTime();
}; };
const sortByName = (a, b) => { const sortByName = (a, b) => {
const nameA = (a.firstName + a.lastName).toLowerCase(); const nameA = (a.firstName + a.lastName).toLowerCase();
const nameB = (b.firstName + b.lastName).toLowerCase(); const nameB = (b.firstName + b.lastName).toLowerCase();
return nameA.localeCompare(nameB); return nameA.localeCompare(nameB);
}; };
const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs( const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
selectedProject, selectedProject,
dateRange.startDate, dateRange.startDate,
dateRange.endDate, dateRange.endDate,
organizationId organizationId
); );
const processedData = useMemo(() => { const processedData = useMemo(() => {
const filteredData = showPending const filteredData = showPending
? data.filter((item) => item.checkOutTime === null) ? data.filter((item) => item.checkOutTime === null)
: data; : data;
@ -103,30 +103,30 @@ const processedData = useMemo(() => {
const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a)); const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
return sortedDates.flatMap((date) => groupedByDate[date]); return sortedDates.flatMap((date) => groupedByDate[date]);
}, [data, showPending]); }, [data, showPending]);
const filteredSearchData = useMemo(() => { const filteredSearchData = useMemo(() => {
if (!searchTerm) return processedData; if (!searchTerm) return processedData;
const lowercased = searchTerm.toLowerCase(); const lowercased = searchTerm.toLowerCase();
return processedData.filter((item) => return processedData.filter((item) =>
`${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased) `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
); );
}, [processedData, searchTerm]); }, [processedData, searchTerm]);
const { const {
currentPage, currentPage,
totalPages, totalPages,
currentItems: paginatedAttendances, currentItems: paginatedAttendances,
paginate, paginate,
resetPage, resetPage,
} = usePagination(filteredSearchData, 20); } = usePagination(filteredSearchData, 20);
useEffect(() => { useEffect(() => {
resetPage(); resetPage();
}, [filteredSearchData]); }, [filteredSearchData]);
const handler = useCallback( const handler = useCallback(
(msg) => { (msg) => {
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
const checkIn = msg.response.checkInTime.substring(0, 10); const checkIn = msg.response.checkInTime.substring(0, 10);
@ -145,14 +145,14 @@ const handler = useCallback(
} }
}, },
[selectedProject, dateRange, resetPage] [selectedProject, dateRange, resetPage]
); );
useEffect(() => { useEffect(() => {
eventBus.on("attendance_log", handler); eventBus.on("attendance_log", handler);
return () => eventBus.off("attendance_log", handler); return () => eventBus.off("attendance_log", handler);
}, [handler]); }, [handler]);
const employeeHandler = useCallback( const employeeHandler = useCallback(
(msg) => { (msg) => {
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
if (data.some((item) => item.employeeId == msg.employeeId)) { if (data.some((item) => item.employeeId == msg.employeeId)) {
@ -160,12 +160,12 @@ const employeeHandler = useCallback(
} }
}, },
[data, refetch] [data, refetch]
); );
useEffect(() => { useEffect(() => {
eventBus.on("employee", employeeHandler); eventBus.on("employee", employeeHandler);
return () => eventBus.off("employee", employeeHandler); return () => eventBus.off("employee", employeeHandler);
}, [employeeHandler]); }, [employeeHandler]);
@ -175,24 +175,32 @@ useEffect(() => {
className="dataTables_length text-start py-2 d-flex justify-content-between " className="dataTables_length text-start py-2 d-flex justify-content-between "
id="DataTables_Table_0_length" id="DataTables_Table_0_length"
> >
<div className="d-flex align-items-center my-0 "> <div className="d-flex flex-wrap align-items-center gap-2 gap-md-3 my-0">
{/* Date Range Picker */}
<div className="flex-grow-1 flex-md-grow-0">
<DateRangePicker <DateRangePicker
onRangeChange={setDateRange} onRangeChange={setDateRange}
defaultStartDate={yesterday} defaultStartDate={yesterday}
/> />
<div className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0"> </div>
{/* Pending Attendance Switch */}
<div className="form-check form-switch text-start mb-0">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
role="switch" role="switch"
disabled={isFetching}
id="inactiveEmployeesCheckbox" id="inactiveEmployeesCheckbox"
disabled={isFetching}
checked={showPending} checked={showPending}
onChange={(e) => setShowPending(e.target.checked)} onChange={(e) => setShowPending(e.target.checked)}
/> />
<label className="form-check-label ms-0">Pending Attendance</label> <label className="form-check-label ms-0 ms-md-0">
Pending Attendance
</label>
</div> </div>
</div> </div>
</div> </div>
<div <div
className="table-responsive text-nowrap" className="table-responsive text-nowrap"
@ -326,8 +334,7 @@ useEffect(() => {
(pageNumber) => ( (pageNumber) => (
<li <li
key={pageNumber} key={pageNumber}
className={`page-item ${ className={`page-item ${currentPage === pageNumber ? "active" : ""
currentPage === pageNumber ? "active" : ""
}`} }`}
> >
<button <button
@ -340,8 +347,7 @@ useEffect(() => {
) )
)} )}
<li <li
className={`page-item ${ className={`page-item ${currentPage === totalPages ? "disabled" : ""
currentPage === totalPages ? "disabled" : ""
}`} }`}
> >
<button <button

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

@ -73,7 +73,7 @@ const DateRangePicker = ({
/> />
<i <i
className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 " className="bx bx-calendar calendar-icon cursor-pointer position-absolute ms-n6 top-50 end-30 translate-middle-y me-2 "
onClick={handleIconClick} onClick={handleIconClick}
/> />
</div> </div>

18
src/pages/project/ProjectPage.jsx
View File

@ -96,8 +96,8 @@ const ProjectPage = () => {
}, [data, isLoading, selectedStatuses]); }, [data, isLoading, selectedStatuses]);
if(isLoading) return <div className="page-min-h"><Loader/></div> if (isLoading) return <div className="page-min-h"><Loader /></div>
if(isError) return <div className="page-min-h d-flex justify-content-center align-items-center"><p>{error.message}</p></div> if (isError) return <div className="page-min-h d-flex justify-content-center align-items-center"><p>{error.message}</p></div>
return ( return (
<ProjectContext.Provider value={contextDispatcher}> <ProjectContext.Provider value={contextDispatcher}>
<div className="container-fluid"> <div className="container-fluid">
@ -128,8 +128,7 @@ const ProjectPage = () => {
<div className="d-flex gap-2 mb-2"> <div className="d-flex gap-2 mb-2">
<button <button
type="button" type="button"
className={`btn btn-sm p-1 ${ className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"
!listView ? "btn-primary" : "btn-outline-primary"
}`} }`}
onClick={() => setListView(false)} onClick={() => setListView(false)}
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
@ -140,8 +139,7 @@ const ProjectPage = () => {
</button> </button>
<button <button
type="button" type="button"
className={`btn btn-sm p-1 ${ className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"
listView ? "btn-primary" : "btn-outline-primary"
}`} }`}
onClick={() => setListView(true)} onClick={() => setListView(true)}
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
@ -180,8 +178,9 @@ const ProjectPage = () => {
</div> </div>
</div> </div>
<div> {HasManageProject && (
{HasManageProject && ( <button <div className="ms-auto">
<button
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
type="button" type="button"
onClick={() => onClick={() =>
@ -192,8 +191,9 @@ const ProjectPage = () => {
<span className="d-none d-md-inline-block"> <span className="d-none d-md-inline-block">
Add New Project Add New Project
</span> </span>
</button>)} </button>
</div> </div>
)}
</div> </div>
</div> </div>
</div> </div>