From fa32f09ebbf3cf2b66c4728409cbf0bc14de9ebd Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Fri, 31 Oct 2025 11:19:42 +0530
Subject: [PATCH] descresed width of stepLayout

---
 public/assets/css/core-extend.css             |   3 +
 .../SubscriptionOverview.jsx                  | 153 ++++++++++--------
 .../UserSubscription/SelectPlan.jsx           |  14 +-
 .../UserSubscription/SubscriptionForm.jsx     |   2 +
 .../UserSubscription/SubscriptionLayout.jsx   |   4 +-
 src/pages/Home/HomeSchema.jsx                 |   2 +-
 6 files changed, 102 insertions(+), 76 deletions(-)

diff --git a/public/assets/css/core-extend.css b/public/assets/css/core-extend.css
index 788d2d08..3b2ca6d7 100644
--- a/public/assets/css/core-extend.css
+++ b/public/assets/css/core-extend.css
@@ -40,8 +40,11 @@
 .text-royalblue{
   color: #1796e3;
 }
+
 .stepper-container {
   position: relative;
+  text-align: -webkit-center;
+
 }
 
 .timeline-horizontal {
diff --git a/src/components/UserSubscription/ManageSubscription/SubscriptionOverview.jsx b/src/components/UserSubscription/ManageSubscription/SubscriptionOverview.jsx
index 7d91af1b..6515caf7 100644
--- a/src/components/UserSubscription/ManageSubscription/SubscriptionOverview.jsx
+++ b/src/components/UserSubscription/ManageSubscription/SubscriptionOverview.jsx
@@ -1,87 +1,106 @@
-import React from 'react'
-import Avatar from '../../common/Avatar'
+import React from "react";
+import Avatar from "../../common/Avatar";
 
 const SubscriptionOverview = () => {
   return (
-    <div className='container-md text-start'>
-      <div className='row d-flex justify-content-between py-1'>
-        <small className='fw-semibold fs-sm-6 fs-md-5'>Overview</small>
-        <p className='text-muted m-0'>Summerizees all your payments and subscription for the purchsed Application</p>
-      <hr className="divider border-2 my-2" />
-        <div className='col-md-4 d-flex flex-column gap-6'>
-          <div className=''>
-            <p className=' d-bolck fw-semibold fs-6'>Contact Details</p>
-          <small className='d-bolck'>Who should we contact if neccessary ?</small>
-          </div>
-          <p className='fw-semibold text-primary'>Manage Contact Details</p>
-        </div>
-         <div className='col-md-6 '>
-          <div className='row border'>
-          <div className='col-6'>
-            <div className='d-flex flex-row gap-2 align-items-center p-2'>
-               <Avatar size='md' firstName={"pramod"} lastName={"Mahajan"}/>
-               <div >
-                <small className='d-block fw-semibold fs-6'>Pramod Mahajan</small>
-                <small className='text-muted text-tiny'>pramod.mahajan@marcoaiot.com</small>
-                <p className='my-3'>Marco Aiot Pvt Limited</p>
-               </div>
-               <div className="vr border-2"></div>
-            </div>
-          </div>
-          <div className='col-6 text-center align-items-center my-auto'>
-            <a className='text-primary'>Update Details</a>
-          </div>
-          </div>
-         </div>
-      </div>
+    <div className="container-md text-start">
+      <div className="row d-flex justify-content-between py-1">
+        <small className="fw-semibold fs-sm-6 fs-md-5">Overview</small>
+        <p className="text-muted m-0">
+          Summerizees all your payments and subscription for the purchsed
+          Application
+        </p>
         <hr className="divider border-2 my-2" />
-
-        
-         <div className='row d-flex justify-content-between py-1'>
-        
-        <div className='col-md-4 d-flex flex-column gap-6'>
-          <div className=''>
-            <p className=' d-bolck fw-semibold fs-6'>Current Plan</p>
-          <small className='d-bolck'>You can update your plan anytime for best benifit from the product and track your projct</small>
+        <div className="col-md-4 d-flex flex-column gap-6">
+          <div className="">
+            <p className=" d-bolck fw-semibold fs-6">Contact Details</p>
+            <small className="d-bolck">
+              Who should we contact if neccessary ?
+            </small>
           </div>
-          <p className='fw-semibold text-primary'>Switch Plan</p>
+          <p className="fw-semibold text-primary">Manage Contact Details</p>
         </div>
-         <div className='col-md-6 '>
-          <div className='row border bg-light-primary p-2'>
-            <div className='d-flex justify-content-between align-items-center'>
-              <div className='d-flex flex-row gap-4'>
-                <small><i className='bx bxs-package'></i></small>
-                <small className='fw-bold'>Super Package</small>
-                <small className='fw-bold text-primary'>₹ 5999</small>
+        <div className="col-md-6 ">
+          <div className="row border">
+            <div className="col-6">
+              <div className="d-flex flex-row gap-2 align-items-center p-2">
+                <Avatar size="md" firstName={"pramod"} lastName={"Mahajan"} />
+                <div>
+                  <small className="d-block fw-semibold fs-6">
+                    Pramod Mahajan
+                  </small>
+                  <small className="text-muted text-tiny">
+                    pramod.mahajan@marcoaiot.com
+                  </small>
+                  <p className="my-3">Marco Aiot Pvt Limited</p>
+                </div>
+                <div className="vr border-2"></div>
               </div>
-             <span className=' bg-primary rounded-circle'><i className='bx bx-md bx-check text-white'></i></span> 
             </div>
-            <div className='mt-3'>
-              <p className='m-0 ms-6 text-muted text-tiny'>Includes up to 100 userss, 10GB individual cloud storage and access maximum features</p>
+            <div className="col-6 text-center align-items-center my-auto">
+              <a className="text-primary">Update Details</a>
             </div>
           </div>
-         </div>
+        </div>
       </div>
+      <hr className="divider border-2 my-2" />
 
+      <div className="row d-flex justify-content-between py-1">
+        <div className="col-md-4 d-flex flex-column gap-6">
+          <div className="">
+            <p className=" d-bolck fw-semibold fs-6">Current Plan</p>
+            <small className="d-bolck">
+              You can update your plan anytime for best benifit from the product
+              and track your projct
+            </small>
+          </div>
+          <p className="fw-semibold text-primary">Switch Plan</p>
+        </div>
+        <div className="col-md-6 ">
+          <div className="row border bg-light-primary p-3">
+            <div className="col-1">
+              <small>
+                <i className="bx bxs-package"></i>
+              </small>
+            </div>
+            <div className="col-11">
+              <div className="d-flex justify-content-between">
+                <div className="d-flex flex-row gap-4">
+                  <small className="fw-bold">Super Package</small>
+                  <small className="fw-bold text-primary">₹ 5999</small>
+                </div>
+                <span className=" bg-primary rounded-circle">
+                  <i className="bx bx-md bx-check text-white"></i>
+                </span>
+              </div>
+              <div className="col-12">
+                <p className="m-0 text-muted text-tiny">
+                  Includes up to 100 userss, 10GB individual cloud storage and
+                  access maximum features
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <hr className="divider border-2 my-2" />
 
-          <div className='row d-flex justify-content-between py-1'>
-        
-        <div className='col-md-4 d-flex flex-column gap-6'>
-          <div className=''>
-            <p className=' d-bolck fw-semibold fs-6'>Billing History</p>
-          <small className='d-bolck'>Sumary on the payment history for the subscription plan of the application</small>
+      <div className="row d-flex justify-content-between py-1">
+        <div className="col-md-4 d-flex flex-column gap-6">
+          <div className="">
+            <p className=" d-bolck fw-semibold fs-6">Billing History</p>
+            <small className="d-bolck">
+              Sumary on the payment history for the subscription plan of the
+              application
+            </small>
           </div>
-          <p className='fw-semibold text-primary'>Billing History</p>
+          <p className="fw-semibold text-primary">Billing History</p>
         </div>
-         <div className='col-md-6 '>
-         
-         </div>
+        <div className="col-md-6 "></div>
       </div>
-
     </div>
-  )
-}
+  );
+};
 
-export default SubscriptionOverview
+export default SubscriptionOverview;
diff --git a/src/components/UserSubscription/SelectPlan.jsx b/src/components/UserSubscription/SelectPlan.jsx
index da320767..88f5637b 100644
--- a/src/components/UserSubscription/SelectPlan.jsx
+++ b/src/components/UserSubscription/SelectPlan.jsx
@@ -142,7 +142,7 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
             </div>
 
             {isError && (
-              <div className="col-12 col-md text-center">
+              <div className="col-12 col-md-6 text-center">
                 <p className="text-muted">{error?.message}</p>
                 <small>{error?.name}</small>
                 <small
@@ -171,7 +171,8 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
               <SelectedPlanSkeleton />
             ) : (
               <>
-                {plans?.map((plan) => (
+              <div className="row">
+                  {plans?.map((plan) => (
                   <div key={plan?.id} className="col-12 col-md-4 mb-md-3 mb-2">
                     <div
                       className={`form-check custom-option custom-option-basic text-start w-100 bg-light-primary ${
@@ -207,6 +208,7 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
                     </div>
                   </div>
                 ))}
+              </div>
 
                 {selectedPlan && (
                   <div className="col-12 text-start">
@@ -230,19 +232,19 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
                         return (
                           <>
                             <div className="row g-2 mb-3">
-                              <div className="col-sm-6 col-md-4">
+                              <div className="col-sm-12 col-md-4">
                                 <div className="border rounded-3 p-2 bg-light">
                                   <i className="bx bx-user me-1 text-primary"></i>
                                   <strong>Max Users:</strong> {maxUser}
                                 </div>
                               </div>
-                              <div className="col-sm-6 col-md-4">
+                              <div className="col-sm-12 col-md-4">
                                 <div className="border rounded-3 p-2 bg-light">
                                   <i className="bx bx-hdd me-1 text-primary"></i>
                                   <strong>Max Storage:</strong> {maxStorage} MB
                                 </div>
                               </div>
-                              <div className="col-sm-6 col-md-4">
+                              <div className="col-sm-12 col-md-4">
                                 <div className="border rounded-3 p-2 bg-light">
                                   <i className="bx bx-time-five me-1 text-primary"></i>
                                   <strong>Trial Days:</strong> {trialDays}
@@ -331,7 +333,7 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
         {/* Image Section */}
         <div className="d-none d-md-flex col-md-6 justify-content-center align-items-center">
           <img
-            src="/public/img/illustrations/undraw_pricing.png"
+            src="/img/illustrations/undraw_pricing.png"
             alt="image"
             className="img-fluid"
             style={{
diff --git a/src/components/UserSubscription/SubscriptionForm.jsx b/src/components/UserSubscription/SubscriptionForm.jsx
index 8b5c1607..fda0a334 100644
--- a/src/components/UserSubscription/SubscriptionForm.jsx
+++ b/src/components/UserSubscription/SubscriptionForm.jsx
@@ -45,6 +45,7 @@ const SubscriptionForm = ({ currentStep, setCurrentStep, setStepStatus }) => {
         <div className="col-12  mt-8">
           <div className="row px-4">
             <div className="text-start">
+              <p>Please provide your personal and organizational information to help us set up your account.</p>
               <form onSubmit={handleSubmit(onSubmit)}>
                 <div className="row">
                   {/* First Name */}
@@ -111,6 +112,7 @@ const SubscriptionForm = ({ currentStep, setCurrentStep, setStepStatus }) => {
                       {...register("contactNumber")}
                       inputMode="tel"
                       placeholder="+91 9876543210"
+                      maxLength={13}
                     />
                     {errors.contactNumber && (
                       <div className="danger-text">
diff --git a/src/components/UserSubscription/SubscriptionLayout.jsx b/src/components/UserSubscription/SubscriptionLayout.jsx
index cfd481c0..a9145a3d 100644
--- a/src/components/UserSubscription/SubscriptionLayout.jsx
+++ b/src/components/UserSubscription/SubscriptionLayout.jsx
@@ -7,8 +7,8 @@ const SubscriptionLayout = ({
   stepStatus = {},
 }) => {
   return (
-    <div className="container-fluid stepper-container align-items-start my-4">
-      <ul className="timeline-horizontal list-unstyled d-flex justify-content-between align-items-center position-relative w-100">
+    <div className="container-fluid stepper-container align-items-start my-4 w-100">
+      <ul className="timeline-horizontal list-unstyled d-flex justify-content-between align-items-center position-relative w-75">
         {configStep.map((step, index) => {
           const stepNumber = index + 1;
           const status = stepStatus[stepNumber] || "pending";
diff --git a/src/pages/Home/HomeSchema.jsx b/src/pages/Home/HomeSchema.jsx
index 867d9d52..53f14edc 100644
--- a/src/pages/Home/HomeSchema.jsx
+++ b/src/pages/Home/HomeSchema.jsx
@@ -8,7 +8,7 @@ export const OrganizationSchema = z.object({
   organizationName: z.string().min(1, "Organization Name is required"),
   contactNumber: z
     .string()
-    .min(5, "Contact Number is too short")
+    .min(10, "Contact Number is too short")
     .regex(
       /^[+]?[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/,
       "Invalid phone number format"