Changes in Regularization tab.

This commit is contained in:
Kartik Sharma 2025-10-14 14:42:33 +05:30 committed by pramod.mahajan
parent 05c01d1d34
commit 20b508bebc
2 changed files with 123 additions and 120 deletions

View File

@ -171,29 +171,29 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
return ( return (
<> <>
<div <div
className="dataTables_length text-start py-2 d-flex flex-wrap justify-content-between" className="dataTables_length text-start py-2 d-flex flex-wrap justify-content-between"
id="DataTables_Table_0_length" id="DataTables_Table_0_length"
> >
<div className="d-flex flex-wrap align-items-center my-0 gap-2"> <div className="d-flex flex-wrap align-items-center my-0 gap-2">
<DateRangePicker <DateRangePicker
onRangeChange={setDateRange} onRangeChange={setDateRange}
defaultStartDate={yesterday} defaultStartDate={yesterday}
/> />
<div className="form-check form-switch text-start d-flex align-items-center mb-0"> <div className="form-check form-switch text-start d-flex align-items-center mb-0">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
role="switch" role="switch"
disabled={isFetching} disabled={isFetching}
id="inactiveEmployeesCheckbox" id="inactiveEmployeesCheckbox"
checked={showPending} checked={showPending}
onChange={(e) => setShowPending(e.target.checked)} onChange={(e) => setShowPending(e.target.checked)}
/> />
<label className="form-check-label ms-2 mb-0">Pending Attendance</label> <label className="form-check-label ms-2 mb-0">Pending Attendance</label>
</div> </div>
</div> </div>
</div> </div>
<div <div
className="table-responsive text-nowrap" className="table-responsive text-nowrap"

View File

@ -33,9 +33,9 @@ const Regularization = ({
); );
useEffect(() => { useEffect(() => {
if(!regularizes) return if (!regularizes) return
if(regularizes?.length) { if (regularizes?.length) {
setregularizedList(regularizes); setregularizedList(regularizes);
} }
}, [regularizes]); }, [regularizes]);
@ -102,101 +102,103 @@ const Regularization = ({
}, [employeeHandler]); }, [employeeHandler]);
return ( return (
<div <div>
className="table-responsive text-nowrap pb-4" <div
style={{ minHeight: "200px" }} className="table-responsive text-nowrap pb-4"
> style={{ minHeight: "200px" }}
{loading ? ( >
<div {loading ? (
className="d-flex justify-content-center align-items-center" <div
style={{ height: "200px" }} className="d-flex justify-content-center align-items-center"
> style={{ height: "200px" }}
<p className="text-secondary">Loading...</p> >
</div> <p className="text-secondary">Loading...</p>
) : currentItems?.length > 0 ? ( </div>
<table className="table mb-0"> ) : currentItems?.length > 0 ? (
<thead> <table className="table mb-0">
<tr> <thead>
<th colSpan={2}>Name</th> <tr>
<th>Date</th> <th colSpan={2}>Name</th>
<th>Organization</th> <th>Date</th>
<th> <th>Organization</th>
<i className="bx bxs-down-arrow-alt text-success"></i>Check-In <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> <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
<th colSpan={2}> </th>
Requested By <th colSpan={2}>
</th> Requested By
<th > </th>
Requested At <th >
</th> Requested At
<th>Action</th> </th>
</tr> <th>Action</th>
</thead> </tr>
<tbody> </thead>
{currentItems?.map((att, index) => ( <tbody>
<tr key={index}> {currentItems?.map((att, index) => (
<td colSpan={2}> <tr key={index}>
<div className="d-flex justify-content-start align-items-center"> <td colSpan={2}>
<Avatar firstName={att.firstName} lastName={att.lastName} /> <div className="d-flex justify-content-start align-items-center">
<div className="d-flex flex-column"> <Avatar firstName={att.firstName} lastName={att.lastName} />
<a href="#" className="text-heading text-truncate"> <div className="d-flex flex-column">
<span className="fw-normal"> <a href="#" className="text-heading text-truncate">
{att.firstName} {att.lastName} <span className="fw-normal">
</span> {att.firstName} {att.lastName}
</a> </span>
</a>
</div>
</div> </div>
</div> </td>
</td> <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
<td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
<td>{att.organizationName || "--"}</td> <td>{att.organizationName || "--"}</td>
<td>{convertShortTime(att.checkInTime)}</td> <td>{convertShortTime(att.checkInTime)}</td>
<td> <td>
{att.requestedAt ? convertShortTime(att.checkOutTime) : "--"} {att.requestedAt ? convertShortTime(att.checkOutTime) : "--"}
</td> </td>
<td colSpan={2}> <td colSpan={2}>
{att.requestedBy ? ( <div className="d-flex justify-content-start align-items-center"> {att.requestedBy ? (<div className="d-flex justify-content-start align-items-center">
<Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} /> <Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} />
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<a href="#" className="text-heading text-truncate"> <a href="#" className="text-heading text-truncate">
<span className="fw-normal"> <span className="fw-normal">
{att?.requestedBy?.firstName} {att?.requestedBy?.lastName} {att?.requestedBy?.firstName} {att?.requestedBy?.lastName}
</span> </span>
</a> </a>
</div> </div>
</div>):(<small>--</small>)} </div>) : (<small>--</small>)}
</td> </td>
<td> <td>
{att?.requestedAt ? formatUTCToLocalTime(att.requestedAt,true) : "--"} {att?.requestedAt ? formatUTCToLocalTime(att.requestedAt, true) : "--"}
</td> </td>
<td className="text-center "> <td className="text-center ">
<RegularizationActions <RegularizationActions
attendanceData={att} attendanceData={att}
handleRequest={handleRequest} handleRequest={handleRequest}
refresh={refetch} refresh={refetch}
/> />
</td> </td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
) : ( ) : (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "200px" }} style={{ height: "200px" }}
> >
<span className="text-secondary"> <span className="text-secondary">
{searchTerm {searchTerm
? "No results found for your search." ? "No results found for your search."
: "No Requests Found !"} : "No Requests Found !"}
</span> </span>
</div> </div>
)} )}
</div>
{totalPages > 0 && ( {totalPages > 0 && (
<Pagination <Pagination
currentPage={currentPage} currentPage={currentPage}
@ -204,6 +206,7 @@ const Regularization = ({
onPageChange={paginate} onPageChange={paginate}
/> />
)} )}
</div> </div>
); );
}; };