resolved filter issues

src/components/Tenanat/SubScription.jsx

@@ -10,8 +10,10 @@ import { useNavigate } from "react-router-dom";
 const SubScription = ({ onSubmitSubScription, onNext }) => {
   const [frequency, setFrequency] = useState(2);
   const [selectedPlanId, setSelectedPlanId] = useState(null);
-  const selectedTenant = useSelector((store)=>store.globalVariables.currentTenant)
+  const selectedTenant = useSelector(
-  const naviget = useNavigate()
+    (store) => store.globalVariables.currentTenant
+  );
+  const naviget = useNavigate();
   const {
     data: plans = [],
     isError,
@@ -26,9 +28,13 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
     formState: { errors },
   } = useFormContext();
 
-  const {mutate:AddSubScription,isPending,error} = useAddSubscription(()=>{
+  const {
-    onNext()
+    mutate: AddSubScription,
-  } )
+    isPending,
+    error,
+  } = useAddSubscription(() => {
+    onNext();
+  });
   const handleSubscriptionSubmit = async () => {
     const isValid = await trigger([
       "planId",
@@ -42,8 +48,8 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
     if (isValid) {
       const payload = getValues();
       // onSubmitSubScription(payload);
-      const subscriptionPayload = {...payload,tenantId:selectedTenant.id}
+      const subscriptionPayload = { ...payload, tenantId: selectedTenant.id };
-      AddSubScription(subscriptionPayload)
+      AddSubScription(subscriptionPayload);
     }
   };
 
@@ -109,19 +115,24 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
                           Features
                         </div>
                       </div>
-                      {Object.entries(plan.features.modules)
+                      {plan?.features &&
-                        .filter(([key]) => key !== "id")
+                        Object.entries(plan?.features?.modules || {})
-                        .map(([key, mod]) => (
+                          .filter(([key]) => key !== "id")
-                          <div
+                          .map(([key, mod]) => (
-                            key={key}
+                            <div
-                            className="mb-2 d-flex align-items-center"
+                              key={key}
-                          >
+                              className="mb-2 d-flex align-items-center"
-                            <i
+                            >
-                              className={`fa-regular ${mod.enabled ? "fa-circle-check text-success" : "fa-circle-xmark text-danger"}  `}
+                              <i
-                            ></i>
+                                className={`fa-regular ${
-                            <small className="ms-1">{mod.name}</small>
+                                  mod.enabled
-                          </div>
+                                    ? "fa-circle-check text-success"
-                        ))}
+                                    : "fa-circle-xmark text-danger"
+                                }`}
+                              ></i>
+                              <small className="ms-1">{mod.name}</small>
+                            </div>
+                          ))}
                     </div>
 
                     <button
@@ -141,7 +152,10 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
           {/* Form Inputs */}
           <div className="row g-2 mt-3">
             <div className="col-sm-4">
-              <Label htmlFor="maxUsers" required> Team Size</Label>
+              <Label htmlFor="maxUsers" required>
+                {" "}
+                Team Size
+              </Label>
               <input
                 type="number"
                 className="form-control form-control-sm"
@@ -196,7 +210,7 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
               type="button"
               disabled={isPending}
             >
-              {isPending ? "Please Wait...":"Submit"}
+              {isPending ? "Please Wait..." : "Submit"}
             </button>
           </div>
         </div>

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" },
   ];