category service
This commit is contained in:
hamid zarghami
@@ -1,16 +1,23 @@
|
||||
import { FC } from 'react'
|
||||
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 SwitchComponent from '../../components/Switch'
|
||||
import UploadBoxDraggble from '../../components/UploadBoxDraggble'
|
||||
import Button from '../../components/Button'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import CreateCategory from './components/CreateCategory'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import { ServiceCategoryType } from './types/ServiceTypes'
|
||||
import { useGetAllCategory } from './hooks/useServiceData'
|
||||
import StatusCategory from './components/StatusCategory'
|
||||
import Pagination from '../../components/Pagination'
|
||||
|
||||
|
||||
const Category: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const [isActive, setIsActive] = useState<'active' | 'deactive' | ''>('')
|
||||
const getCategory = useGetAllCategory(page, search, isActive)
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
@@ -24,11 +31,12 @@ const Category: FC = () => {
|
||||
<div className='w-32'>
|
||||
<Select
|
||||
items={[
|
||||
{ label: 'All', value: 'all' },
|
||||
{ label: 'Active', value: 'active' },
|
||||
{ label: 'Inactive', value: 'inactive' },
|
||||
{ label: t('all'), value: '' },
|
||||
{ label: t('service.active'), value: 'active' },
|
||||
{ label: t('service.deactive'), value: 'deactive' },
|
||||
]}
|
||||
placeholder={t('service.category')}
|
||||
placeholder={t('status')}
|
||||
onChange={(e) => setIsActive(e.target.value as 'active' | 'deactive' | '')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -37,98 +45,70 @@ const Category: FC = () => {
|
||||
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'>
|
||||
<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('service.parent_category')} />
|
||||
<Td text={t('service.count_sub_category')} />
|
||||
<Td text={t('service.count_service')} />
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text=''>
|
||||
<div className='size-10 rounded-lg bg-red-100'></div>
|
||||
</Td>
|
||||
<Td text={'کسب و کار'} />
|
||||
<Td text={'-'} />
|
||||
<Td text={'2'} />
|
||||
<Td text={'14'} />
|
||||
<Td text={''}>
|
||||
<SwitchComponent
|
||||
active
|
||||
onChange={() => null}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{
|
||||
getCategory.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('service.parent_category')} />
|
||||
<Td text={t('service.count_sub_category')} />
|
||||
<Td text={t('service.count_service')} />
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getCategory.data?.data?.categories?.map((item: ServiceCategoryType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text=''>
|
||||
<img src={item.icon} className='size-10 rounded-lg' />
|
||||
</Td>
|
||||
<Td text={item.title} />
|
||||
<Td text={item.parent ? item.parent.title : '-'} />
|
||||
<Td text={item.childrenCount + ''} />
|
||||
<Td text={item.servicesCount + ''} />
|
||||
<Td text={''}>
|
||||
<StatusCategory
|
||||
defaultActive={item.isActive}
|
||||
id={item.id}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className='flex justify-end pb-3'>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={getCategory.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
|
||||
<div>
|
||||
{t('service.add_category')}
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex justify-between'>
|
||||
<div className='text-sm'>
|
||||
{t('service.status_category')}
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<SwitchComponent active onChange={() => { }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label={t('service.title_category')}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Select
|
||||
label={t('service.category_parent_2')}
|
||||
items={[
|
||||
{ label: 'All', value: 'all' },
|
||||
{ label: 'Active', value: 'active' },
|
||||
{ label: 'Inactive', value: 'inactive' },
|
||||
]}
|
||||
placeholder={t('select')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<UploadBoxDraggble
|
||||
label={t('service.icon_serice_category')}
|
||||
onChange={() => null}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-1 justify-end items-end mt-8'>
|
||||
<Button
|
||||
className='w-fit px-5'
|
||||
>
|
||||
<div className='flex items-center gap-2'>
|
||||
<TickCircle
|
||||
className='size-5'
|
||||
color='white'
|
||||
/>
|
||||
<div>{t('save')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<CreateCategory />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user