detail order
This commit is contained in:
hamid zarghami
@@ -57,6 +57,22 @@ const UploadBox: FC<Props> = (props: Props) => {
|
||||
</button>
|
||||
|
||||
<div className='lg:flex gap-2 hidden'>
|
||||
{
|
||||
files.length === 0 ? (
|
||||
<div className='text-xs text-description'>هیچ فایلی انتخاب نشده است</div>
|
||||
) : (
|
||||
files?.map((item, index) => (
|
||||
<div key={index} className='flex bg-gray-200 py-1.5 px-2 rounded-lg items-center gap-1'>
|
||||
<CloseCircle onClick={() => handleRemove(index)} size={16} color='red' />
|
||||
<div className='text-xs'>{item.name}</div>
|
||||
</div>
|
||||
))
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{files.length > 0 && (
|
||||
<div className='lg:hidden gap-2 flex flex-wrap mt-4'>
|
||||
{
|
||||
files?.map((item, index) => (
|
||||
<div key={index} className='flex bg-gray-200 py-1.5 px-2 rounded-lg items-center gap-1'>
|
||||
@@ -66,17 +82,7 @@ const UploadBox: FC<Props> = (props: Props) => {
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='lg:hidden gap-2 flex flex-wrap mt-4'>
|
||||
{
|
||||
files?.map((item, index) => (
|
||||
<div key={index} className='flex bg-gray-200 py-1.5 px-2 rounded-lg items-center gap-1'>
|
||||
<CloseCircle onClick={() => handleRemove(index)} size={16} color='red' />
|
||||
<div className='text-xs'>{item.name}</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ export const Paths = {
|
||||
myOrders: '/my-orders',
|
||||
proformaInvoice: '/proforma-invoice',
|
||||
newOrder: '/new-order',
|
||||
orderDetails: '/order/',
|
||||
tickets: {
|
||||
list: '/tickets',
|
||||
},
|
||||
|
||||
@@ -45,6 +45,7 @@ textarea::placeholder {
|
||||
--color-border: #f5f7fc;
|
||||
--color-secondary: #ebedf5;
|
||||
--color-description: #c3c7dd;
|
||||
--color-desc: #8c90a3;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
import { type FC, useState } from 'react'
|
||||
import { Microphone, Paperclip2, Receipt1 } from 'iconsax-react'
|
||||
import Button from '@/components/Button'
|
||||
import UploadBox from '@/components/UploadBox'
|
||||
import Input from '@/components/Input'
|
||||
|
||||
const OrderDetail: FC = () => {
|
||||
const [message, setMessage] = useState('')
|
||||
const [files, setFiles] = useState<File[]>([])
|
||||
|
||||
const orderData = {
|
||||
orderId: '۱۲۲۴۵',
|
||||
title: 'شاپینگ بک',
|
||||
designer: 'عباس حسینی',
|
||||
quantity: '۱۰۰',
|
||||
estimatedDate: '۱۴۰۵/۰۶/۰۶/۱۳',
|
||||
description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاق...'
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log('Submit:', { message, files })
|
||||
}
|
||||
|
||||
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]">
|
||||
سفارش #{orderData.orderId}
|
||||
</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 items-center gap-6">
|
||||
{/* Product Image */}
|
||||
<div className='size-[86px] rounded-lg bg-gray-200'>
|
||||
</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">{orderData.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">{orderData.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">{orderData.estimatedDate}</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">
|
||||
{orderData.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section - White Card */}
|
||||
<div className="bg-white rounded-2xl p-6">
|
||||
{/* Designer Name */}
|
||||
<div className="mt-6">
|
||||
<Input
|
||||
label="نام طراح"
|
||||
placeholder="عباس حسینی"
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='bg-[#F5F7FC] rounded-4xl rounded-tr-none mt-6 p-6 max-w-[55%]'>
|
||||
<div className='text-sm font-light text-black leading-6'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
|
||||
</div>
|
||||
|
||||
<div className='flex justify-between mt-3'>
|
||||
<div className='flex items-center gap-1.5 text-[#0047FF]'>
|
||||
<Paperclip2 size={20} color="#0047FF" />
|
||||
<div className='text-xs'>loremipsum.pdf</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end'>'
|
||||
<div className='bg-[#F5F7FC] rounded-4xl rounded-tl-none mt-6 p-6 max-w-[55%]'>
|
||||
<div className='flex gap-1 text-sm mb-2'>
|
||||
<div className='font-bold'>طراح : </div>
|
||||
<div>عباس حسینی</div>
|
||||
</div>
|
||||
<div className='text-sm font-light text-black leading-6'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="mt-6">
|
||||
<div className="text-sm mb-2 text-black">پیام شما</div>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
className="w-full h-40 bg-white border border-[#f5f7fc] rounded-xl p-4 text-sm resize-none outline-none"
|
||||
placeholder=""
|
||||
/>
|
||||
<button className="absolute left-4 bottom-4 bg-[#FFF1D7] size-8 rounded-lg flex items-center justify-center">
|
||||
<Microphone size={20} color="black" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-6">
|
||||
<UploadBox
|
||||
label="فایل های ضمیمه"
|
||||
isMultiple={true}
|
||||
onChange={setFiles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex mt-10 justify-end">
|
||||
<Button
|
||||
label="ارسال"
|
||||
onClick={handleSubmit}
|
||||
className='w-[150px]'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrderDetail
|
||||
@@ -7,6 +7,7 @@ import { Paths } from '@/config/Paths'
|
||||
import MyOrders from '@/pages/order/MyOrders'
|
||||
import ProformaInvoice from '@/pages/invoice/ProformaInvoice'
|
||||
import NewOrder from '@/pages/order/NewOrder'
|
||||
import OrderDetail from '@/pages/order/OrderDetail'
|
||||
|
||||
const MainRouter: FC = () => {
|
||||
return (
|
||||
@@ -23,6 +24,7 @@ const MainRouter: FC = () => {
|
||||
<Route path={Paths.myOrders} element={<MyOrders />} />
|
||||
<Route path={Paths.proformaInvoice} element={<ProformaInvoice />} />
|
||||
<Route path={Paths.newOrder} element={<NewOrder />} />
|
||||
<Route path={`${Paths.orderDetails}:id`} element={<OrderDetail />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user