form of converet

2026-02-21 16:42:23 +03:30
parent f2ebdc9836
commit 502e8c538f
6 changed files with 205 additions and 7 deletions
@@ -0,0 +1,169 @@
+import { useState, type FC } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import UploadBox from '@/components/UploadBox'
+import Button from '@/components/Button'
+import { useGetUsers } from '../user/hooks/useUserData'
+import { useGetProducts } from './hooks/useOrderData'
+import { useMultiUpload } from '@/pages/uploader/hooks/useUploader'
+import { OrderStatusEnum } from './enum/OrderEnum'
+import type { ConvertToOrderItemType } from './types/Types'
+
+const initialValues: ConvertToOrderItemType = {
+  userId: '',
+  invoiceItemId: '',
+  typeId: '',
+  estimatedDays: 0,
+  productId: '',
+  title: '',
+  attachments: [],
+}
+
+const validationSchema = Yup.object({
+  userId: Yup.string().required('انتخاب کاربر اجباری است.'),
+  invoiceItemId: Yup.string(),
+  typeId: Yup.string().required('انتخاب نوع اجباری است.'),
+  estimatedDays: Yup.number().required('تخمین روز اجباری است.').min(0, 'باید عدد مثبت باشد'),
+  productId: Yup.string().required('انتخاب محصول اجباری است.'),
+  title: Yup.string().required('عنوان اجباری است.'),
+})
+
+const ConvertToOrders: FC = () => {
+  const { data: users } = useGetUsers()
+  const { data: products } = useGetProducts()
+  const multiUpload = useMultiUpload()
+  const [attachmentFiles, setAttachmentFiles] = useState<File[]>([])
+
+  const formik = useFormik<ConvertToOrderItemType>({
+    initialValues,
+    validationSchema,
+    onSubmit: async (values) => {
+      const attachments: string[] = [...values.attachments]
+
+      if (attachmentFiles.length > 0) {
+        const result = await multiUpload.mutateAsync(attachmentFiles)
+        result?.data?.forEach((item) => {
+          attachments.push(item.url)
+        })
+      }
+
+      const payload: ConvertToOrderItemType = {
+        ...values,
+        estimatedDays: Number(values.estimatedDays),
+        attachments,
+      }
+
+      console.log('Submit:', payload)
+      // TODO: call API
+    },
+  })
+
+  return (
+    <div className="mt-5">
+      <h1 className="text-lg font-light">تبدیل به سفارش</h1>
+
+      <div className="bg-white rounded-3xl p-6 mt-8">
+        <form
+          onSubmit={formik.handleSubmit}
+          className="space-y-6"
+        >
+          <div className="rowTwoInput">
+            <Select
+              items={
+                users?.data?.map((item) => ({
+                  label: item.firstName && item.lastName ? `${item.firstName} ${item.lastName}` : item.phone,
+                  value: item.id,
+                })) ?? []
+              }
+              label="کاربر"
+              placeholder="انتخاب کاربر"
+              {...formik.getFieldProps('userId')}
+              error_text={
+                formik.touched.userId && formik.errors.userId ? formik.errors.userId : ''
+              }
+            />
+
+            <Select
+              items={
+                products?.data?.map((item) => ({
+                  label: item.title,
+                  value: item.id,
+                })) ?? []
+              }
+              label="محصول"
+              placeholder="انتخاب محصول"
+              {...formik.getFieldProps('productId')}
+              error_text={
+                formik.touched.productId && formik.errors.productId ? formik.errors.productId : ''
+              }
+            />
+          </div>
+
+          <div className="rowTwoInput">
+            <Input
+              label="شناسه آیتم فاکتور"
+              {...formik.getFieldProps('invoiceItemId')}
+              error_text={
+                formik.touched.invoiceItemId && formik.errors.invoiceItemId
+                  ? formik.errors.invoiceItemId
+                  : ''
+              }
+            />
+
+            <Select
+              items={Object.values(OrderStatusEnum).map((item) => ({
+                label: item,
+                value: item,
+              }))}
+              label="نوع"
+              placeholder="انتخاب نوع"
+              {...formik.getFieldProps('typeId')}
+              error_text={
+                formik.touched.typeId && formik.errors.typeId ? formik.errors.typeId : ''
+              }
+            />
+          </div>
+
+          <div className="rowTwoInput">
+            <Input
+              label="تخمین روز"
+              type="number"
+              {...formik.getFieldProps('estimatedDays')}
+              error_text={
+                formik.touched.estimatedDays && formik.errors.estimatedDays
+                  ? formik.errors.estimatedDays
+                  : ''
+              }
+            />
+
+            <Input
+              label="عنوان"
+              {...formik.getFieldProps('title')}
+              error_text={
+                formik.touched.title && formik.errors.title ? formik.errors.title : ''
+              }
+            />
+          </div>
+
+          <div>
+            <UploadBox
+              label="پیوست‌ها"
+              isMultiple
+              onChange={setAttachmentFiles}
+            />
+          </div>
+
+          <div className="flex justify-end">
+            <Button type="submit" isLoading={multiUpload.isPending}>
+              ثبت
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default ConvertToOrders