create cusromer
This commit is contained in:
hamid zarghami
@@ -11,7 +11,7 @@ const CustomerStats: FC<CustomerStatsProps> = ({
|
|||||||
walletBalance = '۲۴۰.۰۰۰ تومان'
|
walletBalance = '۲۴۰.۰۰۰ تومان'
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
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-4 items-center'>
|
||||||
<div className='flex gap-1.5'>
|
<div className='flex gap-1.5'>
|
||||||
<Star1 size={16} color='black' />
|
<Star1 size={16} color='black' />
|
||||||
|
|||||||
@@ -47,3 +47,23 @@ textarea::placeholder {
|
|||||||
tbody tr:nth-child(odd) {
|
tbody tr:nth-child(odd) {
|
||||||
background: rgba(233, 235, 244, 0.2) !important;
|
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 CategoryFood from '@/pages/food/Category'
|
||||||
import CustomersList from '@/pages/customers/List'
|
import CustomersList from '@/pages/customers/List'
|
||||||
import CustomerDetails from '@/pages/customers/Details'
|
import CustomerDetails from '@/pages/customers/Details'
|
||||||
|
import CreateCustomer from '@/pages/customers/Create'
|
||||||
|
|
||||||
const MainRouter: FC = () => {
|
const MainRouter: FC = () => {
|
||||||
|
|
||||||
@@ -34,6 +35,7 @@ const MainRouter: FC = () => {
|
|||||||
<Route path={Pages.foods.category} element={<CategoryFood />} />
|
<Route path={Pages.foods.category} element={<CategoryFood />} />
|
||||||
<Route path={Pages.customers.list} element={<CustomersList />} />
|
<Route path={Pages.customers.list} element={<CustomersList />} />
|
||||||
<Route path={Pages.customers.detail + ':id'} element={<CustomerDetails />} />
|
<Route path={Pages.customers.detail + ':id'} element={<CustomerDetails />} />
|
||||||
|
<Route path={Pages.customers.add} element={<CreateCustomer />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user