order details
This commit is contained in:
hamid zarghami
@@ -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
|
||||
@@ -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 (
|
||||
<Eye size={20} color="#8C90A3" />
|
||||
<Link to={Pages.orders.detail + item.id}>
|
||||
<Eye size={20} color="#8C90A3" />
|
||||
</Link>
|
||||
)
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user