component table + orders in home

src/pages/home/Home.tsx

@@ -1,6 +1,7 @@
 import { type FC } from 'react'
 import Stats from './components/Stats'
 import Services from './components/Services'
+import Orders from './components/Orders'
 
 const Home: FC = () => {
     return (
@@ -8,6 +9,7 @@ const Home: FC = () => {
             <div className='flex-1'>
                 <Stats />
                 <Services />
+                <Orders />
             </div>
         </div>
     )

src/pages/home/components/OrderTableComponents.tsx

@@ -0,0 +1,106 @@
+import { type FC } from 'react';
+import { Eye } from 'iconsax-react';
+import StatusCircle from '@/components/StatusCircle';
+import { type Order, type OrderStatus } from './types/OrderTypes';
+
+// کامپوننت رندر شماره سفارش
+export const OrderNumberRenderer: FC<{ order: Order }> = ({ order }) => {
+    return (
+        <span className="text-sm font-medium text-gray-900">
+            {order.number}
+        </span>
+    );
+};
+
+// کامپوننت رندر عنوان سفارش
+export const OrderTitleRenderer: FC<{ order: Order }> = ({ order }) => {
+    return (
+        <span className="text-sm font-medium text-gray-900">
+            {order.title}
+        </span>
+    );
+};
+
+// کامپوننت رندر تاریخ
+export const OrderDateRenderer: FC<{ order: Order }> = ({ order }) => {
+    return (
+        <div className="text-xs text-gray-500">
+            <div className="font-medium">
+                ({order.creationDate.gregorian})
+            </div>
+            <div>
+                {order.creationDate.persian}
+            </div>
+        </div>
+    );
+};
+
+// کامپوننت رندر وضعیت سفارش
+export const OrderStatusRenderer: FC<{ order: Order }> = ({ order }) => {
+    const getStatusConfig = (status: OrderStatus) => {
+        switch (status) {
+            case 'در حال طراحی':
+                return {
+                    color: 'text-blue-600',
+                    bgColor: 'bg-blue-50'
+                };
+            case 'تهیه متریال':
+                return {
+                    color: 'text-gray-600',
+                    bgColor: 'bg-gray-50'
+                };
+            case 'در حال چاپ':
+                return {
+                    color: 'text-orange-600',
+                    bgColor: 'bg-orange-50'
+                };
+            case 'تکمیل شده':
+                return {
+                    color: 'text-green-600',
+                    bgColor: 'bg-green-50'
+                };
+            default:
+                return {
+                    color: 'text-gray-600',
+                    bgColor: 'bg-gray-50'
+                };
+        }
+    };
+
+    const config = getStatusConfig(order.status);
+
+    return (
+        <span className={`text-sm font-medium ${config.color}`}>
+            {order.status}
+        </span>
+    );
+};
+
+// کامپوننت رندر پیام‌ها
+export const OrderMessagesRenderer: FC<{ order: Order }> = ({ order }) => {
+    const hasUnreadMessages = order.unreadMessages > 0;
+
+    return (
+        <div className="flex items-center gap-2">
+            <StatusCircle color={hasUnreadMessages ? '#EF4444' : '#3B82F6'} />
+            <span className="text-xs text-gray-500">
+                {order.unreadMessages} پیام خوانده نشده
+            </span>
+        </div>
+    );
+};
+
+// کامپوننت رندر آیکون مشاهده
+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);
+            }}
+        >
+            <Eye color='black' size={16} />
+        </button>
+    );
+};

src/pages/home/components/Orders.tsx

@@ -0,0 +1,64 @@
+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 {
+    OrderNumberRenderer,
+    OrderTitleRenderer,
+    OrderDateRenderer,
+    OrderStatusRenderer,
+    OrderMessagesRenderer,
+    OrderViewRenderer
+} from './OrderTableComponents'
+
+const Orders: FC = () => {
+    const columns: ColumnType<Order>[] = [
+        {
+            title: 'شماره',
+            key: 'number',
+            render: (order) => <OrderNumberRenderer order={order} />
+        },
+        {
+            title: 'عنوان سفارش',
+            key: 'title',
+            render: (order) => <OrderTitleRenderer order={order} />
+        },
+        {
+            title: 'تاریخ ایجاد',
+            key: 'creationDate',
+            render: (order) => <OrderDateRenderer order={order} />
+        },
+        {
+            title: 'وضعیت سفارش',
+            key: 'status',
+            render: (order) => <OrderStatusRenderer order={order} />
+        },
+        {
+            title: 'پیام ها',
+            key: 'unreadMessages',
+            render: (order) => <OrderMessagesRenderer order={order} />
+        },
+        {
+            title: '',
+            key: 'actions',
+            render: (order) => <OrderViewRenderer order={order} />,
+            width: '60px'
+        }
+    ]
+
+    return (
+        <div className='mt-6 bg-white p-6 rounded-3xl'>
+            <h4 className='text-lg font-light'>
+                سفارش های در حال انجام
+            </h4>
+
+            <Table<Order>
+                columns={columns}
+                data={ordersData}
+            />
+        </div>
+    )
+}
+
+export default Orders

src/pages/home/components/data/ordersData.ts

@@ -0,0 +1,37 @@
+import { type Order } from '../types/OrderTypes';
+
+export const ordersData: Order[] = [
+  {
+    id: 1,
+    number: '123455',
+    title: 'کارت ویزیت',
+    creationDate: {
+      gregorian: '2024-11-01',
+      persian: '1403/09/01'
+    },
+    status: 'در حال طراحی',
+    unreadMessages: 2
+  },
+  {
+    id: 2,
+    number: '123455',
+    title: 'شاپینگ بگ',
+    creationDate: {
+      gregorian: '2024-11-01',
+      persian: '1403/09/01'
+    },
+    status: 'تهیه متریال',
+    unreadMessages: 0
+  },
+  {
+    id: 3,
+    number: '123455',
+    title: 'کارت ویزیت',
+    creationDate: {
+      gregorian: '2024-11-01',
+      persian: '1403/09/01'
+    },
+    status: 'در حال چاپ',
+    unreadMessages: 2
+  }
+];

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

@@ -0,0 +1,22 @@
+import { type RowDataType } from '@/components/types/TableTypes';
+
+export interface Order extends RowDataType {
+  id: string | number;
+  number: string;
+  title: string;
+  creationDate: {
+    gregorian: string;
+    persian: string;
+  };
+  status: OrderStatus;
+  unreadMessages: number;
+  [key: string]: unknown;
+}
+
+export type OrderStatus = 'در حال طراحی' | 'تهیه متریال' | 'در حال چاپ' | 'تکمیل شده';
+
+export interface OrderStatusConfig {
+  status: OrderStatus;
+  color: string;
+  textColor: string;
+}