sub category list

src/pages/product/Category.tsx

@@ -17,6 +17,27 @@ import {
 import { useSingleUpload } from '../uploader/hooks/useUploaderData'
 import { extractErrorMessage } from '@/config/func'
 
+function findCategoryById(cats: Category[], id: string | null): Category | undefined {
+    if (!id) return undefined
+    for (const c of cats) {
+        if (c.id === id) return c
+        const found = findCategoryById(c.children || [], id)
+        if (found) return found
+    }
+    return undefined
+}
+
+function flattenCategories(cats: Category[]): Category[] {
+    const result: Category[] = []
+    for (const c of cats) {
+        result.push(c)
+        if (c.children?.length) {
+            result.push(...flattenCategories(c.children))
+        }
+    }
+    return result
+}
+
 type CategoryFormValues = {
     title: string
     icon: File[]
@@ -39,7 +60,8 @@ const CategoryProduct: FC = () => {
 
     const categories = categoriesData?.data || []
 
-    const filteredCategories = categories.filter((category) => {
+    const flattenedCategories = flattenCategories(categories)
+    const filteredCategories = flattenedCategories.filter((category) => {
         if (filters.search) {
             return category.title.toLowerCase().includes(filters.search.toLowerCase())
         }
@@ -122,7 +144,8 @@ const CategoryProduct: FC = () => {
         formik.setValues({
             title: category.title,
             icon: [],
-            order: category.order || 0
+            order: category.order || 0,
+            parentId: category.parent || undefined
         })
         setIsActive(category.isActive)
         setIconFiles([])
@@ -153,7 +176,7 @@ const CategoryProduct: FC = () => {
     }
 
     const handleStatusChange = (id: string, value: boolean) => {
-        const category = categories.find((cat) => cat.id === id)
+        const category = findCategoryById(categories, id)
         if (category) {
             const categoryData: CreateCategoryType = {
                 title: category.title,

src/pages/product/components/CategoryTableColumns.tsx

@@ -44,7 +44,12 @@ const CategoryTableColumns = ({ categories, onStatusChange, onEdit, onDelete, is
     },
     {
       title: 'عنوان',
-      key: 'title'
+      key: 'title',
+      render: (item: Category) => (
+        <div className={item.parent ? 'pr-6' : ''}>
+          {item.title}
+        </div>
+      )
     },
     {
       title: 'والد',