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{
color: #1796e3;
}
.stepper-container {
position: relative;
text-align: -webkit-center;
}
.timeline-horizontal {

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

@ -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;

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

@ -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={{

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="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">

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

@ -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";

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"),
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"