src/components/Documents/DocumentFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useDocumentFilterEntities } from "../../hooks/useDocument";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -9,11 +9,9 @@ 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);
@@ -54,13 +52,6 @@ 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>;
@@ -72,8 +63,6 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
     documentTag = [],
   } = data?.data || {};
 
-
-
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -84,16 +73,18 @@ 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 ${isUploadedAt ? "active btn-secondary text-white" : ""
-                  }`}
+                className={`btn px-2 py-1 rounded-0 text-tiny ${
+                  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 ${!isUploadedAt ? "active btn-secondary text-white" : ""
-                  }`}
+                className={`btn px-2 py-1 rounded-0 text-tiny ${
+                  !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, { useEffect } from "react";
+import React from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   contactsFilter,
@@ -8,14 +8,11 @@ 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,
@@ -33,24 +30,14 @@ const ContactFilterPanel = ({ onApply, clearFilter }) => {
   };
 
   const handleClose = () => {
-    reset(defaultContactFilter);
-    onApply(defaultContactFilter);
+    reset(defaultContactFilter);         
+    onApply(defaultContactFilter);       
     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, { useEffect } from "react";
+import React from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
   defaultNotesFilter,
@@ -8,18 +8,11 @@ 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,
@@ -38,7 +31,7 @@ const NoteFilterPanel = ({ onApply, clearFilter }) => {
 
   const handleClose = () => {
     reset(defaultNotesFilter);
-    onApply(defaultNotesFilter);
+    onApply(defaultNotesFilter); 
     closePanel();
   };