# Portfolio Pages Specification

**Modulo:** portfolio
**Ultima actualizacion:** 2026-02-03
**Total Paginas:** 3

---

## 1. PortfolioPage (Dashboard)

**Ruta:** `/dashboard/portfolio`
**Archivo:** `src/pages/dashboard/portfolio/PortfolioPage.tsx`

### Descripcion
Dashboard principal del catalogo de productos. Muestra estadisticas, categorias y productos recientes con busqueda global.

### Componentes Utilizados
- Search Input - Busqueda global con icono
- Filter Button - Boton de filtros (placeholder)
- Stats Cards - 4 tarjetas con metricas
- Categories Panel - Panel con lista de categorias
- Recent Products Panel - Panel con productos recientes
- Icons: Package, FolderTree, Plus, Search, Filter (lucide-react)

### Hooks Utilizados
- `useCategories()` - Lista categorias
- `useProducts({limit: 10})` - Lista productos recientes

### Funcionalidades
1. Buscar productos o categorias (UI, sin filtrado implementado)
2. Ver estadisticas (total productos, categorias, activos, borradores)
3. Ver lista de categorias (max 5) con link a todas
4. Ver productos recientes (max 5) con status badge
5. Crear nueva categoria o producto via botones header

### Estados
- Loading: Spinner en cada panel
- Success: Dashboard completo
- Empty Categories: Mensaje "No categories yet"
- Empty Products: Mensaje "No products yet"

### Acciones del Usuario
| Accion | Resultado |
|--------|-----------|
| Click "New Category" | Navega a /portfolio/categories/new |
| Click "New Product" | Navega a /portfolio/products/new |
| Click categoria | Navega a detalle |
| Click producto | Navega a detalle |
| Click "View all" | Navega a listado completo |

### Permisos Requeridos
- `portfolio:read` - Ver catalogo

---

## 2. ProductsPage

**Ruta:** `/dashboard/portfolio/products`
**Archivo:** `src/pages/dashboard/portfolio/ProductsPage.tsx`

### Descripcion
Listado de productos con filtros, busqueda y acciones CRUD. Tabla paginada con acciones inline.

### Componentes Utilizados
- Search Input - Busqueda por nombre
- Status Filter Select - Filtro por estado
- Products Table - Tabla con columnas y paginacion
- Status Badge - Badge con color segun estado
- Action Icons: Eye, Edit, Copy, Trash2 (lucide-react)

### Hooks Utilizados
- `useProducts({page, limit, search, status})` - Lista productos con filtros
- `useDeleteProduct()` - Elimina producto
- `useDuplicateProduct()` - Duplica producto

### Funcionalidades
1. Buscar por nombre de producto
2. Filtrar por estado (draft, active, inactive, discontinued, out_of_stock)
3. Ver tabla con nombre, tipo, SKU, categoria, precio, estado
4. Paginacion con 20 items por pagina
5. Ver detalle, editar, duplicar, eliminar desde acciones

### Estados
- Loading: Spinner en tabla
- Success: Tabla con productos
- Empty: Mensaje "No products found" + CTA

### Acciones del Usuario
| Accion | Resultado |
|--------|-----------|
| Click "New Product" | Navega a formulario |
| Buscar | Filtra tabla |
| Cambiar filtro estado | Filtra tabla |
| Click View icon | Navega a detalle |
| Click Edit icon | Navega a edicion |
| Click Copy icon | Duplica producto |
| Click Delete icon | Confirm + elimina |
| Click Previous/Next | Cambia pagina |

### Permisos Requeridos
- `portfolio:read` - Ver listado
- `portfolio:write` - Crear/editar/duplicar
- `portfolio:delete` - Eliminar

---

## 3. CategoriesPage

**Ruta:** `/dashboard/portfolio/categories`
**Archivo:** `src/pages/dashboard/portfolio/CategoriesPage.tsx`

### Descripcion
Gestion de categorias en estructura de arbol jerarquico. Permite expandir/colapsar y buscar categorias.

### Componentes Utilizados
- Search Input - Busqueda de categorias
- Category Tree - Arbol jerarquico recursivo
- CategoryTreeNode - Nodo individual con expand/collapse
- Expand/Collapse All Button - Toggle global
- Icons: FolderTree, Plus, Search, Edit, Trash2, ChevronRight, ChevronDown (lucide-react)

### Hooks Utilizados
- `useCategoryTree()` - Arbol de categorias
- `useDeleteCategory()` - Elimina categoria

### Funcionalidades
1. Buscar categorias (filtra arbol recursivamente)
2. Expandir/colapsar nodos individuales
3. Expandir/colapsar todos
4. Ver count de productos por categoria
5. Ver estado activo/inactivo
6. Editar y eliminar desde cada nodo

### Estados
- Loading: Spinner centrado
- Success: Arbol de categorias
- Empty: Icono + mensaje
- Filtered Empty: Mensaje "No categories match your search"

### Acciones del Usuario
| Accion | Resultado |
|--------|-----------|
| Click "New Category" | Navega a formulario |
| Click chevron | Expande/colapsa nodo |
| Click "Expand/Collapse all" | Toggle global |
| Buscar | Filtra arbol |
| Click nombre categoria | Navega a detalle |
| Click Edit icon | Navega a edicion |
| Click Delete icon | Confirm + elimina (productos quedan sin categoria) |

### Permisos Requeridos
- `portfolio:read` - Ver listado
- `portfolio:write` - Crear/editar
- `portfolio:delete` - Eliminar

### Notas
- La eliminacion de categoria NO elimina productos, los deja sin categoria
- El arbol soporta multiples niveles de anidacion
- La busqueda muestra padres de resultados para mantener contexto

---

*Documentacion generada - Template SaaS - 2026-02-03*