src/components/Expenses/ExpenseFilterPanel.jsx

@@ -13,8 +13,7 @@ import { useSelector } from "react-redux";
 import moment from "moment";
 import { useExpenseFilter } from "../../hooks/useExpense";
 import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
-
-
+import { useLocation } from "react-router-dom";
 
 const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
   const selectedProjectId = useSelector((store) => store.localVariables.projectId);
@@ -72,6 +71,12 @@ const groupByList = useMemo(() => {
     closePanel();
   };
 
+  // ✅ Close popup when navigating to another component
+  const location = useLocation();
+  useEffect(() => {
+    closePanel();
+  }, [location]);
+
   if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
   if(isError && isFetched) return <div>Something went wrong Here- {error.message} </div>
   return (