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

Changes in UI of Attendance Tabs

Browse Source
This commit is contained in:
Kartik Sharma 2025-10-30 14:59:21 +05:30 committed by pramod.mahajan
parent 8fb2091dbd
commit 6a78eddd2b
2 changed files with 49 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Activities/Attendance.jsx
View File

@ -110,25 +110,32 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
return (
<>
<div className="d-flex justify-content-between align-items-center py-2 px-2">
{/* Left side - Date */}
<div className="text-start">
<strong>Date: {formatUTCToLocalTime(todayDate)}</strong>
</div>
{/* Right side - Pending Attendance toggle */}
<div className="form-check form-switch m-0">
<input
type="checkbox"
className="form-check-input"
role="switch"
id="inactiveEmployeesCheckbox"
disabled={isFetching}
checked={ShowPending}
onChange={(e) => setShowPending(e.target.checked)}
/>
<label className="form-check-label" htmlFor="inactiveEmployeesCheckbox">
Pending Attendance
</label>
</div>
</div>
<div
className="table-responsive text-nowrap h-100"
style={{ minHeight: "200px" }} // Ensures fixed height
>
<div className="d-flex text-start align-items-center py-2">
<strong>Date : {formatUTCToLocalTime(todayDate)}</strong>
<div className="form-check form-switch text-start m-0 ms-5">
<input
type="checkbox"
className="form-check-input"
role="switch"
id="inactiveEmployeesCheckbox"
disabled={isFetching}
checked={ShowPending}
onChange={(e) => setShowPending(e.target.checked)}
/>
<label className="form-check-label ms-0">Pending Attendance</label>
</div>
</div>
{attLoading ? (
<div>Loading...</div>
) : currentItems?.length > 0 ? (

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

@ -174,37 +174,38 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
return (
<>
<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 align-items-center"
id="DataTables_Table_0_length"
>
<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
onRangeChange={setDateRange}
defaultStartDate={yesterday}
/>
</div>
{/* Pending Attendance Switch */}
<div className="form-check form-switch text-start mb-0">
<input
type="checkbox"
className="form-check-input"
role="switch"
id="inactiveEmployeesCheckbox"
disabled={isFetching}
checked={showPending}
onChange={(e) => setShowPending(e.target.checked)}
/>
<label className="form-check-label ms-0 ms-md-0">
Pending Attendance
</label>
</div>
{/* Left Side - Date Picker */}
<div className="d-flex align-items-center">
<DateRangePicker
onRangeChange={setDateRange}
defaultStartDate={yesterday}
/>
</div>
{/* Right Side - Pending Attendance Switch */}
<div className="form-check form-switch d-flex align-items-center mb-2">
<input
type="checkbox"
className="form-check-input"
role="switch"
id="inactiveEmployeesCheckbox"
disabled={isFetching}
checked={showPending}
onChange={(e) => setShowPending(e.target.checked)}
/>
<label
className="form-check-label ms-2"
htmlFor="inactiveEmployeesCheckbox"
>
Pending Attendance
</label>
</div>
</div>
<div
className="table-responsive text-nowrap"
style={{ minHeight: "200px" }}
@ -255,7 +256,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
className="table-row-header"
>
<td colSpan={8} className="text-start">
<strong>
<strong className="d-inline-block my-1 ms-2">
{moment(currentDate).format("DD-MM-YYYY")}
</strong>
</td>