create category

src/config/func.ts

@@ -45,3 +45,23 @@ export const NumberFormat = (num?: number): string => {
   if (!num) return "0";
   return num.toLocaleString("fa-IR");
 };
+
+export interface IGeneralError {
+  status: number;
+  success: boolean;
+  error: {
+    message: string[];
+  };
+}
+
+export const extractErrorMessage = (
+  error: Error | unknown,
+  fallbackMessage: string = "خطایی رخ داده است",
+): string => {
+  try {
+    const axiosError = error as { response?: { data: IGeneralError } };
+    return axiosError?.response?.data?.error?.message?.[0] || fallbackMessage;
+  } catch {
+    return fallbackMessage;
+  }
+};

src/pages/product/category/Create.tsx

@@ -1,9 +1,124 @@
-import { type FC } from 'react'
+import Input from '@/components/Input'
+import { useFormik } from 'formik'
+import { useState, type FC } from 'react'
+import type { CreateCategoryType } from '../types/Types'
+import * as Yup from 'yup'
+import { useCreateCategory, useGetCategory } from '../hooks/useProductData'
+import Select from '@/components/Select'
+import Button from '@/components/Button'
+import { AddSquare } from 'iconsax-react'
+import UploadBox from '@/components/UploadBox'
+import SwitchComponent from '@/components/Switch'
+import { useSingleUpload } from '@/pages/uploader/hooks/useUploader'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
 
 const ProductCategory: FC = () => {
+
+    const { data } = useGetCategory()
+    const { mutate, isPending } = useCreateCategory()
+    const { mutate: upload, isPending: isUploading } = useSingleUpload()
+
+
+    const [file, setFile] = useState<File>()
+
+    const handleSave = (values: CreateCategoryType) => {
+        mutate(values, {
+            onSuccess: () => {
+                toast.success('با موفقیت ذخیره شد')
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            }
+        })
+    }
+
+    const formik = useFormik<CreateCategoryType>({
+        initialValues: {
+            title: '',
+            parentId: undefined,
+            order: 0,
+            isActive: true,
+            avatarUrl: undefined,
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required('این فیلد اجباری است.'),
+        }),
+        onSubmit: (values) => {
+            if (file) {
+                upload(file, {
+                    onSuccess: (data) => {
+                        values.avatarUrl = data?.data?.url
+                        handleSave(values)
+                    }
+                })
+            } else {
+                handleSave(values)
+            }
+        }
+    })
+
     return (
         <div className='mt-5'>
-            <h1 className='text-lg font-light'>دسته بندی محصولات</h1>
+            <div className='flex justify-between items-center'>
+
+                <h1 className='text-lg font-light'>دسته جدید</h1>
+                <Button
+                    className='w-fit px-6'
+                    isLoading={isPending || isUploading}
+                    onClick={() => formik.handleSubmit()}
+                >
+                    <div className='flex gap-1.5'>
+                        <AddSquare size={18} color='black' />
+                        <div className='text-[13px] font-light'>ساخت دسته</div>
+                    </div>
+                </Button>
+            </div>
+            <div className='mt-8 bg-white p-6 rounded-3xl '>
+
+                <div>
+                    <UploadBox
+                        label='تصویر دسته (اختیاری)'
+                        onChange={(files) => setFile(files[0])}
+                    />
+                </div>
+
+                <div className='rowTwoInput mt-6'>
+                    <Input
+                        label='عنوان'
+                        {...formik.getFieldProps('title')}
+                        error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                    />
+
+                    <Select
+                        label='انتخاب والد درسته'
+                        placeholder='اختیاری'
+                        items={data?.data?.map((item) => {
+                            return {
+                                label: item.title,
+                                value: item.id
+                            }
+                        }) || []}
+                        onChange={formik.handleChange}
+                        name='parentId'
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <Input
+                        label='ترتیب اولویت'
+                        {...formik.getFieldProps('order')}
+                        type='number'
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <SwitchComponent
+                        active={formik.values.isActive}
+                        onChange={(value) => formik.setFieldValue('isActive', value)}
+                    />
+                </div>
+            </div>
         </div>
     )
 }

src/pages/product/category/List.tsx

@@ -10,6 +10,17 @@ const CategoryList: FC = () => {
     const { data } = useGetCategory()
 
     const column: ColumnType<CategoryType>[] = [
+        {
+            title: 'تصویر',
+            key: 'avatarUrl',
+            render: (item) => {
+                if (item.avatarUrl) {
+                    return (
+                        <img src={item.avatarUrl} className='w-14' />
+                    )
+                }
+            }
+        },
         {
             title: 'عنوان',
             key: 'title',

src/pages/product/hooks/useProductData.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/ProductService";
 
 export const useGetCategory = () => {
@@ -7,3 +7,9 @@ export const useGetCategory = () => {
     queryFn: api.getCategory,
   });
 };
+
+export const useCreateCategory = () => {
+  return useMutation({
+    mutationFn: api.createCategory,
+  });
+};

src/pages/product/service/ProductService.ts

@@ -1,7 +1,12 @@
 import axios from "@/config/axios";
-import { type CategoriesResponse } from "../types/Types";
+import { type CategoriesResponse, type CreateCategoryType } from "../types/Types";
 
 export const getCategory = async () => {
   const { data } = await axios.get<CategoriesResponse>("/admin/category");
   return data;
 };
+
+export const createCategory = async (params:CreateCategoryType) => {
+  const { data } = await axios.post("/admin/category", params);
+  return data;
+};

src/pages/product/types/Types.ts

@@ -14,3 +14,11 @@ export interface CategoryType extends RowDataType {
 }
 
 export type CategoriesResponse = BaseResponse<CategoryType[]>;
+
+export type CreateCategoryType = {
+    title: string,
+    parentId?: string,
+    isActive: boolean,
+    avatarUrl?: string,
+    order: number,
+}

src/pages/uploader/hooks/useUploader.ts

@@ -0,0 +1,8 @@
+import { useMutation } from "@tanstack/react-query";
+import * as api from "../service/UploaderService";
+
+export const useSingleUpload = () => {
+  return useMutation({
+    mutationFn: api.singleUpload,
+  });
+};

src/pages/uploader/service/UploaderService.ts

@@ -0,0 +1,12 @@
+import axios from "@/config/axios";
+import type { SingleUploadResponseType } from "../types/Types";
+
+export const singleUpload = async (file: File) => {
+  const formData = new FormData();
+  formData.append("file", file);
+  const { data } = await axios.post<SingleUploadResponseType>(
+    "/admin/single-file",
+    formData,
+  );
+  return data;
+};

src/pages/uploader/types/Types.ts

@@ -0,0 +1,12 @@
+import type { BaseResponse } from "@/shared/types/Types";
+
+export type SingleUploadType = {
+  url: string;
+  file: {
+    url: string;
+    key: string;
+    bucket: string;
+  };
+};
+
+export type SingleUploadResponseType = BaseResponse<SingleUploadType>;

src/router/MainRouter.tsx

@@ -26,7 +26,8 @@ import LearningList from '@/pages/learning/List'
 import LearningCreate from '@/pages/learning/Create'
 import LearningCategory from '@/pages/learning/Category'
 import CategoryList from '@/pages/product/category/List'
-import CreateCategory from '@/pages/learning/components/CreateCategory'
+import CreateCategory from '@/pages/product/category/Create'
+
 const MainRouter: FC = () => {
     return (
         <div className='p-4 overflow-hidden'>