negareh-console/src/pages/order/OrderDetail.tsx

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