base detail order

.env

@@ -1,3 +1,3 @@
 VITE_TOKEN_NAME = 'negareh_t'
 VITE_REFRESH_TOKEN_NAME = 'negareh_rt'
-VITE_API_BASE_URL = 'http://10.24.161.1:4000'
+VITE_API_BASE_URL = 'http://192.168.99.225:4000'

src/pages/order/MyOrders.tsx

@@ -3,10 +3,12 @@ import { useState, type FC } from 'react'
 import { TabMyOrdersEnum } from './enum/OrderEnum'
 import Filters from '@/components/Filters'
 import Button from '@/components/Button'
-import { AddSquare } from 'iconsax-react'
+import { AddSquare, Eye } from 'iconsax-react'
 import Table from '@/components/Table'
 import { useGetMyOrders } from './hooks/useOrderData'
 import moment from 'moment-jalaali'
+import { Link } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
 
 const MyOrders: FC = () => {
     const [page, setPage] = useState<number>(1)
@@ -101,6 +103,16 @@ const MyOrders: FC = () => {
                         {
                             key: 'actions',
                             title: '',
+                            render: (item) => {
+                                return (
+                                    <Link to={Paths.orderDetails + item.id}>
+                                        <Eye
+                                            size={20}
+                                            color='#000000'
+                                        />
+                                    </Link>
+                                )
+                            }
                         }
                     ]}
                     data={data?.data}

src/pages/order/OrderDetail.tsx

@@ -3,8 +3,13 @@ import { Microphone, Paperclip2, Receipt1 } from 'iconsax-react'
 import Button from '@/components/Button'
 import UploadBox from '@/components/UploadBox'
 import Input from '@/components/Input'
+import { useParams } from 'react-router-dom'
+import { useGetOrderDetails } from './hooks/useOrderData'
 
 const OrderDetail: FC = () => {
+
+    const { id } = useParams()
+    const { data } = useGetOrderDetails(id!)
     const [message, setMessage] = useState('')
     const [files, setFiles] = useState<File[]>([])
 
@@ -28,7 +33,7 @@ const OrderDetail: FC = () => {
 
 
                 <div className="text-sm text-[#8C90A3]">
-                    سفارش #{orderData.orderId}
+                    سفارش #{data?.data?.orderNumber}
                 </div>
             </div>
 
@@ -42,16 +47,22 @@ const OrderDetail: FC = () => {
                         <span>پیش فاکتور</span>
                     </a>
                 </div>
+                <div className='flex flex-col gap-10'>
+                    {
+                        data?.data?.items?.map((item) => {
+                            return (
+                                <div key={item.product.id}>
                                     <div className="flex items-center gap-6">
                                         {/* Product Image */}
-                    <div className='size-[86px] rounded-lg bg-gray-200'>
+                                        <div className='size-[86px] rounded-lg overflow-hidden'>
+                                            <img src={item.product?.images?.[0]} className='size-full' />
                                         </div>
 
                                         {/* Order Details */}
                                         <div className="flex-1 flex gap-20 pr-10">
                                             <div className='flex items-center gap-2'>
                                                 <div className="text-xs text-desc">عنوان:</div>
-                            <div className="text-sm font-medium text-black">{orderData.title}</div>
+                                                <div className="text-sm font-medium text-black">{item.product.title}</div>
                                             </div>
                                             <div className='flex items-center gap-2'>
                                                 <div className="text-xs text-desc">نام طرح:</div>
@@ -59,11 +70,11 @@ const OrderDetail: FC = () => {
                                             </div>
                                             <div className='flex items-center gap-2'>
                                                 <div className="text-xs text-desc">تعداد:</div>
-                            <div className="text-sm font-medium text-black">{orderData.quantity}</div>
+                                                <div className="text-sm font-medium text-black">{item.quantity}</div>
                                             </div>
                                             <div className='flex items-center gap-2'>
                                                 <div className="text-xs text-desc">تخمین زمان:</div>
-                            <div className="text-sm font-medium text-black">{orderData.estimatedDate}</div>
+                                                <div className="text-sm font-medium text-black">{data?.data?.estimatedDays}</div>
                                             </div>
                                         </div>
                                     </div>
@@ -72,10 +83,15 @@ const OrderDetail: FC = () => {
                                     <div className="mt-6 pt-6 border-t border-dashed border-desc">
                                         <div className="text-sm font-medium mb-2 text-desc">شرح سفارش:</div>
                                         <p className="text-sm font-light text-black leading-6">
-                        {orderData.description}
+                                            {item.description}
                                         </p>
                                     </div>
                                 </div>
+                            )
+                        })
+                    }
+                </div>
+            </div>
 
             {/* Bottom Section - White Card */}
             <div className="bg-white rounded-2xl p-6">

src/pages/order/hooks/useOrderData.ts

@@ -17,7 +17,15 @@ export const useSubmitOrder = () => {
 
 export const useGetMyOrders = (page: number = 1, statuses: TabMyOrdersEnum) => {
   return useQuery({
-    queryKey: ["products", page, statuses],
+    queryKey: ["my-orders", page, statuses],
     queryFn: () => api.getMyOrders(page, statuses),
   });
 };
+
+export const useGetOrderDetails = (id: string) => {
+  return useQuery({
+    queryKey: ["order", id],
+    queryFn: () => api.getOrderDetails(id),
+    enabled: !!id,
+  });
+};

src/pages/order/service/OrderService.ts

@@ -1,6 +1,7 @@
 import axios from "@/config/axios";
 import type {
   MyOrdersResponseType,
+  OrderDetailResponseType,
   OrderType,
   ProductsResponseType,
 } from "../type/Types";
@@ -12,7 +13,7 @@ export const getProducts = async () => {
 };
 
 export const submitOrder = async (params: OrderType[]) => {
-  const { data } = await axios.post(`/public/order`, { items: params });
+  const { data } = await axios.post(`/public/orders`, { items: params });
   return data;
 };
 
@@ -48,3 +49,10 @@ export const getMyOrders = async (
   );
   return data;
 };
+
+export const getOrderDetails = async (id: string) => {
+  const { data } = await axios.get<OrderDetailResponseType>(
+    `/public/orders/${id}`,
+  );
+  return data;
+};

src/pages/order/type/Types.ts

@@ -97,3 +97,5 @@ export interface MyOrderType extends RowDataType {
 }
 
 export type MyOrdersResponseType = BaseResponse<MyOrderType[]>;
+
+export type OrderDetailResponseType = BaseResponse<MyOrderType>;