chore: show material in the grid

src/private/categories/Categories.jsx

@@ -9,7 +9,6 @@ import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 import AddOrEditCategoryForm from './AddOrEditCategoryForm';
 import CategoriesApi from '../../api/CategoriesApi';
 import { useAuth } from '../../context/AuthContext';
-import TagTypeApi from '../../api/TagTypeApi';
 
 export default function Categories() {
   const { user } = useAuth();
@@ -41,21 +40,24 @@ export default function Categories() {
 
       setAllTags(list);
 
-      // Build a map of parentId -> array of child tagNames
-      const parentToChildren = {};
+      // Build a map of tagId -> tagName to resolve parent names
+      const idToName = {};
       for (const item of list) {
-        const parents = Array.isArray(item?.parentTagId) ? item.parentTagId : [];
-        for (const pid of parents) {
-          if (!parentToChildren[pid]) parentToChildren[pid] = [];
-          if (item?.tagName) parentToChildren[pid].push(item.tagName);
-        }
+        const key = item?._id || item?._Id || item?.id || item?.Id;
+        if (key) idToName[key] = item?.tagName || item?.name || '';
       }
 
-      // Enrich each row with `material` (children whose parentTagId includes this _id)
-      const enriched = list.map((r) => ({
-        ...r,
-        material: Array.isArray(parentToChildren[r?._id]) ? parentToChildren[r._id].join(', ') : '',
-      }));
+      // Enrich each row with `materialNames`: names of the parents referenced by parentTagId
+      const enriched = list.map((r) => {
+        const parents = Array.isArray(r?.parentTagId) ? r.parentTagId : [];
+        const materialNames = parents
+          .map((pid) => idToName[pid])
+          .filter(Boolean);
+        return {
+          ...r,
+          materialNames, // array of strings
+        };
+      });
 
       setRows(enriched);
     } catch (e) {
@@ -82,9 +84,11 @@ export default function Categories() {
       displayOrder: Number(r.displayOrder ?? 0),
       icon: r.icon || '',
       status: r.status ?? 'Active',
-      materialNames: typeof r.material === 'string'
-        ? r.material.split(',').map(s => s.trim()).filter(Boolean)
-        : Array.isArray(r.material) ? r.material : [],
+      materialNames: Array.isArray(r.materialNames)
+        ? r.materialNames
+        : (typeof r.material === 'string'
+            ? r.material.split(',').map(s => s.trim()).filter(Boolean)
+            : []),
       createdAt: r.createdAt ?? null,
       createdBy: r.createdBy ?? null,
       updatedAt: r.updatedAt ?? null,
@@ -178,7 +182,39 @@ export default function Categories() {
     { field: 'tagName', headerName: 'Name', flex: 1.2, minWidth: 180 },
     { field: 'slug', headerName: 'Slug', flex: 1.0, minWidth: 160 },
     { field: 'icon', headerName: 'Icon', flex: 0.7, minWidth: 250 },
+    /*
     { field: 'material', headerName: 'Material', flex: 1.2, minWidth: 200 },
+    */
+    {
+      field: 'materialNames',
+      headerName: 'Material',
+      flex: 1.2,
+      minWidth: 220,
+      renderCell: (params) => {
+        const vals = Array.isArray(params?.row?.materialNames) ? params.row.materialNames : [];
+        return (
+          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', alignItems: 'center' }}>
+            {vals.length ? vals.map((m) => (
+              <span
+                key={m}
+                style={{
+                  padding: '2px 8px',
+                  borderRadius: '12px',
+                  background: '#DFCCBC',
+                  color: '#26201A',
+                  fontSize: 12,
+                  lineHeight: '18px',
+                }}
+              >
+                {m}
+              </span>
+            )) : '—'}
+          </Box>
+        );
+      },
+      sortable: false,
+      filterable: false,
+    },
     {
       field: 'createdAt',
       headerName: 'Created Date',