handle upgrad plan

2025-08-14 17:45:01 +05:30 · 2025-08-14 17:45:01 +05:30 · 0acd733710
commit 0acd733710
parent b9bd4e7e18
9 changed files with 260 additions and 85 deletions
--- a/src/components/Tenanat/Profile.jsx
+++ b/src/components/Tenanat/Profile.jsx
@ -12,7 +12,7 @@ const Profile = ({ data }) => {
      <div className="container-fuid">
       
        <div className="row">
-          <div className="col-12 ">
+          <div className="col-12 my-2">
            <div className="d-flex flex-wrap align-items-start position-relative ">
              <div className=" d-flex align-items-start gap-2">
                <img
@ -32,20 +32,23 @@ const Profile = ({ data }) => {
                  className="position-absolute top-0 end-0 cursor-auto"
                  onClick={() => setEditTenant(true)}
                >
-                  <i className="bx bx-edit bs-sm text-primary"></i>
+                  <i className="bx bx-edit bs-sm text-primary cursor-pointer"></i>
                </span>
              </div>
            </div>
          </div>
-          <div className="divider text-start">
-            <div className="divider-text">Profile</div>
-          </div>
+         
          {data?.description && (
            <div className="col rounded-2 bg-light justify-content-start p-2">
              <p className="m-0">{data?.description}</p>
            </div>
          )}

+          
+        </div>
+         <div className="divider text-start my-1">
+            <div className="divider-text">Personal</div>
+          </div>
          <div className="row ">
            <div className="col-12 col-md-6 d-flex align-items-center">
              <i className="bx bx-sm bx-user me-1"></i>
@ -64,56 +67,55 @@ const Profile = ({ data }) => {
              <span className="ms-2">{data.contactNumber}</span>
            </div>

-            <div className="col-12  d-flex text-wrap align-items-start my-4 m-0">
+            <div className="col-12  d-flex text-wrap align-items-start my-2 m-0">
              <i className="bx bx-sm bx-mark me-1"></i>
              <span className="fw-semibold">Address:</span>
              <span className="ms-2">{data.billingAddress}</span>
            </div>
          </div>
-        </div>
-        <div className="divider text-start">
+        <div className="divider text-start ">
          <div className="divider-text">Organization</div>
        </div>

        <div className="col-12  d-flex align-items-center">
-          <i class="bx bx-sm bxs-building"></i>
+          <i className="bx bx-sm bxs-building"></i>
          <span className="fw-semibold">Industry:</span>
-          <span className="ms-2">{data.industry.name}</span>
+          <span className="ms-2">{data?.industry?.name}</span>
        </div>
        <div className="row ">
-          {data.taxId && (
+          {data?.taxId && (
            <div className="col-12 col-md-6 d-flex align-items-center">
              <i className="bx bx-sm bx-id-card me-1"></i>
              <span className="fw-semibold">Tax Id:</span>
-              <span className="ms-2">{data.taxId}</span>
+              <span className="ms-2">{data?.taxId}</span>
            </div>
          )}
          <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
            <i className="bx bx-sm bx-group me-1"></i>
            <span className="fw-semibold">Organization Size:</span>
-            <span className="ms-2">{data.organizationSize}</span>
+            <span className="ms-2">{data?.organizationSize}</span>
          </div>
          <div className="col-12 col-md-6 d-flex align-items-center">
            <i className="bx bx-sm bxs-calendar"></i>
            <span className="fw-semibold">On-Boarding Date:</span>
            <span className="ms-2">
-              {formatUTCToLocalTime(data.onBoardingDate)}
+              {formatUTCToLocalTime(data?.onBoardingDate)}
            </span>
          </div>

          <table className="table table-bordered text-center text-nowrap table-responsive my-4">
            <tbody>
              <tr>
-                <td colspan="1">
+                <td colSpan="1">
                  <strong>Status</strong>
                </td>
-                <td colspan="1">
+                <td colSpan="1">
                  <strong>Active</strong>
                </td>
-                <td colspan="1">
+                <td colSpan="1">
                  <strong>In-Progress</strong>
                </td>
-                <td colspan="1">
+                <td colSpan="1">
                  <strong>On Hold</strong>
                </td>
                <td>
@ -150,13 +152,13 @@ const Profile = ({ data }) => {
          <div className="col-12 col-md-6 d-flex align-items-center">
            <i className="bx bx-sm bx-group me-1"></i>
            <span className="fw-semibold">Activite Employees:</span>
-            <span className="ms-2">{data.activeEmployees}</span>
+            <span className="ms-2">{data?.activeEmployees}</span>
          </div>

          <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
            <i className="bx bx-sm bx-group me-1"></i>
            <span className="fw-semibold">In-Active Employee:</span>
-            <span className="ms-2">{data.inActiveEmployees}</span>
+            <span className="ms-2">{data?.inActiveEmployees}</span>
          </div>
        </div>
      </div>
@ -165,6 +167,4 @@ const Profile = ({ data }) => {
 };

 export default Profile;
-//  <span className="badge text-bg-primary  position-absolute top-0 end-0">
-//                 {data?.tenantStatus?.name}
-//               </span>
+
--- a/src/components/Tenanat/SubScription.jsx
+++ b/src/components/Tenanat/SubScription.jsx
@ -11,7 +11,7 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
  const [frequency, setFrequency] = useState(2);
  const [selectedPlanId, setSelectedPlanId] = useState(null);
  const selectedTenant = useSelector(
-    (store) => store.globalVariables.currentTenant
+    (store) => store.globalVariables.currentTenant?.data
  );
  const naviget = useNavigate();
  const {
@ -33,7 +33,7 @@ const SubScription = ({ onSubmitSubScription, onNext }) => {
    isPending,
    error,
  } = useAddSubscription(() => {
-    onNext();
+  naviget("/tenants")
  });
  const handleSubscriptionSubmit = async () => {
    const isValid = await trigger([
--- a/src/components/Tenanat/SubScriptionHistory.jsx
+++ b/src/components/Tenanat/SubScriptionHistory.jsx
@ -0,0 +1,111 @@
+import React, { useEffect } from "react";
+import { useTenantDetails } from "../../hooks/useTenant";
+import { useDispatch } from "react-redux";
+import { setCurrentTenant } from "../../slices/globalVariablesSlice";
+import { useNavigate } from "react-router-dom";
+
+const SubScriptionHistory = ({ tenantId }) => {
+  const { data, isLoading, isError, error } = useTenantDetails(tenantId);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (data) {
+      // Tenant exists → set operationMode: 1
+      dispatch(setCurrentTenant({ operationMode: 1, data }));
+    } else {
+      // No tenant yet → set operationMode: 0
+      dispatch(setCurrentTenant({ operationMode: 0, data: null }));
+    }
+  }, [data, dispatch]);
+
+  const handleUpgradePlan = () => {
+      navigate("/tenants/new-tenant");
+  };
+
+  if (isLoading) return <div>Loading...</div>;
+  if (isError) return <div>{error}</div>;
+
+  const plan = data?.currentPlan;
+
+  // No subscription plan yet → show "Add Subscription" button
+  if (!plan) {
+    return (
+      <div className="text-center">
+        <button className="btn btn-sm btn-success" onClick={handleUpgradePlan}>
+          Add Subscription
+        </button>
+        <div className="mt-2 text-center small">
+          <i className="bx bx-info-circle bx-xs"></i> Add your new subscription
+        </div>
+      </div>
+    );
+  }
+
+  // Subscription plan exists → show details
+  const today = new Date();
+  const start = new Date(plan.startDate);
+  const end = new Date(plan.endDate);
+
+  const totalDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
+  const daysLeft = Math.max(0, Math.ceil((end - today) / (1000 * 60 * 60 * 24)));
+  const percentage = Math.min(
+    100,
+    Math.round(((totalDays - daysLeft) / totalDays) * 100)
+  );
+
+  const getProgressVariant = () => {
+    if (percentage < 50) return "success";
+    if (percentage < 80) return "warning";
+    return "danger";
+  };
+
+  return (
+    <div className="container-fluid p-2">
+    
+      <div className="text-start mb-3">
+        <p className="fw-bold">Active Subscription</p>
+
+        <div className="row">
+          <div className="col-12 col-sm-8 border rounded p-3 shadow-sm">
+            <p className="text-primary fw-bold m-0">{plan.planName || "N/A"}</p>
+
+            <div className="d-flex justify-content-between align-items-end mt-2">
+              <div>
+                <h3 className="m-0">
+                  {plan.currency?.symbol} {plan.price}
+                </h3>
+                <small className="text-muted">{plan.description}</small>
+              </div>
+              <div>
+                <button
+                  className="btn btn-sm btn-success"
+                  onClick={handleUpgradePlan}
+                >
+                  Upgrade Plan
+                </button>
+              </div>
+            </div>
+
+            <div className="mt-3">
+              {/* Progress bar placeholder */}
+              <div className="d-flex justify-content-between small text-muted mt-1">
+                <span>{totalDays - daysLeft} days used</span>
+                <span>{daysLeft} days left</span>
+              </div>
+            </div>
+
+            <div className="text-end mt-1 small text-muted">
+              Ends on {end.toLocaleDateString()}
+            </div>
+          </div>
+        </div>
+        <div className="text-start">
+          {/* Table */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SubScriptionHistory;
--- a/src/components/Tenanat/TenantForm.jsx
+++ b/src/components/Tenanat/TenantForm.jsx
@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ContactInfro from "./ContactInfro";
 import SubScription from "./SubScription";
 import OrganizationInfo from "./OrganizationInfo";
@ -12,12 +12,33 @@ import {
  tenantDefaultValues,
 } from "./TenantSchema";
 import Congratulation from "./congratulation";
+import { useSelector } from "react-redux";

 const TenantForm = () => {
+  const HasSelectedCurrentTenant = useSelector(
+    (store) => store.globalVariables.currentTenant
+  );
  const [activeTab, setActiveTab] = useState(0);
  const [completedTabs, setCompletedTabs] = useState([]);

+  const PlanTextLabel = HasSelectedCurrentTenant?.operationMode === 1 ? "Upgrade Plan":"Select Plan" 

+  // Jump to subscription if tenant already exists
+useEffect(() => {
+  if (HasSelectedCurrentTenant) {
+    if (HasSelectedCurrentTenant.operationMode === 1) {
+      // Skip to subscription step
+      setActiveTab(2); // index for "SubScription"
+      setCompletedTabs([0, 1]); // mark previous steps as completed
+    } else if (HasSelectedCurrentTenant.operationMode === 0) {
+      // Start from the beginning (new tenant creation)
+      setActiveTab(0);
+    }
+  } else {
+    // Default: no tenant selected
+    setActiveTab(0);
+  }
+}, [HasSelectedCurrentTenant,activeTab]);

  const tenantForm = useForm({
    resolver: zodResolver(newTenantSchema),
@ -35,24 +56,30 @@ const TenantForm = () => {
  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));
+
+      setActiveTab((prev) => {
+        let nextStep = Math.min(prev + 1, newTenantConfig.length - 1);
+        if (HasSelectedCurrentTenant && nextStep === 2) {
+          nextStep = 3; // skip subscription if already upgraded
+        }
+        return nextStep;
+      });
    }
  };
- const handlePrev = () => {
-  setActiveTab((prev) => Math.max(prev - 1, 0));
-};

+  const handlePrev = () => {
+    setActiveTab((prev) => Math.max(prev - 1, 0));
+  };

  const onSubmitTenant = (data) => {
-    console.log(data);
+    // console.log("Tenant Data:", data);
  };
  const onSubmitSubScription = (data) => {
-    console.log(data);
+    // console.log("Subscription Data:", data);
  };

  const newTenantConfig = [
@ -66,15 +93,26 @@ const TenantForm = () => {
      name: "Organization",
      icon: "bx bx-buildings bx-md",
      subtitle: "Organization Details",
-      component: <OrganizationInfo onNext={handleNext} onPrev={handlePrev} 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} onNext={handleNext}/>,
+      subtitle: PlanTextLabel,
+      component: (
+        <SubScription
+          onSubmitSubScription={onSubmitSubScription}
+          onNext={handleNext}
+        />
+      ),
    },
-      {
+    {
      name: "congratulation",
      icon: "bx bx-star bx-md",
      subtitle: "Select a plan",
@ -83,45 +121,50 @@ const TenantForm = () => {
  ];

  const isSubscriptionTab = activeTab === 2;
+
  return (
    <div id="wizard-property-listing" className="bs-stepper horizontically mt-2">
      <div className="bs-stepper-header border-end text-start ">
-        {newTenantConfig.filter((step) => step.name.toLowerCase() !== "congratulation").map((step, index) => {
-          const isActive = activeTab === index;
-          const isCompleted = completedTabs.includes(index);
+        {newTenantConfig
+          .filter((step) => step.name.toLowerCase() !== "congratulation")
+          .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)}
+            return (
+              <React.Fragment key={step.name}>
+                <div
+                  className={`step ${isActive ? "active" : ""} ${
+                    isCompleted ? "crossed" : ""
+                  }`}
+                  data-target={`#step-${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 text-primary"></div>
-              )}
-            </React.Fragment>
-          );
-        })}
+                  <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 text-primary"></div>
+                )}
+              </React.Fragment>
+            );
+          })}
      </div>

      <div className="bs-stepper-content py-2">
--- a/src/components/Tenanat/TenantSchema.js
+++ b/src/components/Tenanat/TenantSchema.js
@ -12,10 +12,16 @@ export const newTenantSchema = z.object({
  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",
-  }),
+  onBoardingDate: z.preprocess((val) => {
+  if (typeof val === "string" && val.includes("-")) {
+    const [day, month, year] = val.split("-");
+    return new Date(`${year}-${month}-${day}`);
+  }
+  return val;
+}, z.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"),
--- a/src/hooks/useTenant.js
+++ b/src/hooks/useTenant.js
@ -90,11 +90,11 @@ export const useCreateTenant = (onSuccessCallback)=>{
    },
    onSuccess:(data,variables)=>{
      showToast("Tenant Created SuccessFully","success")
-       dispatch(setCurrentTenant(data))
+      dispatch(setCurrentTenant({operationMode:0,data:data}))
      if(onSuccessCallback) onSuccessCallback()
    },
  onError:(error)=>{
-    showToast(error.response.message || error.message || `Something went wrong`,"error")
+    showToast(error.response.message || error?.response?.data?.errors || `Something went wrong`,"error")
  }

  })
@ -128,8 +128,8 @@ export const useAddSubscription =(onSuccessCallback)=>{
      queryClient.invalidateQueries({queryKey:["Tenants"]});
      if(onSuccessCallback) onSuccessCallback()
    },
-  onError:(error)=>{
+    onError:(error)=>{
    showToast(error.response.message || error.message || `Something went wrong`,"error")
-  }
+   }
  })
 }
--- a/src/pages/Tenant/TenantDetails.jsx
+++ b/src/pages/Tenant/TenantDetails.jsx
@ -7,6 +7,7 @@ import Organization from "../../components/Tenanat/Organization";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
 import GlobalModel from "../../components/common/GlobalModel";
 import EditProfile from "../../components/Tenanat/EditProfile";
+import SubScriptionHistory from "../../components/Tenanat/SubScriptionHistory";

 const TenantDetailsContext = createContext();
 export const useTenantDetailsContext = () => useContext(TenantDetailsContext);
@ -32,12 +33,12 @@ const TenantDetails = () => {

    {
      id: "navs-left-bill",
-      label: "Bill",
+      label: "Bills and Plan ",
      icon: "bx bx-receipt",
      iconSize: "bx-sm",
      content: (
        <div className="text-center">
-          <ComingSoonPage />
+          <SubScriptionHistory tenantId={tenantId} />
        </div>
      ),
    },
--- a/src/pages/Tenant/TenantPage.jsx
+++ b/src/pages/Tenant/TenantPage.jsx
@ -14,6 +14,8 @@ import {
  filterSchema,
 } from "../../components/Tenanat/TenantSchema";
 import TenantFilterPanel from "../../components/Tenanat/TenantFilterPanel";
+import { useDispatch } from "react-redux";
+import { setCurrentTenant } from "../../slices/globalVariablesSlice";

 // This is context that wrapping all components tenant releated , but must pass inside 'TenantContext.Provider'
 export const TenantContext = createContext();
@ -29,7 +31,8 @@ const TenantPage = () => {
  const [searchText, setSearchText] = useState("");
  const [isRefetching,setRefetching] = useState(false)
  const [refetchFn, setRefetchFn] = useState(null);
-    const [filters, setFilter] = useState();
+  const [filters, setFilter] = useState();
+  const dispatch = useDispatch()
  const debouncedSearch = useDebounce(searchText, 500);
  const contextValue = {
  };
@ -54,7 +57,10 @@ const TenantPage = () => {
      setOffcanvasContent("", null);
    };
  }, []);
-
+const handleNewTenant =()=>{
+  dispatch(setCurrentTenant(null))
+  navigate("/tenants/new-tenant")
+}
  return (
    <TenantContext.Provider value={contextValue}>
      <div className="container-fluid">
@ -89,8 +95,8 @@ const TenantPage = () => {
                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")}
+                className="p-1 bg-primary rounded-circle cursror-pointer"
+                onClick={handleNewTenant}
              >
                <i className="bx bx-plus fs-4 text-white"></i>
              </button>
--- a/src/utils/constants.jsx
+++ b/src/utils/constants.jsx
@ -76,6 +76,13 @@ export const TENANT_STATUS = [
 export const CONSTANT_TEXT = {
    
 }
+
+export const SUBSCRIPTION_PLAN_FREQUENCIES = {
+  0: "Monthly",
+  1:"Quatery",
+  2:"Half-Yearly",
+  3:"Yearly"
+}
 export const reference = [
    { val: "google", name: "Google" },
    { val: "frineds", name: "Friends" },
@ -90,4 +97,5 @@ export   const orgSize = [
 ];

 export const BASE_URL = process.env.VITE_BASE_URL;
+
 // export const BASE_URL = "https://api.marcoaiot.com";