my orders

This commit is contained in:
hamid zarghami
2026-01-27 15:25:27 +03:30
parent a58f1da31c
commit 4244a06633
5 changed files with 118 additions and 31 deletions
+23 -26
View File
@@ -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',
title: 'عنوان',
key: 'items',
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={[
{
id: 1,
title: 'سفارش 1',
createdAt: '2021-01-01',
designer: 'طراح 1',
type: 'نوع 1',
itemsCount: 10,
status: 'در حال انجام',
},
]}
data={data?.data}
pagination={{
currentPage: page,
onPageChange: setPage,
totalPages: data?.meta?.totalPages || 1
}}
/>
</div>
</div>
+25
View File
@@ -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",
}
+3 -2
View File
@@ -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),
});
};
+36 -3
View File
@@ -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 () => {
const { data } = await axios.get(`/public/orders`);
export const getMyOrders = async (
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;
};
+31
View File
@@ -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[]>;