added pending filter for attendaces using toggle buttons
This commit is contained in:
Pramod Mahajan
parent
00902fff9f
commit
cbf376d5b6
@ -5,9 +5,15 @@ import { convertShortTime } from "../../utils/dateUtils";
|
||||
import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {ITEMS_PER_PAGE} from "../../utils/constants";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
|
||||
const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
const Attendance = ({
|
||||
attendance,
|
||||
getRole,
|
||||
handleModalData,
|
||||
setshowOnlyCheckout,
|
||||
showOnlyCheckout,
|
||||
}) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [todayDate, setTodayDate] = useState(new Date());
|
||||
@ -19,7 +25,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = (a.firstName + a.lastName).toLowerCase();
|
||||
const nameB = (b.firstName + b.lastName).toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
return nameA?.localeCompare(nameB);
|
||||
};
|
||||
|
||||
// Filter employees based on activity
|
||||
@ -39,41 +45,47 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="table-responsive text-nowrap">
|
||||
<div className="d-flex text-start align-items-center py-2">
|
||||
<strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong>
|
||||
|
||||
<div className="form-check form-switch text-start m-0 ms-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showOnlyCheckout}
|
||||
onChange={(e) => setshowOnlyCheckout(e.target.checked)}
|
||||
/>
|
||||
<label className="form-check-label ms-0">Show Pending</label>
|
||||
</div>
|
||||
</div>
|
||||
{attendance && attendance.length > 0 && (
|
||||
<>
|
||||
<table className="table ">
|
||||
<thead>
|
||||
<tr className="border-none" style={{ textAlign: 'left' }}>
|
||||
<td style={{ borderBottom: 'none' }}>
|
||||
<strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
|
||||
</td>
|
||||
<td style={{ paddingLeft: '20px', borderBottom: 'none' }}></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="border-top-0" colSpan={2}>
|
||||
Name
|
||||
</th>
|
||||
<th className="border-top-0">Role</th>
|
||||
<th className="border-top-0">
|
||||
<tr className="border-top-1">
|
||||
<th colSpan={2}>Name</th>
|
||||
<th>Role</th>
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i>
|
||||
Check-In
|
||||
</th>
|
||||
<th className="border-top-0">
|
||||
<th>
|
||||
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
|
||||
</th>
|
||||
<th className="border-top-0">Actions</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
<tbody className="table-border-bottom-0 ">
|
||||
{currentItems &&
|
||||
currentItems
|
||||
.sort((a, b) => {
|
||||
// If checkInTime exists, compare it, otherwise, treat null as earlier than a date
|
||||
const checkInA = a.checkInTime
|
||||
const checkInA = a?.checkInTime
|
||||
? new Date(a.checkInTime)
|
||||
: new Date(0);
|
||||
const checkInB = b.checkInTime
|
||||
const checkInB = b?.checkInTime
|
||||
? new Date(b.checkInTime)
|
||||
: new Date(0);
|
||||
return checkInB - checkInA; // Sort in descending order of checkInTime
|
||||
@ -131,12 +143,13 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{!loading>20 && (
|
||||
{!loading > 20 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${
|
||||
currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
@ -148,8 +161,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
@ -160,8 +174,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
|
||||
@ -11,7 +11,6 @@ import { getCachedData } from "../../slices/apiDataManager";
|
||||
const usePagination = (data, itemsPerPage) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const maxPage = Math.ceil(data.length / itemsPerPage);
|
||||
|
||||
const currentItems = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
@ -21,10 +20,21 @@ const usePagination = (data, itemsPerPage) => {
|
||||
const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
|
||||
const resetPage = useCallback(() => setCurrentPage(1), []);
|
||||
|
||||
return { currentPage, totalPages: maxPage, currentItems, paginate, resetPage };
|
||||
return {
|
||||
currentPage,
|
||||
totalPages: maxPage,
|
||||
currentItems,
|
||||
paginate,
|
||||
resetPage,
|
||||
};
|
||||
};
|
||||
|
||||
const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
const AttendanceLog = ({
|
||||
handleModalData,
|
||||
projectId,
|
||||
setshowOnlyCheckout,
|
||||
showOnlyCheckout,
|
||||
}) => {
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading, error } = useSelector((store) => store.attendanceLogs);
|
||||
@ -83,14 +93,24 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
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 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 group6 = filteredData
|
||||
.filter((d) => d.activity === 5)
|
||||
.sort(sortByName);
|
||||
|
||||
const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
|
||||
const sortedList = [
|
||||
...group1,
|
||||
...group2,
|
||||
...group3,
|
||||
...group4,
|
||||
...group5,
|
||||
...group6,
|
||||
];
|
||||
|
||||
// Group by date
|
||||
const groupedByDate = sortedList.reduce((acc, item) => {
|
||||
@ -103,17 +123,22 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
}, {});
|
||||
|
||||
// Sort dates in descending order
|
||||
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)
|
||||
);
|
||||
|
||||
// Create the final sorted array
|
||||
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
||||
setProcessedData(finalData);
|
||||
}, [data, showOnlyCheckout]);
|
||||
|
||||
const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination(
|
||||
processedData,
|
||||
20
|
||||
);
|
||||
const {
|
||||
currentPage,
|
||||
totalPages,
|
||||
currentItems: paginatedAttendances,
|
||||
paginate,
|
||||
resetPage,
|
||||
} = usePagination(processedData, 20);
|
||||
|
||||
// Reset to the first page whenever processedData changes (due to switch on/off)
|
||||
useEffect(() => {
|
||||
@ -122,57 +147,89 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<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 || isRefreshing ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing(true)}
|
||||
<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}
|
||||
/>
|
||||
<div className="form-check form-switch text-start m-0 ms-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showOnlyCheckout}
|
||||
onChange={(e) => setshowOnlyCheckout(e.target.checked)}
|
||||
/>
|
||||
<label className="form-check-label ms-0">Show Pending</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap" style={{ minHeight: "250px" }}>
|
||||
{data && data.length > 0 && (
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${
|
||||
loading || isRefreshing ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="table-responsive text-nowrap"
|
||||
style={{ minHeight: "250px" }}
|
||||
>
|
||||
{data && data.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>
|
||||
{(loading || isRefreshing) && (
|
||||
<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>
|
||||
<td colSpan={6}>Loading...</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(loading || isRefreshing) && (
|
||||
<tr>
|
||||
<td colSpan={6}>Loading...</td>
|
||||
</tr>
|
||||
)}
|
||||
{!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
|
||||
const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
|
||||
)}
|
||||
{!loading &&
|
||||
!isRefreshing &&
|
||||
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;
|
||||
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">
|
||||
<tr
|
||||
key={`header-${currentDate}`}
|
||||
className="table-row-header"
|
||||
>
|
||||
<td colSpan={6} className="text-start">
|
||||
<strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
|
||||
<strong>
|
||||
{moment(currentDate).format("DD-MM-YYYY")}
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
@ -186,10 +243,7 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
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>
|
||||
@ -198,11 +252,15 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
|
||||
{moment(
|
||||
attendance.checkInTime || attendance.checkOutTime
|
||||
).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
||||
<td>
|
||||
{attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
|
||||
{attendance.checkOutTime
|
||||
? convertShortTime(attendance.checkOutTime)
|
||||
: "--"}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<RenderAttendanceStatus
|
||||
@ -216,40 +274,55 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
);
|
||||
return acc;
|
||||
}, [])}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
)}
|
||||
{!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && !loading && !isRefreshing && (
|
||||
<tr>
|
||||
<td colSpan={6}>{error}</td>
|
||||
</tr>
|
||||
)}
|
||||
</div>
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{!loading && !isRefreshing && data.length === 0 && (
|
||||
<span>No employee logs</span>
|
||||
)}
|
||||
{error && !loading && !isRefreshing && (
|
||||
<tr>
|
||||
<td colSpan={6}>{error}</td>
|
||||
</tr>
|
||||
)}
|
||||
</div>
|
||||
{!loading && !isRefreshing && 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)}>
|
||||
<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>
|
||||
))}
|
||||
{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" : ""}`}
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button className="page-link" onClick={() => paginate(currentPage + 1)}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
@ -260,4 +333,4 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default AttendanceLog;
|
||||
export default AttendanceLog;
|
||||
|
||||
@ -21,7 +21,7 @@ import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
||||
|
||||
const AttendancePage = () => {
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
const [showOnlyCheckout, setShowOnlyCheckout] = useState(false);
|
||||
const [showOnlyCheckout, setShowOnlyCheckout] = useState();
|
||||
const loginUser = getCachedProfileData();
|
||||
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
@ -112,7 +112,7 @@ const AttendancePage = () => {
|
||||
// )
|
||||
// : attendances;
|
||||
const filteredAttendance = showOnlyCheckout
|
||||
? attendances?.filter((att) => att?.checkOutTime === null)
|
||||
? attendances?.filter((att) => att?.checkInTime !== null && att?.checkOutTime === null)
|
||||
: attendances;
|
||||
|
||||
return (
|
||||
@ -230,6 +230,8 @@ const AttendancePage = () => {
|
||||
attendance={filteredAttendance}
|
||||
handleModalData={handleModalData}
|
||||
getRole={getRole}
|
||||
setshowOnlyCheckout={setShowOnlyCheckout}
|
||||
showOnlyCheckout={showOnlyCheckout}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
@ -240,6 +242,7 @@ const AttendancePage = () => {
|
||||
<AttendanceLog
|
||||
handleModalData={handleModalData}
|
||||
projectId={selectedProject}
|
||||
setshowOnlyCheckout={setShowOnlyCheckout}
|
||||
showOnlyCheckout={showOnlyCheckout}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user