Changes in Emp Attendance and DateRange picker.

src/components/Activities/AttendcesLogs.jsx

@@ -175,24 +175,32 @@ useEffect(() => {
         className="dataTables_length text-start py-2 d-flex justify-content-between "
         id="DataTables_Table_0_length"
       >
-        <div className="d-flex align-items-center my-0 ">
+        <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 className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0">
+          </div>
+
+          {/* Pending Attendance Switch */}
+          <div className="form-check form-switch text-start mb-0">
             <input
               type="checkbox"
               className="form-check-input"
               role="switch"
-              disabled={isFetching}
               id="inactiveEmployeesCheckbox"
+              disabled={isFetching}
               checked={showPending}
               onChange={(e) => setShowPending(e.target.checked)}
             />
-            <label className="form-check-label ms-0">Pending Attendance</label>
+            <label className="form-check-label ms-0 ms-md-0">
+              Pending Attendance
+            </label>
           </div>
         </div>
+
       </div>
       <div
         className="table-responsive text-nowrap"
@@ -326,8 +334,7 @@ useEffect(() => {
               (pageNumber) => (
                 <li
                   key={pageNumber}
-                  className={`page-item ${
-                    currentPage === pageNumber ? "active" : ""
+                  className={`page-item ${currentPage === pageNumber ? "active" : ""
                     }`}
                 >
                   <button
@@ -340,8 +347,7 @@ useEffect(() => {
               )
             )}
             <li
-              className={`page-item ${
-                currentPage === totalPages ? "disabled" : ""
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""
                 }`}
             >
               <button

src/components/common/DateRangePicker.jsx

@@ -73,7 +73,7 @@ const DateRangePicker = ({
   />
 
   <i
-    className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
+    className="bx bx-calendar calendar-icon cursor-pointer position-absolute ms-n6 top-50 end-30 translate-middle-y me-2 "
     onClick={handleIconClick}
   />
 </div>

src/pages/project/ProjectPage.jsx

@@ -128,8 +128,7 @@ const ProjectPage = () => {
                 <div className="d-flex gap-2 mb-2">
                   <button
                     type="button"
-                    className={`btn  btn-sm p-1 ${
-                      !listView ? "btn-primary" : "btn-outline-primary"
+                    className={`btn  btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"
                       }`}
                     onClick={() => setListView(false)}
                     data-bs-toggle="tooltip"
@@ -140,8 +139,7 @@ const ProjectPage = () => {
                   </button>
                   <button
                     type="button"
-                    className={`btn btn-sm p-1  ${
-                      listView ? "btn-primary" : "btn-outline-primary"
+                    className={`btn btn-sm p-1  ${listView ? "btn-primary" : "btn-outline-primary"
                       }`}
                     onClick={() => setListView(true)}
                     data-bs-toggle="tooltip"
@@ -180,8 +178,9 @@ const ProjectPage = () => {
                 </div>
               </div>
 
-              <div>
-              {HasManageProject && (  <button
+              {HasManageProject && (
+                <div className="ms-auto">
+                  <button
                     className="btn btn-sm btn-primary"
                     type="button"
                     onClick={() =>
@@ -192,8 +191,9 @@ const ProjectPage = () => {
                     <span className="d-none d-md-inline-block">
                       Add New Project
                     </span>
-                </button>)}
+                  </button>
                 </div>
+              )}
             </div>
           </div>
         </div>