danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ticket

Browse Source
This commit is contained in:
hamid zarghami
2024-12-29 11:27:56 +03:30
parent 44d739c061
commit 7756e20a9f
11 changed files with 345 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ticket/TicketList.tsx
+103
View File
@@ -0,0 +1,103 @@
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Message2, MessageRemove, MessageTick, MessageTime } from 'iconsax-react'
import Tabs from '../../components/Tabs'
import Td from '../../components/Td'
const TicketList: FC = () => {
const { t } = useTranslation('global')
const [activeTab, setActiveTab] = useState<string>('answered')
return (
<div className='mt-4'>
<div className='flex justify-between items-center'>
<div>
{t('ticket.tickets')}
</div>
<Button
className='w-[172px]'
>
<div className='flex gap-2 items-center'>
<Add size={20} color='white' />
<div>
{t('ticket.new_ticket')}
</div>
</div>
</Button>
</div>
<div className='mt-14'>
<Tabs
active={activeTab}
items={[
{
icon: <MessageTick color={activeTab === 'answered' ? 'black' : '#8C90A3'} size={22} />,
label: t('ticket.answered'),
value: 'answered'
},
{
icon: <MessageTime color={activeTab === 'checking' ? 'black' : '#8C90A3'} size={22} />,
label: t('ticket.checking'),
value: 'checking'
},
{
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} />,
label: t('ticket.closed'),
value: 'closed'
},
]}
onChange={setActiveTab}
/>
</div>
<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('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={t('ticket.detail')} />
<Td text={''} />
</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={t('ticket.detail')} />
<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={t('ticket.detail')} />
<Td text={''} />
</tr>
</tbody>
</table>
</div>
</div>
)
}
export default TicketList