danak/negareh-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create order in admin

Browse Source
This commit is contained in:
hamid zarghami
2026-02-01 10:02:45 +03:30
parent 2ced4666c8
commit 5c536667b1
18 changed files with 712 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+1 -1
View File
@@ -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
+20
View File
@@ -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
+31
View File
@@ -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
+2 -1
View File
@@ -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
+1 -1
View File
@@ -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
+142
View File
@@ -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
+135
View File
@@ -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
+208
View File
@@ -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
+28
View File
@@ -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
+21
View File
@@ -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
+22
View File
@@ -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
+9
View File
@@ -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
+28 -1
View File
@@ -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
+30
View File
@@ -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
+9
View File
@@ -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
+7
View File
@@ -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
+16
View File
@@ -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
+2
View File
@@ -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 />} />