rckrdmrd/template-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
fa4dd11b5e
template-saas/docs/05-frontend/pages/PAGE-PORTFOLIO.md
Adrian Flores Cortes 0ead18e28f [SPRINT-3] docs: Add page specifications and dead code analysis 
## 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>
2026-02-03 20:27:51 -06:00

5.0 KiB
Raw Blame History

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