From 53e81fb712b457b4f6fe68137830546af9b8d006 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 5 Nov 2025 14:28:53 +0330
Subject: [PATCH] create cusromer

---
 src/components/CustomerStats.tsx |   2 +-
 src/index.css                    |  20 ++++
 src/pages/customers/Create.tsx   | 160 +++++++++++++++++++++++++++++++
 src/router/Main.tsx              |   2 +
 4 files changed, 183 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/customers/Create.tsx

diff --git a/src/components/CustomerStats.tsx b/src/components/CustomerStats.tsx
index 6f0850e..a4ec6de 100644
--- a/src/components/CustomerStats.tsx
+++ b/src/components/CustomerStats.tsx
@@ -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' />
diff --git a/src/index.css b/src/index.css
index 8074abb..25a0ebc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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%;
+}
diff --git a/src/pages/customers/Create.tsx b/src/pages/customers/Create.tsx
new file mode 100644
index 0000000..208171e
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
index 336c34b..8fc7125 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -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>