invoice

src/pages/receipts/List.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tabs from '../../components/Tabs'
-import { CloseCircle, FolderOpen, WalletCheck, WalletRemove } from 'iconsax-react'
+import { CloseCircle, FolderOpen, WalletCheck, WalletRemove, WalletSearch } from 'iconsax-react'
 import Td from '../../components/Td'
 import { useGetInvoices } from './hooks/useReceiptData'
 import PageLoading from '../../components/PageLoading'
@@ -15,11 +15,13 @@ import DatePickerComponent from '../../components/DatePicker'
 import { useSearchParams } from 'react-router-dom'
 import moment from 'moment-jalaali'
 
+type ActiveTabType = "PENDING" | "WAIT_PAYMENT" | "PAID" | "CANCELLED" | "EXPIRED" | ""
+
 const ReceiptsList: FC = () => {
 
     const { t } = useTranslation('global')
     const [searchParams] = useSearchParams()
-    const [activeTab, setActiveTab] = useState<"PENDING" | "PAID" | "CANCELLED" | "EXPIRED" | ''>('PENDING')
+    const [activeTab, setActiveTab] = useState<ActiveTabType>('PENDING')
     const [customerId, setCustomerId] = useState<string>('')
     const [search, setSearch] = useState<string>('')
     const [date, setDate] = useState<string>('')
@@ -87,10 +89,15 @@ const ReceiptsList: FC = () => {
                     active={activeTab}
                     items={[
                         {
-                            icon: <WalletRemove color={activeTab === 'PENDING' ? 'black' : '#8C90A3'} size={22} />,
+                            icon: <WalletSearch color={activeTab === 'PENDING' ? 'black' : '#8C90A3'} size={22} />,
-                            label: t('receip.dont_pay'),
+                            label: t('receip.pending'),
                             value: 'PENDING'
                         },
+                        {
+                            icon: <WalletRemove color={activeTab === 'WAIT_PAYMENT' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('receip.dont_pay'),
+                            value: 'WAIT_PAYMENT'
+                        },
                         {
                             icon: <WalletCheck color={activeTab === 'PAID' ? 'black' : '#8C90A3'} size={22} />,
                             label: t('receip.paid'),
@@ -107,7 +114,7 @@ const ReceiptsList: FC = () => {
                             value: 'EXPIRED'
                         },
                     ]}
-                    onChange={(value) => setActiveTab(value as "PENDING" | "PAID" | "CANCELLED" | "EXPIRED")}
+                    onChange={(value) => setActiveTab(value as ActiveTabType)}
                 />
             </div>