src/components/Expenses/ExpenseFilterPanel.jsx

@@ -13,14 +13,13 @@ 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);
   const { data, isLoading,isError,error,isFetching , isFetched} = useExpenseFilter();
 
-const groupByList = useMemo(() => {
+  const groupByList = useMemo(() => {
     return [
       { id: "transactionDate", name: "Transaction Date" },
       { id: "status", name: "Status" },
@@ -30,7 +29,7 @@ const groupByList = useMemo(() => {
       { id: "expensesType", name: "Expense Type" },
     { id: "createdAt", name: "Submitted Date" }
     ].sort((a, b) => a.name.localeCompare(b.name));
-}, []);
+  }, []);
 
 
   const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
@@ -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 (