tenant creating layout setup properly

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"
+            className="img-thumbnail rounded"
-            style={{ maxHeight: "40px" }}
+            style={{ maxHeight: "35px" }}
           />
           <div className="d-flex align-items-center gap-2 mt-1">
             <span className="small text-muted">{fileName}</span>

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;

src/components/Tenanat/SubScription.jsx

@@ -1,15 +1,83 @@
-import React from 'react'
+import React, { useState } from "react";
-import { useSubscriptionPlan } from '../../hooks/useTenant'
+import { useSubscriptionPlan } from "../../hooks/useTenant";
+import SegmentedControl from "./SegmentedControl";
 
 const SubScription = () => {
-  const {data,isError,isPending} = useSubscriptionPlan()
+  const [Frequency, setFrequency] = useState(3);
-  console.log(data)
+  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
+export default SubScription;

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")
+  }
+
+  })
 }

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)
 }