create cusromer

src/pages/customers/Create.tsx

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