notification
This commit is contained in:
hamid zarghami
@@ -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
|
||||
Reference in New Issue
Block a user