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) => {
@@ -278,16 +276,16 @@ const ImageGallery = () => {
         <strong>{label}</strong>
         <div className="header-controls">
           {type === "dateRange" && (selectedFilters.startDate || selectedFilters.endDate) && (
-              <button
-                className="clear-button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setSelectedFilters((prev) => ({ ...prev, startDate: "", endDate: "" }));
-                }}
-              >
-                Clear
-              </button>
-            )}
+            <button
+              className="clear-button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setSelectedFilters((prev) => ({ ...prev, startDate: "", endDate: "" }));
+              }}
+            >
+              Clear
+            </button>
+          )}
           {type !== "dateRange" &&
             selectedFilters[type] &&
             selectedFilters[type].length > 0 && (
@@ -301,16 +299,14 @@ const ImageGallery = () => {
                 Clear
               </button>
             )}
-            {/* Add the collapse/expand icon */}
-            <span className="collapse-icon">
-                {collapsedFilters[type] ? '+' : '-'}
-            </span>
+          <span className="collapse-icon">
+            {collapsedFilters[type] ? '+' : '-'}
+          </span>
         </div>
       </div>
       {!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">
-                          {workCategoryName}
+                          <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
+                            {workCategoryName}
+                          </span>
                         </div>
                       )}
                     </div>
@@ -453,35 +451,37 @@ 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}>
-            <div className={`dropdown ${collapsedFilters.dateRange ? 'collapsed' : ''}`}>
+          <div className={`dropdown ${collapsedFilters.dateRange ? 'collapsed' : ''}`}>
             <div className="dropdown-header" onClick={() => toggleCollapse('dateRange')}>
               <strong>Date Range</strong>
 
-                <span className="collapse-icon">
-                    {collapsedFilters.dateRange ? '+' : '-'}
-                </span>
+              <span className="collapse-icon">
+                {collapsedFilters.dateRange ? '+' : '-'}
+              </span>
             </div>
             {!collapsedFilters.dateRange && (
               <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,14 +493,11 @@ 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}>
+            <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
               Clear All
             </button>
-            <button className="btn btn-primary btn-xs " onClick={handleApplyFilters}>
+            <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
               Apply Filters
             </button>
           </div>

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;
-  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;
+    justify-content: end;
+    margin-top: auto;
+    padding-top: 10px;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    padding-bottom: 5px;
+    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 /> },