hamid zarghami
83 lines
4.2 KiB
TypeScript
83 lines
4.2 KiB
TypeScript
import { type FC } from 'react'
|
||
import { Receipt1 } from 'iconsax-react'
|
||
import { useParams } from 'react-router-dom'
|
||
import { useGetOrderDetails } from './hooks/useOrderData'
|
||
import TicketSection from './components/TicketSection'
|
||
|
||
const OrderDetail: FC = () => {
|
||
|
||
const { id } = useParams()
|
||
const { data } = useGetOrderDetails(id!)
|
||
|
||
return (
|
||
<div className="w-full min-h-screen bg-[#eceef6] p-6">
|
||
{/* Header Section */}
|
||
<div className="flex items-start justify-between mb-6">
|
||
<div className="text-sm text-[#8C90A3]">
|
||
سفارش #{data?.data?.orderNumber}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Order Information Section */}
|
||
<div className="bg-white rounded-2xl p-6 mb-6">
|
||
<div className='flex justify-between items-center'>
|
||
<h2 className="text-lg font-light mb-6">اطلاعات سفارش</h2>
|
||
|
||
<a href="#" className="flex items-center gap-2 text-[#0037FF] text-sm">
|
||
<Receipt1 size={20} color="#3B82F6" />
|
||
<span>پیش فاکتور</span>
|
||
</a>
|
||
</div>
|
||
<div className='flex flex-col gap-10'>
|
||
{
|
||
data?.data?.items?.map((item) => {
|
||
return (
|
||
<div key={item.product.id}>
|
||
<div className="flex items-center gap-6">
|
||
{/* Product Image */}
|
||
<div className='size-[86px] rounded-lg overflow-hidden'>
|
||
<img src={item.product?.images?.[0]} className='size-full' />
|
||
</div>
|
||
|
||
{/* Order Details */}
|
||
<div className="flex-1 flex gap-20 pr-10">
|
||
<div className='flex items-center gap-2'>
|
||
<div className="text-xs text-desc">عنوان:</div>
|
||
<div className="text-sm font-medium text-black">{item.product.title}</div>
|
||
</div>
|
||
<div className='flex items-center gap-2'>
|
||
<div className="text-xs text-desc">نام طرح:</div>
|
||
<div className="text-sm font-medium text-black">{'orderData.designer'}</div>
|
||
</div>
|
||
<div className='flex items-center gap-2'>
|
||
<div className="text-xs text-desc">تعداد:</div>
|
||
<div className="text-sm font-medium text-black">{item.quantity}</div>
|
||
</div>
|
||
<div className='flex items-center gap-2'>
|
||
<div className="text-xs text-desc">تخمین زمان:</div>
|
||
<div className="text-sm font-medium text-black">{data?.data?.estimatedDays}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Order Description */}
|
||
<div className="mt-6 pt-6 border-t border-dashed border-desc">
|
||
<div className="text-sm font-medium mb-2 text-desc">شرح سفارش:</div>
|
||
<p className="text-sm font-light text-black leading-6">
|
||
{item.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Section - White Card */}
|
||
<TicketSection />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default OrderDetail |