update brand

src/pages/brand/Update.tsx

@@ -0,0 +1,188 @@
+import { type FC, useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { useGetCategories, type CategoryTreeNode } from '../category'
+import { useFormik } from 'formik'
+import { type CreateBrandType } from './types/Types'
+import * as Yup from 'yup'
+import { useUpdateBrand, useGetBrandById } from './hooks/useBrandData'
+import Input from '../../components/Input'
+import Select from '../../components/Select'
+import Textarea from '../../components/Textarea'
+import Button from '../../components/Button'
+import { TickCircle } from 'iconsax-react'
+import { useUploadMultiple, useUploadSingle } from '../uploader/hooks/useUploaderData'
+import UploadBoxDraggble from '@/components/UploadBoxDraggble'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/helpers/utils'
+
+const UpdateBrand: FC = () => {
+    const navigate = useNavigate()
+    const { id } = useParams<{ id: string }>()
+    const { data: categoriesData } = useGetCategories()
+    const { data: brandDetail, isLoading: brandDetailLoading } = useGetBrandById(id!)
+    const uploadSingle = useUploadSingle()
+    const uploadMultiple = useUploadMultiple()
+    const updateBrandMutation = useUpdateBrand()
+
+    const [logoFile, setLogoFile] = useState<File[]>([])
+    const [imageFiles, setImageFiles] = useState<File[]>([])
+
+    const formik = useFormik<CreateBrandType>({
+        initialValues: {
+            title_fa: '',
+            title_en: '',
+            category: '',
+            description: '',
+            images: [],
+            logoUrl: '',
+        },
+        validationSchema: Yup.object({
+            title_fa: Yup.string().required('عنوان فارسی برند الزامی است'),
+            title_en: Yup.string().required('عنوان انگلیسی برند الزامی است'),
+            category: Yup.string().required('دسته بندی برند الزامی است'),
+            description: Yup.string().required('توضیحات برند الزامی است'),
+        }),
+        onSubmit: async (values) => {
+            let logoUrl = values.logoUrl
+            let images = values.images
+
+            if (logoFile.length > 0) {
+                const logoResponse = await uploadSingle.mutateAsync(logoFile[0])
+                logoUrl = logoResponse.results?.url?.url || ''
+            }
+
+            if (imageFiles.length > 0) {
+                const imagesResponse = await uploadMultiple.mutateAsync(imageFiles)
+                images = imagesResponse.results?.urls?.map(file => file.url) || []
+            }
+
+            const submitData = {
+                ...values,
+                logoUrl,
+                images
+            }
+
+            updateBrandMutation.mutate({ id: id!, params: submitData }, {
+                onSuccess: () => {
+                    toast.success('برند با موفقیت ویرایش شد')
+                    navigate('/brands')
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                }
+            })
+        },
+    })
+
+    useEffect(() => {
+        if (brandDetail?.results?.data?.brand) {
+            const brand = brandDetail.results.data.brand
+            formik.setValues({
+                title_fa: brand.title_fa,
+                title_en: brand.title_en,
+                category: brand.category?._id || '',
+                description: brand.description,
+                images: brand.images,
+                logoUrl: brand.logoUrl,
+            })
+        }
+    }, [brandDetail, formik])
+
+    const categoryOptions = categoriesData?.results?.data?.map((category: CategoryTreeNode) => ({
+        value: category._id,
+        label: category.title_fa
+    })) || []
+
+    if (brandDetailLoading) {
+        return <div className="flex justify-center items-center h-64">در حال بارگذاری...</div>
+    }
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div className='flex items-center gap-3'>
+                    <h1>ویرایش برند</h1>
+                </div>
+                <div>
+                    <Button
+                        className='px-6'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={updateBrandMutation.isPending || uploadSingle.isPending || uploadMultiple.isPending}
+                        disabled={!formik.isValid || updateBrandMutation.isPending || uploadSingle.isPending || uploadMultiple.isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle size={16} color='#fff' />
+                            <div>بروزرسانی برند</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='flex gap-6 xl:mt-8 mt-6'>
+                {/* اطلاعات اصلی */}
+                <div className='flex-1 text-sm bg-white py-8 xl:px-10 px-6 rounded-3xl'>
+                    <h2 className='text-lg font-medium mb-6'>اطلاعات اصلی</h2>
+
+                    <div className='space-y-6'>
+                        <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
+                            <Input
+                                label='عنوان فارسی برند'
+                                placeholder='مثال: سامسونگ'
+                                {...formik.getFieldProps('title_fa')}
+                                error_text={formik.touched.title_fa && formik.errors.title_fa ? formik.errors.title_fa : ''}
+                            />
+                            <Input
+                                label='عنوان انگلیسی برند'
+                                placeholder='مثال: Samsung'
+                                {...formik.getFieldProps('title_en')}
+                                error_text={formik.touched.title_en && formik.errors.title_en ? formik.errors.title_en : ''}
+                            />
+                        </div>
+
+                        <Select
+                            label='دسته‌بندی'
+                            placeholder='انتخاب دسته‌بندی برند'
+                            items={categoryOptions}
+                            {...formik.getFieldProps('category')}
+                            error_text={formik.touched.category && formik.errors.category ? formik.errors.category : ''}
+                        />
+
+                        <Textarea
+                            label='توضیحات برند'
+                            placeholder='توضیحات کامل برند را وارد کنید...'
+                            {...formik.getFieldProps('description')}
+                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
+                        />
+                    </div>
+                </div>
+
+                {/* فایل‌ها */}
+                <div className='w-80 space-y-6'>
+                    <div className='text-sm bg-white py-8 px-6 rounded-3xl'>
+                        <h2 className='text-lg font-medium mb-6'>فایل‌ها</h2>
+
+                        <div className='space-y-6'>
+                            <div>
+                                <UploadBoxDraggble
+                                    label='لوگو برند'
+                                    isMultiple={false}
+                                    onChange={(files) => setLogoFile(files)}
+                                />
+                            </div>
+
+                            <div>
+                                <UploadBoxDraggble
+                                    label='تصاویر برند'
+                                    isMultiple={true}
+                                    onChange={(files) => setImageFiles(files)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default UpdateBrand

src/pages/brand/hooks/useBrandData.ts

@@ -25,3 +25,10 @@ export const useUpdateBrand = () => {
     mutationFn: api.updateBrand,
   });
 };
+
+export const useGetBrandById = (id: string) => {
+  return useQuery({
+    queryKey: ["brand", id],
+    queryFn: () => api.getBrandById(id),
+  });
+};

src/pages/brand/service/BrandService.ts

@@ -1,5 +1,6 @@
 import axios from "../../../config/axios";
 import { type BrandsResponseType, type CreateBrandType } from "../types/Types";
+import { type IBrandResponse } from "../../../types/response.types";
 
 export const getBrands = async (page: number = 1, limit: number = 10): Promise<BrandsResponseType> => {
   const { data } = await axios.get(`/brand`, {
@@ -22,3 +23,8 @@ export const updateBrand = async (params: { id: string, params: CreateBrandType
   const { data } = await axios.patch(`/admin/brand/${params.id}`, params.params);
   return data;
 };
+
+export const getBrandById = async (id: string): Promise<IBrandResponse> => {
+  const { data } = await axios.get(`/admin/brand/${id}`);
+  return data;
+};

src/pages/category/List.tsx

@@ -1,7 +1,7 @@
 import { type FC, type JSX, useState } from 'react'
 import Td from '../../components/Td'
 import { ArrowDown2, ArrowLeft2, Edit, Lock } from 'iconsax-react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { useGetCategories, useDeleteCategory } from './hooks/useCategoryData'
 import { type CategoryTreeNode } from './types/Types'
 import { Pages } from '../../config/Pages'
@@ -10,6 +10,7 @@ import TrashWithConfrim from '../../components/TrashWithConfrim'
 
 const CategoryList: FC = () => {
 
+    const navigate = useNavigate();
     const { data, isLoading, refetch } = useGetCategories();
     const deleteCategoryMutation = useDeleteCategory();
     const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
@@ -124,7 +125,14 @@ const CategoryList: FC = () => {
 
     return (
         <div>
-            <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+            <div className='flex justify-end mt-5'>
+                <Button
+                    label='افزودن دسته‌بندی'
+                    onClick={() => navigate(`${Pages.category.create}`)}
+                    className='w-fit'
+                />
+            </div>
+            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
                 <table className='w-full text-sm '>
                     <thead className='thead'>
                         <tr>

src/router/Main.tsx

@@ -35,6 +35,7 @@ import UpdateCoupon from '@/pages/Coupon/Update'
 import UsersList from '@/pages/user/List'
 import AdminList from '@/pages/admin/List'
 import AdminCreate from '@/pages/admin/Create'
+import UpdateBrand from '@/pages/brand/Update'
 
 const MainRouter: FC = () => {
 
@@ -64,6 +65,7 @@ const MainRouter: FC = () => {
                             <Route path={`${Pages.products.variants}:id`} element={<ProductVariant />} />
                             <Route path={Pages.products.brands.list} element={<BrandList />} />
                             <Route path={Pages.products.brands.create} element={<BrandCreate />} />
+                            <Route path={`${Pages.products.brands.update}:id`} element={<UpdateBrand />} />
                             <Route path={Pages.products.warranty.list} element={<WarrantyList />} />
                             <Route path={Pages.products.warranty.create} element={<CreateWarranty />} />
 
@@ -91,7 +93,6 @@ const MainRouter: FC = () => {
 
                             <Route path={Pages.admin.list} element={<AdminList />} />
                             <Route path={Pages.admin.create} element={<AdminCreate />} />
-
                         </Routes>
                     </div>
                 </div>

src/types/response.types.ts

@@ -5,3 +5,45 @@ export interface IBaseResponse {
 export interface IResponse<T> extends IBaseResponse {
   data: T;
 }
+
+export interface ICategory {
+  _id: string;
+  title_fa: string;
+  title_en: string;
+  icon: string;
+  imageUrl: string;
+  description: string;
+  variants: number[];
+  hierarchy: string[];
+  leaf: boolean;
+  parent: string | null;
+  deleted: boolean;
+  createdAt: string;
+  updatedAt: string;
+  url: string;
+  children: ICategory[];
+  theme?: string;
+}
+
+export interface IBrand {
+  _id: string;
+  title_fa: string;
+  title_en: string;
+  category: ICategory;
+  status: string;
+  description: string;
+  logoUrl: string;
+  images: string[];
+  deleted: boolean;
+  createdAt: string;
+  updatedAt: string;
+  url: string;
+}
+
+export interface IBrandResponse extends IBaseResponse {
+  results: {
+    data: {
+      brand: IBrand;
+    };
+  };
+}