Changes in Image Gallery creating changing the filter icon adding box at the time of Work Category.

src/components/Directory/NoteCardDirectoryEditable.jsx

@@ -184,7 +184,7 @@ const NoteCardDirectoryEditable = ({
               <i className="bx bx-loader-alt bx-spin text-primary"></i>
             ) : (
               <i
-                className="bx bx-recycle me-2 text-success cursor-pointer"
+                className="bx bx-recycle me-2 text-primary cursor-pointer"
                 onClick={handleRestore}
                 title="Restore"
               ></i>

src/data/menuData.json

@@ -46,11 +46,7 @@
                         "available": true,
                         "link": "/activities/reports"
                     },
-                    {
-                        "text": "Image Gallary",
-                        "available": true,
-                        "link": "/activities/gallary"
-                    },
+                   
                     {
                         "text": "Daily Expenses",
                         "available": true,
@@ -63,6 +59,12 @@
                 "icon": "bx bx-group",
                 "available": true,
                 "link": "/directory"
+            },
+             {
+                "text": "Image Gallary",
+                "icon": "bx bx-images",
+                "available": true,
+                "link": "/gallary"
             },
             {
                 "text": "Administration",

src/pages/Directory/DirectoryPageHeader.jsx

@@ -278,7 +278,7 @@ const DirectoryPageHeader = ({
             </div>
             <hr className="my-0 mb-2" style={{ borderTop: "1px solid #dee2e6" }} />
 
-            <div className="row mx-0 px-0 align-items-center mt-0">
+            <div className="row mx-0 px-0 align-items-center mt-2">
                 <div className="col-12 col-md-6 mb-2 px-5 d-flex align-items-center gap-4">
 
                     <input

src/pages/Gallary/ImageGallary.jsx

@@ -219,8 +219,6 @@ const ImageGallery = () => {
       endDate: null,
     };
     setAppliedFilters(initialStateApplied);
-
-    setIsFilterPanelOpen(false);
   }, []);
 
   const filteredImages = images.filter((img) => {
@@ -301,7 +299,6 @@ const ImageGallery = () => {
                 Clear
               </button>
             )}
-            {/* Add the collapse/expand icon */}
           <span className="collapse-icon">
             {collapsedFilters[type] ? '+' : '-'}
           </span>
@@ -310,7 +307,6 @@ const ImageGallery = () => {
       {!collapsedFilters[type] && (
         <div className="dropdown-content">
           {type === "dateRange" ? (
-            // The DateRangePicker will be rendered outside this function, at the end of the filter panel
             null
           ) : (
             items.map((item) => {
@@ -377,12 +373,14 @@ const ImageGallery = () => {
 
                     <div className="location-line">
                       <div>
-                        {buildingName} &gt; {floorName} &gt; {workArea} &gt;{" "}
-                        {activity}
+                        {buildingName} &gt; {floorName} &gt; <strong> {workArea} &gt;{" "}
+                        {activity}</strong>
                       </div>
                       {workCategoryName && (
                         <div className="work-category-display ms-2">
+                          <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
                             {workCategoryName}
+                          </span>
                         </div>
                       )}
                     </div>
@@ -453,16 +451,18 @@ const ImageGallery = () => {
 
       <div className="filter-drawer-wrapper">
         <button
-          className={`filter-button ${isFilterPanelOpen ? "" : "closed-icon"}`}
+          className={`filter-button btn-primary ${isFilterPanelOpen ? "" : "closed-icon"}`}
           onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
           ref={filterButtonRef}
         >
           {isFilterPanelOpen ? (
             <>
-              Filter <span>&#10006;</span>
+              Filter <span className="ms-1">&#10006;</span> {/* Added ms-1 for spacing */}
             </>
           ) : (
-            <span>&#9660;</span>
+            <>
+              <i className="fa-solid fa-filter ms-1 fs-5"></i>
+            </>
           )}
         </button>
         <div className={`filter-panel ${isFilterPanelOpen ? "open" : ""}`} ref={filterPanelRef}>
@@ -478,10 +478,10 @@ const ImageGallery = () => {
               <div className="datepicker" >
                 <DateRangePicker
                   onRangeChange={setDateRange}
-                  defaultStartDate={selectedFilters.startDate || yesterday} // Use selected date or yesterday as default
-                  defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')} // Use selected date or today as default
-                  startDate={selectedFilters.startDate} // Pass current selected start date
-                  endDate={selectedFilters.endDate} // Pass current selected end date
+                  defaultStartDate={selectedFilters.startDate || yesterday}
+                  defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
+                  startDate={selectedFilters.startDate}
+                  endDate={selectedFilters.endDate}
                 />
               </div>
             )}
@@ -493,9 +493,6 @@ const ImageGallery = () => {
           {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
           {renderFilterCategory("Work Category", workCategories, "workCategory")}
 
-          {/* DateRangePicker at the end */}
-          
-
           <div className="filter-actions">
             <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
               Clear All

src/pages/Gallary/ImageGallery.css

@@ -55,7 +55,6 @@
 }
 
 .filter-button {
-  background-color: #6366f1;
   color: white;
   padding: 8px 12px;
   font-size: 14px;
@@ -368,7 +367,6 @@
 }
 
 .location-line {
-  font-weight: 600;
   font-size: 12px;
   color: #555;
   text-align: right;
@@ -455,14 +453,14 @@
   position: relative;
 }
 
-hr {
-  display: none;
-}
-
 .image-card:hover {
   transform: translateY(-2px) scale(1.03);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }
+hr {
+  display: none;
+}
+
 
 .image-wrapper img {
   width: 100%;
@@ -532,43 +530,14 @@ hr {
 
 .filter-actions {
   display: flex;
-  justify-content: space-between;
+    justify-content: end;
     margin-top: auto;
     padding-top: 10px;
     position: sticky;
     bottom: 0;
     z-index: 10;
     padding-bottom: 5px;
-}
-
-.btn {
-  padding: 8px 15px;
-  border-radius: 5px;
-  font-size: 13px;
-  cursor: pointer;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease;
-  flex: 1;
-  margin: 0 4px;
-}
-
-.btn-primary {
-  background-color: #6366f1;
-  color: white;
-  border: none;
-}
-
-.btn-primary:hover {
-  background-color: #4f46e5;
-}
-
-.btn-secondary {
-  border: 1px solid #cbd5e1;
-  background-color: #fff;
-  color: #333;
-}
-
-.btn-secondary:hover {
-  background-color: #e2e8f0;
+    gap: 8px;
 }
 
 .datepicker {

src/router/AppRoutes.jsx

@@ -75,7 +75,7 @@ const router = createBrowserRouter(
             { path: "/activities/records/:projectId?", element: <DailyTask /> },
             { path: "/activities/task", element: <TaskPlannng /> },
             { path: "/activities/reports", element: <Reports /> },
-            { path: "/activities/gallary", element: <ImageGallary /> },
+            { path: "/gallary", element: <ImageGallary /> },
             { path: "/masters", element: <MasterPage /> },
             { path: "/help/support", element: <Support /> },
             { path: "/help/docs", element: <Documentation /> },