admin ticket
This commit is contained in:
@@ -1,16 +1,19 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add, Eye, Message2, MessageRemove, MessageTick, MessageTime } from 'iconsax-react'
|
||||
import { Eye, MessageRemove, MessageTick, MessageTime } from 'iconsax-react'
|
||||
import Tabs from '../../components/Tabs'
|
||||
import Td from '../../components/Td'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { useGetTickets } from './hooks/useTicketData'
|
||||
import moment from 'moment-jalaali'
|
||||
import { TicketItemType } from './types/TicketTypes'
|
||||
|
||||
const TicketList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [activeTab, setActiveTab] = useState<string>('answered')
|
||||
const [activeTab, setActiveTab] = useState<'ANSWERED' | 'PENDING' | 'CLOSED'>('ANSWERED')
|
||||
const getTicket = useGetTickets(activeTab)
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
@@ -19,7 +22,7 @@ const TicketList: FC = () => {
|
||||
{t('ticket.tickets')}
|
||||
</div>
|
||||
|
||||
<Link to={Pages.ticket.create}>
|
||||
{/* <Link to={Pages.ticket.create}>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
>
|
||||
@@ -30,7 +33,7 @@ const TicketList: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</Link> */}
|
||||
</div>
|
||||
|
||||
<div className='mt-14'>
|
||||
@@ -38,27 +41,27 @@ const TicketList: FC = () => {
|
||||
active={activeTab}
|
||||
items={[
|
||||
{
|
||||
icon: <MessageTick color={activeTab === 'answered' ? 'black' : '#8C90A3'} size={22} />,
|
||||
icon: <MessageTick color={activeTab === 'ANSWERED' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('ticket.answered'),
|
||||
value: 'answered'
|
||||
value: 'ANSWERED'
|
||||
},
|
||||
{
|
||||
icon: <MessageTime color={activeTab === 'checking' ? 'black' : '#8C90A3'} size={22} />,
|
||||
icon: <MessageTime color={activeTab === 'PENDING' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('ticket.checking'),
|
||||
value: 'checking'
|
||||
value: 'PENDING'
|
||||
},
|
||||
// {
|
||||
// icon: <Message2 color={activeTab === 'wating' ? 'black' : '#8C90A3'} size={22} />,
|
||||
// label: t('ticket.wait_answered'),
|
||||
// value: 'wating'
|
||||
// },
|
||||
{
|
||||
icon: <Message2 color={activeTab === 'wating' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('ticket.wait_answered'),
|
||||
value: 'wating'
|
||||
},
|
||||
{
|
||||
icon: <MessageRemove color={activeTab === 'closed' ? 'black' : '#8C90A3'} size={22} />,
|
||||
icon: <MessageRemove color={activeTab === 'CLOSED' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('ticket.closed'),
|
||||
value: 'closed'
|
||||
value: 'CLOSED'
|
||||
},
|
||||
]}
|
||||
onChange={setActiveTab}
|
||||
onChange={(value) => setActiveTab(value as 'ANSWERED' | 'PENDING' | 'CLOSED')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -77,34 +80,28 @@ const TicketList: FC = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text={t('ticket.number')} />
|
||||
<Td text={t('ticket.title')} />
|
||||
<Td text={t('ticket.team')} />
|
||||
<Td text={t('ticket.date')} />
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={t('ticket.priority')} />
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
<tr className='tr'>
|
||||
<Td text={t('ticket.number')} />
|
||||
<Td text={t('ticket.title')} />
|
||||
<Td text={t('ticket.team')} />
|
||||
<Td text={t('ticket.date')} />
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={t('ticket.priority')} />
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
{
|
||||
getTicket.data?.data?.tickets?.map((item: TicketItemType) => (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={item.numericId + ''} />
|
||||
<Td text={item.subject} />
|
||||
<Td text={item?.category?.title} />
|
||||
<Td text={''}>
|
||||
<div className='dltr text-right'>
|
||||
{moment(item.updatedAt).format('jYYYY-jMM-jDD HH:mm')}
|
||||
</div>
|
||||
</Td>
|
||||
<Td text={t(`ticket.${item.status}`)} />
|
||||
<Td text={t(`ticket.${item.priority}`)} />
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + item.id}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user