order details

src/pages/orders/Details.tsx

@@ -0,0 +1,226 @@
+import Select from '@/components/Select'
+import Table from '@/components/Table'
+import { Location } from 'iconsax-react'
+import { type FC } from 'react'
+import type { ColumnType, RowDataType } from '@/components/types/TableTypes'
+import AppImage from '@/assets/images/appimage.png'
+
+interface OrderItem extends RowDataType {
+    image: string
+    title: string
+    quantity: number
+    amount: string
+}
+
+const OrderDetails: FC = () => {
+    const orderItems: OrderItem[] = [
+        {
+            id: 1,
+            image: AppImage,
+            title: 'پیتزا پپرونی',
+            quantity: 1,
+            amount: '۴۲,۰۰۰ تومان'
+        }
+    ]
+
+    const columns: ColumnType<OrderItem>[] = [
+        {
+            title: 'تصویر',
+            key: 'image',
+            render: (item) => (
+                <div className=''>
+                    <img
+                        src={item.image}
+                        alt={item.title}
+                        className='w-12 h-12 rounded-lg'
+                    />
+                </div>
+            )
+        },
+        {
+            title: 'عنوان',
+            key: 'title',
+            align: 'right'
+        },
+        {
+            title: 'تعداد',
+            key: 'quantity',
+            align: 'center'
+        },
+        {
+            title: 'مبلغ',
+            key: 'amount',
+            align: 'right'
+        }
+    ]
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'> سفارش ۱۲۳۴۵</h1>
+                <div>
+                    <Select
+                        items={[]}
+                        placeholder='درحال آماده سازی'
+                        className='w-[200px] bg-[#FFEECC]'
+                    />
+                </div>
+            </div>
+
+            <div className='flex gap-7 mt-9'>
+                <div className='flex-1'>
+                    <div className='w-full bg-white rounded-4xl p-8'>
+                        <div className='flex justify-between items-center'>
+                            <div className='text-lg font-light'>
+                                اطلاعات مشتری
+                            </div>
+                        </div>
+
+                        <div className='mt-8 flex flex-wrap gap-y-7 gap-20 text-[13px] font-light border-b border-dashed border-border pb-8'>
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    شماره سفارش:
+                                </div>
+                                <div>۱۲۳۴۵</div>
+                            </div>
+
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    نام مشتری :
+                                </div>
+                                <div>مهرداد مظفری</div>
+                            </div>
+
+                            <div className='flex gap-2'>
+                                <div className='text-description'>نوع سفارش :</div>
+                                <div>تحویل در  محل</div>
+                            </div>
+
+                            <div className='flex gap-2'>
+                                <div className='text-description'>زمان سفارش : </div>
+                                <div>۱۴۰۳/۱۱/۲۵ - ۱۳:۰۰:۰۰</div>
+                            </div>
+                        </div>
+
+                        <div className='mt-8 flex gap-20 text-[13px] font-light'>
+                            <div className='flex gap-2'>
+                                <div className='text-description'>شماره تماس:</div>
+                                <div>۰۸۶۹۱۰۰۹۱۰۰۱</div>
+                            </div>
+
+                            <div className='flex gap-2'>
+                                <div className='text-description'>آدرس::</div>
+                                <div>اراک -خیابان شریعتی-خیابان جنت</div>
+                                <div className='flex gap-1'>
+                                    <Location size={17} color='#0047FF' />
+                                    <div className='text-[13px] text-blue-600'>نقشه</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='w-full bg-white rounded-4xl p-8 mt-8'>
+                        <div className='text-lg font-light mb-6'>
+                            جزییات سفارش
+                        </div>
+
+                        <Table
+                            columns={columns}
+                            data={orderItems}
+                            showHeader={true}
+                            className='mt-0'
+                        />
+
+                        <div className='flex justify-between items-center h-14 text-[13px] mt-5 border-t border-border'>
+                            <div className=''>
+                                ۱۰٪ ارزش افزوده
+                            </div>
+                            <div>
+                                ۴۲۰,۰۰۰ تومان
+                            </div>
+                        </div>
+
+                        <div className='flex font-bold justify-between items-center h-14 text-[13px] border-t border-border'>
+                            <div>
+                                جمع کل
+                            </div>
+                            <div>
+                                ۴۲۰,۰۰۰ تومان
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='w-[330px] h-fit bg-white rounded-4xl p-8'>
+                    <div className='flex justify-between items-center'>
+                        <div className='font-light'>
+                            اطلاعات پرداخت
+                        </div>
+
+                        <div className='flex gap-1.5 items-center'>
+                            <div className='size-2 rounded-full bg-green-500'></div>
+                            <div className='text-[13px] text-green-500'>
+                                پرداخت شده
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='mt-10'>
+                        <div className='flex text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                            <div className=' text-description'>
+                                شماره تراکنش
+                            </div>
+                            <div>۱۲۳۴۵۶۷۸۹۰</div>
+                        </div>
+                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                            <div className=' text-description'>
+                                شماره پیگیری
+                            </div>
+                            <div>42343546</div>
+                        </div>
+
+                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                            <div className=' text-description'>
+                                نوع تراکنش
+                            </div>
+                            <div>پرداخت آنلاین</div>
+                        </div>
+                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                            <div className=' text-description'>
+                                مبلغ سفارش
+                            </div>
+                            <div>۴۰۰۰۰۰۰ ریال</div>
+                        </div>
+                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                            <div className=' text-description'>
+                                تخفیف
+                            </div>
+                            <div>۰ ریال</div>
+                        </div>
+                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                            <div className=' text-description'>
+                                هزینه ارسال
+                            </div>
+                            <div>۲۰۰۰۰۰ ریال</div>
+                        </div>
+                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                            <div className=' text-description'>
+                                مالیات
+                            </div>
+                            <div>۰ ریال</div>
+                        </div>
+                        <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                            <div className=' text-description'>
+                                مبلغ کل
+                            </div>
+                            <div>۴۲۰,۰۰۰ تومان</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+        </div >
+    )
+}
+
+export default OrderDetails

src/pages/orders/List.tsx

@@ -5,6 +5,8 @@ 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'
+import { Link } from 'react-router-dom'
+import { Pages } from '@/config/Pages'
 
 interface OrderData extends RowDataType {
     id: number
@@ -98,9 +100,11 @@ const OrdersList: FC = () => {
         {
             key: 'details',
             title: 'جزییات',
-            render: () => {
+            render: (item: OrderData) => {
                 return (
+                    <Link to={Pages.orders.detail + item.id}>
                         <Eye size={20} color="#8C90A3" />
+                    </Link>
                 )
             },
         },

src/router/Main.tsx

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