From 7a50f2d6cf5d3298b41e8847aa203ce374415fd6 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Wed, 1 Jan 2025 15:39:54 +0330 Subject: [PATCH] notification --- src/config/Pages.ts | 1 + src/hooks/useOutSideClick.tsx | 24 ++ src/index.css | 7 + src/langs/fa.json | 45 +++- src/pages/notification/Notification.tsx | 113 ++++++++++ src/pages/profile/Profile.tsx | 24 ++ src/pages/receipts/Detail.tsx | 236 ++++++++++++++++++++ src/pages/transaction/List.tsx | 6 +- src/pages/transaction/components/Detail.tsx | 177 +++++++++++++++ src/router/Main.tsx | 2 + src/shared/Header.tsx | 5 +- 11 files changed, 635 insertions(+), 5 deletions(-) create mode 100644 src/hooks/useOutSideClick.tsx create mode 100644 src/pages/notification/Notification.tsx create mode 100644 src/pages/profile/Profile.tsx create mode 100644 src/pages/transaction/components/Detail.tsx diff --git a/src/config/Pages.ts b/src/config/Pages.ts index 3789154..2a7cc2d 100644 --- a/src/config/Pages.ts +++ b/src/config/Pages.ts @@ -24,4 +24,5 @@ export const Pages = { learning: "/learning", setting: "/setting", wallet: "/wallet", + profile: "/profile", }; diff --git a/src/hooks/useOutSideClick.tsx b/src/hooks/useOutSideClick.tsx new file mode 100644 index 0000000..0ef2f1b --- /dev/null +++ b/src/hooks/useOutSideClick.tsx @@ -0,0 +1,24 @@ +import { useEffect, useRef } from 'react'; + +export const useOutsideClick = (callback: () => void) => { + const ref = useRef(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; +}; \ No newline at end of file diff --git a/src/index.css b/src/index.css index bc72ff0..9a83d1b 100644 --- a/src/index.css +++ b/src/index.css @@ -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); +} diff --git a/src/langs/fa.json b/src/langs/fa.json index 9da2b29..21601a0 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -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": "حساب کاربری" } } diff --git a/src/pages/notification/Notification.tsx b/src/pages/notification/Notification.tsx new file mode 100644 index 0000000..f1c6f60 --- /dev/null +++ b/src/pages/notification/Notification.tsx @@ -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(false) + + return ( +
+ setShowModal(!showModal)} size={18} color='black' /> + + { + showModal && ( +
+
+
+ {t('notif.natification')} +
+
+ close setShowModal(false)} /> +
+
+ +
+
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' : '' + )}> + همه +
+
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' : '' + )}> + خوانده نشده +
+
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' : '' + )}> + خوانده شده +
+
+ +
+
+
+ +
+
+
+ لورم ایپسوم متن ساختگی با تولید سادگی +
+
+
۲ ساعت پیش
+
+ +
دیزاین
+
+
+
+
+
+
+ +
+
+
+ لورم ایپسوم متن ساختگی با تولید سادگی +
+
+
۲ ساعت پیش
+
+ +
دیزاین
+
+
+
+
+
+
+ +
+
+
+ لورم ایپسوم متن ساختگی با تولید سادگی +
+
+
۲ ساعت پیش
+
+ +
دیزاین
+
+
+
+
+
+
+ ) + } +
+ ) +} + +export default Notifications \ No newline at end of file diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx new file mode 100644 index 0000000..77621d5 --- /dev/null +++ b/src/pages/profile/Profile.tsx @@ -0,0 +1,24 @@ +import { FC } from 'react' +import { useTranslation } from 'react-i18next' + +const Profile: FC = () => { + + const { t } = useTranslation('global') + + return ( +
+
+ {t('profile.account_user')} +
+ +
+
+ +
+
+ +
+ ) +} + +export default Profile \ No newline at end of file diff --git a/src/pages/receipts/Detail.tsx b/src/pages/receipts/Detail.tsx index f6cec8b..5d8ebca 100644 --- a/src/pages/receipts/Detail.tsx +++ b/src/pages/receipts/Detail.tsx @@ -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 = () => {
+
+
+
+
+ {t('receip.personal_information')} +
+
+ +
+ {t('edit')} +
+
+
+
+
+
+ {t('receip.type_person')} +
+
+ {t('receip.company')} +
+
+ +
+
+ {t('receip.representativeـname')} +
+
+ مهرداد مظفری +
+
+ +
+
+ {t('receip.company_name')} +
+
+ داناک +
+
+
+
+ {t('receip.registration_number')} +
+
+ ۱۲۳۴ +
+
+
+ +
+
+
+ {t('receip.tel_company')} +
+
+ ۰۰۱۲۳۴۵۶۷۸ +
+
+ +
+
+ {t('receip.national_code')} +
+
+ ۰۰۱۲۳۴۵۶۷۸ +
+
+ +
+
+ {t('receip.postal_code')} +
+
+ ۳۸۲۱۳۵۸۸۹۲ +
+
+ +
+ +
+
+
+ {t('receip.state')} +
+
+ مرکزی +
+
+
+
+ {t('receip.state')} +
+
+ مرکزی +
+
+
+
+ {t('receip.city')} +
+
+ اراک +
+
+
+
+ {t('receip.address')} +
+
+ اراک -خیابان شریعتی-خیابان جنت +
+
+
+ +
+ +
+
+
+ {t('receip.detail_receip')} +
+
+ +
+ {t('receip.not_paid')} +
+
+
+ +
+
+
+ {t('receip.description')} +
+
+ {t('receip.price')} +
+
+
+
+ اکانت یکساله با دسترسی +
+
+ ۱۰,۰۰۰,۰۰۰ ریال +
+
+
+
+ ۱۰٪ ارزش افزوده +
+
+ ۱۰,۰۰۰,۰۰۰ ریال +
+
+
+
+ جمع کل +
+
+ ۱۰,۰۰۰,۰۰۰ ریال +
+
+
+
+
+ +
+
+
+ {t('receip.receip_information')} +
+
+ +
پرداخت نشده
+
+
+ +
+
+
+ {t('receip.date_factor')} +
+
+ ۱۴۰۲/۱۰/۰۴ +
+
+
+
+ {t('receip.due_date')} +
+
+ ۱۴۰۲/۱۰/۰۴ +
+
+
+
+ {t('receip.factor_number')} +
+
+ ۱۲۳۱ +
+
+
+
+ {t('receip.status_factor')} +
+
+ تایید شده +
+
+
+ +
+
+ saman +
+ بانک سامان +
+
+
+ saman +
+ بانک سامان +
+
+
+
diff --git a/src/pages/transaction/List.tsx b/src/pages/transaction/List.tsx index f44f435..bae2f92 100644 --- a/src/pages/transaction/List.tsx +++ b/src/pages/transaction/List.tsx @@ -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 = () => { - + + + diff --git a/src/pages/transaction/components/Detail.tsx b/src/pages/transaction/components/Detail.tsx new file mode 100644 index 0000000..dcab7ae --- /dev/null +++ b/src/pages/transaction/components/Detail.tsx @@ -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(false) + + return ( +
+ setShowModal(true)} className='cursor-pointer' size={20} color='black' /> + + setShowModal(false)} + isHeader + title_header={`${t('transaction.transaction2')} ۱۲۳۴۵۵`} + > +
+
+
+
+ +
+ {t('transaction.type_deposit')} +
+
+
+ واریز شتابی +
+
+
+
+ +
+ {t('transaction.status')} +
+
+
+ +
{t('transaction.success_paid')}
+
+
+
+
+
+
+ +
+ {t('transaction.type_getway')} +
+
+
+ آنلاین بانک سامان +
+
+
+
+ +
+ {t('transaction.amount')} +
+
+
+ ۱۰,۰۰۰,۰۰۰ ریال +
+
+
+ +
+
+
+ +
+ {t('transaction.doer')} +
+
+
+ مهرداد مظفری +
+
+
+
+ +
+ {t('transaction.date')} +
+
+
+ ۱۴۰۳/۰۹/۳۰ +
+
+
+
+
+
+ +
+ {t('transaction.tracking_number')} +
+
+
+ bbd704c-۱۲۳۴۵۶ +
+
+
+
+ +
+ {t('transaction.order_number')} +
+
+
+ bbd704c-۱۲۳۴۵۶ +
+
+
+ +
+
+
+ +
+ {t('transaction.description_transaction')} +
+
+
+ - +
+
+
+
+ +
+
+ + +
+
+ +
+ ) +} + +export default Detail \ No newline at end of file diff --git a/src/router/Main.tsx b/src/router/Main.tsx index 51939bf..6203db7 100644 --- a/src/router/Main.tsx +++ b/src/router/Main.tsx @@ -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 = () => { } /> } /> } /> + } /> diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx index 40a3a5f..a294377 100644 --- a/src/shared/Header.tsx +++ b/src/shared/Header.tsx @@ -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 = () => { - +