src/components/Expenses/ExpenseFilterPanel.jsx

@@ -13,13 +13,14 @@ 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" },
@@ -29,7 +30,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     { id: "expensesType", name: "Expense Type" },
     { id: "createdAt", name: "Submitted Date" }
   ].sort((a, b) => a.name.localeCompare(b.name));
-  }, []);
+}, []);
 
 
   const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
@@ -71,12 +72,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     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 (