chore: show material in the edit form, needs to test save button

src/private/categories/AddOrEditCategoryForm.jsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Box, Button, Paper, TextField, Typography, MenuItem, Chip } from '@mui/material';
 import { useAuth } from '../../context/AuthContext';
 import CategoriesApi from '../../api/CategoriesApi';
+import TagTypeApi from '../../api/TagTypeApi';
 import { jwtDecode } from 'jwt-decode';
 
 function slugify(s) {
@@ -46,6 +47,7 @@ export default function AddOrEditCategoryForm({ onAdd, initialData, onCancel, ma
   const { user } = useAuth();
   const token = user?.thalosToken || localStorage.getItem('thalosToken');
   const api = useMemo(() => new CategoriesApi(token), [token]);
+  const tagTypeApi = useMemo(() => new TagTypeApi(token), [token]);
 
   const [types, setTypes] = useState([]);
   const [allTags, setAllTags] = useState([]);
@@ -76,27 +78,16 @@ const tagLabelById = useMemo(() => {
     updatedBy: null,
   });
 
-  // cargar tipos y tags para selects
+  // cargar tipos (Tag Types) y tags para selects
   useEffect(() => {
     (async () => {
       try {
-        // Always try to load all tags (for materials, lookups, etc.)
+        // Load all tag types from TagTypeApi
-        const tags = typeof api.getAll === 'function' ? await api.getAll() : [];
+        const typesResp = await tagTypeApi.getAll();
-
-        // Try multiple method names for types; if none exist, derive from tags
-        let typesResp = [];
-        if (typeof api.getAllTypes === 'function') {
-          typesResp = await api.getAllTypes();
-        } else if (typeof api.getTypes === 'function') {
-          typesResp = await api.getTypes();
-        } else if (Array.isArray(tags)) {
-          // Derive a minimal "types" list from existing tag.typeId values
-          const uniqueTypeIds = [...new Set(tags.map(t => t?.typeId).filter(Boolean))];
-          typesResp = uniqueTypeIds.map(id => ({ id, typeName: id, level: null }));
-          console.warn('CategoriesApi has no getAllTypes/getTypes; derived types from tag.typeId.');
-        }
-
         setTypes(Array.isArray(typesResp) ? typesResp : []);
+
+        // Load all existing tags (used to resolve parentTagId -> labels for Material)
+        const tags = typeof api.getAll === 'function' ? await api.getAll() : [];
         setAllTags(Array.isArray(tags) ? tags : []);
       } catch (e) {
         console.error('Failed to load tag types or tags', e);
@@ -104,7 +95,7 @@ const tagLabelById = useMemo(() => {
         setAllTags([]);
       }
     })();
-  }, [api]);
+  }, [tagTypeApi, api]);
 
   // When editing: if we received material names from the grid, map them to IDs once allTags are loaded.
   useEffect(() => {
@@ -273,7 +264,7 @@ const tagLabelById = useMemo(() => {
 
       <TextField
         name="typeId"
-        label="Type"
+        label="Category"
         value={form.typeId}
         onChange={handleChange}
         select
@@ -281,11 +272,15 @@ const tagLabelById = useMemo(() => {
         sx={{ mb: 2 }}
         required
       >
-        {types.map(t => (
+        {types.map((t) => {
-          <MenuItem key={t.id || t._id} value={t.id || t._id}>
+          const value = t._id || t.id; // prefer Mongo _id for 1:1 mapping
-            {t.typeName} ({t.level ?? '-'})
+          const label = t.typeName || value;
-          </MenuItem>
+          return (
-        ))}
+            <MenuItem key={value} value={value}>
+              {label}
+            </MenuItem>
+          );
+        })}
       </TextField>
 
       <TextField

src/private/categories/Categories.jsx

@@ -9,6 +9,7 @@ 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();