Changes in Date picker .

src/pages/Gallary/DateRangePickerNoDefault.jsx

@@ -1,71 +0,0 @@
-import React, { useEffect, useRef } from "react";
-
-const DateRangePickerNoDefault = ({
-  onRangeChange,
-  startDate,
-  endDate,
-}) => {
-  const inputRef = useRef(null);
-
-  useEffect(() => {
-    const today = new Date();
-    const sevenDaysAgo = new Date();
-    sevenDaysAgo.setDate(today.getDate() - 7);
-
-    const formatDate = (date) => date.toISOString().split('T')[0];
-
-    const defaultStartDate = formatDate(sevenDaysAgo);
-    const defaultEndDate = formatDate(today);
-
-    const fp = flatpickr(inputRef.current, {
-      mode: "range",
-      dateFormat: "Y-m-d",
-      altInput: true,
-      altFormat: "d-m-Y",
-      static: true,
-      clickOpens: true,
-      onChange: (selectedDates, dateStr) => {
-        if (selectedDates.length === 2) {
-          const [startDateString, endDateString] = dateStr.split(" to ");
-          onRangeChange?.({ startDate: startDateString, endDate: endDateString });
-        } else if (selectedDates.length === 0) {
-          onRangeChange?.({ startDate: "", endDate: "" });
-        }
-      },
-      onReady: (selectedDates, dateStr, instance) => {
-        if (!startDate && !endDate) {
-          instance.setDate([defaultStartDate, defaultEndDate], true);
-          onRangeChange?.({ startDate: defaultStartDate, endDate: defaultEndDate });
-        } else if (startDate && endDate) {
-          instance.setDate([startDate, endDate], true);
-        }
-      },
-    });
-
-    if (startDate && endDate) {
-      fp.setDate([startDate, endDate], false);
-    } else if (!startDate && !endDate && fp.selectedDates.length > 0) {
-      fp.clear();
-      onRangeChange?.({ startDate: defaultStartDate, endDate: defaultEndDate });
-    } else if (!startDate && !endDate && fp.selectedDates.length === 0) {
-      fp.setDate([defaultStartDate, defaultEndDate], false);
-      onRangeChange?.({ startDate: defaultStartDate, endDate: defaultEndDate });
-    }
-
-    return () => {
-      fp.destroy();
-    };
-  }, [onRangeChange, startDate, endDate]);
-
-  return (
-    <input
-      type="text"
-      className="form-control form-control-sm ms-1"
-      placeholder="DD-MM-YYYY to DD-MM-YYYY"
-      id="flatpickr-range"
-      ref={inputRef}
-    />
-  );
-};
-
-export default DateRangePickerNoDefault;

src/pages/Gallary/ImageGallary.jsx

@@ -6,11 +6,10 @@ import { useSelector } from "react-redux";
 import { useModal } from "./ModalContext";
 import ImagePop from "./ImagePop";
 import Avatar from "../../components/common/Avatar";
-import DateRangePicker from "../../components/common/DateRangePicker";
 import eventBus from "../../services/eventBus";
 import Breadcrumb from "../../components/common/Breadcrumb";
-import {formatUTCToLocalTime} from "../../utils/dateUtils";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
-import DateRangePickerNoDefault from "./DateRangePickerNoDefault";
+import DateRangePicker from "../../components/common/DateRangePicker";
 
 const PAGE_SIZE = 10;
 const SCROLL_THRESHOLD = 5;
@@ -230,7 +229,7 @@ const ImageGallery = () => {
         }
       });
     });
-   return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+    return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
   }, [allImagesData]);
 
   const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
@@ -316,7 +315,7 @@ const ImageGallery = () => {
         return false;
       }
       if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) {
-          return false;
+        return false;
       }
       return oldVal !== newVal;
     });
@@ -405,10 +404,9 @@ const ImageGallery = () => {
         <div className="dropdown-content">
           {type === "dateRange" ? (
             <div className="date-range-inputs">
-              <DateRangePickerNoDefault
+              <DateRangePicker
                 onRangeChange={setDateRange}
-                defaultStartDate={selectedFilters.startDate || yesterday}
+                endDateMode="today"
-                defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
                 startDate={selectedFilters.startDate}
                 endDate={selectedFilters.endDate}
               />
@@ -439,12 +437,12 @@ const ImageGallery = () => {
   );
 
   return (
-    <div className={`gallery-container container-fluid ${ isFilterPanelOpen ? "filter-panel-open-end" : "" }`}>
+    <div className={`gallery-container container-fluid ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
-       <Breadcrumb
+      <Breadcrumb
-          data={[
+        data={[
-            { label: "Home", link: "/" },
+          { label: "Home", link: "/" },
-            { label: "Gallary", link: null },
+          { label: "Gallary", link: null },
-          ]}
+        ]}
       ></Breadcrumb>
       <div className="main-content">
         <button
@@ -606,13 +604,13 @@ const ImageGallery = () => {
           ></button>
         </div>
         <div className="filter-actions mt-auto mx-2">
-            <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
+          <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
-              Clear All
+            Clear All
-            </button>
+          </button>
-            <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
+          <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
-              Apply Filters
+            Apply Filters
-            </button>
+          </button>
-          </div>
+        </div>
         <div className="offcanvas-body d-flex flex-column">
           {renderFilterCategory("Date Range", [], "dateRange")}
           {renderFilterCategory("Building", buildings, "building")}