hamid zarghami
142 lines
5.8 KiB
TypeScript
142 lines
5.8 KiB
TypeScript
import Filters from '@/components/Filters'
|
||
import { type FC } from 'react'
|
||
import Table from '@/components/Table'
|
||
import { AddSquare, Edit2, Eye, Printer, Receipt21 } from 'iconsax-react'
|
||
import { useGetOrders } from './hooks/useOrderData'
|
||
import moment from 'moment-jalaali'
|
||
import { Link } from 'react-router-dom'
|
||
import { Paths } from '@/config/Paths'
|
||
import type { OrderListItemType } from './types/Types'
|
||
import Button from '@/components/Button'
|
||
|
||
const OrdersList: FC = () => {
|
||
|
||
const { data } = useGetOrders()
|
||
|
||
return (
|
||
<div className='mt-5'>
|
||
<div className='flex justify-between items-center'>
|
||
<h1 className='text-lg font-light'>سفارش ها</h1>
|
||
<Link to={Paths.convertToOrder}>
|
||
<Button className='w-fit px-6'>
|
||
<div className='flex gap-2 items-center'>
|
||
<AddSquare size={18} color='black' />
|
||
سفارش جدید
|
||
</div>
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className='mt-8'>
|
||
<Filters
|
||
fields={[
|
||
{
|
||
name: 'search',
|
||
type: 'input',
|
||
placeholder: 'جستجو',
|
||
},
|
||
{
|
||
name: 'status',
|
||
type: 'select',
|
||
placeholder: 'وضعیت',
|
||
options: [
|
||
{ label: 'درحال انتظار', value: 'pending' },
|
||
],
|
||
},
|
||
{
|
||
name: 'date',
|
||
type: 'date',
|
||
placeholder: 'تاریخ',
|
||
},
|
||
]}
|
||
onChange={() => { }} />
|
||
</div>
|
||
|
||
<div className='mt-8'>
|
||
<Table<OrderListItemType>
|
||
columns={[
|
||
{
|
||
key: 'orderNumber',
|
||
title: 'شماره',
|
||
},
|
||
{
|
||
key: 'customer',
|
||
title: 'مشتری',
|
||
render: (item) => {
|
||
return (
|
||
<div>
|
||
{item.user?.firstName ? item.user?.firstName + ' ' + item.user?.lastName : item.user?.phone}
|
||
</div>
|
||
)
|
||
}
|
||
},
|
||
{
|
||
key: 'product',
|
||
title: 'نام محصول',
|
||
render: (item) => (
|
||
<div>{item.product?.title ?? '—'}</div>
|
||
),
|
||
},
|
||
{
|
||
key: 'createdAt',
|
||
title: 'تاریخ ایجاد ',
|
||
render: (item) => {
|
||
return (
|
||
<div>{moment(item.createdAt).format('jYYYY-jMM-jDD')}</div>
|
||
)
|
||
}
|
||
},
|
||
{
|
||
key: 'type',
|
||
title: 'تعداد اقلام',
|
||
render: () => <div>۱</div>,
|
||
},
|
||
{
|
||
key: 'designer',
|
||
title: 'مجری / طراح',
|
||
},
|
||
{
|
||
key: 'status',
|
||
title: 'وضعیت',
|
||
render: (item) => {
|
||
return (
|
||
<div className='h-6 w-fit flex items-center bg-[#FFEDCA] text-[#FF7B00] rounded-full px-2.5 text-xs'>
|
||
{item.status}
|
||
</div>
|
||
)
|
||
}
|
||
},
|
||
{
|
||
key: 'actions',
|
||
title: '',
|
||
render: (item) => {
|
||
return (
|
||
<div className='flex gap-2 items-center'>
|
||
<Link title='فرم چاپ' to={Paths.orderPrint + item.id}>
|
||
<Printer
|
||
size={20}
|
||
color='black'
|
||
/>
|
||
</Link>
|
||
<Link
|
||
to={Paths.order.details + item.id}
|
||
>
|
||
<Eye size={20} color='#8C90A3' />
|
||
</Link>
|
||
<Link to={Paths.order.edit + item.id}>
|
||
<Edit2 size={20} color='#0037FF' />
|
||
</Link>
|
||
<Receipt21 size={20} color='#FF8000' />
|
||
</div>
|
||
)
|
||
}
|
||
},
|
||
]}
|
||
data={data?.data}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default OrdersList |