hamid zarghami
121 lines
4.5 KiB
TypeScript
121 lines
4.5 KiB
TypeScript
import Tabs from '@/components/Tabs'
|
||
import { useState, type FC } from 'react'
|
||
import { TabMyOrdersEnum } from './enum/OrderEnum'
|
||
import Filters from '@/components/Filters'
|
||
import Button from '@/components/Button'
|
||
import { AddSquare } from 'iconsax-react'
|
||
import Table from '@/components/Table'
|
||
import { useGetMyOrders } from './hooks/useOrderData'
|
||
|
||
const MyOrders: FC = () => {
|
||
|
||
const [activeTab, setActiveTab] = useState<TabMyOrdersEnum>(TabMyOrdersEnum.ALL)
|
||
const { data } = useGetMyOrders()
|
||
|
||
return (
|
||
<div className='mt-5'>
|
||
<h1>
|
||
سفارشات من
|
||
</h1>
|
||
|
||
<div className='mt-10'>
|
||
<Tabs
|
||
items={[
|
||
{ label: 'همه', value: TabMyOrdersEnum.ALL },
|
||
{ label: 'در حال انجام', value: TabMyOrdersEnum.IN_PROGRESS },
|
||
{ label: 'تایید شده', value: TabMyOrdersEnum.CONFIRMED },
|
||
{ label: 'تحویل داده شده', value: TabMyOrdersEnum.DELIVERED },
|
||
{ label: 'کنسل شده', value: TabMyOrdersEnum.CANCELLED },
|
||
]}
|
||
activeTab={activeTab}
|
||
onTabChange={(tab) => setActiveTab(tab as TabMyOrdersEnum)}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-16 flex justify-between items-center'>
|
||
<Filters
|
||
fields={[
|
||
{ type: 'input', name: 'search', placeholder: 'جستجو' },
|
||
{ type: 'date', name: 'date', placeholder: 'تاریخ' },
|
||
{
|
||
type: 'select', name: 'status', placeholder: 'وضعیت', options: [
|
||
{ label: 'همه', value: 'all' },
|
||
{ label: 'در حال انجام', value: 'in_progress' },
|
||
{ label: 'تایید شده', value: 'confirmed' },
|
||
{ label: 'تحویل داده شده', value: 'delivered' },
|
||
{ label: 'کنسل شده', value: 'cancelled' },
|
||
]
|
||
},
|
||
]}
|
||
onChange={() => { }}
|
||
/>
|
||
|
||
<Button
|
||
className='w-fit px-5'
|
||
>
|
||
<div className='flex items-center gap-2'>
|
||
<AddSquare
|
||
size={16}
|
||
color='#000000'
|
||
/>
|
||
<span>
|
||
سفارش جدید
|
||
</span>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
|
||
<div className='mt-10'>
|
||
<Table
|
||
columns={[
|
||
{
|
||
key: 'id',
|
||
title: 'شماره',
|
||
},
|
||
{
|
||
key: 'title',
|
||
title: 'عنوان',
|
||
},
|
||
{
|
||
key: 'createdAt',
|
||
title: 'زمان ثبت سفارش',
|
||
},
|
||
{
|
||
key: 'designer',
|
||
title: 'طراح',
|
||
},
|
||
{
|
||
key: 'type',
|
||
title: 'نوع سفارش',
|
||
},
|
||
{
|
||
key: 'itemsCount',
|
||
title: 'تعداد اقلام',
|
||
},
|
||
{
|
||
key: 'status',
|
||
title: 'وضعیت سفارش',
|
||
},
|
||
{
|
||
key: 'actions',
|
||
title: '',
|
||
}
|
||
]}
|
||
data={[
|
||
{
|
||
id: 1,
|
||
title: 'سفارش 1',
|
||
createdAt: '2021-01-01',
|
||
designer: 'طراح 1',
|
||
type: 'نوع 1',
|
||
itemsCount: 10,
|
||
status: 'در حال انجام',
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default MyOrders |