src/components/Tenanat/SubScription.jsx

@@ -10,10 +10,8 @@ import { useNavigate } from "react-router-dom";
 const SubScription = ({ onSubmitSubScription, onNext }) => {
   const [frequency, setFrequency] = useState(2);
   const [selectedPlanId, setSelectedPlanId] = useState(null);
-  const selectedTenant = useSelector(
+  const selectedTenant = useSelector((store)=>store.globalVariables.currentTenant)
-    (store) => store.globalVariables.currentTenant
+  const naviget = useNavigate()
-  );
-  const naviget = useNavigate();
   const {
     data: plans = [],
     isError,
@@ -28,13 +26,9 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
     formState: { errors },
   } = useFormContext();
 
-  const {
+  const {mutate:AddSubScription,isPending,error} = useAddSubscription(()=>{
-    mutate: AddSubScription,
+    onNext()
-    isPending,
+  } )
-    error,
-  } = useAddSubscription(() => {
-    onNext();
-  });
   const handleSubscriptionSubmit = async () => {
     const isValid = await trigger([
       "planId",
@@ -48,8 +42,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)
     }
   };
 
@@ -115,24 +109,19 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
                           Features
                         </div>
                       </div>
-                      {plan?.features &&
+                      {Object.entries(plan.features.modules)
-                        Object.entries(plan?.features?.modules || {})
+                        .filter(([key]) => key !== "id")
-                          .filter(([key]) => key !== "id")
+                        .map(([key, mod]) => (
-                          .map(([key, mod]) => (
+                          <div
-                            <div
+                            key={key}
-                              key={key}
+                            className="mb-2 d-flex align-items-center"
-                              className="mb-2 d-flex align-items-center"
+                          >
-                            >
+                            <i
-                              <i
+                              className={`fa-regular ${mod.enabled ? "fa-circle-check text-success" : "fa-circle-xmark text-danger"}  `}
-                                className={`fa-regular ${
+                            ></i>
-                                  mod.enabled
+                            <small className="ms-1">{mod.name}</small>
-                                    ? "fa-circle-check text-success"
+                          </div>
-                                    : "fa-circle-xmark text-danger"
+                        ))}
-                                }`}
-                              ></i>
-                              <small className="ms-1">{mod.name}</small>
-                            </div>
-                          ))}
                     </div>
 
                     <button
@@ -152,10 +141,7 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
           {/* Form Inputs */}
           <div className="row g-2 mt-3">
             <div className="col-sm-4">
-              <Label htmlFor="maxUsers" required>
+              <Label htmlFor="maxUsers" required> Team Size</Label>
-                {" "}
-                Team Size
-              </Label>
               <input
                 type="number"
                 className="form-control form-control-sm"
@@ -210,7 +196,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,useCallback } from "react";
+import React, { useState } from "react";
 import { FormProvider, useForm, useFormContext } from "react-hook-form";
 import { defaultFilterValues, filterSchema } from "./TenantSchema";
 import Label from "../common/Label";
@@ -10,44 +10,30 @@ 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 { handleSubmit, reset } = methods;
+  const { data, isError, isLoading } = useIndustries();
-  const { data: industries = [], isLoading } = useIndustries();
+  const closePanel = () => {
-
-  const handleClosePanel = useCallback(() => {
     document.querySelector(".offcanvas.show .btn-close")?.click();
-  }, []);
+  };
-
+  const onSubmit = (formData) => {
-  const onSubmit = useCallback(
+ onApply({
-    (formData) => {
+          ...formData     
-      onApply({
+        })
-        ...formData,
+  };
-        startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
+  const onClear = () => {
-        endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
+    reset(filterSchema);
-      });
+    setResetKey((prev) => prev + 1);
-      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 {...methods}>
+    <FormProvider {...method}>
       <form  onSubmit={handleSubmit(onSubmit)}>
         <div className="text-start mb-1">
           <div className="text-start my-2">
@@ -62,7 +48,7 @@ const [resetKey, setResetKey] = useState(0);
             <SelectMultiple
             name="industryIds"
             label="Industries"
-            options={industries}
+            options={data}
             labelKey="name"
             valueKey="id"
           />
@@ -99,11 +85,10 @@ const [resetKey, setResetKey] = useState(0);
             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,10 +45,16 @@ 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: "frineds", name: "Friends" },
+    { val: "frined", name: "Friend" },
     { val: "advertisement", name: "Advertisement" },
     { val: "root tenant", name: "Root Tenant" },
   ];