hamid zarghami
122 lines
5.3 KiB
TypeScript
122 lines
5.3 KiB
TypeScript
import { FC } from 'react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import Button from '../../components/Button'
|
||
import { Add, Eye } from 'iconsax-react'
|
||
import Select from '../../components/Select'
|
||
import Input from '../../components/Input'
|
||
import Td from '../../components/Td'
|
||
import { Link } from 'react-router-dom'
|
||
import { Pages } from '../../config/Pages'
|
||
import { useGetCustomers } from './hooks/useCustomerData'
|
||
import PageLoading from '../../components/PageLoading'
|
||
import { CustomerItemType } from './types/CustomerTypes'
|
||
|
||
const CustomerList: FC = () => {
|
||
|
||
const { t } = useTranslation('global')
|
||
const getCustomers = useGetCustomers()
|
||
|
||
return (
|
||
<div className='mt-4'>
|
||
<div className='flex w-full justify-between items-center'>
|
||
<div>
|
||
{t('customer.customer_list')}
|
||
</div>
|
||
<div>
|
||
<Button
|
||
className='px-5'
|
||
>
|
||
<div className='flex gap-2'>
|
||
<Add
|
||
className='size-5'
|
||
color='#fff'
|
||
/>
|
||
<div>{t('customer.add_cutomer')}</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex justify-between items-center mt-12'>
|
||
<div className='flex gap-4'>
|
||
<Select
|
||
className='w-36'
|
||
items={[
|
||
{ label: 'All', value: 'all' },
|
||
{ label: 'Active', value: 'active' },
|
||
{ label: 'Inactive', value: 'inactive' },
|
||
]}
|
||
placeholder={t('service.category')}
|
||
/>
|
||
<Select
|
||
className='w-36'
|
||
items={[
|
||
{ label: 'All', value: 'all' },
|
||
{ label: 'Active', value: 'active' },
|
||
{ label: 'Inactive', value: 'inactive' },
|
||
]}
|
||
placeholder={t('service.status')}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Input
|
||
variant='search'
|
||
placeholder={t('service.search')}
|
||
className='bg-white border border-border'
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{
|
||
getCustomers.isPending ?
|
||
<PageLoading />
|
||
:
|
||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||
<table className='w-full text-sm '>
|
||
<thead className='thead'>
|
||
<tr>
|
||
<Td text={t('customer.name')} />
|
||
<Td text={t('customer.company')} />
|
||
<Td text={t('customer.email')} />
|
||
<Td text={t('customer.active_services')} />
|
||
<Td text={t('customer.factor')} />
|
||
<Td text={t('customer.tickets')} />
|
||
<Td text={t('customer.detail')} />
|
||
<Td text={''} />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{
|
||
getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
|
||
return (
|
||
<tr key={item.id} className='tr'>
|
||
<Td text={item.firstName + ' ' + item.lastName} />
|
||
<Td text={'شرکت داناک'} />
|
||
<Td text={item.email ? item.email : ''} />
|
||
<Td text={item.subscriptionsCount} />
|
||
<Td text={''}>
|
||
<div className='text-[#0047FF]'>{item.invoicesCount} صورت حساب</div>
|
||
</Td>
|
||
<Td text={''}>
|
||
<div className='text-[#0047FF]'>{item.ticketsCount} تیکت</div>
|
||
</Td>
|
||
<Td text={''}>
|
||
<Link to={Pages.ticket.detail + '1'}>
|
||
<Eye size={20} color='#8C90A3' />
|
||
</Link>
|
||
</Td>
|
||
<Td text={''} />
|
||
</tr>
|
||
)
|
||
})
|
||
}
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CustomerList |