add product id

src/pages/invoice/DetailPerfomaInvoice.tsx

@@ -89,6 +89,10 @@ const DetailPerfomaInvoice: FC = () => {
               {invoice.items?.map((item) => {
                 const discounts = formatItemDiscountDisplay(item);
                 const lineTotal = item.total ?? 0;
+                const convertToOrderUrl = `${Paths.convertToOrder}?${new URLSearchParams({
+                  invoiceItemId: item.id,
+                  productId: item.product?.id ?? '',
+                }).toString()}`;
                 return (
                   <tr key={item.id} className="border-b border-border/50">
                     <td className="py-3">{item.product?.title ?? '-'}</td>
@@ -105,7 +109,7 @@ const DetailPerfomaInvoice: FC = () => {
                     <td className="py-3">
                       {item.id && (
                         <Link
-                          to={Paths.convertToOrder + '?invoiceItemId=' + item.id}
+                          to={convertToOrderUrl}
                         >
                           <button
                             type="button"

src/pages/invoice/components/InvoiceItemRow.tsx

@@ -40,6 +40,12 @@ const InvoiceItemRow: FC<Props> = ({
   const total = getItemLineTotal(item);
   const subTotal = getItemSubTotal(item);
   const isPercentDiscount = item.discountPercent != null;
+  const convertToOrderUrl = item.id
+    ? `${Paths.convertToOrder}?${new URLSearchParams({
+      invoiceItemId: item.id,
+      productId: item.productId,
+    }).toString()}`
+    : "";
 
   const handleProductChange = (e: ChangeEvent<HTMLSelectElement>) => {
     onChange(index, "productId", e.target.value);
@@ -183,7 +189,7 @@ const InvoiceItemRow: FC<Props> = ({
           </button>
         )}
         {item.id && (
-          <Link to={Paths.convertToOrder + '?invoiceItemId=' + item.id}>
+          <Link to={convertToOrderUrl}>
             <button
               type="button"
               onClick={onConvertToOrder}

src/pages/order/ConvertToOrders.tsx

@@ -17,9 +17,12 @@ import { Paths } from '@/config/Paths'
 import { extractErrorMessage } from '@/config/func'
 import { useGetAdmins } from '../admin/hooks/useAdminData'
 
-const getInitialValues = (invoiceItemId: string | null): ConvertToOrderItemType => ({
+const getInitialValues = (
+    invoiceItemId: string | null,
+    productId: string | null
+): ConvertToOrderItemType => ({
     invoiceItemId: invoiceItemId ?? '',
-    productId: '',
+    productId: productId ?? '',
     userId: '',
     typeId: '',
     estimatedDays: 0,
@@ -46,6 +49,7 @@ const ConvertToOrders: FC = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const invoiceItemId = searchParams.get('invoiceItemId')
+    const productId = searchParams.get('productId')
     const multiUpload = useMultiUpload()
     const [attachmentFiles, setAttachmentFiles] = useState<File[]>([])
     const { data: categories } = useGetCategory()
@@ -56,7 +60,7 @@ const ConvertToOrders: FC = () => {
     const { mutate: converToOrder, isPending } = useConverToOrder()
 
     const formik = useFormik<ConvertToOrderItemType>({
-        initialValues: getInitialValues(invoiceItemId),
+        initialValues: getInitialValues(invoiceItemId, productId),
         validationSchema: getValidationSchema(invoiceItemId),
         enableReinitialize: true,
         onSubmit: async (values) => {
@@ -72,7 +76,7 @@ const ConvertToOrders: FC = () => {
             const payload: ConvertToOrderItemType = {
                 ...values,
                 invoiceItemId: invoiceItemId ?? values.invoiceItemId ?? '',
-                productId: invoiceItemId ? undefined : values.productId,
+                productId: values.productId || undefined,
                 userId: invoiceItemId ? undefined : values.userId,
                 estimatedDays: Number(values.estimatedDays),
                 description: values.description || undefined,