orders list

src/components/Select.tsx

@@ -25,7 +25,7 @@ const Select: FC<Props> = (props: Props) => {
                 </label>
             }
             <select {...props} className={clx(
-                'w-full text-black block border appearance-none border-border px-2.5 h-10 text-sm rounded-[10px] bg-gray',
+                'w-full text-black block border appearance-none border-border !bg-white px-2.5 h-10 text-sm rounded-[10px] bg-gray',
                 props.className,
                 props.label && 'mt-1'
             )}>

src/pages/orders/List.tsx

@@ -0,0 +1,235 @@
+import { type FC, useState } from 'react'
+import Button from '@/components/Button'
+import Table from '@/components/Table'
+import Filters from '@/components/Filters'
+import { Add, Eye } from 'iconsax-react'
+import type { RowDataType, ActionType } from '@/components/types/TableTypes'
+import type { FilterValues } from '@/components/Filters'
+
+interface OrderData extends RowDataType {
+    id: number
+    orderNumber: string
+    customerName: string
+    orderAmount: string
+    orderTime: string
+    deliveryType: string
+    paymentType: string
+    status: string
+}
+
+const OrdersList: FC = () => {
+    const [currentPage, setCurrentPage] = useState(1)
+    const totalPages = 2
+
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page)
+    }
+
+    const handleFiltersChange = (newFilters: FilterValues) => {
+        console.log('فیلترها:', newFilters)
+    }
+
+    const handleRowActions = (item: OrderData): ActionType[] => {
+        return [
+            {
+                label: 'ویرایش',
+                onClick: () => {
+                    console.log('ویرایش سفارش:', item.id)
+                },
+            },
+            {
+                label: 'حذف',
+                onClick: () => {
+                    console.log('حذف سفارش:', item.id)
+                },
+            },
+        ]
+    }
+
+    const getStatusColor = (status: string) => {
+        switch (status) {
+            case 'در حال آماده سازی':
+                return 'text-orange-500'
+            case 'تایید نشده':
+                return 'text-red-500'
+            case 'تحویل داده شده':
+                return 'text-green-500'
+            default:
+                return ''
+        }
+    }
+
+    const columns = [
+        {
+            key: 'orderNumber',
+            title: 'شماره سفارش',
+        },
+        {
+            key: 'customerName',
+            title: 'نام مشتری',
+        },
+        {
+            key: 'orderAmount',
+            title: 'مبلغ سفارش',
+        },
+        {
+            key: 'orderTime',
+            title: 'زمان سفارش',
+        },
+        {
+            key: 'deliveryType',
+            title: 'نوع تحویل',
+        },
+        {
+            key: 'paymentType',
+            title: 'نوع پرداخت',
+        },
+        {
+            key: 'status',
+            title: 'وضعیت',
+            render: (item: OrderData) => {
+                return (
+                    <span className={getStatusColor(item.status)}>
+                        {item.status}
+                    </span>
+                )
+            },
+        },
+        {
+            key: 'details',
+            title: 'جزییات',
+            render: () => {
+                return (
+                    <Eye size={20} color="#8C90A3" />
+                )
+            },
+        },
+    ]
+
+    const data: OrderData[] = [
+        {
+            id: 1,
+            orderNumber: '12345',
+            customerName: 'مهرداد مظفری',
+            orderAmount: '۴۲۰۰۰۰ ریال',
+            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
+            deliveryType: 'تحویل با پیک',
+            paymentType: 'پرداخت آنلاین',
+            status: 'در حال آماده سازی',
+        },
+        {
+            id: 2,
+            orderNumber: '12345',
+            customerName: 'مهرداد مظفری',
+            orderAmount: '۴۲۰۰۰۰ ریال',
+            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
+            deliveryType: 'تحویل با پیک',
+            paymentType: 'پرداخت آنلاین',
+            status: 'در انتظار تایید',
+        },
+        {
+            id: 3,
+            orderNumber: '12345',
+            customerName: 'مهرداد مظفری',
+            orderAmount: '۴۲۰۰۰۰ ریال',
+            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
+            deliveryType: 'تحویل با پیک',
+            paymentType: 'پرداخت آنلاین',
+            status: 'تایید نشده',
+        },
+        {
+            id: 4,
+            orderNumber: '12345',
+            customerName: 'مهرداد مظفری',
+            orderAmount: '۴۲۰۰۰۰ ریال',
+            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
+            deliveryType: 'تحویل با پیک',
+            paymentType: 'پرداخت با کیف پول',
+            status: 'تحویل داده شده',
+        },
+        {
+            id: 5,
+            orderNumber: '12345',
+            customerName: 'مهرداد مظفری',
+            orderAmount: '۴۲۰۰۰۰ ریال',
+            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
+            deliveryType: 'سرو در رستوران',
+            paymentType: 'پرداخت در محل',
+            status: 'تحویل داده شده',
+        },
+        {
+            id: 6,
+            orderNumber: '12345',
+            customerName: 'مهرداد مظفری',
+            orderAmount: '۴۲۰۰۰۰ ریال',
+            orderTime: '۱۴۰۳/۱۱/۲۵ ۱۳:۰۰:۰۰',
+            deliveryType: 'تحویل در ماشین',
+            paymentType: 'پرداخت آنلاین',
+            status: 'تحویل داده شده',
+        },
+    ]
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>لیست سفارشات</h1>
+                <Button className='w-fit px-6'>
+                    <div className='flex gap-2 items-center'>
+                        <Add color='#fff' size={20} />
+                        <span>افزودن سفارش</span>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-8'>
+                <Filters
+                    fields={[
+                        {
+                            type: 'input',
+                            name: 'search',
+                            placeholder: 'جستجو',
+                        },
+                        {
+                            type: 'select',
+                            name: 'status',
+                            placeholder: 'وضعیت',
+                            options: [
+                                { value: '', label: 'همه' },
+                                { value: 'در حال آماده سازی', label: 'در حال آماده سازی' },
+                                { value: 'در انتظار تایید', label: 'در انتظار تایید' },
+                                { value: 'تایید نشده', label: 'تایید نشده' },
+                                { value: 'تحویل داده شده', label: 'تحویل داده شده' },
+                            ],
+                        },
+                        {
+                            type: 'select',
+                            name: 'deliveryType',
+                            placeholder: 'نوع تحویل',
+                            options: [
+                                { value: '', label: 'همه' },
+                                { value: 'تحویل با پیک', label: 'تحویل با پیک' },
+                                { value: 'سرو در رستوران', label: 'سرو در رستوران' },
+                                { value: 'تحویل در ماشین', label: 'تحویل در ماشین' },
+                            ],
+                        },
+                    ]}
+                    onChange={handleFiltersChange}
+                    searchField="search"
+                />
+            </div>
+
+            <Table
+                columns={columns}
+                data={data}
+                rowActions={handleRowActions}
+                pagination={{
+                    currentPage,
+                    totalPages,
+                    onPageChange: handlePageChange,
+                }}
+            />
+        </div>
+    )
+}
+
+export default OrdersList

src/router/Main.tsx

@@ -12,7 +12,7 @@ import CategoryFood from '@/pages/food/Category'
 import CustomersList from '@/pages/customers/List'
 import CustomerDetails from '@/pages/customers/Details'
 import CreateCustomer from '@/pages/customers/Create'
-
+import OrdersList from '@/pages/orders/List'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -36,6 +36,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.customers.list} element={<CustomersList />} />
                             <Route path={Pages.customers.detail + ':id'} element={<CustomerDetails />} />
                             <Route path={Pages.customers.add} element={<CreateCustomer />} />
+                            <Route path={Pages.orders.list} element={<OrdersList />} />
                         </Routes>
                     </div>
                 </div>