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

notification

Browse Source
This commit is contained in:
hamid zarghami
2025-01-01 15:39:54 +03:30
parent 9f71b92a2e
commit 7a50f2d6cf
11 changed files with 635 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/transaction/components/Detail.tsx
+177
View File
@@ -0,0 +1,177 @@
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 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 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'>
۱۰,۰۰۰,۰۰۰ ریال
</div>
</div>
</div>
<div className='flex 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 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 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