Todays date is not visible in Daily Progress Report.
This commit is contained in:
parent
655db6ac74
commit
a15ef8fef5
@ -42,13 +42,13 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
<>
|
||||
<table className="table ">
|
||||
<thead>
|
||||
<tr className="border-top-0" style={{ textAlign: 'left' }}>
|
||||
<td >
|
||||
<tr className="border-none" style={{ textAlign: 'left' }}>
|
||||
<td style={{ borderBottom: 'none' }}>
|
||||
<strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
|
||||
</td>
|
||||
<td style={{ paddingLeft: '20px' }}>
|
||||
</td>
|
||||
<td style={{ paddingLeft: '20px', borderBottom: 'none' }}></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="border-top-0" colSpan={2}>
|
||||
Name
|
||||
|
||||
@ -122,109 +122,112 @@ 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
|
||||
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>
|
||||
</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>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap">
|
||||
{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) && (
|
||||
<div className="table-responsive text-nowrap" style={{ minHeight: "250px" }}>
|
||||
{data && data.length > 0 && (
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<td colSpan={6}>Loading...</td>
|
||||
<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>
|
||||
)}
|
||||
{!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;
|
||||
</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");
|
||||
const previousAttendance = arr[index - 1];
|
||||
const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
|
||||
|
||||
if (!previousDate || currentDate !== previousDate) {
|
||||
if (!previousDate || currentDate !== previousDate) {
|
||||
acc.push(
|
||||
<tr key={`header-${currentDate}`} className="table-row-header">
|
||||
<td colSpan={6} className="text-start">
|
||||
<strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
acc.push(
|
||||
<tr key={`header-${currentDate}`} className="table-row-header">
|
||||
<td colSpan={6} className="text-start">
|
||||
<strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
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 && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && !loading && !isRefreshing && (
|
||||
<tr>
|
||||
<td colSpan={6}>{error}</td>
|
||||
</tr>
|
||||
)}
|
||||
</div>
|
||||
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>
|
||||
{!loading && !isRefreshing && processedData.length > 10 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
|
||||
@ -31,7 +31,7 @@ const Regularization = ({ handleRequest }) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="table-responsive text-nowrap">
|
||||
<div className="table-responsive text-nowrap" style={{minHeight:"300px"}}>
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -47,7 +47,7 @@ const Regularization = ({ handleRequest }) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <td colSpan={5}>Loading...</td>}
|
||||
{loading && <td colSpan={6} className="text-center py-5">Loading...</td>}
|
||||
|
||||
{!loading &&
|
||||
(regularizes?.length > 0 ? (
|
||||
@ -55,7 +55,7 @@ const Regularization = ({ handleRequest }) => {
|
||||
<tr key={index}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
<Avatar
|
||||
firstName={att.firstName}
|
||||
lastName={att.lastName}
|
||||
></Avatar>
|
||||
@ -88,12 +88,17 @@ const Regularization = ({ handleRequest }) => {
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={5}>No Record Found</td>
|
||||
<td colSpan={6}
|
||||
className="text-center" style={{
|
||||
height: "200px",
|
||||
verticalAlign: "middle",
|
||||
borderBottom: "none",
|
||||
}}>No Record Found</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{!loading && (
|
||||
{!loading >10 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
@ -107,9 +112,8 @@ const Regularization = ({ handleRequest }) => {
|
||||
{[...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 "
|
||||
@ -120,9 +124,8 @@ const Regularization = ({ handleRequest }) => {
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
|
||||
@ -1,21 +1,27 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate = new Date() - 1 }) => {
|
||||
const DateRangePicker = ({
|
||||
onRangeChange,
|
||||
DateDifference = 7,
|
||||
endDateMode = "yesterday", // "today" or "yesterday"
|
||||
}) => {
|
||||
const inputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const today = new Date();;
|
||||
today.setDate(today.getDate() - 1);
|
||||
const fifteenDaysAgo = new Date();
|
||||
|
||||
fifteenDaysAgo.setDate(today.getDate() - DateDifference);
|
||||
const endDate = new Date();
|
||||
if (endDateMode === "yesterday") {
|
||||
endDate.setDate(endDate.getDate() - 1);
|
||||
}
|
||||
|
||||
const startDate = new Date();
|
||||
startDate.setDate(endDate.getDate() - DateDifference);
|
||||
|
||||
const fp = flatpickr(inputRef.current, {
|
||||
mode: "range",
|
||||
dateFormat: "Y-m-d", // Format for backend (actual input value)
|
||||
altInput: true, // Enables a visually different field
|
||||
dateFormat: "Y-m-d",
|
||||
altInput: true,
|
||||
altFormat: "d-m-Y",
|
||||
defaultDate: [fifteenDaysAgo, today],
|
||||
defaultDate: [startDate, endDate],
|
||||
static: true,
|
||||
clickOpens: true,
|
||||
onChange: (selectedDates, dateStr) => {
|
||||
@ -25,16 +31,14 @@ const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate =
|
||||
});
|
||||
|
||||
onRangeChange?.({
|
||||
// startDate: fifteenDaysAgo.toISOString().split("T")[0],
|
||||
// endDate: today.toISOString().split("T")[0],
|
||||
startDate: fifteenDaysAgo.toLocaleDateString("en-CA"),
|
||||
endDate: today.toLocaleDateString("en-CA"),
|
||||
startDate: startDate.toLocaleDateString("en-CA"),
|
||||
endDate: endDate.toLocaleDateString("en-CA"),
|
||||
});
|
||||
|
||||
return () => {
|
||||
fp.destroy();
|
||||
};
|
||||
}, [onRangeChange]);
|
||||
}, [onRangeChange, DateDifference, endDateMode]);
|
||||
|
||||
return (
|
||||
<input
|
||||
@ -47,4 +51,4 @@ const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate =
|
||||
);
|
||||
};
|
||||
|
||||
export default DateRangePicker;
|
||||
export default DateRangePicker;
|
||||
@ -141,6 +141,7 @@ const DailyTask = () => {
|
||||
<div className="col-6 text-start">
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
endDateMode="today"
|
||||
DateDifference="6"
|
||||
dateFormat="DD-MM-YYYY"
|
||||
/>
|
||||
|
||||
@ -141,7 +141,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<DateRangePicker onRangeChange={setDateRange} />
|
||||
<DateRangePicker onRangeChange={setDateRange} endDateMode="yesterday"/>
|
||||
</div>
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user