tab count

src/pages/order/List.tsx

@@ -18,6 +18,7 @@ import { getOrderListColumns } from "./components/OrderListColumns";
 import {
   useDeleteOrder,
   useGetOrders,
+  useGetOrderTabCounts,
   useUpdateOrderStatus,
 } from "./hooks/useOrderData";
 import {
@@ -51,11 +52,39 @@ const OrdersList: FC = () => {
   } = useOrderListParams();
 
   const { data, refetch, isFetching } = useGetOrders(queryParams);
+  const { data: tabCounts } = useGetOrderTabCounts({
+    designId: params.designerId,
+    categoryId: params.categoryId,
+    userId: params.userId,
+    search: params.search ?? null,
+    from: params.from ?? null,
+    to: params.to ?? null,
+  });
   const { mutate: deleteOrder, isPending: isDeleting } = useDeleteOrder();
   const { mutate: updateOrderStatus, isPending: isUpdatingStatus } =
     useUpdateOrderStatus();
   const activeFilterCount = useMemo(() => countActiveFilters(params), [params]);
   const hasActiveFilters = activeFilterCount > 0;
+  const tabCountByTab: Record<TabOrderListEnum, number> = useMemo(
+    () => ({
+      [TabOrderListEnum.IN_PROGRESS]: tabCounts?.inProgress ?? 0,
+      [TabOrderListEnum.FINISHED]: tabCounts?.finished ?? 0,
+      [TabOrderListEnum.CANCELED]: tabCounts?.canceled ?? 0,
+      [TabOrderListEnum.INVOICED]: tabCounts?.invoiced ?? 0,
+    }),
+    [tabCounts],
+  );
+  const tabsWithCount = useMemo(
+    () =>
+      orderListTabs.map((tab) => {
+        const total = tabCountByTab[tab.value as TabOrderListEnum] ?? 0;
+        return {
+          ...tab,
+          label: total > 0 ? `${tab.label} (${total.toLocaleString("fa-IR")})` : tab.label,
+        };
+      }),
+    [tabCountByTab],
+  );
 
   const handleDelete = useCallback(
     (id: string) => {
@@ -126,7 +155,7 @@ const OrdersList: FC = () => {
 
       <Tabs
         activeTab={params.tab}
-        items={[...orderListTabs]}
+        items={tabsWithCount}
         onTabChange={(tab) => setTab(tab as TabOrderListEnum)}
       />
 

src/pages/order/hooks/useOrderData.ts

@@ -14,6 +14,14 @@ export const useGetOrders = (params?: api.GetOrdersParams) => {
   });
 };
 
+export const useGetOrderTabCounts = (params?: api.GetOrderTabCountsParams) => {
+  return useQuery({
+    queryKey: ["orders-tab-counts", params],
+    queryFn: () => api.getOrderTabCounts(params),
+    refetchInterval: 60_000,
+  });
+};
+
 export const useGetOrdersInvoiced = (page: number = 1) => {
   return useQuery({
     queryKey: ["orders-invoiced", page],

src/pages/order/service/OrderService.ts

@@ -11,6 +11,7 @@ import type {
   TicketsResponseType,
   UpdateOrderType,
 } from "../types/Types";
+import type { BaseResponse } from "@/shared/types/Types";
 import type {
   FieldResponseType,
   ProductResponeType,
@@ -27,6 +28,15 @@ export type GetOrdersParams = {
   statuses?: OrderStatusEnum[];
 };
 
+export type GetOrderTabCountsParams = Omit<GetOrdersParams, "statuses">;
+
+export type OrderTabCountsResponseType = {
+  inProgress: number;
+  finished: number;
+  canceled: number;
+  invoiced: number;
+};
+
 const cleanParams = (params?: GetOrdersParams) => {
   if (!params) return undefined;
   const { designId, statuses, ...rest } = params;
@@ -57,6 +67,17 @@ export const getOrders = async (params?: GetOrdersParams) => {
   return data;
 };
 
+export const getOrderTabCounts = async (params?: GetOrderTabCountsParams) => {
+  const query = cleanParams(params);
+  const { data } = await axios.get<BaseResponse<OrderTabCountsResponseType>>(
+    `/admin/orders/tab-counts`,
+    {
+      params: query,
+    },
+  );
+  return data.data;
+};
+
 export const getOrdersInvoiced = async (page: number = 1) => {
   const { data } = await axios.get<OrderListResponseType>(
     `/admin/orders/invoiced?page=${page}`,