0ead18e28f
## ST-3.3 Documentation (3 SP) - Add 11 page specification files documenting 25 pages - Create docs/05-frontend/pages/ directory - Specs: Goals, MLM, Portfolio, RBAC, Notifications, Analytics, Audit, Storage, Webhooks, Settings - Add _INDEX.md with complete listing ## ST-3.4 Dead Code Analysis (1 SP) - Analyze usePortfolio hook usage (18/21 functions used) - Document components ready for future use - Decision: Keep all code as preparation for features - Create DEAD-CODE-REPORT.md ## Frontend Submodule - WCAG improvements (11 files) - 160 unit tests (8 new test files) Sprint 3 (P2) completed: 14 SP Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
164 lines
5.0 KiB
Markdown
164 lines
5.0 KiB
Markdown
# 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*
|