From d357a5000bd33d0415de89226cc3fd801e959335 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 22 Feb 2026 09:50:36 +0330
Subject: [PATCH] Create order

---
 src/config/Paths.tsx                          |   2 +-
 .../invoice/components/InvoiceItemRow.tsx     |   2 +-
 src/pages/order/ConvertToOrders.tsx           | 287 +++++++++---------
 src/pages/order/hooks/useOrderData.ts         |   6 +
 src/pages/order/service/OrderService.ts       |   6 +
 src/pages/order/types/Types.ts                |   4 +-
 src/router/MainRouter.tsx                     |   2 +-
 7 files changed, 164 insertions(+), 145 deletions(-)

diff --git a/src/config/Paths.tsx b/src/config/Paths.tsx
index 0aee870..b170245 100644
--- a/src/config/Paths.tsx
+++ b/src/config/Paths.tsx
@@ -91,5 +91,5 @@ export const Paths = {
     update: '/print/update/',
     form: '/print/form/',
   },
-  convertToOrder: '/convert-to-order/',
+  convertToOrder: '/convert-to-order',
 };
diff --git a/src/pages/invoice/components/InvoiceItemRow.tsx b/src/pages/invoice/components/InvoiceItemRow.tsx
index dd1ab23..9898d0b 100644
--- a/src/pages/invoice/components/InvoiceItemRow.tsx
+++ b/src/pages/invoice/components/InvoiceItemRow.tsx
@@ -123,7 +123,7 @@ const InvoiceItemRow: FC<Props> = ({
           </button>
         )}
         {item.id && (
-          <Link to={Paths.convertToOrder + '/' + item.id}>
+          <Link to={Paths.convertToOrder + '?invoiceItemId=' + item.id}>
             <button
               type="button"
               onClick={onConvertToOrder}
diff --git a/src/pages/order/ConvertToOrders.tsx b/src/pages/order/ConvertToOrders.tsx
index 3fa014e..257c261 100644
--- a/src/pages/order/ConvertToOrders.tsx
+++ b/src/pages/order/ConvertToOrders.tsx
@@ -5,165 +5,172 @@ 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'
+import { useConverToOrder, useGetProducts } from './hooks/useOrderData'
+import { useGetCategory } from '@/pages/product/hooks/useProductData'
+import { useGetUsers } from '@/pages/user/hooks/useUserData'
+import { useSearchParams } from 'react-router-dom'
 
-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 getInitialValues = (invoiceItemId: string | null): ConvertToOrderItemType => ({
+    invoiceItemId: invoiceItemId ?? '',
+    productId: '',
+    userId: '',
+    typeId: '',
+    estimatedDays: 0,
+    title: '',
+    attachments: [],
 })
 
+const getValidationSchema = (invoiceItemId: string | null) =>
+    Yup.object({
+        invoiceItemId: Yup.string(),
+        productId: invoiceItemId ? Yup.string() : Yup.string().required('انتخاب محصول اجباری است.'),
+        userId: invoiceItemId ? Yup.string() : Yup.string().required('انتخاب کاربر اجباری است.'),
+        typeId: Yup.string().required('انتخاب نوع اجباری است.'),
+        estimatedDays: Yup.number().required('تخمین روز اجباری است.').min(0, 'باید عدد مثبت باشد'),
+        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]
+    const [searchParams] = useSearchParams()
+    const invoiceItemId = searchParams.get('invoiceItemId')
+    const multiUpload = useMultiUpload()
+    const [attachmentFiles, setAttachmentFiles] = useState<File[]>([])
+    const { data: categories } = useGetCategory()
+    const { data: users } = useGetUsers()
+    const { data: products } = useGetProducts()
 
-      if (attachmentFiles.length > 0) {
-        const result = await multiUpload.mutateAsync(attachmentFiles)
-        result?.data?.forEach((item) => {
-          attachments.push(item.url)
-        })
-      }
+    const { mutate: converToOrder, isPending } = useConverToOrder()
 
-      const payload: ConvertToOrderItemType = {
-        ...values,
-        estimatedDays: Number(values.estimatedDays),
-        attachments,
-      }
+    const formik = useFormik<ConvertToOrderItemType>({
+        initialValues: getInitialValues(invoiceItemId),
+        validationSchema: getValidationSchema(invoiceItemId),
+        enableReinitialize: true,
+        onSubmit: async (values) => {
+            const attachments: string[] = [...values.attachments]
 
-      console.log('Submit:', payload)
-      // TODO: call API
-    },
-  })
+            if (attachmentFiles.length > 0) {
+                const result = await multiUpload.mutateAsync(attachmentFiles)
+                result?.data?.forEach((item) => {
+                    attachments.push(item.url)
+                })
+            }
 
-  return (
-    <div className="mt-5">
-      <h1 className="text-lg font-light">تبدیل به سفارش</h1>
+            const payload: ConvertToOrderItemType = {
+                ...values,
+                invoiceItemId: invoiceItemId ?? values.invoiceItemId ?? '',
+                productId: invoiceItemId ? undefined : values.productId,
+                userId: invoiceItemId ? undefined : values.userId,
+                estimatedDays: Number(values.estimatedDays),
+                attachments,
+            }
 
-      <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 : ''
-              }
-            />
+            await converToOrder(payload)
+        },
+    })
 
-            <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>
+    return (
+        <div className="mt-5">
+            <h1 className="text-lg font-light">تبدیل به سفارش</h1>
 
-          <div className="rowTwoInput">
-            <Input
-              label="شناسه آیتم فاکتور"
-              {...formik.getFieldProps('invoiceItemId')}
-              error_text={
-                formik.touched.invoiceItemId && formik.errors.invoiceItemId
-                  ? formik.errors.invoiceItemId
-                  : ''
-              }
-            />
+            <div className="bg-white rounded-3xl p-6 mt-8">
+                <form
+                    onSubmit={formik.handleSubmit}
+                    className="space-y-6"
+                >
+                    {!invoiceItemId && (
+                        <div className="rowTwoInput">
+                            <Select
+                                items={
+                                    users?.data?.map((item) => ({
+                                        label: item.firstName ? `${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: String(item.id),
+                                    })) ?? []
+                                }
+                                label="محصول"
+                                placeholder="انتخاب محصول"
+                                {...formik.getFieldProps('productId')}
+                                error_text={
+                                    formik.touched.productId && formik.errors.productId
+                                        ? formik.errors.productId
+                                        : ''
+                                }
+                            />
+                        </div>
+                    )}
 
-            <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">
 
-          <div className="rowTwoInput">
-            <Input
-              label="تخمین روز"
-              type="number"
-              {...formik.getFieldProps('estimatedDays')}
-              error_text={
-                formik.touched.estimatedDays && formik.errors.estimatedDays
-                  ? formik.errors.estimatedDays
-                  : ''
-              }
-            />
+                        <Select
+                            items={
+                                categories?.data?.map((item) => ({
+                                    label: item.title,
+                                    value: String(item.id),
+                                })) ?? []
+                            }
+                            label="نوع"
+                            placeholder="انتخاب نوع"
+                            {...formik.getFieldProps('typeId')}
+                            error_text={
+                                formik.touched.typeId && formik.errors.typeId ? formik.errors.typeId : ''
+                            }
+                        />
+                    </div>
 
-            <Input
-              label="عنوان"
-              {...formik.getFieldProps('title')}
-              error_text={
-                formik.touched.title && formik.errors.title ? formik.errors.title : ''
-              }
-            />
-          </div>
+                    <div className="rowTwoInput">
+                        <Input
+                            label="تخمین روز"
+                            type="number"
+                            {...formik.getFieldProps('estimatedDays')}
+                            error_text={
+                                formik.touched.estimatedDays && formik.errors.estimatedDays
+                                    ? formik.errors.estimatedDays
+                                    : ''
+                            }
+                        />
 
-          <div>
-            <UploadBox
-              label="پیوست‌ها"
-              isMultiple
-              onChange={setAttachmentFiles}
-            />
-          </div>
+                        <Input
+                            label="عنوان"
+                            {...formik.getFieldProps('title')}
+                            error_text={
+                                formik.touched.title && formik.errors.title ? formik.errors.title : ''
+                            }
+                        />
+                    </div>
 
-          <div className="flex justify-end">
-            <Button type="submit" isLoading={multiUpload.isPending}>
-              ثبت
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
+                    <div>
+                        <UploadBox
+                            label="پیوست‌ها"
+                            isMultiple
+                            onChange={setAttachmentFiles}
+                        />
+                    </div>
+
+                    <div className="flex justify-end">
+                        <Button type="submit" isLoading={multiUpload.isPending || isPending}>
+                            ثبت
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    )
 }
 
 export default ConvertToOrders
diff --git a/src/pages/order/hooks/useOrderData.ts b/src/pages/order/hooks/useOrderData.ts
index 2c586e0..af79424 100644
--- a/src/pages/order/hooks/useOrderData.ts
+++ b/src/pages/order/hooks/useOrderData.ts
@@ -57,6 +57,12 @@ export const useCreateOrder = () => {
   });
 };
 
+export const useConverToOrder = () => {
+  return useMutation({
+    mutationFn: api.converToOrder,
+  });
+};
+
 export const useUpdateOrder = () => {
   return useMutation({
     mutationFn: ({
diff --git a/src/pages/order/service/OrderService.ts b/src/pages/order/service/OrderService.ts
index 52765c2..749300b 100644
--- a/src/pages/order/service/OrderService.ts
+++ b/src/pages/order/service/OrderService.ts
@@ -1,6 +1,7 @@
 import axios from "@/config/axios";
 import type {
   AddTicketType,
+  ConvertToOrderItemType,
   CreateFinalOrderType,
   OrderDetailResponseType,
   OrderItemResponseType,
@@ -82,3 +83,8 @@ export const getOrderItem = async (itemId?: number) => {
   );
   return data;
 };
+
+export const converToOrder = async (params: ConvertToOrderItemType) => {
+  const { data } = await axios.post(`/admin/orders`, params);
+  return data;
+};
diff --git a/src/pages/order/types/Types.ts b/src/pages/order/types/Types.ts
index bd14874..5cd3cd7 100644
--- a/src/pages/order/types/Types.ts
+++ b/src/pages/order/types/Types.ts
@@ -178,11 +178,11 @@ export interface CreateFinalOrderType extends CreateBaseOrderType {
 }
 
 export type ConvertToOrderItemType = {
-  userId: string;
   invoiceItemId: string;
+  productId?: string;
+  userId?: string;
   typeId: string;
   estimatedDays: number;
-  productId: string;
   title: string;
   attachments: string[];
 };
diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx
index d73ce0a..f8d0d20 100644
--- a/src/router/MainRouter.tsx
+++ b/src/router/MainRouter.tsx
@@ -88,7 +88,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.order.details + ":id"} element={<OrderDetail />} />
                             <Route path={Paths.order.create} element={<NewOrder />} />
                             <Route path={Paths.order.edit + ":id"} element={<EditOrder />} />
-                            <Route path={Paths.convertToOrder + ":id"} element={<ConvertToOrders />} />
+                            <Route path={Paths.convertToOrder} element={<ConvertToOrders />} />
 
                             <Route path={Paths.print.list} element={<SectionList />} />
                             <Route path={Paths.print.create} element={<CreateSection />} />