Create order in admin

.env

@@ -1,3 +1,3 @@
-VITE_API_BASE_URL = 'http://10.24.161.1:4000'
+VITE_API_BASE_URL = 'http://192.168.99.221:4000'
 VITE_TOKEN_NAME = 'negareh_at'
 VITE_REFRESH_TOKEN_NAME = 'negareh_art'

src/components/Radio.tsx

@@ -0,0 +1,20 @@
+import { type FC } from 'react'
+
+type Props = {
+    isActive: boolean,
+    value: string,
+    onChange: (value: string) => void
+}
+
+const Radio: FC<Props> = (props: Props) => {
+    return (
+        <div onClick={() => props.onChange(props.value)} className='size-4 cursor-pointer rounded-full bg-[#EAEDF5] flex justify-center items-center'>
+            {
+                props.isActive &&
+                <div className='size-2 bg-black rounded-full'></div>
+            }
+        </div>
+    )
+}
+
+export default Radio

src/components/RadioGroup.tsx

@@ -0,0 +1,31 @@
+import { type FC } from 'react'
+import Radio from './Radio'
+
+
+type Props = {
+    items: {
+        label: string
+        value: string
+    }[]
+    selected: string
+    onChange: (value: string) => void
+}
+
+const RadioGroup: FC<Props> = (props: Props) => {
+    return (
+        <div className='flex xl:flex-nowrap flex-wrap gap-3 xl:gap-5 items-center text-xs'>
+            {
+                props.items.map((item, index) => (
+                    <div key={index} className='flex gap-2 items-center'>
+                        <Radio value={item.value} onChange={props.onChange} isActive={item.value === props.selected} />
+                        <div className='mt-0.5 whitespace-nowrap'>
+                            {item.label}
+                        </div>
+                    </div>
+                ))
+            }
+        </div>
+    )
+}
+
+export default RadioGroup

src/config/Paths.tsx

@@ -28,7 +28,8 @@ export const Paths = {
     },
     order: {
         list: '/order/list',
-        details: '/order/detail/'
+        details: '/order/detail/',
+        create: '/order/create'
     },
     features: {
         list: '/features/list',

src/pages/auth/Login.tsx

@@ -12,7 +12,7 @@ const Login: FC = () => {
 
     return (
         <div className='w-full h-full flex justify-center lg:py-[75px] py-4 lg:items-center lg:px-10 px-4'>
-            <div className='flex w-full max-h-[812px] max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
+            <div className='flex w-full max-h-[812px] max-w-[1200px] bg-[#f4f5f9] h-full rounded-3xl overflow-hidden'>
                 <div className='flex-1 min-w-[50%] overflow-y-auto  bg-white lg:px-9 px-4 py-7'>
                     <div className='flex-1 h-full flex flex-col'>
 

src/pages/order/NewOrder.tsx

@@ -0,0 +1,142 @@
+import { useState, type FC } from 'react'
+import Order from './components/Order'
+import Button from '@/components/Button'
+import { TickSquare } from 'iconsax-react'
+import { useOrderStore } from './store/OrderStore'
+import { useCreateOrder } 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'
+
+const NewOrder: FC = () => {
+
+    const navigate = useNavigate()
+    const { mutate: submitOrder, isPending } = useCreateOrder()
+    const { data: users } = useGetUsers()
+    const [showOrders, setShowOrders] = useState([0])
+    const { items } = 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(params, {
+                onSuccess: () => {
+                    toast('سفارش با موفقیت ثبت شد', 'success')
+                    navigate(Paths.order.list)
+                },
+                onError: (error) => {
+                    toast(extractErrorMessage(error), 'error')
+                }
+            })
+        } else {
+            toast('حداقل یک سفارش باید اضافه کنید.', 'error')
+        }
+    }
+
+
+    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
+                            }
+                        })}
+                        error_text={formik.errors.status && formik.touched.status ? formik.errors.status : ''}
+                    />
+                </div>
+
+            </div>
+
+            {showOrders.map((item) => {
+                return (
+                    <Order addNewItem={() => setShowOrders([...showOrders, showOrders.length])} key={item} />
+                )
+            })}
+
+        </div>
+    )
+}
+
+export default NewOrder

src/pages/order/components/ManageAttribute.tsx

@@ -0,0 +1,135 @@
+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 ManageAttribute: 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) => {
+                    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)}
+                                />
+                            </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) => {
+                                            const object = formik.values.attributes.find(o => o.attributeId === item.id)
+                                            return (
+                                                <div key={value.id} className='flex gap-2 items-center'>
+                                                    <div>{value.value}</div>
+                                                    <Checkbox
+                                                        name={item.id + ''}
+                                                        checked={object?.value === value.value}
+                                                        onCheckedChange={(checked) => handleChange(item.id, checked ? value.value : '')}
+                                                    />
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </div>
+                            </div>
+                        )
+                    else if (item.type === FieldTypeEnum.radio) {
+                        const object = formik.values.attributes.find(o => o.attributeId === item.id)
+                        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={object?.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}
+                                />
+                            </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)}
+                                />
+                            </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)}
+                                />
+                            </div>
+                        )
+
+                })
+            }
+        </div>
+    )
+}
+
+export default ManageAttribute

src/pages/order/components/Order.tsx

@@ -0,0 +1,208 @@
+import { useState, type ChangeEvent, 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 } 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 ManageAttribute from './ManageAttribute'
+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'
+
+type Props = {
+    addNewItem: () => void,
+}
+
+const Order: FC<Props> = ({ addNewItem }) => {
+
+    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: {
+            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 = (e: ChangeEvent<HTMLSelectElement>) => {
+        const productId = e.target.value
+        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)
+        }
+    }
+
+
+    return (
+        <div className='bg-white rounded-3xl p-6 mt-8'>
+            <div className='font-light'>اطلاعات  سفارش</div>
+
+            <div className='mt-6 rowTwoInput'>
+                <ProductsSelect
+                    onChange={handleChange}
+                    error_text={formik.touched.productId && formik.errors.productId ? formik.errors.productId : ''}
+                />
+            </div>
+
+            <div>
+                <ManageAttribute
+                    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='پیام صوتی'
+                    onRecordingComplete={(blob) => {
+                        const file = new File([blob], "recording.wav", { type: blob.type });
+                        setVoiceFile(file);
+                    }}
+                />
+            </div>
+
+
+            <div className='mt-6'>
+                <UploadBox
+                    label='آپلود فایل'
+                    isMultiple
+                    onChange={setFiles}
+                />
+            </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 Order

src/pages/order/components/ProductsSelect.tsx

@@ -0,0 +1,28 @@
+import { type FC, type SelectHTMLAttributes } from 'react'
+import { useGetProducts } from '../hooks/useOrderData'
+import Select from '@/components/Select'
+
+type Props = {
+    error_text?: string,
+} & SelectHTMLAttributes<HTMLSelectElement>
+
+const ProductsSelect: FC<Props> = (props) => {
+
+    const { data } = useGetProducts()
+
+    return (
+        <Select
+            items={data?.data?.map((item) => {
+                return {
+                    label: item.title,
+                    value: item.id + ''
+                }
+            }) || []}
+            label='محصول'
+            placeholder='انتخاب محصول'
+            {...props}
+        />
+    )
+}
+
+export default ProductsSelect

src/pages/order/hooks/useOrderData.ts

@@ -36,3 +36,24 @@ export const useAddTicket = () => {
     }) => api.addTicket(orderId, params),
   });
 };
+
+export const useCreateOrder = () => {
+  return useMutation({
+    mutationFn: api.submitOrder,
+  });
+};
+
+export const useGetProducts = () => {
+  return useQuery({
+    queryKey: ["products"],
+    queryFn: api.getProducts,
+  });
+};
+
+export const useGetAttributes = (id?: number) => {
+  return useQuery({
+    queryKey: ["attributes"],
+    queryFn: () => api.getAttributes(id),
+    enabled: !!id,
+  });
+};

src/pages/order/service/OrderService.ts

@@ -1,10 +1,15 @@
 import axios from "@/config/axios";
 import type {
   AddTicketType,
+  CreateFinalOrderType,
   OrderDetailResponseType,
   OrderResponseType,
   TicketsResponseType,
 } from "../types/Types";
+import type {
+  FieldResponseType,
+  ProductResponeType,
+} from "@/pages/product/types/Types";
 
 export const getOrders = async () => {
   const { data } = await axios.get<OrderResponseType>(`/admin/orders`);
@@ -32,3 +37,20 @@ export const addTicket = async (ticketId: string, params: AddTicketType) => {
   );
   return data;
 };
+
+export const submitOrder = async (params: CreateFinalOrderType) => {
+  const { data } = await axios.post(`/admin/orders`, params);
+  return data;
+};
+
+export const getProducts = async () => {
+  const { data } = await axios.get<ProductResponeType>(`/admin/products`);
+  return data;
+};
+
+export const getAttributes = async (productId?: number) => {
+  const { data } = await axios.get<FieldResponseType>(
+    `/admin/entity/${productId}/field`
+  );
+  return data;
+};

src/pages/order/store/OrderStore.ts

@@ -0,0 +1,9 @@
+import { create } from "zustand";
+import type { StoreType } from "../type/Types";
+
+export const useOrderStore = create<StoreType>((set) => ({
+  items: [],
+  setItems(value) {
+    set({ items: value });
+  },
+}));

src/pages/order/types/Types.ts

@@ -1,7 +1,10 @@
 import type { BaseResponse } from "@/shared/types/Types";
 import type { OrderStatusEnum } from "../enum/OrderEnum";
 import type { RowDataType } from "@/components/types/TableTypes";
-import type { ProductType } from "@/pages/product/types/Types";
+import type {
+  CreateBaseOrderType,
+  ProductType,
+} from "@/pages/product/types/Types";
 
 export interface OrderType extends RowDataType {
   id: string;
@@ -137,3 +140,27 @@ export type OrderItemType = {
 };
 export type TicketsResponseType = BaseResponse<TicketType[]>;
 export type OrderDetailResponseType = BaseResponse<MyOrderType>;
+
+export type StoreType = {
+  items: OrderType[];
+  setItems: (value: OrderType[]) => void;
+};
+
+export type ProductsResponseType = BaseResponse<ProductType[]>;
+
+export type CreateOrderType = {
+  productId?: number;
+  quantity?: number;
+  attributes: {
+    attributeId: number;
+    value: string | number;
+  }[];
+  attachments: AttachmentsType[];
+  description?: string;
+  unitPrice?: number;
+  discount?: number;
+};
+
+export interface CreateFinalOrderType extends CreateBaseOrderType {
+  items: CreateOrderType;
+}

src/pages/product/types/Types.ts

@@ -1,6 +1,7 @@
 import type { RowDataType } from "@/components/types/TableTypes";
 import { type BaseResponse } from "@/shared/types/Types";
 import type { FieldTypeEnum } from "../enum/Enum";
+import type { OrderStatusEnum } from "@/pages/order/enum/OrderEnum";
 
 export interface CategoryType extends RowDataType {
     avatarUrl: string | null;
@@ -86,3 +87,32 @@ export type AttributeValueType = {
 
 export type AttributeValuesResponseType = BaseResponse<AttributeValueType[]>;
 export type AttributeValueDetailResponseType = BaseResponse<AttributeValueType>;
+
+export type FieldValueType = {
+    attribute: number;
+    createdAt: string;
+    id: number;
+    order: number;
+    value: string;
+  };
+  
+  export type FieldType = {
+    createdAt: string;
+    id: number;
+    isRequired: boolean;
+    name: string;
+    order: number;
+    product: number;
+    type: FieldTypeEnum;
+    options: AttributeValueType[];
+  };
+
+export type FieldResponseType = BaseResponse<FieldType[]>;
+
+export type CreateBaseOrderType = {
+    userId: string,
+    paymentMethod: string,
+    enableTax: boolean,
+    estimatedDays: number,
+    status: OrderStatusEnum, 
+}

src/pages/user/hooks/useUserData.ts

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import * as api from "../service/UserService";
+
+export const useGetUsers = () => {
+  return useQuery({
+    queryKey: ["users"],
+    queryFn: api.getUsers,
+  });
+};

src/pages/user/service/UserService.ts

@@ -0,0 +1,7 @@
+import axios from "@/config/axios";
+import type { UsersResponseType } from "../types/Types";
+
+export const getUsers = async () => {
+  const { data } = await axios.get<UsersResponseType>(`/admin/users`);
+  return data;
+};

src/pages/user/types/Types.ts

@@ -0,0 +1,16 @@
+import type { BaseResponse } from "@/shared/types/Types";
+
+export type UserType = {
+  id: string;
+  firstName: string | null;
+  lastName: string | null;
+  phone: string;
+  gender: boolean;
+  addresse: string | null;
+  maxCredit: number;
+  isActive: boolean;
+  createdAt: string;
+  deletedAt: string | null;
+};
+
+export type UsersResponseType = BaseResponse<UserType[]>;

src/router/MainRouter.tsx

@@ -38,6 +38,7 @@ import FormBuilderCreate from '@/pages/formBuilder/Create'
 import FormBuilderUpdate from '@/pages/formBuilder/Update'
 import FormBuilderValues from '@/pages/formBuilder/AttributeValues'
 import OrderDetail from '@/pages/order/OrderDetail'
+import NewOrder from '@/pages/order/NewOrder'
 
 const MainRouter: FC = () => {
     return (
@@ -73,6 +74,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.features.list} element={<FeaturesList />} />
                             <Route path={Paths.features.create} element={<CreateFeature />} />