src/components/Expenses/ExpenseFilterPanel.jsx

@@ -13,24 +13,23 @@ 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 [
+    return [
-    { id: "transactionDate", name: "Transaction Date" },
+      { id: "transactionDate", name: "Transaction Date" },
-    { id: "status", name: "Status" },
+      { id: "status", name: "Status" },
-    { id: "submittedBy", name: "Submitted By" },
+      { id: "submittedBy", name: "Submitted By" },
-    { id: "project", name: "Project" },
+      { id: "project", name: "Project" },
-    { id: "paymentMode", name: "Payment Mode" },
+      { id: "paymentMode", name: "Payment Mode" },
-    { id: "expensesType", name: "Expense Type" },
+      { id: "expensesType", name: "Expense Type" },
     { id: "createdAt", name: "Submitted Date" }
-  ].sort((a, b) => a.name.localeCompare(b.name));
+    ].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 (
@@ -162,21 +167,21 @@ const groupByList = useMemo(() => {
               </div>
             </div>
           </div>
-            <div className="mb-2 text-start ">
+          <div className="mb-2 text-start ">
         <label htmlFor="groupBySelect" className="form-label">Group By :</label>
-        <select
+            <select
-          id="groupBySelect"
+              id="groupBySelect"
-          className="form-select form-select-sm"
+              className="form-select form-select-sm"
-          value={selectedGroup?.id || ""}
+              value={selectedGroup?.id || ""}
-          onChange={handleGroupChange}
+              onChange={handleGroupChange}
-        >
+            >
-          {groupByList.map((group) => (
+              {groupByList.map((group) => (
-            <option key={group.id} value={group.id}>
+                <option key={group.id} value={group.id}>
-              {group.name}
+                  {group.name}
-            </option>
+                </option>
-          ))}
+              ))}
-        </select>
+            </select>
-      </div>
+          </div>
 
           <div className="d-flex justify-content-end py-3 gap-2">
             <button