From f19b9037e7a5b27520a23e724f0c512b03b78361 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 7 Nov 2025 12:56:20 +0530
Subject: [PATCH] When document filter is now auto closed at we are go to next
 tab or component.

---
 .../Documents/DocumentFilterPanel.jsx         | 420 +++++++++---------
 1 file changed, 213 insertions(+), 207 deletions(-)

diff --git a/src/components/Documents/DocumentFilterPanel.jsx b/src/components/Documents/DocumentFilterPanel.jsx
index edc613e1..04f54956 100644
--- a/src/components/Documents/DocumentFilterPanel.jsx
+++ b/src/components/Documents/DocumentFilterPanel.jsx
@@ -13,230 +13,236 @@ import { useParams } from "react-router-dom";
 
 const DocumentFilterPanel = forwardRef(
   ({ entityTypeId, onApply, setFilterdata }, ref) => {
-  const [resetKey, setResetKey] = useState(0);
-  const { status } = useParams();
+    const [resetKey, setResetKey] = useState(0);
+    const { status } = useParams();
 
-  const { data, isError, isLoading, error } =
-    useDocumentFilterEntities(entityTypeId);
+    const { data, isError, isLoading, error } =
+      useDocumentFilterEntities(entityTypeId);
 
-  //changes
+    useEffect(() => {
+      return () => {
+        closePanel();
+      };
+    }, []);
 
-  const dynamicDocumentFilterDefaultValues = useMemo(() => {
-    return {
-      ...DocumentFilterDefaultValues,
-      uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
-      documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
-      documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
-      documentTagIds: DocumentFilterDefaultValues.documentTagIds || [],
-      startDate: DocumentFilterDefaultValues.startDate,
-      endDate: DocumentFilterDefaultValues.endDate,
+    //changes
+
+    const dynamicDocumentFilterDefaultValues = useMemo(() => {
+      return {
+        ...DocumentFilterDefaultValues,
+        uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
+        documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
+        documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
+        documentTagIds: DocumentFilterDefaultValues.documentTagIds || [],
+        startDate: DocumentFilterDefaultValues.startDate,
+        endDate: DocumentFilterDefaultValues.endDate,
+      };
+
+    }, [status]);
+
+    const methods = useForm({
+      resolver: zodResolver(DocumentFilterSchema),
+      defaultValues: dynamicDocumentFilterDefaultValues,
+    });
+
+    const { handleSubmit, reset, setValue, watch } = methods;
+
+    // Watch values from form
+    const isUploadedAt = watch("isUploadedAt");
+    const isVerified = watch("isVerified");
+
+    // Close the offcanvas (bootstrap specific)
+    const closePanel = () => {
+      document.querySelector(".offcanvas.show .btn-close")?.click();
     };
 
-  }, [status]);
+    useImperativeHandle(ref, () => ({
+      resetFieldValue: (name, value) => {
+        if (value !== undefined) {
+          setValue(name, value);
+        } else {
+          reset({ ...methods.getValues(), [name]: DocumentFilterDefaultValues[name] });
+        }
+      },
+      getValues: methods.getValues, // optional, to read current filter state
+    }));
 
-  const methods = useForm({
-    resolver: zodResolver(DocumentFilterSchema),
-    defaultValues: dynamicDocumentFilterDefaultValues,
-  });
-
-  const { handleSubmit, reset, setValue, watch } = methods;
-
-  // Watch values from form
-  const isUploadedAt = watch("isUploadedAt");
-  const isVerified = watch("isVerified");
-
-  // Close the offcanvas (bootstrap specific)
-  const closePanel = () => {
-    document.querySelector(".offcanvas.show .btn-close")?.click();
-  };
-
-  useImperativeHandle(ref, () => ({
-    resetFieldValue: (name, value) => {
-      if (value !== undefined) {
-        setValue(name, value);
-      } else {
-        reset({ ...methods.getValues(), [name]: DocumentFilterDefaultValues[name] });
+    //changes
+    useEffect(() => {
+      if (data && setFilterdata) {
+        setFilterdata(data);
       }
-    },
-    getValues: methods.getValues, // optional, to read current filter state
-  }));
+    }, [data, setFilterdata]);
 
-  //changes
-  useEffect(() => {
-    if (data && setFilterdata) {
-      setFilterdata(data);
-    }
-  }, [data, setFilterdata]);
+    const onSubmit = (values) => {
+      onApply({
+        ...values,
+        startDate: values.startDate
+          ? moment.utc(values.startDate, "DD-MM-YYYY").toISOString()
+          : null,
+        endDate: values.endDate
+          ? moment.utc(values.endDate, "DD-MM-YYYY").toISOString()
+          : null,
+      });
+      // closePanel();
+    };
 
-  const onSubmit = (values) => {
-    onApply({
-      ...values,
-      startDate: values.startDate
-        ? moment.utc(values.startDate, "DD-MM-YYYY").toISOString()
-        : null,
-      endDate: values.endDate
-        ? moment.utc(values.endDate, "DD-MM-YYYY").toISOString()
-        : null,
-    });
-    // closePanel();
-  };
+    const onClear = () => {
+      reset(DocumentFilterDefaultValues);
+      setResetKey((prev) => prev + 1);
+      onApply(DocumentFilterDefaultValues);
+      // closePanel();
+    };
 
-  const onClear = () => {
-    reset(DocumentFilterDefaultValues);
-    setResetKey((prev) => prev + 1);
-    onApply(DocumentFilterDefaultValues);
-    // closePanel();
-  };
+    if (isLoading) return <div>Loading...</div>;
+    if (isError)
+      return <div>Error: {error?.message || "Something went wrong!"}</div>;
 
-  if (isLoading) return <div>Loading...</div>;
-  if (isError)
-    return <div>Error: {error?.message || "Something went wrong!"}</div>;
-
-  const {
-    uploadedBy = [],
-    documentCategory = [],
-    documentType = [],
-    documentTag = [],
-  } = data?.data || {};
+    const {
+      uploadedBy = [],
+      documentCategory = [],
+      documentType = [],
+      documentTag = [],
+    } = data?.data || {};
 
 
 
-  return (
-    <FormProvider {...methods}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        {/* Date Range Section */}
-        <div className="mb-2">
-          <div className="text-start d-flex align-items-center my-1">
-            <label className="form-label me-2 my-0">Choose Date:</label>
-            <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" : ""
-                  }`}
-                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" : ""
-                  }`}
-                onClick={() => setValue("isUploadedAt", false)}
-              >
-                Updated On
-              </button>
+    return (
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          {/* Date Range Section */}
+          <div className="mb-2">
+            <div className="text-start d-flex align-items-center my-1">
+              <label className="form-label me-2 my-0">Choose Date:</label>
+              <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" : ""
+                    }`}
+                  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" : ""
+                    }`}
+                  onClick={() => setValue("isUploadedAt", false)}
+                >
+                  Updated On
+                </button>
+              </div>
+            </div>
+
+            <DateRangePicker1
+              placeholder="DD-MM-YYYY To DD-MM-YYYY"
+              startField="startDate"
+              endField="endDate"
+              defaultRange={false}
+              resetSignal={resetKey}
+              maxDate={new Date()}
+            />
+          </div>
+
+          {/* Dropdown Filters */}
+          <div className="row g-2 text-start">
+            <SelectMultiple
+              name="uploadedByIds"
+              label="Uploaded By:"
+              options={uploadedBy}
+              labelKey="name"
+              valueKey="id"
+            />
+            <SelectMultiple
+              name="documentCategoryIds"
+              label="Document Category:"
+              options={documentCategory}
+              labelKey="name"
+              valueKey="id"
+            />
+            <SelectMultiple
+              name="documentTypeIds"
+              label="Document Type:"
+              options={documentType}
+              labelKey="name"
+              valueKey="id"
+            />
+            <SelectMultiple
+              name="documentTagIds"
+              label="Tags:"
+              options={documentTag}
+              labelKey="name"
+              valueKey="id"
+            />
+          </div>
+
+          {/* Status Filter */}
+          <div className="text-start my-2">
+            <label className="form-label d-block mb-2">Choose Status:</label>
+            <div className="d-flex gap-4">
+              <label className="switch switch-sm">
+                <input
+                  type="radio"
+                  className="switch-input"
+                  name="isVerified"
+                  checked={isVerified === null}
+                  onChange={() => setValue("isVerified", null)}
+                />
+                <span className="switch-toggle-slider">
+                  <span className="switch-on"></span>
+                  <span className="switch-off"></span>
+                </span>
+                <span className="switch-label">All</span>
+              </label>
+
+              <label className="switch switch-sm">
+                <input
+                  type="radio"
+                  className="switch-input"
+                  name="isVerified"
+                  checked={isVerified === true}
+                  onChange={() => setValue("isVerified", true)}
+                />
+                <span className="switch-toggle-slider">
+                  <span className="switch-on"></span>
+                  <span className="switch-off"></span>
+                </span>
+                <span className="switch-label">Verified</span>
+              </label>
+
+              <label className="switch switch-sm">
+                <input
+                  type="radio"
+                  className="switch-input"
+                  name="isVerified"
+                  checked={isVerified === false}
+                  onChange={() => setValue("isVerified", false)}
+                />
+                <span className="switch-toggle-slider">
+                  <span className="switch-on"></span>
+                  <span className="switch-off"></span>
+                </span>
+                <span className="switch-label">Rejected</span>
+              </label>
             </div>
           </div>
 
-          <DateRangePicker1
-            placeholder="DD-MM-YYYY To DD-MM-YYYY"
-            startField="startDate"
-            endField="endDate"
-            defaultRange={false}
-            resetSignal={resetKey}
-            maxDate={new Date()}
-          />
-        </div>
-
-        {/* Dropdown Filters */}
-        <div className="row g-2 text-start">
-          <SelectMultiple
-            name="uploadedByIds"
-            label="Uploaded By:"
-            options={uploadedBy}
-            labelKey="name"
-            valueKey="id"
-          />
-          <SelectMultiple
-            name="documentCategoryIds"
-            label="Document Category:"
-            options={documentCategory}
-            labelKey="name"
-            valueKey="id"
-          />
-          <SelectMultiple
-            name="documentTypeIds"
-            label="Document Type:"
-            options={documentType}
-            labelKey="name"
-            valueKey="id"
-          />
-          <SelectMultiple
-            name="documentTagIds"
-            label="Tags:"
-            options={documentTag}
-            labelKey="name"
-            valueKey="id"
-          />
-        </div>
-
-        {/* Status Filter */}
-        <div className="text-start my-2">
-          <label className="form-label d-block mb-2">Choose Status:</label>
-          <div className="d-flex gap-4">
-            <label className="switch switch-sm">
-              <input
-                type="radio"
-                className="switch-input"
-                name="isVerified"
-                checked={isVerified === null}
-                onChange={() => setValue("isVerified", null)}
-              />
-              <span className="switch-toggle-slider">
-                <span className="switch-on"></span>
-                <span className="switch-off"></span>
-              </span>
-              <span className="switch-label">All</span>
-            </label>
-
-            <label className="switch switch-sm">
-              <input
-                type="radio"
-                className="switch-input"
-                name="isVerified"
-                checked={isVerified === true}
-                onChange={() => setValue("isVerified", true)}
-              />
-              <span className="switch-toggle-slider">
-                <span className="switch-on"></span>
-                <span className="switch-off"></span>
-              </span>
-              <span className="switch-label">Verified</span>
-            </label>
-
-            <label className="switch switch-sm">
-              <input
-                type="radio"
-                className="switch-input"
-                name="isVerified"
-                checked={isVerified === false}
-                onChange={() => setValue("isVerified", false)}
-              />
-              <span className="switch-toggle-slider">
-                <span className="switch-on"></span>
-                <span className="switch-off"></span>
-              </span>
-              <span className="switch-label">Rejected</span>
-            </label>
+          {/* Footer Buttons */}
+          <div className="d-flex justify-content-end py-3 gap-2">
+            <button
+              type="button"
+              className="btn btn-label-secondary btn-sm"
+              onClick={onClear}
+            >
+              Clear
+            </button>
+            <button type="submit" className="btn btn-primary btn-sm">
+              Apply
+            </button>
           </div>
-        </div>
-
-        {/* Footer Buttons */}
-        <div className="d-flex justify-content-end py-3 gap-2">
-          <button
-            type="button"
-            className="btn btn-label-secondary btn-sm"
-            onClick={onClear}
-          >
-            Clear
-          </button>
-          <button type="submit" className="btn btn-primary btn-sm">
-            Apply
-          </button>
-        </div>
-      </form>
-    </FormProvider>
-  );
-});
+        </form>
+      </FormProvider>
+    );
+  });
 
 export default DocumentFilterPanel;