chore: add Material column and show the Parent array

src/private/categories/Categories.jsx

@@ -21,6 +21,8 @@ export default function Categories() {
   const [rowToDelete, setRowToDelete] = useState(null);
   const hasLoaded = useRef(false);
 
+  const pageSize = 100; // Número de filas por página
+
   useEffect(() => {
     if (!hasLoaded.current) {
       loadData();
@@ -32,7 +34,24 @@ export default function Categories() {
     try {
       const data = await api.getAll();
       const list = Array.isArray(data) ? data : [];
-      setRows(list);
+
+      // Build a map of parentId -> array of child tagNames
+      const parentToChildren = {};
+      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);
+        }
+      }
+
+      // 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(', ') : '',
+      }));
+
+      setRows(enriched);
     } catch (e) {
       console.error('Failed to load categories:', e);
       setRows([]);
@@ -146,28 +165,33 @@ 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: 120 },
+    // New computed column
+    { field: 'material', headerName: 'Material', flex: 1.2, minWidth: 200 },
+    // Hidden audit columns
     {
       field: 'createdAt',
       headerName: 'Created Date',
       flex: 1.0,
       minWidth: 180,
+      hide: true,
       valueFormatter: (p) => {
         const v = p?.value;
         return v ? new Date(v).toLocaleString() : '—';
       },
     },
-    { field: 'createdBy', headerName: 'Created By', flex: 0.9, minWidth: 160 },
+    { field: 'createdBy', headerName: 'Created By', flex: 0.9, minWidth: 160, hide: true },
     {
       field: 'updatedAt',
       headerName: 'Updated Date',
       flex: 1.0,
       minWidth: 180,
+      hide: true,
       valueFormatter: (p) => {
         const v = p?.value;
         return v ? new Date(v).toLocaleString() : '—';
       },
     },
-    { field: 'updatedBy', headerName: 'Updated By', flex: 0.9, minWidth: 160 },
+    { field: 'updatedBy', headerName: 'Updated By', flex: 0.9, minWidth: 160, hide: true },
     { field: 'status', headerName: 'Status', flex: 0.7, minWidth: 120 },
   ];
 
@@ -205,8 +229,8 @@ export default function Categories() {
         <DataGrid
           rows={filteredRows}
           columns={columns}
-          initialState={{ pagination: { paginationModel: { pageSize: 10 } } }}
-          pageSizeOptions={[10]}
+          initialState={{ pagination: { paginationModel: { pageSize: pageSize } } }}
+          pageSizeOptions={[pageSize]}
           disableColumnMenu
           getRowId={(r) => r?._id || r?.id}
           sx={{