template-saas/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/PLAN-SUBTAREAS-FRONTEND.md
Adrian Flores Cortes ea1ad056de
Some checks are pending
CI / Backend CI (push) Waiting to run
CI / Frontend CI (push) Waiting to run
CI / Security Scan (push) Waiting to run
CI / CI Summary (push) Blocked by required conditions
[TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI] docs: Add frontend UX/UI audit task planning
CAPVED Analysis:
- C: Documented current frontend state (56 pages, 28 components, 24 hooks)
- A: Identified 12 gaps across 4 priority levels (P0-P3)
- P: Created 4-sprint plan with 12 subtasks (49 SP total)

Gaps identified:
- P0: RBAC, Audit, Notifications frontend incomplete
- P1: Portfolio, MLM, Goals UI missing (hooks exist)
- P2: WCAG 2.1 at 67%, tests coverage low
- P3: Documentation outdated, archive cleanup needed

Files created:
- METADATA.yml
- FASE-CAPVED-CONTEXTO.md
- FASE-CAPVED-ANALISIS.md
- PLAN-SUBTAREAS-FRONTEND.md

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-03 19:47:39 -06:00

767 lines
28 KiB
Markdown

# PLAN DE SUBTAREAS - Auditoría Frontend/UX-UI
**ID:** TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI
**Fecha:** 2026-02-03
**Estado:** PLANIFICACIÓN COMPLETA
**SP Total:** 49
---
## RESUMEN EJECUTIVO
Este plan descompone la implementación frontend en **4 Sprints** con **21 subtareas** organizadas por prioridad y dependencias. Cada subtarea cumple con el principio CAPVED y puede ser ejecutada por subagentes en paralelo según el mapa de dependencias.
```
┌───────────────────────────────────────────────────────────────┐
│ DISTRIBUCIÓN POR SPRINT │
├───────────────────────────────────────────────────────────────┤
│ Sprint 1 (P0): 11 SP - Módulos Críticos │
│ Sprint 2 (P1): 21 SP - Módulos Comerciales │
│ Sprint 3 (P2): 14 SP - Calidad y Tests │
│ Sprint 4 (P3): 3 SP - Limpieza y Documentación │
├───────────────────────────────────────────────────────────────┤
│ TOTAL: 49 SP | 21 Subtareas | 4 Sprints │
└───────────────────────────────────────────────────────────────┘
```
---
## SPRINT 1: MÓDULOS CRÍTICOS (P0)
**Objetivo:** Completar funcionalidad core para administración
**SP Total:** 11
**Paralelismo:** ST-1.1, ST-1.2, ST-1.3 pueden ejecutarse en paralelo
### ST-1.1: RBAC Frontend Completo
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-1.1-RBAC-FRONTEND |
| **SP** | 5 |
| **Prioridad** | P0 |
| **Dependencias** | Ninguna |
| **Paralelizable** | Sí |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Leer SAAS-003-rbac.md, revisar backend/src/modules/rbac | Entender 14 endpoints |
| **A** | Analizar patrones de Sales para replicar | Definir estructura páginas |
| **P** | Diseñar RolesPage, PermissionsPage, PermissionsMatrix | Mockups/wireframes |
| **E** | Implementar 5 archivos: API, hook, 3 páginas | Código funcional |
| **V** | npm run build, npm run lint, pruebas manuales | Build exitoso |
| **D** | Actualizar router, FRONTEND_INVENTORY.yml | Docs actualizados |
**Archivos a crear:**
```
frontend/src/
├── services/api/rbac.api.ts # 14 endpoints
├── hooks/useRbac.ts # Queries + mutations
├── pages/dashboard/rbac/
│ ├── RolesPage.tsx # CRUD roles
│ ├── PermissionsPage.tsx # CRUD permissions
│ └── RoleDetailPage.tsx # Asignación permisos
└── components/rbac/
├── RoleCard.tsx
├── RoleForm.tsx
└── PermissionsMatrix.tsx
```
**Criterios de Aceptación:**
- [ ] Lista de roles con CRUD
- [ ] Lista de permisos disponibles
- [ ] Matriz de asignación role→permissions
- [ ] Asignación de roles a usuarios
- [ ] Validación de permisos en UI
---
### ST-1.2: Audit Frontend Completo
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-1.2-AUDIT-COMPLETE |
| **SP** | 3 |
| **Prioridad** | P0 |
| **Dependencias** | Ninguna |
| **Paralelizable** | Sí |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Revisar audit.controller.ts (8 endpoints), componentes existentes | Lista de gaps |
| **A** | Comparar con AuditLogsPage actual | Funcionalidades faltantes |
| **P** | Diseñar filtros avanzados, exportación, stats | Plan de mejoras |
| **E** | Completar API (6 endpoints), mejorar página | Código funcional |
| **V** | Validar filtros, exportación CSV/Excel | Tests manuales |
| **D** | Actualizar SAAS-009-audit.md con UI | Docs actualizados |
**Archivos a modificar/crear:**
```
frontend/src/
├── services/api/audit.api.ts # Completar 6 endpoints faltantes
├── hooks/useAudit.ts # Agregar queries faltantes
├── pages/dashboard/AuditLogsPage.tsx # Mejorar con filtros
└── components/audit/
├── AuditFilters.tsx # Ya existe, mejorar
├── AuditExport.tsx # CREAR
└── AuditStatsCard.tsx # Ya existe, mejorar
```
**Criterios de Aceptación:**
- [ ] Filtros por fecha, usuario, acción, entidad
- [ ] Exportación a CSV y Excel
- [ ] Estadísticas de actividad (gráfico)
- [ ] Paginación con 50+ registros
- [ ] Búsqueda full-text
---
### ST-1.3: Notifications Frontend Completo
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-1.3-NOTIFICATIONS-COMPLETE |
| **SP** | 3 |
| **Prioridad** | P0 |
| **Dependencias** | Ninguna |
| **Paralelizable** | Sí |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Revisar notifications.controller.ts (17 endpoints) | Lista completa |
| **A** | Comparar con componentes existentes | Gaps en templates, config |
| **P** | Diseñar página de gestión de templates | Plan de UI |
| **E** | Completar API, crear TemplatesPage | Código funcional |
| **V** | Validar CRUD templates, config por canal | Tests manuales |
| **D** | Actualizar SAAS-007-notifications.md | Docs actualizados |
**Archivos a modificar/crear:**
```
frontend/src/
├── services/api/notifications.api.ts # Completar 9 endpoints
├── hooks/useNotifications.ts # Agregar templates queries
├── pages/dashboard/notifications/
│ ├── NotificationsPage.tsx # Ya existe
│ └── TemplatesPage.tsx # CREAR
└── components/notifications/
├── TemplateCard.tsx # CREAR
├── TemplateForm.tsx # CREAR
└── ChannelConfig.tsx # CREAR
```
**Criterios de Aceptación:**
- [ ] CRUD de templates de notificación
- [ ] Configuración por canal (email, push, in-app, whatsapp)
- [ ] Preview de template
- [ ] Activar/desactivar templates
- [ ] Historial de notificaciones enviadas
---
## SPRINT 2: MÓDULOS COMERCIALES (P1)
**Objetivo:** Implementar UI para módulos comerciales avanzados
**SP Total:** 21
**Paralelismo:** ST-2.1, ST-2.2, ST-2.3 pueden ejecutarse en paralelo
### ST-2.1: Portfolio UI Completo
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-2.1-PORTFOLIO-UI |
| **SP** | 5 |
| **Prioridad** | P1 |
| **Dependencias** | Ninguna |
| **Paralelizable** | Sí |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Revisar usePortfolio (21 funciones), SAAS-019-portfolio.md | Entender modelo |
| **A** | Diseñar flujo Category→Product→Variant→Price | Wireframes |
| **P** | Definir 6 páginas y 7 componentes | Arquitectura UI |
| **E** | Implementar páginas usando hooks existentes | Código funcional |
| **V** | Validar CRUD completo, árbol de categorías | Tests E2E |
| **D** | Crear ET-SAAS-019-frontend.md | Docs técnicas |
**Archivos a crear:**
```
frontend/src/
├── pages/dashboard/portfolio/
│ ├── PortfolioDashboardPage.tsx # Resumen, stats
│ ├── CategoriesPage.tsx # Árbol + CRUD
│ ├── CategoryDetailPage.tsx # Subcategorías, productos
│ ├── ProductsPage.tsx # Grid filtrable
│ ├── ProductDetailPage.tsx # Variantes, precios
│ └── ProductFormPage.tsx # Crear/editar
└── components/portfolio/
├── CategoryTree.tsx # Árbol jerárquico
├── CategoryForm.tsx
├── ProductCard.tsx
├── ProductForm.tsx
├── VariantList.tsx
├── PriceTable.tsx
└── ProductFilters.tsx
```
**Rutas a agregar en router/index.tsx:**
```typescript
{ path: 'portfolio', element: <PortfolioDashboardPage /> },
{ path: 'portfolio/categories', element: <CategoriesPage /> },
{ path: 'portfolio/categories/:id', element: <CategoryDetailPage /> },
{ path: 'portfolio/products', element: <ProductsPage /> },
{ path: 'portfolio/products/new', element: <ProductFormPage /> },
{ path: 'portfolio/products/:id', element: <ProductDetailPage /> },
{ path: 'portfolio/products/:id/edit', element: <ProductFormPage /> },
```
**Criterios de Aceptación:**
- [ ] Árbol de categorías navegable
- [ ] CRUD completo de categorías
- [ ] Grid de productos con filtros
- [ ] Gestión de variantes por producto
- [ ] Gestión de precios (multi-moneda si aplica)
- [ ] Duplicación de productos
- [ ] Cambio de estado (activo/inactivo)
---
### ST-2.2: MLM UI Completo
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-2.2-MLM-UI |
| **SP** | 8 |
| **Prioridad** | P1 |
| **Dependencias** | ST-2.1 (Portfolio) para contexto de productos |
| **Paralelizable** | Sí (con precaución) |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Revisar useMlm (18 funciones), SAAS-021-mlm.md, entities | Entender estructuras |
| **A** | Diseñar visualización de árbol de red | Componente NetworkTree |
| **P** | Definir 7 páginas y 8 componentes | Arquitectura UI |
| **E** | Implementar con visualización de árbol D3/react-tree | Código funcional |
| **V** | Validar navegación de red, cálculo comisiones | Tests E2E |
| **D** | Crear ET-SAAS-021-frontend.md | Docs técnicas |
**Archivos a crear:**
```
frontend/src/
├── pages/dashboard/mlm/
│ ├── MLMDashboardPage.tsx # Stats, resumen red
│ ├── StructuresPage.tsx # Lista estructuras
│ ├── StructureDetailPage.tsx # Visualización árbol
│ ├── NodesPage.tsx # Grid de nodos
│ ├── NodeDetailPage.tsx # Perfil nodo, downlines
│ ├── RanksPage.tsx # Niveles y requisitos
│ └── MyNetworkPage.tsx # Mi árbol personal
└── components/mlm/
├── NetworkTree.tsx # Visualización árbol (D3 o similar)
├── StructureCard.tsx
├── StructureForm.tsx
├── NodeCard.tsx
├── RankBadge.tsx
├── CommissionsSummary.tsx
├── DownlineList.tsx
└── MLMStatsCard.tsx
```
**Consideraciones especiales:**
- NetworkTree puede usar `react-d3-tree` o `react-organizational-chart`
- Considerar lazy loading para redes grandes (>100 nodos)
- Implementar zoom y pan para navegación
**Criterios de Aceptación:**
- [ ] Visualización de árbol de red interactivo
- [ ] Navegación entre nodos (click para ver detalle)
- [ ] Vista de mi red personal
- [ ] Lista de rangos con requisitos
- [ ] Resumen de comisiones por período
- [ ] Histórico de promociones/demociones
- [ ] Exportación de estructura
---
### ST-2.3: Goals UI Completo
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-2.3-GOALS-UI |
| **SP** | 8 |
| **Prioridad** | P1 |
| **Dependencias** | Ninguna |
| **Paralelizable** | Sí |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Revisar useGoals (14 funciones), SAAS-022-goals.md | Entender modelo OKR |
| **A** | Diseñar flujo Definition→Assignment→Progress→Report | UX flow |
| **P** | Definir 7 páginas y 6 componentes | Arquitectura UI |
| **E** | Implementar con progress bars y gráficos | Código funcional |
| **V** | Validar tracking de progreso, milestones | Tests E2E |
| **D** | Crear ET-SAAS-022-frontend.md | Docs técnicas |
**Archivos a crear:**
```
frontend/src/
├── pages/dashboard/goals/
│ ├── GoalsDashboardPage.tsx # KPIs, tendencias
│ ├── DefinitionsPage.tsx # CRUD definiciones
│ ├── DefinitionDetailPage.tsx # Detalle + assignments
│ ├── AssignmentsPage.tsx # Lista asignaciones
│ ├── AssignmentDetailPage.tsx # Progreso individual
│ ├── MyGoalsPage.tsx # Mis metas
│ └── ReportsPage.tsx # Reportes, exportación
└── components/goals/
├── GoalCard.tsx
├── GoalForm.tsx
├── GoalProgressBar.tsx # Con milestones
├── GoalAssignmentCard.tsx
├── ProgressLogList.tsx
└── GoalsKPIGrid.tsx
```
**Criterios de Aceptación:**
- [ ] CRUD de definiciones de metas
- [ ] Asignación a usuarios/equipos
- [ ] Tracking de progreso con logs
- [ ] Visualización de milestones
- [ ] Dashboard con KPIs
- [ ] Reportes por período
- [ ] Notificaciones de milestones alcanzados
---
## SPRINT 3: CALIDAD Y TESTS (P2)
**Objetivo:** Mejorar calidad, accesibilidad y cobertura de tests
**SP Total:** 14
**Paralelismo:** Todas las subtareas pueden ejecutarse en paralelo
### ST-3.1: Mejora Accesibilidad WCAG 2.1
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-3.1-WCAG-IMPROVE |
| **SP** | 5 |
| **Prioridad** | P2 |
| **Dependencias** | Sprint 1 y 2 completados |
| **Paralelizable** | Sí |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Auditar con axe DevTools, WAVE | Lista de issues |
| **A** | Categorizar por severidad y esfuerzo | Plan priorizado |
| **P** | Definir fixes para 90% cobertura | Checklist |
| **E** | Aplicar fixes en ~20 componentes | Código mejorado |
| **V** | Re-auditar, keyboard nav test | Score WCAG |
| **D** | Crear ACCESSIBILITY-REPORT.md | Docs |
**Áreas a mejorar:**
```
1. Semantic HTML
- Reemplazar <div onClick> → <button>
- Agregar <main>, <nav>, <article> donde falten
2. ARIA Labels
- aria-label en iconos sin texto
- aria-describedby en campos con validación
- role="dialog" en modales
3. Keyboard Navigation
- Focus trap en modales
- Skip links al contenido principal
- Arrow key navigation en menús
4. Color Contrast
- Verificar ratios en dark mode
- Ajustar grays de Tailwind si necesario
5. Focus Indicators
- focus:ring-2 focus:ring-primary en todos los interactivos
- focus-visible para mejor UX
```
**Criterios de Aceptación:**
- [ ] 0 errores críticos en axe DevTools
- [ ] <5 warnings en WAVE
- [ ] Navegación completa por teclado
- [ ] Ratio contraste 4.5:1 en textos
- [ ] Focus visible en todos los elementos
---
### ST-3.2: Tests Unitarios Frontend
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-3.2-UNIT-TESTS |
| **SP** | 5 |
| **Prioridad** | P2 |
| **Dependencias** | Ninguna |
| **Paralelizable** | |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Revisar cobertura actual, identificar gaps | Lista de módulos |
| **A** | Priorizar por criticidad (auth, billing) | Plan de tests |
| **P** | Definir 50+ tests para hooks y componentes | Test specs |
| **E** | Implementar tests con Vitest + Testing Library | Código tests |
| **V** | npm run test:coverage 70%+ | Reporte cobertura |
| **D** | Actualizar README con instrucciones | Docs |
**Tests a crear:**
```
frontend/src/__tests__/
├── hooks/
│ ├── useAuth.test.ts # 10 tests
│ ├── useRbac.test.ts # 8 tests
│ ├── useGoals.test.ts # 8 tests
│ ├── useMlm.test.ts # 8 tests
│ └── usePortfolio.test.ts # 8 tests
├── components/
│ ├── rbac/RoleForm.test.tsx # 5 tests
│ ├── goals/GoalProgressBar.test.tsx # 5 tests
│ └── mlm/NetworkTree.test.tsx # 5 tests
└── pages/
├── RolesPage.test.tsx # 5 tests
└── GoalsDashboardPage.test.tsx # 5 tests
```
**Criterios de Aceptación:**
- [ ] 50+ tests nuevos
- [ ] Cobertura hooks 80%
- [ ] Cobertura componentes críticos 70%
- [ ] Todos los tests pasan
- [ ] CI/CD ejecuta tests automáticamente
---
### ST-3.3: Documentación Páginas Faltantes
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-3.3-DOCS-PAGES |
| **SP** | 3 |
| **Prioridad** | P2 |
| **Dependencias** | Sprint 2 completado |
| **Paralelizable** | |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Listar 11 páginas sin doc (del análisis) | Lista completa |
| **A** | Revisar cada página, extraer specs | Información recopilada |
| **P** | Definir formato estándar de spec | Template |
| **E** | Crear 11 specs en docs/05-frontend/ | Archivos .md |
| **V** | Verificar links, coherencia con código | Review |
| **D** | Actualizar FRONTEND-PAGES-SPEC.md | Índice actualizado |
**Páginas a documentar:**
1. DashboardSettingsPage
2. DashboardStoragePage
3. DashboardAnalyticsPage
4. SettingsProfilePage
5. SettingsSecurityPage
6. OnboardingSteps 4-6
7. AdminWebhooksPage
8. AdminNotificationsPage
9. AdminAuditPage
10. AdminRbacPage
11. PortfolioPages (nuevas)
**Criterios de Aceptación:**
- [ ] 11 specs creadas
- [ ] Formato consistente
- [ ] Incluye: props, rutas, componentes usados
- [ ] Links a código fuente
- [ ] Índice actualizado
---
### ST-3.4: Eliminar Dead Code
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-3.4-DEAD-CODE |
| **SP** | 1 |
| **Prioridad** | P2 |
| **Dependencias** | ST-2.1 Portfolio completado |
| **Paralelizable** | |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Verificar uso de usePortfolio tras implementar UI | Estado actual |
| **A** | Si UI usa hook mantener; si no eliminar | Decisión |
| **P** | Plan de eliminación segura | Checklist |
| **E** | Eliminar código no usado, actualizar imports | Código limpio |
| **V** | npm run build, npm run lint | Build exitoso |
| **D** | Documentar decisión en ADR o README | Registro |
**Nota:** Esta subtarea depende de si Portfolio UI usa el hook existente o crea uno nuevo.
---
## SPRINT 4: LIMPIEZA Y DOCUMENTACIÓN (P3)
**Objetivo:** Limpiar archivos obsoletos y actualizar documentación
**SP Total:** 3
**Paralelismo:** Ambas subtareas pueden ejecutarse en paralelo
### ST-4.1: Purga Documentación Obsoleta
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-4.1-PURGE-DOCS |
| **SP** | 1 |
| **Prioridad** | P3 |
| **Dependencias** | Ninguna |
| **Paralelizable** | |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Listar 57 archivos a purgar (del análisis previo) | Lista verificada |
| **A** | Verificar que no hay referencias activas | grep results |
| **P** | Plan de backup y eliminación | Script bash |
| **E** | Ejecutar purga de _archive/ | 620 KB liberados |
| **V** | Verificar que nada se rompe | Build exitoso |
| **D** | Documentar en CHANGELOG | Registro |
**Carpetas a purgar:**
```bash
# Verificar referencias primero
grep -r "2026-01-07-trazas" orchestration/ docs/
grep -r "simco-v37" orchestration/ docs/
grep -r "sprint5" orchestration/ docs/
# Backup
cp -r orchestration/_archive/ orchestration/_archive_backup_$(date +%Y%m%d)/
# Purgar
rm -rf orchestration/_archive/2026-01-07-trazas/
rm -rf orchestration/_archive/2026-01-10-simco-v37/
rm -rf orchestration/_archive/2026-01-10-sprint5/
```
---
### ST-4.2: Actualizar Inventarios y Specs
| Aspecto | Detalle |
|---------|---------|
| **ID** | ST-4.2-UPDATE-INVENTORY |
| **SP** | 2 |
| **Prioridad** | P3 |
| **Dependencias** | Sprints 1-3 completados |
| **Paralelizable** | |
**CAPVED:**
| Fase | Actividad | Output |
|------|-----------|--------|
| **C** | Revisar estado actual de inventarios | Gaps identificados |
| **A** | Comparar con código implementado | Diferencias |
| **P** | Plan de actualización | Checklist |
| **E** | Actualizar YAML y MD files | Archivos actualizados |
| **V** | Validar coherencia con código | Review |
| **D** | Commit con mensaje descriptivo | Git history |
**Archivos a actualizar:**
```
orchestration/inventarios/
├── FRONTEND_INVENTORY.yml # Agregar nuevas páginas, componentes
├── MASTER_INVENTORY.yml # Actualizar estadísticas
└── DATABASE_INVENTORY.yml # Si hay cambios
docs/05-frontend/
├── FRONTEND-PAGES-SPEC.md # Agregar páginas nuevas
├── FRONTEND-ROUTING.md # Agregar nuevas rutas
└── FRONTEND-COMPONENTS.md # Agregar nuevos componentes (si existe)
docs/_MAP.md # Actualizar índice general
```
---
## MAPA DE DEPENDENCIAS
```
┌─────────────────────────────────────────────────────────────────┐
│ SPRINT 1 (P0) - 11 SP │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────────┐ │
│ │ ST-1.1 │ │ ST-1.2 │ │ ST-1.3 │ │
│ │ RBAC │ │ Audit │ │ Notifications│ PARALELO │
│ │ 5 SP │ │ 3 SP │ │ 3 SP │ │
│ └────┬─────┘ └────┬─────┘ └──────┬───────┘ │
│ │ │ │ │
│ └──────────────┼────────────────┘ │
│ │ │
│ ▼ │
├─────────────────────────────────────────────────────────────────┤
│ SPRINT 2 (P1) - 21 SP │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ ST-2.1 │ │ ST-2.2 │ │ ST-2.3 │ │
│ │Portfolio │◄──│ MLM │ │ Goals │ PARALELO │
│ │ 5 SP │ │ 8 SP │ │ 8 SP │ (MLM usa │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ Portfolio │
│ │ │ │ opcional) │
│ └──────────────┼──────────────┘ │
│ │ │
│ ▼ │
├─────────────────────────────────────────────────────────────────┤
│ SPRINT 3 (P2) - 14 SP │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ ST-3.1 │ │ ST-3.2 │ │ ST-3.3 │ │ ST-3.4 │ │
│ │ WCAG │ │ Tests │ │ Docs │ │ Dead │ │
│ │ 5 SP │ │ 5 SP │ │ 3 SP │ │ Code │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ │ 1 SP │ │
│ │ │ │ └────┬─────┘ │
│ └──────────────┼──────────────┼──────────────┘ │
│ │ │ │
│ ▼ │ │
├─────────────────────────────────────────────────────────────────┤
│ SPRINT 4 (P3) - 3 SP │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ ST-4.1 │ │ ST-4.2 │ │
│ │ Purge │ │ Inventory│ PARALELO │
│ │ 1 SP │ │ 2 SP │ │
│ └──────────┘ └──────────┘ │
│ │
│ ▼ │
│ COMPLETADO │
└─────────────────────────────────────────────────────────────────┘
```
---
## ORQUESTACIÓN DE SUBAGENTES
### Configuración Recomendada
```yaml
# Para Sprint 1 (3 subagentes en paralelo)
subagentes_sprint_1:
- id: SA-1.1
tipo: general-purpose
tarea: ST-1.1-RBAC-FRONTEND
archivos_foco:
- backend/src/modules/rbac/
- frontend/src/pages/dashboard/rbac/
- frontend/src/hooks/useRbac.ts
- id: SA-1.2
tipo: general-purpose
tarea: ST-1.2-AUDIT-COMPLETE
archivos_foco:
- backend/src/modules/audit/
- frontend/src/pages/dashboard/AuditLogsPage.tsx
- frontend/src/hooks/useAudit.ts
- id: SA-1.3
tipo: general-purpose
tarea: ST-1.3-NOTIFICATIONS-COMPLETE
archivos_foco:
- backend/src/modules/notifications/
- frontend/src/pages/dashboard/notifications/
- frontend/src/hooks/useNotifications.ts
# Para Sprint 2 (3 subagentes con dependencia parcial)
subagentes_sprint_2:
- id: SA-2.1
tipo: general-purpose
tarea: ST-2.1-PORTFOLIO-UI
prioridad: 1 # Ejecutar primero
- id: SA-2.2
tipo: general-purpose
tarea: ST-2.2-MLM-UI
prioridad: 2
esperar: SA-2.1 # Opcional, por contexto de productos
- id: SA-2.3
tipo: general-purpose
tarea: ST-2.3-GOALS-UI
prioridad: 1 # Independiente, ejecutar en paralelo
```
### Prompt Template para Subagentes
```markdown
# Subtarea: [ST-X.X]
## Contexto
- Proyecto: template-saas
- Módulo: [nombre]
- Hooks disponibles: [lista]
- Backend endpoints: [X endpoints]
## Objetivo
[Descripción CAPVED]
## Archivos a crear/modificar
[Lista específica]
## Criterios de aceptación
[Lista verificable]
## Validaciones requeridas
- npm run build
- npm run lint
- Pruebas manuales de flujo
- Actualizar inventarios
## Output esperado
- Código funcional
- Documentación actualizada
- Tests si aplica
```
---
## RESUMEN FINAL
| Sprint | Subtareas | SP | Paralelismo | Duración Estimada |
|--------|-----------|-----|-------------|-------------------|
| Sprint 1 | 3 | 11 | 100% | 1-2 días |
| Sprint 2 | 3 | 21 | 66% | 2-3 días |
| Sprint 3 | 4 | 14 | 100% | 1-2 días |
| Sprint 4 | 2 | 3 | 100% | 0.5 días |
| **Total** | **12** | **49** | - | **5-8 días** |
### Próximos Pasos
1. **Aprobación del plan** por parte del usuario
2. **Selección de Sprint** a ejecutar
3. **Orquestación de subagentes** según mapa de dependencias
4. **Ejecución CAPVED** de cada subtarea
5. **Validación cruzada** al completar cada sprint
6. **Actualización de inventarios** al finalizar
---
*Generado: 2026-02-03 | Agente: Claude Opus 4.5 | Metodología: SIMCO v4.0.0 + CAPVED*