structure category product

.env

@@ -1,2 +1,3 @@
+VITE_API_BASE_URL = 'http://172.27.64.88:4000'
 VITE_TOKEN_NAME = 'negareh_t'
 VITE_REFRESH_TOKEN_NAME = 'negareh_rt'

package-lock.json

@@ -22,6 +22,7 @@
         "react-infinite-scroll-component": "^6.1.0",
         "react-loading-skeleton": "^3.5.0",
         "react-multi-date-picker": "^4.5.2",
+        "react-otp-input": "^3.1.1",
         "react-router-dom": "^7.9.4",
         "react-spinners": "^0.17.0",
         "react-toastify": "^11.0.5",
@@ -4493,6 +4494,16 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/react-otp-input": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/react-otp-input/-/react-otp-input-3.1.1.tgz",
+      "integrity": "sha512-bjPavgJ0/Zmf/AYi4onj8FbH93IjeD+e8pWwxIJreDEWsU1ILR5fs8jEJmMGWSBe/yyvPP6X/W6Mk9UkOCkTPw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.6 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8.6 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-loading-skeleton": "^3.5.0",
     "react-multi-date-picker": "^4.5.2",
+    "react-otp-input": "^3.1.1",
     "react-router-dom": "^7.9.4",
     "react-spinners": "^0.17.0",
     "react-toastify": "^11.0.5",

src/config/Paths.tsx

@@ -4,7 +4,11 @@ export const Paths = {
     },
     product: {
         list: '/product/list',
-        create: '/product/create'
+        create: '/product/create',
+        category: {
+            create: '/product/category/create',
+            list: '/product/category/list',
+        }
     },
     order: {
         list: '/order/list'

src/config/axios.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 import { getToken } from "./func";
 
 const instance = axios.create({
-  baseURL: import.meta.env.VITE_API_URL || "http://localhost:3000/api",
+  baseURL: import.meta.env.VITE_API_BASE_URL || "http://localhost:3000/api",
   timeout: 10000,
 });
 

src/pages/product/category/Create.tsx

@@ -0,0 +1,11 @@
+import { type FC } from 'react'
+
+const ProductCategory: FC = () => {
+    return (
+        <div className='mt-5'>
+            <h1 className='text-lg font-light'>دسته بندی محصولات</h1>
+        </div>
+    )
+}
+
+export default ProductCategory

src/pages/product/category/List.tsx

@@ -0,0 +1,29 @@
+import { type FC } from 'react'
+import { useGetCategory } from '../hooks/useProductData'
+import Table from '@/components/Table'
+import type { RowDataType } from '@/components/types/TableTypes'
+import type { CategoryType } from '../types/Types'
+
+const CategoryList: FC = () => {
+
+    const { data } = useGetCategory()
+
+    const column = [{
+        title: 'عنوان',
+        key: 'title',
+    }]
+
+    return (
+        <div className='mt-5'>
+            <h1 className='text-lg font-light'>دسته بندی محصولات</h1>
+
+            <Table
+                columns={column}
+                data={data?.data || [] as (CategoryType & RowDataType)[]}
+            />
+
+        </div>
+    )
+}
+
+export default CategoryList

src/pages/product/hooks/useProductData.ts

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

src/pages/product/service/ProductService.ts

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

src/pages/product/types/Types.ts

@@ -0,0 +1,16 @@
+import type { RowDataType } from "@/components/types/TableTypes";
+import { type BaseResponse } from "@/shared/types/Types";
+
+export interface CategoryType extends RowDataType {
+    avatarUrl: string | null;
+    children: CategoryType[];
+    createdAt: string;
+    deletedAt: string | null;
+    id: string;
+    isActive: boolean;
+    order: number | null;
+    parent: CategoryType | null;
+    title: string;
+}
+
+export type CategoriesResponse = BaseResponse<CategoryType[]>;

src/router/MainRouter.tsx

@@ -25,6 +25,8 @@ import CriticismsDetail from '@/pages/criticisms/Detail'
 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'
 const MainRouter: FC = () => {
     return (
         <div className='p-4 overflow-hidden'>
@@ -40,8 +42,12 @@ const MainRouter: FC = () => {
                             <Route path={Paths.perfomaInvoice.list} element={<ProformaInvoice />} />
                             <Route path={Paths.perfomaInvoice.detail + ':id'} element={<DetailPerfomaInvoice />} />
                             <Route path={Paths.requests.list} element={<RequestList />} />
+
                             <Route path={Paths.product.list} element={<ProductList />} />
                             <Route path={Paths.product.create} element={<CreateProduct />} />
+                            <Route path={Paths.product.category.list} element={<CategoryList />} />
+                            <Route path={Paths.product.category.create} element={<CreateCategory />} />
+
                             <Route path={Paths.order.list} element={<OrdersList />} />
                             <Route path={Paths.features.list} element={<FeaturesList />} />
                             <Route path={Paths.features.create} element={<CreateFeature />} />

src/shared/types/Types.ts

@@ -2,3 +2,15 @@ export type SharedStoreType = {
   openSidebar: boolean;
   setOpenSidebar: (open: boolean) => void;
 };
+
+export interface BaseResponse<T> {
+  success: boolean;
+  statusCode: number;
+  data: T;
+  meta?: {
+    limit: number;
+    page: number;
+    total: number;
+    totalPages: number;
+  };
+}