Merge pull request 'Alignment Correction for Organization & Employee Filters in Attendance → Regularization Tab' (#495) from Kartik_Bug_V1#1569 into Issues_Oct_4W_V1

Reviewed-on: #495
merged

src/components/Activities/Attendance.jsx

@@ -110,13 +110,14 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
 
   return (
     <>
-      <div
+      <div className="d-flex justify-content-between align-items-center py-2 px-2">
-        className="table-responsive text-nowrap h-100"
+        {/* Left side - Date */}
-        style={{ minHeight: "200px" }}   // Ensures fixed height
+        <div className="text-start">
-      >
-        <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">
+        </div>
+
+        {/* Right side - Pending Attendance toggle */}
+        <div className="form-check form-switch m-0">
           <input
             type="checkbox"
             className="form-check-input"
@@ -126,9 +127,15 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
             checked={ShowPending}
             onChange={(e) => setShowPending(e.target.checked)}
           />
-            <label className="form-check-label ms-0">Pending Attendance</label>
+          <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
+      >
         {attLoading ? (
           <div>Loading...</div>
         ) : currentItems?.length > 0 ? (

src/components/Activities/AttendcesLogs.jsx

@@ -174,20 +174,19 @@ 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">
+        {/* Left Side - Date Picker */}
-          {/* Date Range Picker */}
+        <div className="d-flex align-items-center">
-          <div className="flex-grow-1 flex-md-grow-0">
           <DateRangePicker
             onRangeChange={setDateRange}
             defaultStartDate={yesterday}
           />
         </div>
 
-          {/* Pending Attendance Switch */}
+        {/* Right Side - Pending Attendance Switch */}
-          <div className="form-check form-switch text-start mb-0">
+        <div className="form-check form-switch d-flex align-items-center mb-2">
           <input
             type="checkbox"
             className="form-check-input"
@@ -197,13 +196,15 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
             checked={showPending}
             onChange={(e) => setShowPending(e.target.checked)}
           />
-            <label className="form-check-label ms-0 ms-md-0">
+          <label
+            className="form-check-label ms-2"
+            htmlFor="inactiveEmployeesCheckbox"
+          >
             Pending Attendance
           </label>
         </div>
       </div>
 
-      </div>
 
       <div
         className="table-responsive text-nowrap"
@@ -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>

src/pages/Activities/AttendancePage.jsx

@@ -179,7 +179,7 @@ const AttendancePage = () => {
               </div>
 
               {/* Search + Organization filter */}
-              <div className="col-12 col-md-auto mt-2 mt-md-0 ms-md-auto">
+              <div className="col-12 col-md-auto pb-2 m-0 mt-md-0 ms-md-auto nav-tabs">
                 <div className="row g-2">
                   <div className="col-12 col-sm-6">
                     <select