[TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI] docs: Add frontend UX/UI audit task planning
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

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>
This commit is contained in:
Adrian Flores Cortes 2026-02-03 19:47:39 -06:00
parent fd12ab6b6d
commit ea1ad056de
5 changed files with 1676 additions and 4 deletions

View File

@ -0,0 +1,394 @@
# FASE A: ANÁLISIS - Auditoría Frontend/UX-UI
**ID:** TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI
**Fecha:** 2026-02-03
**Estado:** COMPLETADA
**SP Ejecutados:** 13
---
## 1. ANÁLISIS DE COHERENCIA
### 1.1 Backend → Frontend (Por Módulo)
| Módulo | Endpoints Backend | API Frontend | UI Pages | Coherencia |
|--------|-------------------|--------------|----------|------------|
| Auth | 21 | 15 | 4 | 71% |
| Users | 8 | 8 | 1 | 100% |
| Tenants | 12 | 8 | 2 | 67% |
| Billing | 25 | 12 | 1 | 48% |
| Sales | 36 | 36 | 6 | **100%** |
| Commissions | 37 | 37 | 5 | **100%** |
| Portfolio | 21 | 0 | 0 | **0%** |
| MLM | 29 | 29 | 0 | **0%** |
| Goals | 22 | 22 | 0 | **0%** |
| Audit | 8 | 2 | 1 | 25% |
| RBAC | 14 | 0 | 0 | **0%** |
| Notifications | 17 | 8 | 1 | 47% |
| Webhooks | 10 | 10 | 1 | 100% |
| Storage | 12 | 12 | 1 | 100% |
| Feature Flags | 8 | 8 | 1 | 100% |
| AI | 6 | 6 | 1 | 100% |
| WhatsApp | 8 | 8 | 1 | 100% |
### 1.2 Análisis de Gaps Críticos
```
┌────────────────────────────────────────────────────────────────┐
│ COHERENCIA POR CAPA │
├────────────────────────────────────────────────────────────────┤
│ Backend (328 endpoints) │
│ │ │
│ ▼ │
│ API Services Frontend (190 funciones) ← 58% cobertura │
│ │ │
│ ▼ │
│ Hooks (53+ funciones) ← 100% de APIs cubiertas │
│ │ │
│ ▼ │
│ Páginas UI (56) ← GAPS en MLM, Goals, Portfolio, RBAC │
└────────────────────────────────────────────────────────────────┘
```
---
## 2. GAPS IDENTIFICADOS POR PRIORIDAD
### 2.1 P0 - Críticos (Bloquean Funcionalidad Core)
| ID | Gap | Impacto | Endpoints | SP Estimados |
|----|-----|---------|-----------|--------------|
| GAP-FE-01 | Audit sin UI completa | Admin no puede ver logs | 8 | 3 |
| GAP-FE-02 | RBAC sin frontend | No hay gestión de roles | 14 | 5 |
| GAP-FE-03 | Notifications incompleto | Configuración limitada | 17 | 3 |
| **Total P0** | | | **39** | **11** |
**Detalle GAP-FE-01 (Audit):**
- Falta: Filtros avanzados, exportación, gráficos de actividad
- Tiene: Lista básica de logs
- Componentes existentes: AuditLogRow, AuditFilters, AuditStatsCard
- Acción: Completar AuditLogsPage con filtros y stats
**Detalle GAP-FE-02 (RBAC):**
- Falta: 100% de UI
- Tiene: 0% (Solo guards de protección)
- Acción: Crear RolesPage, PermissionsPage, RoleAssignmentsPage
**Detalle GAP-FE-03 (Notifications):**
- Falta: Gestión de templates, configuración por canal
- Tiene: NotificationBell, NotificationDrawer básico
- Acción: Completar NotificationsManagementPage
### 2.2 P1 - Altos (Módulos Comerciales Sin UI)
| ID | Gap | Hooks Disponibles | Páginas Faltantes | SP Estimados |
|----|-----|-------------------|-------------------|--------------|
| GAP-FE-04 | Portfolio sin UI | 21 funciones | 4-6 páginas | 5 |
| GAP-FE-05 | MLM sin UI | 18 funciones | 7 páginas | 8 |
| GAP-FE-06 | Goals sin UI | 14 funciones | 7 páginas | 8 |
| **Total P1** | | **53 funciones** | **18-20 páginas** | **21** |
**Detalle GAP-FE-04 (Portfolio):**
```
Páginas a crear:
├── CategoriesPage.tsx → useCategories(), useCategoryTree()
├── CategoryDetailPage.tsx → useCategory(id), useCreateCategory(), etc.
├── ProductsPage.tsx → useProducts(), filters
├── ProductDetailPage.tsx → useProduct(id), variants, prices
├── ProductFormPage.tsx → useCreateProduct(), useUpdateProduct()
└── (Opcional) PricesPage.tsx → useProductPrices()
```
**Detalle GAP-FE-05 (MLM):**
```
Páginas a crear:
├── MLMDashboardPage.tsx → Métricas, resumen de red
├── StructuresPage.tsx → useStructures(), crear/editar
├── StructureDetailPage.tsx → useStructure(id), visualización árbol
├── NodesPage.tsx → useNodes(), grid con filtros
├── NodeDetailPage.tsx → useNode(id), downlines, comisiones
├── RanksPage.tsx → useRanks(), requisitos por nivel
└── MyNetworkPage.tsx → useMyNetwork(), árbol personal
```
**Detalle GAP-FE-06 (Goals):**
```
Páginas a crear:
├── GoalsDashboardPage.tsx → KPIs, progreso general
├── DefinitionsPage.tsx → useGoalDefinitions(), CRUD
├── DefinitionDetailPage.tsx → useGoalDefinition(id), assignments
├── AssignmentsPage.tsx → useGoalAssignments(), filtros
├── AssignmentDetailPage.tsx → useGoalAssignment(id), progress logs
├── MyGoalsPage.tsx → useMyGoals(), metas personales
└── ReportsPage.tsx → useGoalReports(), exportación
```
### 2.3 P2 - Medios (Mejoras de Calidad)
| ID | Gap | Descripción | Archivos Afectados | SP |
|----|-----|-------------|-------------------|-----|
| GAP-FE-07 | Documentación páginas | 11 páginas sin spec | docs/05-frontend/ | 3 |
| GAP-FE-08 | WCAG 2.1 AA | 67% → 90% | ~20 componentes | 5 |
| GAP-FE-09 | Tests unitarios | Cobertura <50% | __tests__/ | 5 |
| GAP-FE-10 | usePortfolio dead code | 21 funciones sin uso | hooks/usePortfolio.ts | 1 |
| **Total P2** | | | | **14** |
**Detalle GAP-FE-08 (Accesibilidad):**
| Aspecto | Estado Actual | Objetivo | Acción |
|---------|---------------|----------|--------|
| Semantic HTML | 70% | 95% | Reemplazar div→button, etc. |
| ARIA labels | 60% | 90% | Agregar aria-label en iconos |
| Keyboard nav | 75% | 95% | Focus management en modales |
| Color contrast | 80% | 100% | Ajustar colores Tailwind |
| Focus visible | 65% | 100% | Agregar focus:ring en todos |
### 2.4 P3 - Bajos (Limpieza)
| ID | Gap | Descripción | Acción | SP |
|----|-----|-------------|--------|-----|
| GAP-FE-11 | Docs obsoletos | 57 archivos | Purgar _archive/ | 1 |
| GAP-FE-12 | Specs desactualizadas | FRONTEND-*.md | Actualizar | 2 |
| **Total P3** | | | | **3** |
---
## 3. ANÁLISIS DE COMPONENTES
### 3.1 Componentes Existentes vs Requeridos
| Categoría | Existentes | Requeridos | Gap |
|-----------|------------|------------|-----|
| Auth | 1 (OAuthButtons) | 1 | 0 |
| AI | 3 | 3 | 0 |
| Analytics | 2 | 4 | 2 |
| Audit | 4 | 6 | 2 |
| Common | 2 | 5 | 3 |
| Feature Flags | 3 | 3 | 0 |
| Notifications | 5 | 7 | 2 |
| Storage | 4 | 4 | 0 |
| Webhooks | 3 | 3 | 0 |
| WhatsApp | 1 | 1 | 0 |
| **MLM** | **0** | **8** | **8** |
| **Goals** | **0** | **6** | **6** |
| **Portfolio** | **0** | **7** | **7** |
| **RBAC** | **0** | **5** | **5** |
| **Total** | **28** | **62** | **34** |
### 3.2 Componentes Faltantes Detallados
**MLM (8 componentes):**
- StructureCard
- StructureForm
- NetworkTree (visualización árbol)
- NodeCard
- RankBadge
- CommissionsSummary
- DownlineList
- MLMDashboardStats
**Goals (6 componentes):**
- GoalCard
- GoalForm
- ProgressBar (custom con milestones)
- GoalAssignmentCard
- ProgressLogList
- GoalsKPIGrid
**Portfolio (7 componentes):**
- CategoryTree
- CategoryForm
- ProductCard
- ProductForm
- VariantList
- PriceTable
- ProductFilters
**RBAC (5 componentes):**
- RoleCard
- RoleForm
- PermissionsMatrix
- UserRoleAssignment
- RolePermissionsEditor
---
## 4. ANÁLISIS DE RUTAS
### 4.1 Rutas Actuales (45)
| Área | Rutas | Estado |
|------|-------|--------|
| /auth/* | 4 | OK |
| /dashboard | 1 | OK |
| /dashboard/sales/* | 6 | OK |
| /dashboard/commissions/* | 5 | OK |
| /dashboard/mlm/* | 7 | **DEFINIDAS, SIN PÁGINA** |
| /dashboard/goals/* | 6 | **DEFINIDAS, SIN PÁGINA** |
| /dashboard/rbac/* | 1 | **PARCIAL** |
| /dashboard/notifications | 1 | OK |
| /dashboard/* (otros) | 11 | OK |
| /superadmin/* | 4 | OK |
| /onboarding | 1 | OK |
### 4.2 Rutas a Agregar
| Ruta | Página | Prioridad |
|------|--------|-----------|
| /dashboard/rbac/roles | RolesPage | P0 |
| /dashboard/rbac/permissions | PermissionsPage | P0 |
| /dashboard/notifications/templates | TemplatesPage | P0 |
| /dashboard/portfolio | PortfolioPage | P1 |
| /dashboard/portfolio/categories | CategoriesPage | P1 |
| /dashboard/portfolio/products | ProductsPage | P1 |
| /dashboard/portfolio/products/:id | ProductDetailPage | P1 |
**Nota:** Las rutas MLM y Goals ya están definidas en router pero apuntan a páginas vacías o inexistentes.
---
## 5. ANÁLISIS DE FLUJOS UX
### 5.1 Flujos Completos
| Flujo | Páginas | Estado |
|-------|---------|--------|
| Login → Dashboard | 3 | OK |
| Register → Onboarding → Dashboard | 6 | OK |
| Sales: Lead → Opportunity → Close | 4 | OK |
| Billing: Subscribe → Manage → Cancel | 3 | OK |
| Users: Invite → Accept → Profile | 4 | OK |
### 5.2 Flujos Incompletos
| Flujo | Páginas Existentes | Faltantes | Impacto |
|-------|-------------------|-----------|---------|
| MLM: Structure → Nodes → Commissions | 0 | 5 | ALTO |
| Goals: Define → Assign → Track → Report | 0 | 4 | ALTO |
| Portfolio: Category → Product → Variant → Price | 0 | 4 | MEDIO |
| RBAC: Role → Permissions → Assign to User | 0 | 3 | CRÍTICO |
| Audit: Search → Filter → Export | 1 | 2 | MEDIO |
### 5.3 User Stories No Implementadas
| ID | Historia | Módulo | Prioridad |
|----|----------|--------|-----------|
| US-MLM-01 | Como admin, quiero ver la estructura de red para entender la organización | MLM | P1 |
| US-MLM-02 | Como usuario, quiero ver mi árbol de referidos para tracking | MLM | P1 |
| US-GOALS-01 | Como manager, quiero crear objetivos para mi equipo | Goals | P1 |
| US-GOALS-02 | Como empleado, quiero ver mi progreso en mis metas | Goals | P1 |
| US-PORT-01 | Como admin, quiero gestionar el catálogo de productos | Portfolio | P1 |
| US-RBAC-01 | Como admin, quiero asignar roles a usuarios | RBAC | P0 |
---
## 6. ANÁLISIS DE DEPENDENCIAS
### 6.1 Dependencias Internas (Frontend)
```
┌─────────────────────────────────────────────────────┐
│ DEPENDENCIAS │
├─────────────────────────────────────────────────────┤
│ MLM Pages │
│ ├── useMlm hook (✓ EXISTE) │
│ ├── DashboardLayout (✓ EXISTE) │
│ ├── NetworkTree component (✗ CREAR) │
│ └── router/index.tsx (✓ RUTAS DEFINIDAS) │
│ │
│ Goals Pages │
│ ├── useGoals hook (✓ EXISTE) │
│ ├── DashboardLayout (✓ EXISTE) │
│ ├── ProgressBar component (✗ CREAR) │
│ └── router/index.tsx (✓ RUTAS DEFINIDAS) │
│ │
│ Portfolio Pages │
│ ├── usePortfolio hook (✓ EXISTE) │
│ ├── DashboardLayout (✓ EXISTE) │
│ ├── CategoryTree component (✗ CREAR) │
│ └── router/index.tsx (✗ AGREGAR RUTAS) │
│ │
│ RBAC Pages │
│ ├── useRbac hook (✗ CREAR) │
│ ├── DashboardLayout (✓ EXISTE) │
│ ├── PermissionsMatrix component (✗ CREAR) │
│ └── router/index.tsx (✗ AGREGAR RUTAS) │
└─────────────────────────────────────────────────────┘
```
### 6.2 Orden de Implementación Sugerido
```
1. [P0] RBAC API + Hook + Pages → Desbloquea gestión de permisos
2. [P0] Audit completar → Desbloquea auditoría avanzada
3. [P0] Notifications completar → Desbloquea configuración notif.
4. [P1] Portfolio Pages → Desbloquea catálogo (usa en Sales)
5. [P1] Goals Pages → Desbloquea metas (independiente)
6. [P1] MLM Pages → Desbloquea MLM (usa Portfolio, Commissions)
7. [P2] Accesibilidad → Mejora UX general
8. [P2] Tests → Aumenta confiabilidad
9. [P3] Documentación + Purga → Limpieza final
```
---
## 7. MÉTRICAS DEL ANÁLISIS
| Métrica | Valor |
|---------|-------|
| Gaps totales identificados | 12 |
| Gaps P0 (críticos) | 3 |
| Gaps P1 (altos) | 3 |
| Gaps P2 (medios) | 4 |
| Gaps P3 (bajos) | 2 |
| Páginas faltantes | 20-24 |
| Componentes faltantes | 34 |
| Rutas a agregar | 7 |
| SP total estimado | 49 |
| User stories sin implementar | 6 |
---
## 8. CONCLUSIONES DEL ANÁLISIS
### Fortalezas
- Stack tecnológico moderno y bien configurado
- Hooks API completos para todos los módulos (53+ funciones)
- Módulos core funcionando correctamente
- Buena estructura de carpetas feature-based
- Testing E2E con Playwright establecido
### Debilidades
- 4 módulos sin UI (MLM, Goals, Portfolio, RBAC)
- Coherencia Backend→Frontend al 58%
- Documentación frontend desactualizada
- Accesibilidad parcial (67%)
- Tests unitarios frontend escasos
### Oportunidades
- Hooks existentes permiten implementación rápida de UI
- Componentes base reutilizables disponibles
- Patrones establecidos en módulos existentes (Sales, Commissions)
- Subagentes pueden paralelizar implementación
### Riesgos
- Módulos MLM y Goals tienen lógica de negocio compleja
- Componente NetworkTree (árbol) requiere diseño específico
- Falta de tests puede introducir regresiones
- Documentación desactualizada puede causar confusión
---
*Generado: 2026-02-03 | Agente: Claude Opus 4.5 | Metodología: CAPVED*

View File

@ -0,0 +1,332 @@
# FASE C: CONTEXTO - Auditoría Frontend/UX-UI
**ID:** TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI
**Fecha:** 2026-02-03
**Estado:** COMPLETADA
**SP Ejecutados:** 8
---
## 1. ESTADO ACTUAL DEL FRONTEND
### 1.1 Estructura del Proyecto
```
frontend/src/
├── __tests__/ # Tests (unit, integration)
├── components/ # 28 componentes React
│ ├── ai/ # AIChat, AISettings, ChatMessage
│ ├── analytics/ # MetricCard, TrendChart
│ ├── audit/ # ActivityTimeline, AuditFilters, AuditLogRow, AuditStatsCard
│ ├── auth/ # OAuthButtons
│ ├── common/ # ExportButton, ExportModal
│ ├── feature-flags/ # FeatureFlagCard, FeatureFlagForm, TenantOverridesPanel
│ ├── notifications/ # NotificationBell, NotificationDrawer, NotificationItem, DevicesManager
│ ├── storage/ # FileItem, FileList, FileUpload, StorageUsageCard
│ ├── webhooks/ # WebhookCard, WebhookDeliveryList, WebhookForm
│ └── whatsapp/ # WhatsAppTestMessage
├── hooks/ # 24 hooks personalizados
├── layouts/ # 2 layouts (AuthLayout, DashboardLayout)
├── pages/ # 56 páginas
├── router/ # Sistema de routing con guards
├── services/ # 26 servicios de API
├── stores/ # 3 stores Zustand (auth, ui)
├── App.tsx # Componente raíz
├── main.tsx # Entry point
└── index.css # Estilos Tailwind
```
### 1.2 Métricas Actuales
| Categoría | Cantidad | Estado |
|-----------|----------|--------|
| Páginas | 56 | Implementadas |
| Componentes | 28 | Implementados |
| Hooks | 24 | Implementados |
| Servicios API | 26 | Implementados |
| Stores Zustand | 3 | Implementados |
| Layouts | 2 | Implementados |
| Rutas | 45 | Configuradas |
| Tests Unit | ~50 | Parciales |
| Tests E2E | 47 | Playwright |
### 1.3 Stack Tecnológico
| Tecnología | Versión | Propósito |
|------------|---------|-----------|
| React | 19.0.0 | UI Framework |
| Vite | 6.0.6 | Build Tool |
| TypeScript | 5.7.2 | Type Safety |
| Zustand | 5.0.2 | State Management |
| TanStack Query | 5.62.16 | Server State |
| React Router | 7.1.1 | Routing |
| Tailwind CSS | 3.4.17 | Styling |
| React Hook Form | 7.54.2 | Forms |
| Recharts | 2.15.0 | Charts |
| Vitest | 4.0.17 | Unit Testing |
| Playwright | 1.40.0 | E2E Testing |
---
## 2. PÁGINAS POR MÓDULO
### 2.1 Módulos Core (Implementados)
| Módulo | Páginas | Rutas | Estado |
|--------|---------|-------|--------|
| Auth | 4 | /auth/* | 100% |
| Dashboard | 10 | /dashboard/* | 100% |
| Billing | 1 | /dashboard/billing | 100% |
| Users | 1 | /dashboard/users | 100% |
| Settings | 4 | /dashboard/settings/* | 100% |
| Superadmin | 3 | /superadmin/* | 100% |
| Onboarding | 1 (4 steps) | /onboarding | 100% |
### 2.2 Módulos Comerciales (Implementados)
| Módulo | Páginas | Rutas | Estado |
|--------|---------|-------|--------|
| Sales | 6 | /dashboard/sales/* | 100% |
| Commissions | 5 | /dashboard/commissions/* | 100% |
| AI | 1 | /dashboard/ai | 100% |
| Storage | 1 | /dashboard/storage | 100% |
| Webhooks | 1 | /dashboard/webhooks | 100% |
| Feature Flags | 1 | /dashboard/feature-flags | 100% |
| Audit | 1 | /dashboard/audit | 100% (básico) |
| WhatsApp | 1 | /dashboard/whatsapp | 100% |
### 2.3 Módulos con Gaps (UI Pendiente)
| Módulo | Backend | Hooks | Páginas UI | Estado |
|--------|---------|-------|------------|--------|
| MLM | 100% | 100% | 0% | **PENDIENTE** |
| Goals | 100% | 100% | 0% | **PENDIENTE** |
| Portfolio | 100% | 100% | 0% | **PENDIENTE** |
### 2.4 Módulos con Frontend Incompleto
| Módulo | Endpoints Backend | API Frontend | Estado |
|--------|-------------------|--------------|--------|
| Audit | 8 | Parcial | 40% |
| RBAC | 14 | 0 | **CRÍTICO** |
| Notifications | 17 | Parcial | 60% |
---
## 3. DOCUMENTACIÓN EXISTENTE
### 3.1 Estándares Aplicables
| Documento | Ubicación | Aplicabilidad |
|-----------|-----------|---------------|
| ESTANDAR-FRONTEND-PROFESIONAL.md | docs/40-estandares/ | 100% |
| SIMCO-FRONTEND.md | orchestration/directivas/simco/ | 100% |
| ESTANDAR-PERFORMANCE.md | docs/40-estandares/ | 90% |
| ESTANDAR-TESTING.md | docs/40-estandares/ | 80% |
| ESTANDAR-SEGURIDAD.md | docs/40-estandares/ | 70% |
| ESTANDAR-DOCUMENTACION.md | docs/40-estandares/ | 85% |
### 3.2 Especificaciones Frontend
| Documento | Ubicación | Estado |
|-----------|-----------|--------|
| FRONTEND-PAGES-SPEC.md | docs/05-frontend/ | Desactualizado |
| FRONTEND-ROUTING.md | docs/05-frontend/ | Desactualizado |
| FRONTEND_INVENTORY.yml | orchestration/inventarios/ | Desactualizado |
### 3.3 Especificaciones de Módulos
| Módulo | Spec Backend | Spec Frontend | Gap |
|--------|--------------|---------------|-----|
| SAAS-018 Sales | 100% | 100% | - |
| SAAS-019 Portfolio | 100% | 0% | **CREAR** |
| SAAS-020 Commissions | 100% | 100% | - |
| SAAS-021 MLM | 100% | 0% | **CREAR** |
| SAAS-022 Goals | 100% | 0% | **CREAR** |
---
## 4. REQUERIMIENTOS APLICABLES
### 4.1 Requerimientos No Funcionales UX
| ID | Descripción | Estado | Cobertura |
|----|-------------|--------|-----------|
| RNF-UX-001 | Responsividad mobile-first | OK | 90% |
| RNF-UX-002 | Accesibilidad WCAG 2.1 AA | PARCIAL | 67% |
| RNF-UX-003 | Feedback visual en acciones | OK | 85% |
| RNF-PERF-001 | Tiempos respuesta <500ms | OK | 95% |
| RNF-PERF-003 | Bundle <500KB gzipped | OK | 100% |
### 4.2 Criterios de Aceptación Frontend
De los documentos SAAS-XXX, los criterios frontend pendientes:
| Módulo | Criterios | Implementados | Pendientes |
|--------|-----------|---------------|------------|
| MLM (SAAS-021) | 12 | 0 | 12 |
| Goals (SAAS-022) | 10 | 0 | 10 |
| Portfolio (SAAS-019) | 8 | 0 | 8 |
| Audit | 6 | 2 | 4 |
| RBAC | 8 | 0 | 8 |
| Notifications | 10 | 6 | 4 |
---
## 5. HOOKS EXISTENTES (Por Usar)
### 5.1 Hooks MLM (useMlm.ts)
```typescript
// Queries
useStructures()
useStructure(id)
useNodes()
useNode(id)
useRanks()
useRank(id)
useNetworkCommissions()
useMyNetwork()
useDownline(nodeId)
// Mutations
useCreateStructure()
useUpdateStructure()
useDeleteStructure()
useCreateNode()
useUpdateNode()
usePromoteNode()
useDemoteNode()
useCalculateCommissions()
```
**Total:** 18 funciones disponibles
### 5.2 Hooks Goals (useGoals.ts)
```typescript
// Queries
useGoalDefinitions()
useGoalDefinition(id)
useGoalAssignments()
useGoalAssignment(id)
useGoalProgress(assignmentId)
useMyGoals()
useGoalReports()
// Mutations
useCreateGoalDefinition()
useUpdateGoalDefinition()
useDeleteGoalDefinition()
useAssignGoal()
useUpdateAssignment()
useLogProgress()
useCompleteGoal()
```
**Total:** 14 funciones disponibles
### 5.3 Hooks Portfolio (usePortfolio.ts)
```typescript
// Categories
useCategories()
useCategory(id)
useCategoryTree()
useCreateCategory()
useUpdateCategory()
useDeleteCategory()
// Products
useProducts()
useProduct(id)
useCreateProduct()
useUpdateProduct()
useUpdateProductStatus()
useDuplicateProduct()
useDeleteProduct()
// Variants & Prices
useProductVariants(productId)
useCreateVariant()
useUpdateVariant()
useDeleteVariant()
useProductPrices(productId)
useCreatePrice()
useUpdatePrice()
useDeletePrice()
```
**Total:** 21 funciones disponibles
---
## 6. TAREAS PREVIAS RELACIONADAS
### 6.1 TASK-2026-02-03-ANALISIS-INTEGRAL-TEMPLATE-SAAS
**Estado:** Completada
**SP:** 81
**Relevancia:** Alta
**Outputs reutilizables:**
- Gaps identificados (16 total, 8 frontend)
- Plan de remediación con SP estimados
- Análisis de coherencia Backend→Frontend (58%)
### 6.2 TASK-2026-01-25-SAAS-021-MLM
**Estado:** Completada
**Nota:** "Backend 100%, Hooks 100%, UI pendiente"
### 6.3 TASK-2026-01-25-SAAS-022-GOALS
**Estado:** Completada
**Nota:** "Backend 100%, Hooks 100%, UI pendiente"
---
## 7. DOCUMENTACIÓN A PURGAR
### 7.1 Archivos Obsoletos Identificados
| Carpeta | Archivos | Estado |
|---------|----------|--------|
| 2026-01-07-trazas/ | 5 | 100% OBSOLETO |
| 2026-01-10-simco-v37/ | 51 | 71% OBSOLETO |
| 2026-01-10-sprint5/ | 19 | 84% OBSOLETO |
| **Total** | **75** | **57 a PURGAR** |
### 7.2 Espacio a Liberar
- Purga inmediata: 620 KB
- Post-revisión: 80 KB
- **Total:** ~700 KB (87%)
---
## 8. RESUMEN DE CONTEXTO
### Estado General
| Aspecto | Estado | Notas |
|---------|--------|-------|
| Infraestructura Frontend | COMPLETA | Stack moderno, bien configurado |
| Módulos Core | COMPLETOS | Auth, Users, Billing, Settings |
| Módulos Comerciales Base | COMPLETOS | Sales, Commissions |
| Módulos Comerciales Avanzados | **PENDIENTES** | MLM, Goals, Portfolio |
| Hooks API | COMPLETOS | 53+ funciones listas para usar |
| Testing | PARCIAL | E2E ok, Unit parciales |
| Documentación Frontend | DESACTUALIZADA | Specs no reflejan estado actual |
| Accesibilidad | PARCIAL | 67% WCAG 2.1 |
### Prioridades Identificadas
1. **P0:** Crear UI para módulos críticos (Audit, RBAC, Notifications)
2. **P1:** Crear UI para módulos comerciales (MLM, Goals, Portfolio)
3. **P2:** Actualizar documentación y mejorar accesibilidad
4. **P3:** Purgar documentación obsoleta
---
*Generado: 2026-02-03 | Agente: Claude Opus 4.5 | Metodología: CAPVED*

View File

@ -0,0 +1,147 @@
# METADATA - TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI
# Auditoría Frontend/UX-UI - Template SaaS
metadata:
version: "1.0.0"
created: "2026-02-03"
updated: "2026-02-03"
task:
id: "TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI"
titulo: "Auditoría y Planificación Frontend/UX-UI - Template SaaS"
tipo: "analysis"
modo: "@ANALYSIS"
estado: "en_progreso"
fase_actual: "PLANIFICACION"
sp_estimados: 89
sp_ejecutados: 0
proyecto:
nombre: "template-saas"
tipo: "PROVIDER"
nivel: "L1A"
perfil:
rol: "Frontend Developer / UX-UI Specialist"
enfoque:
- "Comparación componentes vs requerimientos"
- "Análisis de páginas y routing"
- "Validación de funcionalidades y flujos"
- "Coherencia con documentación"
alcance:
incluye:
- "56 páginas frontend existentes"
- "28 componentes React"
- "24 hooks personalizados"
- "45 rutas definidas"
- "22 módulos SAAS documentados"
- "Estándares ESTANDAR-FRONTEND-PROFESIONAL"
excluye:
- "Backend/API (ya auditado en TASK anterior)"
- "DDL/Database (ya auditado)"
- "Infraestructura CI/CD"
metodologia:
framework: "CAPVED"
fases:
- nombre: "CONTEXTO"
sp: 8
estado: "completada"
descripcion: "Recopilación de información del estado actual"
- nombre: "ANALISIS"
sp: 13
estado: "completada"
descripcion: "Análisis de coherencia y gaps"
- nombre: "PLANIFICACION"
sp: 21
estado: "en_progreso"
descripcion: "Plan de remediación con subtareas CAPVED"
- nombre: "EJECUCION"
sp: 34
estado: "pendiente"
descripcion: "Implementación de UI faltante"
- nombre: "VALIDACION"
sp: 8
estado: "pendiente"
descripcion: "Testing y validación de coherencia"
- nombre: "DOCUMENTACION"
sp: 5
estado: "pendiente"
descripcion: "Actualización de inventarios y docs"
integracion_tareas_existentes:
task_base: "TASK-2026-02-03-ANALISIS-INTEGRAL-TEMPLATE-SAAS"
gaps_heredados:
- id: "GAP-FE-01"
descripcion: "AUDIT sin frontend"
endpoints: 8
prioridad: "P0"
- id: "GAP-FE-02"
descripcion: "RBAC sin frontend"
endpoints: 14
prioridad: "P0"
- id: "GAP-FE-03"
descripcion: "NOTIFICATIONS sin frontend completo"
endpoints: 17
prioridad: "P0"
- id: "GAP-FE-04"
descripcion: "Portfolio sin UI (hooks existen)"
funciones: 21
prioridad: "P1"
- id: "GAP-FE-05"
descripcion: "MLM sin UI (hooks existen)"
paginas: 7
prioridad: "P1"
- id: "GAP-FE-06"
descripcion: "Goals sin UI (hooks existen)"
paginas: 7
prioridad: "P1"
- id: "GAP-FE-07"
descripcion: "11 páginas sin documentación"
paginas: 11
prioridad: "P2"
- id: "GAP-FE-08"
descripcion: "WCAG 2.1 AA parcial"
cobertura: "67%"
prioridad: "P2"
purga_documentacion:
archivos_a_purgar: 57
espacio_a_liberar: "620 KB"
carpetas:
- "orchestration/_archive/2026-01-07-trazas/"
- "orchestration/_archive/2026-01-10-simco-v37/"
- "orchestration/_archive/2026-01-10-sprint5/"
dependencias:
internas:
- "Hooks MLM, Goals, Portfolio ya existen"
- "Router configurado"
- "DashboardLayout disponible"
externas:
- "Backend endpoints disponibles (100%)"
- "Estándares frontend definidos"
subagentes:
permitidos: true
modo: "paralelo_ordenado"
tipos:
- "Explore: investigación y búsqueda"
- "general-purpose: tareas complejas"
- "Plan: diseño de implementación"
outputs:
documentos:
- "FASE-CAPVED-CONTEXTO.md"
- "FASE-CAPVED-ANALISIS.md"
- "FASE-CAPVED-PLANIFICACION.md"
- "PLAN-SUBTAREAS-FRONTEND.md"
inventarios:
- "Actualización FRONTEND_INVENTORY.yml"
- "Actualización MASTER_INVENTORY.yml"
agente:
nombre: "Claude Opus 4.5"
modo: "Claude Code"
fecha_inicio: "2026-02-03"

View File

@ -0,0 +1,766 @@
# 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** | Sí |
**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** | Sí |
**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** | Sí |
**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** | Sí |
**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** | Sí |
**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*

View File

@ -1,16 +1,16 @@
# Indice de Tareas - template-saas
# orchestration/tareas/_INDEX.yml
version: "1.4.0"
version: "1.5.0"
proyecto: template-saas
tipo: PROVIDER
created: "2026-01-24"
updated: "2026-02-03"
resumen:
total_tareas: 10
total_tareas: 11
completadas: 10
en_progreso: 0
en_progreso: 1
pendientes: 0
# Formato de ID: TASK-YYYY-MM-DD-NNN
@ -77,6 +77,17 @@ por_fecha:
sp: 3
modulo: "auth, rbac, tenants"
nota: "password_hash nullable, slug NOT NULL, tests corregidos"
- id: "TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI"
titulo: "Auditoría y Planificación Frontend/UX-UI"
tipo: "analysis"
estado: "en_progreso"
sp: 49
modulo: "frontend"
fase_actual: "PLANIFICACION"
nota: |
Análisis de coherencia frontend vs requerimientos.
12 gaps identificados, 4 sprints planificados.
Módulos pendientes: RBAC, Portfolio, MLM, Goals UI.
"2026-01-30":
- id: "TASK-2026-01-30-TEMPLATE-SAAS-SUBMODULES-SYNC"
titulo: "Integración Submodules y Sincronización Orchestration"
@ -100,7 +111,29 @@ por_fecha:
- "Corregir test expectations"
# Tareas activas
tareas_activas: []
tareas_activas:
- id: "TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI"
titulo: "Auditoría y Planificación Frontend/UX-UI"
fase_actual: "PLANIFICACION"
sp_total: 49
sp_ejecutados: 21
subtareas:
sprint_1_p0:
- "ST-1.1-RBAC-FRONTEND (5 SP)"
- "ST-1.2-AUDIT-COMPLETE (3 SP)"
- "ST-1.3-NOTIFICATIONS-COMPLETE (3 SP)"
sprint_2_p1:
- "ST-2.1-PORTFOLIO-UI (5 SP)"
- "ST-2.2-MLM-UI (8 SP)"
- "ST-2.3-GOALS-UI (8 SP)"
sprint_3_p2:
- "ST-3.1-WCAG-IMPROVE (5 SP)"
- "ST-3.2-UNIT-TESTS (5 SP)"
- "ST-3.3-DOCS-PAGES (3 SP)"
- "ST-3.4-DEAD-CODE (1 SP)"
sprint_4_p3:
- "ST-4.1-PURGE-DOCS (1 SP)"
- "ST-4.2-UPDATE-INVENTORY (2 SP)"
# Tareas completadas
tareas_completadas: