From 6a78eddd2b510300e8a0cbb91e72b89a5c8083d0 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 30 Oct 2025 14:59:21 +0530
Subject: [PATCH] Changes in UI of Attendance Tabs

---
 src/components/Activities/Attendance.jsx    | 37 ++++++++------
 src/components/Activities/AttendcesLogs.jsx | 53 +++++++++++----------
 2 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/src/components/Activities/Attendance.jsx b/src/components/Activities/Attendance.jsx
index b7ddfaff..24f1ff38 100644
--- a/src/components/Activities/Attendance.jsx
+++ b/src/components/Activities/Attendance.jsx
@@ -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 ? (
diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx
index 4660f956..3b544b7c 100644
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/src/components/Activities/AttendcesLogs.jsx
@@ -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>