hamid zarghami
177 lines
8.2 KiB
TypeScript
177 lines
8.2 KiB
TypeScript
import { Calendar, CardPos, Document, DocumentDownload, DollarCircle, Eye, NoteText, Printer, Profile, Receipt, Status, Wallet1 } from 'iconsax-react'
|
||
import { FC, useState } from 'react'
|
||
import DefaulModal from '../../../components/DefaulModal'
|
||
import { useTranslation } from 'react-i18next'
|
||
import StatusCircle from '../../../components/StatusCircle'
|
||
import Button from '../../../components/Button'
|
||
|
||
const Detail: FC = () => {
|
||
|
||
const { t } = useTranslation('global')
|
||
const [showModal, setShowModal] = useState<boolean>(false)
|
||
|
||
return (
|
||
<div>
|
||
<Eye onClick={() => setShowModal(true)} className='cursor-pointer' size={20} color='black' />
|
||
|
||
<DefaulModal
|
||
open={showModal}
|
||
close={() => setShowModal(false)}
|
||
isHeader
|
||
title_header={`${t('transaction.transaction2')} ۱۲۳۴۵۵`}
|
||
>
|
||
<div className='my-10'>
|
||
<div className='flex xl:flex-row flex-col gap-8'>
|
||
<div className='flex-1 px-6 h-10 flex justify-between items-center'>
|
||
<div className='flex gap-2 text-description'>
|
||
<CardPos size={14} color='#8C90A3' />
|
||
<div>
|
||
{t('transaction.type_deposit')}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
واریز شتابی
|
||
</div>
|
||
</div>
|
||
<div className='flex-1 px-6 h-10 flex justify-between items-center'>
|
||
<div className='flex gap-2 text-description'>
|
||
<Status size={14} color='#8C90A3' />
|
||
<div>
|
||
{t('transaction.status')}
|
||
</div>
|
||
</div>
|
||
<div className='flex gap-2 items-center'>
|
||
<StatusCircle
|
||
color='#00BA4B'
|
||
/>
|
||
<div>{t('transaction.success_paid')}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
|
||
<div className='flex-1 px-6 h-10 flex justify-between items-center'>
|
||
<div className='flex gap-2 text-description'>
|
||
<Wallet1 size={14} color='#8C90A3' />
|
||
<div>
|
||
{t('transaction.type_getway')}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
آنلاین بانک سامان
|
||
</div>
|
||
</div>
|
||
<div className='flex-1 px-6 h-10 flex justify-between items-center'>
|
||
<div className='flex gap-2 text-description'>
|
||
<DollarCircle size={14} color='#8C90A3' />
|
||
<div>
|
||
{t('transaction.amount')}
|
||
</div>
|
||
</div>
|
||
<div className='flex gap-2 items-center'>
|
||
۱۰,۰۰۰,۰۰۰ {t('toman')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
|
||
<div className='flex-1 px-6 h-10 flex justify-between items-center'>
|
||
<div className='flex gap-2 text-description'>
|
||
<Profile size={14} color='#8C90A3' />
|
||
<div>
|
||
{t('transaction.doer')}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
مهرداد مظفری
|
||
</div>
|
||
</div>
|
||
<div className='flex-1 px-6 h-10 flex justify-between items-center'>
|
||
<div className='flex gap-2 text-description'>
|
||
<Calendar size={14} color='#8C90A3' />
|
||
<div>
|
||
{t('transaction.date')}
|
||
</div>
|
||
</div>
|
||
<div className='flex gap-2 items-center'>
|
||
۱۴۰۳/۰۹/۳۰
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
|
||
<div className='flex-1 px-6 h-10 flex justify-between items-center'>
|
||
<div className='flex gap-2 text-description'>
|
||
<Document size={14} color='#8C90A3' />
|
||
<div>
|
||
{t('transaction.tracking_number')}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
bbd704c-۱۲۳۴۵۶
|
||
</div>
|
||
</div>
|
||
<div className='flex-1 px-6 h-10 flex justify-between items-center'>
|
||
<div className='flex gap-2 text-description'>
|
||
<Receipt size={14} color='#8C90A3' />
|
||
<div>
|
||
{t('transaction.order_number')}
|
||
</div>
|
||
</div>
|
||
<div className='flex gap-2 items-center'>
|
||
bbd704c-۱۲۳۴۵۶
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
|
||
<div className='flex-1 px-6 h-10 flex justify-between items-center'>
|
||
<div className='flex gap-2 text-description'>
|
||
<NoteText size={14} color='#8C90A3' />
|
||
<div>
|
||
{t('transaction.description_transaction')}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
-
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='border-t pt-8 flex justify-end border-white border-opacity-40'>
|
||
<div className='flex gap-5'>
|
||
<Button
|
||
className='bg-white bg-opacity-35 w-[170px] text-description'
|
||
>
|
||
<div className='flex gap-2 items-center justify-center'>
|
||
<Printer
|
||
size={20}
|
||
color='#8C90A3'
|
||
/>
|
||
<div>
|
||
{t('transaction.print')}
|
||
</div>
|
||
</div>
|
||
|
||
</Button>
|
||
<Button
|
||
className='bg-black w-[170px] '
|
||
>
|
||
<div className='flex gap-2 items-center justify-center'>
|
||
<DocumentDownload
|
||
size={20}
|
||
color='white'
|
||
/>
|
||
<div>
|
||
{t('transaction.download')}
|
||
</div>
|
||
</div>
|
||
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DefaulModal>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Detail |