Changes in Directory filter adding clear and apply button and calling api at the time apply filter.

src/pages/Gallary/ImageGallary.jsx

@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import "./ImageGallery.css";
-import { ImageGalleryAPI } from "./ImageGalleryAPI"; // Assuming this exists
+import { ImageGalleryAPI } from "./ImageGalleryAPI";
 import moment from "moment";
-import { useSelector } from "react-redux"; // Assuming Redux is set up
+import { useSelector } from "react-redux";
-import { useModal } from "./ModalContext"; // Assuming ModalContext exists
+import { useModal } from "./ModalContext";
-import ImagePop from "./ImagePop"; // Assuming ImagePop component exists
+import ImagePop from "./ImagePop";
-import Avatar from "../../components/common/Avatar"; // Assuming Avatar component exists
+import Avatar from "../../components/common/Avatar";
 
 const ImageGallery = () => {
   const [images, setImages] = useState([]);
@@ -19,20 +19,41 @@ const ImageGallery = () => {
     uploadedBy: [],
     workCategory: [],
     workArea: [],
+    startDate: "",
+    endDate: "",
   });
 
-  const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false); // Controls filter drawer
+  const [appliedFilters, setAppliedFilters] = useState({
-  const [hoveredImage, setHoveredImage] = useState(null); // For image hover description
+    buildingIds: null,
+    floorIds: null,
+    activityIds: null,
+    uploadedByIds: null,
+    workCategoryIds: null,
+    workAreaIds: null,
+    startDate: null,
+    endDate: null,
+  });
+
+  const [collapsedFilters, setCollapsedFilters] = useState({
+    dateRange: false,
+    building: false,
+    floor: false,
+    activity: false,
+    uploadedBy: false,
+    workCategory: false,
+    workArea: false,
+  });
+
+  const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
+  const [hoveredImage, setHoveredImage] = useState(null);
   const [loading, setLoading] = useState(true);
 
-  const imageGroupRefs = useRef({}); // To reference horizontal scroll containers
+  const imageGroupRefs = useRef({});
-  const filterPanelRef = useRef(null); // Ref for the filter panel for click-outside
+  const filterPanelRef = useRef(null);
-  const filterButtonRef = useRef(null); // Ref for the filter button for click-outside
+  const filterButtonRef = useRef(null);
 
-  // Click outside handler for the filter panel
   useEffect(() => {
     const handleClickOutside = (event) => {
-      // Close filter panel if click is outside the panel and not on the toggle button itself
       if (
         filterPanelRef.current &&
         !filterPanelRef.current.contains(event.target) &&
@@ -49,136 +70,250 @@ const ImageGallery = () => {
     };
   }, []);
 
-  // Fetch images when the selectedProjectId changes
   useEffect(() => {
-    if (!selectedProjectId) return;
+    if (!selectedProjectId) {
+      setImages([]);
+      setLoading(false);
+      return;
+    }
 
     setLoading(true);
-    ImageGalleryAPI.ImagesGet(selectedProjectId)
+
+    ImageGalleryAPI.ImagesGet(selectedProjectId, appliedFilters)
       .then((res) => {
         setImages(res.data);
       })
       .catch((err) => {
         console.error("Error fetching images:", err);
+        setImages([]);
       })
       .finally(() => {
         setLoading(false);
       });
-  }, [selectedProjectId]);
+  }, [selectedProjectId, appliedFilters]);
 
-  // Helper functions to get unique filter values
+  const getUniqueValuesWithIds = useCallback(
-  const getUniqueValues = (key) => [
+    (idKey, nameKey) => {
-    ...new Set(images.map((img) => img[key]).filter(Boolean)),
+      const uniqueMap = new Map();
-  ];
+      images.forEach(img => {
-
+        if (img[idKey] && img[nameKey]) {
-  const getUniqueUploadedByUsers = () => [
+          uniqueMap.set(img[idKey], img[nameKey]);
-    ...new Set(
+        }
-      images
+      });
-        .map((img) => {
+      return Array.from(uniqueMap.entries());
-          const firstName = img.uploadedBy?.firstName || "";
+    },
-          const lastName = img.uploadedBy?.lastName || "";
+    [images]
-          return `${firstName} ${lastName}`.trim();
+  );
-        })
+
-        .filter(Boolean)
+  const getUniqueUploadedByUsers = useCallback(
-    ),
+    () => {
-  ];
+      const uniqueUsersMap = new Map();
-
+      images.forEach(img => {
-  const getUniqueWorkCategories = () => [
+        if (img.uploadedBy && img.uploadedBy.id) {
-    ...new Set(images.map((img) => img.workCategoryName).filter(Boolean)),
+          const fullName = `${img.uploadedBy.firstName || ""} ${img.uploadedBy.lastName || ""}`.trim();
-  ];
+          if (fullName) {
-
+            uniqueUsersMap.set(img.uploadedBy.id, fullName);
-  // Derive filter options
+          }
-  const buildings = getUniqueValues("buildingName");
+        }
-  const floors = getUniqueValues("floorName");
+      });
-  const activities = getUniqueValues("activityName");
+      return Array.from(uniqueUsersMap.entries());
-  const workAreas = getUniqueValues("workAreaName");
+    },
-  const uploadedByUsers = getUniqueUploadedByUsers();
+    [images]
-  const workCategories = getUniqueWorkCategories();
+  );
-
+
-  // Toggle selected filters
+  const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
-  const toggleFilter = (type, value) => {
+  const floors = getUniqueValuesWithIds("floorIds", "floorName");
-    setSelectedFilters((prev) => {
+  const activities = getUniqueValuesWithIds("activityId", "activityName");
-      const current = prev[type];
+  const workAreas = getUniqueValuesWithIds("workAreaId", "workAreaName");
-      return {
+  const uploadedByUsers = getUniqueUploadedByUsers();
-        ...prev,
+  const workCategories = getUniqueValuesWithIds("workCategoryId", "workCategoryName");
-        [type]: current.includes(value)
+
-          ? current.filter((v) => v !== value)
+  const toggleFilter = useCallback((type, itemId, itemName) => {
-          : [...current, value],
+    setSelectedFilters((prev) => {
-      };
+      const current = prev[type];
-    });
+      const isSelected = current.some(item => item[0] === itemId);
-  };
+
-
+      const newArray = isSelected
-  // Filter images based on selected filters
+        ? current.filter((item) => item[0] !== itemId)
-  const filteredImages = images.filter(
+        : [...current, [itemId, itemName]];
-    (img) =>
+
-      (selectedFilters.building.length === 0 ||
+      return {
-        selectedFilters.building.includes(img.buildingName)) &&
+        ...prev,
-      (selectedFilters.floor.length === 0 ||
+        [type]: newArray,
-        selectedFilters.floor.includes(img.floorName)) &&
+      };
-      (selectedFilters.activity.length === 0 ||
+    });
-        selectedFilters.activity.includes(img.activityName)) &&
+  }, []);
-      (selectedFilters.workArea.length === 0 ||
+
-        selectedFilters.workArea.includes(img.workAreaName)) &&
+  const handleDateChange = useCallback((type, date) => {
-      (selectedFilters.uploadedBy.length === 0 ||
+    setSelectedFilters((prev) => ({
-        selectedFilters.uploadedBy.includes(
+      ...prev,
-          `${img.uploadedBy?.firstName || ""} ${
+      [type]: date,
-            img.uploadedBy?.lastName || ""
+    }));
-          }`.trim()
+  }, []);
-        )) &&
+
-      (selectedFilters.workCategory.length === 0 ||
+  const toggleCollapse = useCallback((type) => {
-        selectedFilters.workCategory.includes(img.workCategoryName))
+    setCollapsedFilters((prev) => ({
+      ...prev,
+      [type]: !prev[type],
+    }));
+  }, []);
+
+  const handleApplyFilters = useCallback(() => {
+    const payload = {
+      buildingIds: selectedFilters.building.length > 0 ? selectedFilters.building.map(item => item[0]) : null,
+      floorIds: selectedFilters.floor.length > 0 ? selectedFilters.floor.map(item => item[0]) : null,
+      workAreaIds: selectedFilters.workArea.length > 0 ? selectedFilters.workArea.map(item => item[0]) : null,
+      workCategoryIds: selectedFilters.workCategory.length > 0 ? selectedFilters.workCategory.map(item => item[0]) : null,
+      activityIds: selectedFilters.activity.length > 0 ? selectedFilters.activity.map(item => item[0]) : null,
+      uploadedByIds: selectedFilters.uploadedBy.length > 0 ? selectedFilters.uploadedBy.map(item => item[0]) : null,
+      startDate: selectedFilters.startDate || null,
+      endDate: selectedFilters.endDate || null,
+    };
+    setAppliedFilters(payload);
+    setIsFilterPanelOpen(false);
+  }, [selectedFilters]);
+
+
+  const handleClearAllFilters = useCallback(() => {
+    const initialStateSelected = {
+      building: [],
+      floor: [],
+      activity: [],
+      uploadedBy: [],
+      workCategory: [],
+      workArea: [],
+      startDate: "",
+      endDate: "",
+    };
+    setSelectedFilters(initialStateSelected);
+
+    const initialStateApplied = {
+      buildingIds: null,
+      floorIds: null,
+      activityIds: null,
+      uploadedByIds: null,
+      workCategoryIds: null,
+      workAreaIds: null,
+      startDate: null,
+      endDate: null,
+    };
+    setAppliedFilters(initialStateApplied);
+
+    setIsFilterPanelOpen(false);
+  }, []);
+
+  const filteredImages = images.filter(
+    (img) => {
+      const uploadedAtMoment = moment(img.uploadedAt);
+      const startDateMoment = appliedFilters.startDate ? moment(appliedFilters.startDate) : null;
+      const endDateMoment = appliedFilters.endDate ? moment(appliedFilters.endDate) : null;
+
+      const isWithinDateRange =
+        (!startDateMoment || uploadedAtMoment.isSameOrAfter(startDateMoment, 'day')) &&
+        (!endDateMoment || uploadedAtMoment.isSameOrBefore(endDateMoment, 'day'));
+
+      const passesCategoryFilters =
+        (appliedFilters.buildingIds === null || appliedFilters.buildingIds.includes(img.buildingId)) &&
+        (appliedFilters.floorIds === null || appliedFilters.floorIds.includes(img.floorIds)) &&
+        (appliedFilters.activityIds === null || appliedFilters.activityIds.includes(img.activityId)) &&
+        (appliedFilters.workAreaIds === null || appliedFilters.workAreaIds.includes(img.workAreaId)) &&
+        (appliedFilters.uploadedByIds === null || appliedFilters.uploadedByIds.includes(img.uploadedBy?.id)) &&
+        (appliedFilters.workCategoryIds === null || appliedFilters.workCategoryIds.includes(img.workCategoryId));
+
+      return isWithinDateRange && passesCategoryFilters;
+    }
   );
 
-  // Group images by Activity, Uploader, and Work Area
   const imagesByActivityUser = {};
   filteredImages.forEach((img) => {
-    const userName = `${img.uploadedBy?.firstName || ""} ${
+    const userName = `${img.uploadedBy?.firstName || ""} ${img.uploadedBy?.lastName || ""
-      img.uploadedBy?.lastName || ""
+      }`.trim();
-    }`.trim();
+    const workArea = img.workAreaName || "Unknown";
-    const workArea = img.workAreaName || "Unknown"; // Handle cases where workAreaName might be null/undefined
     const key = `${img.activityName}__${userName}__${workArea}`;
     if (!imagesByActivityUser[key]) imagesByActivityUser[key] = [];
     imagesByActivityUser[key].push(img);
   });
 
-  // Scroll functionality for horizontal image groups
+  const scrollLeft = useCallback((key) => {
-  const scrollLeft = (key) => {
     imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" });
-  };
+  }, []);
 
-  const scrollRight = (key) => {
+  const scrollRight = useCallback((key) => {
     imageGroupRefs.current[key]?.scrollBy({ left: 200, behavior: "smooth" });
-  };
+  }, []);
 
-  // Helper function to render filter categories dropdowns
   const renderFilterCategory = (label, items, type) => (
-    <div className="dropdown">
+    <div className={`dropdown ${collapsedFilters[type] ? 'collapsed' : ''}`}>
-      <div className="dropdown-content">
+      <div className="dropdown-header" onClick={() => toggleCollapse(type)}>
-        <div className="dropdown-header">
+        <strong>{label}</strong>
-          <strong>{label}</strong>
+        <div className="header-controls">
-          {selectedFilters[type].length > 0 && (
+          {type === 'dateRange' && (selectedFilters.startDate || selectedFilters.endDate) && (
             <button
               className="clear-button"
-              onClick={() =>
+              onClick={(e) => {
-                setSelectedFilters((prev) => ({ ...prev, [type]: [] }))
+                e.stopPropagation();
-              }
+                setSelectedFilters(prev => ({ ...prev, startDate: "", endDate: "" }));
+              }}
+            >
+              Clear
+            </button>
+          )}
+          {type !== 'dateRange' && selectedFilters[type] && selectedFilters[type].length > 0 && (
+            <button
+              className="clear-button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setSelectedFilters((prev) => ({ ...prev, [type]: [] }));
+              }}
             >
               Clear
             </button>
           )}
         </div>
-        <hr />
-        {items.map((item) => (
-          <label key={item}>
-            <input
-              type="checkbox"
-              checked={selectedFilters[type].includes(item)}
-              onChange={() => toggleFilter(type, item)}
-            />
-            {item}
-          </label>
-        ))}
       </div>
+      {!collapsedFilters[type] && (
+        <div className="dropdown-content">
+          {type === 'dateRange' ? (
+            <div className="date-range-inputs">
+              <label>
+                From:
+                <input
+                  type="date"
+                  value={selectedFilters.startDate}
+                  onChange={(e) => handleDateChange("startDate", e.target.value)}
+                  className="date-input"
+                />
+              </label>
+              <label>
+                To:
+                <input
+                  type="date"
+                  value={selectedFilters.endDate}
+                  onChange={(e) => handleDateChange("endDate", e.target.value)}
+                  className="date-input"
+                />
+              </label>
+            </div>
+          ) : (
+            items.map((item) => {
+              const itemId = item[0];
+              const itemName = item[1];
+              const isChecked = selectedFilters[type].some(selectedItem => selectedItem[0] === itemId);
+
+              return (
+                <label key={itemId}>
+                  <input
+                    type="checkbox"
+                    checked={isChecked}
+                    onChange={() => toggleFilter(type, itemId, itemName)}
+                  />
+                  {itemName}
+                </label>
+              );
+            })
+          )}
+        </div>
+      )}
     </div>
   );
 
@@ -191,11 +326,8 @@ const ImageGallery = () => {
               <div className="spinner" />
             </div>
           ) : Object.entries(imagesByActivityUser).length > 0 ? (
-            // Render each grouped section of images
             Object.entries(imagesByActivityUser).map(([key, imgs]) => {
-              // Destructure the key to get activity, user, and work area
               const [activity, userName, workArea] = key.split("__");
-              // Get details from the first image in the group (assuming common details for the group)
               const { buildingName, floorName, uploadedAt, workCategoryName } =
                 imgs[0];
               const date = moment(uploadedAt).format("YYYY-MM-DD");
@@ -224,7 +356,6 @@ const ImageGallery = () => {
                       </div>
                     </div>
 
-                    {/* Location and Work Category display */}
                     <div className="location-line">
                       <div>
                         {buildingName} &gt; {floorName} &gt; {workArea} &gt;{" "}
@@ -239,7 +370,6 @@ const ImageGallery = () => {
                   </div>
 
                   <div className="image-group-wrapper">
-                    {/* Left scroll arrow */}
                     <button
                       className="scroll-arrow left-arrow"
                       onClick={() => scrollLeft(key)}
@@ -250,7 +380,6 @@ const ImageGallery = () => {
                       className="image-group-horizontal"
                       ref={(el) => (imageGroupRefs.current[key] = el)}
                     >
-                      {/* Render individual image cards within the group */}
                       {imgs.map((img, idx) => {
                         const hoverDate = moment(img.uploadedAt).format(
                           "YYYY-MM-DD"
@@ -261,9 +390,8 @@ const ImageGallery = () => {
 
                         return (
                           <div
-                            key={img.imageUrl} // Use imageUrl as key if it's unique, otherwise use a unique ID
+                            key={img.imageUrl}
                             className="image-card"
-                            // Pass the entire batch (imgs) and the clicked image's index (idx) to ImagePop
                             onClick={() => openModal(<ImagePop images={imgs} initialIndex={idx} />)}
                             onMouseEnter={() => setHoveredImage(img)}
                             onMouseLeave={() => setHoveredImage(null)}
@@ -271,7 +399,6 @@ const ImageGallery = () => {
                             <div className="image-wrapper">
                               <img src={img.imageUrl} alt={`Image ${idx + 1}`} />
                             </div>
-                            {/* Hover description for image details */}
                             {hoveredImage === img && (
                               <div className="image-hover-description">
                                 <p>
@@ -290,7 +417,6 @@ const ImageGallery = () => {
                         );
                       })}
                     </div>
-                    {/* Right scroll arrow */}
                     <button
                       className="scroll-arrow right-arrow"
                       onClick={() => scrollRight(key)}
@@ -309,7 +435,6 @@ const ImageGallery = () => {
         </div>
       </div>
 
-      {/* Filter drawer section */}
       <div className="filter-drawer-wrapper">
         <button
           className={`filter-button ${isFilterPanelOpen ? "" : "closed-icon"}`}
@@ -318,24 +443,33 @@ const ImageGallery = () => {
         >
           {isFilterPanelOpen ? (
             <>
-              Filter <span>&#10006;</span> {/* X Mark when open */}
+              Filter <span>&#10006;</span>
             </>
           ) : (
-            <span>&#9660;</span> 
+            <span>&#9660;</span>
           )}
         </button>
         <div className={`filter-panel ${isFilterPanelOpen ? "open" : ""}`} ref={filterPanelRef}>
+          {renderFilterCategory("Date Range", [], "dateRange")}
           {renderFilterCategory("Building", buildings, "building")}
           {renderFilterCategory("Floor", floors, "floor")}
           {renderFilterCategory("Work Area", workAreas, "workArea")}
           {renderFilterCategory("Activity", activities, "activity")}
           {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
           {renderFilterCategory("Work Category", workCategories, "workCategory")}
+
+          <div className="filter-actions">
+            <button className="btn btn-secondary btn-xs " onClick={handleClearAllFilters}>
+              Clear All
+            </button>
+            <button className="btn btn-primary btn-xs " onClick={handleApplyFilters}>
+              Apply Filters
+            </button>
+          </div>
         </div>
       </div>
     </div>
   );
 };
 
-export default ImageGallery;
+export default ImageGallery;
-

src/pages/Gallary/ImageGallery.css

@@ -1,25 +1,19 @@
 .gallery-container {
-  display: grid; /* Use CSS Grid for layout */
+  display: grid;
-  /*
-  * MODIFIED: When filter is closed, main content takes 1fr,
-  * and the filter column is just big enough for the small floating button (e.g., 50px).
-  */
   grid-template-columns: 1fr 50px;
-  gap: 0px; /* Gap between main content and filter */
+  gap: 4px;
   padding: 25px;
   font-family: sans-serif;
   height: calc(100vh - 20px);
   box-sizing: border-box;
   background-color: #f7f9fc;
-  transition: grid-template-columns 0.3s ease-in-out; /* Smooth transition for column resizing */
+  transition: grid-template-columns 0.3s ease-in-out;
 }
 
 .gallery-container.filter-panel-open {
-  /* When open, main content shrinks, filter expands to 250px */
   grid-template-columns: 1fr 250px;
 }
 
-/* Main content area (images) - No changes needed here */
 .main-content {
   overflow-y: auto;
   max-height: 100%;
@@ -46,19 +40,17 @@
   background: #888;
 }
 
-/* New: Wrapper for the filter drawer and its button */
 .filter-drawer-wrapper {
   flex-shrink: 0;
   max-height: 100%;
   box-sizing: border-box;
-  position: relative; /* Essential for positioning the filter panel within */
+  position: relative;
-  /* Hides the scrollbar from the wrapper itself, as the panel will handle its own scrolling. */
+  scrollbar-width: none;
-  scrollbar-width: none; /* For Firefox */
+  -ms-overflow-style: none;
-  -ms-overflow-style: none; /* For IE and Edge */
 }
 
 .filter-drawer-wrapper::-webkit-scrollbar {
-  display: none; /* For Chrome, Safari, and Opera */
+  display: none;
 }
 
 .filter-button {
@@ -74,31 +66,26 @@
   justify-content: center;
   align-items: center;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  /* Added padding to transition properties for smoothness */
   transition: background-color 0.2s ease, box-shadow 0.2s ease, width 0.3s ease-in-out, height 0.3s ease-in-out, border-radius 0.3s ease-in-out, padding 0.3s ease-in-out;
-
-  /* Floating / Positioning */
   position: absolute;
   top: 0;
   right: 0;
-  height: 40px; /* Fixed height when closed */
+  height: 40px;
-  width: 40px; /* Fixed width when closed (making it square) */
+  width: 40px;
-  z-index: 100; /* Ensure it stays on top */
+  z-index: 100;
 }
 
-/* When the filter panel is open, the button should match its width and blend with the panel */
 .gallery-container.filter-panel-open .filter-button {
-  width: calc(100% - 16px); /* Match filter-panel width minus its padding (8px on each side) */
+  width: calc(100% - 16px);
-  height: auto; /* Allow height to adjust for text content */
+  height: auto;
-  padding: 8px 12px; /* Restore padding when expanded */
+  padding: 8px 12px;
-  border-radius: 6px 6px 0 0; /* Adjust border-radius to blend with panel below */
+  border-radius: 6px 6px 0 0;
-  justify-content: space-between; /* Space between "Filter" text and "X" icon */
+  justify-content: space-between;
 }
 
-/* Add a class for the button when the panel is closed to show only icon */
 .filter-button.closed-icon {
-  padding: 0; /* Remove padding to make it compact */
+  padding: 0;
-  font-size: 20px; /* Make icon larger when it's just an icon */
+  font-size: 20px;
 }
 
 .filter-button:hover {
@@ -106,9 +93,10 @@
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
-/* The actual panel that contains all filter categories */
 .filter-panel {
-  display: flex; /* Always display as flex to manage children */
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   background-color: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
@@ -116,314 +104,442 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   width: 100%;
   box-sizing: border-box;
-  flex-direction: column;
+  position: absolute;
-  gap: 12px;
+  top: 0;
-  max-height: 0;
+  left: 0;
-  /* Use overflow-y: hidden for the max-height transition to work smoothly */
+  right: 0;
+  bottom: 0;
+  max-height: calc(100% - 40px);
+  padding-top: 37px;
   overflow-y: hidden;
   opacity: 0;
   transform: translateY(-10px);
-  /* Added border-radius to transition properties for smoothness */
   transition: max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out, border-radius 0.3s ease-in-out;
-
-  /* Position it below the button when open */
-  margin-top: 40px; /* Account for the button's fixed height */
 }
 
 .filter-panel.open {
-  max-height: 1000px; /* A value larger than the expected height of content */
+  max-height: calc(100% - 40px);
   opacity: 1;
   transform: translateY(0);
-  /* Remove top radius to blend with button when open */
+  overflow-y: auto;
-  border-top-left-radius: 0;
+  /* padding-bottom: 8px; */
-  border-top-right-radius: 0;
+  /* Adjust padding to accommodate the new buttons */
+  padding-bottom: -1px; /* Enough space for buttons + some padding */
 }
 
 
-/* ... (rest of your CSS remains the same) ... */
 
-/* Individual dropdown sections within the filter panel */
+.dropdown {
+  transition: all 0.3s ease-in-out;
+}
+
 .dropdown-content {
-    display: block !important;
+  display: block;
-    position: static;
+  position: static;
-    background-color: #f9fafb;
+  box-shadow: none;
-    box-shadow: none;
+  padding: 4px 10px;
-    padding: 4px 0;
+  border-radius: 0 0 4px 4px;
-    margin-top: 0;
+  max-height: 150px;
-    border-radius: 0 0 4px 4px;
+  overflow-y: auto;
-    max-height: unset;
+  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
-    overflow-y: visible;
+}
+
+.dropdown.collapsed .dropdown-content {
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  overflow: hidden;
+}
+
+.dropdown-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dropdown-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+.dropdown-content::-webkit-scrollbar-thumb {
+  background: #c0c0c0;
+  border-radius: 10px;
+}
+
+.dropdown-content::-webkit-scrollbar-thumb:hover {
+  background: #a7a7a7;
 }
 
 .dropdown-content label {
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    gap: 6px;
+  gap: 6px;
-    padding: 5px 10px;
+  padding: 5px 0px;
-    font-size: 12px;
+  font-size: 12px;
-    font-weight: 500;
+  font-weight: 500;
-    color: #333;
+  color: #333;
-    cursor: pointer;
+  cursor: pointer;
-    transition: background 0.2s;
+  transition: background 0.2s;
 }
 
 .dropdown-content label:hover {
-    background-color: #eef2ff;
+  background-color: #eef2ff;
 }
 
 .dropdown-content input[type="checkbox"] {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
-    -moz-appearance: none;
+  -moz-appearance: none;
-    appearance: none;
+  appearance: none;
-    width: 16px;
+  width: 16px;
-    height: 16px;
+  height: 16px;
-    border-radius: 3px;
+  border-radius: 3px;
-    border: 1px solid #c7d2fe;
+  border: 1px solid #c7d2fe;
-    background-color: #fff;
+  background-color: #fff;
-    cursor: pointer;
+  cursor: pointer;
-    position: relative;
+  position: relative;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
-    transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
 .dropdown-content input[type="checkbox"]:checked {
-    background-color: #6366f1;
+  background-color: #6366f1;
-    border-color: #6366f1;
+  border-color: #6366f1;
 }
 
 .dropdown-content input[type="checkbox"]:checked::after {
-    content: '✔';
+  content: '✔';
-    font-size: 10px;
+  font-size: 10px;
-    color: white;
+  color: white;
-    position: absolute;
+  position: absolute;
 }
 
-
 .dropdown-header {
-    display: flex;
+  display: flex;
-    justify-content: space-between;
+  justify-content: space-between;
-    align-items: center;
+  align-items: center;
-    padding: 0 10px 5px;
+  padding: 8px 10px;
-    border-bottom: 1px solid #eee;
+  background-color: #eef2ff;
-    margin-bottom: 6px;
+  border-bottom: 1px solid #c7d2fe;
+  font-weight: bold;
+  font-size: 13px;
+  color: #333;
+  cursor: pointer;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: background-color 0.3s ease, border-bottom 0.3s ease;
+}
+
+.dropdown.collapsed .dropdown-header {
+  border-bottom: none;
+  border-radius: 4px;
+  box-shadow: none;
 }
 
 .clear-button {
-    font-size: 10px;
+  font-size: 10px;
-    background: none;
+  background: none;
-    border: none;
+  border: none;
-    color: #6366f1;
+  color: #6366f1;
-    cursor: pointer;
+  cursor: pointer;
-    padding: 3px 6px;
+  padding: 3px 6px;
-    border-radius: 4px;
+  border-radius: 4px;
-    transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
 }
 
 .clear-button:hover {
-    background-color: #eef2ff;
+  background-color: #eef2ff;
+}
+
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle-icon {
+  font-size: 10px;
+  color: #6366f1;
+  transition: transform 0.2s ease;
+}
+
+.dropdown .toggle-icon {
+  transform: rotate(0deg);
+}
+
+.dropdown.collapsed .toggle-icon {
+  transform: rotate(-90deg);
+}
+
+.date-range-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 5px 0;
+}
+
+.date-range-inputs label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #333;
+}
+
+.date-input {
+  flex-grow: 1;
+  padding: 6px 8px;
+  border: 1px solid #c7d2fe;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #333;
+  background-color: #fff;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.date-input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
 }
 
-/* --- Image Card Section --- */
 .grouped-section {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
-    border: 1px solid #e0e0e0;
+  border: 1px solid #e0e0e0;
-    border-radius: 8px;
+  border-radius: 8px;
-    padding: 10px;
+  padding: 10px;
-    background-color: #fff;
+  background-color: #fff;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .group-heading {
-    display: flex;
+  display: flex;
-    justify-content: space-between;
+  justify-content: space-between;
-    align-items: flex-start;
+  align-items: flex-start;
-    margin-bottom: 3px;
+  margin-bottom: 3px;
-    font-size: 12px;
+  font-size: 12px;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
-    padding-bottom: 8px;
+  padding-bottom: 8px;
-    border-bottom: 1px dashed #eee;
+  border-bottom: 1px dashed #eee;
 }
 
 .group-heading > div {
-    margin-right: 15px;
+  margin-right: 15px;
 }
 
 .datetime-line {
-    font-size: 12px;
+  font-size: 12px;
-    color: #777;
+  color: #777;
-    margin-top: 0px;
+  margin-top: 0px;
-
 }
 
 .location-line {
-    font-weight: 600;
+  font-weight: 600;
-    font-size: 12px;
+  font-size: 12px;
-    color: #555;
+  color: #555;
-    text-align: right; /* Keep this if you want the whole block aligned right */
+  text-align: right;
-    display: flex; /* Use flexbox to manage children's layout */
+  display: flex;
-    flex-direction: column; /* Stack children vertically */
+  flex-direction: column;
-    align-items: flex-end; /* Align items to the end (right) if text-align: right is desired */
+  align-items: flex-end;
-}
+}
-.work-category-display {
+
-    /* Basic styling for the work category, if needed */
+.work-category-display {
-    margin-top: 4px; /* Add some space above it */
+  margin-top: 4px;
-    padding: 2px 6px;
+  padding: 2px 6px;
-    /* A light background for better visibility */
+  border-radius: 5px;
-    border-radius: 5px;
+  font-size: 12px;
-    font-size: 12px;
+  color: #555;
-     /* Override the parent's bold if desired */
-    color: #555;
 }
 
-/* New: Wrapper for image group and arrows */
 .image-group-wrapper {
-    position: relative;
+  position: relative;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    padding: 0 0px;
+  padding: 0 0px;
 }
 
 .image-group-horizontal {
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    flex-wrap: nowrap;
+  flex-wrap: nowrap;
-    overflow-x: hidden;
+  overflow-x: hidden;
-    gap: 3px;
+  gap: 3px;
-    padding-bottom: 8px;
+  padding-bottom: 8px;
-    -webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
-    width: 100%;
+  width: 100%;
 }
+
 .scroll-arrow {
-    background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
-    color: white;
+  color: white;
-    border: none;
+  border: none;
-    border-radius: 50%; /* This makes it a circle */
+  border-radius: 50%;
-    width: 30px; /* Ensure width and height are equal */
+  width: 30px;
-    height: 44px; /* Ensure width and height are equal */
+  height: 44px;
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
-    cursor: pointer;
+  cursor: pointer;
-    font-size: 18px;
+  font-size: 18px;
-    z-index: 10;
+  z-index: 10;
-    position: absolute;
+  position: absolute;
-    top: 50%;
+  top: 50%;
-    transform: translateY(-50%);
+  transform: translateY(-50%);
-    opacity: 0;
+  opacity: 0;
-    transition: opacity 0.3s ease, background-color 0.2s ease;
+  transition: opacity 0.3s ease, background-color 0.2s ease;
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .image-group-wrapper:hover .scroll-arrow {
-    opacity: 1;
+  opacity: 1;
-    pointer-events: auto;
+  pointer-events: auto;
 }
 
 .scroll-arrow:hover {
-    background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(0, 0, 0, 0.7);
 }
 
 .left-arrow {
-    left: 5px;
+  left: 5px;
 }
 
 .right-arrow {
-    right: 5px;
+  right: 5px;
 }
 
 .image-card {
-    width: 150px;
+  width: 150px;
-    border: 1px solid #ddd;
+  border: 1px solid #ddd;
-    border-radius: 8px;
+  border-radius: 8px;
-    background: #fff;
+  background: #fff;
-    cursor: pointer;
+  cursor: pointer;
-    overflow: hidden;
+  overflow: hidden;
-    flex-shrink: 0;
+  flex-shrink: 0;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
-    position: relative;
+  position: relative;
 }
 
 hr {
-    margin: 0rem 0;
+  display: none;
-    color: var(--bs-border-color);
-    border: 0;
-    border-top: var(--bs-border-width) solid;
-    opacity: 1;
 }
 
 .image-card:hover {
-    transform: translateY(-2px) scale(1.03);
+  transform: translateY(-2px) scale(1.03);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }
 
 .image-wrapper img {
-    width: 100%;
+  width: 100%;
-    height: 100px;
+  height: 100px;
-    object-fit: cover;
+  object-fit: cover;
-    display: block;
+  display: block;
-    border-radius: 8px 8px 0 0;
+  border-radius: 8px 8px 0 0;
 }
 
-/* NEW: Styles for the hover description */
 .image-hover-description {
-    position: absolute;
+  position: absolute;
-    bottom: 0;
+  bottom: 0;
-    left: 0;
+  left: 0;
-    width: 100%;
+  width: 100%;
-    background-color: rgba(0, 0, 0, 0.75);
+  background-color: rgba(0, 0, 0, 0.75);
-    color: white;
+  color: white;
-    padding: 5px 8px;
+  padding: 5px 8px;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    font-size: 11px;
+  font-size: 11px;
-    line-height: 1.4;
+  line-height: 1.4;
-    text-align: left;
+  text-align: left;
-    opacity: 0;
+  opacity: 0;
-    transform: translateY(100%);
+  transform: translateY(100%);
-    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
-    border-bottom-left-radius: 8px;
+  border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
+  border-bottom-right-radius: 8px;
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .image-card:hover .image-hover-description {
-    opacity: 1;
+  opacity: 1;
-    transform: translateY(0);
+  transform: translateY(0);
 }
 
 .image-hover-description p {
-    margin: 0;
+  margin: 0;
-    white-space: nowrap;
+  white-space: nowrap;
-    overflow: hidden;
+  overflow: hidden;
-    text-overflow: ellipsis;
+  text-overflow: ellipsis;
 }
 
 .spinner-container {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
-    min-height: 200px;
+  min-height: 200px;
 }
 
 .spinner {
-    border: 6px solid #f3f3f3;
+  border: 6px solid #f3f3f3;
-    border-top: 6px solid #6658f6;
+  border-top: 6px solid #6658f6;
-    border-radius: 50%;
+  border-radius: 50%;
-    width: 40px;
+  width: 40px;
-    height: 40px;
+  height: 40px;
-    animation: spin 0.8s linear infinite;
+  animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
-    0% {
+  0% {
-        transform: rotate(0deg);
+    transform: rotate(0deg);
-    }
+  }
-    100% {
+  100% {
-        transform: rotate(360deg);
+    transform: rotate(360deg);
-    }
+  }
 }
 
+/* New styles for filter action buttons */
+.filter-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: auto; /* Pushes buttons to the bottom */
+  padding-top: 10px;
+  border-top: 1px solid #e5e7eb;
+  background-color: #fff;
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  padding-bottom: 0px;
+}
 
+.apply-filters-button,
+.clear-all-button {
+  padding: 8px 15px;
+  border-radius: 5px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+  flex: 1; /* Make buttons take equal width */
+  margin: 0 4px; /* Add some spacing between them */
+}
+
+.apply-filters-button {
+  /* background-color: #6366f1;
+  color: white; */
+  border: none;
+}
+
+.apply-filters-button:hover {
+  background-color: #4f46e5;
+  /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
+}
+
+.clear-all-button {
+  border: 1px solid #cbd5e1;
+}
+
+.clear-all-button:hover {
+  background-color: #e2e8f0;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}

src/pages/Gallary/ImageGalleryAPI.jsx

@@ -2,6 +2,9 @@ import { api } from "../../utils/axiosClient";
 
 export const ImageGalleryAPI = {
 
-    ImagesGet: (projectId) =>
+    ImagesGet: (projectId, filter) => {
-    api.get(`/api/image/images/${projectId}`),
+        const payloadJsonString = JSON.stringify(filter);
+        console.log("Applying filters with payload JSON string:", payloadJsonString);
+        return api.get(`/api/image/images/${projectId}?filter=${payloadJsonString}`)
+    },
 }