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

create base product

Browse Source
This commit is contained in:
hamid zarghami
2026-02-09 14:52:05 +03:30
parent 687fc1e6c2
commit ba5beae0f7
6 changed files with 247 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/product/Create.tsx
+21 -175
View File
@@ -3,14 +3,9 @@ import { useFormik } from 'formik'
import * as Yup from 'yup'
import { TickCircle } from 'iconsax-react'
import { toast } from 'react-toastify'
import Input from '@/components/Input'
import Select from '@/components/Select'
import Textarea from '@/components/Textarea'
import Button from '@/components/Button'
import { Checkbox } from '@/components/ui/checkbox'
import CreateProductSidebar from './components/CreateProductSidebar'
import WeekDaysSection from './components/WeekDaysSection'
import MealTimesSection from './components/MealTimesSection'
import BasicInfoSection from './components/BasicInfoSection'
import type { CreateProductType } from './types/Types'
import { useCreateProduct, useGetCategories } from './hooks/useProductData'
import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
@@ -35,42 +30,44 @@ const CreateProduct: FC = () => {
const formik = useFormik<CreateProductType>({
initialValues: {
title: '',
desc: '',
content: [],
categoryId: '',
title: '',
attribute: '',
variants: [],
desc: '',
price: 0,
discount: 0,
prepareTime: 0,
weekDays: [0, 1, 2, 3, 4, 5, 6],
mealTypes: ['breakfast', 'lunch', 'dinner'],
pickupServe: true,
inPlaceServe: true,
isActive: true,
images: [],
discount: 0,
isSpecialOffer: false,
dailyStock: 0,
order: 0
},
validationSchema: Yup.object().shape({
title: Yup.string().required('نام کالا الزامی است'),
categoryId: Yup.string().required('دسته‌بندی الزامی است'),
price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
prepareTime: Yup.number().required('زمان آماده‌سازی الزامی است').min(0, 'زمان آماده‌سازی باید مثبت باشد'),
discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
dailyStock: Yup.number().required('موجودی روزانه الزامی است').min(0, 'موجودی روزانه باید مثبت باشد'),
content: Yup.array().of(Yup.string()),
weekDays: Yup.array().of(Yup.number()),
mealTypes: Yup.array().of(Yup.string())
attribute: Yup.string(),
variants: Yup.array().of(
Yup.object().shape({
id: Yup.string(),
value: Yup.string(),
price: Yup.number().min(0)
})
)
}),
onSubmit: (values) => {
const submitProduct = (imageUrls: string[] = []) => {
const variants =
values.variants.length > 0
? values.variants
: [{ value: '', price: values.price }]
const productData: CreateProductType = {
...values,
variants,
isActive,
isSpecialOffer: isSpecial,
images: imageUrls,
content: values.content.filter(item => item && item.trim().length > 0)
images: imageUrls
}
createProduct(productData, {
@@ -123,158 +120,7 @@ const CreateProduct: FC = () => {
<div className='flex flex-col lg:flex-row gap-6 mt-6'>
<div className='flex-1'>
<div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
<Input
label='نام کالا'
name='title'
placeholder=''
value={formik.values.title}
onChange={formik.handleChange}
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
/>
<div className='mt-5'>
<Select
items={categories}
label='دسته بندی'
placeholder='انتخاب کنید'
name='categoryId'
value={formik.values.categoryId}
onChange={(e) => {
const value = e.target.value
formik.setFieldValue('categoryId', value)
}}
error_text={formik.touched.categoryId && formik.errors.categoryId ? String(formik.errors.categoryId) : ''}
/>
</div>
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5'>
<Input
name='price'
label='قیمت'
placeholder='تومان'
type='number'
seprator={true}
value={formik.values.price}
onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
/>
<Input
name='discount'
label='تخفیف'
placeholder='تومان'
type='number'
seprator={true}
value={formik.values.discount}
onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
/>
<Input
name='prepareTime'
label='زمان آماده سازی'
placeholder='دقیقه'
type='number'
value={formik.values.prepareTime}
onChange={(e) => formik.setFieldValue('prepareTime', Number(e.target.value))}
error_text={formik.touched.prepareTime && formik.errors.prepareTime ? formik.errors.prepareTime : ''}
/>
<Input
name='dailyStock'
label='موجودی روزانه'
placeholder='عدد'
type='number'
seprator={true}
value={formik.values.dailyStock}
onChange={(e) => formik.setFieldValue('dailyStock', Number(e.target.value))}
error_text={formik.touched.dailyStock && formik.errors.dailyStock ? formik.errors.dailyStock : ''}
/>
</div>
<div className='mt-5'>
<Textarea
name='desc'
label='توضیحات کالا'
placeholder=''
value={formik.values.desc}
onChange={formik.handleChange}
error_text={formik.touched.desc && formik.errors.desc ? formik.errors.desc : ''}
/>
</div>
<div className='mt-5'>
<Input
name='order'
label='اولویت'
placeholder='عدد'
type='number'
value={formik.values.order}
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
/>
</div>
<div className='mt-5'>
<div className='text-sm mb-2'>محتوای کالا</div>
<div className='space-y-2'>
{formik.values.content.map((item, index) => (
<div key={index} className='flex gap-2 items-center'>
<Input
placeholder='متن محتوا'
value={item}
onChange={(e) => {
const newContent = [...formik.values.content]
newContent[index] = e.target.value
formik.setFieldValue('content', newContent)
}}
/>
<Button
type='button'
className='px-3 bg-red-500 hover:bg-red-600 w-auto'
onClick={() => {
const newContent = formik.values.content.filter((_, i) => i !== index)
formik.setFieldValue('content', newContent)
}}
>
حذف
</Button>
</div>
))}
<Button
type='button'
className='w-full bg-gray-200 text-gray-700 hover:bg-gray-300'
onClick={() => {
formik.setFieldValue('content', [...formik.values.content, ''])
}}
>
افزودن محتوا
</Button>
</div>
</div>
<MealTimesSection formik={formik} />
<WeekDaysSection formik={formik} />
<div className='mt-6'>
<div className='text-sm mb-3'>گزینه‌های سرویس</div>
<div className='flex gap-6 flex-wrap'>
<div className='flex items-center gap-2'>
<Checkbox
checked={formik.values.pickupServe}
onCheckedChange={(checked) => formik.setFieldValue('pickupServe', checked)}
/>
<label className='text-xs cursor-pointer'> بیرون‌بر</label>
</div>
<div className='flex items-center gap-2'>
<Checkbox
checked={formik.values.inPlaceServe}
onCheckedChange={(checked) => formik.setFieldValue('inPlaceServe', checked)}
/>
<label className='text-xs cursor-pointer'>سرو در محل</label>
</div>
</div>
</div>
<BasicInfoSection formik={formik} categories={categories} />
</div>
</div>
src/pages/product/Update.tsx
+30 -37
View File
@@ -7,10 +7,6 @@ import { useNavigate, useParams } from 'react-router-dom'
import Button from '@/components/Button'
import CreateProductSidebar from './components/CreateProductSidebar'
import BasicInfoSection from './components/BasicInfoSection'
import ProductContentSection from './components/ProductContentSection'
import MealTimesSection from './components/MealTimesSection'
import WeekDaysSection from './components/WeekDaysSection'
import ServiceOptionsSection from './components/ServiceOptionsSection'
import type { CreateProductType } from './types/Types'
import { useUpdateProduct, useGetProductDetails, useGetCategories } from './hooks/useProductData'
import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
@@ -38,33 +34,31 @@ const UpdateProduct: FC = () => {
const formik = useFormik<CreateProductType>({
initialValues: {
title: '',
desc: '',
content: [],
categoryId: '',
title: '',
attribute: '',
variants: [],
desc: '',
price: 0,
discount: 0,
prepareTime: 0,
weekDays: [],
mealTypes: [],
pickupServe: false,
inPlaceServe: false,
isActive: true,
images: [],
discount: 0,
isSpecialOffer: false,
dailyStock: 0,
order: 0
},
validationSchema: Yup.object().shape({
title: Yup.string().required('نام کالا الزامی است'),
categoryId: Yup.string().required('دسته‌بندی الزامی است'),
price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
prepareTime: Yup.number().required('زمان آماده‌سازی الزامی است').min(0, 'زمان آماده‌سازی باید مثبت باشد'),
discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
dailyStock: Yup.number().required('موجودی روزانه الزامی است').min(0, 'موجودی روزانه باید مثبت باشد'),
content: Yup.array().of(Yup.string()),
weekDays: Yup.array().of(Yup.number()),
mealTypes: Yup.array().of(Yup.string())
attribute: Yup.string(),
variants: Yup.array().of(
Yup.object().shape({
id: Yup.string(),
value: Yup.string(),
price: Yup.number().min(0)
})
)
}),
onSubmit: (values) => {
if (!id) {
@@ -74,12 +68,16 @@ const UpdateProduct: FC = () => {
const submitProduct = (newImageUrls: string[] = []) => {
const allImages = [...values.images, ...newImageUrls]
const variants =
values.variants.length > 0
? values.variants
: [{ value: '', price: values.price }]
const productData: CreateProductType = {
...values,
variants,
isActive,
isSpecialOffer: isSpecial,
images: allImages,
content: values.content.filter(item => item && item.trim().length > 0)
images: allImages
}
updateProduct({ id, params: productData }, {
@@ -112,22 +110,17 @@ const UpdateProduct: FC = () => {
useEffect(() => {
if (product) {
formik.setValues({
title: product.title || '',
desc: product.desc || '',
content: product.content || [],
categoryId: product.category?.id || '',
title: product.title || '',
attribute: product.attribute || '',
variants: product.variants || [],
desc: product.desc || '',
price: product.price || 0,
discount: product.discount || 0,
prepareTime: product.prepareTime || 0,
weekDays: product.weekDays || [],
mealTypes: product.mealTypes || [],
pickupServe: product.pickupServe || false,
inPlaceServe: product.inPlaceServe || false,
isActive: product.isActive || false,
images: product.images || [],
discount: product.discount || 0,
isSpecialOffer: product.isSpecialOffer || false,
dailyStock: product.inventory?.totalStock || 0,
order: product.order || 0
order: product.order ?? 0
})
setIsActive(product.isActive || false)
setIsSpecial(product.isSpecialOffer || false)
@@ -180,11 +173,11 @@ const UpdateProduct: FC = () => {
<div className='flex flex-col lg:flex-row gap-6 mt-6'>
<div className='flex-1'>
<div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
<BasicInfoSection formik={formik} categories={categories} />
<ProductContentSection formik={formik} />
<MealTimesSection formik={formik} />
<WeekDaysSection formik={formik} />
<ServiceOptionsSection formik={formik} />
<BasicInfoSection
formik={formik}
categories={categories}
initialHasVariants={(product?.variants?.length ?? 0) > 0}
/>
</div>
</div>
src/pages/product/components/BasicInfoSection.tsx
+150 -38
View File
@@ -1,16 +1,59 @@
import { type FC } from 'react'
import { type FC, useState, useEffect } from 'react'
import type { FormikProps } from 'formik'
import Input from '@/components/Input'
import Select from '@/components/Select'
import Textarea from '@/components/Textarea'
import type { CreateProductType } from '../types/Types'
import Button from '@/components/Button'
import RadioGroup from '@/components/RadioGroup'
import type { CreateProductType, ProductVariant } from '../types/Types'
import { Add, Trash } from 'iconsax-react'
type BasicInfoSectionProps = {
formik: FormikProps<CreateProductType>
categories: Array<{ label: string; value: string }>
/** در صفحه ویرایش، اگر کالا تنوع دارد مقدار true پاس داده شود */
initialHasVariants?: boolean
}
const newVariant = (): ProductVariant => ({ value: '', price: 0 })
const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories, initialHasVariants }) => {
const [hasVariants, setHasVariants] = useState<boolean>(initialHasVariants ?? false)
useEffect(() => {
if (initialHasVariants !== undefined) {
setHasVariants(initialHasVariants)
}
}, [initialHasVariants])
const handleHasVariantsChange = (value: string | boolean) => {
const next = value === true
setHasVariants(next)
if (!next) {
formik.setFieldValue('variants', [])
formik.setFieldValue('attribute', '')
} else if (formik.values.variants.length === 0) {
formik.setFieldValue('variants', [newVariant()])
}
}
const addVariant = () => {
formik.setFieldValue('variants', [...formik.values.variants, newVariant()])
}
const updateVariant = (index: number, field: keyof ProductVariant, value: string | number) => {
const next = [...formik.values.variants]
next[index] = { ...next[index], [field]: value }
formik.setFieldValue('variants', next)
}
const removeVariant = (index: number) => {
formik.setFieldValue(
'variants',
formik.values.variants.filter((_, i) => i !== index)
)
}
const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) => {
return (
<>
<Input
@@ -37,50 +80,131 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
/>
</div>
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5'>
{/* بخش قیمت‌گذاری و تنوع */}
<div className='mt-6 p-5 sm:p-6 rounded-2xl border border-gray-200/80 bg-gray-50/50'>
<div className='text-sm font-medium text-gray-800 mb-1'>قیمت‌گذاری و تنوع</div>
<p className='text-xs text-gray-500 mb-4'>تعیین کنید کالا دارای تنوع (مثلاً رنگ، سایز) است یا یک قیمت ثابت دارد.</p>
<div className='mb-5'>
<label className='block text-sm text-gray-700 mb-2'>کالای شما دارای تنوع است؟</label>
<RadioGroup
items={[
{ label: 'خیر، فقط یک قیمت دارد', value: false },
{ label: 'بله، دارای تنوع است', value: true }
]}
selected={hasVariants}
onChange={handleHasVariantsChange}
/>
</div>
{!hasVariants ? (
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'>
<Input
name='price'
label='قیمت'
placeholder='تومان'
label='قیمت (تومان)'
placeholder='۰'
type='number'
seprator={true}
value={formik.values.price}
onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
/>
<Input
name='discount'
label='تخفیف'
placeholder='تومان'
label='تخفیف (تومان)'
placeholder='۰'
type='number'
seprator={true}
value={formik.values.discount}
onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
/>
<Input
name='prepareTime'
label='زمان آماده سازی'
placeholder='دقیقه'
type='number'
value={formik.values.prepareTime}
onChange={(e) => formik.setFieldValue('prepareTime', Number(e.target.value))}
error_text={formik.touched.prepareTime && formik.errors.prepareTime ? formik.errors.prepareTime : ''}
/>
<Input
name='dailyStock'
label='موجودی روزانه'
name='order'
label='اولویت'
placeholder='عدد'
type='number'
seprator={true}
value={formik.values.dailyStock}
onChange={(e) => formik.setFieldValue('dailyStock', Number(e.target.value))}
error_text={formik.touched.dailyStock && formik.errors.dailyStock ? formik.errors.dailyStock : ''}
value={formik.values.order}
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
/>
</div>
) : (
<div className='space-y-5'>
<Input
name='attribute'
label='نام ویژگی تنوع (مثلاً رنگ، سایز)'
placeholder='مثلاً رنگ، سایز'
value={formik.values.attribute}
onChange={formik.handleChange}
error_text={formik.touched.attribute && formik.errors.attribute ? formik.errors.attribute : ''}
/>
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<Input
name='discount'
label='تخفیف (تومان)'
placeholder='۰'
type='number'
seprator={true}
value={formik.values.discount}
onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
/>
<Input
name='order'
label='اولویت'
placeholder='عدد'
type='number'
value={formik.values.order}
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
/>
</div>
<div>
<label className='block text-sm font-medium text-gray-700 mb-2'>تنوع‌ها و قیمت هر کدام</label>
<div className='space-y-3'>
{formik.values.variants.map((v, index) => (
<div
key={index}
className='flex flex-nowrap gap-3 items-center p-3 rounded-xl border border-gray-200 bg-white shadow-sm'
>
<Input
placeholder='مقدار (مثلاً قرمز، M)'
value={v.value}
onChange={(e) => updateVariant(index, 'value', e.target.value)}
className='flex-1 min-w-0'
/>
<Input
placeholder='قیمت'
type='number'
seprator={true}
value={v.price}
onChange={(e) => updateVariant(index, 'price', Number(e.target.value))}
className='flex-1 min-w-0 shrink-0'
/>
<div className='min-w-5'>
<Trash
onClick={() => removeVariant(index)}
color='red' size={20} />
</div>
</div>
))}
</div>
<Button
type='button'
className='mt-3 w-fit px-5 !bg-white border border-dashed border-gray-300 text-gray-600 hover:!bg-gray-100 hover:border-gray-400'
onClick={addVariant}
>
<Add color='gray' className='size-5 ml-2 inline' />
افزودن تنوع
</Button>
</div>
</div>
)}
</div>
<div className='mt-5'>
<Textarea
@@ -92,18 +216,6 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
error_text={formik.touched.desc && formik.errors.desc ? formik.errors.desc : ''}
/>
</div>
<div className='mt-5'>
<Input
name='order'
label='اولویت'
placeholder='عدد'
type='number'
value={formik.values.order}
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
/>
</div>
</>
)
}
src/pages/product/components/ProductTableColumns.tsx
+5 -10
View File
@@ -1,7 +1,7 @@
import { Eye } from 'iconsax-react'
import type { ColumnType } from '@/components/types/TableTypes'
import type { Product } from '../types/Types'
import { formatPrice, formatTime } from '../utils/formatters'
import { formatPrice } from '../utils/formatters'
import Status from '@/components/Status'
import { Link } from 'react-router-dom'
import { Pages } from '@/config/Pages'
@@ -53,19 +53,14 @@ export const getProductTableColumns = ({ onDelete, isDeleting }: GetProductTable
return formatPrice(item.price)
}
},
{
key: 'prepareTime',
title: 'زمان آماده سازی',
render: (item: Product) => {
return formatTime(item.prepareTime || 0)
}
},
{
key: 'inventory',
title: 'موجودی',
render: (item: Product) => {
const availableStock = item.inventory.availableStock
const totalStock = item.inventory.totalStock
const inv = item.inventory
if (!inv) return '-'
const availableStock = inv.availableStock
const totalStock = inv.totalStock
return (
<div className='flex flex-col gap-1'>
<span className='text-sm'>
src/pages/product/service/ProductService.ts
+5 -5
View File
@@ -11,7 +11,7 @@ import type {
import type { FilterValues } from "@/components/Filters";
export const createProduct = async (params: CreateProductType) => {
const { data } = await axios.post(`/admin/foods`, params);
const { data } = await axios.post(`/admin/products`, params);
return data;
};
@@ -19,7 +19,7 @@ export const getProducts = async (
params?: GetProductsParams,
filters?: FilterValues,
): Promise<GetProductsResponseType> => {
const { data } = await axios.get<GetProductsResponseType>(`/admin/foods`, {
const { data } = await axios.get<GetProductsResponseType>(`/admin/products`, {
params: {
...params,
...filters,
@@ -32,13 +32,13 @@ export const getProductDetails = async (
id: string,
): Promise<GetProductDetailsResponseType> => {
const { data } = await axios.get<GetProductDetailsResponseType>(
`/admin/foods/${id}`,
`/admin/products/${id}`,
);
return data;
};
export const updateProduct = async (id: string, params: CreateProductType) => {
const { data } = await axios.patch(`/admin/foods/${id}`, params);
const { data } = await axios.patch(`/admin/products/${id}`, params);
return data;
};
@@ -50,7 +50,7 @@ export const getCategories = async (): Promise<GetCategoriesResponseType> => {
};
export const deleteProduct = async (id: string) => {
const { data } = await axios.delete(`/admin/foods/${id}`);
const { data } = await axios.delete(`/admin/products/${id}`);
return data;
};
src/pages/product/types/Types.ts
+19 -24
View File
@@ -1,21 +1,22 @@
import type { IResponse } from "@/types/response.types";
export type ProductVariant = {
id?: string;
value: string;
price: number;
};
export type CreateProductType = {
categoryId: string;
title: string;
attribute: string;
variants: ProductVariant[];
desc: string;
content: string[];
weekDays: number[];
mealTypes: string[];
price: number;
prepareTime: number;
isActive: boolean;
images: string[];
inPlaceServe: boolean;
pickupServe: boolean;
discount: number;
isSpecialOffer: boolean;
dailyStock: number;
order: number;
};
@@ -61,20 +62,16 @@ export type Product = {
deletedAt: string | null;
restaurant: string;
category: ProductDetailsCategory;
inventory: Inventory;
inventory?: Inventory;
title: string;
desc: string;
content: string[];
attribute?: string;
variants?: ProductVariant[];
price: number;
order: number | null;
prepareTime: number | null;
weekDays: number[];
mealTypes: string[];
isActive: boolean;
images: string[];
inPlaceServe: boolean;
pickupServe: boolean;
score: number;
score?: number;
discount: number;
isSpecialOffer: boolean;
};
@@ -96,20 +93,16 @@ export type ProductDetails = {
deletedAt: string | null;
restaurant: string;
category: ProductDetailsCategory;
inventory: Inventory;
inventory?: Inventory;
title: string;
desc: string;
content: string[];
attribute?: string;
variants?: ProductVariant[];
price: number;
order: number | null;
prepareTime: number;
weekDays: number[];
mealTypes: string[];
isActive: boolean;
images: string[];
inPlaceServe: boolean;
pickupServe: boolean;
score: number;
score?: number;
discount: number;
isSpecialOffer: boolean;
};
@@ -122,7 +115,9 @@ export type PaginationMeta = {
};
export type GetCategoriesResponseType = IResponse<Category[]>;
export type GetProductsResponseType = IResponse<Product[]> & { meta: PaginationMeta };
export type GetProductsResponseType = IResponse<Product[]> & {
meta: PaginationMeta;
};
export type GetProductDetailsResponseType = IResponse<ProductDetails>;
export type CreateCategoryType = {