From 3d53661c9a2621901c860301c4cafb6d4be74805 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 1 Feb 2026 16:13:40 +0330
Subject: [PATCH] edit order

---
 .env                                          |   2 +-
 src/components/Select.tsx                     |   2 +-
 src/config/Paths.tsx                          |   3 +-
 src/pages/order/EditOrder.tsx                 | 182 ++++++++++++
 src/pages/order/List.tsx                      |   4 +-
 src/pages/order/NewOrder.tsx                  |   3 +-
 .../order/components/ManageAttributeEdit.tsx  | 138 +++++++++
 .../order/components/SingleOrderEdit.tsx      | 272 ++++++++++++++++++
 src/pages/order/hooks/useOrderData.ts         |  14 +-
 src/pages/order/service/OrderService.ts       |   8 +
 src/pages/order/store/OrderStore.ts           |   2 +-
 src/pages/order/types/Types.ts                |   9 +-
 src/router/MainRouter.tsx                     |   2 +
 13 files changed, 631 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/order/EditOrder.tsx
 create mode 100644 src/pages/order/components/ManageAttributeEdit.tsx
 create mode 100644 src/pages/order/components/SingleOrderEdit.tsx

diff --git a/.env b/.env
index 5b59c6a..71a052a 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
-VITE_API_BASE_URL = 'http://192.168.99.221:4000'
+VITE_API_BASE_URL = 'http://192.168.99.220:4000'
 VITE_TOKEN_NAME = 'negareh_at'
 VITE_REFRESH_TOKEN_NAME = 'negareh_art'
\ No newline at end of file
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 0dc8874..d535fbd 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -3,7 +3,7 @@ import { clx } from '../helpers/utils'
 import { ArrowDown2 } from 'iconsax-react'
 
 export type ItemsSelectType = {
-    value: string,
+    value: string | number,
     label: string,
 }
 type Props = {
diff --git a/src/config/Paths.tsx b/src/config/Paths.tsx
index 56cba94..5f6d05d 100644
--- a/src/config/Paths.tsx
+++ b/src/config/Paths.tsx
@@ -29,7 +29,8 @@ export const Paths = {
     order: {
         list: '/order/list',
         details: '/order/detail/',
-        create: '/order/create'
+        create: '/order/create',
+        edit: '/order/edit/'
     },
     features: {
         list: '/features/list',
diff --git a/src/pages/order/EditOrder.tsx b/src/pages/order/EditOrder.tsx
new file mode 100644
index 0000000..1cb9834
--- /dev/null
+++ b/src/pages/order/EditOrder.tsx
@@ -0,0 +1,182 @@
+import { useEffect, useState, type FC } from 'react'
+import Button from '@/components/Button'
+import { TickSquare } from 'iconsax-react'
+import { useOrderStore } from './store/OrderStore'
+import { useGetOrderDetails, useUpdateOrder } from './hooks/useOrderData'
+import { toast } from '@/shared/toast'
+import { useNavigate } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
+import { extractErrorMessage } from '@/config/func'
+import { useFormik } from 'formik'
+import type { CreateBaseOrderType } from '../product/types/Types'
+import { OrderStatusEnum } from './enum/OrderEnum'
+import * as Yup from 'yup'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import { useGetUsers } from '../user/hooks/useUserData'
+import { useParams } from 'react-router-dom'
+import EditOrderComponent from './components/SingleOrderEdit'
+import type { CreateOrderType } from './types/Types'
+
+const EditOrder: FC = () => {
+
+    const { id } = useParams()
+    const { data } = useGetOrderDetails(id!)
+    const navigate = useNavigate()
+    const { mutate: submitOrder, isPending } = useUpdateOrder()
+    const { data: users } = useGetUsers()
+    const [showOrders, setShowOrders] = useState([0])
+    const { items, setItems } = useOrderStore()
+
+    const formik = useFormik<CreateBaseOrderType>({
+        initialValues: {
+            enableTax: true,
+            estimatedDays: 0,
+            paymentMethod: '',
+            status: OrderStatusEnum.CREATED,
+            userId: '',
+        },
+        validationSchema: Yup.object({
+            userId: Yup.string().required('این فیلد اجباری می باشد.'),
+            estimatedDays: Yup.number().required('این فیلد اجباری می باشد.'),
+            paymentMethod: Yup.string().required('این فیلد اجباری می باشد.'),
+        }),
+        onSubmit: (values) => {
+            values.estimatedDays = Number(values.estimatedDays)
+            onSubmit(values)
+        }
+    })
+
+    const onSubmit = (values: CreateBaseOrderType) => {
+        if (items.length > 0) {
+            const params = {
+                ...values,
+                items: items
+            }
+            submitOrder({ orderId: id!, params }, {
+                onSuccess: () => {
+                    toast('سفارش با موفقیت ویرایش شد', 'success')
+                    navigate(Paths.order.list)
+                },
+                onError: (error) => {
+                    toast(extractErrorMessage(error), 'error')
+                }
+            })
+        } else {
+            toast('حداقل یک سفارش باید اضافه کنید.', 'error')
+        }
+    }
+
+    useEffect(() => {
+        if (data && data?.data) {
+            formik.setValues({
+                enableTax: data?.data?.enableTax,
+                estimatedDays: data?.data?.estimatedDays as number,
+                paymentMethod: data?.data?.paymentMethod,
+                status: data?.data?.status as OrderStatusEnum,
+                userId: data?.data?.user.id,
+            })
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data])
+
+    useEffect(() => {
+        if (data && data?.data) {
+
+            const items: CreateOrderType[] = []
+            data?.data?.items.map((item) => {
+                items.push({
+                    id: item.id,
+                    productId: item.product.id,
+                    quantity: item.quantity,
+                    attributes: item.attributes,
+                    attachments: item.attachments,
+                    discount: item.discount,
+                    unitPrice: item.unitPrice,
+                    description: item.description,
+                })
+            })
+            setItems(items)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data])
+
+
+
+    return (
+        <div className='mt-5'>
+            <div className='justify-between items-center flex'>
+                <h1 className='text-lg font-light'>
+                    سفارش جدید
+                </h1>
+                <Button
+                    className='w-fit px-5'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={isPending}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <TickSquare size={20} color='black' />
+                        <div>ثبت نهایی سفارش</div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='bg-white rounded-3xl p-6 mt-8'>
+                <div className='font-light'>اطلاعات  اولیه</div>
+
+                <div className='rowTwoInput mt-6'>
+                    <Input
+                        label='تخمین روز'
+                        {...formik.getFieldProps('estimatedDays')}
+                        error_text={formik.errors.estimatedDays && formik.touched.estimatedDays ? formik.errors.estimatedDays : ''}
+                    />
+
+                    <Input
+                        label='نوع پرداخت'
+                        {...formik.getFieldProps('paymentMethod')}
+                        error_text={formik.errors.paymentMethod && formik.touched.paymentMethod ? formik.errors.paymentMethod : ''}
+                    />
+                </div>
+
+                <div className='rowTwoInput mt-6'>
+
+                    <Select
+                        items={users?.data?.map((item) => {
+                            return {
+                                label: item.firstName ? item.firstName + ' ' + item.lastName : item.phone,
+                                value: item.id
+                            }
+                        }) || []}
+                        label='انتخاب کاربر'
+                        placeholder='انتخاب'
+                        {...formik.getFieldProps('userId')}
+                        error_text={formik.errors.userId && formik.touched.userId ? formik.errors.userId : ''}
+                    />
+
+                    <Select
+                        label='وضعیت سفارش'
+                        placeholder='انتخاب'
+                        items={Object.values(OrderStatusEnum).map((item) => {
+                            return {
+                                label: item,
+                                value: item
+                            }
+                        })}
+                        {...formik.getFieldProps('status')}
+                        error_text={formik.errors.status && formik.touched.status ? formik.errors.status : ''}
+                    />
+                </div>
+
+            </div>
+
+            {items.map((item) => {
+                return (
+                    <EditOrderComponent addNewItem={() => setShowOrders([...showOrders, showOrders.length])} key={item.productId} initialValues={item} />
+                )
+            })}
+
+        </div>
+    )
+}
+
+export default EditOrder
\ No newline at end of file
diff --git a/src/pages/order/List.tsx b/src/pages/order/List.tsx
index 20b3b52..8d7b323 100644
--- a/src/pages/order/List.tsx
+++ b/src/pages/order/List.tsx
@@ -104,7 +104,9 @@ const OrdersList: FC = () => {
                                         >
                                             <Eye size={20} color='#8C90A3' />
                                         </Link>
-                                        <Edit2 size={20} color='#0037FF' />
+                                        <Link to={Paths.order.edit + item.id}>
+                                            <Edit2 size={20} color='#0037FF' />
+                                        </Link>
                                         <Receipt21 size={20} color='#FF8000' />
                                         <Setting2 size={20} color='#00B89F' />
                                     </div>
diff --git a/src/pages/order/NewOrder.tsx b/src/pages/order/NewOrder.tsx
index 07c343e..a4d377e 100644
--- a/src/pages/order/NewOrder.tsx
+++ b/src/pages/order/NewOrder.tsx
@@ -15,6 +15,7 @@ import * as Yup from 'yup'
 import Input from '@/components/Input'
 import Select from '@/components/Select'
 import { useGetUsers } from '../user/hooks/useUserData'
+import type { CreateFinalOrderType } from './types/Types'
 
 const NewOrder: FC = () => {
 
@@ -45,7 +46,7 @@ const NewOrder: FC = () => {
 
     const onSubmit = (values: CreateBaseOrderType) => {
         if (items.length > 0) {
-            const params = {
+            const params: CreateFinalOrderType = {
                 ...values,
                 items: items
             }
diff --git a/src/pages/order/components/ManageAttributeEdit.tsx b/src/pages/order/components/ManageAttributeEdit.tsx
new file mode 100644
index 0000000..d5abc93
--- /dev/null
+++ b/src/pages/order/components/ManageAttributeEdit.tsx
@@ -0,0 +1,138 @@
+import { type FC } from 'react'
+import type { CreateOrderType } from '../types/Types'
+import { clx } from '@/helpers/utils'
+import Select from '@/components/Select'
+import { Checkbox } from '@/components/ui/checkbox'
+import RadioGroup from '@/components/RadioGroup'
+import DatePickerComponent from '@/components/DatePicker'
+import Input from '@/components/Input'
+import Textarea from '@/components/Textarea'
+import type { FormikProps } from 'formik'
+import { FieldTypeEnum } from '@/pages/product/enum/Enum'
+import type { FieldType } from '@/pages/product/types/Types'
+
+type Props = {
+    attributes?: FieldType[],
+    formik: FormikProps<CreateOrderType>,
+}
+
+const ManageAttributeEdit: FC<Props> = (props) => {
+
+    const { attributes, formik } = props
+
+    const handleChange = (attributeId: number, value: string) => {
+        const attribute = formik.values.attributes
+        const index: number = attribute.findIndex(o => o.attributeId === attributeId)
+        if (index > -1) {
+            attribute[index].value = value
+        } else {
+            attribute.push({ attributeId: attributeId, value: value })
+        }
+        formik.setFieldValue('attributes', attribute)
+    }
+
+
+    return (
+        <div className={clx(
+            !attributes && 'hidden'
+        )}>
+            {
+                attributes?.map((item) => {
+                    const value = formik.values.attributes.find(o => Number(o.attributeId) === Number(item.id))
+                    if (item?.type === FieldTypeEnum.select)
+                        return (
+                            <div className='mt-6' key={item.id}>
+                                <Select
+                                    placeholder={`انتخاب ${item.isRequired ? '(اجباری)' : '(اختاری)'}`}
+                                    label={item.name}
+                                    items={item.options?.map((value) => {
+                                        return {
+                                            label: value.value,
+                                            value: value.value
+                                        }
+                                    })}
+                                    onChange={(e) => handleChange(item.id, e.target.value)}
+                                    value={value?.value}
+                                />
+                            </div>
+                        )
+                    else if (item.type === FieldTypeEnum.checkbox)
+                        return (
+                            <div key={item.id} className='mt-6'>
+                                <div className='text-sm mb-3'>{item.name}</div>
+                                <div className='flex gap-5 flex-wrap'>
+                                    {
+                                        item.options?.map((value) => {
+                                            return (
+                                                <div key={value.id} className='flex gap-2 items-center'>
+                                                    <div>{value.value}</div>
+                                                    <Checkbox
+                                                        name={item.id + ''}
+                                                        checked={value?.value === value.value}
+                                                        onCheckedChange={(checked) => handleChange(item.id, checked ? value.value : '')}
+                                                    />
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </div>
+                            </div>
+                        )
+                    else if (item.type === FieldTypeEnum.radio) {
+                        return (
+                            <div key={item.id} className='mt-6'>
+                                <div className='text-sm mb-3'>{item.name}</div>
+                                <RadioGroup
+                                    items={item.options?.map((value) => {
+                                        return {
+                                            label: value.value,
+                                            value: value.value
+                                        }
+                                    })}
+                                    onChange={(v) => handleChange(item.id, v)}
+                                    selected={value?.value + '' || ''}
+                                />
+                            </div>
+                        )
+                    }
+
+                    else if (item.type === FieldTypeEnum.date)
+                        return (
+                            <div key={item.id} className='mt-6'>
+                                <DatePickerComponent
+                                    onChange={(date) => handleChange(item.id, date)}
+                                    placeholder=''
+                                    label={item.name}
+                                    defaultValue={value?.value.toString()}
+                                />
+                            </div>
+                        )
+                    else if (item.type === FieldTypeEnum.number || item.type === FieldTypeEnum.text)
+                        return (
+                            <div key={item.id} className='mt-6'>
+                                <Input
+                                    label={item.name}
+                                    type={item.type}
+                                    onChange={(e) => handleChange(item.id, e.target.value)}
+                                    value={value?.value}
+                                />
+                            </div>
+                        )
+                    else if (item.type === FieldTypeEnum.textarea)
+                        return (
+                            <div key={item.id} className='mt-6'>
+                                <Textarea
+                                    label={item.name}
+                                    onChange={(e) => handleChange(item.id, e.target.value)}
+                                    value={value?.value}
+                                />
+                            </div>
+                        )
+
+                })
+            }
+        </div>
+    )
+}
+
+export default ManageAttributeEdit
\ No newline at end of file
diff --git a/src/pages/order/components/SingleOrderEdit.tsx b/src/pages/order/components/SingleOrderEdit.tsx
new file mode 100644
index 0000000..ce4fd69
--- /dev/null
+++ b/src/pages/order/components/SingleOrderEdit.tsx
@@ -0,0 +1,272 @@
+import { useEffect, useState, type FC } from 'react'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import UploadBox from '@/components/UploadBox'
+import VoiceRecorder from '@/components/VoiceRecorder'
+import { COLORS } from '@/constants/colors'
+import { AddSquare, Edit, Link } from 'iconsax-react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import type { AttachmentsType, CreateOrderType } from '../types/Types'
+import { useGetAttributes, useGetProducts } from '../hooks/useOrderData'
+import { useMultiUpload, useSingleUpload } from '@/pages/uploader/hooks/useUploader'
+import { useOrderStore } from '../store/OrderStore'
+import { clx } from '@/helpers/utils'
+import ProductsSelect from './ProductsSelect'
+import type { ProductType } from '@/pages/product/types/Types'
+import VoicePlayer from '@/components/VoicePlayer'
+import { getFileNameAndExtensionFromUrl } from '@/config/func'
+import ManageAttributeEdit from './ManageAttributeEdit'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+
+type Props = {
+    addNewItem: () => void,
+    initialValues: CreateOrderType
+}
+
+const EditOrder: FC<Props> = ({ addNewItem, initialValues }) => {
+
+    const { data } = useGetProducts()
+    const { setItems, items } = useOrderStore()
+    const [indexOrder, setIndexOrder] = useState<number>(-1)
+    const [isEditMode, setIsEditMode] = useState<boolean>(false)
+    const [productSelected, setProductSelected] = useState<ProductType>()
+    const [voiceFile, setVoiceFile] = useState<File>()
+    const [files, setFiles] = useState<File[]>([])
+    const { data: attributes } = useGetAttributes(productSelected?.id)
+    const singleUpload = useSingleUpload()
+    const multiUpload = useMultiUpload()
+
+    const formik = useFormik<CreateOrderType>({
+        initialValues: initialValues || {
+            productId: undefined,
+            attachments: [],
+            quantity: undefined,
+            description: '',
+            attributes: [],
+            discount: undefined,
+            unitPrice: undefined,
+        },
+        validationSchema: Yup.object({
+            productId: Yup.number().required('این فیلد اجباری می باشد'),
+            quantity: Yup.number().required('این فیلد اجباری می باشد'),
+            unitPrice: Yup.number().required('این فیلد اجباری می باشد'),
+        }),
+        onSubmit: async (values) => {
+            const attachments: AttachmentsType[] = []
+            if (files.length) {
+                await multiUpload.mutateAsync(files, {
+                    onSuccess: (data) => {
+                        data?.data?.map((item) => {
+                            attachments.push({
+                                type: 'uploads_attach',
+                                url: item.url
+                            })
+                        })
+                    }
+                })
+            }
+            if (voiceFile) {
+                await singleUpload.mutateAsync(voiceFile, {
+                    onSuccess: (data) => {
+                        attachments.push({
+                            type: 'voice',
+                            url: data?.data?.url
+                        })
+                    }
+                })
+            }
+            if (indexOrder === -1) {
+                values.attachments = attachments
+                setIndexOrder(items.length)
+                setItems([...items, values])
+                addNewItem()
+                setIsEditMode(true)
+            } else {
+                if (values.attachments.length) {
+                    values.attachments = [...values.attachments, ...attachments]
+
+                }
+                const items_edit = [...items]
+                items_edit[indexOrder] = values
+                setItems(items_edit)
+            }
+        }
+    })
+
+    const handleChange = (id: number) => {
+        const productId = id
+        const product = data?.data?.find(o => Number(o.id) === Number(productId))
+        if (product) {
+            if (product.quantities[0] !== 0) {
+                product.quantities.unshift(0)
+            }
+            setProductSelected(product)
+            formik.setFieldValue('productId', productId)
+        }
+    }
+
+    useEffect(() => {
+        if (data?.data) {
+            handleChange(initialValues.productId!)
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialValues, data])
+
+    const handleDeleteAttachment = (url: string) => {
+        const attachments = [...formik.values.attachments]
+        const index = attachments.findIndex(o => o.url === url)
+        if (index > -1) {
+            attachments.splice(index, 1)
+            formik.setFieldValue('attachments', attachments)
+        }
+    }
+
+
+
+
+    return (
+        <div className='bg-white rounded-3xl p-6 mt-8'>
+            <div className='font-light'>اطلاعات  سفارش</div>
+
+            <div className='mt-6 rowTwoInput'>
+                <ProductsSelect
+                    {...formik.getFieldProps('productId')}
+                    onChange={(e) => handleChange(Number(e.target.value))}
+                    error_text={formik.touched.productId && formik.errors.productId ? formik.errors.productId : ''}
+                />
+            </div>
+
+            <div>
+                <ManageAttributeEdit
+                    attributes={attributes?.data}
+                    formik={formik}
+                />
+            </div>
+
+            <div className='mt-6 rowTwoInput'>
+                <Select
+                    items={productSelected?.quantities?.map((item) => {
+                        return {
+                            label: item === 0 ? 'انتخاب دلخواه' : item + '',
+                            value: item
+                        }
+                    }) || []}
+                    label='تعداد'
+                    placeholder='انتخاب'
+                    {...formik.getFieldProps('quantity')}
+                    error_text={formik.touched.quantity && formik.errors.quantity ? formik.errors.quantity : ''}
+                />
+
+                <Input
+                    label='تعداد دلخواه'
+                    readOnly={Number(formik.values.quantity) !== 0}
+                    {...formik.getFieldProps('quantity')}
+                    type='number'
+                    error_text={formik.touched.quantity && formik.errors.quantity ? formik.errors.quantity : ''}
+
+                />
+            </div>
+
+            <div className='rowTwoInput mt-6'>
+                <Input
+                    {...formik.getFieldProps('unitPrice')}
+                    label='مبلغ واحد'
+                    error_text={formik.touched.unitPrice && formik.errors.unitPrice ? formik.errors.unitPrice : ''}
+                />
+
+                <Input
+                    {...formik.getFieldProps('discount')}
+                    label='مبلغ تخفیف به تومان'
+                />
+            </div>
+
+            <div className='mt-6'>
+                <VoiceRecorder
+                    onChange={(value) => formik.setFieldValue('description', value)}
+                    label='پیام صوتی'
+                    value={formik.values.description}
+                    onRecordingComplete={(blob) => {
+                        const file = new File([blob], "recording.wav", { type: blob.type });
+                        setVoiceFile(file);
+                    }}
+                />
+            </div>
+
+            <div className='mt-5 text-sm'>پیغام صوتی</div>
+            {
+                formik.values.attachments?.map((row) => {
+                    if (row.type === 'voice')
+                        return (
+                            <VoicePlayer
+                                key={row.url}
+                                url={row.url}
+                            />
+                        )
+                })
+            }
+
+
+            <div className='mt-6'>
+                <UploadBox
+                    label='آپلود فایل'
+                    isMultiple
+                    onChange={setFiles}
+                />
+            </div>
+
+            <div>
+                <div className='mt-5 text-sm'>پیوست ها</div>
+                <div className='flex flex-wrap gap-4'>
+                    {
+                        formik.values.attachments?.map((row) => {
+                            if (row.type !== 'voice')
+                                return (
+                                    <div key={row.url} className='flex mt-2 px-2 py-2 rounded-lg items-center gap-2 text-xs text-[#0037FF] border border-[#0037FF]'>
+                                        <Link size={16} color='#0037FF' />
+                                        <div>
+                                            {getFileNameAndExtensionFromUrl(row.url).fileName}
+                                        </div>
+
+                                        <div className='w-9 flex justify-end'>
+                                            <TrashWithConfrim
+                                                colorIcon='red'
+                                                onDelete={() => handleDeleteAttachment(row.url)}
+                                            />
+                                        </div>
+                                    </div>
+                                )
+                        })
+                    }
+                </div>
+            </div>
+
+            <div className='mt-6 flex justify-end'>
+                <Button
+                    className={clx(
+                        'bg-transparent border border-primary text-primary w-fit px-6',
+                        isEditMode && 'bg-transparent border-[#3B82F6] text-[#3B82F6] '
+                    )}
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={singleUpload.isPending || multiUpload.isPending}
+                >
+                    <div className='flex gap-1'>
+                        {
+                            isEditMode ?
+                                <Edit color='#3B82F6' size={20} />
+                                :
+                                <AddSquare color={COLORS.primary} size={20} />
+                        }
+                        <div>
+                            {isEditMode ? 'ویرایش کردن' : 'اضافه کردن'}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default EditOrder
\ No newline at end of file
diff --git a/src/pages/order/hooks/useOrderData.ts b/src/pages/order/hooks/useOrderData.ts
index ceb1387..d7b30c7 100644
--- a/src/pages/order/hooks/useOrderData.ts
+++ b/src/pages/order/hooks/useOrderData.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/OrderService";
-import type { AddTicketType } from "../types/Types";
+import type { AddTicketType, CreateFinalOrderType } from "../types/Types";
 
 export const useGetOrders = () => {
   return useQuery({
@@ -43,6 +43,18 @@ export const useCreateOrder = () => {
   });
 };
 
+export const useUpdateOrder = () => {
+  return useMutation({
+    mutationFn: ({
+      orderId,
+      params,
+    }: {
+      orderId: string;
+      params: CreateFinalOrderType;
+    }) => api.updateOrder(orderId, params),
+  });
+};
+
 export const useGetProducts = () => {
   return useQuery({
     queryKey: ["products"],
diff --git a/src/pages/order/service/OrderService.ts b/src/pages/order/service/OrderService.ts
index 3e3343b..ac5f8ae 100644
--- a/src/pages/order/service/OrderService.ts
+++ b/src/pages/order/service/OrderService.ts
@@ -43,6 +43,14 @@ export const submitOrder = async (params: CreateFinalOrderType) => {
   return data;
 };
 
+export const updateOrder = async (
+  orderId: string,
+  params: CreateFinalOrderType
+) => {
+  const { data } = await axios.patch(`/admin/orders/${orderId}`, params);
+  return data;
+};
+
 export const getProducts = async () => {
   const { data } = await axios.get<ProductResponeType>(`/admin/products`);
   return data;
diff --git a/src/pages/order/store/OrderStore.ts b/src/pages/order/store/OrderStore.ts
index d9236ac..8ccff97 100644
--- a/src/pages/order/store/OrderStore.ts
+++ b/src/pages/order/store/OrderStore.ts
@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import type { StoreType } from "../type/Types";
+import type { StoreType } from "../types/Types";
 
 export const useOrderStore = create<StoreType>((set) => ({
   items: [],
diff --git a/src/pages/order/types/Types.ts b/src/pages/order/types/Types.ts
index 490edce..a5f0adb 100644
--- a/src/pages/order/types/Types.ts
+++ b/src/pages/order/types/Types.ts
@@ -118,6 +118,7 @@ export interface MyOrderType extends RowDataType {
   taxAmount: number;
   total: number;
   items: OrderItemType[];
+  user: UserType;
 }
 
 export type OrderItemType = {
@@ -137,18 +138,20 @@ export type OrderItemType = {
     attributeId: number;
     value: string;
   }[];
+  discount: number;
 };
 export type TicketsResponseType = BaseResponse<TicketType[]>;
 export type OrderDetailResponseType = BaseResponse<MyOrderType>;
 
 export type StoreType = {
-  items: OrderType[];
-  setItems: (value: OrderType[]) => void;
+  items: CreateOrderType[];
+  setItems: (value: CreateOrderType[]) => void;
 };
 
 export type ProductsResponseType = BaseResponse<ProductType[]>;
 
 export type CreateOrderType = {
+  id?: number;
   productId?: number;
   quantity?: number;
   attributes: {
@@ -162,5 +165,5 @@ export type CreateOrderType = {
 };
 
 export interface CreateFinalOrderType extends CreateBaseOrderType {
-  items: CreateOrderType;
+  items: CreateOrderType[];
 }
diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx
index f6c09f8..67c8c70 100644
--- a/src/router/MainRouter.tsx
+++ b/src/router/MainRouter.tsx
@@ -39,6 +39,7 @@ import FormBuilderUpdate from '@/pages/formBuilder/Update'
 import FormBuilderValues from '@/pages/formBuilder/AttributeValues'
 import OrderDetail from '@/pages/order/OrderDetail'
 import NewOrder from '@/pages/order/NewOrder'
+import EditOrder from '@/pages/order/EditOrder'
 
 const MainRouter: FC = () => {
     return (
@@ -75,6 +76,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.order.list} element={<OrdersList />} />
                             <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.features.list} element={<FeaturesList />} />
                             <Route path={Paths.features.create} element={<CreateFeature />} />