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

@@ -5,11 +5,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 DateRangePickerNoDefault from "./DateRangePickerNoDefault";
+import DateRangePicker from "../../components/common/DateRangePicker";
 
 const SCROLL_THRESHOLD = 5;
 
@@ -153,8 +152,15 @@ const ImageGallery = () => {
   const getUniqueValuesWithIds = useCallback((idKey, nameKey) => {
     const map = new Map();
     allImagesData.forEach(batch => {
-      let id = idKey === "floorIds" ? batch.floorIds : batch[idKey];
+      let id;
+      if (idKey === "floorIds") {
+        id = batch.floorIds;
+      } else {
+        id = batch[idKey];
+      }
+
       const name = batch[nameKey];
+
       if (id && name && !map.has(id)) {
         map.set(id, name);
       }
@@ -175,7 +181,6 @@ 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");
@@ -240,7 +245,9 @@ const ImageGallery = () => {
         }
         return false;
       }
-      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) return false;
+      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) {
+        return false;
+      }
       return oldVal !== newVal;
     });
 
@@ -319,10 +326,9 @@ const ImageGallery = () => {
         <div className="dropdown-content">
           {type === "dateRange" ? (
             <div className="date-range-inputs">
-              <DateRangePickerNoDefault
+              <DateRangePicker
                 onRangeChange={setDateRange}
                 endDateMode="today"
-                endDateMode="today"
                 startDate={selectedFilters.startDate}
                 endDate={selectedFilters.endDate}
               />
@@ -346,7 +352,12 @@ const ImageGallery = () => {
 
   return (
     <div className={`gallery-container container-fluid ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
-      <Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallary", link: null }]} />
+      <Breadcrumb
+        data={[
+          { label: "Home", link: "/" },
+          { label: "Gallary", link: null },
+        ]}
+      ></Breadcrumb>
       <div className="main-content">
         <button
           className={`filter-button btn-primary ${isFilterPanelOpen ? "closed-icon" : ""}`}
@@ -362,8 +373,12 @@ const ImageGallery = () => {
           ) : images.length > 0 ? (
             images.map((batch) => {
               const firstDoc = batch.documents[0];
-              const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""}`.trim();
+              const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""
-              const date = formatUTCToLocalTime(firstDoc?.uploadedAt);
+                }`.trim();
+              const date = formatUTCToLocalTime(firstDoc?.uploadedAt)
+
+
+
               const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
 
               return (
@@ -373,8 +388,12 @@ const ImageGallery = () => {
                       <div className="d-flex align-items-center mb-1">
                         <Avatar size="xs" firstName={firstDoc?.uploadedBy?.firstName} lastName={firstDoc?.uploadedBy?.lastName} className="me-2" />
                         <div className="d-flex flex-column align-items-start">
-                          <strong className="user-name-text">{userName}</strong>
+                          <strong className="user-name-text">
-                          <span className="me-2">{date}</span>
+                            {userName}
+                          </strong>
+                          <span className="me-2">
+                            {date}
+                          </span>
                         </div>
                       </div>
                     </div>
@@ -433,8 +452,12 @@ const ImageGallery = () => {
           <button type="button" className="btn-close" onClick={() => setIsFilterPanelOpen(false)} aria-label="Close" />
         </div>
         <div className="filter-actions mt-auto mx-2">
-          <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>Clear All</button>
+          <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
-          <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>Apply Filters</button>
+            Clear All
+          </button>
+          <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
+            Apply Filters
+          </button>
         </div>
         <div className="offcanvas-body d-flex flex-column">
           {renderFilterCategory("Date Range", [], "dateRange")}
@@ -444,6 +467,8 @@ const ImageGallery = () => {
           {renderFilterCategory("Activity", activities, "activity")}
           {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
           {renderFilterCategory("Work Category", workCategories, "workCategory")}
+
+
         </div>
       </div>
     </div>