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)}
                 />

src/pages/invoice/hooks/useInvoiceData.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/InvoiceService";
 
 export const useGetInvoices = (params: api.GetInvoicesParams) => {
@@ -8,6 +8,14 @@ export const useGetInvoices = (params: api.GetInvoicesParams) => {
   });
 };
 
+export const useGetInvoiceTabCounts = () => {
+  return useQuery({
+    queryKey: ["invoice-tab-counts"],
+    queryFn: () => api.getInvoiceTabCounts(),
+    refetchInterval: 20_000,
+  });
+};
+
 export const useGetInvoiceDetail = (id: string) => {
   return useQuery({
     queryKey: ["invoice", id],
@@ -17,7 +25,14 @@ export const useGetInvoiceDetail = (id: string) => {
 };
 
 export const useConfirmInvoiceItem = () => {
+  const queryClient = useQueryClient();
+
   return useMutation({
     mutationFn: api.confrimInvoiceItem,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invoices"] });
+      queryClient.invalidateQueries({ queryKey: ["invoice"] });
+      queryClient.invalidateQueries({ queryKey: ["invoice-tab-counts"] });
+    },
   });
 };

src/pages/invoice/service/InvoiceService.ts

@@ -4,11 +4,18 @@ import type {
   InvoiceDetailResponseType,
 } from "../types/InvoiceTypes";
 import type { InvoiceConfirmStatus } from "../enum/InvoiceEnum";
+import type { BaseResponse } from "@/shared/types/Types";
 
 export type GetInvoicesParams = {
   statuses?: InvoiceConfirmStatus[];
 };
 
+export type InvoiceTabCountsResponseType = {
+  pending: number;
+  confirmed: number;
+  archived: number;
+};
+
 export const getInvoices = async (
   params: GetInvoicesParams = {},
 ): Promise<InvoicesResponseType> => {
@@ -21,6 +28,13 @@ export const getInvoices = async (
   return data;
 };
 
+export const getInvoiceTabCounts = async (): Promise<InvoiceTabCountsResponseType> => {
+  const { data } = await axios.get<BaseResponse<InvoiceTabCountsResponseType>>(
+    "/public/invoice/tab-counts",
+  );
+  return data.data;
+};
+
 export const getInvoiceDetail = async (
   id: string,
 ): Promise<InvoiceDetailResponseType> => {