hamid zarghami
133 lines
6.6 KiB
TypeScript
133 lines
6.6 KiB
TypeScript
import { FC, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Select from '../../../components/Select'
|
|
import Input from '../../../components/Input'
|
|
import Td from '../../../components/Td'
|
|
import PageLoading from '../../../components/PageLoading'
|
|
import { Trash } from 'iconsax-react'
|
|
import CreateIndustry from './CreateIndustry'
|
|
import { useDeleteIndustry, useGetIndustries } from '../hooks/useCompanyData'
|
|
import { IndustryItemType } from '../types/CompanyTypes'
|
|
import Pagination from '../../../components/Pagination'
|
|
import StatusIndustry from './StatusIndustry'
|
|
import UpdateIndustry from './UpdateIndustry'
|
|
|
|
const Industries: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
const [search, setSearch] = useState<string>('')
|
|
const [page, setPage] = useState<number>(1)
|
|
const [isActive, setIsActive] = useState<'active' | 'deactive' | ''>('')
|
|
const getIndustries = useGetIndustries(page, search, isActive)
|
|
const deleteIndustry = useDeleteIndustry()
|
|
|
|
const handleDelete = (id: string) => {
|
|
deleteIndustry.mutate(id, {
|
|
onSuccess: () => {
|
|
getIndustries.refetch()
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className='mt-4'>
|
|
<div>
|
|
{t('service.cateory_services')}
|
|
</div>
|
|
|
|
<div className='flex gap-6 mt-9'>
|
|
<div className='flex-1'>
|
|
<div className='flex justify-between items-center'>
|
|
<div className='w-32'>
|
|
<Select
|
|
items={[
|
|
{ label: t('all'), value: '' },
|
|
{ label: t('service.active'), value: 'active' },
|
|
{ label: t('service.deactive'), value: 'deactive' },
|
|
]}
|
|
placeholder={t('status')}
|
|
onChange={(e) => setIsActive(e.target.value as 'active' | 'deactive' | '')}
|
|
/>
|
|
</div>
|
|
|
|
<div className='w-40'>
|
|
<Input
|
|
variant='search'
|
|
placeholder={t('search')}
|
|
className='bg-white'
|
|
onChangeSearchFinal={(value) => setSearch(value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className='flex-1 mt-8 bg-white py-2 xl:px-10 px-5 rounded-3xl'>
|
|
{
|
|
getIndustries.isPending ?
|
|
<div className='mt-4'>
|
|
<PageLoading />
|
|
</div>
|
|
:
|
|
<div className='relative overflow-x-auto rounded-3xl w-full'>
|
|
<table className='w-full text-sm '>
|
|
<thead className='thead'>
|
|
<tr>
|
|
<Td text='' />
|
|
<Td text={t('service.title')} />
|
|
<Td text={t('company.count_company')} />
|
|
<Td text={t('ticket.status')} />
|
|
<Td text={''} />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{
|
|
getIndustries.data?.data?.industries?.map((item: IndustryItemType) => {
|
|
return (
|
|
<tr key={item.id} className='tr'>
|
|
<Td text=''>
|
|
<img src={item.iconUrl} className='size-10 min-w-10 rounded-lg' />
|
|
</Td>
|
|
<Td text={item.title} />
|
|
<Td text={item.companiesCount + ''} />
|
|
<Td text={''}>
|
|
<StatusIndustry
|
|
defaultActive={item.isActive}
|
|
id={item.id}
|
|
/>
|
|
</Td>
|
|
<Td text={''}>
|
|
<div className='flex gap-2'>
|
|
<UpdateIndustry refetch={() => getIndustries.refetch()} id={item.id} />
|
|
<Trash
|
|
size={20}
|
|
color='#888888'
|
|
onClick={() => handleDelete(item.id)}
|
|
/>
|
|
</div>
|
|
</Td>
|
|
</tr>
|
|
)
|
|
})
|
|
}
|
|
</tbody>
|
|
</table>
|
|
<div className='flex justify-end pb-3'>
|
|
<Pagination
|
|
currentPage={page}
|
|
totalPages={getIndustries.data?.data?.pager?.totalPages}
|
|
onPageChange={setPage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<CreateIndustry refetch={() => getIndustries.refetch()} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Industries
|