designer request

2026-05-11 11:34:52 +03:30
parent 687f243b80
commit 327b74d7c0
8 changed files with 428 additions and 145 deletions
@@ -0,0 +1,104 @@
+import { useMemo, useState, type FC } from 'react'
+import Button from '@/components/Button'
+import DatePicker from '@/components/DatePicker'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import Textarea from '@/components/Textarea'
+import UploadBoxDraggble from '@/components/UploadBoxDraggble'
+
+const PRICE_PER_PAGE = 1000
+
+const pageCountOptions = Array.from({ length: 20 }, (_, index) => {
+    const value = index + 1
+    return {
+        value: String(value),
+        label: String(value),
+    }
+})
+
+const DesignerRequest: FC = () => {
+    const [catalogTitle, setCatalogTitle] = useState('')
+    const [, setDeliveryDate] = useState('')
+    const [pageCount, setPageCount] = useState('1')
+    const [description, setDescription] = useState('')
+    const [, setAttachment] = useState<File[]>([])
+
+    const totalPrice = useMemo(() => {
+        return Number(pageCount || 0) * PRICE_PER_PAGE
+    }, [pageCount])
+
+    const handleAttachmentChange = (files: File[]) => {
+        setAttachment(files)
+    }
+
+    return (
+        <div className='mt-4 w-full'>
+            <h1 className=''>درخواست طراحی کاتالوگ</h1>
+            <div className='rounded-[32px] bg-white p-4 md:p-6 lg:p-8 mt-6'>
+
+                <div className='mt-6 space-y-5'>
+                    <Input
+                        label='عنوان کاتالوگ'
+                        value={catalogTitle}
+                        onChange={(event) => setCatalogTitle(event.target.value)}
+                    />
+
+                    <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
+                        <DatePicker
+                            label='زمان تحویل موردنظر'
+                            placeholder='تاریخ را انتخاب کنید'
+                            onChange={(date) => setDeliveryDate(date)}
+                        />
+                        <Select
+                            label='تعداد صفحات'
+                            value={pageCount}
+                            items={pageCountOptions}
+                            onChange={(event) => setPageCount(event.target.value)}
+                        />
+                    </div>
+
+                    <Textarea
+                        label='توضیحات'
+                        value={description}
+                        onChange={(event) => setDescription(event.target.value)}
+                        className='min-h-[96px]'
+                    />
+
+                    <div>
+                        <div className='mb-2 text-sm'>فایل های ضمیمه</div>
+                        <UploadBoxDraggble
+                            label='فایل مورد نظر را آپلود کنید'
+                            onChange={handleAttachmentChange}
+                            isMultiple={false}
+                            isFile
+                        />
+                    </div>
+
+                    <div className='flex'>
+                        <div className='flex-1'></div>
+                        <div className='flex-1 flex gap-4'>
+                            <div className='w-[250px]'>
+                                <Input
+                                    label='قیمت به ازای هر صفحه'
+                                    value={`${PRICE_PER_PAGE.toLocaleString('fa-IR')} تومان`}
+                                    readOnly
+                                />
+                            </div>
+                            <Input
+                                label='مبلغ قابل پرداخت برای شما'
+                                value={`${totalPrice.toLocaleString('fa-IR')} تومان`}
+                                readOnly
+                            />
+                        </div>
+                    </div>
+
+                    <div className='flex justify-end mt-5'>
+                        <Button className='w-fit px-6'>ثبت درخواست</Button>
+                    </div>
+                </div>
+            </div >
+        </div >
+    )
+}
+
+export default DesignerRequest