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
|
||||
Reference in New Issue
Block a user