receip

src/config/Pages.ts

@@ -10,7 +10,10 @@ export const Pages = {
     other: "/other-service",
   },
   transactions: "/transactions",
-  receipts: "/receipts",
+  receipts: {
+    index: "/receipts",
+    detail: "/receipts/",
+  },
   ticket: {
     list: "/tickets",
     create: "/tickets/create",

src/langs/fa.json

@@ -124,7 +124,8 @@
     "canceled": "لغو شده",
     "returned": "پس داده شده",
     "its_time": "سررسیده شده",
-    "archive": "بایگانی شده"
+    "archive": "بایگانی شده",
+    "detail_account": "جزییات صورتحساب "
   },
   "transaction": {
     "transaction": "تراکنش ها",

src/pages/receipts/Detail.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const ReceiptsDetail: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-4'>
+            <div>
+                {t('receip.detail_account')}
+                ۱۲۳۱۲
+            </div>
+
+            <div className='flex mt-8 gap-6'>
+
+            </div>
+
+        </div>
+    )
+}
+
+export default ReceiptsDetail

src/pages/receipts/List.tsx

@@ -1,8 +1,10 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tabs from '../../components/Tabs'
-import { Calendar, CloseCircle, FolderOpen, MoneyChange, WalletCheck, WalletRemove, WalletSearch } from 'iconsax-react'
+import { Calendar, CloseCircle, Eye, FolderOpen, MoneyChange, WalletCheck, WalletRemove, WalletSearch } from 'iconsax-react'
 import Td from '../../components/Td'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
 
 const ReceiptsList: FC = () => {
 
@@ -82,7 +84,11 @@ const ReceiptsList: FC = () => {
                             <Td text={t('ticket.status')} />
                             <Td text={t('ticket.priority')} />
                             <Td text={t('ticket.detail')} />
-                            <Td text={''} />
+                            <Td text={''}>
+                                <Link to={Pages.receipts.detail + '1'}>
+                                    <Eye size={20} color='black' />
+                                </Link>
+                            </Td>
                         </tr>
                         <tr className='tr'>
                             <Td text={t('ticket.number')} />

src/router/Main.tsx

@@ -15,6 +15,7 @@ import AddCriticisms from '../pages/criticisms/Add'
 import LearningList from '../pages/learning/List'
 import Setting from '../pages/setting/Setting'
 import Wallet from '../pages/wallet/Wallet'
+import ReceiptsDetail from '../pages/receipts/Detail'
 
 const MainRouter: FC = () => {
     return (
@@ -30,7 +31,8 @@ const MainRouter: FC = () => {
                         <Route path={Pages.ticket.create} element={<CreateTicket />} />
                         <Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
                         <Route path={Pages.transactions} element={<TransactionList />} />
-                        <Route path={Pages.receipts} element={<ReceiptsList />} />
+                        <Route path={Pages.receipts.index} element={<ReceiptsList />} />
+                        <Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
                         <Route path={Pages.announcement} element={<AnnouncementtList />} />
                         <Route path={Pages.criticisms} element={<AddCriticisms />} />
                         <Route path={Pages.learning} element={<LearningList />} />

src/shared/SideBar.tsx

@@ -51,7 +51,7 @@ const SideBar: FC = () => {
                         icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                         title={t('sidebar.receipt_list')}
                         isActive={isActive('receipts')}
-                        link={Pages.receipts}
+                        link={Pages.receipts.index}
                     />
                     <SideBarItem
                         icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}