count

src/pages/invoice/ProformaInvoice.tsx

@@ -8,7 +8,7 @@ import {
 } from './enum/InvoiceEnum'
 import Filters from '@/components/Filters'
 import Table from '@/components/Table'
-import { useGetInvoices } from './hooks/useInvoiceData'
+import { useGetInvoices, useGetInvoiceTabCounts } from './hooks/useInvoiceData'
 import type { Invoice } from './types/InvoiceTypes'
 import type { ColumnType } from '@/components/types/TableTypes'
 import type { FilterValues } from '@/components/Filters'
@@ -51,8 +51,29 @@ const ProformaInvoice: FC = () => {
     }
 
     const { data, isPending } = useGetInvoices({ statuses })
+    const { data: tabCounts } = useGetInvoiceTabCounts()
     const invoices = useMemo(() => data?.data ?? [], [data?.data])
 
+    const tabsWithCount = useMemo(
+        () =>
+            invoiceListTabs.map((tab) => {
+                const total =
+                    tab.value === ProformaInvoiceStatusEnum.PENDING
+                        ? (tabCounts?.pending ?? 0)
+                        : tab.value === ProformaInvoiceStatusEnum.CONFIRMED
+                          ? (tabCounts?.confirmed ?? 0)
+                          : (tabCounts?.archived ?? 0)
+                return {
+                    ...tab,
+                    label:
+                        total > 0
+                            ? `${tab.label} (${total.toLocaleString('fa-IR')})`
+                            : tab.label,
+                }
+            }),
+        [tabCounts],
+    )
+
     const filteredInvoices = useMemo(() => {
         let result = invoices
 
@@ -150,7 +171,7 @@ const ProformaInvoice: FC = () => {
 
             <div className="mt-8">
                 <Tabs
-                    items={[...invoiceListTabs]}
+                    items={tabsWithCount}
                     activeTab={activeTab}
                     onTabChange={(tab) => setActiveTab(tab as ProformaInvoiceStatusEnum)}
                 />