receip and ticket and ...
This commit is contained in:
hamid zarghami
@@ -0,0 +1,157 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
|
||||
import Input from '../../components/Input'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import UploadBox from '../../components/UploadBox'
|
||||
import Button from '../../components/Button'
|
||||
import { CloseCircle, InfoCircle } from 'iconsax-react'
|
||||
|
||||
const TicketDetail: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex gap-1'>
|
||||
<div>{t('ticket.ticket_number')}</div>
|
||||
<div>12312</div>
|
||||
</div>
|
||||
<div className='flex gap-6 mt-8'>
|
||||
<div className='flex-1 bg-white py-8 px-10 rounded-3xl'>
|
||||
<div className='gap-6 rowTwoInput'>
|
||||
<Input
|
||||
label={t('ticket.select_your_service')}
|
||||
value={'دی منو'}
|
||||
readOnly
|
||||
/>
|
||||
<Input
|
||||
label={t('ticket.user_name')}
|
||||
value={'مهرداد مظفری'}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 text-sm'>
|
||||
موضوع درخواست پشتیبانی
|
||||
</div>
|
||||
|
||||
<div className='mt-6 text-sm bg-[#F6F7FA] p-6 rounded-3xl rounded-tr-none max-w-[70%]'>
|
||||
<div className='leading-7'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
|
||||
</div>
|
||||
<div className='flex justify-end mt-6 text-xs text-description'>
|
||||
10:07 | 1403/09/30
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='w-full flex justify-end'>
|
||||
<div className='mt-6 text-sm bg-[#EBEDF5] p-6 rounded-3xl rounded-tl-none max-w-[70%]'>
|
||||
<div className='flex gap-1'>
|
||||
<div className='font-bold'>
|
||||
{t('ticket.expert')}
|
||||
</div>
|
||||
<div>سیما فرهادی</div>
|
||||
</div>
|
||||
<div className='leading-7 mt-4'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
|
||||
</div>
|
||||
<div className='flex justify-end mt-6 text-xs text-description'>
|
||||
10:07 | 1403/09/30
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-9'>
|
||||
<Textarea
|
||||
label={t('ticket.answer')}
|
||||
placeholder={t('ticket.your_description')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-7'>
|
||||
<UploadBox
|
||||
label={t('ticket.attachment')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end mt-6'>
|
||||
<Button
|
||||
label={t('ticket.send')}
|
||||
className='max-w-[100px]'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='h-fit'>
|
||||
<div className='bg-white p-6 rounded-3xl flex gap-4'>
|
||||
<Button
|
||||
label={t('ticket.send_answer')}
|
||||
className='text-xs'
|
||||
/>
|
||||
<Button
|
||||
className='bg-[#D52903]'
|
||||
>
|
||||
<div className='flex gap-2 text-xs items-center'>
|
||||
<CloseCircle
|
||||
color='white'
|
||||
size={20}
|
||||
/>
|
||||
<div>
|
||||
{t('ticket.close_ticket')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className='bg-white p-6 rounded-3xl mt-8'>
|
||||
<div className='flex justify-between'>
|
||||
<div className='text-sm'>
|
||||
{t('ticket.info_ticket')}
|
||||
</div>
|
||||
<div className='h-7 px-3 rounded-xl flex items-center text-xs bg-green-100 text-green-400'>
|
||||
{t('ticket.answered')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-14 text-xs w-full'>
|
||||
<div className='flex justify-between text-description'>
|
||||
<div>{t('ticket.ticket_number')}</div>
|
||||
<div>
|
||||
۱۲۳۴۵۵
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex mt-6 justify-between text-description'>
|
||||
<div>{t('ticket.ticket_number')}</div>
|
||||
<div>
|
||||
۱۲۳۴۵۵
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex mt-6 justify-between text-description'>
|
||||
<div>{t('ticket.ticket_number')}</div>
|
||||
<div>
|
||||
۱۲۳۴۵۵
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex mt-6 justify-between text-description'>
|
||||
<div>{t('ticket.ticket_number')}</div>
|
||||
<div>
|
||||
۱۲۳۴۵۵
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='mt-10 border-t text-xs pt-5 border-border items-center flex gap-2'>
|
||||
<InfoCircle size={20} color='black' />
|
||||
<div>
|
||||
{t('ticket.update_sms')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TicketDetail
|
||||
Reference in New Issue
Block a user