resolved filter issues

src/components/Tenanat/TenantFilterPanel.jsx

@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useState } from "react";
+import React, { useState,useCallback } from "react";
 import { FormProvider, useForm, useFormContext } from "react-hook-form";
 import { defaultFilterValues, filterSchema } from "./TenantSchema";
 import Label from "../common/Label";
@@ -10,30 +10,44 @@ import { DateRangePicker1 } from "../common/DateRangePicker";
 import moment from "moment";
 
 const TenantFilterPanel = ({onApply}) => {
-  const [resetKey, setResetKey] = useState(0);
+const [resetKey, setResetKey] = useState(0);
-  const method = useForm({
+  
+  const methods = useForm({
     resolver: zodResolver(filterSchema),
     defaultValues: defaultFilterValues,
   });
-  const { control, register, handleSubmit, reset, watch } = method;
+  
-  const { data, isError, isLoading } = useIndustries();
+  const { handleSubmit, reset } = methods;
-  const closePanel = () => {
+  const { data: industries = [], isLoading } = useIndustries();
-    document.querySelector(".offcanvas.show .btn-close")?.click();
+
-  };
+  const handleClosePanel = useCallback(() => {
-  const onSubmit = (formData) => {
+    document.querySelector(".offcanvas.show .btn-close")?.click();
- onApply({
+  }, []);
-          ...formData     
+
-        })
+  const onSubmit = useCallback(
-  };
+    (formData) => {
-  const onClear = () => {
+      onApply({
-    reset(filterSchema);
+        ...formData,
-    setResetKey((prev) => prev + 1);
+        startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
+        endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
+      });
+      handleClosePanel();
+    },
+    [onApply, handleClosePanel]
+  );
+
+  const onClear = useCallback(() => {
+    reset(defaultFilterValues);
+    setResetKey((prev) => prev + 1); // triggers DateRangePicker reset
+    onApply(defaultFilterValues);
+  }, [onApply, reset]);
+
+  if (isLoading) {
+    return <div className="text-center">Loading...</div>;
+  }
 
-    closePanel();
-  };
-  if (isLoading) return <div className="text-center">Loading...</div>;
   return (
-    <FormProvider {...method}>
+    <FormProvider {...methods}>
       <form  onSubmit={handleSubmit(onSubmit)}>
         <div className="text-start mb-1">
           <div className="text-start my-2">
@@ -48,7 +62,7 @@ const TenantFilterPanel = ({onApply}) => {
             <SelectMultiple
             name="industryIds"
             label="Industries"
-            options={data}
+            options={industries}
             labelKey="name"
             valueKey="id"
           />
@@ -85,10 +99,11 @@ const TenantFilterPanel = ({onApply}) => {
             type="button"
             className="btn btn-secondary btn-xs"
             onClick={onClear}
+            
           >
             Clear
           </button>
-          <button type="submit" className="btn btn-primary btn-xs">
+          <button type="submit" className="btn btn-primary btn-xs" >
             Apply
           </button>
         </div>

src/pages/Tenant/TenantPage.jsx

@@ -45,16 +45,10 @@ const TenantPage = () => {
     });
   
     const { reset } = methods;
-  
-    const clearFilter = () => {
-      setFilter(defaultFilter);
-      reset();
-    };
   useEffect(() => {
     setShowTrigger(true);
     setOffcanvasContent("Tenant Filters", <TenantFilterPanel  onApply={setFilter}
-
+         />);
-        clearFilter={clearFilter}/>);
     return () => {
       setShowTrigger(false);
       setOffcanvasContent("", null);

src/utils/constants.jsx

@@ -78,7 +78,7 @@ export const CONSTANT_TEXT = {
 }
 export const reference = [
     { val: "google", name: "Google" },
-    { val: "frined", name: "Friend" },
+    { val: "frineds", name: "Friends" },
     { val: "advertisement", name: "Advertisement" },
     { val: "root tenant", name: "Root Tenant" },
   ];