fixed filter button of image galllary

src/pages/Gallary/ImageGallary.jsx

@@ -212,7 +212,7 @@ const ImageGallery = () => {
         map.set(id, name);
       }
     });
-    return Array.from(map.entries());
+    return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
   }, [allImagesData]);
 
   const getUniqueUploadedByUsers = useCallback(() => {
@@ -227,7 +227,7 @@ const ImageGallery = () => {
         }
       });
     });
-    return Array.from(uniqueUsersMap.entries());
+   return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
   }, [allImagesData]);
 
   const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
@@ -365,7 +365,7 @@ const ImageGallery = () => {
   }, []);
 
   const renderFilterCategory = (label, items, type) => (
-    <div className={`dropdown ${collapsedFilters[type] ? "collapsed" : ""}`}>
+    <div className={`dropdown my-2 ${collapsedFilters[type] ? "collapsed" : ""}`}>
       <div className="dropdown-header" onClick={() => toggleCollapse(type)}>
         <strong>{label}</strong>
         <div className="header-controls">
@@ -595,6 +595,14 @@ const ImageGallery = () => {
             aria-label="Close"
           ></button>
         </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-primary btn-xs" onClick={handleApplyFilters}>
+              Apply Filters
+            </button>
+          </div>
         <div className="offcanvas-body d-flex flex-column">
           {renderFilterCategory("Date Range", [], "dateRange")}
           {renderFilterCategory("Building", buildings, "building")}
@@ -604,14 +612,7 @@ const ImageGallery = () => {
           {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
           {renderFilterCategory("Work Category", workCategories, "workCategory")}
 
-          <div className="filter-actions mt-auto">
-            <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>

src/pages/Gallary/ImageGallery.css

@@ -3,9 +3,7 @@
   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;
 }
 
@@ -67,8 +65,9 @@
   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;
   position: absolute;
-  top: 250px;
+  top: 150px;
   right: 0;
+  position: fixed;
   height: 40px;
   width: 40px;
   z-index: 100;
@@ -138,7 +137,7 @@
   border-radius: 0 0 4px 4px;
   max-height: 150px;
   /* Default max-height for scrollable dropdowns */
-  overflow-y: auto;
+
   /* Default overflow for scrollable dropdowns */
   transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
 }

src/utils/dateUtils.jsx

@@ -20,12 +20,12 @@ export const getDateDifferenceInDays = (startDate, endDate) => {
   return differenceInDays;
 };
 
-export const formatDate = (date) => {
-  if (!date) return ""; // Return an empty string if no date
-  const dateObj = new Date(date);
-  // return dateObj.toISOString().split("T")[0];
-  return dateObj.toLocaleDateString('en-CA'); // Get the date in YYYY-MM-DD format
-};
+// export const formatDate = (date) => {
+//   if (!date) return ""; // Return an empty string if no date
+//   const dateObj = new Date(date);
+//   // return dateObj.toISOString().split("T")[0];
+//   return dateObj.toLocaleDateString('en-CA'); // Get the date in YYYY-MM-DD format
+// };
 
 export const convertShortTime = (dateString) => {
   const date = new Date(dateString);
@@ -61,3 +61,23 @@ export const checkIfCurrentDate = (dateString) => {
 
   return currentDate.getTime() === inputDate.getTime();
 };
+function utcToLocalTime(utcTime) {
+  // Convert string to Date if needed
+  const utcDate = typeof utcTime === 'string' ? new Date(utcTime) : utcTime;
+  
+  return new Date(utcDate.getTime());
+}
+
+export const formatDate =(utcTime, options = {}) =>{
+  const localDate = utcToLocalTime(utcTime);
+  
+  const defaultOptions = {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    ...options
+  };
+  
+  return localDate.toLocaleDateString('en-GB', defaultOptions);
+}
+