hamid zarghami
160 lines
6.8 KiB
TypeScript
160 lines
6.8 KiB
TypeScript
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 |