From f8f79e3a9d7b1b9eeaebb168bfff8512ac7714aa Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 25 Jan 2026 09:55:45 +0330
Subject: [PATCH] list of attributes

---
 src/pages/product/attribute/List.tsx        | 78 +++++++++++++++++++++
 src/pages/product/hooks/useProductData.ts   |  8 +++
 src/pages/product/service/ProductService.ts |  7 +-
 src/pages/product/types/Types.ts            | 14 +++-
 src/router/MainRouter.tsx                   |  2 +
 5 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/product/attribute/List.tsx

diff --git a/src/pages/product/attribute/List.tsx b/src/pages/product/attribute/List.tsx
new file mode 100644
index 0000000..6e769fc
--- /dev/null
+++ b/src/pages/product/attribute/List.tsx
@@ -0,0 +1,78 @@
+import Button from '@/components/Button'
+import { Paths } from '@/config/Paths'
+import { AddSquare, Edit } from 'iconsax-react'
+import { type FC } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { useGetAttributes } from '../hooks/useProductData'
+import Table from '@/components/Table'
+
+const AttributeList: FC = () => {
+
+    const { id } = useParams()
+    const { data } = useGetAttributes(Number(id))
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>ویژگی ها</h1>
+
+                <Link
+                    to={Paths.product.attribute.create + id}
+                >
+                    <Button
+                        className='w-fit px-6'
+                    >
+                        <div className='flex gap-1.5'>
+                            <AddSquare size={18} color='black' />
+                            <div className='text-[13px] font-light'>ویژگی جدید</div>
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+
+            <div className='mt-8'>
+                <Table
+                    columns={[
+                        {
+                            key: 'name',
+                            title: 'نام'
+                        },
+                        {
+                            key: 'type',
+                            title: 'نوع'
+                        },
+                        {
+                            key: 'isRequired',
+                            title: 'احباری',
+                            render: (item) => {
+                                return (
+                                    <div>{item.isRequired ? 'اجباری' : 'اختیاری'}</div>
+                                )
+                            }
+                        },
+                        {
+                            key: 'actions',
+                            title: '',
+                            render: (item) => {
+                                return (
+                                    <div className='flex gap-2 items-center'>
+                                        <Link to={Paths.product.attribute.update + item.id}>
+                                            <Edit
+                                                color='#0037FF'
+                                                size={20}
+                                            />
+                                        </Link>
+                                    </div>
+                                )
+                            }
+                        }
+                    ]}
+                    data={data?.data}
+                />
+            </div>
+
+        </div>
+    )
+}
+
+export default AttributeList
\ No newline at end of file
diff --git a/src/pages/product/hooks/useProductData.ts b/src/pages/product/hooks/useProductData.ts
index 32c3896..37227e8 100644
--- a/src/pages/product/hooks/useProductData.ts
+++ b/src/pages/product/hooks/useProductData.ts
@@ -97,3 +97,11 @@ export const useCreateAttribute = () => {
       api.createAttribute(id, params),
   });
 };
+
+export const useGetAttributes = (id: number) => {
+  return useQuery({
+    queryKey: ["product-attributes", id],
+    queryFn: () => api.getAttributes(id),
+    enabled: !!id,
+  });
+};
diff --git a/src/pages/product/service/ProductService.ts b/src/pages/product/service/ProductService.ts
index 9510a8c..1ab8184 100644
--- a/src/pages/product/service/ProductService.ts
+++ b/src/pages/product/service/ProductService.ts
@@ -1,5 +1,5 @@
 import axios from "@/config/axios";
-import { type CategoriesResponse, type CategoryResponse, type CreateAttributeType, type CreateCategoryType, type CreateProductType, type ProductDetailResponeType, type ProductResponeType } from "../types/Types";
+import { type AttributeResponseType, type CategoriesResponse, type CategoryResponse, type CreateAttributeType, type CreateCategoryType, type CreateProductType, type ProductDetailResponeType, type ProductResponeType } from "../types/Types";
 
 export const getCategory = async () => {
   const { data } = await axios.get<CategoriesResponse>("/admin/category");
@@ -54,4 +54,9 @@ export const deleteProduct = async (id: number) => {
 export const createAttribute = async (id: number, params:CreateAttributeType) => {
   const { data } = await axios.post(`/admin/product/${id}/attribute`, params);
   return data;
+};
+
+export const getAttributes = async (id: number) => {
+  const { data } = await axios.get<AttributeResponseType>(`/admin/products/${id}/attributes`);
+  return data;
 };
\ No newline at end of file
diff --git a/src/pages/product/types/Types.ts b/src/pages/product/types/Types.ts
index 08cb71d..d92bcd4 100644
--- a/src/pages/product/types/Types.ts
+++ b/src/pages/product/types/Types.ts
@@ -57,4 +57,16 @@ export type CreateAttributeType = {
   isRequired: boolean,
   type: FieldTypeEnum,
   order: number
-}
\ No newline at end of file
+}
+
+export type AttributeType = {
+    createdAt: string,
+    id: number,
+    isRequired: boolean,
+    name: string,
+    order: number,
+    product: number,
+    type: FieldTypeEnum
+}
+
+export type AttributeResponseType = BaseResponse<AttributeType[]>;
diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx
index 40b6d4a..3862a77 100644
--- a/src/router/MainRouter.tsx
+++ b/src/router/MainRouter.tsx
@@ -30,6 +30,7 @@ import CreateCategory from '@/pages/product/category/Create'
 import UpdateCategory from '@/pages/product/category/Update'
 import UpdateProduct from '@/pages/product/Update'
 import CreateAttribute from '@/pages/product/attribute/Create'
+import AttributeList from '@/pages/product/attribute/List'
 
 const MainRouter: FC = () => {
     return (
@@ -51,6 +52,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.product.create} element={<CreateProduct />} />
                             <Route path={Paths.product.update + ':id'} element={<UpdateProduct />} />
                             <Route path={Paths.product.attribute.create + ':id'} element={<CreateAttribute />} />
+                            <Route path={Paths.product.attribute.list + ':id'} element={<AttributeList />} />
                             <Route path={Paths.product.category.list} element={<CategoryList />} />
                             <Route path={Paths.product.category.create} element={<CreateCategory />} />
                             <Route path={Paths.product.category.update + ':id'} element={<UpdateCategory />} />