fixed datepicke ui

src/components/Activities/AttendcesLogs.jsx

@@ -226,7 +226,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
   return (
     <>
       <div
-        className="dataTables_length text-start py-2 d-flex justify-content-between"
+        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 ">
@@ -234,7 +234,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
             onRangeChange={setDateRange}
             defaultStartDate={yesterday}
           />
-          <div className="form-check form-switch text-start m-0 ms-5">
+          <div className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0">
             <input
               type="checkbox"
               className="form-check-input"

src/components/Activities/Regularization.jsx

@@ -7,16 +7,30 @@ import { useRegularizationRequests } from "../../hooks/useAttendance";
 import moment from "moment";
 import usePagination from "../../hooks/usePagination";
 import eventBus from "../../services/eventBus";
-import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
+import {
+  cacheData,
+  clearCacheKey,
+  useSelectedProject,
+} from "../../slices/apiDataManager";
 import { useQueryClient } from "@tanstack/react-query";
+import Pagination from "../../components/common/Pagination";
 
-const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, IncludeInActive  }) => {
+const Regularization = ({
+  handleRequest,
+  searchTerm,
+  projectId,
+  organizationId,
+  IncludeInActive,
+}) => {
   const queryClient = useQueryClient();
   // var selectedProject = useSelector((store) => store.localVariables.projectId);
   const selectedProject = useSelectedProject();
   const [regularizesList, setregularizedList] = useState([]);
-  const { regularizes, loading, error, refetch } =
-    useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
+  const { regularizes, loading, error, refetch } = useRegularizationRequests(
+    selectedProject,
+    organizationId,
+    IncludeInActive
+  );
 
   useEffect(() => {
     setregularizedList(regularizes);
@@ -54,48 +68,15 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
     }
     const lowercasedSearchTerm = searchTerm.toLowerCase();
     return sortedList.filter((item) => {
-      const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
+      const fullName = `${item?.firstName} ${item?.lastName}`.toLowerCase();
       return fullName.includes(lowercasedSearchTerm);
     });
   }, [regularizesList, searchTerm]);
 
-  // const filteredSearchData = useMemo(() => {
-  //   let sortedList = [...regularizesList].sort(sortByName);
-
-  //   // Search filter
-  //   if (searchTerm) {
-  //     const lowercasedSearchTerm = searchTerm.toLowerCase();
-  //     sortedList = sortedList.filter((item) => {
-  //       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-  //       return fullName.includes(lowercasedSearchTerm);
-  //     });
-  //   }
-
-  //   // Organization filter
-  //   if (filters?.selectedOrganization) {
-  //     sortedList = sortedList.filter(
-  //       (item) => item.organization?.name === filters.selectedOrganization
-  //     );
-  //   }
-
-  //   // Services filter
-  //   if (filters?.selectedServices?.length > 0) {
-  //     sortedList = sortedList.filter((item) =>
-  //       filters.selectedServices.includes(item.service?.name)
-  //     );
-  //   }
-
-  //   return sortedList;
-  // }, [regularizesList, searchTerm, filters]);
-
-
-  const { currentPage, totalPages, currentItems, paginate } =
-    usePagination(filteredSearchData, 20);
-
-  // Reset pagination when the search term or data changes
-  useEffect(() => {
-
-  }, [filteredSearchData]);
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
+    filteredSearchData,
+    20
+  );
 
   useEffect(() => {
     eventBus.on("regularization", handler);
@@ -117,9 +98,15 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
   }, [employeeHandler]);
 
   return (
-    <div className="table-responsive text-nowrap pb-4" style={{ minHeight: "200px" }}>
+    <div
+      className="table-responsive text-nowrap pb-4"
+      style={{ minHeight: "200px" }}
+    >
       {loading ? (
-        <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
+        <div
+          className="d-flex justify-content-center align-items-center"
+          style={{ height: "200px" }}
+        >
           <p className="text-secondary">Loading...</p>
         </div>
       ) : currentItems?.length > 0 ? (
@@ -143,10 +130,7 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
               <tr key={index}>
                 <td colSpan={2}>
                   <div className="d-flex justify-content-start align-items-center">
-                    <Avatar
-                      firstName={att.firstName}
-                      lastName={att.lastName}
-                    />
+                    <Avatar firstName={att.firstName} lastName={att.lastName} />
                     <div className="d-flex flex-column">
                       <a href="#" className="text-heading text-truncate">
                         <span className="fw-normal">
@@ -175,7 +159,6 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
             ))}
           </tbody>
         </table>
-
       ) : (
         <div
           className="d-flex justify-content-center align-items-center"
@@ -188,7 +171,7 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
           </span>
         </div>
       )}
-      {!loading && totalPages > 1 && (
+      {/* {!loading && totalPages > 1 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1 mt-3">
             <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
@@ -226,6 +209,14 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
             </li>
           </ul>
         </nav>
+      )} */}
+
+      {totalPages > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={paginate}
+        />
       )}
     </div>
   );

src/components/common/DateRangePicker.jsx

@@ -3,8 +3,8 @@ import { useController, useFormContext, useWatch } from "react-hook-form";
 import { useSelector } from "react-redux";
 
 const DateRangePicker = ({
-  md,
-  sm,
+  md=12,
+  sm=6,
   onRangeChange,
   DateDifference = 7,
   endDateMode = "yesterday",
@@ -63,21 +63,22 @@ const DateRangePicker = ({
   };
 
   return (
-    <div className={`col-${sm} col-sm-${md} px-1`}>
+<div className={`position-relative w-auto justify-content-center`}>
   <input
     type="text"
-        className="form-control form-control-sm ps-2 pe-5 me-4"
+    className="form-control form-control-sm w-100 pe-8  " 
     placeholder="From to End"
     id="flatpickr-range"
     ref={inputRef}
   />
 
   <i
-        className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50 translate-middle-y"
+    className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
     onClick={handleIconClick}
-        style={{ right: "22px", bottom: "-8px" }}
   />
-    </div>
+</div>
+
+
   );
 };