hamid zarghami
133 lines
5.2 KiB
TypeScript
133 lines
5.2 KiB
TypeScript
import Tabs from '@/components/Tabs'
|
||
import { useState, type FC } from 'react'
|
||
import { TabMyRequestsEnum } from './enum/RequestEnum'
|
||
import Filters from '@/components/Filters'
|
||
import Button from '@/components/Button'
|
||
import { AddSquare, Eye } from 'iconsax-react'
|
||
import Table from '@/components/Table'
|
||
import { useGetMyRequests } from './hooks/useRequestData'
|
||
import moment from 'moment-jalaali'
|
||
import { Link } from 'react-router-dom'
|
||
import { Paths } from '@/config/Paths'
|
||
|
||
const MyRequests: FC = () => {
|
||
const [page, setPage] = useState<number>(1)
|
||
const [activeTab, setActiveTab] = useState<TabMyRequestsEnum>(TabMyRequestsEnum.ALL)
|
||
const { data } = useGetMyRequests(page, activeTab)
|
||
|
||
return (
|
||
<div className='mt-5'>
|
||
<h1>
|
||
سفارشات من
|
||
</h1>
|
||
|
||
<div className='mt-10'>
|
||
<Tabs
|
||
items={[
|
||
{ label: 'همه', value: TabMyRequestsEnum.ALL },
|
||
{ label: 'در حال انجام', value: TabMyRequestsEnum.IN_PROGRESS },
|
||
{ label: 'تکمیل داده شده', value: TabMyRequestsEnum.DELIVERED },
|
||
{ label: 'کنسل شده', value: TabMyRequestsEnum.CANCELLED },
|
||
]}
|
||
activeTab={activeTab}
|
||
onTabChange={(tab) => setActiveTab(tab as TabMyRequestsEnum)}
|
||
/>
|
||
</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={() => { }}
|
||
/>
|
||
|
||
<Link to={Paths.newRequest}>
|
||
<Button
|
||
className='w-fit px-5'
|
||
>
|
||
<div className='flex items-center gap-2'>
|
||
<AddSquare
|
||
size={16}
|
||
color='#000000'
|
||
/>
|
||
<span>
|
||
سفارش جدید
|
||
</span>
|
||
</div>
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className='mt-10'>
|
||
<Table
|
||
columns={[
|
||
{
|
||
key: 'orderNumber',
|
||
title: 'شماره',
|
||
},
|
||
{
|
||
key: 'items',
|
||
title: 'تعداد اقلام',
|
||
render: (item) => {
|
||
return (
|
||
<div>{item.items.length}</div>
|
||
)
|
||
}
|
||
},
|
||
{
|
||
key: 'createdAt',
|
||
title: 'زمان ثبت سفارش',
|
||
render: (item) => {
|
||
return (
|
||
<div>{moment(item.createdAt).format('jYYYY-jMM-jDD')}</div>
|
||
)
|
||
}
|
||
},
|
||
{
|
||
key: 'designer',
|
||
title: 'طراح',
|
||
},
|
||
{
|
||
key: 'status',
|
||
title: 'وضعیت سفارش',
|
||
},
|
||
{
|
||
key: 'actions',
|
||
title: '',
|
||
render: (item) => {
|
||
return (
|
||
<Link to={Paths.requestDetails + item.id}>
|
||
<Eye
|
||
size={20}
|
||
color='#000000'
|
||
/>
|
||
</Link>
|
||
)
|
||
}
|
||
}
|
||
]}
|
||
data={data?.data}
|
||
pagination={{
|
||
currentPage: page,
|
||
onPageChange: setPage,
|
||
totalPages: data?.meta?.totalPages || 1
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default MyRequests
|