invoice status

src/langs/fa.json

@@ -201,6 +201,8 @@
     "returned": "پس داده شده",
     "its_time": "سررسیده شده",
     "archive": "بایگانی شده",
+    "overdue": "سررسید شده",
+    "late_fee": "جریمه دیرکرد",
     "detail_account": "جزییات صورتحساب ",
     "personal_information": "اطلاعات شخصی",
     "type_person": "نوع شخص : ",

src/pages/receipts/List.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tabs from '../../components/Tabs'
-import { CloseCircle, Eye, FolderOpen, WalletCheck, WalletRemove, WalletSearch } from 'iconsax-react'
+import { Eye, FolderOpen, WalletCheck, WalletMinus, WalletRemove, WalletSearch } from 'iconsax-react'
 import Td from '../../components/Td'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
@@ -11,11 +11,14 @@ import { ReceiptItemType } from './types/ReceiptTypes'
 import moment from 'moment-jalaali'
 import { Helmet } from 'react-helmet-async'
 import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
+import { InvoiceStatus } from './types/ReceiptTypes'
+
+
 
 const ReceiptsList: FC = () => {
 
     const { t } = useTranslation('global')
-    const [activeTab, setActiveTab] = useState<"PENDING" | "WAIT_PAYMENT" | "PAID" | "CANCELLED" | "EXPIRED">('PENDING')
+    const [activeTab, setActiveTab] = useState<InvoiceStatus>('PENDING')
     const getInvoices = useGetInvoices(activeTab)
 
     return (
@@ -49,17 +52,17 @@ const ReceiptsList: FC = () => {
                             value: 'PAID'
                         },
                         {
-                            icon: <CloseCircle color={activeTab === 'CANCELLED' ? 'black' : '#8C90A3'} size={22} />,
+                            icon: <FolderOpen color={activeTab === 'ARCHIVED' ? 'black' : '#8C90A3'} size={22} />,
-                            label: t('receip.canceled'),
+                            label: t('receip.archive'),
-                            value: 'CANCELLED'
+                            value: 'ARCHIVED'
                         },
                         {
-                            icon: <FolderOpen color={activeTab === 'EXPIRED' ? 'black' : '#8C90A3'} size={22} />,
+                            icon: <WalletMinus color={activeTab === 'OVERDUE' ? 'black' : '#8C90A3'} size={22} />,
-                            label: t('receip.archive'),
+                            label: t('receip.overdue'),
-                            value: 'EXPIRED'
+                            value: 'OVERDUE'
                         },
                     ]}
-                    onChange={(value) => setActiveTab(value as "PENDING" | "PAID" | "CANCELLED" | "EXPIRED")}
+                    onChange={(value) => setActiveTab(value as InvoiceStatus)}
                 />
             </div>
 
@@ -74,6 +77,7 @@ const ReceiptsList: FC = () => {
                             <Td text={t('receip.last_date_receipt')} />
                             <Td text={t('receip.total')} />
                             <Td text={t('receip.service')} />
+                            <Td text={t('receip.late_fee')} />
                             <Td text={t('receip.status')} />
                             <Td text={t('receip.status_paid')} />
                             <Td text={''} />
@@ -113,6 +117,7 @@ const ReceiptsList: FC = () => {
                                                     }
                                                 </div>
                                             </Td>
+                                            <Td text={NumberFormat(item.lateFee)} />
                                             <Td text={t(`receip.${item.status}`)} />
                                             <Td text={item.status === 'PAID' ? moment(item.paidAt).format('jYYYY-jMM-jDD') : t('receip.not_paid')} />
                                             <Td text={''}>

src/pages/receipts/types/ReceiptTypes.ts

@@ -1,3 +1,10 @@
+export type InvoiceStatus =
+  | "PENDING"
+  | "WAIT_PAYMENT"
+  | "PAID"
+  | "ARCHIVED"
+  | "OVERDUE";
+
 export type ReceiptItemType = {
   id: string;
   createdAt: string;
@@ -14,9 +21,10 @@ export type ReceiptItemType = {
     lastName: string;
   };
   dueDate: string;
-  status: "PENDING" | "PAID" | "CANCELED" | "EXPIRED";
+  status: InvoiceStatus;
   paidAt: string;
   numericId: string;
+  lateFee: number;
 };
 
 export type ReceiptDetailItemType = {