admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

descresed width of stepLayout

Browse Source
This commit is contained in:
pramod.mahajan 2025-10-31 11:19:42 +05:30
parent a025ac34d7
commit fa32f09ebb
6 changed files with 102 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/assets/css/core-extend.css
View File

@ -40,8 +40,11 @@
.text-royalblue{ .text-royalblue{
color: #1796e3; color: #1796e3;
} }
.stepper-container { .stepper-container {
position: relative; position: relative;
text-align: -webkit-center;
} }
.timeline-horizontal { .timeline-horizontal {

153
src/components/UserSubscription/ManageSubscription/SubscriptionOverview.jsx
View File

@ -1,87 +1,106 @@
import React from 'react' import React from "react";
import Avatar from '../../common/Avatar' import Avatar from "../../common/Avatar";
const SubscriptionOverview = () => { const SubscriptionOverview = () => {
return ( return (
<div className='container-md text-start'> <div className="container-md text-start">
<div className='row d-flex justify-content-between py-1'> <div className="row d-flex justify-content-between py-1">
<small className='fw-semibold fs-sm-6 fs-md-5'>Overview</small> <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> <p className="text-muted m-0">
<hr className="divider border-2 my-2" /> Summerizees all your payments and subscription for the purchsed
<div className='col-md-4 d-flex flex-column gap-6'> Application
<div className=''> </p>
<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>
<hr className="divider border-2 my-2" /> <hr className="divider border-2 my-2" />
<div className="col-md-4 d-flex flex-column gap-6">
<div className="">
<div className='row d-flex justify-content-between py-1'> <p className=" d-bolck fw-semibold fs-6">Contact Details</p>
<small className="d-bolck">
<div className='col-md-4 d-flex flex-column gap-6'> Who should we contact if neccessary ?
<div className=''> </small>
<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> </div>
<p className='fw-semibold text-primary'>Switch Plan</p> <p className="fw-semibold text-primary">Manage Contact Details</p>
</div> </div>
<div className='col-md-6 '> <div className="col-md-6 ">
<div className='row border bg-light-primary p-2'> <div className="row border">
<div className='d-flex justify-content-between align-items-center'> <div className="col-6">
<div className='d-flex flex-row gap-4'> <div className="d-flex flex-row gap-2 align-items-center p-2">
<small><i className='bx bxs-package'></i></small> <Avatar size="md" firstName={"pramod"} lastName={"Mahajan"} />
<small className='fw-bold'>Super Package</small> <div>
<small className='fw-bold text-primary'>₹ 5999</small> <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>
<span className=' bg-primary rounded-circle'><i className='bx bx-md bx-check text-white'></i></span>
</div> </div>
<div className='mt-3'> <div className="col-6 text-center align-items-center my-auto">
<p className='m-0 ms-6 text-muted text-tiny'>Includes up to 100 userss, 10GB individual cloud storage and access maximum features</p> <a className="text-primary">Update Details</a>
</div> </div>
</div> </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" /> <hr className="divider border-2 my-2" />
<div className='row d-flex justify-content-between py-1'> <div className="row d-flex justify-content-between py-1">
<div className="col-md-4 d-flex flex-column gap-6">
<div className='col-md-4 d-flex flex-column gap-6'> <div className="">
<div className=''> <p className=" d-bolck fw-semibold fs-6">Billing History</p>
<p className=' d-bolck fw-semibold fs-6'>Billing History</p> <small className="d-bolck">
<small className='d-bolck'>Sumary on the payment history for the subscription plan of the application</small> Sumary on the payment history for the subscription plan of the
application
</small>
</div> </div>
<p className='fw-semibold text-primary'>Billing History</p> <p className="fw-semibold text-primary">Billing History</p>
</div> </div>
<div className='col-md-6 '> <div className="col-md-6 "></div>
</div>
</div> </div>
</div> </div>
) );
} };
export default SubscriptionOverview export default SubscriptionOverview;

14
src/components/UserSubscription/SelectPlan.jsx
View File

@ -142,7 +142,7 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
</div> </div>
{isError && ( {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> <p className="text-muted">{error?.message}</p>
<small>{error?.name}</small> <small>{error?.name}</small>
<small <small
@ -171,7 +171,8 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
<SelectedPlanSkeleton /> <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 key={plan?.id} className="col-12 col-md-4 mb-md-3 mb-2">
<div <div
className={`form-check custom-option custom-option-basic text-start w-100 bg-light-primary ${ 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> </div>
))} ))}
</div>
{selectedPlan && ( {selectedPlan && (
<div className="col-12 text-start"> <div className="col-12 text-start">
@ -230,19 +232,19 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
return ( return (
<> <>
<div className="row g-2 mb-3"> <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"> <div className="border rounded-3 p-2 bg-light">
<i className="bx bx-user me-1 text-primary"></i> <i className="bx bx-user me-1 text-primary"></i>
<strong>Max Users:</strong> {maxUser} <strong>Max Users:</strong> {maxUser}
</div> </div>
</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"> <div className="border rounded-3 p-2 bg-light">
<i className="bx bx-hdd me-1 text-primary"></i> <i className="bx bx-hdd me-1 text-primary"></i>
<strong>Max Storage:</strong> {maxStorage} MB <strong>Max Storage:</strong> {maxStorage} MB
</div> </div>
</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"> <div className="border rounded-3 p-2 bg-light">
<i className="bx bx-time-five me-1 text-primary"></i> <i className="bx bx-time-five me-1 text-primary"></i>
<strong>Trial Days:</strong> {trialDays} <strong>Trial Days:</strong> {trialDays}
@ -331,7 +333,7 @@ const SelectPlan = ({ currentStep, setStepStatus, onNext }) => {
{/* Image Section */} {/* Image Section */}
<div className="d-none d-md-flex col-md-6 justify-content-center align-items-center"> <div className="d-none d-md-flex col-md-6 justify-content-center align-items-center">
<img <img
src="/public/img/illustrations/undraw_pricing.png" src="/img/illustrations/undraw_pricing.png"
alt="image" alt="image"
className="img-fluid" className="img-fluid"
style={{ style={{

2
src/components/UserSubscription/SubscriptionForm.jsx
View File

@ -45,6 +45,7 @@ const SubscriptionForm = ({ currentStep, setCurrentStep, setStepStatus }) => {
<div className="col-12 mt-8"> <div className="col-12 mt-8">
<div className="row px-4"> <div className="row px-4">
<div className="text-start"> <div className="text-start">
<p>Please provide your personal and organizational information to help us set up your account.</p>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="row"> <div className="row">
{/* First Name */} {/* First Name */}
@ -111,6 +112,7 @@ const SubscriptionForm = ({ currentStep, setCurrentStep, setStepStatus }) => {
{...register("contactNumber")} {...register("contactNumber")}
inputMode="tel" inputMode="tel"
placeholder="+91 9876543210" placeholder="+91 9876543210"
maxLength={13}
/> />
{errors.contactNumber && ( {errors.contactNumber && (
<div className="danger-text"> <div className="danger-text">

4
src/components/UserSubscription/SubscriptionLayout.jsx
View File

@ -7,8 +7,8 @@ const SubscriptionLayout = ({
stepStatus = {}, stepStatus = {},
}) => { }) => {
return ( return (
<div className="container-fluid stepper-container align-items-start my-4"> <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-100"> <ul className="timeline-horizontal list-unstyled d-flex justify-content-between align-items-center position-relative w-75">
{configStep.map((step, index) => { {configStep.map((step, index) => {
const stepNumber = index + 1; const stepNumber = index + 1;
const status = stepStatus[stepNumber] || "pending"; const status = stepStatus[stepNumber] || "pending";

2
src/pages/Home/HomeSchema.jsx
View File

@ -8,7 +8,7 @@ export const OrganizationSchema = z.object({
organizationName: z.string().min(1, "Organization Name is required"), organizationName: z.string().min(1, "Organization Name is required"),
contactNumber: z contactNumber: z
.string() .string()
.min(5, "Contact Number is too short") .min(10, "Contact Number is too short")
.regex( .regex(
/^[+]?[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/, /^[+]?[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/,
"Invalid phone number format" "Invalid phone number format"