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/config/Pages.ts
+1
View File
@@ -24,4 +24,5 @@ export const Pages = {
learning: "/learning", learning: "/learning",
setting: "/setting", setting: "/setting",
wallet: "/wallet", wallet: "/wallet",
profile: "/profile",
}; };
src/hooks/useOutSideClick.tsx
+24
View File
@@ -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;
};
src/index.css
+7
View File
@@ -103,3 +103,10 @@ tbody tr {
/* backdrop-filter: blur(5px); */ /* backdrop-filter: blur(5px); */
} }
.modalGlass3 {
background: rgba(62, 61, 61, 0.2);
background-blend-mode: multiply;
backdrop-filter: blur(44px);
}
src/langs/fa.json
+43 -2
View File
@@ -125,13 +125,48 @@
"returned": "پس داده شده", "returned": "پس داده شده",
"its_time": "سررسیده شده", "its_time": "سررسیده شده",
"archive": "بایگانی شده", "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": {
"transaction": "تراکنش ها", "transaction": "تراکنش ها",
"totao_deposit": "مجموع واریز ها", "totao_deposit": "مجموع واریز ها",
"total_withdrawal": "مجموع برداشت ها", "total_withdrawal": "مجموع برداشت ها",
"balance": "موجودی کیف پول" "balance": "موجودی کیف پول",
"transaction2": "تراکنش",
"type_deposit": "نوع واریز",
"status": "وضعیت",
"success_paid": "پرداخت موفق",
"print": "پرینت",
"download": "دانلود",
"type_getway": "نوع درگاه",
"doer": "انجام دهنده",
"tracking_number": "شماره پیگیری",
"description_transaction": "شرح تراکنش",
"amount": "مبلغ",
"date": "تاریخ تراکنش",
"order_number": "شماره سفارش"
}, },
"announcement": { "announcement": {
"announcements": "اطلاعیه ها", "announcements": "اطلاعیه ها",
@@ -189,5 +224,11 @@
"sheba": "شبا", "sheba": "شبا",
"pay_sheba": "پرداخت شبا", "pay_sheba": "پرداخت شبا",
"enter_sheba_deposit": "مبلغ شبا شده شده را وارد کنید" "enter_sheba_deposit": "مبلغ شبا شده شده را وارد کنید"
},
"notif": {
"natification": "اعلان ها"
},
"profile": {
"account_user": "حساب کاربری"
} }
} }
src/pages/notification/Notification.tsx
+113
View File
@@ -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
src/pages/profile/Profile.tsx
+24
View File
@@ -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
src/pages/receipts/Detail.tsx
+236
View File
@@ -1,5 +1,9 @@
import { FC } from 'react' import { FC } from 'react'
import { useTranslation } from 'react-i18next' 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 = () => { const ReceiptsDetail: FC = () => {
@@ -13,7 +17,239 @@ const ReceiptsDetail: FC = () => {
</div> </div>
<div className='flex mt-8 gap-6'> <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>
</div> </div>
src/pages/transaction/List.tsx
+5 -1
View File
@@ -2,6 +2,7 @@ import { ArrowRight, MoneyRecive, MoneySend } from 'iconsax-react'
import { FC } from 'react' import { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import Td from '../../components/Td' import Td from '../../components/Td'
import Detail from './components/Detail'
const TransactionList: FC = () => { const TransactionList: FC = () => {
@@ -96,7 +97,10 @@ const TransactionList: FC = () => {
<Td text={t('ticket.status')} /> <Td text={t('ticket.status')} />
<Td text={t('ticket.priority')} /> <Td text={t('ticket.priority')} />
<Td text={t('ticket.detail')} /> <Td text={t('ticket.detail')} />
<Td text={''} /> <Td text={''}>
<Detail
/>
</Td>
</tr> </tr>
<tr className='tr'> <tr className='tr'>
<Td text={t('ticket.number')} /> <Td text={t('ticket.number')} />
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
src/router/Main.tsx
+2
View File
@@ -16,6 +16,7 @@ import LearningList from '../pages/learning/List'
import Setting from '../pages/setting/Setting' import Setting from '../pages/setting/Setting'
import Wallet from '../pages/wallet/Wallet' import Wallet from '../pages/wallet/Wallet'
import ReceiptsDetail from '../pages/receipts/Detail' import ReceiptsDetail from '../pages/receipts/Detail'
import Profile from '../pages/profile/Profile'
const MainRouter: FC = () => { const MainRouter: FC = () => {
return ( return (
@@ -38,6 +39,7 @@ const MainRouter: FC = () => {
<Route path={Pages.learning} element={<LearningList />} /> <Route path={Pages.learning} element={<LearningList />} />
<Route path={Pages.setting} element={<Setting />} /> <Route path={Pages.setting} element={<Setting />} />
<Route path={Pages.wallet} element={<Wallet />} /> <Route path={Pages.wallet} element={<Wallet />} />
<Route path={Pages.profile} element={<Profile />} />
</Routes> </Routes>
</div> </div>
</div> </div>
src/shared/Header.tsx
+3 -2
View File
@@ -1,10 +1,11 @@
import { FC } from 'react' import { FC } from 'react'
import Input from '../components/Input' 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 AvatarImage from '../assets/images/Avatar.png'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { Pages } from '../config/Pages' import { Pages } from '../config/Pages'
import Notifications from '../pages/notification/Notification'
const Header: FC = () => { const Header: FC = () => {
@@ -24,7 +25,7 @@ const Header: FC = () => {
<Link to={Pages.wallet}> <Link to={Pages.wallet}>
<Wallet size={18} color='black' /> <Wallet size={18} color='black' />
</Link> </Link>
<Notification size={18} color='black' /> <Notifications />
<div className='flex gap-2 items-center'> <div className='flex gap-2 items-center'>
<div className='size-7 rounded-full bg-description overflow-hidden'> <div className='size-7 rounded-full bg-description overflow-hidden'>
<img src={AvatarImage} className='size-full object-cover' /> <img src={AvatarImage} className='size-full object-cover' />