Filter Sidebar Should Auto-Close When Navigating to Another Page

src/components/Documents/DocumentFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDocumentFilterEntities } from "../../hooks/useDocument";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -9,9 +9,11 @@ import {
 import { DateRangePicker1 } from "../common/DateRangePicker";
 import SelectMultiple from "../common/SelectMultiple";
 import moment from "moment";
+import { useLocation } from "react-router-dom";
 
 const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
   const [resetKey, setResetKey] = useState(0);
+  const location = useLocation();
 
   const { data, isError, isLoading, error } =
     useDocumentFilterEntities(entityTypeId);
@@ -52,6 +54,13 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
     closePanel();
   };
 
+  //  Close popup when navigating to another component
+  useEffect(() => {
+    return () => {
+      closePanel();
+    };
+  }, []);
+
   if (isLoading) return <div>Loading...</div>;
   if (isError)
     return <div>Error: {error?.message || "Something went wrong!"}</div>;
@@ -63,6 +72,8 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
     documentTag = [],
   } = data?.data || {};
 
+
+
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -73,18 +84,16 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
             <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
               <button
                 type="button"
-                className={`btn px-2 py-1 rounded-0 text-tiny ${
+                className={`btn px-2 py-1 rounded-0 text-tiny ${isUploadedAt ? "active btn-secondary text-white" : ""
-                  isUploadedAt ? "active btn-secondary text-white" : ""
+                  }`}
-                }`}
                 onClick={() => setValue("isUploadedAt", true)}
               >
                 Uploaded On
               </button>
               <button
                 type="button"
-                className={`btn px-2 py-1 rounded-0 text-tiny ${
+                className={`btn px-2 py-1 rounded-0 text-tiny ${!isUploadedAt ? "active btn-secondary text-white" : ""
-                  !isUploadedAt ? "active btn-secondary text-white" : ""
+                  }`}
-                }`}
                 onClick={() => setValue("isUploadedAt", false)}
               >
                 Updated On

src/pages/Directory/ContactFilterPanel.jsx

@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
+import React, { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   contactsFilter,
@@ -8,11 +8,14 @@ import {
 import { useContactFilter } from "../../hooks/useDirectory";
 import { ExpenseFilterSkeleton } from "../../components/Expenses/ExpenseSkeleton";
 import SelectMultiple from "../../components/common/SelectMultiple";
+import { useLocation } from "react-router-dom";
 
 const ContactFilterPanel = ({ onApply, clearFilter }) => {
   const { data, isError, isLoading, error, isFetched, isFetching } =
     useContactFilter();
 
+  const location = useLocation();
+
   const methods = useForm({
     resolver: zodResolver(contactsFilter),
     defaultValues: defaultContactFilter,
@@ -35,9 +38,19 @@ const ContactFilterPanel = ({ onApply, clearFilter }) => {
     closePanel();
   };
 
+
+  useEffect(() => {
+    return () => {
+      closePanel();
+    };
+  }, []);
+
   if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
   if (isError && isFetched)
     return <div>Something went wrong Here- {error.message} </div>;
+
+
+
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">

src/pages/Directory/NoteFilterPanel.jsx

@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
+import React, { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   defaultNotesFilter,
@@ -8,11 +8,18 @@ import {
 import { useContactFilter, useNoteFilter } from "../../hooks/useDirectory";
 import { ExpenseFilterSkeleton } from "../../components/Expenses/ExpenseSkeleton";
 import SelectMultiple from "../../components/common/SelectMultiple";
+import { useLocation } from "react-router-dom";
 
 const NoteFilterPanel = ({ onApply, clearFilter }) => {
   const { data, isError, isLoading, error, isFetched, isFetching } =
     useNoteFilter();
 
+  useEffect(() => {
+    return () => {
+      closePanel();
+    };
+  }, []);
+
   const methods = useForm({
     resolver: zodResolver(notesFilter),
     defaultValues: defaultNotesFilter,