order progressing

src/pages/home/components/OrderTableComponents.tsx

@@ -1,6 +1,8 @@
 import { type FC } from 'react';
 import { Eye } from 'iconsax-react';
+import { Link } from 'react-router-dom';
 import StatusCircle from '@/components/StatusCircle';
+import { Paths } from '@/config/Paths';
 import { type Order, type OrderStatus } from './types/OrderTypes';
 
 // کامپوننت رندر شماره سفارش
@@ -37,7 +39,7 @@ export const OrderDateRenderer: FC<{ order: Order }> = ({ order }) => {
 
 // کامپوننت رندر وضعیت سفارش
 export const OrderStatusRenderer: FC<{ order: Order }> = ({ order }) => {
-    const getStatusConfig = (status: OrderStatus) => {
+    const getStatusConfig = (status: OrderStatus | string) => {
         switch (status) {
             case 'در حال طراحی':
                 return {
@@ -93,14 +95,11 @@ export const OrderMessagesRenderer: FC<{ order: Order }> = ({ order }) => {
 // کامپوننت رندر آیکون مشاهده
 export const OrderViewRenderer: FC<{ order: Order }> = ({ order }) => {
     return (
-        <button
-            className="p-1 hover:bg-gray-100 rounded-full transition-colors"
-            onClick={() => {
-                // اینجا می‌توانید منطق مشاهده جزئیات را اضافه کنید
-                console.log('View order:', order.id);
-            }}
+        <Link
+            to={Paths.orderDetails + order.id}
+            className="p-1 hover:bg-gray-100 rounded-full transition-colors inline-block"
         >
-            <Eye color='black' size={16} />
-        </button>
+            <Eye color="black" size={16} />
+        </Link>
     );
 };

src/pages/home/components/Orders.tsx

@@ -2,7 +2,10 @@ import Table from '@/components/Table'
 import { type FC } from 'react'
 import { type ColumnType } from '@/components/types/TableTypes'
 import { type Order } from './types/OrderTypes'
-import { ordersData } from './data/ordersData'
+import { useGetMyOrders } from '@/pages/order/hooks/useOrderData'
+import { TabMyRequestsEnum } from '@/pages/order/enum/OrderEnum'
+import { orderStatusLabels } from '@/pages/order/constants/statusLabels'
+import moment from 'moment-jalaali'
 import {
     OrderNumberRenderer,
     OrderTitleRenderer,
@@ -11,8 +14,24 @@ import {
     OrderMessagesRenderer,
     OrderViewRenderer
 } from './OrderTableComponents'
+import type { OrderType } from '@/pages/order/type/Types'
+
+const mapOrderToRow = (order: OrderType): Order => ({
+    id: order.id,
+    number: String(order.orderNumber ?? order.id),
+    title: order.title,
+    creationDate: {
+        gregorian: moment(order.createdAt).format('YYYY-MM-DD'),
+        persian: moment(order.createdAt).format('jYYYY/jMM/jDD')
+    },
+    status: orderStatusLabels[order.status] ?? order.status,
+    unreadMessages: 0
+})
 
 const Orders: FC = () => {
+    const { data, isLoading } = useGetMyOrders(1, TabMyRequestsEnum.IN_PROGRESS)
+    const orders: Order[] = (data?.data ?? []).map(mapOrderToRow)
+
     const columns: ColumnType<Order>[] = [
         {
             title: 'شماره',
@@ -55,10 +74,11 @@ const Orders: FC = () => {
 
             <Table<Order>
                 columns={columns}
-                data={ordersData}
+                data={orders}
+                isLoading={isLoading}
             />
         </div>
     )
 }
 
-export default Orders
+export default Orders

src/pages/home/components/types/OrderTypes.ts

@@ -8,7 +8,7 @@ export interface Order extends RowDataType {
     gregorian: string;
     persian: string;
   };
-  status: OrderStatus;
+  status: OrderStatus | string;
   unreadMessages: number;
   [key: string]: unknown;
 }