From d25cc3531efac2d5539937a2b45c9c9cc8b6f267 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Mon, 11 Aug 2025 20:24:04 +0530
Subject: [PATCH] added Tenant Profile

---
 src/components/Tenanat/Organization.jsx      |  17 ++
 src/components/Tenanat/OrganizationInfo.jsx  |  76 +++------
 src/components/Tenanat/Profile.jsx           | 159 ++++++++++++++++++-
 src/components/Tenanat/TenantFilterPanel.jsx | 110 +++++++++----
 src/components/Tenanat/TenantForm.jsx        |   2 +-
 src/components/Tenanat/TenantSchema.js       |   8 +-
 src/components/Tenanat/TenantsList.jsx       |   7 +-
 src/hooks/useTenant.js                       |  10 ++
 src/pages/Tenant/TenantDetails.jsx           |  86 ++++------
 src/pages/Tenant/TenantPage.jsx              |  18 ++-
 src/repositories/TenantRepository.jsx        |   1 +
 src/utils/constants.jsx                      |  12 ++
 12 files changed, 344 insertions(+), 162 deletions(-)
 create mode 100644 src/components/Tenanat/Organization.jsx

diff --git a/src/components/Tenanat/Organization.jsx b/src/components/Tenanat/Organization.jsx
new file mode 100644
index 00000000..102595f9
--- /dev/null
+++ b/src/components/Tenanat/Organization.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { formatUTCToLocalTime } from '../../utils/dateUtils'
+
+const Organization = ({data}) => {
+  return (
+    <div className='container-fluid'>
+       {/* <div className='col-12'>
+        <h4>{data?.name}</h4>
+       </div> */}
+      
+    </div>
+  )
+}
+
+export default Organization
+
+
diff --git a/src/components/Tenanat/OrganizationInfo.jsx b/src/components/Tenanat/OrganizationInfo.jsx
index 276b3e3a..e43e7f65 100644
--- a/src/components/Tenanat/OrganizationInfo.jsx
+++ b/src/components/Tenanat/OrganizationInfo.jsx
@@ -4,6 +4,8 @@ import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
 import { useCreateTenant, useIndustries } from "../../hooks/useTenant";
 import { LogoUpload } from "./LogoUpload";
+import { orgSize, reference } from "../../utils/constants";
+import moment from "moment";
 
 const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
   const { data, isError, isLoading: industryLoading } = useIndustries();
@@ -40,26 +42,15 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
     ]);
 
     if (valid) {
-      const tenantPayload = getValues();
+      const data = getValues();
       // onSubmitTenant(data);
       // onNext();
-
+      const tenantPayload = {...data,onBoardingDate:  moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
       CreateTenant(tenantPayload);
     }
   };
 
-  const Reference = [
-    { val: "google", name: "Google" },
-    { val: "frined", name: "Friend" },
-    { val: "advertisement", name: "Advertisement" },
-    { val: "root tenant", name: "Root Tenant" },
-  ];
-  const orgSize = [
-    { val: "50", name: "1-50" },
-    { val: "100", name: "51-100" },
-    { val: "500", name: "101-500" },
-    { val: "600", name: "500+" },
-  ];
+
 
   return (
     <div className="row g-2">
@@ -74,9 +65,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
           {...register("organizationName")}
         />
         {errors.organizationName && (
-          <div className="danger-text">
-            {errors.organizationName.message}
-          </div>
+          <div className="danger-text">{errors.organizationName.message}</div>
         )}
       </div>
 
@@ -126,43 +115,28 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         <Label htmlFor="onBoardingDate" required>
           Onboarding Date
         </Label>
-        {/* this will upcomming from main */}
-        {/* <DatePicker
-  name="onBoardingDate"
-  control={control}
-  placeholder="Select onboarding date"
-  maxDate={new Date()}
-  className={errors.onBoardingDate ? "is-invalid" : ""}
-/>
-{errors.onBoardingDate && (
-  <div className="invalid-feedback">{errors.onBoardingDate.message}</div>
-)} */}
-
-        <input
-          type="date"
-          id="onBoardingDate"
-          {...register("onBoardingDate")}
-          className={`form-control form-control-sm `}
+        <DatePicker
+          name="onBoardingDate"
+          control={control}
+          placeholder="DD-MM-YYYY"
+          maxDate={new Date()}
+          className={errors.onBoardingDate ? "is-invalid" : ""}
         />
         {errors.onBoardingDate && (
-          <div className="danger-text">
+          <div className="invalid-feedback">
             {errors.onBoardingDate.message}
           </div>
         )}
+
+        {errors.onBoardingDate && (
+          <div className="danger-text">{errors.onBoardingDate.message}</div>
+        )}
       </div>
 
       <div className="col-sm-6">
         <Label htmlFor="organizationSize" required>
           Organization Size
         </Label>
-        {/* <input
-          id="organizationSize"
-          type="number"
-          className={`form-control form-control-sm ${
-            errors.organizationSize ? "is-invalid" : ""
-          }`}
-          {...register("organizationSize")}
-        /> */}
 
         <select
           className="form-select form-select-sm"
@@ -175,9 +149,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
           ))}
         </select>
         {errors.organizationSize && (
-          <div className="danger-text">
-            {errors.organizationSize.message}
-          </div>
+          <div className="danger-text">{errors.organizationSize.message}</div>
         )}
       </div>
 
@@ -206,18 +178,12 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
 
       <div className="col-sm-6">
         <Label htmlFor="reference">Reference</Label>
-        {/* <input
-          id="reference"
-          className={`form-control form-control-sm ${
-            errors.reference ? "is-invalid" : ""
-          }`}
-          {...register("reference")}
-        /> */}
+ 
         <select
           className="form-select form-select-sm"
           {...register("reference")}
         >
-          {Reference.map((org) => (
+          {reference.map((org) => (
             <option key={org.val} value={org.val}>
               {org.name}
             </option>
@@ -267,7 +233,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
           onClick={handleNext}
           disabled={isPending}
         >
-          {isPending ? "Please Wait...":"Submit and Next"}
+          {isPending ? "Please Wait..." : "Submit and Next"}
         </button>
       </div>
     </div>
diff --git a/src/components/Tenanat/Profile.jsx b/src/components/Tenanat/Profile.jsx
index 45be1014..13a6547b 100644
--- a/src/components/Tenanat/Profile.jsx
+++ b/src/components/Tenanat/Profile.jsx
@@ -1,9 +1,156 @@
-import React from 'react'
+import React from "react";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
 
-const Profile = () => {
+const Profile = ({ data }) => {
+  // const {logoImage,name,domainName,contactName,contactNumber,officeNumber} = data;
   return (
-    <div className='container-fuid'>profile</div>
-  )
-}
+    <div className="container-fuid">
+      <div className="row">
+        <div className="col-12 ">
+          <div className="d-flex flex-wrap align-items-start position-relative ">
+            <div className=" d-flex align-items-start gap-2">
+              <img
+                src={data.logoImage}
+                alt="Preview"
+                className="img-thumbnail rounded"
+                style={{ maxHeight: "35px" }}
+              />
+            </div>
+            <div className="ms-2 ">
+              <h4 className="m-0">{data.name}</h4>
+              <div className="block">
+                <i className="bx bx-globe text-primary bx-xs me-1"></i>
+                <span>{data?.domainName}</span>
+              </div>
+              <span className="badge text-bg-primary  position-absolute top-0 end-0">
+                {data?.tenantStatus?.name}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className="divider text-start">
+          <div className="divider-text">Profile</div>
+        </div>
 
-export default Profile
\ No newline at end of file
+        <div className="col rounded-2 bg-light justify-content-start p-2">
+          <p className="m-0">{data?.description}</p>
+        </div>
+
+        <div className="row ">
+          <div className="col-12 col-md-6 d-flex align-items-center">
+            <i className="bx bx-sm bx-user me-1"></i>
+            <span className="fw-semibold">Contact Person:</span>
+            <span className="ms-2">{data.contactName}</span>
+          </div>
+
+          <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
+            <i className="bx bx-sm bx-envelope me-1"></i>
+            <span className="fw-semibold">Email:</span>
+            <span className="ms-2">{data.email}</span>
+          </div>
+          <div className="col-12 col-md-6 d-flex align-items-center">
+            <i className="bx bx-sm bx-mobile me-1"></i>
+            <span className="fw-semibold">Contact Number:</span>
+            <span className="ms-2">{data.contactNumber}</span>
+          </div>
+
+          <div className="col-12  d-flex text-wrap align-items-start my-4 m-0">
+            <i className="bx bx-sm bx-mark me-1"></i>
+            <span className="fw-semibold">Address:</span>
+            <span className="ms-2">{data.billingAddress}</span>
+          </div>
+        </div>
+      </div>
+      <div className="divider text-start">
+        <div className="divider-text">Organization</div>
+      </div>
+
+      <div className="col-12  d-flex align-items-center">
+        <i class="bx bx-sm bxs-building"></i>
+        <span className="fw-semibold">Industry:</span>
+        <span className="ms-2">{data.industry.name}</span>
+      </div>
+      <div className="row ">
+        {data.taxId && (
+          <div className="col-12 col-md-6 d-flex align-items-center">
+            <i className="bx bx-sm bx-id-card me-1"></i>
+            <span className="fw-semibold">Tax Id:</span>
+            <span className="ms-2">{data.taxId}</span>
+          </div>
+        )}
+        <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
+          <i className="bx bx-sm bx-group me-1"></i>
+          <span className="fw-semibold">Organization Size:</span>
+          <span className="ms-2">{data.organizationSize}</span>
+        </div>
+        <div className="col-12 col-md-6 d-flex align-items-center">
+          <i className="bx bx-sm bxs-calendar"></i>
+          <span className="fw-semibold">On-Boarding Date:</span>
+          <span className="ms-2">
+            {formatUTCToLocalTime(data.onBoardingDate)}
+          </span>
+        </div>
+
+        <table className="table table-bordered text-center text-nowrap table-responsive my-4">
+          <tbody>
+            <tr>
+              <td colspan="1">
+                <strong>Status</strong>
+              </td>
+              <td colspan="1">
+                <strong>Active</strong>
+              </td>
+              <td colspan="1">
+                <strong>In-Progress</strong>
+              </td>
+              <td colspan="1">
+                <strong>On Hold</strong>
+              </td>
+              <td>
+                <strong>In-Active</strong>
+              </td>
+              <td>
+                <strong>Completed</strong>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Projects</strong>
+              </td>
+              <td>
+                <strong>{data?.activeProjects}</strong>
+              </td>
+              <td>
+                <strong>{data?.inProgressProjects}</strong>
+              </td>
+              <td>
+                <strong>{data?.onHoldProjects}</strong>
+              </td>
+              <td>
+                <strong>{data?.inActiveProjects}</strong>
+              </td>
+              <td>
+                <strong>{data?.completedProjects}</strong>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div className="row">
+        <div className="col-12 col-md-6 d-flex align-items-center">
+          <i className="bx bx-sm bx-group me-1"></i>
+          <span className="fw-semibold">Activite Employees:</span>
+          <span className="ms-2">{data.activeEmployees}</span>
+        </div>
+
+        <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
+          <i className="bx bx-sm bx-group me-1"></i>
+          <span className="fw-semibold">In-Active Employee:</span>
+          <span className="ms-2">{data.inActiveEmployees}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;
diff --git a/src/components/Tenanat/TenantFilterPanel.jsx b/src/components/Tenanat/TenantFilterPanel.jsx
index 0cfaf2f5..7bf86fad 100644
--- a/src/components/Tenanat/TenantFilterPanel.jsx
+++ b/src/components/Tenanat/TenantFilterPanel.jsx
@@ -1,40 +1,86 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import React from 'react'
-import { FormProvider, useForm, useFormContext } from 'react-hook-form'
-import { defaultFilterValues, filterSchema } from './TenantSchema'
-import Label from '../common/Label'
-import SelectMultiple from '../common/SelectMultiple'
-import { useIndustries } from '../../hooks/useTenant'
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState } from "react";
+import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import { defaultFilterValues, filterSchema } from "./TenantSchema";
+import Label from "../common/Label";
+import SelectMultiple from "../common/SelectMultiple";
+import { useIndustries } from "../../hooks/useTenant";
+import { reference } from "../../utils/constants";
+import { DateRangePicker1 } from "../common/DateRangePicker";
+import moment from "moment";
 
-const TenantFilterPanel = () => {
+const TenantFilterPanel = ({onApply}) => {
+  const [resetKey, setResetKey] = useState(0);
+  const method = useForm({
+    resolver: zodResolver(filterSchema),
+    defaultValues: defaultFilterValues,
+  });
+  const { control, register, handleSubmit, reset, watch } = method;
+  const { data, isError, isLoading } = useIndustries();
+  const closePanel = () => {
+    document.querySelector(".offcanvas.show .btn-close")?.click();
+  };
+  const onSubmit = (formData) => {
+ onApply({
+          ...formData,
+          startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
+          endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
+        })
+  };
+  const onClear = () => {
+    reset(filterSchema);
+    setResetKey((prev) => prev + 1);
 
-const method  = useForm({
-    resolver:zodResolver(filterSchema),
-    defaultValues:defaultFilterValues
-})
-const {control, register, handleSubmit, reset, watch} = method;
-const {data,isError,isLoading} = useIndustries()
-console.log(data)
-const onSubmit =()=>{
-
-}
-if(isLoading) return <div className='text-center'>Loading...</div>
+    closePanel();
+  };
+  if (isLoading) return <div className="text-center">Loading...</div>;
   return (
     <FormProvider {...method}>
-    <form onsubmit={(handleSubmit(onSubmit))} >
-     <div className='text-start mb-1'>
-        <SelectMultiple
-              name="industryIds"
+      <form  onSubmit={handleSubmit(onSubmit)}>
+        <div className="text-start mb-1">
+          <DateRangePicker1
+            placeholder="DD-MM-YYYY To DD-MM-YYYY"
+            startField="startDate"
+            endField="endDate"
+            resetSignal={resetKey}
+          />
+          <SelectMultiple
+            name="industryIds"
+            label="Industries :"
+            options={data}
+            labelKey="name"
+            valueKey="id"
+          />
+          <SelectMultiple
+            name="references"
+            label="References :"
+            options={reference}
+            labelKey="name"
+            valueKey="val"
+          />
+          {/* <SelectMultiple
+              name="references"
               label="Industries :"
-              options={data}
+              options={reference}
               labelKey="name"
-              valueKey="id"
-            />
-     </div>
-    </form>
-
+              valueKey="val"
+            /> */}
+        </div>
+        <div className="d-flex justify-content-end py-3 gap-2">
+          <button
+            type="button"
+            className="btn btn-secondary btn-xs"
+            onClick={onClear}
+          >
+            Clear
+          </button>
+          <button type="submit" className="btn btn-primary btn-xs">
+            Apply
+          </button>
+        </div>
+      </form>
     </FormProvider>
-  )
-}
+  );
+};
 
-export default TenantFilterPanel
\ No newline at end of file
+export default TenantFilterPanel;
diff --git a/src/components/Tenanat/TenantForm.jsx b/src/components/Tenanat/TenantForm.jsx
index c2413533..616effe1 100644
--- a/src/components/Tenanat/TenantForm.jsx
+++ b/src/components/Tenanat/TenantForm.jsx
@@ -101,7 +101,7 @@ const TenantForm = () => {
                 <button
                   type="button"
                   className={`step-trigger ${isActive ? "active" : ""}`}
-                    // onClick={() => setActiveTab(index)}
+                    onClick={() => setActiveTab(index)}
                 >
                   <span className="bs-stepper-circle">
                     {isCompleted ? (
diff --git a/src/components/Tenanat/TenantSchema.js b/src/components/Tenanat/TenantSchema.js
index b1d6aac1..0ec1e4a1 100644
--- a/src/components/Tenanat/TenantSchema.js
+++ b/src/components/Tenanat/TenantSchema.js
@@ -67,16 +67,16 @@ export const subscriptionDefaultValues = {
 
 export const filterSchema = z.object({
   industryIds: z.array(z.string()).optional(),
-  createdByIds: z.array(z.string()).optional(),
-  tenantStatusIds: z.array(z.string()).optional(),
+  // createdByIds: z.array(z.string()).optional(),
+  // tenantStatusIds: z.array(z.string()).optional(),
   references: z.array(z.string()).optional(),
   startDate: z.string().optional(), 
   endDate: z.string().optional(),  
 });
 export const defaultFilterValues = {
   industryIds: [],
-  createdByIds: [],
-  tenantStatusIds: [],
+  // createdByIds: [],
+  // tenantStatusIds: [],
   references: [],
   startDate: "YYYY-MM-DDTHH:mm:ssZ",
   endDate: "YYYY-MM-DDTHH:mm:ssZ",
diff --git a/src/components/Tenanat/TenantsList.jsx b/src/components/Tenanat/TenantsList.jsx
index e6163065..169ce6c6 100644
--- a/src/components/Tenanat/TenantsList.jsx
+++ b/src/components/Tenanat/TenantsList.jsx
@@ -8,12 +8,12 @@ import { TenantTableSkeleton } from "./TenanatSkeleton";
 import { useTenantContext } from "../../pages/Tenant/TenantPage";
 import { useNavigate } from "react-router-dom";
 
-const TenantsList = ({searchText,setIsRefetching, setRefetchFn}) => {
+const TenantsList = ({filters,searchText,setIsRefetching, setRefetchFn}) => {
   const [currentPage, setCurrentPage] = useState(1);
   const navigate = useNavigate()
   const { data, isLoading, isError, isInitialLoading, error,refetch, isFetching } = useTenants(
     currentPage,
-    {},
+    filters,
     searchText,
   );
 
@@ -41,7 +41,7 @@ const TenantsList = ({searchText,setIsRefetching, setRefetchFn}) => {
       key: "name",
       label: "Organization",
       getValue: (t) => (
-        <div className="d-flex align-items-center py-1" onClick={()=>navigate(`/tenant/${t.id}`)}>
+        <div className="d-flex align-items-center py-1 cursor-pointer" onClick={()=>navigate(`/tenant/${t.id}`)}>
           <IconButton
             iconClass="bx bx-sm bx-building"
             color="warning"
@@ -95,7 +95,6 @@ const TenantsList = ({searchText,setIsRefetching, setRefetchFn}) => {
           {t.tenantStatus?.name || "Unknown"}
         </span>
       ),
-      align:"text-center"
     },
   ];
    if (isInitialLoading)
diff --git a/src/hooks/useTenant.js b/src/hooks/useTenant.js
index a1342870..6bc952b2 100644
--- a/src/hooks/useTenant.js
+++ b/src/hooks/useTenant.js
@@ -23,6 +23,16 @@ export const useTenants = (pageNumber, filter = {}, searchString = "") => {
   });
 };
 
+export const useTenantDetails =(id)=>{
+  return useQuery({
+    queryKey:["Tenant",id],
+    queryFn:async()=>{
+      const response = await TenantRepository.getTenantDetails(id);
+      return response.data;
+    },
+  })
+}
+
 
 export const useIndustries=()=>{
   return useQuery({
diff --git a/src/pages/Tenant/TenantDetails.jsx b/src/pages/Tenant/TenantDetails.jsx
index ca84f769..311f3fd0 100644
--- a/src/pages/Tenant/TenantDetails.jsx
+++ b/src/pages/Tenant/TenantDetails.jsx
@@ -2,89 +2,55 @@ import React from "react";
 import { useParams } from "react-router-dom";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import Profile from "../../components/Tenanat/profile";
+import { useTenantDetails } from "../../hooks/useTenant";
+import Organization from "../../components/Tenanat/Organization";
+import { ComingSoonPage } from "../Misc/ComingSoonPage";
 
 const TenantDetails = () => {
-    
+  const { tenantId } = useParams();
+  const { data, isLoading, isError, error } = useTenantDetails(tenantId);
+
   const tabs = [
     {
       id: "navs-left-home",
       label: "Profile",
       icon: "bx bx-user-circle",
-      iconSize: "bx-sm", 
-      content: <Profile/>,
+      iconSize: "bx-sm",
+      content: <Profile data={data} />,
     },
+
     {
-      id: "navs-left-org",
-      label: "Organization",
-      icon: "bx bxs-business",
-      iconSize: "bx-sm", // change to bx-xs, bx-md, bx-lg
-      content: (
-        <>
-          <p>
-            Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake...
-          </p>
-          <p className="mb-0">
-            Tootsie roll fruitcake cookie. Dessert topping pie...
-          </p>
-        </>
-      ),
-    },
-    {
-      id: "navs-left-profile",
-      label: "Settings",
-      icon: "bx bx-cog",
+      id: "navs-left-bill",
+      label: "Bill",
+      icon: "bx bx-receipt",
       iconSize: "bx-sm",
       content: (
-        <>
-          <p>
-            Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie...
-          </p>
-          <p className="mb-0">
-            Jelly-o jelly beans icing pastry cake cake lemon drops...
-          </p>
-        </>
+        <div className="text-center">
+          <ComingSoonPage />
+        </div>
       ),
     },
+
     {
       id: "navs-left-messages",
       label: "Messages",
       icon: "bx bx-message-rounded",
       iconSize: "bx-sm",
       content: (
-        <>
-          <p>
-            Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans...
-          </p>
-          <p className="mb-0">
-            Cake chocolate bar cotton candy apple pie tootsie roll...
-          </p>
-        </>
-      ),
-    },
-     {
-      id: "navs-left-bill",
-      label: "Bill",
-      icon: "bx bx-receipt",
-      iconSize: "bx-sm",
-      content: (
-        <>
-          <p>
-            Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans...
-          </p>
-          <p className="mb-0">
-            Cake chocolate bar cotton candy apple pie tootsie roll...
-          </p>
-        </>
+        <div className="text-center">
+          <ComingSoonPage />
+        </div>
       ),
     },
   ];
-
+  if (isLoading) return <div className="my-4">Loading...</div>;
+  if (isError) return <div>{error.message}</div>;
   return (
     <div className="container-fluid py-0">
       <Breadcrumb
         data={[
           { label: "Home", link: "/dashboard" },
-          { label: "Tenant", link: "/tenant" },
+          { label: "Tenant", link: "/tenants" },
           { label: "Tenant Details", link: null },
         ]}
       />
@@ -95,7 +61,9 @@ const TenantDetails = () => {
             <li key={tab.id} className="nav-item">
               <button
                 type="button"
-                className={`nav-link d-flex align-items-center gap-2 ${index === 0 ? "active" : ""}`}
+                className={`nav-link d-flex align-items-center gap-2 ${
+                  index === 0 ? "active" : ""
+                }`}
                 role="tab"
                 data-bs-toggle="tab"
                 data-bs-target={`#${tab.id}`}
@@ -113,7 +81,9 @@ const TenantDetails = () => {
           {tabs.map((tab, index) => (
             <div
               key={tab.id}
-              className={`tab-pane fade ${index === 0 ? "show active" : ""} text-start`}
+              className={`tab-pane fade ${
+                index === 0 ? "show active" : ""
+              } text-start`}
               id={tab.id}
             >
               {tab.content}
diff --git a/src/pages/Tenant/TenantPage.jsx b/src/pages/Tenant/TenantPage.jsx
index 6b7cd04e..06c7829a 100644
--- a/src/pages/Tenant/TenantPage.jsx
+++ b/src/pages/Tenant/TenantPage.jsx
@@ -29,6 +29,7 @@ const TenantPage = () => {
   const [searchText, setSearchText] = useState("");
   const [isRefetching,setRefetching] = useState(false)
   const [refetchFn, setRefetchFn] = useState(null);
+    const [filters, setFilter] = useState();
   const debouncedSearch = useDebounce(searchText, 500);
   const contextValue = {
   };
@@ -38,9 +39,22 @@ const TenantPage = () => {
 
   // This Hook allow us to right-side bar for filter Tenants
 
+    const methods = useForm({
+      resolver: zodResolver(filterSchema),
+      defaultValues: defaultFilterValues,
+    });
+  
+    const { reset } = methods;
+  
+    const clearFilter = () => {
+      setFilter(defaultFilter);
+      reset();
+    };
   useEffect(() => {
     setShowTrigger(true);
-    setOffcanvasContent("Tenant Filters", <TenantFilterPanel />);
+    setOffcanvasContent("Tenant Filters", <TenantFilterPanel  onApply={setFilter}
+
+        clearFilter={clearFilter}/>);
     return () => {
       setShowTrigger(false);
       setOffcanvasContent("", null);
@@ -90,7 +104,7 @@ const TenantPage = () => {
           </div>
         </div>
 
-        <TenantsList     searchText={debouncedSearch}      setIsRefetching={setRefetching}
+        <TenantsList   filters={filters}  searchText={debouncedSearch}      setIsRefetching={setRefetching}
           setRefetchFn={setRefetchFn}
      />
       </div>
diff --git a/src/repositories/TenantRepository.jsx b/src/repositories/TenantRepository.jsx
index 2e132903..06581aca 100644
--- a/src/repositories/TenantRepository.jsx
+++ b/src/repositories/TenantRepository.jsx
@@ -14,6 +14,7 @@ export const TenantRepository = {
   return api.get(`/api/Tenant/list?${params.toString()}`);
 },
 
+  getTenantDetails:(id)=>api.get(`/api/Tenant/details/${id}`),
 
   getSubscriptionPlan: (freq) =>
     api.get(`/api/Tenant/list/subscription-plan?frequency=${freq}`),
diff --git a/src/utils/constants.jsx b/src/utils/constants.jsx
index 2364bc8e..aa09f1c3 100644
--- a/src/utils/constants.jsx
+++ b/src/utils/constants.jsx
@@ -71,6 +71,18 @@ export const EXPENSE_MANAGEMENT = "a4e25142-449b-4334-a6e5-22f70e4732d7"
 export const CONSTANT_TEXT = {
     
 }
+export const reference = [
+    { val: "google", name: "Google" },
+    { val: "frined", name: "Friend" },
+    { val: "advertisement", name: "Advertisement" },
+    { val: "root tenant", name: "Root Tenant" },
+  ];
+export   const orgSize = [
+    { val: "50", name: "1-50" },
+    { val: "100", name: "51-100" },
+    { val: "500", name: "101-500" },
+    { val: "600", name: "500+" },
+];
 
 export const BASE_URL = process.env.VITE_BASE_URL;
 // export const BASE_URL = "https://api.marcoaiot.com";