diff --git a/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/FASE-CAPVED-ANALISIS.md b/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/FASE-CAPVED-ANALISIS.md new file mode 100644 index 00000000..630ca9c3 --- /dev/null +++ b/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/FASE-CAPVED-ANALISIS.md @@ -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* diff --git a/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/FASE-CAPVED-CONTEXTO.md b/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/FASE-CAPVED-CONTEXTO.md new file mode 100644 index 00000000..567fe308 --- /dev/null +++ b/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/FASE-CAPVED-CONTEXTO.md @@ -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* diff --git a/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/METADATA.yml b/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/METADATA.yml new file mode 100644 index 00000000..3776a97b --- /dev/null +++ b/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/METADATA.yml @@ -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" diff --git a/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/PLAN-SUBTAREAS-FRONTEND.md b/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/PLAN-SUBTAREAS-FRONTEND.md new file mode 100644 index 00000000..9e50d841 --- /dev/null +++ b/orchestration/tareas/TASK-2026-02-03-AUDITORIA-FRONTEND-UX-UI/PLAN-SUBTAREAS-FRONTEND.md @@ -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: }, +{ path: 'portfolio/categories', element: }, +{ path: 'portfolio/categories/:id', element: }, +{ path: 'portfolio/products', element: }, +{ path: 'portfolio/products/new', element: }, +{ path: 'portfolio/products/:id', element: }, +{ path: 'portfolio/products/:id/edit', element: }, +``` + +**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