diff --git a/frontend/admin-panel/src/pages/Categories/CategoryManager.tsx b/frontend/admin-panel/src/pages/Categories/CategoryManager.tsx
new file mode 100644
index 0000000..4962f0c
--- /dev/null
+++ b/frontend/admin-panel/src/pages/Categories/CategoryManager.tsx
@@ -0,0 +1,233 @@
+import { useState, useEffect } from 'react';
+import { Category } from '../../types/Category';
+import { categoryService } from '../../services/categoryService';
+import Modal from '../../components/Modal';
+import { Plus, Edit, Trash2, ChevronRight, ChevronDown, Folder, FolderOpen } from 'lucide-react';
+import clsx from 'clsx';
+
+// Type helper for the tree structure
+interface CategoryNode extends Category {
+ children: CategoryNode[];
+ level: number;
+}
+
+export default function CategoryManager() {
+ const [categories, setCategories] = useState
([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ // Form state
+ const [editingCategory, setEditingCategory] = useState(null);
+ const [formData, setFormData] = useState>({ name: '', slug: '', active: true, parentId: null });
+
+ useEffect(() => {
+ loadCategories();
+ }, []);
+
+ const loadCategories = async () => {
+ setIsLoading(true);
+ try {
+ const data = await categoryService.getAll();
+ const tree = buildTree(data);
+ setCategories(tree);
+ } catch (error) {
+ console.error('Error loading categories:', error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const buildTree = (cats: Category[], parentId: number | null = null, level = 0): CategoryNode[] => {
+ return cats
+ .filter(c => c.parentId === parentId)
+ .map(c => ({
+ ...c,
+ level,
+ children: buildTree(cats, c.id, level + 1)
+ }));
+ };
+
+ const handleCreate = (parentId: number | null = null) => {
+ setEditingCategory(null);
+ setFormData({ name: '', slug: '', active: true, parentId });
+ setIsModalOpen(true);
+ };
+
+ const handleEdit = (category: Category) => {
+ setEditingCategory(category);
+ setFormData({ ...category });
+ setIsModalOpen(true);
+ };
+
+ const handleDelete = async (id: number) => {
+ if (!confirm('¿Está seguro de eliminar esta categoría y todas sus subcategorías?')) return;
+ try {
+ await categoryService.delete(id);
+ loadCategories();
+ } catch (error) {
+ console.error('Error deleting category:', error);
+ alert('Error al eliminar');
+ }
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ try {
+ if (editingCategory) {
+ await categoryService.update(editingCategory.id, formData);
+ } else {
+ await categoryService.create(formData);
+ }
+ setIsModalOpen(false);
+ loadCategories();
+ } catch (error) {
+ console.error('Error saving category:', error);
+ }
+ };
+
+ // Recursive component for rendering specific tree items
+ const CategoryItem = ({ node }: { node: CategoryNode }) => {
+ const [isExpanded, setIsExpanded] = useState(true);
+
+ return (
+
+
+
+
+
+ {isExpanded ? : }
+
+
+
{node.name}
+
+
+
+
+
+
+
+
+ {isExpanded && node.children.length > 0 && (
+
+ {node.children.map(child => (
+
+ ))}
+
+ )}
+
+
+
Estructura de Categorías
+
+
+
+
+ {isLoading ? (
+
Cargando taxonomía...
+ ) : categories.length === 0 ? (
+
No hay categorías definidas. Crea la primera.
+ ) : (
+
+ {categories.map(node => (
+
+ ))}
+
+ )}
+
+
+
setIsModalOpen(false)}
+ title={editingCategory ? 'Editar Categoría' : 'Nueva Categoría'}
+ >
+
+
+