Auto-close Filter Panel on Outside Click in Image Gallery

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -145,7 +145,7 @@ const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }
     handleGroupBy,
     selectedGroup.id,
     appliedStatusId,
-    selectedProjectId, // ✅ Added dependency
+    selectedProjectId, 
   ]);
 
 

src/components/gallary/GalleryFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useImageGalleryFilter } from "../../hooks/useImageGallery";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { FormProvider, useForm } from "react-hook-form";
@@ -8,6 +8,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultGalleryFilterValue, gallerySchema } from "./GallerySchema";
 import SelectMultiple from "../common/SelectMultiple";
 import { localToUtc } from "../../utils/appUtils";
+import { useLocation } from "react-router-dom";
 
 const GalleryFilterPanel = ({ onApply }) => {
   const selectedProject = useSelectedProject();
@@ -46,6 +47,11 @@ const GalleryFilterPanel = ({ onApply }) => {
     // closePanel()
   }
 
+  const location = useLocation();
+    useEffect(() => {
+      closePanel();
+    }, [location]);
+
   if (isLoading) return <div>Loading....</div>;
   if (isError) return <div>{error.message}</div>;
   return (