tabs

src/pages/receipts/List.tsx

@@ -1,11 +1,11 @@
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Tabs from '../../components/Tabs'
-import { CloseCircle, FolderOpen, WalletCheck, WalletRemove, WalletSearch } from 'iconsax-react'
+import { FolderOpen, WalletCheck, WalletMinus, WalletRemove, WalletSearch } from 'iconsax-react'
 import Td from '../../components/Td'
 import { useGetInvoices } from './hooks/useReceiptData'
 import PageLoading from '../../components/PageLoading'
-import { InvoiceUserItemType, ReceiptItemType } from './types/ReceiptTypes'
+import { InvoiceStatus, InvoiceUserItemType, ReceiptItemType } from './types/ReceiptTypes'
 import { NumberFormat } from '../../config/func'
 import Select from '../../components/Select'
 import Input from '../../components/Input'
@@ -13,14 +13,13 @@ import DatePickerComponent from '../../components/DatePicker'
 import { useSearchParams } from 'react-router-dom'
 import moment from 'moment-jalaali'
 import Pagination from '../../components/Pagination'
-type ActiveTabType = "PENDING" | "WAIT_PAYMENT" | "PAID" | "CANCELLED" | "EXPIRED" | "" | "OVERDUE"
 
 const ReceiptsList: FC = () => {
 
     const { t } = useTranslation('global')
     const [page, setPage] = useState<number>(1)
     const [searchParams] = useSearchParams()
-    const [activeTab, setActiveTab] = useState<ActiveTabType>('PENDING')
+    const [activeTab, setActiveTab] = useState<InvoiceStatus>('PENDING')
     const [customerId, setCustomerId] = useState<string>('')
     const [search, setSearch] = useState<string>('')
     const [date, setDate] = useState<string>('')
@@ -31,7 +30,7 @@ const ReceiptsList: FC = () => {
         const urlCustomerId = searchParams.get('user')
         if (urlCustomerId) {
             setCustomerId(urlCustomerId)
-            setActiveTab('')
+            setActiveTab('PENDING')
         }
     }, [searchParams])
 
@@ -102,22 +101,17 @@ const ReceiptsList: FC = () => {
                             value: 'PAID'
                         },
                         {
-                            icon: <CloseCircle color={activeTab === 'CANCELLED' ? 'black' : '#8C90A3'} size={22} />,
-                            label: t('receip.canceled'),
-                            value: 'CANCELLED'
-                        },
-                        {
-                            icon: <FolderOpen color={activeTab === 'EXPIRED' ? 'black' : '#8C90A3'} size={22} />,
+                            icon: <FolderOpen color={activeTab === 'ARCHIVED' ? 'black' : '#8C90A3'} size={22} />,
                             label: t('receip.archive'),
-                            value: 'EXPIRED'
+                            value: 'ARCHIVED'
                         },
                         {
-                            icon: <CloseCircle color={activeTab === 'OVERDUE' ? 'black' : '#8C90A3'} size={22} />,
+                            icon: <WalletMinus color={activeTab === 'OVERDUE' ? 'black' : '#8C90A3'} size={22} />,
                             label: t('receip.overdue'),
                             value: 'OVERDUE'
-                        }
+                        },
                     ]}
-                    onChange={(value) => setActiveTab(value as ActiveTabType)}
+                    onChange={(value) => setActiveTab(value as InvoiceStatus)}
                 />
             </div>
 

src/pages/receipts/types/ReceiptTypes.ts

@@ -44,3 +44,10 @@ export type InvoiceUserItemType = {
   email: string;
   phone: string;
 };
+
+export type InvoiceStatus =
+  | "PENDING"
+  | "WAIT_PAYMENT"
+  | "PAID"
+  | "ARCHIVED"
+  | "OVERDUE";