status

src/pages/order/List.tsx

@@ -1,6 +1,7 @@
 import Filters, { type FilterValues } from '@/components/Filters'
-import { type FC, useEffect, useState } from 'react'
+import { type FC, useEffect, useMemo, useState } from 'react'
 import Table from '@/components/Table'
+import Tabs from '@/components/Tabs'
 import { AddSquare, Edit2, Printer } from 'iconsax-react'
 import { useGetOrders } from './hooks/useOrderData'
 import moment from 'moment-jalaali'
@@ -12,11 +13,15 @@ import RefreshButton from '@/components/RefreshButton'
 import UserSearch from '../user/UserSearch'
 import DesignerSearch from '../designer/DesignerSearch'
 import CategoriesSelect from '../product/components/CategoriesSelect'
-import { getOrderStatusBadgeClass, getOrderStatusLabel } from './constants/orderStatus'
+import { getOrderStatusBadgeClass, getOrderStatusLabel, orderListTabStatuses, orderListTabs } from './constants/orderStatus'
+import { TabOrderListEnum } from './enum/OrderEnum'
 
 const OrdersList: FC = () => {
     const [searchParams, setSearchParams] = useSearchParams()
 
+    const [activeTab, setActiveTab] = useState<TabOrderListEnum>(
+        () => (searchParams.get('tab') as TabOrderListEnum) || TabOrderListEnum.IN_PROGRESS,
+    )
     const [designId, setDesignId] = useState<string | undefined>(
         () => searchParams.get('designerId') ?? searchParams.get('designId') ?? undefined,
     )
@@ -33,10 +38,12 @@ const OrdersList: FC = () => {
         const nextUserId = searchParams.get('userId') ?? undefined
         const nextDesignId =
             searchParams.get('designerId') ?? searchParams.get('designId') ?? undefined
+        const nextTab = (searchParams.get('tab') as TabOrderListEnum) || TabOrderListEnum.IN_PROGRESS
 
         setCategoryId(nextCategoryId)
         setUserId(nextUserId)
         setDesignId(nextDesignId)
+        setActiveTab(nextTab)
     }, [searchParams])
 
     const updateSearchParam = (key: string, value?: string) => {
@@ -51,7 +58,18 @@ const OrdersList: FC = () => {
         }, { replace: true })
     }
 
-    const { data, refetch, isFetching } = useGetOrders({ designId, categoryId, userId, ...filters })
+    const statuses = useMemo(
+        () => orderListTabStatuses[activeTab],
+        [activeTab],
+    )
+
+    const { data, refetch, isFetching } = useGetOrders({ designId, categoryId, userId, statuses, ...filters })
+
+    const handleTabChange = (tab: string) => {
+        const nextTab = tab as TabOrderListEnum
+        setActiveTab(nextTab)
+        updateSearchParam('tab', nextTab)
+    }
 
     return (
         <div className='mt-5'>
@@ -127,6 +145,14 @@ const OrdersList: FC = () => {
                 </div>
             </div>
 
+            <div className='mt-8'>
+                <Tabs
+                    activeTab={activeTab}
+                    items={[...orderListTabs]}
+                    onTabChange={handleTabChange}
+                />
+            </div>
+
             <div className='mt-8'>
                 <Table<OrderListItemType>
                     columns={[

src/pages/order/constants/orderStatus.ts

@@ -1,4 +1,30 @@
-import { OrderStatusEnum } from '../enum/OrderEnum'
+import { OrderStatusEnum, TabOrderListEnum } from '../enum/OrderEnum'
+
+export const orderListTabStatuses: Record<TabOrderListEnum, OrderStatusEnum[]> = {
+  [TabOrderListEnum.IN_PROGRESS]: [
+    OrderStatusEnum.CREATED,
+    OrderStatusEnum.DESIGN_INITIATED,
+    OrderStatusEnum.DESIGN_FINISHED,
+    OrderStatusEnum.DESIGN_REVISION,
+    OrderStatusEnum.READY_TO_PRINTING,
+    OrderStatusEnum.IN_PRINTING,
+    OrderStatusEnum.READY_FOR_DELIVERY,
+    OrderStatusEnum.DELIVERED,
+    OrderStatusEnum.AFTER_PRINT_COVER,
+    OrderStatusEnum.AFTER_PRINT_BOXING,
+    OrderStatusEnum.AFTER_PRINT_CARTONING,
+  ],
+  [TabOrderListEnum.FINISHED]: [OrderStatusEnum.FINISHED],
+  [TabOrderListEnum.CANCELED]: [OrderStatusEnum.CANCELED],
+  [TabOrderListEnum.INVOICED]: [OrderStatusEnum.INVOICED],
+}
+
+export const orderListTabs = [
+  { label: 'جاری', value: TabOrderListEnum.IN_PROGRESS },
+  { label: 'پایان یافته', value: TabOrderListEnum.FINISHED },
+  { label: 'لغو شده', value: TabOrderListEnum.CANCELED },
+  { label: 'فاکتور شده', value: TabOrderListEnum.INVOICED },
+] as const
 
 export const orderStatusLabels: Record<OrderStatusEnum, string> = {
   [OrderStatusEnum.CREATED]: 'ایجاد شده',

src/pages/order/enum/OrderEnum.ts

@@ -1,3 +1,10 @@
+export const enum TabOrderListEnum {
+  IN_PROGRESS = "in_progress",
+  FINISHED = "finished",
+  CANCELED = "canceled",
+  INVOICED = "invoiced",
+}
+
 export enum OrderStatusEnum {
   CREATED = "created",
 

src/pages/order/service/OrderService.ts

@@ -15,6 +15,7 @@ import type {
   FieldResponseType,
   ProductResponeType,
 } from "@/pages/product/types/Types";
+import type { OrderStatusEnum } from "../enum/OrderEnum";
 
 export type GetOrdersParams = {
   designId?: string;
@@ -23,11 +24,12 @@ export type GetOrdersParams = {
   search?: string | null;
   from?: string | null;
   to?: string | null;
+  statuses?: OrderStatusEnum[];
 };
 
 const cleanParams = (params?: GetOrdersParams) => {
   if (!params) return undefined;
-  const { designId, ...rest } = params;
+  const { designId, statuses, ...rest } = params;
   const query: Record<string, string> = {};
 
   for (const [key, value] of Object.entries(rest)) {
@@ -40,6 +42,10 @@ const cleanParams = (params?: GetOrdersParams) => {
     query.designerId = designId;
   }
 
+  if (statuses?.length) {
+    query.statuses = statuses.join(",");
+  }
+
   return Object.keys(query).length > 0 ? query : undefined;
 };