my orders

src/pages/order/MyOrders.tsx

@@ -6,11 +6,12 @@ import Button from '@/components/Button'
 import { AddSquare } from 'iconsax-react'
 import Table from '@/components/Table'
 import { useGetMyOrders } from './hooks/useOrderData'
+import moment from 'moment-jalaali'
 
 const MyOrders: FC = () => {
-
+    const [page, setPage] = useState<number>(1)
     const [activeTab, setActiveTab] = useState<TabMyOrdersEnum>(TabMyOrdersEnum.ALL)
-    const { data } = useGetMyOrders()
+    const { data } = useGetMyOrders(page, activeTab)
 
     return (
         <div className='mt-5'>
@@ -23,8 +24,7 @@ const MyOrders: FC = () => {
                     items={[
                         { label: 'همه', value: TabMyOrdersEnum.ALL },
                         { label: 'در حال انجام', value: TabMyOrdersEnum.IN_PROGRESS },
-                        { label: 'تایید شده', value: TabMyOrdersEnum.CONFIRMED },
+                        { label: 'تکمیل داده شده', value: TabMyOrdersEnum.DELIVERED },
-                        { label: 'تحویل داده شده', value: TabMyOrdersEnum.DELIVERED },
                         { label: 'کنسل شده', value: TabMyOrdersEnum.CANCELLED },
                     ]}
                     activeTab={activeTab}
@@ -69,29 +69,31 @@ const MyOrders: FC = () => {
                 <Table
                     columns={[
                         {
-                            key: 'id',
+                            key: 'orderNumber',
                             title: 'شماره',
                         },
                         {
-                            key: 'title',
+                            key: 'items',
-                            title: 'عنوان',
+                            title: 'تعداد اقلام',
+                            render: (item) => {
+                                return (
+                                    <div>{item.items.length}</div>
+                                )
+                            }
                         },
                         {
                             key: 'createdAt',
                             title: 'زمان ثبت سفارش',
+                            render: (item) => {
+                                return (
+                                    <div>{moment(item.createdAt).format('jYYYY-jMM-jDD')}</div>
+                                )
+                            }
                         },
                         {
                             key: 'designer',
                             title: 'طراح',
                         },
-                        {
-                            key: 'type',
-                            title: 'نوع سفارش',
-                        },
-                        {
-                            key: 'itemsCount',
-                            title: 'تعداد اقلام',
-                        },
                         {
                             key: 'status',
                             title: 'وضعیت سفارش',
@@ -101,17 +103,12 @@ const MyOrders: FC = () => {
                             title: '',
                         }
                     ]}
-                    data={[
+                    data={data?.data}
-                        {
+                    pagination={{
-                            id: 1,
+                        currentPage: page,
-                            title: 'سفارش 1',
+                        onPageChange: setPage,
-                            createdAt: '2021-01-01',
+                        totalPages: data?.meta?.totalPages || 1
-                            designer: 'طراح 1',
+                    }}
-                            type: 'نوع 1',
-                            itemsCount: 10,
-                            status: 'در حال انجام',
-                        },
-                    ]}
                 />
             </div>
         </div>

src/pages/order/enum/OrderEnum.ts

@@ -15,3 +15,28 @@ export const enum FieldTypeEnum {
   checkbox = "checkbox",
   date = "date",
 }
+
+export enum OrderStatusEnum {
+  CREATED = "created",
+
+  INVOICED = "invoiced",
+  WAITING_to_CONFIRM_INVOICE = "waiting_to_confirm_invoice",
+
+  DESIGN_INITIATED = "design_initiated",
+  DESIGN_FINISHED = "design_finished",
+  DESIGN_REVISION = "design_revision",
+
+  READY_TO_PRINTING = "ready_to_printing",
+  IN_PRINTING = "in_printing",
+
+  READY_FOR_DELIVERY = "ready_for_delivery",
+  DELIVERED = "delivered",
+
+  AFTER_PRINT_COVER = "after_print_cover",
+  AFTER_PRINT_BOXING = "after_print_boxing",
+  AFTER_PRINT_CARTONING = "after_print_cartoning",
+
+  FINISHED = "finished",
+
+  CANCELED = "canceled",
+}

src/pages/order/hooks/useOrderData.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/OrderService";
+import type { TabMyOrdersEnum } from "../enum/OrderEnum";
 
 export const useGetProducts = () => {
   return useQuery({
@@ -14,9 +15,9 @@ export const useSubmitOrder = () => {
   });
 };
 
-export const useGetMyOrders = () => {
+export const useGetMyOrders = (page: number = 1, statuses: TabMyOrdersEnum) => {
   return useQuery({
     queryKey: ["products"],
-    queryFn: api.getMyOrders,
+    queryFn: () => api.getMyOrders(page, statuses),
   });
 };

src/pages/order/service/OrderService.ts

@@ -1,5 +1,10 @@
 import axios from "@/config/axios";
-import type { OrderType, ProductsResponseType } from "../type/Types";
+import type {
+  MyOrdersResponseType,
+  OrderType,
+  ProductsResponseType,
+} from "../type/Types";
+import { OrderStatusEnum, TabMyOrdersEnum } from "../enum/OrderEnum";
 
 export const getProducts = async () => {
   const { data } = await axios.get<ProductsResponseType>(`/public/products`);
@@ -11,7 +16,35 @@ export const submitOrder = async (params: OrderType[]) => {
   return data;
 };
 
-export const getMyOrders = async () => {
+export const getMyOrders = async (
-  const { data } = await axios.get(`/public/orders`);
+  page: number = 1,
+  active: TabMyOrdersEnum,
+) => {
+  const statuses =
+    active === TabMyOrdersEnum.IN_PROGRESS
+      ? [
+          OrderStatusEnum.DESIGN_FINISHED,
+          OrderStatusEnum.DESIGN_INITIATED,
+          OrderStatusEnum.DESIGN_REVISION,
+          OrderStatusEnum.IN_PRINTING,
+          OrderStatusEnum.AFTER_PRINT_BOXING,
+          OrderStatusEnum.AFTER_PRINT_CARTONING,
+          OrderStatusEnum.AFTER_PRINT_COVER,
+          OrderStatusEnum.READY_FOR_DELIVERY,
+          OrderStatusEnum.READY_TO_PRINTING,
+        ]
+      : active === TabMyOrdersEnum.CANCELLED
+      ? [OrderStatusEnum.CANCELED]
+      : active === TabMyOrdersEnum.DELIVERED
+      ? [OrderStatusEnum.DELIVERED]
+      : undefined;
+
+  let query = `?page=${page}`;
+  if (statuses) {
+    query += `statuses=${statuses}`;
+  }
+  const { data } = await axios.get<MyOrdersResponseType>(
+    `/public/orders${query}`,
+  );
   return data;
 };

src/pages/order/type/Types.ts

@@ -1,5 +1,6 @@
 import type { BaseResponse } from "@/shared/types/Types";
 import type { FieldTypeEnum } from "../enum/OrderEnum";
+import type { RowDataType } from "@/components/types/TableTypes";
 
 export type CategoryType = {
   avatarUrl?: string;
@@ -66,3 +67,33 @@ export type StoreType = {
   items: OrderType[];
   setItems: (value: OrderType[]) => void;
 };
+
+export interface MyOrderType extends RowDataType {
+  balance: number;
+  createdAt: string;
+  discount: number;
+  enableTax: boolean;
+  estimatedDays?: number;
+  orderNumber: number;
+  paidAmount: number;
+  paymentMethod: string;
+  status: string;
+  subTotal: number;
+  taxAmount: number;
+  total: number;
+  items: {
+    adminDescription?: string;
+    attachments: {
+      type: string;
+      url: string;
+    }[];
+    description: string;
+    product: ProductType;
+    quantity: number;
+    subTotal: number;
+    total: number;
+    unitPrice: number;
+  }[];
+}
+
+export type MyOrdersResponseType = BaseResponse<MyOrderType[]>;