From c88b670a6bb26b8e57ec5e78a69a543794ef9e10 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 30 Oct 2025 11:31:18 +0530
Subject: [PATCH] Auto-close Filter Panel on Outside Click in Image Gallery

---
 src/components/Expenses/ExpenseFilterPanel.jsx | 2 +-
 src/components/gallary/GalleryFilterPanel.jsx  | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Expenses/ExpenseFilterPanel.jsx b/src/components/Expenses/ExpenseFilterPanel.jsx
index 3f0085c3..0b91f3ef 100644
--- a/src/components/Expenses/ExpenseFilterPanel.jsx
+++ b/src/components/Expenses/ExpenseFilterPanel.jsx
@@ -145,7 +145,7 @@ const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }
     handleGroupBy,
     selectedGroup.id,
     appliedStatusId,
-    selectedProjectId, // ✅ Added dependency
+    selectedProjectId, 
   ]);
 
 
diff --git a/src/components/gallary/GalleryFilterPanel.jsx b/src/components/gallary/GalleryFilterPanel.jsx
index d71625a3..0982118f 100644
--- a/src/components/gallary/GalleryFilterPanel.jsx
+++ b/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 (