From d48b4c4ef3ed97aaf54e0f1e27ec6ed59f631c1f Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Tue, 5 Aug 2025 02:13:38 +0530
Subject: [PATCH 1/6] initially setup tenant manag. setup wizard-form and
 properly manage data. handle two sperate form with on wizard

---
 src/components/Tenanat/ContactInfro.jsx     | 107 +++++++++
 src/components/Tenanat/OrganizationInfo.jsx | 234 ++++++++++++++++++++
 src/components/Tenanat/SubScription.jsx     |   9 +
 src/components/Tenanat/TenantForm.jsx       | 133 +++++++++++
 src/components/Tenanat/TenantSchema.js      | 100 +++++++++
 src/components/Tenanat/TenantsList.jsx      |  37 ++++
 src/components/common/Label.jsx             |  12 +
 src/data/menuData.json                      |   4 +-
 src/hooks/useTenant.js                      |  22 ++
 src/pages/Tenant/CreateTenant.jsx           |  20 ++
 src/pages/Tenant/TenantPage.jsx             |  21 ++
 src/repositories/TenantRepository.jsx       |  10 +
 src/router/AppRoutes.jsx                    |   4 +
 13 files changed, 711 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Tenanat/ContactInfro.jsx
 create mode 100644 src/components/Tenanat/OrganizationInfo.jsx
 create mode 100644 src/components/Tenanat/SubScription.jsx
 create mode 100644 src/components/Tenanat/TenantForm.jsx
 create mode 100644 src/components/Tenanat/TenantSchema.js
 create mode 100644 src/components/Tenanat/TenantsList.jsx
 create mode 100644 src/components/common/Label.jsx
 create mode 100644 src/hooks/useTenant.js
 create mode 100644 src/pages/Tenant/CreateTenant.jsx
 create mode 100644 src/pages/Tenant/TenantPage.jsx
 create mode 100644 src/repositories/TenantRepository.jsx

diff --git a/src/components/Tenanat/ContactInfro.jsx b/src/components/Tenanat/ContactInfro.jsx
new file mode 100644
index 00000000..34da10c3
--- /dev/null
+++ b/src/components/Tenanat/ContactInfro.jsx
@@ -0,0 +1,107 @@
+import React from "react";
+import Label from "../common/Label";
+import { useFormContext } from "react-hook-form";
+
+const ContactInfro = ({ onNext }) => {
+  const {
+    register,
+    control,
+    trigger,
+    formState: { errors },
+  } = useFormContext();
+
+
+  const handleNext = async () => {
+    const valid = await trigger([
+      "firstName",
+      "lastName",
+      "email",
+      "contactNumber",
+      "billingAddress",
+    ]);
+    if (valid) {
+      onNext(); // go to next tab
+    }
+  };
+  return (
+    <div class="row g-6">
+      <div className="col-sm-6">
+        <Label htmlFor="firstName" required>
+          First Name
+        </Label>
+        <input
+          id="firstName"
+          type="text"
+          className={`form-control form-control-sm ${errors.firstName ? "is-invalid" : ""}`}
+          {...register("firstName")}
+        />
+        {errors.firstName && (
+          <div className="invalid-feedback">{errors.firstName.message}</div>
+        )}
+      </div>
+      <div className="col-sm-6">
+        <Label htmlFor="lastName" required>
+          Last Name
+        </Label>
+        <input
+          id="lastName"
+          type="text"
+          className={`form-control form-control-sm ${errors.lastName ? "is-invalid" : ""}`}
+          {...register("lastName")}
+        />
+        {errors.lastName && (
+          <div className="invalid-feedback">{errors.lastName.message}</div>
+        )}
+      </div>
+      <div className="col-sm-6">
+          <Label htmlFor="email" required>
+          Email
+        </Label>
+        <input
+          id="email"
+          type="email"
+          className={`form-control form-control-sm ${errors.email ? "is-invalid" : ""}`}
+          {...register("email")}
+        />
+        {errors.email && (
+          <div className="invalid-feedback">{errors.email.message}</div>
+        )}
+      </div>
+         <div className="col-sm-6">
+         <Label htmlFor="contactNumber" required>
+          Contact Number
+        </Label>
+        <input
+          id="contactNumber"
+          type="text"
+          className={`form-control form-control-sm ${errors.contactNumber ? "is-invalid" : ""}`}
+          {...register("contactNumber")}
+        />
+        {errors.contactNumber && (
+          <div className="invalid-feedback">{errors.contactNumber.message}</div>
+        )}
+      </div>
+       <div className="col-12">
+        <Label htmlFor="billingAddress" required>
+          Billing Address
+        </Label>
+        <textarea
+          id="billingAddress"
+          className={`form-control  ${errors.billingAddress ? "is-invalid" : ""}`}
+          {...register("billingAddress")}
+          rows={3}
+        />
+        {errors.billingAddress && (
+          <div className="invalid-feedback">{errors.billingAddress.message}</div>
+        )}
+       </div>
+          <div className="d-flex justify-content-end mt-3">
+        <button type="button" className="btn btn-primary" onClick={handleNext}>
+          Next
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ContactInfro;
diff --git a/src/components/Tenanat/OrganizationInfo.jsx b/src/components/Tenanat/OrganizationInfo.jsx
new file mode 100644
index 00000000..b332d3a0
--- /dev/null
+++ b/src/components/Tenanat/OrganizationInfo.jsx
@@ -0,0 +1,234 @@
+import React from "react";
+import { useFormContext, Controller } from "react-hook-form";
+import Label from "../common/Label";
+import DatePicker from "../common/DatePicker";
+
+const OrganizationInfo = ({ onNext, onPrev }) => {
+  const {
+    register,
+    control,
+    trigger,
+    formState: { errors },
+  } = useFormContext();
+
+  const handleNext = async () => {
+    const valid = await trigger([
+      "organizationName",
+      "officeNumber",
+      "domainName",
+      "description",
+      "onBoardingDate",
+      "organizationSize",
+      "taxId",
+      "industryId",
+      "reference",
+      "logoImage",
+    ]);
+    if (valid) onNext();
+  };
+
+  return (
+    <div className="row g-6">
+      <div className="col-sm-6">
+        <Label htmlFor="organizationName" required>
+          Organization Name
+        </Label>
+
+        <input
+          id="organizationName"
+          className={`form-control form-control-sm ${
+            errors.organizationName ? "is-invalid" : ""
+          }`}
+          {...register("organizationName")}
+        />
+        {errors.organizationName && (
+          <div className="invalid-feedback">
+            {errors.organizationName.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-sm-6">
+        <Label htmlFor="officeNumber" required>
+          Office Number
+        </Label>
+        <input
+          id="officeNumber"
+          className={`form-control form-control-sm ${
+            errors.officeNumber ? "is-invalid" : ""
+          }`}
+          {...register("officeNumber")}
+        />
+        {errors.officeNumber && (
+          <div className="invalid-feedback">{errors.officeNumber.message}</div>
+        )}
+      </div>
+
+      <div className="col-sm-6">
+        <Label htmlFor="domainName" required>
+          Domain Name
+        </Label>
+        <input
+          id="domainName"
+          className={`form-control form-control-sm ${
+            errors.domainName ? "is-invalid" : ""
+          }`}
+          {...register("domainName")}
+        />
+        {errors.domainName && (
+          <div className="invalid-feedback">{errors.domainName.message}</div>
+        )}
+      </div>
+
+      <div className="col-sm-6">
+        <Label htmlFor="taxId" required>
+          Tax ID
+        </Label>
+        <input
+          id="taxId"
+          className={`form-control form-control-sm ${
+            errors.taxId ? "is-invalid" : ""
+          }`}
+          {...register("taxId")}
+        />
+        {errors.taxId && (
+          <div className="invalid-feedback">{errors.taxId.message}</div>
+        )}
+      </div>
+
+      <div className="col-sm-6">
+        <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>
+)} */}
+
+        <label htmlFor="onBoardingDate" className="form-label">
+          Onboarding Date <span className="text-danger">*</span>
+        </label>
+        <input
+          type="date"
+          id="onBoardingDate"
+          {...register("onBoardingDate")}
+          className={`form-control form-control-sm ${
+            errors.onBoardingDate ? "is-invalid" : ""
+          }`}
+        />
+        {errors.onBoardingDate && (
+          <div className="invalid-feedback">
+            {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")}
+        />
+        {errors.organizationSize && (
+          <div className="invalid-feedback">
+            {errors.organizationSize.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-sm-6">
+        <Label htmlFor="industryId" required>
+          Industry
+        </Label>
+        <Controller
+          name="industryId"
+          control={control}
+          render={({ field }) => (
+            <Select
+              {...field}
+              id="industryId"
+              className={`form-control form-control-sm ${
+                errors.industryId ? "is-invalid" : ""
+              }`}
+              options={[
+                { label: "Tech", value: 1 },
+                { label: "Healthcare", value: 2 },
+              ]} // replace with your data
+            />
+          )}
+        />
+        {errors.industryId && (
+          <div className="invalid-feedback">{errors.industryId.message}</div>
+        )}
+      </div>
+
+      <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")}
+        />
+        {errors.reference && (
+          <div className="invalid-feedback">{errors.reference.message}</div>
+        )}
+      </div>
+
+      <div className="col-sm-12">
+        <Label htmlFor="description">Description</Label>
+        <textarea
+          id="description"
+          rows={3}
+          className={`form-control form-control-sm ${
+            errors.description ? "is-invalid" : ""
+          }`}
+          {...register("description")}
+        />
+        {errors.description && (
+          <div className="invalid-feedback">{errors.description.message}</div>
+        )}
+      </div>
+
+      <div className="col-sm-12">
+        <Label htmlFor="logoImage">Logo Image</Label>
+        <input
+          id="logoImage"
+          type="file"
+          className={`form-control form-control-sm ${
+            errors.logoImage ? "is-invalid" : ""
+          }`}
+          {...register("logoImage")}
+        />
+        {errors.logoImage && (
+          <div className="invalid-feedback">{errors.logoImage.message}</div>
+        )}
+      </div>
+
+      <div className="d-flex justify-content-between mt-3">
+        <button type="button" className="btn btn-secondary" onClick={onPrev}>
+          Back
+        </button>
+        <button type="button" className="btn btn-primary" onClick={handleNext}>
+          Next
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default OrganizationInfo;
diff --git a/src/components/Tenanat/SubScription.jsx b/src/components/Tenanat/SubScription.jsx
new file mode 100644
index 00000000..287e38de
--- /dev/null
+++ b/src/components/Tenanat/SubScription.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SubScription = () => {
+  return (
+    <div>SubScription</div>
+  )
+}
+
+export default SubScription
\ No newline at end of file
diff --git a/src/components/Tenanat/TenantForm.jsx b/src/components/Tenanat/TenantForm.jsx
new file mode 100644
index 00000000..1a4a1fc3
--- /dev/null
+++ b/src/components/Tenanat/TenantForm.jsx
@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import ContactInfro from "./ContactInfro";
+import SubScription from "./SubScription";
+import OrganizationInfo from "./OrganizationInfo";
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  getStepFields,
+  newTenantSchema,
+  subscriptionDefaultValues,
+  subscriptionSchema,
+  tenantDefaultValues,
+} from "./TenantSchema";
+
+const TenantForm = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [completedTabs, setCompletedTabs] = useState([]);
+
+  const tenantForm = useForm({
+    resolver: zodResolver(newTenantSchema),
+    defaultValues: tenantDefaultValues,
+  });
+
+  const subscriptionForm = useForm({
+    resolver: zodResolver(subscriptionSchema),
+    defaultValues: subscriptionDefaultValues,
+  });
+
+  const getCurrentTrigger = () =>
+    activeTab === 2 ? subscriptionForm.trigger : tenantForm.trigger;
+
+  const handleNext = async () => {
+    const currentStepFields = getStepFields(activeTab);
+    const trigger = getCurrentTrigger();
+
+    const valid = await trigger(currentStepFields);
+
+    if (valid) {
+      setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
+      setActiveTab((prev) => Math.min(prev + 1, newTenantConfig.length - 1));
+    }
+  };
+
+  const onSubmitTenant = (data) => {
+    console.log(data);
+  };
+  const onSubmitSubScription = () => {
+    console.log(data);
+  };
+
+  const newTenantConfig = [
+    {
+      name: "Contact Info",
+      icon: "bx bx-user bx-md",
+      subtitle: "Provide Contact Details",
+      component: <ContactInfro onNext={handleNext} />,
+    },
+    {
+      name: "Organization",
+      icon: "bx bx-home bx-md",
+      subtitle: "Organization Details",
+      component: <OrganizationInfo onNext={handleNext} />,
+    },
+    {
+      name: "SubScription",
+      icon: "bx bx-star bx-md",
+      subtitle: "Select a plan",
+      component: <SubScription />,
+    },
+  ];
+
+  const isSubscriptionTab = activeTab === 2;
+  return (
+    <div id="wizard-property-listing" className="bs-stepper vertical mt-2">
+      <div className="bs-stepper-header border-end text-start">
+        {newTenantConfig.map((step, index) => {
+          const isActive = activeTab === index;
+          const isCompleted = completedTabs.includes(index);
+
+          return (
+            <React.Fragment key={step.name}>
+              <div
+                className={`step ${isActive ? "active" : ""} ${
+                  isCompleted ? "crossed" : ""
+                }`}
+                data-target={`#step-${index}`}
+              >
+                <button
+                  type="button"
+                  className={`step-trigger ${isActive ? "active" : ""}`}
+                    onClick={() => setActiveTab(index)}
+                >
+                  <span className="bs-stepper-circle">
+                    {isCompleted ? (
+                      <i className="bx bx-check"></i>
+                    ) : (
+                      <i className={step.icon}></i>
+                    )}
+                  </span>
+                  <span className="bs-stepper-label">
+                    <span className="bs-stepper-title">{step.name}</span>
+                    <span className="bs-stepper-subtitle">{step.subtitle}</span>
+                  </span>
+                </button>
+              </div>
+              {index < newTenantConfig.length - 1 && (
+                <div className="line"></div>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+
+      <div className="bs-stepper-content">
+        {isSubscriptionTab ? (
+          <FormProvider {...subscriptionForm}>
+            <form onSubmit={subscriptionForm.handleSubmit(onSubmitTenant)}>
+              {newTenantConfig[activeTab].component}
+            </form>
+          </FormProvider>
+        ) : (
+          <FormProvider {...tenantForm}>
+            <form onSubmit={tenantForm.handleSubmit(onSubmitSubScription)}>
+              {newTenantConfig[activeTab].component}
+            </form>
+          </FormProvider>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TenantForm;
diff --git a/src/components/Tenanat/TenantSchema.js b/src/components/Tenanat/TenantSchema.js
new file mode 100644
index 00000000..14a01eae
--- /dev/null
+++ b/src/components/Tenanat/TenantSchema.js
@@ -0,0 +1,100 @@
+import { z } from "zod";
+
+export const newTenantSchema = z.object({
+  firstName: z.string().nonempty("First name is required"),
+  lastName: z.string().nonempty("Last name is required"),
+  email: z.string().email("Invalid email address"),
+  description: z.string().nonempty("Description is required"),
+  domainName: z.string().nonempty("Domain name is required"),
+  billingAddress: z.string().nonempty("Billing address is required"),
+  taxId: z.string().nonempty("Tax ID is required"),
+  logoImage: z.string().nonempty("Logo image is required"),
+  organizationName: z.string().nonempty("Organization name is required"),
+  officeNumber: z.string().nonempty("Office number is required"),
+  contactNumber: z.string().nonempty("Contact number is required"),
+  onBoardingDate: z.coerce.date({
+    required_error: "Onboarding date is required",
+    invalid_type_error: "Invalid date format",
+  }),
+  organizationSize: z.string().nonempty("Organization size is required"),
+  industryId: z.string().uuid("Invalid industry ID"),
+  reference: z.string().nonempty("Reference is required"),
+});
+
+export const tenantDefaultValues = {
+  firstName: "",
+  lastName: "",
+  email: "",
+  description: "",
+  domainName: "",
+  billingAddress: "",
+  taxId: "",
+  logoImage: "",
+  organizationName: "",
+  officeNumber: "",
+  contactNumber: "",
+  onBoardingDate: new Date(), // or `null` if you want it empty
+  organizationSize: "",
+  industryId: "", // should be a valid UUID if pre-filled
+  reference: "",
+};
+
+
+export const subscriptionSchema = z.object({
+  tenantId: z.string().uuid("Invalid tenant ID"),
+  planId: z.string().uuid("Invalid plan ID"),
+  currencyId: z.string().uuid("Invalid currency ID"),
+  maxUsers: z
+    .number({ invalid_type_error: "Max users must be a number" })
+    .min(1, "At least one user is required"),
+  frequency: z
+    .number({ invalid_type_error: "Frequency must be a number" })
+    .min(1, "Frequency must be at least 1"),
+  isTrial: z.boolean(),
+  autoRenew: z.boolean(),
+});
+
+export const subscriptionDefaultValues = {
+  tenantId: "",      // should be a UUID
+  planId: "",        // should be a UUID
+  currencyId: "",    // should be a UUID
+  maxUsers: 1,
+  frequency: 1,
+  isTrial: false,
+  autoRenew: false,
+};
+
+export const getStepFields = (stepIndex) => {
+  const stepFieldMap = {
+    0: [
+      "firstName",
+      "lastName",
+      "email",
+      "contactNumber",
+      "billingAddress",
+    ],
+    1: [
+      "organizationName",
+      "officeNumber",
+      "domainName",
+      "description",
+      "onBoardingDate",
+      "organizationSize",
+      "taxId",
+      "industryId",
+      "reference",
+      "logoImage",
+    ],
+    2: [
+      "tenantId",
+      "planId",
+      "currencyId",
+      "maxUsers",
+      "frequency",
+      "isTrial",
+      "autoRenew",
+    ],
+  };
+
+  return stepFieldMap[stepIndex] || [];
+};
diff --git a/src/components/Tenanat/TenantsList.jsx b/src/components/Tenanat/TenantsList.jsx
new file mode 100644
index 00000000..89782fd6
--- /dev/null
+++ b/src/components/Tenanat/TenantsList.jsx
@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { useTenants } from "../../hooks/useTenant";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+
+const TenantsList = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, isLoading, isError, isInitialLoading, error } = useTenants(
+    ITEMS_PER_PAGE,
+    currentPage
+  );
+
+  const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
+
+  if (isInitialLoading)
+    return (
+      <div>
+        <h1>Loading...</h1>
+      </div>
+    );
+  if (isError) return <div>{error}</div>;
+  return (
+    <div className="card p-2">
+      <div className="text-end">
+        <button className="bt btn-sm btn-primary me-2">
+          <span class="icon-base bx bx-pie-chart-alt me-1"></span>Create Tenant
+        </button>
+      </div>
+      <div class="card-datatable text-nowrap table-responsive"></div>
+    </div>
+  );
+};
+
+export default TenantsList;
diff --git a/src/components/common/Label.jsx b/src/components/common/Label.jsx
new file mode 100644
index 00000000..030c22d6
--- /dev/null
+++ b/src/components/common/Label.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const Label = ({ htmlFor, children, required = false, className = "" }) => {
+  return (
+    <label htmlFor={htmlFor} className={`form-label d-block ${className}`}>
+      {children}
+      {required && <span className="text-danger ms-1">*</span>}
+    </label>
+  );
+};
+
+export default Label;
diff --git a/src/data/menuData.json b/src/data/menuData.json
index bbd37e2c..94f6f72c 100644
--- a/src/data/menuData.json
+++ b/src/data/menuData.json
@@ -73,9 +73,9 @@
                 "link": "",
                 "submenu": [
                     {
-                        "text": "Users",
+                        "text": "Tenants",
                         "available": true,
-                        "link": "/employees/"
+                        "link": "/tenants"
                     },
                     {
                         "text": "Masters",
diff --git a/src/hooks/useTenant.js b/src/hooks/useTenant.js
new file mode 100644
index 00000000..88e47140
--- /dev/null
+++ b/src/hooks/useTenant.js
@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query";
+import { TenantRepository } from "../repositories/TenantRepository";
+
+export const useTenants = (
+  pageSize,
+  pageNumber,
+  filter,
+  searchString = ""
+) => {
+  return useQuery({
+    queryKey: ["Tenants", pageNumber, pageSize],
+    queryFn: async () => {
+      const response = await TenantRepository.getTenanatList(
+        pageSize,
+        pageNumber,
+      );
+      return response.data;
+    },
+    keepPreviousData: true,
+    staleTime: 5 * 60 * 1000,
+  });
+};
diff --git a/src/pages/Tenant/CreateTenant.jsx b/src/pages/Tenant/CreateTenant.jsx
new file mode 100644
index 00000000..c3bff3e2
--- /dev/null
+++ b/src/pages/Tenant/CreateTenant.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import Breadcrumb from '../../components/common/Breadcrumb'
+import TenantForm from '../../components/Tenanat/TenantForm'
+
+const CreateTenant = () => {
+  return (
+    <div className='container-fluid'>
+     <Breadcrumb
+          data={[
+            { label: "Home", link: "/dashboard" },
+            { label: "Tenant", link: '/tenants' },
+            { label: "New Tenant", link: null },
+          ]}
+        />
+        <TenantForm/>
+    </div>
+  )
+}
+
+export default CreateTenant
\ No newline at end of file
diff --git a/src/pages/Tenant/TenantPage.jsx b/src/pages/Tenant/TenantPage.jsx
new file mode 100644
index 00000000..78eeb889
--- /dev/null
+++ b/src/pages/Tenant/TenantPage.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import Breadcrumb from '../../components/common/Breadcrumb'
+import TenantsList from '../../components/Tenanat/TenantsList'
+
+const TenantPage = () => {
+  return (
+    <div className='container-fluid'>
+         <Breadcrumb
+          data={[
+            { label: "Home", link: "/dashboard" },
+            { label: "Tenant", link: null },
+          ]}
+        />
+
+        <TenantsList />
+        
+    </div>
+  )
+}
+
+export default TenantPage
\ No newline at end of file
diff --git a/src/repositories/TenantRepository.jsx b/src/repositories/TenantRepository.jsx
new file mode 100644
index 00000000..4a6e2fe1
--- /dev/null
+++ b/src/repositories/TenantRepository.jsx
@@ -0,0 +1,10 @@
+import { api } from "../utils/axiosClient";
+
+export const TenantRepository = {
+
+    getTenanatList:(pageSize, pageNumber, filter,searchString)=>{
+         const payloadJsonString = JSON.stringify(filter);
+       return api.get(`/api/Tenant/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`)
+    }
+}
+
diff --git a/src/router/AppRoutes.jsx b/src/router/AppRoutes.jsx
index 5ce5b6d4..4993ef96 100644
--- a/src/router/AppRoutes.jsx
+++ b/src/router/AppRoutes.jsx
@@ -38,6 +38,8 @@ import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
 import ProtectedRoute from "./ProtectedRoute";
 import Directory from "../pages/Directory/Directory";
 import LoginWithOtp from "../pages/authentication/LoginWithOtp";
+import TenantPage from "../pages/Tenant/TenantPage";
+import CreateTenant from "../pages/Tenant/CreateTenant";
 
 const router = createBrowserRouter(
   [
@@ -77,6 +79,8 @@ const router = createBrowserRouter(
             { path: "/activities/reports", element: <Reports /> },
             { path: "/gallary", element: <ImageGallary /> },
             { path: "/masters", element: <MasterPage /> },
+             { path: "/tenants", element: <TenantPage /> },
+             { path: "/tenants/new-tenant", element: <CreateTenant /> },
             { path: "/help/support", element: <Support /> },
             { path: "/help/docs", element: <Documentation /> },
             { path: "/help/connect", element: <Connect /> },

From 918a5ee9bed6d454d747e162913a0cb011beba79 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Tue, 5 Aug 2025 14:23:30 +0530
Subject: [PATCH 2/6] create new tenant app

---
 src/components/Tenanat/ContactInfro.jsx     |   2 +-
 src/components/Tenanat/LogoUpload.jsx       |  85 +++++++++++
 src/components/Tenanat/OrganizationInfo.jsx | 155 +++++++++++++-------
 src/components/Tenanat/SubScription.jsx     |   8 +-
 src/components/Tenanat/TenantForm.jsx       |   8 +-
 src/components/Tenanat/TenantSchema.js      |   4 +-
 src/hooks/useTenant.js                      |  22 +++
 src/repositories/TenantRepository.jsx       |   4 +-
 8 files changed, 224 insertions(+), 64 deletions(-)
 create mode 100644 src/components/Tenanat/LogoUpload.jsx

diff --git a/src/components/Tenanat/ContactInfro.jsx b/src/components/Tenanat/ContactInfro.jsx
index 34da10c3..d0b2c3c3 100644
--- a/src/components/Tenanat/ContactInfro.jsx
+++ b/src/components/Tenanat/ContactInfro.jsx
@@ -96,7 +96,7 @@ const ContactInfro = ({ onNext }) => {
         )}
        </div>
           <div className="d-flex justify-content-end mt-3">
-        <button type="button" className="btn btn-primary" onClick={handleNext}>
+        <button type="button" className="btn btn-sm btn-primary" onClick={handleNext}>
           Next
         </button>
       </div>
diff --git a/src/components/Tenanat/LogoUpload.jsx b/src/components/Tenanat/LogoUpload.jsx
new file mode 100644
index 00000000..7c30d80f
--- /dev/null
+++ b/src/components/Tenanat/LogoUpload.jsx
@@ -0,0 +1,85 @@
+import React from "react";
+import { useFormContext } from "react-hook-form";
+
+const toBase64 = (file) =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+
+export const LogoUpload = ({ preview, setPreview, fileName, setFileName }) => {
+  const {
+    register,
+    setValue,
+    formState: { errors },
+  } = useFormContext();
+
+  const handleUpload = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > 5 * 1024 * 1024) {
+      alert("File exceeds 5MB limit");
+      return;
+    }
+
+    const base64 = await toBase64(file);
+    setValue("logoImage", base64, { shouldValidate: true });
+    setFileName(file.name);
+    setPreview(URL.createObjectURL(file));
+    e.target.value = "";
+  };
+
+  const handleClear = () => {
+    setValue("logoImage", "", { shouldValidate: true });
+    setPreview(null);
+    setFileName("");
+  };
+
+  return (
+    <div className="col-sm-12 mb-3">
+      <div
+        className="border border-secondary border-dashed rounded p-2 text-center  position-relative"
+        style={{ cursor: "pointer" }}
+        onClick={() => document.getElementById("logoImageInput")?.click()}
+      >
+        <i className="bx bx-cloud-upload d-block bx-lg mb-2"></i>
+        <span className="text-muted">Click or browse to upload</span>
+
+        <input
+          type="file"
+          id="logoImageInput"
+          accept="image/png, image/jpeg"
+          style={{ display: "none" }}
+          {...register("logoImage")}
+          onChange={handleUpload}
+        />
+      </div>
+
+      {errors.logoImage && (
+        <small className="danger-text">{errors.logoImage.message}</small>
+      )}
+
+      {preview && (
+        <div className="mt-2">
+          <img
+            src={preview}
+            alt="Preview"
+            className="img-thumbnail"
+            style={{ maxHeight: "40px" }}
+          />
+          <div className="d-flex align-items-center gap-2 mt-1">
+            <span className="small text-muted">{fileName}</span>
+            <i
+              className="bx bx-trash bx-sm text-danger"
+              style={{ cursor: "pointer" }}
+              onClick={handleClear}
+            ></i>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Tenanat/OrganizationInfo.jsx b/src/components/Tenanat/OrganizationInfo.jsx
index b332d3a0..59401538 100644
--- a/src/components/Tenanat/OrganizationInfo.jsx
+++ b/src/components/Tenanat/OrganizationInfo.jsx
@@ -1,34 +1,61 @@
-import React from "react";
+import React, { useState } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
+import { useIndustries } from "../../hooks/useTenant";
+import { LogoUpload } from "./LogoUpload";
 
-const OrganizationInfo = ({ onNext, onPrev }) => {
+const OrganizationInfo = ({ onNext, onPrev,onSubmitTenant  }) => {
+  const { data, isError, isLoading: industryLoading } = useIndustries();
+  const [logoPreview, setLogoPreview] = useState(null);
+  const [logoName, setLogoName] = useState("");
   const {
     register,
     control,
+    setValue,
+    getValues,
     trigger,
     formState: { errors },
   } = useFormContext();
 
   const handleNext = async () => {
-    const valid = await trigger([
-      "organizationName",
-      "officeNumber",
-      "domainName",
-      "description",
-      "onBoardingDate",
-      "organizationSize",
-      "taxId",
-      "industryId",
-      "reference",
-      "logoImage",
-    ]);
-    if (valid) onNext();
-  };
+  const valid = await trigger([
+    "organizationName",
+    "officeNumber",
+    "domainName",
+    "description",
+    "onBoardingDate",
+    "organizationSize",
+    "taxId",
+    "industryId",
+    "reference",
+    "logoImage",
+  ]);
+
+  if (valid) {
+    const data = getValues(); 
+    onSubmitTenant(data);    
+    onNext();                 
+  }
+};
+
+
+  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-6">
+    <div className="row g-2">
       <div className="col-sm-6">
         <Label htmlFor="organizationName" required>
           Organization Name
@@ -112,9 +139,6 @@ const OrganizationInfo = ({ onNext, onPrev }) => {
   <div className="invalid-feedback">{errors.onBoardingDate.message}</div>
 )} */}
 
-        <label htmlFor="onBoardingDate" className="form-label">
-          Onboarding Date <span className="text-danger">*</span>
-        </label>
         <input
           type="date"
           id="onBoardingDate"
@@ -134,14 +158,22 @@ const OrganizationInfo = ({ onNext, onPrev }) => {
         <Label htmlFor="organizationSize" required>
           Organization Size
         </Label>
-        <input
+        {/* <input
           id="organizationSize"
           type="number"
           className={`form-control form-control-sm ${
             errors.organizationSize ? "is-invalid" : ""
           }`}
           {...register("organizationSize")}
-        />
+        /> */}
+
+        <select className="form-select form-select-sm"  {...register("organizationSize")}>
+          {orgSize.map((org) => (
+            <option key={org.val} value={org.val}>
+              {org.name}
+            </option>
+          ))}
+        </select>
         {errors.organizationSize && (
           <div className="invalid-feedback">
             {errors.organizationSize.message}
@@ -153,23 +185,20 @@ const OrganizationInfo = ({ onNext, onPrev }) => {
         <Label htmlFor="industryId" required>
           Industry
         </Label>
-        <Controller
-          name="industryId"
-          control={control}
-          render={({ field }) => (
-            <Select
-              {...field}
-              id="industryId"
-              className={`form-control form-control-sm ${
-                errors.industryId ? "is-invalid" : ""
-              }`}
-              options={[
-                { label: "Tech", value: 1 },
-                { label: "Healthcare", value: 2 },
-              ]} // replace with your data
-            />
+        <select
+          className="form-select form-select-sm"
+          {...register("industryId")}
+        >
+          {industryLoading ? (
+            <option value="">Loading...</option>
+          ) : (
+            data?.map((indu) => (
+              <option key={indu.id} value={indu.id}>
+                {indu.name}
+              </option>
+            ))
           )}
-        />
+        </select>
         {errors.industryId && (
           <div className="invalid-feedback">{errors.industryId.message}</div>
         )}
@@ -177,13 +206,20 @@ const OrganizationInfo = ({ onNext, onPrev }) => {
 
       <div className="col-sm-6">
         <Label htmlFor="reference">Reference</Label>
-        <input
+        {/* <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) => (
+            <option key={org.val} value={org.val}>
+              {org.name}
+            </option>
+          ))}
+        </select>
         {errors.reference && (
           <div className="invalid-feedback">{errors.reference.message}</div>
         )}
@@ -204,26 +240,33 @@ const OrganizationInfo = ({ onNext, onPrev }) => {
         )}
       </div>
 
-      <div className="col-sm-12">
-        <Label htmlFor="logoImage">Logo Image</Label>
-        <input
-          id="logoImage"
-          type="file"
-          className={`form-control form-control-sm ${
-            errors.logoImage ? "is-invalid" : ""
-          }`}
-          {...register("logoImage")}
-        />
-        {errors.logoImage && (
-          <div className="invalid-feedback">{errors.logoImage.message}</div>
-        )}
-      </div>
+<div className="col-sm-12">
+  <Label htmlFor="logImage">Logo Image</Label>
+
+      <LogoUpload
+        preview={logoPreview}
+        setPreview={setLogoPreview}
+        fileName={logoName}
+        setFileName={setLogoName}
+      />
+
+</div>
+
+
 
       <div className="d-flex justify-content-between mt-3">
-        <button type="button" className="btn btn-secondary" onClick={onPrev}>
+        <button
+          type="button"
+          className="btn btn-sm btn-secondary"
+          onClick={onPrev}
+        >
           Back
         </button>
-        <button type="button" className="btn btn-primary" onClick={handleNext}>
+        <button
+          type="button"
+          className="btn btn-sm btn-primary"
+          onClick={handleNext}
+        >
           Next
         </button>
       </div>
diff --git a/src/components/Tenanat/SubScription.jsx b/src/components/Tenanat/SubScription.jsx
index 287e38de..50bf5ad8 100644
--- a/src/components/Tenanat/SubScription.jsx
+++ b/src/components/Tenanat/SubScription.jsx
@@ -1,8 +1,14 @@
 import React from 'react'
+import { useSubscriptionPlan } from '../../hooks/useTenant'
 
 const SubScription = () => {
+  const {data,isError,isPending} = useSubscriptionPlan()
+  console.log(data)
   return (
-    <div>SubScription</div>
+    <div>
+
+      <h1>Scription</h1>
+    </div>
   )
 }
 
diff --git a/src/components/Tenanat/TenantForm.jsx b/src/components/Tenanat/TenantForm.jsx
index 1a4a1fc3..d80bde65 100644
--- a/src/components/Tenanat/TenantForm.jsx
+++ b/src/components/Tenanat/TenantForm.jsx
@@ -16,6 +16,8 @@ const TenantForm = () => {
   const [activeTab, setActiveTab] = useState(0);
   const [completedTabs, setCompletedTabs] = useState([]);
 
+
+
   const tenantForm = useForm({
     resolver: zodResolver(newTenantSchema),
     defaultValues: tenantDefaultValues,
@@ -59,7 +61,7 @@ const TenantForm = () => {
       name: "Organization",
       icon: "bx bx-home bx-md",
       subtitle: "Organization Details",
-      component: <OrganizationInfo onNext={handleNext} />,
+      component: <OrganizationInfo onNext={handleNext} onSubmitTenant={onSubmitTenant}  />,
     },
     {
       name: "SubScription",
@@ -72,7 +74,7 @@ const TenantForm = () => {
   const isSubscriptionTab = activeTab === 2;
   return (
     <div id="wizard-property-listing" className="bs-stepper vertical mt-2">
-      <div className="bs-stepper-header border-end text-start">
+      <div className="bs-stepper-header border-end text-start ">
         {newTenantConfig.map((step, index) => {
           const isActive = activeTab === index;
           const isCompleted = completedTabs.includes(index);
@@ -104,7 +106,7 @@ const TenantForm = () => {
                 </button>
               </div>
               {index < newTenantConfig.length - 1 && (
-                <div className="line"></div>
+                <div className="line text-primary"></div>
               )}
             </React.Fragment>
           );
diff --git a/src/components/Tenanat/TenantSchema.js b/src/components/Tenanat/TenantSchema.js
index 14a01eae..380960a0 100644
--- a/src/components/Tenanat/TenantSchema.js
+++ b/src/components/Tenanat/TenantSchema.js
@@ -4,11 +4,11 @@ export const newTenantSchema = z.object({
   firstName: z.string().nonempty("First name is required"),
   lastName: z.string().nonempty("Last name is required"),
   email: z.string().email("Invalid email address"),
-  description: z.string().nonempty("Description is required"),
+  description: z.string().optional(),
   domainName: z.string().nonempty("Domain name is required"),
   billingAddress: z.string().nonempty("Billing address is required"),
   taxId: z.string().nonempty("Tax ID is required"),
-  logoImage: z.string().nonempty("Logo image is required"),
+  logoImage: z.string().optional(),
   organizationName: z.string().nonempty("Organization name is required"),
   officeNumber: z.string().nonempty("Office number is required"),
   contactNumber: z.string().nonempty("Contact number is required"),
diff --git a/src/hooks/useTenant.js b/src/hooks/useTenant.js
index 88e47140..04f43465 100644
--- a/src/hooks/useTenant.js
+++ b/src/hooks/useTenant.js
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { TenantRepository } from "../repositories/TenantRepository";
+import { MarketRepository } from "../repositories/MarketRepository";
 
 export const useTenants = (
   pageSize,
@@ -20,3 +21,24 @@ export const useTenants = (
     staleTime: 5 * 60 * 1000,
   });
 };
+
+
+export const useIndustries=()=>{
+  return useQuery({
+    queryKey:['Industries'],
+    queryFn: async()=>{
+      const res =  await MarketRepository.getIndustries();
+      return res.data;
+    }
+  })
+}
+
+export const useSubscriptionPlan=()=>{
+  return useQuery({
+    queryKey:['SubscriptionPlan'],
+    queryFn:async()=>{
+      const res = await TenantRepository.getSubscriptionPlan();
+      return res.data;
+    }
+  })
+}
\ No newline at end of file
diff --git a/src/repositories/TenantRepository.jsx b/src/repositories/TenantRepository.jsx
index 4a6e2fe1..60abb9d2 100644
--- a/src/repositories/TenantRepository.jsx
+++ b/src/repositories/TenantRepository.jsx
@@ -5,6 +5,8 @@ export const TenantRepository = {
     getTenanatList:(pageSize, pageNumber, filter,searchString)=>{
          const payloadJsonString = JSON.stringify(filter);
        return api.get(`/api/Tenant/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`)
-    }
+    },
+
+    getSubscriptionPlan:()=>api.get(`/api/Tenant/list/subscription-plan`)
 }
 

From c1d3b831ccd787ef984c91936c51124d781c305b Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Tue, 5 Aug 2025 19:10:29 +0530
Subject: [PATCH 3/6] tenant creating layout setup properly

---
 src/components/Tenanat/LogoUpload.jsx       |  6 +-
 src/components/Tenanat/SegmentedControl.jsx | 43 +++++++++++
 src/components/Tenanat/SubScription.jsx     | 86 ++++++++++++++++++---
 src/hooks/useTenant.js                      | 29 ++++++-
 src/repositories/TenantRepository.jsx       |  4 +-
 5 files changed, 151 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Tenanat/SegmentedControl.jsx

diff --git a/src/components/Tenanat/LogoUpload.jsx b/src/components/Tenanat/LogoUpload.jsx
index 7c30d80f..aa6fbc12 100644
--- a/src/components/Tenanat/LogoUpload.jsx
+++ b/src/components/Tenanat/LogoUpload.jsx
@@ -63,12 +63,12 @@ export const LogoUpload = ({ preview, setPreview, fileName, setFileName }) => {
       )}
 
       {preview && (
-        <div className="mt-2">
+        <div className="mt-2 d-flex align-items-start gap-2">
           <img
             src={preview}
             alt="Preview"
-            className="img-thumbnail"
-            style={{ maxHeight: "40px" }}
+            className="img-thumbnail rounded"
+            style={{ maxHeight: "35px" }}
           />
           <div className="d-flex align-items-center gap-2 mt-1">
             <span className="small text-muted">{fileName}</span>
diff --git a/src/components/Tenanat/SegmentedControl.jsx b/src/components/Tenanat/SegmentedControl.jsx
new file mode 100644
index 00000000..4d936c3a
--- /dev/null
+++ b/src/components/Tenanat/SegmentedControl.jsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+
+const SegmentedControl = ({setFrequency}) => {
+  const [selected, setSelected] = useState(3);
+useEffect(()=>{
+  setFrequency(selected)
+},[selected])
+  return (
+    <div className="d-inline-flex border rounded-pill overflow-hidden shadow-sm">
+      <button
+        type="button"
+        className={`btn px-4 py-2 rounded-0  ${selected === 0 ? 'active btn-primary text-white' : ''}`}
+        onClick={() => setSelected(0)}
+      >
+        Monthly
+      </button>
+      <button
+        type="button"
+        className={`btn px-4 py-2 rounded-0  ${selected === 1? 'active btn-primary text-white' : ''}`}
+        onClick={() => setSelected(1)}
+      >
+     Quaterly
+      </button>
+      <button
+        type="button"
+        className={`btn px-4 py-2 rounded-0  ${selected === 2 ? 'active btn-primary text-white' : ''}`}
+        onClick={() => setSelected(2)}
+      >
+    Half-Yearly
+      </button>
+
+      <button
+        type="button"
+        className={`btn px-4 py-2 rounded-0  ${selected === 3 ? 'active btn-primary text-white' : ''}`}
+        onClick={() => setSelected(3)}
+      >
+    Yearly
+      </button>
+    </div>
+  );
+};
+
+export default SegmentedControl;
diff --git a/src/components/Tenanat/SubScription.jsx b/src/components/Tenanat/SubScription.jsx
index 50bf5ad8..9d6ed387 100644
--- a/src/components/Tenanat/SubScription.jsx
+++ b/src/components/Tenanat/SubScription.jsx
@@ -1,15 +1,83 @@
-import React from 'react'
-import { useSubscriptionPlan } from '../../hooks/useTenant'
+import React, { useState } from "react";
+import { useSubscriptionPlan } from "../../hooks/useTenant";
+import SegmentedControl from "./SegmentedControl";
 
 const SubScription = () => {
-  const {data,isError,isPending} = useSubscriptionPlan()
-  console.log(data)
+  const [Frequency, setFrequency] = useState(3);
+  const[selectedPlanId,setSelectedPlanId] = useState()
+  const { data, isError, isLoading } = useSubscriptionPlan(Frequency);
+  console.log(Frequency);
   return (
-    <div>
+    <div className="text-start">
+      <SegmentedControl setFrequency={setFrequency} />
 
-      <h1>Scription</h1>
+      {!isLoading && !isError && data.length > 0 && (
+        <>
+          <div className="row g-1 my-1">
+            {data.map((plan) => (
+              <div key={plan.id} className="col-md-6">
+                <div
+                  className={`card h-100 shadow-sm cursor-pointer ${
+                    selectedPlanId === plan.id ? "border-primary border-2" : ""
+                  }`}
+                  onClick={() => setSelectedPlanId(plan.id)}
+                  style={{ cursor: "pointer" }}
+                >
+                  <div className="card-body d-flex flex-column">
+                    <div className="d-flex align-items-center gap-3 mb-3">
+                      <i
+                        className="bx bxs-package"
+                        style={{ fontSize: "40px", color: "#6366f1" }}
+                      ></i>
+                      <div>
+                        <h5 className="card-title fw-bold mb-1">
+                          {plan.planName}
+                        </h5>
+                        <p className="text-muted mb-0">{plan.description}</p>
+                      </div>
+                    </div>
+
+                    <h2 className="fw-bold mt-auto mb-3">
+                      {plan.currency?.symbol}
+                      {plan.price}
+                      {/* <small className="fs-6 fw-normal">
+                        /{selectedBilling.label.toLowerCase()}
+                      </small> */}
+                    </h2>
+
+                    <ul className="list-unstyled mb-4">
+                      <li className="mb-2">
+                        <i className="bx bx-check text-success me-2"></i>
+                        Max Users: {plan.maxUser}
+                      </li>
+                      <li className="mb-2">
+                        <i className="bx bx-check text-success me-2"></i>
+                        Storage: {plan.maxStorage} MB
+                      </li>
+                      <li className="mb-2">
+                        <i className="bx bx-check text-success me-2"></i>
+                        Trial Days: {plan.trialDays}
+                      </li>
+                    </ul>
+                    <button
+                      className={`btn mt-auto ${
+                        selectedPlanId === plan.id
+                          ? "btn-primary"
+                          : "btn-outline-primary"
+                      }`}
+                      onClick={() => setSelectedPlanId(plan.id)}
+                    >
+                      {selectedPlanId === plan.id ? "Selected" : "Get Plan"}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
     </div>
-  )
-}
+  );
+};
 
-export default SubScription
\ No newline at end of file
+export default SubScription;
diff --git a/src/hooks/useTenant.js b/src/hooks/useTenant.js
index 04f43465..9d4aa15c 100644
--- a/src/hooks/useTenant.js
+++ b/src/hooks/useTenant.js
@@ -1,6 +1,7 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { TenantRepository } from "../repositories/TenantRepository";
 import { MarketRepository } from "../repositories/MarketRepository";
+import showToast from "../services/toastService";
 
 export const useTenants = (
   pageSize,
@@ -33,12 +34,32 @@ export const useIndustries=()=>{
   })
 }
 
-export const useSubscriptionPlan=()=>{
+export const useSubscriptionPlan=(freq)=>{
   return useQuery({
-    queryKey:['SubscriptionPlan'],
+    queryKey:['SubscriptionPlan',freq],
     queryFn:async()=>{
-      const res = await TenantRepository.getSubscriptionPlan();
+      const res = await TenantRepository.getSubscriptionPlan(freq);
       return res.data;
     }
   })
+}
+
+// ------------Mutation---------------------
+
+export const usecreateTenant = (onSuccessCallback)=>{
+  return useMutation({
+    mutationFn:async(tenantPayload)=>{
+      const res =  await TenantRepository.createTenant(tenantPayload);
+      return res.data;
+    },
+    onSuccess:(data,variables)=>{
+      showToast("Tenant Created SuccessFully","success")
+       
+       if(onSuccessCallback) onSuccessCallback()
+    },
+  onError:(error)=>{
+    showToast(error.response.message || error.message || `Something went wrong`,"error")
+  }
+
+  })
 }
\ No newline at end of file
diff --git a/src/repositories/TenantRepository.jsx b/src/repositories/TenantRepository.jsx
index 60abb9d2..6f868116 100644
--- a/src/repositories/TenantRepository.jsx
+++ b/src/repositories/TenantRepository.jsx
@@ -7,6 +7,8 @@ export const TenantRepository = {
        return api.get(`/api/Tenant/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`)
     },
 
-    getSubscriptionPlan:()=>api.get(`/api/Tenant/list/subscription-plan`)
+    getSubscriptionPlan:(freq)=>api.get(`/api/Tenant/list/subscription-plan?frequency=${freq}`),
+
+    createTenant:(data)=>api.post('/api/Tenant/create',data)
 }
 

From 6f2ddacfd1c091fb5a7ecc6fc8b1e8f17a65f0ff Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Wed, 6 Aug 2025 19:42:40 +0530
Subject: [PATCH 4/6] tenant and subscript form full setup

---
 src/components/Tenanat/ContactInfro.jsx     |   2 +-
 src/components/Tenanat/SegmentedControl.jsx |  12 +-
 src/components/Tenanat/SubScription.jsx     | 213 +++++++++++++++-----
 src/components/Tenanat/TenantForm.jsx       |   8 +-
 src/components/Tenanat/TenantSchema.js      |  16 +-
 src/utils/constants.jsx                     |   9 +-
 6 files changed, 194 insertions(+), 66 deletions(-)

diff --git a/src/components/Tenanat/ContactInfro.jsx b/src/components/Tenanat/ContactInfro.jsx
index d0b2c3c3..316dce09 100644
--- a/src/components/Tenanat/ContactInfro.jsx
+++ b/src/components/Tenanat/ContactInfro.jsx
@@ -24,7 +24,7 @@ const ContactInfro = ({ onNext }) => {
     }
   };
   return (
-    <div class="row g-6">
+    <div className="row g-6">
       <div className="col-sm-6">
         <Label htmlFor="firstName" required>
           First Name
diff --git a/src/components/Tenanat/SegmentedControl.jsx b/src/components/Tenanat/SegmentedControl.jsx
index 4d936c3a..2adf5bf6 100644
--- a/src/components/Tenanat/SegmentedControl.jsx
+++ b/src/components/Tenanat/SegmentedControl.jsx
@@ -6,24 +6,25 @@ useEffect(()=>{
   setFrequency(selected)
 },[selected])
   return (
-    <div className="d-inline-flex border rounded-pill overflow-hidden shadow-sm">
+    <div className='text-center mt-6'>
+      <div className="d-inline-flex border  rounded-pill overflow-hidden shadow-none">
       <button
         type="button"
-        className={`btn px-4 py-2 rounded-0  ${selected === 0 ? 'active btn-primary text-white' : ''}`}
+        className={`btn px-4 py-2 rounded-0  ${selected === 0 ? 'active btn-secondary text-white' : ''}`}
         onClick={() => setSelected(0)}
       >
         Monthly
       </button>
       <button
         type="button"
-        className={`btn px-4 py-2 rounded-0  ${selected === 1? 'active btn-primary text-white' : ''}`}
+        className={`btn px-4 py-2 rounded-0  ${selected === 1? 'active btn-secondary text-white' : ''}`}
         onClick={() => setSelected(1)}
       >
      Quaterly
       </button>
       <button
         type="button"
-        className={`btn px-4 py-2 rounded-0  ${selected === 2 ? 'active btn-primary text-white' : ''}`}
+        className={`btn px-4 py-2 rounded-0  ${selected === 2 ? 'active btn-secondary text-white' : ''}`}
         onClick={() => setSelected(2)}
       >
     Half-Yearly
@@ -31,12 +32,13 @@ useEffect(()=>{
 
       <button
         type="button"
-        className={`btn px-4 py-2 rounded-0  ${selected === 3 ? 'active btn-primary text-white' : ''}`}
+        className={`btn px-4 py-2 rounded-0  ${selected === 3 ? 'active btn-secondary text-white' : ''}`}
         onClick={() => setSelected(3)}
       >
     Yearly
       </button>
     </div>
+    </div>
   );
 };
 
diff --git a/src/components/Tenanat/SubScription.jsx b/src/components/Tenanat/SubScription.jsx
index 9d6ed387..2835fe56 100644
--- a/src/components/Tenanat/SubScription.jsx
+++ b/src/components/Tenanat/SubScription.jsx
@@ -1,80 +1,199 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useSubscriptionPlan } from "../../hooks/useTenant";
 import SegmentedControl from "./SegmentedControl";
+import { useFormContext } from "react-hook-form";
+import { CONSTANT_TEXT } from "../../utils/constants";
+import Label from "../common/Label";
+
+const SubScription = ({ onSubmitSubScription }) => {
+  const [frequency, setFrequency] = useState(2);
+  const [selectedPlanId, setSelectedPlanId] = useState(null);
+
+  const {
+    data: plans = [],
+    isError,
+    isLoading,
+  } = useSubscriptionPlan(frequency);
+
+  const {
+    register,
+    setValue,
+    getValues,
+    trigger,
+    formState: { errors },
+  } = useFormContext();
+
+
+  const handleSubscriptionSubmit = async () => {
+    const isValid = await trigger([
+      "planId",
+      "currencyId",
+      "maxUsers",
+      "frequency",
+      "isTrial",
+      "autoRenew",
+    ]);
+
+    if (isValid) {
+      const payload = getValues();
+      onSubmitSubScription(payload);
+    }
+  };
+
+  const handlePlanSelection = (plan) => {
+    setSelectedPlanId(plan.id);
+    setValue("planId", plan.id);
+    setValue("currencyId", plan.currency?.id);
+    setValue("frequency", frequency);
+  };
+
+  const selectedPlan = plans.find((p) => p.id === selectedPlanId);
 
-const SubScription = () => {
-  const [Frequency, setFrequency] = useState(3);
-  const[selectedPlanId,setSelectedPlanId] = useState()
-  const { data, isError, isLoading } = useSubscriptionPlan(Frequency);
-  console.log(Frequency);
   return (
     <div className="text-start">
       <SegmentedControl setFrequency={setFrequency} />
 
-      {!isLoading && !isError && data.length > 0 && (
-        <>
-          <div className="row g-1 my-1">
-            {data.map((plan) => (
-              <div key={plan.id} className="col-md-6">
+      {!isLoading && !isError && plans.length > 0 && (
+        <div className="row g-4 my-6">
+          {plans.map((plan) => {
+            const isSelected = plan.id === selectedPlanId;
+
+            return (
+              <div key={plan.id} className="col-md-4">
                 <div
-                  className={`card h-100 shadow-sm cursor-pointer ${
-                    selectedPlanId === plan.id ? "border-primary border-2" : ""
+                  className={`card h-100 shadow-none border-1 cursor-pointer ${
+                    isSelected ? "border-primary border-2" : ""
                   }`}
-                  onClick={() => setSelectedPlanId(plan.id)}
-                  style={{ cursor: "pointer" }}
+                  onClick={() => handlePlanSelection(plan)}
                 >
-                  <div className="card-body d-flex flex-column">
+                  <div className="card-body d-flex flex-column p-3">
                     <div className="d-flex align-items-center gap-3 mb-3">
-                      <i
-                        className="bx bxs-package"
-                        style={{ fontSize: "40px", color: "#6366f1" }}
-                      ></i>
+                      <i className="bx bxs-package text-primary fs-1"></i>
                       <div>
-                        <h5 className="card-title fw-bold mb-1">
+                        <p className="card-title fs-4 fw-bold mb-1">
                           {plan.planName}
-                        </h5>
+                        </p>
                         <p className="text-muted mb-0">{plan.description}</p>
                       </div>
                     </div>
 
-                    <h2 className="fw-bold mt-auto mb-3">
-                      {plan.currency?.symbol}
-                      {plan.price}
-                      {/* <small className="fs-6 fw-normal">
-                        /{selectedBilling.label.toLowerCase()}
-                      </small> */}
-                    </h2>
+                    <h4 className="fw-semibold mt-auto mb-3">
+                      {plan.currency?.symbol} {plan.price}
+                    </h4>
 
-                    <ul className="list-unstyled mb-4">
-                      <li className="mb-2">
-                        <i className="bx bx-check text-success me-2"></i>
-                        Max Users: {plan.maxUser}
+                    <ul className="list-unstyled d-flex gap-4 flex-wrap mb-2">
+                      <li className="d-flex align-items-center">
+                        <i className="bx bx-check-double text-success me-1"></i>
+                        Max Users {plan.maxUser}
                       </li>
-                      <li className="mb-2">
-                        <i className="bx bx-check text-success me-2"></i>
-                        Storage: {plan.maxStorage} MB
+                      <li className="d-flex align-items-center">
+                        <i className="bx bx-check-double text-success me-2"></i>
+                        Storage {plan.maxStorage} MB
                       </li>
-                      <li className="mb-2">
-                        <i className="bx bx-check text-success me-2"></i>
-                        Trial Days: {plan.trialDays}
+                      <li className="d-flex align-items-center">
+                        <i className="bx bx-check-double text-success me-2"></i>
+                        Trial Days {plan.trialDays}
                       </li>
                     </ul>
+
+                    <div>
+                      <div className="divider my-3">
+                        <div className="divider-text card-text text-uppercase text-muted small">
+                          Features
+                        </div>
+                      </div>
+                      {Object.entries(plan.features.modules)
+                        .filter(([key]) => key !== "id")
+                        .map(([key, mod]) => (
+                          <div
+                            key={key}
+                            className="mb-2 d-flex align-items-center"
+                          >
+                            <i
+                              className={`bx bx-check bx-xs rounded-circle text-white ${
+                                mod.enabled ? "bg-success" : "bg-secondary"
+                              }`}
+                            ></i>
+                            <small className="ms-2">{mod.name}</small>
+                          </div>
+                        ))}
+                    </div>
+
                     <button
-                      className={`btn mt-auto ${
-                        selectedPlanId === plan.id
-                          ? "btn-primary"
-                          : "btn-outline-primary"
+                      className={`btn mt-3 ${
+                        isSelected ? "btn-primary" : "btn-outline-primary"
                       }`}
-                      onClick={() => setSelectedPlanId(plan.id)}
+                      onClick={() => handlePlanSelection(plan)}
                     >
-                      {selectedPlanId === plan.id ? "Selected" : "Get Plan"}
+                      {isSelected ? "Selected" : "Select Plan"}
                     </button>
                   </div>
                 </div>
               </div>
-            ))}
+            );
+          })}
+
+          {/* Form Inputs */}
+          <div className="row g-2 mt-3">
+            <div className="col-sm-4">
+              <Label htmlFor="maxUsers" required> Team Size</Label>
+              <input
+                type="number"
+                className="form-control form-control-sm"
+                {...register("maxUsers", {
+                  valueAsNumber: true,
+                  min: { value: 1, message: "Team size must be at least 1" },
+                })}
+              />
+            </div>
+
+            <div className="col-12">
+              <div className="d-flex justify-content-between">
+                <label className="form-label fw-semibold d-block">
+                  Enable auto renew
+                </label>
+                <label className="switch switch-square switch-sm">
+                  <input
+                    type="checkbox"
+                    className="switch-input"
+                    {...register("autoRenew")}
+                  />
+                  <span className="switch-toggle-slider">
+                    <span className="switch-on">
+                      <i className="icon-base bx bx-check"></i>
+                    </span>
+                    <span className="switch-off">
+                      <i className="icon-base bx bx-x"></i>
+                    </span>
+                  </span>
+                </label>
+              </div>
+              <small className="text-secondary text-tiny">
+                {CONSTANT_TEXT.RenewsubscriptionLabel}
+              </small>
+            </div>
           </div>
-        </>
+
+          {Object.keys(errors).length > 0 && (
+            <div class="alert alert-danger" role="alert">
+              {Object.entries(errors).map(([key, error]) => (
+                <div key={key} className="danger-text">
+                  {error?.message}
+                </div>
+              ))}
+            </div>
+          )}
+
+          <div className="d-flex text-center mt-4">
+            <button
+              onClick={handleSubscriptionSubmit}
+              className="btn btn-primary"
+              type="button"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
       )}
     </div>
   );
diff --git a/src/components/Tenanat/TenantForm.jsx b/src/components/Tenanat/TenantForm.jsx
index d80bde65..a7c12e4b 100644
--- a/src/components/Tenanat/TenantForm.jsx
+++ b/src/components/Tenanat/TenantForm.jsx
@@ -46,7 +46,7 @@ const TenantForm = () => {
   const onSubmitTenant = (data) => {
     console.log(data);
   };
-  const onSubmitSubScription = () => {
+  const onSubmitSubScription = (data) => {
     console.log(data);
   };
 
@@ -67,13 +67,13 @@ const TenantForm = () => {
       name: "SubScription",
       icon: "bx bx-star bx-md",
       subtitle: "Select a plan",
-      component: <SubScription />,
+      component: <SubScription onSubmitSubScription={onSubmitSubScription} />,
     },
   ];
 
   const isSubscriptionTab = activeTab === 2;
   return (
-    <div id="wizard-property-listing" className="bs-stepper vertical mt-2">
+    <div id="wizard-property-listing" className="bs-stepper horizontically mt-2">
       <div className="bs-stepper-header border-end text-start ">
         {newTenantConfig.map((step, index) => {
           const isActive = activeTab === index;
@@ -113,7 +113,7 @@ const TenantForm = () => {
         })}
       </div>
 
-      <div className="bs-stepper-content">
+      <div className="bs-stepper-content py-2">
         {isSubscriptionTab ? (
           <FormProvider {...subscriptionForm}>
             <form onSubmit={subscriptionForm.handleSubmit(onSubmitTenant)}>
diff --git a/src/components/Tenanat/TenantSchema.js b/src/components/Tenanat/TenantSchema.js
index 380960a0..dc754730 100644
--- a/src/components/Tenanat/TenantSchema.js
+++ b/src/components/Tenanat/TenantSchema.js
@@ -41,12 +41,12 @@ export const tenantDefaultValues = {
 
 
 export const subscriptionSchema = z.object({
-  tenantId: z.string().uuid("Invalid tenant ID"),
-  planId: z.string().uuid("Invalid plan ID"),
-  currencyId: z.string().uuid("Invalid currency ID"),
+  // tenantId: z.string().uuid("Invalid tenant ID"),
+  planId: z.string().min(1,{message:"Please select Plan"}),
+  currencyId: z.string().uuid("Invalid currency"),
   maxUsers: z
-    .number({ invalid_type_error: "Max users must be a number" })
-    .min(1, "At least one user is required"),
+    .number({ invalid_type_error: " Must be a number" })
+    .min(1, "Team size is required and must be greater than zero"),
   frequency: z
     .number({ invalid_type_error: "Frequency must be a number" })
     .min(1, "Frequency must be at least 1"),
@@ -55,9 +55,9 @@ export const subscriptionSchema = z.object({
 });
 
 export const subscriptionDefaultValues = {
-  tenantId: "",      // should be a UUID
-  planId: "",        // should be a UUID
-  currencyId: "",    // should be a UUID
+  // tenantId: "",     
+  planId: "",        
+  currencyId: "",   
   maxUsers: 1,
   frequency: 1,
   isTrial: false,
diff --git a/src/utils/constants.jsx b/src/utils/constants.jsx
index a8dc1c2d..71c68355 100644
--- a/src/utils/constants.jsx
+++ b/src/utils/constants.jsx
@@ -41,5 +41,12 @@ export const DIRECTORY_MANAGER = "62668630-13ce-4f52-a0f0-db38af2230c5"
 
 export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb"
 
+export const BASIC_PLAN = "08ddd43e-ca62-4cf4-8d7b-569a364307f4"
+
 export const BASE_URL = process.env.VITE_BASE_URL;
-// export const BASE_URL = "https://api.marcoaiot.com";
\ No newline at end of file
+// export const BASE_URL = "https://api.marcoaiot.com";
+
+
+export const CONSTANT_TEXT  = {
+    RenewsubscriptionLabel : " This option; if checked, will renew your productive subscription, if the current plan expires. However, this might prevent you from"
+}
\ No newline at end of file

From 04580a3f28f581001c556fa30a48998c45b59cb4 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Thu, 7 Aug 2025 01:10:59 +0530
Subject: [PATCH 5/6] integrated tenant creation and addsubscription

---
 src/components/Tenanat/OrganizationInfo.jsx |  84 ++++++++-------
 src/components/Tenanat/SubScription.jsx     |  28 ++---
 src/components/Tenanat/TenantForm.jsx       |   2 +-
 src/components/Tenanat/TenantsList.jsx      | 113 ++++++++++++++++++--
 src/components/common/IconButton.jsx        |   4 +-
 src/hooks/useTenant.js                      |  23 +++-
 src/pages/Tenant/TenantPage.jsx             |  17 +++
 src/repositories/TenantRepository.jsx       |   6 +-
 src/slices/globalVariablesSlice.jsx         |   8 +-
 src/utils/constants.jsx                     |   4 +-
 src/utils/dateUtils.jsx                     |   5 +
 11 files changed, 224 insertions(+), 70 deletions(-)

diff --git a/src/components/Tenanat/OrganizationInfo.jsx b/src/components/Tenanat/OrganizationInfo.jsx
index 59401538..0c1e3054 100644
--- a/src/components/Tenanat/OrganizationInfo.jsx
+++ b/src/components/Tenanat/OrganizationInfo.jsx
@@ -2,10 +2,10 @@ import React, { useState } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import Label from "../common/Label";
 import DatePicker from "../common/DatePicker";
-import { useIndustries } from "../../hooks/useTenant";
+import { useCreateTenant, useIndustries } from "../../hooks/useTenant";
 import { LogoUpload } from "./LogoUpload";
 
-const OrganizationInfo = ({ onNext, onPrev,onSubmitTenant  }) => {
+const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
   const { data, isError, isLoading: industryLoading } = useIndustries();
   const [logoPreview, setLogoPreview] = useState(null);
   const [logoName, setLogoName] = useState("");
@@ -18,27 +18,35 @@ const OrganizationInfo = ({ onNext, onPrev,onSubmitTenant  }) => {
     formState: { errors },
   } = useFormContext();
 
+  const {
+    mutate: CreateTenant,
+    isError: tenantError,
+    error,
+    isPending,
+  } = useCreateTenant(() => onNext());
+
   const handleNext = async () => {
-  const valid = await trigger([
-    "organizationName",
-    "officeNumber",
-    "domainName",
-    "description",
-    "onBoardingDate",
-    "organizationSize",
-    "taxId",
-    "industryId",
-    "reference",
-    "logoImage",
-  ]);
+    const valid = await trigger([
+      "organizationName",
+      "officeNumber",
+      "domainName",
+      "description",
+      "onBoardingDate",
+      "organizationSize",
+      "taxId",
+      "industryId",
+      "reference",
+      "logoImage",
+    ]);
 
-  if (valid) {
-    const data = getValues(); 
-    onSubmitTenant(data);    
-    onNext();                 
-  }
-};
+    if (valid) {
+      const tenantPayload = getValues();
+      // onSubmitTenant(data);
+      // onNext();
 
+      CreateTenant(tenantPayload);
+    }
+  };
 
   const Reference = [
     { val: "google", name: "Google" },
@@ -53,7 +61,6 @@ const OrganizationInfo = ({ onNext, onPrev,onSubmitTenant  }) => {
     { val: "600", name: "500+" },
   ];
 
-
   return (
     <div className="row g-2">
       <div className="col-sm-6">
@@ -167,7 +174,10 @@ const OrganizationInfo = ({ onNext, onPrev,onSubmitTenant  }) => {
           {...register("organizationSize")}
         /> */}
 
-        <select className="form-select form-select-sm"  {...register("organizationSize")}>
+        <select
+          className="form-select form-select-sm"
+          {...register("organizationSize")}
+        >
           {orgSize.map((org) => (
             <option key={org.val} value={org.val}>
               {org.name}
@@ -213,7 +223,10 @@ const OrganizationInfo = ({ onNext, onPrev,onSubmitTenant  }) => {
           }`}
           {...register("reference")}
         /> */}
-        <select className="form-select form-select-sm" {...register("reference")}>
+        <select
+          className="form-select form-select-sm"
+          {...register("reference")}
+        >
           {Reference.map((org) => (
             <option key={org.val} value={org.val}>
               {org.name}
@@ -240,25 +253,23 @@ const OrganizationInfo = ({ onNext, onPrev,onSubmitTenant  }) => {
         )}
       </div>
 
-<div className="col-sm-12">
-  <Label htmlFor="logImage">Logo Image</Label>
-
-      <LogoUpload
-        preview={logoPreview}
-        setPreview={setLogoPreview}
-        fileName={logoName}
-        setFileName={setLogoName}
-      />
-
-</div>
-
+      <div className="col-sm-12">
+        <Label htmlFor="logImage">Logo Image</Label>
 
+        <LogoUpload
+          preview={logoPreview}
+          setPreview={setLogoPreview}
+          fileName={logoName}
+          setFileName={setLogoName}
+        />
+      </div>
 
       <div className="d-flex justify-content-between mt-3">
         <button
           type="button"
           className="btn btn-sm btn-secondary"
           onClick={onPrev}
+          disabled={isPending}
         >
           Back
         </button>
@@ -266,8 +277,9 @@ const OrganizationInfo = ({ onNext, onPrev,onSubmitTenant  }) => {
           type="button"
           className="btn btn-sm btn-primary"
           onClick={handleNext}
+          disabled={isPending}
         >
-          Next
+          {isPending ? "Please Wait...":"Submit and Next"}
         </button>
       </div>
     </div>
diff --git a/src/components/Tenanat/SubScription.jsx b/src/components/Tenanat/SubScription.jsx
index 2835fe56..75d12f67 100644
--- a/src/components/Tenanat/SubScription.jsx
+++ b/src/components/Tenanat/SubScription.jsx
@@ -1,14 +1,15 @@
 import React, { useState, useEffect } from "react";
-import { useSubscriptionPlan } from "../../hooks/useTenant";
+import { useAddSubscription, useSubscriptionPlan } from "../../hooks/useTenant";
 import SegmentedControl from "./SegmentedControl";
 import { useFormContext } from "react-hook-form";
 import { CONSTANT_TEXT } from "../../utils/constants";
 import Label from "../common/Label";
+import { useSelector } from "react-redux";
 
 const SubScription = ({ onSubmitSubScription }) => {
   const [frequency, setFrequency] = useState(2);
   const [selectedPlanId, setSelectedPlanId] = useState(null);
-
+  const selectedTenant = useSelector((store)=>store.globalVariables.currentTenant)
   const {
     data: plans = [],
     isError,
@@ -23,7 +24,7 @@ const SubScription = ({ onSubmitSubScription }) => {
     formState: { errors },
   } = useFormContext();
 
-
+  const {mutate:AddSubScription,isPending,error} = useAddSubscription()
   const handleSubscriptionSubmit = async () => {
     const isValid = await trigger([
       "planId",
@@ -36,7 +37,9 @@ const SubScription = ({ onSubmitSubScription }) => {
 
     if (isValid) {
       const payload = getValues();
-      onSubmitSubScription(payload);
+      // onSubmitSubScription(payload);
+      const subscriptionPayload = {...payload,tenantId:selectedTenant.id}
+      AddSubScription(subscriptionPayload)
     }
   };
 
@@ -62,7 +65,7 @@ const SubScription = ({ onSubmitSubScription }) => {
               <div key={plan.id} className="col-md-4">
                 <div
                   className={`card h-100 shadow-none border-1 cursor-pointer ${
-                    isSelected ? "border-primary border-2" : ""
+                    isSelected ? "border-primary border-1 shadow-md" : ""
                   }`}
                   onClick={() => handlePlanSelection(plan)}
                 >
@@ -83,11 +86,11 @@ const SubScription = ({ onSubmitSubScription }) => {
 
                     <ul className="list-unstyled d-flex gap-4 flex-wrap mb-2">
                       <li className="d-flex align-items-center">
-                        <i className="bx bx-check-double text-success me-1"></i>
+                        <i className="bx bx-group  me-1"></i>
                         Max Users {plan.maxUser}
                       </li>
                       <li className="d-flex align-items-center">
-                        <i className="bx bx-check-double text-success me-2"></i>
+                        <i className="bx bx-server me-1"></i>
                         Storage {plan.maxStorage} MB
                       </li>
                       <li className="d-flex align-items-center">
@@ -110,11 +113,9 @@ const SubScription = ({ onSubmitSubScription }) => {
                             className="mb-2 d-flex align-items-center"
                           >
                             <i
-                              className={`bx bx-check bx-xs rounded-circle text-white ${
-                                mod.enabled ? "bg-success" : "bg-secondary"
-                              }`}
+                              className={`fa-regular ${mod.enabled ? "fa-circle-check text-success" : "fa-circle-xmark text-danger"}  `}
                             ></i>
-                            <small className="ms-2">{mod.name}</small>
+                            <small className="ms-1">{mod.name}</small>
                           </div>
                         ))}
                     </div>
@@ -187,10 +188,11 @@ const SubScription = ({ onSubmitSubScription }) => {
           <div className="d-flex text-center mt-4">
             <button
               onClick={handleSubscriptionSubmit}
-              className="btn btn-primary"
+              className="btn btn-sm btn-primary"
               type="button"
+              disabled={isPending}
             >
-              Submit
+              {isPending ? "Please Wait...":"Submit"}
             </button>
           </div>
         </div>
diff --git a/src/components/Tenanat/TenantForm.jsx b/src/components/Tenanat/TenantForm.jsx
index a7c12e4b..9d7bf8da 100644
--- a/src/components/Tenanat/TenantForm.jsx
+++ b/src/components/Tenanat/TenantForm.jsx
@@ -59,7 +59,7 @@ const TenantForm = () => {
     },
     {
       name: "Organization",
-      icon: "bx bx-home bx-md",
+      icon: "bx bx-buildings bx-md",
       subtitle: "Organization Details",
       component: <OrganizationInfo onNext={handleNext} onSubmitTenant={onSubmitTenant}  />,
     },
diff --git a/src/components/Tenanat/TenantsList.jsx b/src/components/Tenanat/TenantsList.jsx
index 89782fd6..253cac22 100644
--- a/src/components/Tenanat/TenantsList.jsx
+++ b/src/components/Tenanat/TenantsList.jsx
@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { useTenants } from "../../hooks/useTenant";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { getTenantStatus } from "../../utils/dateUtils";
+import IconButton from "../common/IconButton";
 
 const TenantsList = () => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -21,17 +23,110 @@ const TenantsList = () => {
         <h1>Loading...</h1>
       </div>
     );
-  if (isError) return <div>{error}</div>;
+  if (isError) return <div>{error.message}</div>;
+
+  const TenantColumns = [
+    {
+      key: "name",
+      label: "Organization",
+      getValue: (t) => (<div className="d-flex align-items-center py-1">
+      <IconButton iconClass="bx bx-sm bx-building" color="warning" size={8}/>{t.name || "N/A"}
+      </div>),
+      align: "text-start",
+    },
+    {
+      key: "domainName",
+      label: "Domain",
+      getValue: (t) =>(
+<div style={{width:'160px'}} className="text-truncate">
+    <a href={t.domainName} className="text-decoration-none">
+  <i className="bx bx-globe text-primary bx-xs me-2"></i>
+  {t.domainName || "N/A"}
+</a>
+</div>
+
+      ),
+      align: "text-start",
+    },
+    {
+      key: "contactName",
+      label: "Contact Person",
+      getValue: (t) => (<div className="d-flex align-items-center"><i className="bx bx-sm bx-user me-1"/>{t.contactName || "N/A"}</div>),
+      align: "text-start",
+    },
+    {
+      key: "contactNumber",
+      label: "Contact",
+      getValue: (t) => t.contactNumber || "N/A",
+      isAlwaysVisible: true,
+    },
+    {
+      key: "status",
+      label: "Status",
+      align: "text-center",
+      getValue: (t) => (
+        <span
+          className={`badge ${
+            getTenantStatus(t.tenantStatus?.id) || "secondary"
+          }`}
+        >
+          {t.tenantStatus?.name || "Unknown"}
+        </span>
+      ),
+    },
+  ];
+
+
   return (
-    <div className="card p-2">
-      <div className="text-end">
-        <button className="bt btn-sm btn-primary me-2">
-          <span class="icon-base bx bx-pie-chart-alt me-1"></span>Create Tenant
-        </button>
+    <>
+      
+   <div className="card p-2 mt-3">
+   <div className="card-datatable text-nowrap table-responsive">
+        <table className="table border-top dataTable text-nowrap">
+          <thead>
+            <tr>
+              {TenantColumns.map((col) => (
+                <th key={col.key} className="sorting d-table-cell">
+                  <div className={col.align}>{col.label}</div>
+                </th>
+              ))}
+          
+            </tr>
+          </thead>
+        <tbody>
+  {data?.data.length > 0 ? (
+    data.data.map((tenant) => (
+      <tr key={tenant.id}>
+        {TenantColumns.map((col) => (
+          <td
+            key={col.key}
+            className={`d-table-cell px-3 py-2 align-middle ${col.align ?? ""}`}
+          >
+            {col.customRender
+              ? col.customRender(tenant)
+              : col.getValue(tenant)}
+          </td>
+        ))}
+      </tr>
+    ))
+  ) : (
+    <tr>
+      <td
+        colSpan={TenantColumns.length + 1}
+        className="text-center py-4"
+      >
+        No Tenants Found
+      </td>
+    </tr>
+  )}
+</tbody>
+
+        </table>
       </div>
-      <div class="card-datatable text-nowrap table-responsive"></div>
-    </div>
+   </div>
+      
+    </>
   );
 };
 
-export default TenantsList;
+export default TenantsList
\ No newline at end of file
diff --git a/src/components/common/IconButton.jsx b/src/components/common/IconButton.jsx
index 362c1db9..616d8cd6 100644
--- a/src/components/common/IconButton.jsx
+++ b/src/components/common/IconButton.jsx
@@ -15,7 +15,7 @@ const IconButton = ({
   iconClass,       // icon class string like 'bx bx-user'
   color = "primary",
   onClick,
-  size = 20,
+  size = 5,
   radius=null,
   style = {},
   ...rest
@@ -31,7 +31,7 @@ const IconButton = ({
       style={{
         backgroundColor,
         color: iconColor,
-          padding: "0.4rem",
+          padding: "0.3rem",
         margin:'0rem 0.2rem',
         ...style,
       }}
diff --git a/src/hooks/useTenant.js b/src/hooks/useTenant.js
index 9d4aa15c..8a2207cd 100644
--- a/src/hooks/useTenant.js
+++ b/src/hooks/useTenant.js
@@ -2,6 +2,8 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { TenantRepository } from "../repositories/TenantRepository";
 import { MarketRepository } from "../repositories/MarketRepository";
 import showToast from "../services/toastService";
+import { useDispatch } from "react-redux";
+import { setCurrentTenant } from "../slices/globalVariablesSlice";
 
 export const useTenants = (
   pageSize,
@@ -19,7 +21,6 @@ export const useTenants = (
       return response.data;
     },
     keepPreviousData: true,
-    staleTime: 5 * 60 * 1000,
   });
 };
 
@@ -46,7 +47,8 @@ export const useSubscriptionPlan=(freq)=>{
 
 // ------------Mutation---------------------
 
-export const usecreateTenant = (onSuccessCallback)=>{
+export const useCreateTenant = (onSuccessCallback)=>{
+  const dispatch = useDispatch()
   return useMutation({
     mutationFn:async(tenantPayload)=>{
       const res =  await TenantRepository.createTenant(tenantPayload);
@@ -54,12 +56,25 @@ export const usecreateTenant = (onSuccessCallback)=>{
     },
     onSuccess:(data,variables)=>{
       showToast("Tenant Created SuccessFully","success")
-       
-       if(onSuccessCallback) onSuccessCallback()
+       dispatch(setCurrentTenant(data))
+      if(onSuccessCallback) onSuccessCallback()
     },
   onError:(error)=>{
     showToast(error.response.message || error.message || `Something went wrong`,"error")
   }
 
   })
+}
+
+export const useAddSubscription =(onSuccessCallback)=>{
+  return useMutation({
+    mutationFn:async(subscriptionPayload)=>{
+      const res = await TenantRepository.createTenant(subscriptionPayload);
+      return res.data;
+    },
+    onSuccess:(data,variables)=>{
+      showToast("Tenant Plan Added SuccessFully","success")
+      if(onSuccessCallback) onSuccessCallback()
+    }
+  })
 }
\ No newline at end of file
diff --git a/src/pages/Tenant/TenantPage.jsx b/src/pages/Tenant/TenantPage.jsx
index 78eeb889..92637b66 100644
--- a/src/pages/Tenant/TenantPage.jsx
+++ b/src/pages/Tenant/TenantPage.jsx
@@ -1,8 +1,10 @@
 import React from 'react'
 import Breadcrumb from '../../components/common/Breadcrumb'
 import TenantsList from '../../components/Tenanat/TenantsList'
+import { useNavigate } from 'react-router-dom'
 
 const TenantPage = () => {
+  const navigate = useNavigate()
   return (
     <div className='container-fluid'>
          <Breadcrumb
@@ -11,6 +13,21 @@ const TenantPage = () => {
             { label: "Tenant", link: null },
           ]}
         />
+        <div className="card p-2">
+        <div className="text-end">
+          <button
+            type="button"
+            data-bs-toggle="tooltip"
+            data-bs-offset="0,8"
+            data-bs-placement="top"
+            data-bs-custom-class="tooltip"
+            title="Add New Tenant"
+            className={`p-1 me-2 bg-primary rounded-circle`} onClick={()=>navigate('/tenants/new-tenant')}
+          >
+            <i className="bx bx-plus fs-4 text-white"></i>
+          </button>
+        </div>
+      </div>
 
         <TenantsList />
         
diff --git a/src/repositories/TenantRepository.jsx b/src/repositories/TenantRepository.jsx
index 6f868116..cd94d3df 100644
--- a/src/repositories/TenantRepository.jsx
+++ b/src/repositories/TenantRepository.jsx
@@ -4,11 +4,13 @@ export const TenantRepository = {
 
     getTenanatList:(pageSize, pageNumber, filter,searchString)=>{
          const payloadJsonString = JSON.stringify(filter);
-       return api.get(`/api/Tenant/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`)
+       return api.get(`/api/Tenant/list?pageSize=${pageSize}&pageNumber=${pageNumber}`)
     },
 
     getSubscriptionPlan:(freq)=>api.get(`/api/Tenant/list/subscription-plan?frequency=${freq}`),
 
-    createTenant:(data)=>api.post('/api/Tenant/create',data)
+    createTenant:(data)=>api.post('/api/Tenant/create',data),
+
+    addSubscription:(data)=>api.post('/api/Tenant/create',data)
 }
 
diff --git a/src/slices/globalVariablesSlice.jsx b/src/slices/globalVariablesSlice.jsx
index 4e14191d..7bdadd51 100644
--- a/src/slices/globalVariablesSlice.jsx
+++ b/src/slices/globalVariablesSlice.jsx
@@ -3,7 +3,8 @@ import { createSlice } from "@reduxjs/toolkit";
 const globalVariablesSlice = createSlice({
   name: "globalVariables",
   initialState: {
-    loginUser:null
+    loginUser:null,
+    currentTenant:null
   },
   reducers: {
     setGlobalVariable: (state, action) => {
@@ -13,9 +14,12 @@ const globalVariablesSlice = createSlice({
     setLoginUserPermmisions: ( state, action ) =>
     {
       state.loginUser = action.payload
+    },
+    setCurrentTenant:(state,action)=>{
+      state.currentTenant = action.payload
     }
   },
 });
 
-export const { setGlobalVariable,setLoginUserPermmisions } = globalVariablesSlice.actions;
+export const { setGlobalVariable,setLoginUserPermmisions,setCurrentTenant } = globalVariablesSlice.actions;
 export default globalVariablesSlice.reducer;
diff --git a/src/utils/constants.jsx b/src/utils/constants.jsx
index 71c68355..8d4cea2e 100644
--- a/src/utils/constants.jsx
+++ b/src/utils/constants.jsx
@@ -44,9 +44,11 @@ export const DIRECTORY_USER = "0f919170-92d4-4337-abd3-49b66fc871bb"
 export const BASIC_PLAN = "08ddd43e-ca62-4cf4-8d7b-569a364307f4"
 
 export const BASE_URL = process.env.VITE_BASE_URL;
+
+export const ActiveTenant = "62b05792-5115-4f99-8ff5-e8374859b191"
 // export const BASE_URL = "https://api.marcoaiot.com";
 
 
 export const CONSTANT_TEXT  = {
-    RenewsubscriptionLabel : " This option; if checked, will renew your productive subscription, if the current plan expires. However, this might prevent you from"
+    RenewsubscriptionLabel : " This option; if checked, will renew your productive subscription, if the current plan expires."
 }
\ No newline at end of file
diff --git a/src/utils/dateUtils.jsx b/src/utils/dateUtils.jsx
index d788f19c..7a7fffbe 100644
--- a/src/utils/dateUtils.jsx
+++ b/src/utils/dateUtils.jsx
@@ -1,4 +1,5 @@
 import moment from "moment";
+import { ActiveTenant } from "./constants";
 
 export const getDateDifferenceInDays = (startDate, endDate) => {
   if (!startDate || !endDate) {
@@ -78,4 +79,8 @@ export  const getCompletionPercentage = (completedWork, plannedWork)=> {
   const clamped = Math.min(Math.max(percentage, 0), 100);
 
   return clamped.toFixed(2); 
+}
+
+export const getTenantStatus =(statusId)=>{
+  return ActiveTenant === statusId ? " bg-label-success":"bg-label-secondary"
 }
\ No newline at end of file

From ed5ff3be4b0a526b494ea35f2893f77dd6e2457b Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Thu, 7 Aug 2025 11:26:23 +0530
Subject: [PATCH 6/6] success fully created tenant with subscription

---
 src/components/Tenanat/Congratulation.jsx   |  17 +++
 src/components/Tenanat/ContactInfro.jsx     |  20 +--
 src/components/Tenanat/OrganizationInfo.jsx |  42 +++----
 src/components/Tenanat/SubScription.jsx     |   8 +-
 src/components/Tenanat/TenantForm.jsx       |  19 ++-
 src/components/Tenanat/TenantsList.jsx      | 130 +++++++++++---------
 src/hooks/useTenant.js                      |  13 +-
 src/pages/Tenant/TenantPage.jsx             |  87 ++++++++-----
 src/repositories/TenantRepository.jsx       |  24 ++--
 9 files changed, 214 insertions(+), 146 deletions(-)
 create mode 100644 src/components/Tenanat/Congratulation.jsx

diff --git a/src/components/Tenanat/Congratulation.jsx b/src/components/Tenanat/Congratulation.jsx
new file mode 100644
index 00000000..372fccee
--- /dev/null
+++ b/src/components/Tenanat/Congratulation.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+
+const Congratulation = () => {
+    const navigate = useNavigate()
+  return (
+   <div className="text-center p-4">
+    <h2>🎉 Congratulations!</h2>
+    <p>Your tenant is successfully onboarded.</p>
+  <div className="d-flex justify-content-center gap-3">
+     <p className='btn btn-sm btn-primary' onClick={()=>navigate('/tenants')}>Go To Tenant list</p>  <p className='btn btn-sm btn-secondary' >Preview Tenant</p>
+  </div>
+  </div>
+  )
+}
+
+export default Congratulation
\ No newline at end of file
diff --git a/src/components/Tenanat/ContactInfro.jsx b/src/components/Tenanat/ContactInfro.jsx
index 316dce09..f9721ffd 100644
--- a/src/components/Tenanat/ContactInfro.jsx
+++ b/src/components/Tenanat/ContactInfro.jsx
@@ -32,11 +32,11 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="firstName"
           type="text"
-          className={`form-control form-control-sm ${errors.firstName ? "is-invalid" : ""}`}
+          className={`form-control form-control-sm`}
           {...register("firstName")}
         />
         {errors.firstName && (
-          <div className="invalid-feedback">{errors.firstName.message}</div>
+          <div className="danger-text">{errors.firstName.message}</div>
         )}
       </div>
       <div className="col-sm-6">
@@ -46,11 +46,11 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="lastName"
           type="text"
-          className={`form-control form-control-sm ${errors.lastName ? "is-invalid" : ""}`}
+          className={`form-control form-control-sm `}
           {...register("lastName")}
         />
         {errors.lastName && (
-          <div className="invalid-feedback">{errors.lastName.message}</div>
+          <div className="danger-text">{errors.lastName.message}</div>
         )}
       </div>
       <div className="col-sm-6">
@@ -60,11 +60,11 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="email"
           type="email"
-          className={`form-control form-control-sm ${errors.email ? "is-invalid" : ""}`}
+          className={`form-control form-control-sm `}
           {...register("email")}
         />
         {errors.email && (
-          <div className="invalid-feedback">{errors.email.message}</div>
+          <div className="danger-text">{errors.email.message}</div>
         )}
       </div>
          <div className="col-sm-6">
@@ -74,11 +74,11 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="contactNumber"
           type="text"
-          className={`form-control form-control-sm ${errors.contactNumber ? "is-invalid" : ""}`}
+          className={`form-control form-control-sm `}
           {...register("contactNumber")}
         />
         {errors.contactNumber && (
-          <div className="invalid-feedback">{errors.contactNumber.message}</div>
+          <div className="danger-text">{errors.contactNumber.message}</div>
         )}
       </div>
        <div className="col-12">
@@ -87,12 +87,12 @@ const ContactInfro = ({ onNext }) => {
         </Label>
         <textarea
           id="billingAddress"
-          className={`form-control  ${errors.billingAddress ? "is-invalid" : ""}`}
+          className={`form-control `}
           {...register("billingAddress")}
           rows={3}
         />
         {errors.billingAddress && (
-          <div className="invalid-feedback">{errors.billingAddress.message}</div>
+          <div className="danger-text">{errors.billingAddress.message}</div>
         )}
        </div>
           <div className="d-flex justify-content-end mt-3">
diff --git a/src/components/Tenanat/OrganizationInfo.jsx b/src/components/Tenanat/OrganizationInfo.jsx
index 0c1e3054..276b3e3a 100644
--- a/src/components/Tenanat/OrganizationInfo.jsx
+++ b/src/components/Tenanat/OrganizationInfo.jsx
@@ -70,13 +70,11 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
 
         <input
           id="organizationName"
-          className={`form-control form-control-sm ${
-            errors.organizationName ? "is-invalid" : ""
-          }`}
+          className={`form-control form-control-sm `}
           {...register("organizationName")}
         />
         {errors.organizationName && (
-          <div className="invalid-feedback">
+          <div className="danger-text">
             {errors.organizationName.message}
           </div>
         )}
@@ -88,13 +86,11 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <input
           id="officeNumber"
-          className={`form-control form-control-sm ${
-            errors.officeNumber ? "is-invalid" : ""
-          }`}
+          className={`form-control form-control-sm `}
           {...register("officeNumber")}
         />
         {errors.officeNumber && (
-          <div className="invalid-feedback">{errors.officeNumber.message}</div>
+          <div className="danger-text">{errors.officeNumber.message}</div>
         )}
       </div>
 
@@ -104,13 +100,11 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <input
           id="domainName"
-          className={`form-control form-control-sm ${
-            errors.domainName ? "is-invalid" : ""
-          }`}
+          className={`form-control form-control-sm `}
           {...register("domainName")}
         />
         {errors.domainName && (
-          <div className="invalid-feedback">{errors.domainName.message}</div>
+          <div className="danger-text">{errors.domainName.message}</div>
         )}
       </div>
 
@@ -120,13 +114,11 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <input
           id="taxId"
-          className={`form-control form-control-sm ${
-            errors.taxId ? "is-invalid" : ""
-          }`}
+          className={`form-control form-control-sm `}
           {...register("taxId")}
         />
         {errors.taxId && (
-          <div className="invalid-feedback">{errors.taxId.message}</div>
+          <div className="danger-text">{errors.taxId.message}</div>
         )}
       </div>
 
@@ -150,12 +142,10 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
           type="date"
           id="onBoardingDate"
           {...register("onBoardingDate")}
-          className={`form-control form-control-sm ${
-            errors.onBoardingDate ? "is-invalid" : ""
-          }`}
+          className={`form-control form-control-sm `}
         />
         {errors.onBoardingDate && (
-          <div className="invalid-feedback">
+          <div className="danger-text">
             {errors.onBoardingDate.message}
           </div>
         )}
@@ -185,7 +175,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
           ))}
         </select>
         {errors.organizationSize && (
-          <div className="invalid-feedback">
+          <div className="danger-text">
             {errors.organizationSize.message}
           </div>
         )}
@@ -210,7 +200,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
           )}
         </select>
         {errors.industryId && (
-          <div className="invalid-feedback">{errors.industryId.message}</div>
+          <div className="danger-text">{errors.industryId.message}</div>
         )}
       </div>
 
@@ -234,7 +224,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
           ))}
         </select>
         {errors.reference && (
-          <div className="invalid-feedback">{errors.reference.message}</div>
+          <div className="danger-text">{errors.reference.message}</div>
         )}
       </div>
 
@@ -243,13 +233,11 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         <textarea
           id="description"
           rows={3}
-          className={`form-control form-control-sm ${
-            errors.description ? "is-invalid" : ""
-          }`}
+          className={`form-control form-control-sm `}
           {...register("description")}
         />
         {errors.description && (
-          <div className="invalid-feedback">{errors.description.message}</div>
+          <div className="danger-text">{errors.description.message}</div>
         )}
       </div>
 
diff --git a/src/components/Tenanat/SubScription.jsx b/src/components/Tenanat/SubScription.jsx
index 75d12f67..d3c11ab3 100644
--- a/src/components/Tenanat/SubScription.jsx
+++ b/src/components/Tenanat/SubScription.jsx
@@ -5,11 +5,13 @@ import { useFormContext } from "react-hook-form";
 import { CONSTANT_TEXT } from "../../utils/constants";
 import Label from "../common/Label";
 import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
-const SubScription = ({ onSubmitSubScription }) => {
+const SubScription = ({ onSubmitSubScription, onNext }) => {
   const [frequency, setFrequency] = useState(2);
   const [selectedPlanId, setSelectedPlanId] = useState(null);
   const selectedTenant = useSelector((store)=>store.globalVariables.currentTenant)
+  const naviget = useNavigate()
   const {
     data: plans = [],
     isError,
@@ -24,7 +26,9 @@ const SubScription = ({ onSubmitSubScription }) => {
     formState: { errors },
   } = useFormContext();
 
-  const {mutate:AddSubScription,isPending,error} = useAddSubscription()
+  const {mutate:AddSubScription,isPending,error} = useAddSubscription(()=>{
+    onNext()
+  } )
   const handleSubscriptionSubmit = async () => {
     const isValid = await trigger([
       "planId",
diff --git a/src/components/Tenanat/TenantForm.jsx b/src/components/Tenanat/TenantForm.jsx
index 9d7bf8da..c2413533 100644
--- a/src/components/Tenanat/TenantForm.jsx
+++ b/src/components/Tenanat/TenantForm.jsx
@@ -11,6 +11,7 @@ import {
   subscriptionSchema,
   tenantDefaultValues,
 } from "./TenantSchema";
+import Congratulation from "./congratulation";
 
 const TenantForm = () => {
   const [activeTab, setActiveTab] = useState(0);
@@ -42,6 +43,10 @@ const TenantForm = () => {
       setActiveTab((prev) => Math.min(prev + 1, newTenantConfig.length - 1));
     }
   };
+ const handlePrev = () => {
+  setActiveTab((prev) => Math.max(prev - 1, 0));
+};
+
 
   const onSubmitTenant = (data) => {
     console.log(data);
@@ -61,13 +66,19 @@ const TenantForm = () => {
       name: "Organization",
       icon: "bx bx-buildings bx-md",
       subtitle: "Organization Details",
-      component: <OrganizationInfo onNext={handleNext} onSubmitTenant={onSubmitTenant}  />,
+      component: <OrganizationInfo onNext={handleNext} onPrev={handlePrev} onSubmitTenant={onSubmitTenant}  />,
     },
     {
       name: "SubScription",
       icon: "bx bx-star bx-md",
       subtitle: "Select a plan",
-      component: <SubScription onSubmitSubScription={onSubmitSubScription} />,
+      component: <SubScription onSubmitSubScription={onSubmitSubScription} onNext={handleNext}/>,
+    },
+      {
+      name: "congratulation",
+      icon: "bx bx-star bx-md",
+      subtitle: "Select a plan",
+      component: <Congratulation />,
     },
   ];
 
@@ -75,7 +86,7 @@ const TenantForm = () => {
   return (
     <div id="wizard-property-listing" className="bs-stepper horizontically mt-2">
       <div className="bs-stepper-header border-end text-start ">
-        {newTenantConfig.map((step, index) => {
+        {newTenantConfig.filter((step) => step.name.toLowerCase() !== "congratulation").map((step, index) => {
           const isActive = activeTab === index;
           const isCompleted = completedTabs.includes(index);
 
@@ -90,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/TenantsList.jsx b/src/components/Tenanat/TenantsList.jsx
index 253cac22..fe6dada6 100644
--- a/src/components/Tenanat/TenantsList.jsx
+++ b/src/components/Tenanat/TenantsList.jsx
@@ -4,7 +4,7 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
 import { getTenantStatus } from "../../utils/dateUtils";
 import IconButton from "../common/IconButton";
 
-const TenantsList = () => {
+const TenantsList = ({searchText}) => {
   const [currentPage, setCurrentPage] = useState(1);
   const { data, isLoading, isError, isInitialLoading, error } = useTenants(
     ITEMS_PER_PAGE,
@@ -20,7 +20,7 @@ const TenantsList = () => {
   if (isInitialLoading)
     return (
       <div>
-        <h1>Loading...</h1>
+        <p>Loading...</p>
       </div>
     );
   if (isError) return <div>{error.message}</div>;
@@ -29,29 +29,40 @@ const TenantsList = () => {
     {
       key: "name",
       label: "Organization",
-      getValue: (t) => (<div className="d-flex align-items-center py-1">
-      <IconButton iconClass="bx bx-sm bx-building" color="warning" size={8}/>{t.name || "N/A"}
-      </div>),
+      getValue: (t) => (
+        <div className="d-flex align-items-center py-1">
+          <IconButton
+            iconClass="bx bx-sm bx-building"
+            color="warning"
+            size={8}
+          />
+          {t.name || "N/A"}
+        </div>
+      ),
       align: "text-start",
     },
     {
       key: "domainName",
       label: "Domain",
-      getValue: (t) =>(
-<div style={{width:'160px'}} className="text-truncate">
-    <a href={t.domainName} className="text-decoration-none">
-  <i className="bx bx-globe text-primary bx-xs me-2"></i>
-  {t.domainName || "N/A"}
-</a>
-</div>
-
+      getValue: (t) => (
+        <div style={{ width: "160px" }} className="text-truncate">
+          <a href={t.domainName} className="text-decoration-none">
+            <i className="bx bx-globe text-primary bx-xs me-2"></i>
+            {t.domainName || "N/A"}
+          </a>
+        </div>
       ),
       align: "text-start",
     },
     {
       key: "contactName",
       label: "Contact Person",
-      getValue: (t) => (<div className="d-flex align-items-center"><i className="bx bx-sm bx-user me-1"/>{t.contactName || "N/A"}</div>),
+      getValue: (t) => (
+        <div className="d-flex align-items-center">
+          <i className="bx bx-sm bx-user me-1" />
+          {t.contactName || "N/A"}
+        </div>
+      ),
       align: "text-start",
     },
     {
@@ -76,57 +87,54 @@ const TenantsList = () => {
     },
   ];
 
-
   return (
     <>
-      
-   <div className="card p-2 mt-3">
-   <div className="card-datatable text-nowrap table-responsive">
-        <table className="table border-top dataTable text-nowrap">
-          <thead>
-            <tr>
-              {TenantColumns.map((col) => (
-                <th key={col.key} className="sorting d-table-cell">
-                  <div className={col.align}>{col.label}</div>
-                </th>
-              ))}
-          
-            </tr>
-          </thead>
-        <tbody>
-  {data?.data.length > 0 ? (
-    data.data.map((tenant) => (
-      <tr key={tenant.id}>
-        {TenantColumns.map((col) => (
-          <td
-            key={col.key}
-            className={`d-table-cell px-3 py-2 align-middle ${col.align ?? ""}`}
-          >
-            {col.customRender
-              ? col.customRender(tenant)
-              : col.getValue(tenant)}
-          </td>
-        ))}
-      </tr>
-    ))
-  ) : (
-    <tr>
-      <td
-        colSpan={TenantColumns.length + 1}
-        className="text-center py-4"
-      >
-        No Tenants Found
-      </td>
-    </tr>
-  )}
-</tbody>
-
-        </table>
+      <div className="card p-2 mt-3">
+        <div className="card-datatable text-nowrap table-responsive">
+          <table className="table border-top dataTable text-nowrap">
+            <thead>
+              <tr>
+                {TenantColumns.map((col) => (
+                  <th key={col.key} className="sorting d-table-cell">
+                    <div className={col.align}>{col.label}</div>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {data?.data.length > 0 ? (
+                data.data.map((tenant) => (
+                  <tr key={tenant.id}>
+                    {TenantColumns.map((col) => (
+                      <td
+                        key={col.key}
+                        className={`d-table-cell px-3 py-2 align-middle ${
+                          col.align ?? ""
+                        }`}
+                      >
+                        {col.customRender
+                          ? col.customRender(tenant)
+                          : col.getValue(tenant)}
+                      </td>
+                    ))}
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td
+                    colSpan={TenantColumns.length + 1}
+                    className="text-center py-4"
+                  >
+                    No Tenants Found
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
       </div>
-   </div>
-      
     </>
   );
 };
 
-export default TenantsList
\ No newline at end of file
+export default TenantsList;
diff --git a/src/hooks/useTenant.js b/src/hooks/useTenant.js
index 8a2207cd..52d7a0c8 100644
--- a/src/hooks/useTenant.js
+++ b/src/hooks/useTenant.js
@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { TenantRepository } from "../repositories/TenantRepository";
 import { MarketRepository } from "../repositories/MarketRepository";
 import showToast from "../services/toastService";
@@ -14,7 +14,7 @@ export const useTenants = (
   return useQuery({
     queryKey: ["Tenants", pageNumber, pageSize],
     queryFn: async () => {
-      const response = await TenantRepository.getTenanatList(
+      const response = await TenantRepository.getTenantList(
         pageSize,
         pageNumber,
       );
@@ -67,14 +67,19 @@ export const useCreateTenant = (onSuccessCallback)=>{
 }
 
 export const useAddSubscription =(onSuccessCallback)=>{
+  const queryClient  = useQueryClient()
   return useMutation({
     mutationFn:async(subscriptionPayload)=>{
-      const res = await TenantRepository.createTenant(subscriptionPayload);
+      const res = await TenantRepository.addSubscription(subscriptionPayload);
       return res.data;
     },
     onSuccess:(data,variables)=>{
       showToast("Tenant Plan Added SuccessFully","success")
+      queryClient.invalidateQueries({queryKey:["Tenants"]});
       if(onSuccessCallback) onSuccessCallback()
-    }
+    },
+  onError:(error)=>{
+    showToast(error.response.message || error.message || `Something went wrong`,"error")
+  }
   })
 }
\ No newline at end of file
diff --git a/src/pages/Tenant/TenantPage.jsx b/src/pages/Tenant/TenantPage.jsx
index 92637b66..47bc0800 100644
--- a/src/pages/Tenant/TenantPage.jsx
+++ b/src/pages/Tenant/TenantPage.jsx
@@ -1,38 +1,65 @@
-import React from 'react'
-import Breadcrumb from '../../components/common/Breadcrumb'
-import TenantsList from '../../components/Tenanat/TenantsList'
-import { useNavigate } from 'react-router-dom'
+import React, { useState,createContext } from "react";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import TenantsList from "../../components/Tenanat/TenantsList";
+import { useNavigate } from "react-router-dom";
 
+
+export const TenantContext = createContext();
+export const useTenantContext = () => {
+  const context = useContext(TenantContext);
+  if (!context) {
+    throw new Error("useTenantContext must be used within an TenantProvider");
+  }
+  return context;
+};
 const TenantPage = () => {
-  const navigate = useNavigate()
+  const [searchText, setSearchText] = useState("");
+  const navigate = useNavigate();
+
+
+   const contextValue = {
+  
+  };
   return (
-    <div className='container-fluid'>
-         <Breadcrumb
-          data={[
-            { label: "Home", link: "/dashboard" },
-            { label: "Tenant", link: null },
-          ]}
-        />
-        <div className="card p-2">
-        <div className="text-end">
-          <button
-            type="button"
-            data-bs-toggle="tooltip"
-            data-bs-offset="0,8"
-            data-bs-placement="top"
-            data-bs-custom-class="tooltip"
-            title="Add New Tenant"
-            className={`p-1 me-2 bg-primary rounded-circle`} onClick={()=>navigate('/tenants/new-tenant')}
-          >
-            <i className="bx bx-plus fs-4 text-white"></i>
-          </button>
+        <TenantContext.Provider value={contextValue}>
+    <div className="container-fluid">
+      <Breadcrumb
+        data={[
+          { label: "Home", link: "/dashboard" },
+          { label: "Tenant", link: null },
+        ]}
+      />
+      <div className="card d-flex p-3">
+        <div className="row align-items-center">
+          <div className="col-6 col-md-6 col-lg-3  mb-md-0">
+            <input
+              type="search"
+              className="form-control form-control-sm"
+              placeholder="Search..."
+            />
+          </div>
+
+          <div className="col-6 col-md-6 col-lg-9 text-end">
+            <button
+              type="button"
+              data-bs-toggle="tooltip"
+              data-bs-offset="0,8"
+              data-bs-placement="top"
+              data-bs-custom-class="tooltip"
+              title="Add New Tenant"
+              className="p-1 bg-primary rounded-circle"
+              onClick={() => navigate("/tenants/new-tenant")}
+            >
+              <i className="bx bx-plus fs-4 text-white"></i>
+            </button>
+          </div>
         </div>
       </div>
 
-        <TenantsList />
-        
+      <TenantsList searchText ={searchText} />
     </div>
-  )
-}
+    </TenantContext.Provider>
+  );
+};
 
-export default TenantPage
\ No newline at end of file
+export default TenantPage;
diff --git a/src/repositories/TenantRepository.jsx b/src/repositories/TenantRepository.jsx
index cd94d3df..2e132903 100644
--- a/src/repositories/TenantRepository.jsx
+++ b/src/repositories/TenantRepository.jsx
@@ -1,16 +1,24 @@
 import { api } from "../utils/axiosClient";
 
 export const TenantRepository = {
+ getTenantList: (pageSize, pageNumber, filter, searchString) => {
+  const params = new URLSearchParams();
 
-    getTenanatList:(pageSize, pageNumber, filter,searchString)=>{
-         const payloadJsonString = JSON.stringify(filter);
-       return api.get(`/api/Tenant/list?pageSize=${pageSize}&pageNumber=${pageNumber}`)
-    },
+  if (pageSize) params.append("pageSize", pageSize);
+  if (pageNumber) params.append("pageNumber", pageNumber);
+  if (filter && Object.keys(filter).length > 0) {
+    params.append("filter", JSON.stringify(filter));
+  }
+  if (searchString) params.append("searchString", searchString);
 
-    getSubscriptionPlan:(freq)=>api.get(`/api/Tenant/list/subscription-plan?frequency=${freq}`),
+  return api.get(`/api/Tenant/list?${params.toString()}`);
+},
 
-    createTenant:(data)=>api.post('/api/Tenant/create',data),
 
-    addSubscription:(data)=>api.post('/api/Tenant/create',data)
-}
+  getSubscriptionPlan: (freq) =>
+    api.get(`/api/Tenant/list/subscription-plan?frequency=${freq}`),
 
+  createTenant: (data) => api.post("/api/Tenant/create", data),
+
+  addSubscription: (data) => api.post("/api/Tenant/add-subscription", data),
+};