create cusromer
This commit is contained in:
hamid zarghami
@@ -11,7 +11,7 @@ const CustomerStats: FC<CustomerStatsProps> = ({
|
||||
walletBalance = '۲۴۰.۰۰۰ تومان'
|
||||
}) => {
|
||||
return (
|
||||
<div className='bg-white rounded-4xl p-8'>
|
||||
<div className='bg-white rounded-4xl'>
|
||||
<div className='flex gap-4 items-center'>
|
||||
<div className='flex gap-1.5'>
|
||||
<Star1 size={16} color='black' />
|
||||
|
||||
@@ -47,3 +47,23 @@ textarea::placeholder {
|
||||
tbody tr:nth-child(odd) {
|
||||
background: rgba(233, 235, 244, 0.2) !important;
|
||||
}
|
||||
|
||||
.rmdp-input {
|
||||
min-height: 40px;
|
||||
background-color: white;
|
||||
border-radius: 12px !important;
|
||||
border: 1px solid oklch(0.922 0 0) !important;
|
||||
font-size: 12px !important;
|
||||
width: 100% !important;
|
||||
margin: 0px;
|
||||
padding-right: 16px !important;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
.readOny .rmdp-input {
|
||||
background-color: #f5f5f5 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.rmdp-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
import Button from '@/components/Button'
|
||||
import Input from '@/components/Input'
|
||||
import Select from '@/components/Select'
|
||||
import DatePicker from '@/components/DatePicker'
|
||||
import Textarea from '@/components/Textarea'
|
||||
import CustomerStats from '@/components/CustomerStats'
|
||||
import { TickCircle, Wallet2, TicketDiscount } from 'iconsax-react'
|
||||
import { type FC } from 'react'
|
||||
|
||||
const CreateCustomer: FC = () => {
|
||||
return (
|
||||
<div className='mt-5'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h1 className='text-lg font-light'>افزودن مشتری</h1>
|
||||
<Button className='w-fit px-6'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle
|
||||
size={20}
|
||||
color='#fff'
|
||||
/>
|
||||
<span>ثبت مشتری</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-7 mt-9'>
|
||||
<div className='flex-1'>
|
||||
<div className='w-full bg-white rounded-4xl p-8'>
|
||||
<div className='text-lg font-light'>
|
||||
اطلاعات مشتری
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4 mt-6'>
|
||||
<Input
|
||||
label='نام'
|
||||
placeholder=''
|
||||
name='name'
|
||||
/>
|
||||
<Input
|
||||
label='کد ملی'
|
||||
placeholder=''
|
||||
name='nationalCode'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4 mt-5'>
|
||||
<Input
|
||||
label='شماره تماس'
|
||||
placeholder=''
|
||||
name='phone'
|
||||
/>
|
||||
<Input
|
||||
label='ایمیل'
|
||||
placeholder=''
|
||||
name='email'
|
||||
type='email'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4 mt-5'>
|
||||
<div>
|
||||
<DatePicker
|
||||
label='تاریخ تولد'
|
||||
placeholder='انتخاب'
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
<DatePicker
|
||||
label='تاریخ ازدواج'
|
||||
placeholder='انتخاب'
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='w-full bg-white rounded-4xl p-8 mt-8'>
|
||||
<div className='text-lg font-light'>
|
||||
آدرس
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4 mt-6'>
|
||||
<Select
|
||||
label='استان'
|
||||
placeholder='انتخاب'
|
||||
items={[]}
|
||||
/>
|
||||
<Select
|
||||
label='شهر'
|
||||
placeholder='انتخاب'
|
||||
items={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Input
|
||||
label='عنوان آدرس'
|
||||
placeholder=''
|
||||
name='addressTitle'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Textarea
|
||||
label='آدرس'
|
||||
placeholder=''
|
||||
name='address'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='w-[330px]'>
|
||||
<div className='bg-white rounded-4xl p-8'>
|
||||
<CustomerStats points={0} walletBalance='۰ تومان' />
|
||||
<Button className='w-full mt-5'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Wallet2 size={16} color='#fff' />
|
||||
<span>افزایش موجودی کیف پول</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 bg-white rounded-4xl p-8'>
|
||||
<div className='font-light'>
|
||||
کدهای تخفیف
|
||||
</div>
|
||||
<div className='mt-4'>
|
||||
<table className='w-full'>
|
||||
<thead>
|
||||
<tr className='border-b border-border'>
|
||||
<th className='text-right pb-2 font-light text-xs text-description'>
|
||||
کد
|
||||
</th>
|
||||
<th className='text-center pb-2 font-light text-xs text-description'>
|
||||
انقضا
|
||||
</th>
|
||||
<th className='text-center pb-2 font-light text-xs text-description'>
|
||||
وضعیت
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<div className='text-center py-8 text-xs text-description'>
|
||||
کد تخفیفی موجود نیست
|
||||
</div>
|
||||
<Button className='w-full'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TicketDiscount size={16} color='#fff' />
|
||||
<span>اضافه کردن کد تخفیف</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateCustomer
|
||||
@@ -11,6 +11,7 @@ import CreateFood from '@/pages/food/Create'
|
||||
import CategoryFood from '@/pages/food/Category'
|
||||
import CustomersList from '@/pages/customers/List'
|
||||
import CustomerDetails from '@/pages/customers/Details'
|
||||
import CreateCustomer from '@/pages/customers/Create'
|
||||
|
||||
const MainRouter: FC = () => {
|
||||
|
||||
@@ -34,6 +35,7 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.foods.category} element={<CategoryFood />} />
|
||||
<Route path={Pages.customers.list} element={<CustomersList />} />
|
||||
<Route path={Pages.customers.detail + ':id'} element={<CustomerDetails />} />
|
||||
<Route path={Pages.customers.add} element={<CreateCustomer />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user