notification
This commit is contained in:
hamid zarghami
@@ -24,4 +24,5 @@ export const Pages = {
|
||||
learning: "/learning",
|
||||
setting: "/setting",
|
||||
wallet: "/wallet",
|
||||
profile: "/profile",
|
||||
};
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
export const useOutsideClick = (callback: () => void) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent | TouchEvent) => {
|
||||
if (ref.current && !ref.current.contains(event.target as Node)) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mouseup', handleClickOutside);
|
||||
document.addEventListener('touchend', handleClickOutside);
|
||||
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mouseup', handleClickOutside);
|
||||
document.removeEventListener('touchend', handleClickOutside);
|
||||
};
|
||||
}, [callback]);
|
||||
|
||||
return ref;
|
||||
};
|
||||
@@ -103,3 +103,10 @@ tbody tr {
|
||||
|
||||
/* backdrop-filter: blur(5px); */
|
||||
}
|
||||
|
||||
.modalGlass3 {
|
||||
background: rgba(62, 61, 61, 0.2);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
backdrop-filter: blur(44px);
|
||||
}
|
||||
|
||||
+43
-2
@@ -125,13 +125,48 @@
|
||||
"returned": "پس داده شده",
|
||||
"its_time": "سررسیده شده",
|
||||
"archive": "بایگانی شده",
|
||||
"detail_account": "جزییات صورتحساب "
|
||||
"detail_account": "جزییات صورتحساب ",
|
||||
"personal_information": "اطلاعات شخصی",
|
||||
"type_person": "نوع شخص : ",
|
||||
"company": "حقوقی",
|
||||
"representativeـname": "نام نماینده :",
|
||||
"company_name": "نام شرکت/ سازمان :",
|
||||
"registration_number": "شماره ثبت :",
|
||||
"tel_company": "تلفن شرکت :",
|
||||
"national_code": "کد ملی نماینده :",
|
||||
"postal_code": "کد پستی :",
|
||||
"state": "استان :",
|
||||
"city": "شهر :",
|
||||
"address": "آدرس :",
|
||||
"detail_receip": "مشخصات صورتحساب",
|
||||
"not_paid": "پرداخت نشده",
|
||||
"description": "توضیحات",
|
||||
"price": "مبلغ",
|
||||
"receip_information": "اطلاعات صورتحساب",
|
||||
"date_factor": "تاریخ صدور فاکتور",
|
||||
"due_date": "تاریخ سررسید فاکتور",
|
||||
"factor_number": "شماره فاکتور",
|
||||
"status_factor": "وضعیت فاکتور"
|
||||
},
|
||||
"edit": "ویرایش",
|
||||
"transaction": {
|
||||
"transaction": "تراکنش ها",
|
||||
"totao_deposit": "مجموع واریز ها",
|
||||
"total_withdrawal": "مجموع برداشت ها",
|
||||
"balance": "موجودی کیف پول"
|
||||
"balance": "موجودی کیف پول",
|
||||
"transaction2": "تراکنش",
|
||||
"type_deposit": "نوع واریز",
|
||||
"status": "وضعیت",
|
||||
"success_paid": "پرداخت موفق",
|
||||
"print": "پرینت",
|
||||
"download": "دانلود",
|
||||
"type_getway": "نوع درگاه",
|
||||
"doer": "انجام دهنده",
|
||||
"tracking_number": "شماره پیگیری",
|
||||
"description_transaction": "شرح تراکنش",
|
||||
"amount": "مبلغ",
|
||||
"date": "تاریخ تراکنش",
|
||||
"order_number": "شماره سفارش"
|
||||
},
|
||||
"announcement": {
|
||||
"announcements": "اطلاعیه ها",
|
||||
@@ -189,5 +224,11 @@
|
||||
"sheba": "شبا",
|
||||
"pay_sheba": "پرداخت شبا",
|
||||
"enter_sheba_deposit": "مبلغ شبا شده شده را وارد کنید"
|
||||
},
|
||||
"notif": {
|
||||
"natification": "اعلان ها"
|
||||
},
|
||||
"profile": {
|
||||
"account_user": "حساب کاربری"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
import { Notification } from 'iconsax-react'
|
||||
import { FC, useState } from 'react'
|
||||
import XIcon from '../../assets/images/close-circle.svg'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { clx } from '../../helpers/utils'
|
||||
import StatusCircle from '../../components/StatusCircle'
|
||||
import { useOutsideClick } from '../../hooks/useOutSideClick'
|
||||
|
||||
const Notifications: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const ref = useOutsideClick(() => setShowModal(false))
|
||||
const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all')
|
||||
const [showModal, setShowModal] = useState<boolean>(false)
|
||||
|
||||
return (
|
||||
<div ref={ref}>
|
||||
<Notification onClick={() => setShowModal(!showModal)} size={18} color='black' />
|
||||
|
||||
{
|
||||
showModal && (
|
||||
<div className='h-[calc(100%-110px)] p-6 z-50 w-[300px] left-7 top-[90px] overflow-y-auto rounded-3xl fixed modalGlass3 '>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('notif.natification')}
|
||||
</div>
|
||||
<div className='size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center'>
|
||||
<img src={XIcon} alt='close' className='w-4 h-4' onClick={() => setShowModal(false)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden'>
|
||||
<div onClick={() => setActiveTab('all')} className={clx(
|
||||
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
|
||||
activeTab === 'all' ? 'bg-white bg-opacity-70 text-black' : ''
|
||||
)}>
|
||||
همه
|
||||
</div>
|
||||
<div onClick={() => setActiveTab('unread')} className={clx(
|
||||
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
|
||||
activeTab === 'unread' ? 'bg-white bg-opacity-70 text-black' : ''
|
||||
)}>
|
||||
خوانده نشده
|
||||
</div>
|
||||
<div onClick={() => setActiveTab('read')} className={clx(
|
||||
'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
|
||||
activeTab === 'read' ? 'bg-white bg-opacity-70 text-black' : ''
|
||||
)}>
|
||||
خوانده شده
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 flex flex-col gap-4 text-xs'>
|
||||
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
|
||||
<div className='mt-1'>
|
||||
<StatusCircle color='#00BA4B' />
|
||||
</div>
|
||||
<div className=''>
|
||||
<div className='truncate'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی
|
||||
</div>
|
||||
<div className='mt-2 flex gap-2 text-[10px] text-description'>
|
||||
<div>۲ ساعت پیش</div>
|
||||
<div className='flex gap-1 items-center'>
|
||||
<StatusCircle color='#8C90A3' />
|
||||
<div>دیزاین</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
|
||||
<div className='mt-1'>
|
||||
<StatusCircle color='#00BA4B' />
|
||||
</div>
|
||||
<div className=''>
|
||||
<div className='truncate'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی
|
||||
</div>
|
||||
<div className='mt-2 flex gap-2 text-[10px] text-description'>
|
||||
<div>۲ ساعت پیش</div>
|
||||
<div className='flex gap-1 items-center'>
|
||||
<StatusCircle color='#8C90A3' />
|
||||
<div>دیزاین</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
|
||||
<div className='mt-1'>
|
||||
<StatusCircle color='#00BA4B' />
|
||||
</div>
|
||||
<div className=''>
|
||||
<div className='truncate'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی
|
||||
</div>
|
||||
<div className='mt-2 flex gap-2 text-[10px] text-description'>
|
||||
<div>۲ ساعت پیش</div>
|
||||
<div className='flex gap-1 items-center'>
|
||||
<StatusCircle color='#8C90A3' />
|
||||
<div>دیزاین</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Notifications
|
||||
@@ -0,0 +1,24 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const Profile: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div>
|
||||
{t('profile.account_user')}
|
||||
</div>
|
||||
|
||||
<div className='bg-white rounded-3xl p-6 mt-8'>
|
||||
<div className='mt-10 flex items-center'>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Profile
|
||||
@@ -1,5 +1,9 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
|
||||
import { Edit } from 'iconsax-react'
|
||||
import StatusCircle from '../../components/StatusCircle'
|
||||
import SamanImage from '../../assets/images/saman.png'
|
||||
|
||||
const ReceiptsDetail: FC = () => {
|
||||
|
||||
@@ -13,7 +17,239 @@ const ReceiptsDetail: FC = () => {
|
||||
</div>
|
||||
|
||||
<div className='flex mt-8 gap-6'>
|
||||
<div className='flex-1'>
|
||||
<div className='w-full bg-white rounded-3xl p-8'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('receip.personal_information')}
|
||||
</div>
|
||||
<div className='flex gap-1 items-center text-xs text-[#0047FF]'>
|
||||
<Edit size={16} color='#0047FF' />
|
||||
<div>
|
||||
{t('edit')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex gap-16 items-center text-xs'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.type_person')}
|
||||
</div>
|
||||
<div>
|
||||
{t('receip.company')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.representativeـname')}
|
||||
</div>
|
||||
<div>
|
||||
مهرداد مظفری
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.company_name')}
|
||||
</div>
|
||||
<div>
|
||||
داناک
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.registration_number')}
|
||||
</div>
|
||||
<div>
|
||||
۱۲۳۴
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 border-t pt-7 flex gap-16 items-center text-xs'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.tel_company')}
|
||||
</div>
|
||||
<div>
|
||||
۰۰۱۲۳۴۵۶۷۸
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.national_code')}
|
||||
</div>
|
||||
<div>
|
||||
۰۰۱۲۳۴۵۶۷۸
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.postal_code')}
|
||||
</div>
|
||||
<div>
|
||||
۳۸۲۱۳۵۸۸۹۲
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='mt-6 flex gap-16 items-center text-xs'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.state')}
|
||||
</div>
|
||||
<div>
|
||||
مرکزی
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.state')}
|
||||
</div>
|
||||
<div>
|
||||
مرکزی
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.city')}
|
||||
</div>
|
||||
<div>
|
||||
اراک
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.address')}
|
||||
</div>
|
||||
<div>
|
||||
اراک -خیابان شریعتی-خیابان جنت
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='w-full bg-white rounded-3xl mt-8 p-8'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('receip.detail_receip')}
|
||||
</div>
|
||||
<div className='flex gap-2 text-xs items-center'>
|
||||
<StatusCircle
|
||||
color='#FF7B00'
|
||||
/>
|
||||
<div>
|
||||
{t('receip.not_paid')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-7 text-sm'>
|
||||
<div className='flex justify-between items-center text-description h-14'>
|
||||
<div>
|
||||
{t('receip.description')}
|
||||
</div>
|
||||
<div>
|
||||
{t('receip.price')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
|
||||
<div>
|
||||
اکانت یکساله با دسترسی
|
||||
</div>
|
||||
<div>
|
||||
۱۰,۰۰۰,۰۰۰ ریال
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
|
||||
<div>
|
||||
۱۰٪ ارزش افزوده
|
||||
</div>
|
||||
<div>
|
||||
۱۰,۰۰۰,۰۰۰ ریال
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
|
||||
<div>
|
||||
جمع کل
|
||||
</div>
|
||||
<div>
|
||||
۱۰,۰۰۰,۰۰۰ ریال
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-sm h-fit rounded-3xl p-8'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('receip.receip_information')}
|
||||
</div>
|
||||
<div className='flex gap-2 text-xs items-center'>
|
||||
<StatusCircle
|
||||
color='#FF7B00'
|
||||
/>
|
||||
<div>پرداخت نشده</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 text-xs font-extralight'>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.date_factor')}
|
||||
</div>
|
||||
<div>
|
||||
۱۴۰۲/۱۰/۰۴
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.due_date')}
|
||||
</div>
|
||||
<div>
|
||||
۱۴۰۲/۱۰/۰۴
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.factor_number')}
|
||||
</div>
|
||||
<div>
|
||||
۱۲۳۱
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.status_factor')}
|
||||
</div>
|
||||
<div>
|
||||
تایید شده
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-5 flex justify-center gap-2'>
|
||||
<div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
|
||||
<img src={SamanImage} alt='saman' className='w-8 h-8' />
|
||||
<div className='mt-2'>
|
||||
بانک سامان
|
||||
</div>
|
||||
</div>
|
||||
<div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
|
||||
<img src={SamanImage} alt='saman' className='w-8 h-8' />
|
||||
<div className='mt-2'>
|
||||
بانک سامان
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { ArrowRight, MoneyRecive, MoneySend } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Td from '../../components/Td'
|
||||
import Detail from './components/Detail'
|
||||
|
||||
const TransactionList: FC = () => {
|
||||
|
||||
@@ -96,7 +97,10 @@ const TransactionList: FC = () => {
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={t('ticket.priority')} />
|
||||
<Td text={t('ticket.detail')} />
|
||||
<Td text={''} />
|
||||
<Td text={''}>
|
||||
<Detail
|
||||
/>
|
||||
</Td>
|
||||
</tr>
|
||||
<tr className='tr'>
|
||||
<Td text={t('ticket.number')} />
|
||||
|
||||
@@ -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
|
||||
@@ -16,6 +16,7 @@ import LearningList from '../pages/learning/List'
|
||||
import Setting from '../pages/setting/Setting'
|
||||
import Wallet from '../pages/wallet/Wallet'
|
||||
import ReceiptsDetail from '../pages/receipts/Detail'
|
||||
import Profile from '../pages/profile/Profile'
|
||||
|
||||
const MainRouter: FC = () => {
|
||||
return (
|
||||
@@ -38,6 +39,7 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.learning} element={<LearningList />} />
|
||||
<Route path={Pages.setting} element={<Setting />} />
|
||||
<Route path={Pages.wallet} element={<Wallet />} />
|
||||
<Route path={Pages.profile} element={<Profile />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { FC } from 'react'
|
||||
import Input from '../components/Input'
|
||||
import { ArrowDown2, Element3, Notification, Wallet } from 'iconsax-react'
|
||||
import { ArrowDown2, Element3, Wallet } from 'iconsax-react'
|
||||
import AvatarImage from '../assets/images/Avatar.png'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../config/Pages'
|
||||
import Notifications from '../pages/notification/Notification'
|
||||
|
||||
const Header: FC = () => {
|
||||
|
||||
@@ -24,7 +25,7 @@ const Header: FC = () => {
|
||||
<Link to={Pages.wallet}>
|
||||
<Wallet size={18} color='black' />
|
||||
</Link>
|
||||
<Notification size={18} color='black' />
|
||||
<Notifications />
|
||||
<div className='flex gap-2 items-center'>
|
||||
<div className='size-7 rounded-full bg-description overflow-hidden'>
|
||||
<img src={AvatarImage} className='size-full object-cover' />
|
||||
|
||||
Reference in New Issue
Block a user