feat: Sprint 1 completo + Sprint 1.5 Etapas 1-3 — Identidad InQ ROI
Sprint 1 — ROI y automatización: - Motor de simulación dual (actual/automatizado) - 5 KPIs de ROI: ahorro, payback, acumulado, ROI % - Exportación PDF 4 páginas + CSV con metadata ROI - Sección transparencia metodológica - 455 tests (Vitest + Playwright) Sprint 1.5 Etapas 1-3 — Identidad visual InQ: - Sistema de diseño: tokens Tailwind (#F59845, gradiente →magenta) - formatPayback helper (12 casos + tests) - Strings de marca: 'InQ ROI · Powered by InQuality' - KPI Hero con gradiente naranja→magenta en web app - ComparisonTable con paleta naranja + '—' en no-automatizables - Charts migrados a tokens de color - Botones primarios font-bold (WCAG Opción D) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
341
ARCHITECTURE.md
341
ARCHITECTURE.md
@@ -5,11 +5,12 @@
|
||||
|
||||
| Atributo | Valor |
|
||||
|---|---|
|
||||
| Versión del documento | 0.1.0 |
|
||||
| Versión del documento | 0.2.0 |
|
||||
| Fecha | Mayo 2026 |
|
||||
| Estado | Draft — Fase 0 (MVP "Noche Cero") en construcción |
|
||||
| Estado | Fase 0 completada · Sprint 1 (ROI) en construcción |
|
||||
| Autor | Equipo fundador + Claude (arquitectura) |
|
||||
| Alcance | MVP de esta noche + Norte V1.0 (12–18 meses) |
|
||||
| Alcance | MVP completado + Sprint 1 + Norte V1.0 (12–18 meses) |
|
||||
| Deploy actual | https://process-cost-platform.pages.dev (v0.1.0-mvp) |
|
||||
|
||||
---
|
||||
|
||||
@@ -18,14 +19,15 @@
|
||||
1. [Contexto y Propuesta de Valor](#1-contexto-y-propuesta-de-valor)
|
||||
2. [Glosario y Convenciones](#2-glosario-y-convenciones)
|
||||
3. [Norte Estratégico — Visión V1.0](#3-norte-estratégico--visión-v10)
|
||||
4. [Fase 0 — MVP "Noche Cero"](#4-fase-0--mvp-noche-cero)
|
||||
5. [Roadmap de Evolución](#5-roadmap-de-evolución)
|
||||
6. [Arquitectura Técnica](#6-arquitectura-técnica)
|
||||
7. [Modelo de Dominio](#7-modelo-de-dominio)
|
||||
8. [Decisiones Arquitectónicas (ADRs)](#8-decisiones-arquitectónicas-adrs)
|
||||
9. [Atributos de Calidad](#9-atributos-de-calidad)
|
||||
10. [Riesgos y Mitigaciones](#10-riesgos-y-mitigaciones)
|
||||
11. [Anexos](#11-anexos)
|
||||
4. [Fase 0 — MVP "Noche Cero" (COMPLETADO)](#4-fase-0--mvp-noche-cero)
|
||||
5. [Fase 1 — Sprint 1: ROI y Escenarios de Automatización](#5-fase-1--sprint-1-roi-y-escenarios-de-automatización)
|
||||
6. [Roadmap de Evolución](#6-roadmap-de-evolución)
|
||||
7. [Arquitectura Técnica](#7-arquitectura-técnica)
|
||||
8. [Modelo de Dominio](#8-modelo-de-dominio)
|
||||
9. [Decisiones Arquitectónicas (ADRs)](#9-decisiones-arquitectónicas-adrs)
|
||||
10. [Atributos de Calidad](#10-atributos-de-calidad)
|
||||
11. [Riesgos y Mitigaciones](#11-riesgos-y-mitigaciones)
|
||||
12. [Anexos](#12-anexos)
|
||||
|
||||
---
|
||||
|
||||
@@ -55,12 +57,20 @@ Las consultoras, gerentes de operaciones y profesionales de eficiencia operativa
|
||||
|
||||
### 1.4 Audiencia objetivo
|
||||
|
||||
**MVP (Fase 0)**: el propio fundador como consultor de automatización de procesos.
|
||||
**MVP (Fase 0 - COMPLETADO)**: el propio fundador como consultor de automatización de procesos.
|
||||
|
||||
**Sprint 1 (en curso)**: el **equipo de InQuality** como herramienta interna de consultoría y **pre-venta de proyectos de automatización con cálculo de ROI**.
|
||||
|
||||
**V1.0**: consultores independientes y boutique de procesos, gerentes de operaciones de pymes LATAM, equipos de Project/Process Office.
|
||||
|
||||
**V2+**: estudiantes y entusiastas de eficiencia operativa (tier educativo gratuito).
|
||||
|
||||
### 1.4.1 Casos de uso confirmados (Sprint 1)
|
||||
|
||||
1. **Análisis de costos operativos**: el consultor de InQuality releva el proceso del cliente, lo modela en BPMN, configura costos/tiempos/recursos y entrega un reporte cuantitativo del costo operativo.
|
||||
|
||||
2. **Pre-venta de automatización con ROI**: el consultor identifica actividades automatizables, define costos automatizados estimados y el costo de inversión del proyecto. El sistema calcula payback, ahorro anual y ROI %, generando un reporte ejecutivo que sirve como propuesta comercial cuantificada.
|
||||
|
||||
### 1.5 Lo que NO somos
|
||||
|
||||
- ❌ NO somos un BPMS (motor de ejecución de procesos).
|
||||
@@ -164,9 +174,11 @@ Las consultoras, gerentes de operaciones y profesionales de eficiencia operativa
|
||||
|
||||
---
|
||||
|
||||
## 4. Fase 0 — MVP "Noche Cero"
|
||||
## 4. Fase 0 — MVP "Noche Cero" ✅ COMPLETADA
|
||||
|
||||
### 4.1 Hipótesis a validar
|
||||
> **Estado**: ✅ Entregada el 13 de mayo de 2026. Tag `v0.1.0-mvp`. Deployada en https://process-cost-platform.pages.dev. **268 tests unit/integration + 5 E2E + 4/4 validación con gradiente real**. Bundle inicial 59.75 KB gzip. 0 vulnerabilidades.
|
||||
|
||||
### 4.1 Hipótesis validada
|
||||
|
||||
> Un consultor de procesos puede transformar un archivo `.bpmn` en un reporte visualmente deslumbrante de costos operativos en menos de 15 minutos, y usarlo al día siguiente en una reunión real con un cliente.
|
||||
|
||||
@@ -264,43 +276,193 @@ Las consultoras, gerentes de operaciones y profesionales de eficiencia operativa
|
||||
|
||||
---
|
||||
|
||||
## 5. Roadmap de Evolución
|
||||
## 5. Fase 1 — Sprint 1: ROI y Escenarios de Automatización
|
||||
|
||||
> **Estado**: en construcción.
|
||||
> **Audiencia primaria**: equipo de InQuality (consultora de procesos).
|
||||
> **Caso de uso estrella**: pre-venta de proyectos de automatización con ROI cuantificado.
|
||||
|
||||
### 5.1 Hipótesis a validar
|
||||
|
||||
> Un consultor de InQuality puede modelar un proceso, identificar las actividades automatizables, configurar costos del escenario actual vs automatizado, y obtener en minutos un reporte ejecutivo de ROI (payback, ahorro anual, ROI %) que sirve como propuesta comercial cuantificada para vender un proyecto de automatización.
|
||||
|
||||
### 5.2 Alcance del Sprint 1
|
||||
|
||||
| # | Capacidad | Detalle |
|
||||
|---|---|---|
|
||||
| S1.1 | **Volumetría del proceso** | Frecuencia anual de ejecución + horizonte de análisis (años) configurables por proceso |
|
||||
| S1.2 | **Marcado de actividades automatizables** | Toggle por actividad + campos de costo y tiempo automatizados |
|
||||
| S1.3 | **Inversión en automatización** | Campo único agregado a nivel proceso (sin desglose) |
|
||||
| S1.4 | **Motor dual de simulación** | Mismo motor recibe `scenario: 'actual' \| 'automated'` y aplica los campos correspondientes |
|
||||
| S1.5 | **Sección de ROI en reporte** | Tabs en el reporte: Actual / Automatizado / Comparación + ROI |
|
||||
| S1.6 | **5 KPIs de ROI** | Ahorro por ejecución · Ahorro anual · Payback (meses) · Ahorro acumulado a N años · ROI % anualizado |
|
||||
| S1.7 | **Tabla comparativa** | Actividad por actividad: costos actual vs automatizado, ahorro $ y % |
|
||||
| S1.8 | **Gráficos de ROI** | Ahorro acumulado en el tiempo + Top 5 actividades con mayor ahorro |
|
||||
| S1.9 | **Mecanismo de transparencia** | Detecta valores cero/inversión cero y los expone en sección visible pero discreta |
|
||||
| S1.10 | **Migración Dexie v1 → v2** | Preserva datos existentes, agrega los nuevos campos con defaults |
|
||||
| S1.11 | **Export PDF/CSV ampliado** | El PDF incluye páginas de ROI; el CSV de ROI exporta comparación completa |
|
||||
| S1.12 | **Documento metodológico** | Anexo en el repo: cómo calcular correctamente el costo automatizado por ejecución |
|
||||
|
||||
### 5.3 Decisiones arquitectónicas del Sprint 1
|
||||
|
||||
#### Modelo de escenarios — Modelo A (dos campos por actividad)
|
||||
|
||||
`Activity` gana 3 campos:
|
||||
- `automatable: boolean` (default false)
|
||||
- `automatedCostFixed: number` (default 0)
|
||||
- `automatedTimeMinutes: number` (default 0)
|
||||
|
||||
`Process` gana 3 campos:
|
||||
- `annualFrequency: number` (default 1000)
|
||||
- `analysisHorizonYears: number` (default 3)
|
||||
- `automationInvestment: number` (default 0)
|
||||
|
||||
**Justificación de Modelo A**:
|
||||
- Trazabilidad actividad-por-actividad sin sincronización entre diagramas
|
||||
- Un solo BPMN simplifica el flujo del consultor
|
||||
- Migración a Modelo B (escenarios como entidad) queda pendiente para Sprint 3-4 si InQuality lo demanda
|
||||
|
||||
#### Volumetría — Multiplicador en el reporte
|
||||
|
||||
El motor sigue siendo determinístico ("costo de una ejecución"). La volumetría se aplica en el reporte:
|
||||
```
|
||||
costoAnual = costoUnitario × annualFrequency
|
||||
costoHorizonte = costoAnual × analysisHorizonYears
|
||||
```
|
||||
|
||||
No se introduce VPN, TIR ni Monte Carlo en este sprint. **Razón estratégica**: el cliente promedio de InQuality entiende payback nominal; el VPN abre discusiones sobre la tasa que distraen.
|
||||
|
||||
#### Fórmulas de ROI (en `domain/roi.ts`, función pura testeable)
|
||||
|
||||
```typescript
|
||||
savingsPerExecution = costPerExecutionActual - costPerExecutionAutomated
|
||||
savingsPerExecutionPercent = (savingsPerExecution / costPerExecutionActual) * 100
|
||||
annualSavings = savingsPerExecution × annualFrequency
|
||||
paybackMonths = (automationInvestment / annualSavings) × 12
|
||||
paybackYears = paybackMonths / 12
|
||||
cumulativeSavingsHorizon = (annualSavings × horizonYears) - automationInvestment
|
||||
breaksEvenInHorizon = paybackYears <= horizonYears
|
||||
roiAnnualPercent = (annualSavings / automationInvestment) * 100
|
||||
```
|
||||
|
||||
**Edge cases manejados explícitamente**:
|
||||
- `annualSavings <= 0`: `paybackMonths = Infinity`, `breaksEvenInHorizon = false`
|
||||
- `automationInvestment === 0 && annualSavings > 0`: `paybackMonths = 0`, `roiAnnualPercent = Infinity` (display "N/A" o "∞")
|
||||
- `costPerExecutionActual === 0`: `savingsPerExecutionPercent = 0` (evitar div/0)
|
||||
|
||||
#### Transparencia metodológica
|
||||
|
||||
Si el reporte detecta:
|
||||
- Actividades marcadas como automatizables pero con `automatedCostFixed = 0` Y `automatedTimeMinutes = 0`
|
||||
- `automationInvestment = 0` con payback < 1 mes
|
||||
- Otros valores sospechosos
|
||||
|
||||
Muestra una sección **"Transparencia metodológica"** con:
|
||||
- Lista de valores no informados
|
||||
- Texto introductorio explicando el motivo del listado
|
||||
- Fondo gris claro, no rojo/alarmante
|
||||
- Aparece en pantalla y en PDF
|
||||
|
||||
**Filosofía**: convierte una posible debilidad en señal de seriedad profesional. El cliente final entiende que el consultor fue transparente sobre los supuestos.
|
||||
|
||||
### 5.4 Lo que NO entra en el Sprint 1
|
||||
|
||||
❌ Múltiples escenarios (más de 2) — viene en Sprint 3-4 si se demanda
|
||||
❌ Escenarios como entidad separada (Modelo B)
|
||||
❌ VPN, TIR, tasa de descuento
|
||||
❌ Desglose de la inversión (licencias, dev, infra) — un único campo por ahora
|
||||
❌ Análisis de sensibilidad
|
||||
❌ Distribuciones probabilísticas
|
||||
❌ Bots como recursos con capacidad finita
|
||||
❌ Multi-tenant, login, colaboración, versionado, IA, modo oscuro, i18n, PWA
|
||||
|
||||
### 5.5 Definition of Done — Sprint 1
|
||||
|
||||
- [ ] Migración Dexie v1 → v2 con preservación de datos existentes
|
||||
- [ ] Workspace permite marcar actividades como automatizables y configurar costos automatizados
|
||||
- [ ] Workspace permite configurar volumetría e inversión a nivel proceso
|
||||
- [ ] Motor de simulación acepta `scenario` y devuelve resultados correctos para ambos casos
|
||||
- [ ] Reporte tiene 3 tabs (Actual / Automatizado / Comparación + ROI)
|
||||
- [ ] Sección "Comparación + ROI" muestra 5 KPIs grandes correctamente formateados
|
||||
- [ ] Tabla comparativa funcional con ordenamiento
|
||||
- [ ] Gráfico de ahorro acumulado con marcador de payback
|
||||
- [ ] Gráfico Top 5 actividades con mayor ahorro
|
||||
- [ ] Sección "Transparencia metodológica" aparece cuando corresponde
|
||||
- [ ] Cálculos de `domain/roi.ts` cubiertos por tests (≥ 10 casos incluyendo edge cases)
|
||||
- [ ] Test E2E del flujo completo de ROI con Playwright
|
||||
- [ ] PDF de ROI incluye las páginas adicionales con KPIs y gráficos
|
||||
- [ ] CSV de ROI exporta comparación completa
|
||||
- [ ] Documento `METHODOLOGY_AUTOMATED_COST.md` en raíz del repo
|
||||
- [ ] Bundle no crece más de 20 KB gzip respecto al MVP
|
||||
- [ ] Todos los tests previos (268 unit + 5 E2E) siguen verdes
|
||||
- [ ] Deploy a producción exitoso
|
||||
- [ ] Smoke test post-deploy verde
|
||||
|
||||
---
|
||||
|
||||
## 6. Roadmap de Evolución
|
||||
|
||||
```
|
||||
┌────────────┬──────────────────────────────────────────────────────┐
|
||||
┌──────────────┬──────────────────────────────────────────────────────┐
|
||||
│ FASE │ CAPACIDADES │
|
||||
├────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 0 │ MVP client-side: importar, configurar, simular, │
|
||||
│ (1 noche) │ reportear, exportar PDF/CSV │
|
||||
├────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 1 │ + Backend mínimo + Auth + Persistencia en la nube │
|
||||
│ (1-2 sem) │ + i18n (es/en/pt-BR) + PWA installable │
|
||||
├────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 2 │ + Editor BPMN (no solo lectura) + Validador │
|
||||
│ (1 mes) │ + Glosario integrado + Recursos avanzados │
|
||||
├────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 3 │ + Estructura organizacional + Multi-tenant │
|
||||
│ (1 mes) │ + RBAC + Versionado lineal │
|
||||
├────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 4 │ + Colaboración en tiempo real (Yjs/CRDT) │
|
||||
│ (1-2 mes) │ + Presencia + Comentarios │
|
||||
├────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 5 │ + Distribuciones probabilísticas + Riesgos │
|
||||
│ (1 mes) │ + Costeo ABC completo + Gobernanza RACI │
|
||||
├────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 6 │ + IA: detección de cuellos de botella │
|
||||
│ (1-2 mes) │ + Elementos RPA/Agente IA en paleta │
|
||||
├────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 7 │ + Marketplace comunitario de plantillas │
|
||||
│ (continuo) │ + Tutoriales interactivos + Modo educativo │
|
||||
└────────────┴──────────────────────────────────────────────────────┘
|
||||
├──────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 0 ✅ │ MVP client-side: importar, configurar, simular, │
|
||||
│ (completa) │ reportear, exportar PDF/CSV. v0.1.0-mvp en prod. │
|
||||
├──────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Sprint 1 🔄 │ ROI + escenarios de automatización: │
|
||||
│ (en curso) │ · Volumetría del proceso │
|
||||
│ │ · Marcado de actividades automatizables │
|
||||
│ │ · Inversión de automatización │
|
||||
│ │ · Motor dual: actual vs automatizado │
|
||||
│ │ · 5 KPIs de ROI + tabla comparativa + gráficos │
|
||||
│ │ · Transparencia metodológica │
|
||||
│ │ · Migración Dexie v1 → v2 │
|
||||
├──────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Sprint 2 │ Productividad de carga: │
|
||||
│ │ · Grilla de edición masiva (TanStack Table) │
|
||||
│ │ · Pegado desde Excel │
|
||||
│ │ · Recursos con costo/hora + asignación múltiple │
|
||||
│ │ · Cálculo de costo esperado en vivo │
|
||||
│ │ · Edición inline de nombre proceso/cliente │
|
||||
├──────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Sprint 3-4 │ Multi-escenario y reportes ejecutivos: │
|
||||
│ │ · Escenarios como entidad (modelo B) si demandado │
|
||||
│ │ · Reporte ejecutivo (PDF 1-2 páginas) separado │
|
||||
│ │ · Branding InQuality │
|
||||
│ │ · Export Excel multi-hoja │
|
||||
│ │ · Comparación de simulaciones (historial) │
|
||||
├──────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 2 │ Backend + colaboración básica: │
|
||||
│ (1-2 meses) │ · Backend NestJS + Postgres + Auth │
|
||||
│ │ · Multi-tenant + RBAC │
|
||||
│ │ · Versionado lineal │
|
||||
│ │ · Editor BPMN (no solo lectura) │
|
||||
│ │ · Validador + Glosario │
|
||||
│ │ · i18n (es/en/pt-BR) │
|
||||
│ │ · PWA installable │
|
||||
├──────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 3 │ Colaboración avanzada y modelado fino: │
|
||||
│ (1-2 meses) │ · Colaboración en tiempo real (Yjs/CRDT) │
|
||||
│ │ · Presencia + Comentarios │
|
||||
│ │ · Distribuciones probabilísticas │
|
||||
│ │ · Riesgos │
|
||||
│ │ · Costeo ABC completo │
|
||||
│ │ · Gobernanza RACI │
|
||||
├──────────────┼──────────────────────────────────────────────────────┤
|
||||
│ Fase 4 │ Inteligencia y comunidad: │
|
||||
│ (1-2 meses) │ · IA: detección de cuellos de botella │
|
||||
│ │ · Elementos RPA/Agente IA en paleta │
|
||||
│ │ · Marketplace comunitario de plantillas │
|
||||
│ │ · Tutoriales interactivos │
|
||||
│ │ · Modo educativo │
|
||||
└──────────────┴──────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Arquitectura Técnica
|
||||
## 7. Arquitectura Técnica
|
||||
|
||||
### 6.1 Vista de alto nivel — MVP (Fase 0)
|
||||
### 7.1 Vista de alto nivel — MVP (Fase 0)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
@@ -340,7 +502,7 @@ Las consultoras, gerentes de operaciones y profesionales de eficiencia operativa
|
||||
(estático, gratis, global)
|
||||
```
|
||||
|
||||
### 6.2 Vista de alto nivel — V1.0
|
||||
### 7.2 Vista de alto nivel — V1.0
|
||||
|
||||
```
|
||||
┌──────────────────┐ ┌──────────────────────────────┐
|
||||
@@ -381,7 +543,7 @@ Las consultoras, gerentes de operaciones y profesionales de eficiencia operativa
|
||||
vía Docker Compose
|
||||
```
|
||||
|
||||
### 6.3 Stack tecnológico
|
||||
### 7.3 Stack tecnológico
|
||||
|
||||
#### 6.3.1 Stack MVP (Fase 0)
|
||||
|
||||
@@ -423,7 +585,7 @@ Las consultoras, gerentes de operaciones y profesionales de eficiencia operativa
|
||||
| i18n | i18next + react-i18next | Estándar de facto |
|
||||
| E2E testing | Playwright | Estándar moderno |
|
||||
|
||||
### 6.4 Arquitectura de carpetas (MVP)
|
||||
### 7.4 Arquitectura de carpetas (MVP)
|
||||
|
||||
```
|
||||
process-cost-platform/
|
||||
@@ -496,7 +658,7 @@ process-cost-platform/
|
||||
└── e2e/ ← post-MVP
|
||||
```
|
||||
|
||||
### 6.5 Modelo conceptual del motor de simulación (MVP)
|
||||
### 7.5 Modelo conceptual del motor de simulación (MVP + Sprint 1)
|
||||
|
||||
El motor de simulación del MVP es **determinístico y agregado**. NO es discrete event simulation. Su contrato:
|
||||
|
||||
@@ -556,7 +718,7 @@ interface SimulationResult {
|
||||
5. Costo indirecto = `costoDirectoTotal × overheadPercentage`.
|
||||
6. Agregar totales y rankings.
|
||||
|
||||
### 6.6 Integración bpmn-js + heatmap
|
||||
### 7.6 Integración bpmn-js + heatmap
|
||||
|
||||
`bpmn-js` expone:
|
||||
- Un `viewer` (read-only) ideal para MVP.
|
||||
@@ -571,7 +733,7 @@ El heatmap se implementa así:
|
||||
3. Registrar handler `element.click` para drill-down.
|
||||
4. Mostrar tooltip con detalle al hover.
|
||||
|
||||
### 6.7 Deployment del MVP
|
||||
### 7.7 Deployment
|
||||
|
||||
**Esta noche**:
|
||||
1. `npm run build` → genera `dist/` estático.
|
||||
@@ -582,9 +744,9 @@ El heatmap se implementa así:
|
||||
|
||||
---
|
||||
|
||||
## 7. Modelo de Dominio
|
||||
## 8. Modelo de Dominio
|
||||
|
||||
### 7.1 Entidades núcleo (MVP)
|
||||
### 8.1 Entidades núcleo (estado al Sprint 1)
|
||||
|
||||
**Distinción fundamental de capas:**
|
||||
- `ProcessGraph` (en memoria, reconstruido del XML cada vez): TODOS los nodos del diagrama incluidos gateways, eventos, flujos. Vive solo en el parser/motor, no se persiste.
|
||||
@@ -592,6 +754,8 @@ El heatmap se implementa así:
|
||||
- `GatewayConfig` (persistido en IndexedDB): probabilidades por flujo saliente de gateways divergentes (XOR/OR). Los gateways convergentes (merge) no tienen config — el motor suma probabilidades entrantes.
|
||||
- El heatmap **solo colorea nodos con Activity**. Los gateways conservan estilo BPMN neutro.
|
||||
|
||||
**Campos añadidos en Sprint 1** marcados con 🆕.
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Process │
|
||||
@@ -602,6 +766,9 @@ El heatmap se implementa así:
|
||||
│ + bpmnXml: string (raw XML) │
|
||||
│ + currency: string (ISO 4217) │
|
||||
│ + overheadPercentage: number (0..1) │
|
||||
│ + annualFrequency: number 🆕 default 1000 │
|
||||
│ + analysisHorizonYears: number 🆕 default 3 │
|
||||
│ + automationInvestment: number 🆕 default 0 │
|
||||
│ + createdAt, updatedAt │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
│ 1 │ 1
|
||||
@@ -622,8 +789,13 @@ El heatmap se implementa así:
|
||||
│ number │ │ probability: number │
|
||||
│ + executionTimeMinutes: │ │ }> │
|
||||
│ number │ │ (paralelo: todas 1.0, │
|
||||
└─────────────────────────┘ │ exclusivo: suma = 1.0) │
|
||||
│ N └──────────────────────────────┘
|
||||
│ + automatable: boolean │🆕 │ exclusivo: suma = 1.0) │
|
||||
│ + automatedCostFixed: │🆕 └──────────────────────────────┘
|
||||
│ number │
|
||||
│ + automatedTimeMinutes: │🆕
|
||||
│ number │
|
||||
└─────────────────────────┘
|
||||
│ N
|
||||
│
|
||||
│ M
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
@@ -657,13 +829,13 @@ El heatmap se implementa así:
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 7.2 Modelo extendido (V1.0)
|
||||
### 8.2 Modelo extendido (V1.0)
|
||||
|
||||
Añade: `Tenant`, `User`, `Role`, `OrganizationUnit` (jerárquica recursiva), `ProcessOwnership` (RACI), `Risk`, `RiskProcessLink`, `ProcessVersion`, `Comment`, `Notification`, `Template`.
|
||||
|
||||
---
|
||||
|
||||
## 8. Decisiones Arquitectónicas (ADRs)
|
||||
## 9. Decisiones Arquitectónicas (ADRs)
|
||||
|
||||
### ADR-001 — MVP client-side sin backend
|
||||
- **Contexto**: tiempo de entrega = una noche, presupuesto cero.
|
||||
@@ -716,11 +888,48 @@ Añade: `Tenant`, `User`, `Role`, `OrganizationUnit` (jerárquica recursiva), `P
|
||||
- **Decisión**: Cloudflare Pages mientras sea estático; migración a VPS al introducir backend.
|
||||
- **Justificación**: $0 al inicio, latencia global, sin operación. Migrar cuando haya backend.
|
||||
|
||||
### ADR-012 — Escenarios como dos pares de campos por actividad (Modelo A), no entidad separada
|
||||
- **Contexto Sprint 1**: necesidad de modelar costo "actual" vs "automatizado" por actividad.
|
||||
- **Decisión**: Modelo A — agregar `automatable`, `automatedCostFixed`, `automatedTimeMinutes` a `Activity`. El motor recibe un parámetro `scenario` y elige qué campos usar.
|
||||
- **Alternativa descartada**: Modelo B (entidad `Scenario` con N configuraciones independientes) — más complejo, no necesario hasta que haya demanda real de >2 escenarios.
|
||||
- **Justificación**:
|
||||
- Trazabilidad actividad-a-actividad para la tabla comparativa (pieza más persuasiva del reporte).
|
||||
- Un solo diagrama → consultor no mantiene 2 BPMNs sincronizados.
|
||||
- Migración A→B es directa cuando llegue el momento.
|
||||
- **Cuándo revisar**: Sprint 3-4 si InQuality necesita >2 escenarios o flujos distintos post-automatización.
|
||||
|
||||
### ADR-013 — Volumetría aplicada en el reporte, no en el motor
|
||||
- **Contexto Sprint 1**: necesidad de anualizar costos para calcular ROI.
|
||||
- **Decisión**: el motor sigue siendo determinístico ("costo de una ejecución"). La volumetría (frecuencia anual + horizonte) es metadata del proceso y se aplica como multiplicador en la capa de reporte.
|
||||
- **Alternativa descartada**: correr Monte Carlo o múltiples instancias en el motor.
|
||||
- **Justificación**:
|
||||
- El motor es determinístico → correrlo N veces da el mismo resultado × N (perder ciclos).
|
||||
- Mantiene separación de concerns: motor calcula costo unitario, reporte hace análisis temporal.
|
||||
- Cuando lleguen distribuciones probabilísticas (Fase 3), ahí tiene sentido Monte Carlo.
|
||||
|
||||
### ADR-014 — ROI nominal sin VPN ni tasa de descuento en Sprint 1
|
||||
- **Contexto Sprint 1**: cálculo de payback y ahorro acumulado para pre-venta.
|
||||
- **Decisión**: usar fórmulas nominales simples (payback = inversión / ahorro anual × 12, acumulado = ahorro × años - inversión). NO incluir VPN, TIR ni tasa de descuento.
|
||||
- **Justificación**:
|
||||
- El cliente promedio de InQuality entiende payback nominal.
|
||||
- VPN abre discusiones sobre la tasa que distraen del mensaje principal.
|
||||
- Si en el futuro un cliente sofisticado lo pide, se agrega como opción.
|
||||
- **Cuándo revisar**: cuando un cliente concreto pida VPN/TIR.
|
||||
|
||||
### ADR-015 — Transparencia metodológica como feature, no bug
|
||||
- **Contexto Sprint 1**: riesgo de que consultores carguen valores incompletos (costos automatizados en 0, inversión en 0) generando ROIs irreales.
|
||||
- **Decisión**: detectar estos casos y exponerlos en sección visible pero discreta del reporte ("Transparencia metodológica").
|
||||
- **Justificación**:
|
||||
- Anticipar limitaciones es señal de seriedad profesional.
|
||||
- El cliente final confía más en consultores transparentes sobre supuestos que en cifras "perfectas".
|
||||
- Protege la credibilidad de InQuality y la herramienta.
|
||||
- **Mecanismo**: banner amarillo informativo (no rojo de error) + lista de valores no informados.
|
||||
|
||||
---
|
||||
|
||||
## 9. Atributos de Calidad
|
||||
## 10. Atributos de Calidad
|
||||
|
||||
### 9.1 Performance
|
||||
### 10.1 Performance
|
||||
|
||||
| Métrica | MVP | V1.0 |
|
||||
|---|---|---|
|
||||
@@ -730,7 +939,7 @@ Añade: `Tenant`, `User`, `Role`, `OrganizationUnit` (jerárquica recursiva), `P
|
||||
| Render mapa de calor | < 200ms | < 200ms |
|
||||
| Export PDF | < 5s | < 5s |
|
||||
|
||||
### 9.2 Mantenibilidad
|
||||
### 10.2 Mantenibilidad
|
||||
|
||||
- **TypeScript strict** activado.
|
||||
- **ESLint + Prettier** configurados.
|
||||
@@ -738,7 +947,7 @@ Añade: `Tenant`, `User`, `Role`, `OrganizationUnit` (jerárquica recursiva), `P
|
||||
- **Dominio puro separado** de UI (en `/src/domain`) — testeable sin React.
|
||||
- **Sin lógica de negocio en componentes** — siempre en hooks o domain.
|
||||
|
||||
### 9.3 Seguridad (V1.0)
|
||||
### 10.3 Seguridad (V1.0)
|
||||
|
||||
- TLS obligatorio (Cloudflare en MVP, Caddy en VPS).
|
||||
- Auth con tokens cortos + refresh.
|
||||
@@ -747,7 +956,7 @@ Añade: `Tenant`, `User`, `Role`, `OrganizationUnit` (jerárquica recursiva), `P
|
||||
- CSP estricto en producción.
|
||||
- Backups cifrados (V1.0).
|
||||
|
||||
### 9.4 Accesibilidad
|
||||
### 10.4 Accesibilidad
|
||||
|
||||
- WCAG 2.1 AA como objetivo V1.0.
|
||||
- Contraste mínimo 4.5:1 en texto.
|
||||
@@ -756,7 +965,7 @@ Añade: `Tenant`, `User`, `Role`, `OrganizationUnit` (jerárquica recursiva), `P
|
||||
|
||||
---
|
||||
|
||||
## 10. Riesgos y Mitigaciones
|
||||
## 11. Riesgos y Mitigaciones
|
||||
|
||||
| # | Riesgo | Probabilidad | Impacto | Mitigación |
|
||||
|---|---|---|---|---|
|
||||
@@ -772,9 +981,9 @@ Añade: `Tenant`, `User`, `Role`, `OrganizationUnit` (jerárquica recursiva), `P
|
||||
|
||||
---
|
||||
|
||||
## 11. Anexos
|
||||
## 12. Anexos
|
||||
|
||||
### 11.1 Comandos de arranque para Claude Code (MVP)
|
||||
### 12.1 Comandos de arranque para Claude Code (MVP)
|
||||
|
||||
```bash
|
||||
# Inicialización
|
||||
@@ -798,11 +1007,11 @@ npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom
|
||||
npm install -D eslint prettier
|
||||
```
|
||||
|
||||
### 11.2 BPMN XML de prueba sugerido
|
||||
### 12.2 BPMN XML de prueba sugerido
|
||||
|
||||
Para testing inicial, usar el BPMN público de ejemplo de bpmn.io: https://github.com/bpmn-io/bpmn-js-examples
|
||||
|
||||
### 11.3 Recursos de referencia
|
||||
### 12.3 Recursos de referencia
|
||||
|
||||
- **bpmn-js docs**: https://bpmn.io/toolkit/bpmn-js/
|
||||
- **BPMN 2.0 spec**: https://www.omg.org/spec/BPMN/2.0/
|
||||
@@ -811,7 +1020,7 @@ Para testing inicial, usar el BPMN público de ejemplo de bpmn.io: https://githu
|
||||
- **Zustand**: https://zustand-demo.pmnd.rs/
|
||||
- **Dexie.js**: https://dexie.org/
|
||||
|
||||
### 11.4 Definition of Done — MVP "Noche Cero"
|
||||
### 12.4 Definition of Done — MVP "Noche Cero"
|
||||
|
||||
- [ ] El usuario puede importar un archivo `.bpmn` por drag & drop
|
||||
- [ ] El diagrama se renderiza correctamente en el canvas
|
||||
|
||||
262
CHANGELOG.md
Normal file
262
CHANGELOG.md
Normal file
@@ -0,0 +1,262 @@
|
||||
# Changelog
|
||||
|
||||
Historial de cambios del proyecto. Formato basado en [Keep a Changelog](https://keepachangelog.com/es/).
|
||||
Los cambios se describen desde la perspectiva del código: qué archivos cambiaron,
|
||||
por qué, y qué decisiones de diseño están implícitas — para que futuras
|
||||
modificaciones profundas tengan contexto suficiente.
|
||||
|
||||
---
|
||||
|
||||
## [Unreleased] — Sprint 1: ROI y Escenarios de Automatización
|
||||
|
||||
### Estado
|
||||
En construcción. Etapas 1–4 completas; Etapas 5–6 pendientes.
|
||||
|
||||
### Etapa 1 — Cimientos del dominio (completada)
|
||||
|
||||
**Nuevos campos en el modelo de dominio** (`src/domain/types.ts`):
|
||||
|
||||
- `Activity` gana: `automatable: boolean`, `automatedCostFixed: number`, `automatedTimeMinutes: number`
|
||||
- `Process` gana: `annualFrequency: number`, `analysisHorizonYears: number`, `automationInvestment: number`
|
||||
- Nuevo tipo `Scenario = 'actual' | 'automated'`
|
||||
- `SimulationInput` acepta `scenario?: Scenario` (opcional, default `'actual'` para retrocompatibilidad)
|
||||
- `Simulation` gana `resultAutomated?: SimulationResult` (opcional, para retrocompatibilidad con snapshots viejos)
|
||||
|
||||
**Migración Dexie v1 → v2** (`src/persistence/db.ts`):
|
||||
|
||||
- `version(2).upgrade()` popula defaults en registros existentes:
|
||||
- Activities: `automatable=false`, `automatedCostFixed=0`, `automatedTimeMinutes=0`
|
||||
- Processes: `annualFrequency=1000`, `analysisHorizonYears=3`, `automationInvestment=0`
|
||||
- Sin cambio de índices — solo nuevos campos con defaults seguros.
|
||||
|
||||
**Nuevo módulo de ROI** (`src/domain/roi.ts`):
|
||||
|
||||
- Función pura `calculateRoi(input: RoiInput): RoiResult`
|
||||
- Fórmulas nominales simples (sin VPN ni TIR — decisión de diseño ADR-014)
|
||||
- Edge cases explicitados: inversión cero, ahorro negativo, costo actual cero (evitar div/0)
|
||||
- `paybackMonths = Infinity` cuando no hay ahorro, `roiAnnualPercent = Infinity` cuando inversión=0 y ahorro>0
|
||||
|
||||
**Motor de simulación dual** (`src/domain/simulation.ts`):
|
||||
|
||||
- Acepta `scenario` en `SimulationInput`
|
||||
- En `'automated'`: actividades con `automatable=true` usan `automatedCostFixed`/`automatedTimeMinutes`
|
||||
- Las no-automatable mantienen sus costos originales en ambos escenarios
|
||||
- La probabilidad de ejecución NO cambia entre escenarios — solo costos y tiempos
|
||||
|
||||
**Simulation store refactorizado** (`src/store/simulation-store.ts`):
|
||||
|
||||
- `result` (single) → `resultActual + resultAutomated + lastSimulatedAt`
|
||||
- Nueva acción `persistResults(processId, actual, automated)`: guarda en Dexie + actualiza memoria en un solo paso atómico
|
||||
- Nueva acción `invalidateResults()`: pone ambos a null
|
||||
- Suscripción reactiva a `process-store`: cualquier cambio en `activities` o `currentProcess` invalida ambos resultados automáticamente
|
||||
- **Dependencia intencional documentada**: `simulation-store` importa `process-store` en una dirección (sin inversa → sin ciclo)
|
||||
|
||||
**useSimulate refactorizado** (`src/features/simulation/useSimulate.ts`):
|
||||
|
||||
- Corre las dos simulaciones en el mismo ciclo y llama `persistResults` del store (eliminando el import directo de `simulationRepo` desde un hook de feature)
|
||||
- Retorna `{ resultActual, resultAutomated }` en lugar de un único result
|
||||
|
||||
**Infraestructura ESLint** (`eslint.config.js` — archivo nuevo):
|
||||
|
||||
- Primer config de ESLint del proyecto (antes no existía)
|
||||
- Regla `no-restricted-imports`: prohíbe importar `persistence/repositories` desde fuera de `store/`
|
||||
- Overrides para `store/**`, `features/import/**`, `features/report/useReportData.ts`, `tests/**`
|
||||
- Regla `react-hooks/set-state-in-effect: 'off'`: patrón de sync local state con useEffect es válido en este codebase
|
||||
- **Por qué importa**: si alguien llama `activityRepo.save()` directamente desde una feature sin pasar por el store, los resultados de simulación quedan stale (la suscripción reactiva no dispara)
|
||||
|
||||
**Tests nuevos** (32 tests):
|
||||
|
||||
- `tests/domain/roi.test.ts`: 16 casos cubriendo happy path, inversión cero, ahorro negativo, NaN
|
||||
- `tests/integration/dexie-migration.test.ts`: 6 casos de persistencia de los nuevos campos con valores default y no-default
|
||||
- `tests/store/simulation-store-invalidation.test.ts`: 7 casos de la invariante de invalidación dual
|
||||
- `tests/integration/sprint1-flow.test.ts`: 11 casos del flujo integrado BPMN → sim actual → sim automated → calculateRoi → KPIs
|
||||
- `tests/domain/simulation.test.ts`: +4 casos de `scenario=automated` con costos en cero, sin NaN, probabilidad invariante
|
||||
- `tests/integration/bpmn-collaboration.test.ts`: 3 casos para BPMNs de colaboración con múltiples pools
|
||||
|
||||
**Archivos de test actualizados** (fixtures con nuevos campos):
|
||||
|
||||
- `tests/integration/simulation-engine.test.ts`
|
||||
- `tests/integration/gateway-validation.test.ts`
|
||||
- `tests/integration/indexeddb-persistence.test.ts`
|
||||
- `tests/features/report/components.test.tsx`
|
||||
- `tests/features/report/derivations.test.ts`
|
||||
- `tests/lib/export/measure-sizes.test.ts`
|
||||
- `tests/lib/export/csv-export.test.ts`
|
||||
- `tests/lib/export/pdf-export.test.ts`
|
||||
- `tests/setup.ts`: mocks globales `ResizeObserver` y `PointerEvent` para jsdom (necesario desde Sprint 1 para tests con Slider de Radix)
|
||||
|
||||
### Etapa 2 — UI de Configuración (completada)
|
||||
|
||||
**Switch component** (`src/components/ui/switch.tsx` — nuevo):
|
||||
|
||||
- Implementación Tailwind pura sin `@radix-ui/react-switch`
|
||||
- `role="switch"` + `aria-checked` + `aria-label` para accesibilidad
|
||||
- Transiciones CSS: `transition-colors duration-200` en el fondo, `transition-transform duration-200` en el knob
|
||||
- **Decisión**: no instalar `@radix-ui/react-switch` para no agregar dependencia — el comportamiento visual es idéntico
|
||||
|
||||
**ActivityPanel ampliado** (`src/features/workspace/ActivityPanel.tsx`):
|
||||
|
||||
- Nueva sección "Automatización" al pie del panel, separada con `<Separator>`
|
||||
- Toggle Switch (`automatable`) oculta/muestra los campos con `transition-all duration-200 overflow-hidden max-h-{0|80}`
|
||||
- **Limitación conocida**: el max-height trick no anima a la altura real del contenido. Ver TODO.md para mejora con `useRef + scrollHeight`
|
||||
- Inputs numéricos `automatedCostFixed` y `automatedTimeMinutes` con mismo patrón que los existentes (placeholder cuando valor=0)
|
||||
- Helper ámbar de transparencia metodológica:
|
||||
- Aparece cuando `automatable=true && cost===0 && time===0`
|
||||
- **Siempre está en el DOM** (no conditional render) — la visibilidad se controla con `opacity-0/100 + max-h-0/20 + transition-all duration-150`
|
||||
- `aria-hidden` refleja el estado de visibilidad
|
||||
- **Por qué importa**: con conditional render (`&&`) el helper desaparece instantáneamente al tipear — sin transición. Al mantenerlo en el DOM, el fade de 150ms se aplica correctamente
|
||||
|
||||
**GlobalSettingsPanel ampliado** (`src/features/workspace/GlobalSettingsPanel.tsx`):
|
||||
|
||||
- Nueva sección "Análisis de Impacto" al pie del panel
|
||||
- `annualFrequency`: input numérico, min=1, sugerencias de referencia en texto helper
|
||||
- `analysisHorizonYears`: Slider de 1 a 10 años con valor en texto ("3 años")
|
||||
- `automationInvestment`: input numérico, default placeholder vacío cuando valor=0
|
||||
- La validación de rango de `analysisHorizonYears` (clamp 1-10) ocurre en `handleSave`, no en `onChange`
|
||||
|
||||
**BpmnCanvas ampliado** (`src/features/workspace/BpmnCanvas.tsx`):
|
||||
|
||||
- Nueva prop `automatableElementIds?: string[]`
|
||||
- `syncAutomationOverlays()`: callback memoizado con `useCallback([automatableElementIds])`
|
||||
- Limpia overlays anteriores con `overlays.remove({ type: 'automation-indicator' })`
|
||||
- Re-agrega un badge por cada elementId en la lista
|
||||
- Se llama después de `importXML` (en el `.then()`) y en un `useEffect` separado cuando cambia la lista
|
||||
- **Posicionamiento del badge**: `{ top: -8, left: element.width - 12 }`
|
||||
- Obtenido via `elementRegistry.get(elementId)` con fallback `width ?? 100`
|
||||
- **No usar** `position.right` de diagram-js: con `right: -8`, la fórmula interna `left = right * -1 + width` da `left = 8 + width`, colocando el badge enteramente fuera del nodo sin overlap de esquina
|
||||
- Con `left = width - 12`: badge left está 12px antes del borde derecho, su borde derecho queda 8px fuera → overlap visible en la esquina
|
||||
- **Badge HTML**: círculo 20×20px, fondo `#fffbeb` (amber-50), borde `#e2e8f0`, sombra `0 1px 3px rgba(0,0,0,0.12)`, ícono Bot Lucide en `#f59e0b` como SVG inline
|
||||
- `pointer-events: none` para no interferir con clicks en el nodo
|
||||
- `title` nativo del browser como tooltip
|
||||
- **Por qué `#fffbeb` y no `#ffffff`**: el fondo de los nodos BPMN también es blanco, el fondo ámbar le da identidad cromática propia y hace visible el círculo por contraste
|
||||
|
||||
**WorkspacePage** (`src/features/workspace/WorkspacePage.tsx`):
|
||||
|
||||
- Destructura `activities` del process-store
|
||||
- Calcula `automatableElementIds` con `useMemo`
|
||||
- Pasa `useDeferredValue(automatableElementIds)` al BpmnCanvas (evita cascada de re-renders al editar el panel)
|
||||
|
||||
**AutomationScenarioNote** (`src/features/report/AutomationScenarioNote.tsx` — nuevo):
|
||||
|
||||
- Componente de leyenda para el tab "Automatizado" del reporte
|
||||
- Preparado y listo para ser colocado por Etapa 3 — no tiene lógica propia
|
||||
|
||||
### Etapa 3 — Motor dual y reporte con tabs (completada)
|
||||
|
||||
**ReportPage ampliada** (`src/features/report/ReportPage.tsx`):
|
||||
|
||||
- La página ahora tiene 3 tabs: **Actual** | **Automatizado** | **Comparación + ROI**
|
||||
- El contenido existente (KpiBar, heatmap, 3 gráficos, tabla de actividades) pasa intacto al tab "Actual"
|
||||
- Los tabs "Automatizado" y "ROI" se deshabilitan si la simulación no tiene `resultAutomated` (snapshot viejo) — en ese caso se muestra `NeedsResimulate` que guía al usuario a re-simular
|
||||
- `useMemo` para `automatableIds` y `roi` se declaran antes de los early returns (cumple reglas de hooks)
|
||||
- Los refs de heatmap son independientes por tab (`heatmapRef` / `heatmapRefAuto`) — el tab "Actual" sigue siendo el fuente de imagen para el export PDF
|
||||
- Export PDF/CSV sin cambios — Etapa 4 los ampliará
|
||||
|
||||
**Tab "Automatizado"**:
|
||||
|
||||
- Mismo layout que "Actual": KpiBar → heatmap con cross-linking → 3 gráficos → tabla
|
||||
- Usa `simulation.resultAutomated` como fuente de datos
|
||||
- `AutomationScenarioNote` aparece al pie del heatmap (componente preparado en Etapa 2)
|
||||
- Heatmap y tabla tienen su propio estado `selectedIdAuto` — cross-linking funciona independientemente del tab "Actual"
|
||||
|
||||
**Tab "Comparación + ROI"**:
|
||||
|
||||
- `RoiKpiBar` (`src/features/report/RoiKpiBar.tsx` — nuevo): 5 KPI cards en grid 2×5 (lg)
|
||||
- Ahorro por ejecución (con % sobre costo actual)
|
||||
- Ahorro anual
|
||||
- Payback (meses o años según magnitud; "Inmediato" si inversión=0; "No se recupera" si Infinity)
|
||||
- Ahorro acumulado neto a N años
|
||||
- ROI anual % ("∞%" si inversión=0 y ahorro>0)
|
||||
- Los valores positivos se muestran en `text-emerald-700`, negativos en `text-red-600`
|
||||
- `ComparisonTable` (`src/features/report/ComparisonTable.tsx` — nuevo):
|
||||
- Tabla actividad por actividad: costo actual | costo automatizado | ahorro | % ahorro
|
||||
- Ícono Bot ámbar en la primera columna para actividades marcadas `automatable`
|
||||
- Ordenable por ahorro (↕) — default descendente
|
||||
- Usa `Set<bpmnElementId>` para el lookup de `automatable` en O(1)
|
||||
- `CumulativeSavingsChart` (`src/features/report/CumulativeSavingsChart.tsx` — nuevo):
|
||||
- Gráfico de línea + área (ECharts): X=años 0..N, Y=ahorro neto acumulado
|
||||
- Línea de break-even en y=0 siempre visible
|
||||
- Marker vertical dashed verde en `x=paybackYears` (solo si finite y dentro del horizonte)
|
||||
- Tooltip muestra valor del año exacto con color según signo
|
||||
- `TopSavingsChart` (`src/features/report/TopSavingsChart.tsx` — nuevo):
|
||||
- Top 5 actividades por ahorro positivo — barras horizontales verdes
|
||||
- Excluye actividades con ahorro ≤ 0
|
||||
- Altura dinámica: `max(180, n * 48)` px — no hay espacio vacío si hay menos de 5 actividades
|
||||
- `TransparencySection` (`src/features/report/TransparencySection.tsx` — nuevo):
|
||||
- Condicional — solo se renderiza si hay issues metodológicos detectados
|
||||
- **Issue 1**: actividades con `automatable=true` pero `automatedCostFixed=0` y `automatedTimeMinutes=0` → el ahorro puede estar inflado. Lista los nombres de cada actividad
|
||||
- **Issue 2**: `automationInvestment=0` → payback "inmediato" e ROI "infinito" no reflejan la realidad
|
||||
- Fondo amber-50, borde amber-200 — consistente con el helper del ActivityPanel
|
||||
|
||||
**Por qué ROI inline y no en `useReportData`**:
|
||||
El `calculateRoi` toma `simulation.result.totalCost` y `simulation.resultAutomated.totalCost` — valores ya disponibles en el componente. Moverlo al hook agregaría un `useEffect` extra sin beneficio. Se mantiene en el componente como `useMemo`.
|
||||
|
||||
**Tests nuevos** (17 tests):
|
||||
|
||||
- `tests/features/workspace/ActivityPanel.test.tsx`: 6 casos — toggle, helper ámbar con `aria-hidden`, dispatch de `updateActivity`
|
||||
- `tests/features/workspace/GlobalSettingsPanel.test.tsx`: 7 casos — defaults, edición de campos, dispatch de `updateProcess`
|
||||
- `tests/features/workspace/BpmnCanvas.test.tsx`: 4 casos — overlay add/remove, posición `left=width-12`, HTML con `#fffbeb` y `#f59e0b`
|
||||
|
||||
**Patrón de mocks para tests de componentes** (documentado para referencia futura):
|
||||
|
||||
- Los mocks del store con `vi.hoisted()` devuelven referencias estables
|
||||
- Sin `vi.hoisted`: cada llamada a `useProcessStore()` devuelve un nuevo objeto → el `useEffect([activities])` de ActivityPanel dispara en loop infinito → "Maximum update depth exceeded"
|
||||
- `simulation-store.ts` importa `process-store.ts` al nivel de módulo: los mocks deben ser compatibles o el store no carga
|
||||
|
||||
---
|
||||
|
||||
## [0.1.0-mvp] — MVP Fase 0 — 2026-05-13
|
||||
|
||||
### Contexto
|
||||
|
||||
Primera entrega funcional. Construida en una sesión de trabajo.
|
||||
Objetivo: demostrar en ≤15 minutos que se puede transformar un BPMN en un reporte de costos.
|
||||
|
||||
### Funcionalidades
|
||||
|
||||
- Importar BPMN 2.0 por drag & drop o desde procesos de ejemplo
|
||||
- Renderizar diagrama en canvas read-only (bpmn-js Viewer)
|
||||
- Configurar actividades: costo fijo, tiempo, recursos asignados con utilización
|
||||
- CRUD de recursos (rol/persona/sistema/equipo/insumo + costo/hora)
|
||||
- Configuración global: moneda, overhead %, nombre proceso, cliente
|
||||
- Motor de simulación determinístico con propagación de probabilidades por gateways XOR, AND, inclusivo
|
||||
- Detección de loops (back-edges via DFS): se advierte pero no bloquea
|
||||
- Reporte visual: mapa de calor en dos modos (relativo/absoluto), KPIs, top actividades, composición, costo por recurso
|
||||
- Export PDF: 3 páginas (header+KPIs+heatmap, análisis, tabla detalle), con jsPDF-autotable
|
||||
- Export CSV: con BOM UTF-8 y metadatos del proceso
|
||||
- Persistencia en IndexedDB (Dexie v1)
|
||||
- Deploy estático en Cloudflare Pages
|
||||
|
||||
### Decisiones de diseño relevantes para el futuro
|
||||
|
||||
**Parser BPMN multi-pool** (`bpmn-parser.ts`):
|
||||
|
||||
- Itera todos los `<bpmn:process>` hijos directos de `<definitions>` (no solo el primero)
|
||||
- Fix crítico: el parser original usaba `querySelector` que retorna solo el primero → todos los pools de una colaboración excepto el primero eran ignorados
|
||||
- Pools de soporte (SAP, bandeja manual) pueden no tener StartEvent propio — la validación exige al menos uno entre todos los pools
|
||||
|
||||
**Heatmap sobre bpmn-js** (`HeatmapCanvas.tsx`):
|
||||
|
||||
- bpmn-js rechaza la promesa de `importXML` pero el diagrama se renderiza parcialmente → usar `eventBus.on('import.done', ...)` en lugar de `.then()`
|
||||
- `element.style.fill = color` (NO `setAttribute('fill', color)`): bpmn-js aplica CSS que tiene mayor especificidad que atributos SVG
|
||||
- `captureImage()` espera 500ms después de importar para que la transición CSS `fill 0.35s ease` complete antes de la captura con html2canvas
|
||||
|
||||
**Validación XOR en WorkspacePage** (`WorkspacePage.tsx`):
|
||||
|
||||
- `hasLoadedOnce` ref: evita que el redirect "proceso no encontrado" dispare en el render inicial donde `isLoading=false` y `currentProcess=null` (antes del primer efecto de carga)
|
||||
|
||||
### Tests
|
||||
|
||||
268 tests unitarios + integración al cierre de MVP.
|
||||
5 tests E2E con Playwright (import → simulate → export PDF/CSV × 3 BPMNs + acentos + gradiente de color).
|
||||
El test de gradiente verifica con `sharp` que el heatmap del PDF contiene píxeles verdes, ámbar y rojos — evita regresiones en la lógica de coloreo.
|
||||
|
||||
---
|
||||
|
||||
## Convenciones de este changelog
|
||||
|
||||
- **Decisiones de diseño**: se documenta el *por qué*, no solo el *qué*
|
||||
- **Gotchas**: comportamientos contrarios a la intuición se marcan explícitamente
|
||||
- **Edge cases**: si un edge case motivó un test específico, se menciona
|
||||
- **Retrocompatibilidad**: cuando un campo es opcional por retrocompat, se indica
|
||||
- Las entradas son para humanos que modificarán el código, no para usuarios finales
|
||||
203
CLAUDE.md
203
CLAUDE.md
@@ -5,11 +5,54 @@
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Reglas de Marca — NO NEGOCIABLES (Sprint 1.5+)
|
||||
|
||||
Estas reglas aplican a TODO string que aparezca en código, PDFs, CSVs, tests y documentación.
|
||||
|
||||
### 1. Ortografía de "InQ" — SIEMPRE I-n-Q
|
||||
|
||||
```
|
||||
✅ InQ ← correcto
|
||||
✅ InQuality ← correcto (nombre completo)
|
||||
✅ InQ ROI ← nombre del producto
|
||||
|
||||
❌ INQ ← bug
|
||||
❌ Inq ← bug
|
||||
❌ inq ← bug
|
||||
❌ inQ ← bug
|
||||
```
|
||||
|
||||
Cualquier desviación es un bug que debe corregirse antes de hacer commit.
|
||||
|
||||
### 2. Nombre del producto
|
||||
|
||||
`InQ ROI` — nombre de trabajo para Sprint 1.5. Se reemplazará en Sprint 3-4. No debatir el nombre ahora.
|
||||
|
||||
### 3. Color protagonista
|
||||
|
||||
```
|
||||
Primario: #F59845 (naranja InQ)
|
||||
Gradiente: #F59845 → #ED3E8F (naranja → magenta InQ)
|
||||
```
|
||||
|
||||
El gradiente se usa SOLO en KPI Hero y banners principales.
|
||||
**NO usar morado de CONCILIA** (`#572FA2`, `#CB1889`) en este producto.
|
||||
|
||||
### 4. Footer de PDFs
|
||||
|
||||
Tagline obligatorio: `"Powered by InQuality"` — en todos los footers de PDF, siempre.
|
||||
|
||||
### 5. Rol del consultor
|
||||
|
||||
Si aparece un nombre de consultor en algún campo, es como "consultor responsable", no como "creador" ni "founder" del producto.
|
||||
|
||||
---
|
||||
|
||||
## Identidad del Proyecto
|
||||
|
||||
**Nombre de trabajo**: Process Cost Platform (nombre comercial por definir)
|
||||
|
||||
**Una frase**: Plataforma web para que consultores de procesos transformen un archivo BPMN 2.0 en un reporte visual deslumbrante de costos operativos en minutos.
|
||||
**Una frase**: Plataforma web para que consultores de procesos cuantifiquen costos operativos y calculen ROI de automatización a partir de archivos BPMN 2.0.
|
||||
|
||||
**Mantra**: *Los procesos de negocio son activos estratégicos de las empresas y un diferencial competitivo.*
|
||||
|
||||
@@ -17,37 +60,83 @@
|
||||
|
||||
## Estado Actual
|
||||
|
||||
- **Fase**: 0 — MVP "Noche Cero"
|
||||
- **Fase**: 1 — Sprint 1 (ROI y escenarios de automatización)
|
||||
- **Fase anterior completada**: 0 — MVP "Noche Cero" (v0.1.0-mvp, deployado en https://process-cost-platform.pages.dev)
|
||||
- **Documento maestro**: `ARCHITECTURE.md` (raíz del repo)
|
||||
- **Fecha objetivo MVP**: una noche
|
||||
- **Deploy objetivo**: Cloudflare Pages (estático, gratis)
|
||||
- **Audiencia primaria del Sprint 1**: equipo de InQuality (consultora de procesos)
|
||||
- **Caso de uso primario**: pre-venta de proyectos de automatización con cálculo de ROI
|
||||
- **Deploy**: Cloudflare Pages (estático, gratis)
|
||||
|
||||
---
|
||||
|
||||
## Reglas No Negociables del MVP
|
||||
## Reglas No Negociables — Sprint 1
|
||||
|
||||
### ✅ Lo que SÍ hacemos esta noche
|
||||
### ✅ Lo que SÍ entra en Sprint 1
|
||||
|
||||
1. Importar archivo `.bpmn` por drag & drop
|
||||
2. Renderizar el diagrama en read-only con bpmn-js
|
||||
3. Editar atributos de actividades (costo, tiempo, recursos asignados)
|
||||
4. CRUD de recursos (rol/persona/sistema/equipo/insumo + costo/hora)
|
||||
5. Configuración global (moneda, overhead %, nombre proceso, cliente)
|
||||
6. Motor de simulación determinístico agregado
|
||||
7. Reporte visual con mapa de calor sobre el diagrama
|
||||
8. Gráficos: KPIs, top actividades, costo por actividad, composición, costo por recurso
|
||||
9. Export a PDF (presentable a cliente) y CSV
|
||||
10. Persistencia en IndexedDB (Dexie)
|
||||
1. **Volumetría del proceso**: frecuencia anual de ejecución + horizonte de análisis (años)
|
||||
2. **Marcado de actividades automatizables** con costos automatizados (tiempo + costo fijo)
|
||||
3. **Inversión en automatización** como dato del proceso (un único valor agregado)
|
||||
4. **Motor de simulación dual**: corre escenarios "actual" y "automatizado" sobre el mismo BPMN
|
||||
5. **Sección de ROI en el reporte**: KPIs grandes, tabla comparativa, gráficos de payback y ahorros
|
||||
6. **5 KPIs de ROI**: Ahorro por ejecución, Ahorro anual, Payback (meses), Ahorro acumulado a N años, ROI % anualizado
|
||||
7. **Mecanismo de transparencia**: detecta valores cero o inversión cero y los expone en el reporte
|
||||
8. **Migración Dexie v1 → v2** con datos existentes preservados
|
||||
9. **Export PDF/CSV ampliado** para incluir páginas/datos de ROI
|
||||
10. **Documento metodológico anexo** sobre cómo calcular el costo automatizado por ejecución
|
||||
|
||||
### ❌ Lo que NO hacemos esta noche
|
||||
### ❌ Lo que NO entra en Sprint 1
|
||||
|
||||
Login · Multi-tenant · Backend · Colaboración · Edición del BPMN · Versionado · Distribuciones probabilísticas · Riesgos · Gobernanza/RACI · Jerarquía organizacional · IA · Elementos RPA/Agente custom · Tutoriales · Marketplace · i18n · PWA installable · Modo oscuro
|
||||
- Múltiples escenarios (más de 2)
|
||||
- Escenarios como entidad separada (modelo B) — sigue siendo modelo A: dos pares de campos por actividad
|
||||
- VPN, TIR, tasa de descuento (cálculos financieros sofisticados)
|
||||
- Captura desglosada del costo de automatización (licencias, desarrollo, infra) — un único campo
|
||||
- Análisis de sensibilidad ("¿qué pasa si la frecuencia cae 30%?")
|
||||
- Distribuciones probabilísticas
|
||||
- Modelar bots como recursos con capacidad
|
||||
- Multi-tenant, login, colaboración, versionado, IA, modo oscuro, i18n, PWA
|
||||
|
||||
**Si dudás si una feature entra: NO ENTRA.** Defendé el alcance.
|
||||
**Si dudás si una feature entra: NO ENTRA.** Defendé el alcance. Anotala en `TODO.md`.
|
||||
|
||||
---
|
||||
|
||||
## Stack Obligatorio (MVP)
|
||||
## Decisiones Arquitectónicas Adoptadas (Sprint 1)
|
||||
|
||||
### Modelo de escenarios: Modelo A (dos campos por actividad)
|
||||
|
||||
Cada actividad tiene:
|
||||
- `directCostFixed` y `executionTimeMinutes` (escenario actual, ya existían)
|
||||
- `automatedCostFixed` y `automatedTimeMinutes` (nuevos, escenario automatizado)
|
||||
- `automatable: boolean` (default false)
|
||||
|
||||
**NO se modela con dos diagramas distintos.** Un BPMN, dos pares de campos por actividad. El motor recibe un parámetro `scenario: 'actual' | 'automated'` y aplica los campos correspondientes.
|
||||
|
||||
Migración a "escenarios como entidad" se evaluará en Sprint 3-4 si InQuality lo demanda.
|
||||
|
||||
### Volumetría: multiplicador en el reporte, no en el motor
|
||||
|
||||
El motor sigue siendo **determinístico** y calcula "una ejecución". La volumetría (frecuencia anual + horizonte) es un parámetro del proceso que el reporte usa para extrapolar:
|
||||
- `costoAnual = costoUnitario × frecuenciaAnual`
|
||||
- `costoHorizonte = costoAnual × horizonteAños`
|
||||
|
||||
No se introduce VPN ni Monte Carlo en Sprint 1.
|
||||
|
||||
### ROI: cálculos nominales simples
|
||||
|
||||
- `savingsPerExecution = costActual - costAutomated`
|
||||
- `annualSavings = savingsPerExecution × annualFrequency`
|
||||
- `paybackMonths = (automationInvestment / annualSavings) × 12`
|
||||
- `cumulativeSavingsHorizon = (annualSavings × horizonYears) - automationInvestment`
|
||||
- `roiAnnualPercent = (annualSavings / automationInvestment) × 100`
|
||||
|
||||
Edge cases manejados explícitamente: inversión cero, ahorro negativo, división por cero.
|
||||
|
||||
### Transparencia metodológica
|
||||
|
||||
Si se detectan valores cero (costo automatizado en cero, inversión en cero, etc.), el reporte muestra una **sección visible pero discreta** ("Transparencia metodológica") con la lista de valores no informados. **Es feature, no bug**: convierte una posible debilidad en señal de seriedad profesional para el cliente.
|
||||
|
||||
---
|
||||
|
||||
## Stack Tecnológico (sin cambios respecto al MVP)
|
||||
|
||||
| Capa | Tecnología |
|
||||
|---|---|
|
||||
@@ -61,16 +150,16 @@ Login · Multi-tenant · Backend · Colaboración · Edición del BPMN · Versio
|
||||
| Gráficos | Apache ECharts (vía echarts-for-react) |
|
||||
| Persistencia | IndexedDB vía Dexie |
|
||||
| Validación | Zod |
|
||||
| Export PDF | jsPDF + html2canvas |
|
||||
| Export PDF | jsPDF + jsPDF-autotable + html2canvas |
|
||||
| Export CSV | papaparse |
|
||||
| Testing | Vitest |
|
||||
| Testing | Vitest + Playwright |
|
||||
| Deploy | Cloudflare Pages |
|
||||
|
||||
**No introduzcas librerías fuera de esta lista sin justificación explícita.**
|
||||
|
||||
---
|
||||
|
||||
## Arquitectura de Carpetas (obligatoria)
|
||||
## Arquitectura de Carpetas
|
||||
|
||||
```
|
||||
src/
|
||||
@@ -79,22 +168,23 @@ src/
|
||||
├── router.tsx
|
||||
├── domain/ ← lógica de negocio pura, sin React, testeable
|
||||
│ ├── types.ts
|
||||
│ ├── simulation.ts ← motor de simulación
|
||||
│ ├── simulation.ts ← motor de simulación (acepta scenario)
|
||||
│ ├── roi.ts ← NUEVO en Sprint 1: cálculos puros de ROI
|
||||
│ ├── bpmn-parser.ts
|
||||
│ └── schemas.ts ← Zod schemas
|
||||
├── store/ ← Zustand stores
|
||||
├── persistence/ ← Dexie / IndexedDB
|
||||
├── persistence/ ← Dexie / IndexedDB (v2 en Sprint 1)
|
||||
├── features/ ← organizado por feature, no por tipo
|
||||
│ ├── import/
|
||||
│ ├── workspace/
|
||||
│ ├── simulation/
|
||||
│ └── report/
|
||||
│ ├── workspace/ ← ampliado en Sprint 1 (panel de automatización)
|
||||
│ ├── simulation/ ← ampliado (dispara dual scenario)
|
||||
│ └── report/ ← ampliado (tab Comparación + ROI)
|
||||
├── components/ui/ ← shadcn copy-pastes
|
||||
├── lib/ ← utilidades transversales (format, colors, pdf, csv)
|
||||
└── styles/
|
||||
```
|
||||
|
||||
**Reglas de dependencia**:
|
||||
**Reglas de dependencia (sin cambios)**:
|
||||
- `domain/` NO importa de React, ni de `store/`, ni de `features/`. Es puro.
|
||||
- `features/` puede importar de `domain/`, `store/`, `persistence/`, `lib/`, `components/`.
|
||||
- `store/` puede importar de `domain/` y `persistence/`. Nada más.
|
||||
@@ -104,7 +194,7 @@ src/
|
||||
## Principios de Código
|
||||
|
||||
1. **TypeScript strict** activado. Nada de `any` salvo en bordes con librerías sin tipos.
|
||||
2. **Dominio puro**: el motor de simulación es una función pura testeable sin DOM.
|
||||
2. **Dominio puro**: motor y cálculos de ROI son funciones puras testeables sin DOM.
|
||||
3. **Componentes tontos, hooks inteligentes**: lógica en custom hooks, JSX limpio.
|
||||
4. **Sin lógica de negocio en componentes**.
|
||||
5. **Convenciones de naming**:
|
||||
@@ -114,18 +204,24 @@ src/
|
||||
- Tipos: `PascalCase`, interfaces con prefijo `I` PROHIBIDO
|
||||
6. **Comentarios en español**, código (variables, funciones) en inglés.
|
||||
7. **Errores con mensajes accionables** para el usuario, nunca traces crudos en UI.
|
||||
8. **Migraciones de schema**: SIEMPRE incrementar versión en Dexie, escribir función de upgrade y test que valide preservación de datos.
|
||||
|
||||
---
|
||||
|
||||
## Diferencial Visual (CRÍTICO)
|
||||
## Diferencial Visual (sigue siendo CRÍTICO)
|
||||
|
||||
El 60% del valor del MVP está en **el reporte final**. Si el reporte se ve mediocre, el MVP fracasa aunque el resto funcione. Reglas:
|
||||
El reporte sigue siendo el corazón. En Sprint 1 se le agregan páginas. Reglas:
|
||||
|
||||
- Tipografía: **Inter** para UI, **JetBrains Mono** para números/datos
|
||||
- Paleta heatmap: verde `#10b981` → amarillo `#f59e0b` → rojo `#ef4444`
|
||||
- Paleta ROI:
|
||||
- Ahorro positivo: verde `#10b981`
|
||||
- Ahorro marginal o neutro: gris `#64748b`
|
||||
- Ahorro negativo o payback fuera de horizonte: rojo `#ef4444`
|
||||
- Advertencias de transparencia: amarillo `#f59e0b` (no rojo: es informativo, no error)
|
||||
- Cifras de dinero siempre formateadas con separadores y símbolo de moneda
|
||||
- KPIs de ROI **más grandes** que los KPIs del reporte de costos (es la sección que vende)
|
||||
- El export PDF debe verse igual o mejor que la pantalla
|
||||
- Cada gráfico tiene título, leyenda clara y formato de moneda apropiado
|
||||
- Densidad de información media-alta (audiencia: consultor profesional)
|
||||
|
||||
---
|
||||
@@ -136,9 +232,11 @@ Antes de marcar una tarea como terminada:
|
||||
|
||||
- [ ] Funciona en el happy path
|
||||
- [ ] Maneja el caso de datos vacíos sin crashear
|
||||
- [ ] Persiste en IndexedDB cuando corresponde
|
||||
- [ ] Maneja edge cases definidos (división por cero, valores negativos, valores cero)
|
||||
- [ ] Persiste en IndexedDB cuando corresponde (con migración si cambió schema)
|
||||
- [ ] Tiene estilo consistente con el resto de la app
|
||||
- [ ] Si toca dominio: tiene al menos un test en Vitest
|
||||
- [ ] Si toca el flujo end-to-end: tiene cobertura en Playwright
|
||||
|
||||
---
|
||||
|
||||
@@ -147,9 +245,10 @@ Antes de marcar una tarea como terminada:
|
||||
```bash
|
||||
npm run dev # desarrollo
|
||||
npm run build # producción
|
||||
npm run test # tests con Vitest
|
||||
npm run test # tests unitarios con Vitest
|
||||
npm run lint # eslint
|
||||
npm run preview # previsualizar build
|
||||
npm run preview # previsualizar build de producción
|
||||
npx playwright test # tests E2E (Playwright headless)
|
||||
```
|
||||
|
||||
---
|
||||
@@ -161,13 +260,37 @@ npm run preview # previsualizar build
|
||||
- Si encontrás que algo del documento de arquitectura está mal o falta, **avisame antes de improvisar**.
|
||||
- No agregues features no pedidas. Si algo se te ocurre, anotalo en `TODO.md`.
|
||||
- Cuando completes algo, **mostrame los archivos creados/modificados**, no los pegues completos en el chat salvo que te lo pida.
|
||||
- **Validá programáticamente** lo que yo no puedo ver visualmente (uso Mac + VS Code + Claude Code sin browser interactivo). Para flujos críticos: Playwright + extracción de datos del PDF/CSV generado.
|
||||
- Si un test revela algo raro: **NO racionalices el problema, investigá la causa raíz**. Los tests no mienten.
|
||||
|
||||
---
|
||||
|
||||
## Contexto del Fundador
|
||||
## Contexto del Fundador y Equipo
|
||||
|
||||
- Consultor de automatización de procesos basado en Paraguay
|
||||
- Construye esto como herramienta consultiva propia + para vender a colegas LATAM
|
||||
- Construye esto como herramienta consultiva propia + del equipo de InQuality + para vender a colegas LATAM
|
||||
- Usa Claude Code Pro como único "equipo de desarrollo"
|
||||
- Lo va a presentar a clientes reales en días, no meses
|
||||
- Valora: claridad, robustez, pulido visual, mantenibilidad
|
||||
- Sprint 1 es para uso interno de InQuality (no para mostrar a cliente todavía)
|
||||
- Casos de uso confirmados:
|
||||
- Análisis de costos operativos en consultoría de procesos
|
||||
- **Pre-venta de proyectos de automatización con cálculo de ROI** (caso estrella del Sprint 1)
|
||||
- Valora: claridad, robustez, pulido visual, mantenibilidad, validación rigurosa
|
||||
|
||||
---
|
||||
|
||||
## Reglas de marca NO NEGOCIABLES
|
||||
|
||||
- "InQ" siempre se escribe I-n-Q (mayúscula-minúscula-mayúscula)
|
||||
- Color protagonista: naranja #F59845
|
||||
- Gradiente identidad: #F59845 → #ED3E8F
|
||||
- NO usar morado CONCILIA (#572FA2, #CB1889)
|
||||
- Footer obligatorio: "Powered by InQuality"
|
||||
- No promover a Marcos como creador
|
||||
|
||||
## Verificación final antes de present_files
|
||||
|
||||
Antes de presentar cualquier PDF al usuario, verificá que:
|
||||
1. El header/footer dice "InQ ROI" (no "Process Cost Platform" ni otro)
|
||||
2. El footer incluye "Powered by InQuality"
|
||||
3. No hay caracteres rotos (símbolos sin renderizar)
|
||||
4. La marca "InQ" se escribe siempre I-n-Q
|
||||
330
DESIGN_SYSTEM.md
Normal file
330
DESIGN_SYSTEM.md
Normal file
@@ -0,0 +1,330 @@
|
||||
# InQ ROI — Sistema de Diseño
|
||||
|
||||
> Documento de referencia visual para Sprint 2+.
|
||||
> Fuente de verdad para la paleta, tipografía y componentes.
|
||||
> Actualizar en cada sprint que modifique la identidad visual.
|
||||
|
||||
---
|
||||
|
||||
## 1. Identidad de Marca
|
||||
|
||||
### Nombre del producto
|
||||
**InQ ROI** — herramienta interna de InQuality para cuantificación de ROI de automatización.
|
||||
|
||||
### Regla de ortografía (NO NEGOCIABLE)
|
||||
```
|
||||
✅ InQ ← I mayúscula, n minúscula, Q mayúscula
|
||||
✅ InQuality ← nombre completo
|
||||
❌ INQ / Inq / inq / inQ ← cualquiera es bug
|
||||
```
|
||||
|
||||
### Tagline en footers PDF
|
||||
`"Powered by InQuality"` — obligatorio en todos los footers de PDF.
|
||||
|
||||
---
|
||||
|
||||
## 2. Paleta Cromática
|
||||
|
||||
### 2.1 InQ Orange — Color protagonista
|
||||
|
||||
| Token Tailwind | CSS Var | Hex | HSL | Uso |
|
||||
|---|---|---|---|---|
|
||||
| `bg-inq-orange` | `--inq-orange` | `#F59845` | 28° 90% 62% | Principal: logo, KPIs hero, CTAs primarios |
|
||||
| `bg-inq-orange-dark` | `--inq-orange-dark` | `#B45309` | 34° 93% 37% | Texto sobre fondos claros, hover de CTAs |
|
||||
| `bg-inq-orange-light` | `--inq-orange-light` | `#FEF3E2` | 36° 95% 88% | Fondos de KPI cards |
|
||||
| `bg-inq-orange-lighter` | `--inq-orange-lighter` | `#FFF8ED` | 36° 100% 94% | Fondos de banner narrativo, hover sutiles |
|
||||
|
||||
### 2.2 InQ Magenta — Gradiente identidad
|
||||
|
||||
| Token Tailwind | CSS Var | Hex | Uso |
|
||||
|---|---|---|---|
|
||||
| `bg-inq-magenta` | `--inq-magenta` | `#ED3E8F` | Segundo color del gradiente identidad |
|
||||
|
||||
#### Gradiente identidad
|
||||
```css
|
||||
background: linear-gradient(135deg, #F59845 0%, #ED3E8F 100%);
|
||||
```
|
||||
|
||||
**Uso exclusivo:** KPI Hero "Ahorro proyectado" en PDF y web. NUNCA en bordes, separadores ni fondos secundarios.
|
||||
|
||||
### 2.3 Semánticos
|
||||
|
||||
| Token Tailwind | CSS Var | Hex | Uso |
|
||||
|---|---|---|---|
|
||||
| `bg-success` | `--color-success` | `#16A34A` | Ahorros positivos, payback alcanzado |
|
||||
| `bg-success-light` | `--color-success-light` | `#F0FDF4` | Fondos de mensajes positivos |
|
||||
| `bg-warning` | `--color-warning` | `#F59E0B` | Advertencias, sección transparencia |
|
||||
| `bg-warning-bg` | `--color-warning-bg` | `#FFFBEB` | Fondo de sección transparencia |
|
||||
| `bg-destructive` / `--color-danger` | — | `#EF4444` | Costos altos, valores negativos |
|
||||
| `--color-danger-light` | — | `#FEE2E2` | Fondos de heatmap alto costo |
|
||||
|
||||
### 2.4 Heatmap — Paleta saturada (FIJA hasta Sprint 3-4)
|
||||
|
||||
| Token Tailwind | Hex | RGB | Uso |
|
||||
|---|---|---|---|
|
||||
| `bg-heatmap-low` | `#10B981` | (16, 185, 129) | Actividades de bajo costo |
|
||||
| `bg-heatmap-mid` | `#F59E0B` | (245, 158, 11) | Actividades de costo medio |
|
||||
| `bg-heatmap-high` | `#EF4444` | (239, 68, 68) | Actividades de alto costo |
|
||||
|
||||
#### Decisión sobre paleta de heatmap
|
||||
|
||||
**Se mantiene saturada** (verde-ámbar-rojo) en lugar de la variante pastel del brief por dos razones:
|
||||
|
||||
1. **Tests E2E calibrados**: los análisis de píxeles del heatmap (`export-pdf.spec.ts`, `validate-dod-etapa4.spec.ts`) tienen umbrales calibrados para estos colores. Cambiar la paleta requiere recalibrar todos esos umbrales.
|
||||
|
||||
2. **Visibilidad en pantallas grandes**: el producto se usa en talleres y charlas InQuality proyectadas en pantalla. Los colores saturados mantienen contraste a distancia. Los pasteles se "lavan" a 3+ metros.
|
||||
|
||||
**Revisión programada**: Sprint 3-4 con feedback real de uso en talleres.
|
||||
|
||||
**Invariante crítica**: los valores de `tailwind.config.js` `heatmap.*` DEBEN coincidir con las constantes `HEATMAP_LOW/MID/HIGH` en `src/lib/colors.ts`. Si se modifica uno, debe actualizarse el otro.
|
||||
|
||||
### 2.5 Neutrales
|
||||
|
||||
| Hex | Tailwind equivalente | Uso |
|
||||
|---|---|---|
|
||||
| `#0F172A` | `slate-900` | Títulos, números importantes |
|
||||
| `#475569` | `slate-600` | Texto del cuerpo |
|
||||
| `#64748B` | `slate-500` | Labels, metadatos |
|
||||
| `#94A3B8` | `slate-400` | Placeholders, texto muy secundario |
|
||||
| `#E2E8F0` | `slate-200` | Bordes generales |
|
||||
| `#F1F5F9` | `slate-100` | Separadores sutiles |
|
||||
| `#F8FAFC` | `slate-50` | Fondo de la app, canvas BPMN |
|
||||
|
||||
### 2.6 Colores que NO usar
|
||||
|
||||
```
|
||||
❌ #572FA2 Morado primario de CONCILIA — marca hermana, no mezclar
|
||||
❌ #CB1889 Magenta de CONCILIA
|
||||
❌ azul shadcn por defecto (221.2 83.2% 53.3%) — reemplazado por InQ orange
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Tipografía
|
||||
|
||||
### 3.1 Familias
|
||||
|
||||
```css
|
||||
/* Primaria — web app y body de PDFs */
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
|
||||
/* Mono — números en tablas, datos financieros */
|
||||
font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
|
||||
```
|
||||
|
||||
Tailwind: `font-sans` / `font-mono`
|
||||
|
||||
### 3.2 Escala PDF
|
||||
|
||||
| Elemento | Tamaño | Peso | Tracking |
|
||||
|---|---|---|---|
|
||||
| Logo "InQ ROI" en header | 22px | 700 | −0.8px |
|
||||
| Título de sección | 16px | 500 | normal |
|
||||
| KPI Hero (cifra) | 30px | 700 | −1px |
|
||||
| KPI secundario (cifra) | 16px | 700 | normal |
|
||||
| Body text | 11px | 400 | normal |
|
||||
| Labels en cards | 8px | 500 | 1px uppercase |
|
||||
| Tabla header | 10px | 500 | normal |
|
||||
| Tabla body | 10px | 400 | normal |
|
||||
| Footer | 9px | 400 | normal |
|
||||
|
||||
### 3.3 Escala Web App
|
||||
|
||||
| Elemento | Tamaño |
|
||||
|---|---|
|
||||
| Logo header | 18px / 700 |
|
||||
| Page title | 16px / 500 |
|
||||
| KPI Hero | 28px / 700 |
|
||||
| KPI secundario | 16px / 700 |
|
||||
| Nav / Tabs | 12px / 400-500 |
|
||||
| Body | 12-13px / 400 |
|
||||
| Labels en panels | 10-11px / 400-500 |
|
||||
|
||||
---
|
||||
|
||||
## 4. Componentes
|
||||
|
||||
### 4.1 KPI Hero (gradiente naranja → magenta)
|
||||
|
||||
```
|
||||
Fondo: linear-gradient(135deg, #F59845 0%, #ED3E8F 100%)
|
||||
Padding: 16-18px
|
||||
Border-radius: 6-8px
|
||||
Label: 9-10px / uppercase / letter-spacing 1.2px / white opacity 0.9
|
||||
Cifra: 28-30px / 700 / letter-spacing −1px / white
|
||||
Subtítulo: 10-11px / white opacity 0.85
|
||||
```
|
||||
|
||||
Uso: el KPI "Ahorro proyectado a N años" — el más importante del reporte ROI.
|
||||
|
||||
### 4.2 KPI Card (secundario, fondo naranja claro)
|
||||
|
||||
```
|
||||
Fondo: #FEF3E2 (inq-orange-light)
|
||||
Padding: 10px 12px
|
||||
Border-radius: 6px
|
||||
Label: 8px / 500 / letter-spacing 1px / color #92400E / uppercase
|
||||
Cifra: 16px / 700 / color #0F172A
|
||||
Delta: 10px / 500 / color #B45309
|
||||
```
|
||||
|
||||
### 4.3 Banner narrativo (resumen ejecutivo)
|
||||
|
||||
```
|
||||
Fondo: #FFF8ED (inq-orange-lighter)
|
||||
Border-left: 3px solid #F59845
|
||||
Padding: 10-12px 14px
|
||||
Border-radius: 0 4px 4px 0
|
||||
Texto: 11px / 400 / line-height 1.55 / color #475569
|
||||
```
|
||||
|
||||
### 4.4 Sección Transparencia Metodológica
|
||||
|
||||
```
|
||||
Fondo: #FFFBEB (warning-bg)
|
||||
Border: 0.5px solid #F59E0B
|
||||
Padding: 12px 14px
|
||||
Border-radius: 6px
|
||||
Título: 11px / 500 / color #92400E / con ícono ⚠
|
||||
Texto: 10px / 400 / line-height 1.6 / color #78350F
|
||||
```
|
||||
|
||||
4 condiciones que activan la sección:
|
||||
1. Actividades `automatable=true` con `automatedCostFixed=0` y `automatedTimeMinutes=0`
|
||||
2. `automationInvestment=0`
|
||||
3. `roiAnnualPercent > 1000` (finito)
|
||||
4. (reservado para futuras reglas)
|
||||
|
||||
### 4.5 Tabla comparativa PDF
|
||||
|
||||
```
|
||||
Header row:
|
||||
Fondo: #FFF8ED
|
||||
Border-bottom: 1px solid #F59845
|
||||
Texto: 10px / 500 / #92400E
|
||||
|
||||
Body row — automatizable:
|
||||
Fondo: white
|
||||
|
||||
Body row — no automatizable:
|
||||
Fondo: #F8FAFC
|
||||
Texto: color #64748B (más tenue)
|
||||
|
||||
Total row:
|
||||
Fondo: #FFF8ED
|
||||
Border-top: 1.5px solid #F59845
|
||||
Texto: 10px / 500 / #0F172A
|
||||
```
|
||||
|
||||
### 4.6 Header PDF
|
||||
|
||||
```
|
||||
Layout: flex justify-between
|
||||
Border-bottom: 3px solid #F59845 (pág. 1) / 2px (otras)
|
||||
Padding-bottom: 10-12px
|
||||
Margin-bottom: 14-16px
|
||||
|
||||
Izquierda:
|
||||
"InQ ROI" 18-22px / 700 / #F59845
|
||||
Tagline: 9px / letter-spacing 1.5px / #94A3B8 (solo pág. 1)
|
||||
|
||||
Derecha:
|
||||
"UN PRODUCTO DE" 9px / letter-spacing 1px / #94A3B8
|
||||
"InQ" 16px / 700 / #475569
|
||||
"InQuality" 9px / #64748B
|
||||
```
|
||||
|
||||
### 4.7 Footer PDF
|
||||
|
||||
```
|
||||
Position: absolute bottom 14-16mm
|
||||
Padding-top: 6-8px
|
||||
Border-top: 0.5px solid #E2E8F0
|
||||
Layout: flex justify-between
|
||||
Font: 9px / 400 / #94A3B8
|
||||
|
||||
Izquierda: "InQ ROI" bold #F59845 " · Powered by InQuality · " cliente · fecha
|
||||
Derecha: "Página X de Y"
|
||||
```
|
||||
|
||||
### 4.8 Badge ⚡ (Automatizable)
|
||||
|
||||
#### En canvas BPMN overlay
|
||||
```
|
||||
Diámetro: 14px
|
||||
Fondo: #F59845 (naranja sólido)
|
||||
Border: 1.5px solid white
|
||||
Posición: { top: -8, left: nodeWidth - 12 }
|
||||
Símbolo: ⚡ blanco 8px
|
||||
```
|
||||
|
||||
Nota: en Sprint 1 el badge usa fondo `#fffbeb` (ámbar-50) con ícono ámbar. La migración a naranja sólido se hace en **Etapa 9** de Sprint 1.5.
|
||||
|
||||
#### En tablas y leyendas
|
||||
```
|
||||
Diámetro: 14px inline
|
||||
Fondo: #F59845
|
||||
Color: white
|
||||
```
|
||||
|
||||
### 4.9 Layout híbrido de PDFs (portrait + landscape)
|
||||
|
||||
Los PDFs combinan orientaciones por página:
|
||||
|
||||
- **Páginas SIN diagrama**: A4 vertical (210×297mm) — texto, tablas, KPIs
|
||||
- **Página DEL diagrama BPMN**: A4 horizontal (297×210mm) — para que el diagrama ocupe espacio real
|
||||
|
||||
Implementación jsPDF: `doc.addPage([297, 210], 'landscape')`
|
||||
|
||||
---
|
||||
|
||||
## 5. Tokens en código
|
||||
|
||||
### Web (Tailwind)
|
||||
|
||||
```tsx
|
||||
// Colores de marca
|
||||
<div className="bg-inq-orange"> // #F59845
|
||||
<div className="bg-inq-orange-dark"> // #B45309
|
||||
<div className="bg-inq-orange-light"> // #FEF3E2
|
||||
<div className="text-inq-orange"> // texto naranja
|
||||
<div className="border-inq-orange"> // borde naranja
|
||||
|
||||
// Gradiente identidad (como style prop — Tailwind no soporta gradientes dinámicos)
|
||||
<div style={{ background: 'linear-gradient(135deg, #F59845 0%, #ED3E8F 100%)' }}>
|
||||
|
||||
// Semánticos
|
||||
<div className="bg-success text-white"> // #16A34A
|
||||
<div className="bg-warning-bg"> // #FFFBEB
|
||||
```
|
||||
|
||||
### PDF (jsPDF)
|
||||
|
||||
```typescript
|
||||
// Constante en pdf-sections.ts (a migrar en Etapas 4-8)
|
||||
const PDF_ORANGE: [number, number, number] = [245, 152, 69] // #F59845
|
||||
const PDF_ORANGE_LIGHT: [number, number, number] = [254, 243, 226] // #FEF3E2
|
||||
const PDF_MAGENTA: [number, number, number] = [237, 62, 143] // #ED3E8F
|
||||
|
||||
// Gradiente en jsPDF se simula con pasos (ver pdf-sections-roi.ts)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Reglas de uso — DO / DON'T
|
||||
|
||||
### DO ✅
|
||||
- Usar `bg-primary` / `text-primary` para todos los CTAs — hereda el naranja de `--primary`
|
||||
- Usar gradiente identidad en exactamente 1 KPI Hero por página/vista
|
||||
- Usar `font-mono` para todos los números financieros
|
||||
- Escribir siempre **InQ** con I-n-Q
|
||||
|
||||
### DON'T ❌
|
||||
- Usar `bg-blue-*` donde debería ir naranja InQ
|
||||
- Aplicar el gradiente en más de un elemento por vista
|
||||
- Usar colores de CONCILIA (`#572FA2`, `#CB1889`)
|
||||
- Cambiar los colores del heatmap sin recalibrar los tests E2E
|
||||
|
||||
---
|
||||
|
||||
*Actualizado: Sprint 1.5 Etapa 1 — 2026-05-16*
|
||||
159
METHODOLOGY_AUTOMATED_COST.md
Normal file
159
METHODOLOGY_AUTOMATED_COST.md
Normal file
@@ -0,0 +1,159 @@
|
||||
# Metodología: Costo Automatizado por Ejecución
|
||||
|
||||
> **Documento de referencia para consultores que usen la plataforma para análisis de ROI de automatización.**
|
||||
|
||||
---
|
||||
|
||||
## Propósito
|
||||
|
||||
Cuando una actividad se marca como **automatizable** en la plataforma, el consultor debe cargar el **costo automatizado por ejecución**. Este documento define qué debe incluir ese número, qué NO debe incluir, y cómo calcularlo correctamente para evitar ROIs irreales.
|
||||
|
||||
---
|
||||
|
||||
## Qué es el "costo automatizado por ejecución"
|
||||
|
||||
Es el **costo recurrente** asociado a cada ejecución individual de la actividad después de automatizada. **NO incluye la inversión inicial del proyecto**, que se carga aparte como "Inversión en automatización" a nivel del proceso.
|
||||
|
||||
---
|
||||
|
||||
## Componentes del costo automatizado por ejecución
|
||||
|
||||
Se compone de cuatro elementos. El consultor debe estimarlos por separado y sumarlos.
|
||||
|
||||
### 1. Costo del bot / licencia por ejecución
|
||||
|
||||
Costo prorrateado de la licencia de la plataforma de automatización (RPA, iPaaS, agente IA) por cada ejecución individual.
|
||||
|
||||
```
|
||||
costoLicencia = costoAnualLicencia / ejecucionesAnuales
|
||||
```
|
||||
|
||||
**Ejemplo**: licencia anual RocketBot $5.000, ejecuta 50.000 actividades/año → `$5.000 / 50.000 = $0,10` por ejecución.
|
||||
|
||||
### 2. Costo de infraestructura por ejecución
|
||||
|
||||
Costo prorrateado de servidores, monitoreo, observabilidad, almacenamiento.
|
||||
|
||||
```
|
||||
costoInfra = costoAnualInfra / ejecucionesAnuales
|
||||
```
|
||||
|
||||
**Ejemplo**: VPS dedicado $1.200/año + monitoreo $0 → `$1.200 / 50.000 = $0,024` por ejecución.
|
||||
|
||||
### 3. Costo de excepciones residuales
|
||||
|
||||
Las automatizaciones nunca son 100% efectivas. Un porcentaje de las ejecuciones requieren intervención humana (fallos, casos borde, errores de validación). Se debe estimar:
|
||||
- Tasa de excepciones (% de ejecuciones que requieren intervención)
|
||||
- Tiempo promedio de intervención humana
|
||||
- Costo/hora del recurso humano que interviene
|
||||
|
||||
```
|
||||
costoExcepciones = tasaExcepciones × tiempoIntervención × costoHoraHumano
|
||||
```
|
||||
|
||||
**Ejemplo**: 5% de excepciones, 8 minutos cada una, analista a $30/hora →
|
||||
`0,05 × (8/60) × $30 = $0,20` por ejecución (en promedio, considerando que solo el 5% genera este costo).
|
||||
|
||||
### 4. Costo de mantenimiento prorrateado
|
||||
|
||||
Cambios y actualizaciones del bot/integración, ajustes ante cambios de UI/API de los sistemas integrados, debugging continuo.
|
||||
|
||||
```
|
||||
costoMantenimiento = costoMantenimientoAnual / ejecucionesAnuales
|
||||
```
|
||||
|
||||
**Ejemplo**: 30 horas/año de mantenimiento × $100/hora = $3.000/año → `$3.000 / 50.000 = $0,06` por ejecución.
|
||||
|
||||
---
|
||||
|
||||
## Fórmula final
|
||||
|
||||
```
|
||||
costoAutomatizadoPorEjecución = costoLicencia
|
||||
+ costoInfra
|
||||
+ costoExcepciones
|
||||
+ costoMantenimiento
|
||||
```
|
||||
|
||||
**Ejemplo completo**: `$0,10 + $0,024 + $0,20 + $0,06 = $0,384 por ejecución`
|
||||
|
||||
---
|
||||
|
||||
## Qué NO incluir
|
||||
|
||||
- ❌ **Inversión inicial del proyecto** (desarrollo, licencias iniciales, implementación, capacitación): va en el campo "Inversión en automatización" a nivel proceso.
|
||||
- ❌ **Costos no recurrentes** (consultorías puntuales, asesorías): no son por ejecución.
|
||||
- ❌ **Costos del proceso de relevamiento previo**: corresponden al consultor, no a la operación.
|
||||
|
||||
---
|
||||
|
||||
## Componentes de la "Inversión en automatización" (campo separado)
|
||||
|
||||
Este campo agregado por proceso debe sumar:
|
||||
|
||||
- Costo de **desarrollo** del bot/integración (horas-hombre × tarifa)
|
||||
- **Licencias iniciales** o costos de setup únicos
|
||||
- **Implementación** y configuración inicial
|
||||
- **Capacitación** del equipo del cliente
|
||||
- **Infraestructura inicial** (servidores, software base)
|
||||
- **Consultoría externa** si aplica
|
||||
|
||||
**No incluir** costos recurrentes (esos van en el costo por ejecución).
|
||||
|
||||
---
|
||||
|
||||
## Validación de razonabilidad
|
||||
|
||||
Antes de presentar el reporte de ROI al cliente, validar:
|
||||
|
||||
| Indicador | Valor razonable | Si es muy distinto |
|
||||
|---|---|---|
|
||||
| Costo automatizado / costo actual | 5% - 30% | Verificar si se subestimaron las excepciones o el mantenimiento |
|
||||
| Payback | 6 - 24 meses | < 3 meses: revisar inversión; > 36 meses: revisar el caso de negocio |
|
||||
| Tasa de excepciones | 2% - 15% | < 1%: optimista; > 20%: el proceso quizás no es buen candidato |
|
||||
| Ahorro % por ejecución | 70% - 95% | < 50%: validar si vale la pena; > 95%: revisar excepciones |
|
||||
| **ROI anual** | **50% - 1.000%** | **> 1.000%: señal de inputs incorrectos — ver abajo** |
|
||||
|
||||
### ⚠️ ROI superior al 1.000% anual
|
||||
|
||||
La plataforma muestra una advertencia automática en la sección "Transparencia metodológica" cuando el ROI anualizado supera el 1.000% (y es un valor finito — no Infinity por inversión en cero).
|
||||
|
||||
Un ROI de este nivel es matemáticamente posible pero comercialmente inverosímil. Las causas más frecuentes son:
|
||||
|
||||
1. **Frecuencia anual sobreestimada**: confundir instancias del proceso con ejecuciones individuales de actividades. Verificar con datos reales del cliente.
|
||||
|
||||
2. **Costo automatizado por ejecución subestimado**: olvidar el componente de excepciones, el mantenimiento o la infra. Usar la fórmula de los 4 componentes de este documento.
|
||||
|
||||
3. **Inversión en automatización subestimada**: solo se incluyó el desarrollo y se olvidaron licencias, capacitación e implementación.
|
||||
|
||||
**Acción recomendada**: corregir los inputs, no ignorar la advertencia. El cliente —o alguien de su equipo técnico— va a hacer las mismas cuentas y un ROI de 10.000% destruye credibilidad.
|
||||
|
||||
---
|
||||
|
||||
## Manejo de valores cero
|
||||
|
||||
La plataforma detecta automáticamente cuando hay valores en cero:
|
||||
- Costo automatizado por ejecución = 0 en actividades marcadas como automatizables
|
||||
- Inversión en automatización = 0 con payback < 1 mes
|
||||
|
||||
Cuando esto ocurre, el reporte muestra una sección de **"Transparencia metodológica"** listando los valores no informados. **Esto NO es un error**: es una señal de transparencia hacia el cliente. Si el consultor no tiene aún todos los datos, el reporte refleja esa incertidumbre honestamente.
|
||||
|
||||
---
|
||||
|
||||
## Recomendación de proceso para el consultor
|
||||
|
||||
1. **Estimar la frecuencia anual real** del proceso (no asumir, validar con datos del cliente).
|
||||
2. **Listar las actividades automatizables** y para cada una:
|
||||
- Estimar costos por separado de los 4 componentes
|
||||
- Sumarlos
|
||||
- Cargar el total en la plataforma
|
||||
3. **Estimar la inversión total** del proyecto (no por ejecución, costo único).
|
||||
4. **Ejecutar la simulación** y revisar:
|
||||
- ¿El ROI es razonable según la tabla de validación?
|
||||
- ¿La sección de transparencia metodológica aparece? ¿Por qué? ¿Hay valores que faltan?
|
||||
5. **Refinar estimaciones** hasta que el modelo sea defendible.
|
||||
6. **Generar reporte** y revisarlo antes de enviarlo al cliente.
|
||||
|
||||
---
|
||||
|
||||
> **Principio guía**: un ROI conservador y defendible vale más que un ROI espectacular pero frágil. El cliente recordará la promesa, no la advertencia.
|
||||
247
README.md
247
README.md
@@ -1,46 +1,223 @@
|
||||
# Process Cost Platform — MVP Fase 0
|
||||
# Process Cost Platform
|
||||
|
||||
Plataforma web que transforma un archivo BPMN 2.0 en un reporte visual
|
||||
de costos operativos, listo para presentar a clientes en minutos.
|
||||
100% en el navegador — sin backend, sin registro, datos guardados localmente.
|
||||
> Transformá un archivo BPMN 2.0 en un reporte visual de costos operativos —
|
||||
> y calculá el ROI de automatizar ese proceso — en minutos, sin backend, sin registro.
|
||||
|
||||
## Cómo usarlo
|
||||
**Hecho desde Paraguay 🇵🇾 · Herramienta interna de InQuality · Sprint 1 en desarrollo activo**
|
||||
|
||||
1. **Importá** tu archivo `.bpmn` arrastrándolo a la pantalla principal,
|
||||
o cargá uno de los tres procesos de ejemplo incluidos.
|
||||
2. **Configurá** los costos fijos y tiempos de cada actividad en el workspace.
|
||||
Ajustá las probabilidades de los gateways XOR si las hay.
|
||||
3. **Simulá** para generar el análisis agregado de costos.
|
||||
4. **Exportá** el reporte en PDF (presentación para el cliente) o CSV (datos).
|
||||
---
|
||||
|
||||
## Stack
|
||||
## ¿Qué hace esto?
|
||||
|
||||
| Capa | Tecnología |
|
||||
|---|---|
|
||||
| Framework | React 19 + Vite 8 |
|
||||
| Routing | TanStack Router |
|
||||
| Estado | Zustand 5 |
|
||||
| Canvas BPMN | bpmn-js 18 (Viewer) |
|
||||
| UI | shadcn/ui + Tailwind CSS |
|
||||
| Gráficos | Apache ECharts |
|
||||
| Persistencia | IndexedDB vía Dexie 4 |
|
||||
| Export PDF | jsPDF + jspdf-autotable |
|
||||
| Export CSV | papaparse |
|
||||
| Testing | Vitest + Playwright |
|
||||
| Deploy | Cloudflare Pages |
|
||||
Un consultor de procesos recibe un diagrama BPMN del cliente. Con esta plataforma puede:
|
||||
|
||||
## Scripts
|
||||
1. **Importar** el diagrama (.bpmn) y ver el proceso renderizado al instante.
|
||||
2. **Configurar costos** actividad por actividad: costo fijo, tiempo, recursos humanos/sistemas.
|
||||
3. **Simular** para obtener el costo esperado de una ejecución completa, con propagación de probabilidades a través de gateways XOR, AND e inclusivos.
|
||||
4. **Ver el reporte** con mapa de calor sobre el diagrama, KPIs, gráficos, tabla de actividades.
|
||||
5. **Exportar** a PDF (presentación para el cliente) o CSV (datos para Excel).
|
||||
|
||||
En Sprint 1 (en curso):
|
||||
|
||||
6. **Marcar actividades como automatizables** y configurar sus costos en el escenario automatizado.
|
||||
7. **Calcular el ROI** del proyecto de automatización: payback, ahorro anual, acumulado a N años.
|
||||
8. **Mostrar un reporte comparativo** Actual vs. Automatizado con transparencia metodológica.
|
||||
|
||||
**Audiencia primaria**: consultores de InQuality que usan esto en pre-venta de proyectos de automatización.
|
||||
No es un producto de consumo masivo. El diseño prioriza densidad de información y velocidad de uso.
|
||||
|
||||
---
|
||||
|
||||
## Inicio rápido
|
||||
|
||||
```bash
|
||||
npm run dev # Servidor de desarrollo (localhost:5173)
|
||||
npm run build # Build de producción en dist/
|
||||
npm run preview # Preview del build en localhost:4173
|
||||
npm run test # Tests unitarios con Vitest
|
||||
npx playwright test # Tests E2E con Playwright
|
||||
git clone <repo>
|
||||
cd simulador-web
|
||||
npm install --legacy-peer-deps
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Estado
|
||||
Abre `http://localhost:5173`. Arrastrá un `.bpmn` o hacé clic en uno de los tres procesos de ejemplo.
|
||||
|
||||
**MVP Fase 0** — funcionalidad completa para uso consultivo básico.
|
||||
Las features adicionales (multi-tenant, IA, versionado, etc.)
|
||||
están documentadas en `TODO.md` para la Fase 1.
|
||||
> **Sin instalación de backend.** Todo corre en el navegador. Los datos se guardan en IndexedDB
|
||||
> del browser — si borrás el caché, perdés los procesos guardados. Exportá el PDF/CSV antes de limpiar.
|
||||
|
||||
---
|
||||
|
||||
## Flujo de uso detallado
|
||||
|
||||
### 1. Importar un proceso
|
||||
|
||||
Arrastrá tu archivo `.bpmn` a la pantalla de inicio, o cargá uno de los procesos de ejemplo:
|
||||
- **Proceso lineal simple** — para entender el flujo básico
|
||||
- **Aprobación de crédito** — con gateways XOR y AND paralelo
|
||||
- **Control de calidad con revisión** — con loop
|
||||
|
||||
La plataforma soporta BPMN 2.0 con **múltiples pools** (colaboraciones): todos los pools se importan y sus actividades aparecen configurables en el workspace.
|
||||
|
||||
### 2. Configurar el workspace
|
||||
|
||||
El panel derecho tiene tres tabs:
|
||||
|
||||
**Tab "Actividad"** (al hacer click en un nodo del diagrama):
|
||||
- Costo directo fijo por ejecución
|
||||
- Tiempo de ejecución en minutos
|
||||
- Recursos asignados (rol/sistema/equipo con % de utilización)
|
||||
- Sección "Automatización" *(Sprint 1)*: toggle + costo y tiempo del escenario automatizado
|
||||
|
||||
**Tab "Recursos"**: CRUD de recursos reutilizables con costo/hora.
|
||||
|
||||
**Tab "Global"**:
|
||||
- Nombre del proceso y cliente
|
||||
- Moneda (USD, PYG, BRL, ARS, EUR, COP, MXN, CLP)
|
||||
- Overhead (% de costos indirectos sobre directos)
|
||||
- Frecuencia anual de ejecución *(Sprint 1)*
|
||||
- Horizonte de análisis en años *(Sprint 1)*
|
||||
- Inversión total en automatización *(Sprint 1)*
|
||||
|
||||
Las actividades marcadas como automatizables muestran un badge Bot ámbar (⚙️) en la esquina superior derecha del nodo en el canvas.
|
||||
|
||||
### 3. Simular
|
||||
|
||||
El botón "Simular" corre el motor determinístico. Si hay gateways XOR con probabilidades que no suman 100%, el botón queda deshabilitado y se muestran advertencias en la topbar.
|
||||
|
||||
Desde Sprint 1, el motor corre **dos escenarios simultáneamente** (actual + automatizado) y los guarda como un único snapshot. Cualquier cambio en los datos invalida ambos resultados — hay que re-simular.
|
||||
|
||||
### 4. Reportar y exportar
|
||||
|
||||
El reporte muestra mapa de calor, KPIs, gráficos y tabla de actividades. En Sprint 1 se agregan tabs de comparación y ROI.
|
||||
|
||||
Exportación:
|
||||
- **PDF**: 3+ páginas presentables ante el cliente, con heatmap embebido como imagen JPEG.
|
||||
- **CSV**: datos con BOM UTF-8 para compatibilidad con Excel regional.
|
||||
|
||||
---
|
||||
|
||||
## Arquitectura técnica
|
||||
|
||||
```
|
||||
src/
|
||||
├── domain/ ← Lógica de negocio pura, sin React, 100% testeable
|
||||
│ ├── types.ts ← Todas las interfaces del modelo de dominio
|
||||
│ ├── simulation.ts ← Motor: propaga probabilidades por el grafo BPMN
|
||||
│ ├── roi.ts ← Cálculos de ROI: payback, ahorro, acumulado (Sprint 1)
|
||||
│ ├── bpmn-parser.ts← Parser XML BPMN 2.0 → grafo en memoria
|
||||
│ └── schemas.ts ← Validación Zod de todas las entidades
|
||||
│
|
||||
├── store/ ← Estado global con Zustand
|
||||
│ ├── process-store.ts ← Proceso actual, actividades, gateways, recursos
|
||||
│ └── simulation-store.ts ← Resultados actual + automatizado, invalidación reactiva
|
||||
│
|
||||
├── persistence/ ← IndexedDB vía Dexie (schema versión 2)
|
||||
│ ├── db.ts ← Schema y migraciones
|
||||
│ └── repositories.ts ← CRUD de entidades (@internal: solo llamar desde stores)
|
||||
│
|
||||
├── features/
|
||||
│ ├── import/ ← Landing, drag & drop, carga de ejemplos
|
||||
│ ├── workspace/ ← Canvas BPMN + panel lateral de configuración
|
||||
│ ├── simulation/ ← Hook useSimulate: dispara ambos escenarios
|
||||
│ └── report/ ← Reporte visual, heatmap, gráficos, export
|
||||
│
|
||||
└── lib/
|
||||
├── export/ ← pdf-export.ts, csv-export.ts (lazy-loaded al hacer clic)
|
||||
├── colors.ts ← Gradiente heatmap: verde → ámbar → rojo
|
||||
└── format.ts ← Formateo de moneda, tiempo, porcentajes
|
||||
```
|
||||
|
||||
### Reglas de dependencia
|
||||
|
||||
```
|
||||
domain/ ← no importa nada del proyecto (puro TypeScript)
|
||||
store/ ← importa solo de domain/ y persistence/
|
||||
features/ ← importa de domain/, store/, persistence/, lib/, components/
|
||||
```
|
||||
|
||||
La regla ESLint `no-restricted-imports` hace que cualquier import de
|
||||
`persistence/repositories` desde fuera de `store/` falle en `npm run lint`.
|
||||
La única excepción intencional es `simulation-store.ts`, que importa
|
||||
`process-store.ts` para suscribirse a cambios y mantener la invariante
|
||||
de invalidación dual (documentado como excepción en el archivo).
|
||||
|
||||
### Motor de simulación — decisiones clave
|
||||
|
||||
El motor acepta `scenario: 'actual' | 'automated'`. En `'automated'`, las
|
||||
actividades con `automatable=true` usan sus campos alternativos de costo y tiempo.
|
||||
La probabilidad de ejecución **no cambia entre escenarios** — solo los costos.
|
||||
|
||||
Overlays en el canvas: se usa `overlays.add()` de diagram-js con posición
|
||||
`{ top: -8, left: element.width - 12 }` obtenida via `elementRegistry.get()`.
|
||||
**No usar** `position.right` directamente: la fórmula interna de diagram-js es
|
||||
`left = right * -1 + width`, lo que con `right: -8` produce `left = width + 8`
|
||||
(badge enteramente fuera del nodo, sin overlap de esquina).
|
||||
|
||||
---
|
||||
|
||||
## Stack tecnológico
|
||||
|
||||
| Capa | Tecnología | Nota |
|
||||
|---|---|---|
|
||||
| Framework | React 19 + Vite 8 (Rolldown) | |
|
||||
| Routing | TanStack Router 1.x | Type-safe |
|
||||
| Estado | Zustand 5 | Stores: process + simulation |
|
||||
| Canvas BPMN | bpmn-js 18 / diagram-js | Viewer (read-only) |
|
||||
| UI | shadcn/ui + Tailwind CSS | Components copy-pasted |
|
||||
| Iconos | Lucide React | |
|
||||
| Gráficos | Apache ECharts 5 | Lazy-loaded |
|
||||
| Persistencia | Dexie 4 (IndexedDB) | Schema v2, migraciones automáticas |
|
||||
| Validación | Zod 3 | |
|
||||
| Export PDF | jsPDF + jspdf-autotable | Lazy-loaded |
|
||||
| Export CSV | papaparse 5 | |
|
||||
| Tests unitarios | Vitest 4 | 336+ tests |
|
||||
| Tests E2E | Playwright | Con análisis de PDF y píxeles |
|
||||
| Linting | ESLint 10 (flat config) | `no-restricted-imports` custom |
|
||||
| Deploy | Cloudflare Pages | Estático, gratis |
|
||||
|
||||
---
|
||||
|
||||
## Comandos
|
||||
|
||||
```bash
|
||||
# Desarrollo
|
||||
npm run dev # Servidor local en localhost:5173 con HMR
|
||||
|
||||
# Build y preview
|
||||
npm run build # TypeScript check + Vite build → dist/
|
||||
npm run preview # Preview del build en localhost:4173
|
||||
|
||||
# Testing
|
||||
npm run test # Tests unitarios e integración (Vitest)
|
||||
npx playwright test # Tests E2E contra localhost:4173 (requiere build previo)
|
||||
npx playwright test --config=playwright.prod.config.ts # Smoke test vs producción
|
||||
|
||||
# Calidad
|
||||
npm run lint # ESLint — 0 errores esperados
|
||||
|
||||
# Deploy
|
||||
CLOUDFLARE_ACCOUNT_ID=<id> npx wrangler pages deploy dist \
|
||||
--project-name=process-cost-platform
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Producción
|
||||
|
||||
**URL**: https://process-cost-platform.pages.dev
|
||||
**Plataforma**: Cloudflare Pages (estático, sin servidor)
|
||||
|
||||
Smoke test post-deploy: `npx playwright test --config=playwright.prod.config.ts`
|
||||
Genera `tests/e2e/__output__/prod-smoke.pdf` como evidencia del flujo completo.
|
||||
|
||||
---
|
||||
|
||||
## Documentación adicional
|
||||
|
||||
| Archivo | Contenido |
|
||||
|---|---|
|
||||
| `ARCHITECTURE.md` | Diseño del sistema, ADRs 1-15, roadmap completo |
|
||||
| `CHANGELOG.md` | Historial detallado de cambios por versión |
|
||||
| `TODO.md` | Backlog de features y deuda técnica |
|
||||
| `METHODOLOGY_AUTOMATED_COST.md` | Guía para calcular el costo automatizado por ejecución |
|
||||
|
||||
---
|
||||
|
||||
*Los procesos de negocio son activos estratégicos de las empresas y un diferencial competitivo.*
|
||||
|
||||
16
TODO.md
16
TODO.md
@@ -21,6 +21,22 @@
|
||||
- [ ] **Detalle de recursos por actividad** en el PDF (tabla de costos por recurso asignado)
|
||||
- [ ] **Importación por URL**: cargar BPMN desde enlace directo (GitHub, Confluence, etc.)
|
||||
|
||||
## Refinamientos UX
|
||||
|
||||
- [ ] **Mejorar animación de expansión de la sección "Automatización" en ActivityPanel.** Actualmente usa max-h trick (funciona pero la aceleración no es lineal en los últimos píxeles porque el contenedor crece hasta un max fijo de 320px). Solución sofisticada: `useRef + scrollHeight` para animar a la altura real del contenido. Costo: medio. Beneficio: micro-pulido visual.
|
||||
|
||||
## Deuda técnica / Decisiones arquitectónicas pendientes
|
||||
|
||||
- [ ] **Dexie live queries (Modelo B de sincronización store↔db)**: Hoy la invalidación del resultado de simulación se garantiza via ESLint rule (`no-restricted-imports`) + convención: todas las mutaciones pasan por `useProcessStore`. Si en Sprint 2 la grilla de edición masiva requiere escrituras de alta frecuencia directas a IndexedDB (por performance), evaluar migración a live queries de Dexie que invaliden el store automáticamente. Documentado en la auditoría de Mayo 2026.
|
||||
|
||||
- [ ] **Indicador visual en el reporte de actividades automatable** (borde punteado o ícono diferenciador): en Sprint 1 se usa solo leyenda de texto. Evaluar si el cliente necesita más claridad visual al comparar Actual vs Automatizado.
|
||||
|
||||
- [ ] **Sprint 3-4: revisar paleta del heatmap** (verde/ámbar/rojo saturados vs. pasteles). Los colores saturados actuales (`#10B981`, `#F59E0B`, `#EF4444`) funcionan bien en pantallas grandes de talleres. El brief de Sprint 1.5 propone pasteles más "consultivos" (`#BBF7D0`, `#FED7AA`, `#FECACA`), pero el cambio requiere recalibrar los tests E2E de análisis de píxeles (umbrales de verde/ámbar/rojo). Hacer con feedback real de uso en talleres InQuality.
|
||||
|
||||
- [ ] **Columna "Eficiencia de automatización" en ComparisonTable**: métrica = `(ahorro$ × probabilidad) / inversión-prorrateada`. Permite rankear actividades por "qué tan valiosa es automatizar cada una" en lugar de solo "cuánto cuestan". Útil en conversaciones de pre-venta donde el cliente quiere priorizar qué automatizar primero.
|
||||
|
||||
- [ ] **ComparisonTable — actividades no automatizables muestran "USD 0,00" y "0,0%"**: semánticamente incorrecto. El ahorro de una actividad no automatizable no es "cero", es "no aplica". Cambiar por "—" (em dash) en columnas Ahorro y % Ahorro para filas donde `isAutomatable === false`. Implementar en Etapa 3 al rediseñar ComparisonTable con paleta InQ. (detectado en Sprint 1.5 Etapa 2)
|
||||
|
||||
## Baja prioridad / Fase 2
|
||||
|
||||
- [ ] **Login y multi-tenant**: persistencia en la nube, colaboración
|
||||
|
||||
92
eslint.config.js
Normal file
92
eslint.config.js
Normal file
@@ -0,0 +1,92 @@
|
||||
import js from '@eslint/js'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ['dist', 'node_modules'] },
|
||||
|
||||
// ─── Base: JS + TS strict ────────────────────────────────────────────────────
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
|
||||
|
||||
// ── Regla estructural crítica ─────────────────────────────────────────
|
||||
// Repositorios solo pueden llamarse desde stores.
|
||||
// Cualquier import de persistence/repositories en código que no sea src/store/**
|
||||
// falla el lint con un mensaje explicativo.
|
||||
'no-restricted-imports': [
|
||||
'error',
|
||||
{
|
||||
patterns: [
|
||||
{
|
||||
group: ['*/persistence/repositories*', '../persistence/repositories*', '@/persistence/repositories*'],
|
||||
message:
|
||||
'Los repositorios solo deben llamarse desde stores (src/store/**). ' +
|
||||
'Usá el store correspondiente (useProcessStore, useSimulationStore, etc.).',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// ── Reglas ajustadas al proyecto ─────────────────────────────────────
|
||||
// any en bordes con librerías sin tipos (bpmn-js, jsPDF, autotable) está
|
||||
// permitido por CLAUDE.md — se reporta como warning, no error.
|
||||
'@typescript-eslint/no-explicit-any': 'warn',
|
||||
|
||||
// Funciones auxiliares definidas dentro de componentes (ej: Th en ActivitiesTable,
|
||||
// handlers en BpmnCanvas) son un patrón aceptado en este codebase. El riesgo de
|
||||
// reset de estado no aplica porque son funciones sin estado propio.
|
||||
'react-hooks/static-components': 'off',
|
||||
|
||||
// setState síncrono en useEffect con condicional deliberado (sincronización de
|
||||
// estado local con props/store). Los efectos están correctamente dependenciados.
|
||||
'react-hooks/set-state-in-effect': 'off',
|
||||
|
||||
// Cálculos de posición en pdf-export.ts usan y como variable acumulativa;
|
||||
// el patrón y += delta → doc.addPage() → y = PDF.margin es intencional
|
||||
// (separa visualmente las secciones del cálculo aunque no use el valor final).
|
||||
'no-useless-assignment': 'warn',
|
||||
},
|
||||
},
|
||||
|
||||
// ─── Override: src/store/** puede importar repositories ──────────────────────
|
||||
{
|
||||
files: ['src/store/**/*.{ts,tsx}'],
|
||||
rules: {
|
||||
'no-restricted-imports': 'off',
|
||||
},
|
||||
},
|
||||
|
||||
// ─── Override: features/import puede importar repositories (operación de
|
||||
// importación inicial — no hay estado de simulación previo que invalidar) ──
|
||||
{
|
||||
files: ['src/features/import/**/*.{ts,tsx}'],
|
||||
rules: {
|
||||
'no-restricted-imports': 'off',
|
||||
},
|
||||
},
|
||||
|
||||
// ─── Override: features/report usa repos en modo read-only (useReportData) ───
|
||||
{
|
||||
files: ['src/features/report/useReportData.ts'],
|
||||
rules: {
|
||||
'no-restricted-imports': 'off',
|
||||
},
|
||||
},
|
||||
|
||||
// ─── Override: tests e2e y integración pueden importar repos directamente ────
|
||||
{
|
||||
files: ['tests/**/*.{ts,tsx}'],
|
||||
rules: {
|
||||
'no-restricted-imports': 'off',
|
||||
},
|
||||
},
|
||||
)
|
||||
@@ -5,18 +5,18 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>Process Cost Platform — Cuantificá tus procesos</title>
|
||||
<title>InQ ROI — Cuantificá tus procesos</title>
|
||||
<meta name="description" content="Importá un archivo BPMN 2.0 y obtené un reporte visual de costos operativos listo para presentar a tu cliente en minutos. 100% en tu navegador, sin registro." />
|
||||
|
||||
<!-- Open Graph / Social sharing -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Process Cost Platform — Cuantificá tus procesos" />
|
||||
<meta property="og:title" content="InQ ROI — Cuantificá tus procesos" />
|
||||
<meta property="og:description" content="Transformá un BPMN 2.0 en un reporte de costos operativos en minutos. Heatmap, gráficos, export PDF y CSV." />
|
||||
<meta property="og:locale" content="es_PY" />
|
||||
|
||||
<!-- Twitter / WhatsApp fallback -->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="Process Cost Platform" />
|
||||
<meta name="twitter:title" content="InQ ROI" />
|
||||
<meta name="twitter:description" content="Cuantificá el costo operativo de tus procesos BPMN en minutos." />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
BIN
methodology-initial-commit.tar.gz
Normal file
BIN
methodology-initial-commit.tar.gz
Normal file
Binary file not shown.
101
methodology/ANTI_PATTERNS.md
Normal file
101
methodology/ANTI_PATTERNS.md
Normal file
@@ -0,0 +1,101 @@
|
||||
# Anti-patrones
|
||||
|
||||
> Comportamientos que producen daño concreto y deben evitarse. Cada uno está documentado con el caso real donde apareció.
|
||||
>
|
||||
> A diferencia de los patrones (que son propuestos hasta validación), los anti-patrones se documentan estables porque el daño ya está observado.
|
||||
|
||||
---
|
||||
|
||||
## AP.1 — Tests verdes como aprobación final
|
||||
|
||||
**Comportamiento:** declarar una etapa terminada porque los tests pasaron, sin abrir el artefacto final con los ojos.
|
||||
|
||||
**Daño concreto:** llegás a producción con outputs visuales rotos. Caso real (InQ ROI MVP): los tests E2E verificaban que el PDF se generaba y tenía las páginas esperadas, pero nadie abrió el PDF. El heatmap embebido estaba en blanco por un bug de timing en html2canvas. Se descubrió 2 días después cuando un consultor lo abrió.
|
||||
|
||||
**Cómo detectarlo:** el reporte del agente dice "tests verdes, build limpio, PDF generado en X path" pero no incluye observaciones visuales del PDF.
|
||||
|
||||
**Cómo evitarlo:** aplicar **Principio 2** (validación humana es ojo) y **Patrón C.1** (validación visual mandatoria).
|
||||
|
||||
---
|
||||
|
||||
## AP.2 — Pasamanos invertido (humano como operador)
|
||||
|
||||
**Comportamiento:** el humano traduce manualmente entre dos agentes o entre agente y código. Copia outputs, formatea, transporta contexto entre sesiones.
|
||||
|
||||
**Daño concreto:** el humano se vuelve cuello de botella del sistema. Lo peor: deja de pensar en arquitectura/producto y se concentra en operación. Caso real (InQ ROI Sprint 1.5, Etapa 5): el director del proyecto sintió "soy pasamanos" después de varios checkpoints transportando reportes de Claude Code al arquitecto.
|
||||
|
||||
**Cómo detectarlo:** preguntate si lo que estás haciendo lo podría hacer un script o un prompt mejor estructurado. Si la respuesta es sí, estás en este anti-patrón.
|
||||
|
||||
**Cómo evitarlo:** aplicar **Principio 5** (humano director). Mover lo operativo a archivos (prompts pre-armados, templates) y reservar el chat para decisiones reales.
|
||||
|
||||
---
|
||||
|
||||
## AP.3 — Racionalización de output anómalo
|
||||
|
||||
**Comportamiento:** cuando un output del agente tiene una métrica anómala (PDF inusualmente liviano, número muy redondo, payback "0.0 meses"), el agente o el humano racionalizan ("numéricamente correcto", "es el caso esperado") en lugar de investigar la causa raíz.
|
||||
|
||||
**Daño concreto:** bugs latentes que se descubren en producción. Caso real (InQ ROI Sprint 1.5, Etapa 4): el PDF de ROI pesaba 36 KB con 4 páginas (9 KB/página), comparado con 78 KB/3 páginas (26 KB/página) de los otros PDFs. El agente reportó "PDF generado". El humano paró y pidió investigar — había secciones que no se renderizaban.
|
||||
|
||||
**Cómo detectarlo:** cualquier número que parezca "anómalo pero técnicamente válido". Especialmente: tamaños de archivo, payback inmediato, ROI extremo, métricas con muchos ceros.
|
||||
|
||||
**Cómo evitarlo:** aplicar **Principio 3** (auditoría adversarial) y **Patrón E.3** (anti-racionalización explícita).
|
||||
|
||||
---
|
||||
|
||||
## AP.4 — Decisión recurrente no registrada
|
||||
|
||||
**Comportamiento:** el agente vuelve a preguntar lo mismo en cada sesión nueva, o miembros del equipo asumen distinto porque la decisión no está documentada.
|
||||
|
||||
**Daño concreto:** outputs inconsistentes entre etapas, tiempo perdido re-debatiendo, deriva del producto. Caso real (InQ ROI Sprint 1.5, varias etapas): cada vez que Claude Code iba a aplicar formato de cifras, había que recordarle si usaba separador europeo o americano. Hasta que se documentó en `CLAUDE.md`.
|
||||
|
||||
**Cómo detectarlo:** el agente te hace una pregunta que ya respondiste en alguna sesión anterior.
|
||||
|
||||
**Cómo evitarlo:** aplicar **Principio 4** (decisiones como contratos) y **Patrón B.3** (decisiones tomadas explícitas en cada prompt).
|
||||
|
||||
---
|
||||
|
||||
## AP.5 — Improvisación sin gobernanza
|
||||
|
||||
**Comportamiento:** un equipo (o miembros individuales) usa agentes de IA sin método compartido. Cada uno improvisa con su herramienta preferida, sin briefs, sin validación estructurada, sin documentar decisiones.
|
||||
|
||||
**Daño concreto:**
|
||||
1. Deuda técnica invisible: artefactos producidos por IA que nadie puede auditar después
|
||||
2. Aprendizaje no se acumula: descubrimientos individuales no se transfieren
|
||||
3. Calidad inconsistente y no atribuible
|
||||
4. Imposibilidad de mejorar sistemáticamente
|
||||
|
||||
**Cómo detectarlo:** preguntá al equipo "¿cómo hicieron este artefacto con IA?" — si las respuestas son distintas y vagas, estás acá.
|
||||
|
||||
**Cómo evitarlo:** este método entero está diseñado para evitarlo. Específicamente: empezar con **Principios 1 y 4**.
|
||||
|
||||
---
|
||||
|
||||
## AP.6 — Brief grande pegado en chat
|
||||
|
||||
**Comportamiento:** pegar un brief de 800+ líneas en el chat del agente como mensaje inicial.
|
||||
|
||||
**Daño concreto:**
|
||||
- Consume contexto innecesariamente
|
||||
- No es auditable después
|
||||
- Se pierde si la sesión se corta
|
||||
- Cuesta tokens repetirlo
|
||||
|
||||
Caso real (InQ ROI Sprint 1.5): el primer intento fue pegar el BRIEF.md completo en chat. Se reemplazó por la estructura `sprints/sprint-N/` con archivos versionados, mensaje inicial corto referenciando paths.
|
||||
|
||||
**Cómo detectarlo:** si tu mensaje inicial al agente tiene más de 30 líneas, probablemente estás en este anti-patrón.
|
||||
|
||||
**Cómo evitarlo:** aplicar **Patrón B.1** (prompt como artefacto del repo) y **Patrón B.2** (mensaje inicial corto).
|
||||
|
||||
---
|
||||
|
||||
## Cómo agregar un anti-patrón
|
||||
|
||||
Solo se agregan anti-patrones con daño concreto observado, no especulativo. Estructura obligatoria:
|
||||
|
||||
1. **Nombre breve** (forma de "AP.N — Descripción")
|
||||
2. **Comportamiento:** descripción de la acción problemática
|
||||
3. **Daño concreto:** qué pasa cuando ocurre, con caso real citado
|
||||
4. **Cómo detectarlo:** señal observable
|
||||
5. **Cómo evitarlo:** principio o patrón que lo previene
|
||||
|
||||
No agregar anti-patrones de "esto sería malo si pasara" — solo de cosas que **pasaron en proyectos reales** del equipo.
|
||||
90
methodology/CASE_STUDIES/inq-roi-sprint-1-5.md
Normal file
90
methodology/CASE_STUDIES/inq-roi-sprint-1-5.md
Normal file
@@ -0,0 +1,90 @@
|
||||
# Caso de estudio: InQ ROI Sprint 1.5
|
||||
|
||||
> Primer caso completo del método aplicado en producción.
|
||||
>
|
||||
> **Período:** Mayo 2026
|
||||
> **Producto:** InQ ROI — herramienta de cálculo de costos y ROI para procesos BPMN
|
||||
> **Equipo:** 1 director técnico + Claude Code como agente de implementación
|
||||
> **Duración real:** ~ [completar al cierre]
|
||||
> **Sprint objetivo:** rediseño visual completo del producto con manual de marca InQ
|
||||
|
||||
---
|
||||
|
||||
## Acceso al material
|
||||
|
||||
Todos los artefactos del sprint están versionados en el repo del producto:
|
||||
|
||||
- **Brief del sprint:** `sprints/sprint-1-5/BRIEF.md`
|
||||
- **Prompts por etapa:** `sprints/sprint-1-5/ETAPA_X_PROMPT.md`
|
||||
- **Reportes por etapa:** `sprints/sprint-1-5/ETAPA_X_REPORT.md` (cuando se capturen)
|
||||
- **Audits:** `sprints/sprint-1-5/etapa-X-audit.md`
|
||||
- **Screenshots:** `tests/screenshots/etapa-X/`
|
||||
- **PDFs generados:** `tests/e2e/__output__/`
|
||||
|
||||
---
|
||||
|
||||
## Estructura del sprint
|
||||
|
||||
11 etapas en orden:
|
||||
|
||||
| # | Etapa | Estado | Patrón principal aplicado |
|
||||
|---|---|---|---|
|
||||
| 1 | Setup del sistema de diseño | ✅ Cerrada | A.1, B.4 |
|
||||
| 2 | Helper formatPayback + aplicación | ✅ Cerrada | C.3, E.1 |
|
||||
| 3 | Rediseño web app con identidad InQ | 🔄 En curso | C.1, C.4 |
|
||||
| 4 | PDF: header y footer compartidos | ⏳ Pendiente | |
|
||||
| 5 | PDF: layout híbrido portrait + landscape | ⏳ Pendiente | |
|
||||
| 6 | PDF: rediseño página 1 ROI | ⏳ Pendiente | |
|
||||
| 7 | PDF: páginas 3 y 4 ROI | ⏳ Pendiente | |
|
||||
| 8 | PDFs de Actual y Automatizado | ⏳ Pendiente | |
|
||||
| 9 | Badge ⚡ en BpmnCanvas | ⏳ Pendiente | |
|
||||
| 10 | Validación E2E final | ⏳ Pendiente | |
|
||||
| 11 | Documentación + Deploy | ⏳ Pendiente | |
|
||||
|
||||
---
|
||||
|
||||
## Lecciones documentadas
|
||||
|
||||
### Patrones validados durante este caso
|
||||
|
||||
[Se completa al cierre del sprint con la lista de patrones que se validaron en práctica]
|
||||
|
||||
### Anti-patrones cazados durante este caso
|
||||
|
||||
- **AP.1 — Tests verdes como aprobación final**: caso del PDF de heatmap embebido en blanco (origen en MVP previo al sprint)
|
||||
- **AP.2 — Pasamanos invertido**: notado por el director en Etapa 5, llevó a discusión meta sobre el método
|
||||
- **AP.3 — Racionalización de output anómalo**: PDF de 36 KB con 4 páginas (Etapa 4 inicial)
|
||||
- **AP.6 — Brief grande pegado en chat**: corregido a estructura `sprints/sprint-N/`
|
||||
|
||||
### Decisiones arquitectónicas memorables
|
||||
|
||||
- Heatmap saturado en lugar de pastel (decisión consciente vs propuesta inicial)
|
||||
- Layout híbrido portrait + landscape en PDFs (resolución del problema "diagramas BPMN no entran en A4 vertical")
|
||||
- font-weight 700 en CTAs para remediación WCAG parcial
|
||||
- Carátula del PDF eliminada — info integrada en header de página 1
|
||||
|
||||
### Decisiones de producto memorables
|
||||
|
||||
- Posicionamiento como herramienta interna de InQuality (no producto independiente)
|
||||
- Identidad propia (naranja) diferenciada de CONCILIA (morado) manteniendo familia visual
|
||||
- Regla de marca no negociable: "InQ" siempre I-n-Q
|
||||
- Detector de ROI inusual (>1000%) como feature de transparencia
|
||||
|
||||
---
|
||||
|
||||
## Métricas finales del sprint
|
||||
|
||||
[Completar al cierre]
|
||||
|
||||
- Cantidad de tests al inicio del sprint: 440
|
||||
- Cantidad de tests al cierre: [N]
|
||||
- Tamaño promedio de PDF inicial: [KB]
|
||||
- Tamaño promedio de PDF final: [KB]
|
||||
- Cantidad de screenshots de validación capturados: [N]
|
||||
- Cantidad de iteraciones de mockup: [N]
|
||||
|
||||
---
|
||||
|
||||
## Reflexión final
|
||||
|
||||
[Completar al cierre del sprint con observaciones del director sobre qué funcionó, qué no, y qué cambiaríamos para el próximo proyecto]
|
||||
253
methodology/PATTERNS.md
Normal file
253
methodology/PATTERNS.md
Normal file
@@ -0,0 +1,253 @@
|
||||
# Patrones operativos
|
||||
|
||||
> Aplicaciones concretas de los 5 principios. Estructurados por categoría operativa.
|
||||
>
|
||||
> Estado de cada patrón: **propuesto** (validado en 1 proyecto) o **estable** (validado en 2+ proyectos).
|
||||
>
|
||||
> A la fecha, todos los patrones aquí son propuestos. Caso de validación: InQ ROI Sprint 1.5.
|
||||
|
||||
---
|
||||
|
||||
## Categoría A — Disciplina antes de codear
|
||||
|
||||
### A.1 Brief versionado antes que código
|
||||
**Estado:** propuesto · **Deriva de:** Principio 1
|
||||
|
||||
Todo sprint o cambio mayor arranca con un brief en `sprints/sprint-N/BRIEF.md` antes de pedirle algo a un agente. El brief define alcance, decisiones tomadas, criterios de éxito y lo que NO entra.
|
||||
|
||||
**Indicador de aplicación correcta:** podés iniciar una sesión nueva con Claude Code pasándole solo el path del brief y CLAUDE.md, sin contexto adicional, y empieza a trabajar correctamente.
|
||||
|
||||
**Indicador de violación:** el agente te hace preguntas que ya están respondidas en otro lugar (o peor, no las hace y asume).
|
||||
|
||||
---
|
||||
|
||||
### A.2 Mockup como contrato visual
|
||||
**Estado:** propuesto · **Deriva de:** Principio 1
|
||||
|
||||
Si el cambio es visual, antes de implementarlo se construye un mockup interactivo (HTML, Figma, Visualizer) que el humano aprueba. El mockup es el contrato: el agente lo replica, no lo interpreta libremente.
|
||||
|
||||
**Indicador de aplicación correcta:** cuando ves el output del agente, podés compararlo lado a lado con el mockup y la diferencia es marginal.
|
||||
|
||||
**Indicador de violación:** llegás a Etapa N de un rediseño visual y descubrís que el output "no tiene nada que ver" con lo que esperabas.
|
||||
|
||||
---
|
||||
|
||||
### A.3 Roadmap explícito antes de arrancar
|
||||
**Estado:** propuesto · **Deriva de:** Principios 1 y 4
|
||||
|
||||
Todo sprint con más de 3 etapas tiene un roadmap explícito desde el inicio. Cada etapa tiene **expectativa calibrada** de qué cambia y qué NO cambia respecto a la anterior.
|
||||
|
||||
**Indicador de aplicación correcta:** después de cada checkpoint, el resultado coincide con lo que esperabas ver, no te sorprende ni para bien ni para mal.
|
||||
|
||||
**Indicador de violación:** te sorprende negativamente un output intermedio porque pensabas que ya tenía X feature que en realidad está agendado 3 etapas después.
|
||||
|
||||
---
|
||||
|
||||
## Categoría B — Operación con agentes
|
||||
|
||||
### B.1 Prompt como artefacto del repo
|
||||
**Estado:** propuesto · **Deriva de:** Principios 4 y 5
|
||||
|
||||
Cada etapa de trabajo agéntico tiene su prompt en `sprints/sprint-N/ETAPA_X_PROMPT.md`, versionado. El chat con el agente es **puente** entre el prompt y el reporte, no contenedor de la decisión.
|
||||
|
||||
**Por qué:** los prompts en archivo son auditables, editables antes de ejecutar, replicables, y no se pierden al cerrar la sesión.
|
||||
|
||||
**Estructura mínima de un prompt de etapa:**
|
||||
1. Objetivo
|
||||
2. Pre-requisitos / contexto previo
|
||||
3. Decisiones ya tomadas (no consultar de nuevo)
|
||||
4. Tareas concretas
|
||||
5. Entregables (DoD checklist)
|
||||
6. Qué reportar al final
|
||||
7. Qué NO hacer en esta etapa
|
||||
|
||||
---
|
||||
|
||||
### B.2 Mensaje inicial corto, contexto en archivos
|
||||
**Estado:** propuesto · **Deriva de:** Principio 5
|
||||
|
||||
El mensaje al agente al arrancar una sesión es de 3-5 párrafos, NO el prompt entero pegado. Estructura:
|
||||
1. "Procedé con etapa X"
|
||||
2. Archivos a leer en orden
|
||||
3. Confirmaciones que esperás antes de que empiece
|
||||
4. Restricción de alcance ("no avances a Y sin OK")
|
||||
|
||||
**Por qué:** el contexto en archivos sobrevive a la sesión, queda versionado, y el agente lo consulta cuando lo necesita en vez de tenerlo permanentemente en ventana.
|
||||
|
||||
---
|
||||
|
||||
### B.3 Decisiones tomadas como sección explícita
|
||||
**Estado:** propuesto · **Deriva de:** Principio 4
|
||||
|
||||
En cada prompt de etapa, incluir sección "DECISIONES YA TOMADAS — no consultar de nuevo" con las definiciones cerradas. Esto impide que el agente vuelva a preguntar lo ya resuelto.
|
||||
|
||||
**Ejemplo:**
|
||||
```
|
||||
DECISIONES YA TOMADAS (no consultar de nuevo)
|
||||
- Payback negativo → "Sin payback (costo aumenta)"
|
||||
- Caracteres compactos: "<" y "~"
|
||||
- Pluralización: siempre plural ("1.0 meses")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### B.4 Reglas no negociables en CLAUDE.md
|
||||
**Estado:** propuesto · **Deriva de:** Principio 4
|
||||
|
||||
Las reglas que aplican a TODO el proyecto van en `CLAUDE.md`, no solo en briefs específicos. El agente carga CLAUDE.md en cada sesión nueva por defecto.
|
||||
|
||||
**Ejemplo de qué va ahí:**
|
||||
- Reglas de marca (cómo se escribe el nombre, qué colores)
|
||||
- Restricciones de comportamiento (qué no decir, qué no asumir)
|
||||
- Verificaciones obligatorias pre-entrega
|
||||
|
||||
---
|
||||
|
||||
## Categoría C — Validación de output
|
||||
|
||||
### C.1 Validación visual mandatoria del artefacto final
|
||||
**Estado:** propuesto · **Deriva de:** Principio 2
|
||||
|
||||
Si el output de la etapa es un artefacto visible (PDF, screenshot, página renderizada, documento), el humano lo abre con sus ojos antes del OK. Tests verdes no es suficiente.
|
||||
|
||||
**Tooling sugerido:**
|
||||
- PDFs/imágenes: Preview en Mac, visor PDF en Linux
|
||||
- Páginas web: dev server en navegador
|
||||
- Documentos: editor que renderice (no solo source)
|
||||
|
||||
---
|
||||
|
||||
### C.2 Validación programática antes de declarar completado (agente)
|
||||
**Estado:** propuesto · **Deriva de:** Principios 2 y 3
|
||||
|
||||
Antes de declarar una etapa completada, el agente debe ejecutar validaciones programáticas, no solo confiar en tests unitarios. Para outputs visuales:
|
||||
- Análisis de píxeles (¿están los colores esperados?)
|
||||
- Text extraction (¿están las palabras clave?)
|
||||
- Tamaño de archivo (¿es razonable?)
|
||||
- Cantidad de páginas (¿coincide con el diseño?)
|
||||
|
||||
**Por qué:** un test unitario puede pasar mientras el output final está roto. La validación programática del artefacto cierra ese gap.
|
||||
|
||||
---
|
||||
|
||||
### C.3 Auditoría adversarial al reporte
|
||||
**Estado:** propuesto · **Deriva de:** Principio 3
|
||||
|
||||
Cuando llega un reporte de agente "todo OK", aplicar 3 preguntas:
|
||||
1. ¿Los números reportados cuadran si recalculo o pido dump?
|
||||
2. ¿El artefacto es el que pedí?
|
||||
3. ¿Lo que no menciona podría ser relevante?
|
||||
|
||||
**Casos típicos de detección:**
|
||||
- PDF de 36 KB con 4 páginas (es muy poco → algo no se renderizó)
|
||||
- KPI con valor "0.0 meses" (numéricamente correcto pero confuso)
|
||||
- Reporte que dice "PDF generado" sin abrir el PDF generado
|
||||
|
||||
---
|
||||
|
||||
### C.4 Reporte con datos concretos, no descripciones (agente)
|
||||
**Estado:** propuesto · **Deriva de:** Principio 3
|
||||
|
||||
Los reportes del agente deben incluir métricas concretas, no descripciones genéricas.
|
||||
|
||||
**Mal reporte:** "PDF generado correctamente, contiene todo lo esperado."
|
||||
|
||||
**Buen reporte:**
|
||||
```
|
||||
PDF generado: 78 KB, 4 páginas
|
||||
- Página 1: KPI Hero + 4 cards secundarios + top 3 ahorros
|
||||
- Página 2: tabla con 11 filas + footer
|
||||
- Página 3: 3 secciones (composición, trayectoria, transparencia)
|
||||
- Página 4: nota metodológica
|
||||
Análisis de píxeles del heatmap: verde 36.329px, ámbar 3.889px, rojo 3.713px
|
||||
Text extraction confirma palabras clave: "InQ ROI", "Powered by InQuality", "Payback"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Categoría D — Estructura del repo
|
||||
|
||||
### D.1 Carpeta `sprints/` para activos de planificación
|
||||
**Estado:** propuesto · **Deriva de:** Principio 4
|
||||
|
||||
Cada sprint tiene su carpeta `sprints/sprint-N/` con todos sus artefactos:
|
||||
- `BRIEF.md`
|
||||
- `ETAPA_X_PROMPT.md` (uno por etapa)
|
||||
- `ETAPA_X_REPORT.md` (opcional, reporte del agente capturado)
|
||||
- `etapa-X-audit.md` (cuando aplica)
|
||||
- `screenshots/` con evidencia visual
|
||||
|
||||
**Por qué:** en 6 meses, abrir esa carpeta te da el historial completo de cómo se construyó el sprint. Sin esto, el conocimiento queda en commits + memoria, que es frágil.
|
||||
|
||||
---
|
||||
|
||||
### D.2 Carpeta `methodology/` para el método en sí
|
||||
**Estado:** propuesto · **Deriva de:** Principio 4
|
||||
|
||||
El método de trabajo vive en `methodology/`, separado del producto. Esto permite que el método evolucione independiente de cualquier producto específico.
|
||||
|
||||
---
|
||||
|
||||
### D.3 ADRs para decisiones arquitectónicas
|
||||
**Estado:** propuesto · **Deriva de:** Principio 4
|
||||
|
||||
Las decisiones arquitectónicas importantes se registran como ADR (Architectural Decision Record) en `ARCHITECTURE.md` o `docs/adr/`. Estructura mínima:
|
||||
- Contexto (qué problema teníamos)
|
||||
- Decisión (qué elegimos)
|
||||
- Alternativas consideradas
|
||||
- Consecuencias (qué implica)
|
||||
|
||||
---
|
||||
|
||||
## Categoría E — Comunicación humano ↔ agente
|
||||
|
||||
### E.1 Separar lo validado de lo asumido
|
||||
**Estado:** propuesto · **Deriva de:** Principios 2 y 3
|
||||
|
||||
En los reportes del agente, marcar explícitamente qué fue verificado vs qué se asume funcionando.
|
||||
|
||||
**Ejemplo:**
|
||||
```
|
||||
Verificado:
|
||||
- Tests verdes (455/455)
|
||||
- PDF generado y abierto con pdf-parse
|
||||
- Análisis de píxeles confirma heatmap completo
|
||||
|
||||
Asumido:
|
||||
- El componente se renderiza igual en Firefox (solo testeado en Chromium)
|
||||
- La fuente Roboto está disponible en el sistema cliente (no validado)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### E.2 Hallazgos no esperados como sección explícita
|
||||
**Estado:** propuesto · **Deriva de:** Principios 3 y 5
|
||||
|
||||
Al final de cada etapa, el agente reporta "hallazgos no esperados" — cosas que descubrió durante la implementación que merecen decisión arquitectónica, aunque no formen parte del DoD.
|
||||
|
||||
**Ejemplo:** "El cambio de `--primary` propagó a focus rings de inputs (no estaba en el plan). Decisión necesaria: ¿se mantiene o se vuelve a slate?"
|
||||
|
||||
---
|
||||
|
||||
### E.3 Anti-racionalización explícita
|
||||
**Estado:** propuesto · **Deriva de:** Principio 3
|
||||
|
||||
Cuando un test revela algo raro, un cálculo no cuadra, o un output difiere de lo esperado: **investigar causa raíz, no minimizar**.
|
||||
|
||||
Patrón típico de violación: el agente dice "el cálculo es numéricamente correcto" cuando lo que está reportando es un problema de presentación (ej. "0.0 meses" es matemáticamente correcto pero un bug de UX).
|
||||
|
||||
---
|
||||
|
||||
## Cómo agregar un patrón nuevo
|
||||
|
||||
1. Identificar el patrón durante un proyecto real (no inventarlo en abstracto).
|
||||
2. Documentarlo con: nombre, categoría, principio del que deriva, descripción, indicador de aplicación correcta, indicador de violación.
|
||||
3. Marcarlo como **propuesto** con cita del proyecto donde apareció.
|
||||
4. Después de aplicarlo en un 2do proyecto distinto, promoverlo a **estable**.
|
||||
|
||||
## Cómo retirar un patrón
|
||||
|
||||
Si un patrón no se sostiene en práctica o tiene falsos positivos frecuentes, se retira con un PR que documente:
|
||||
- Por qué no funcionó
|
||||
- Qué alternativa probamos
|
||||
- Si hay un patrón nuevo que lo reemplaza
|
||||
90
methodology/PRINCIPLES.md
Normal file
90
methodology/PRINCIPLES.md
Normal file
@@ -0,0 +1,90 @@
|
||||
# Principios fundamentales
|
||||
|
||||
> Los 5 principios que sostienen todo el método. Si tu equipo solo recuerda esto, ya tiene 80% del valor. Los patrones son aplicaciones derivadas.
|
||||
|
||||
---
|
||||
|
||||
## 1. La especificación precede al código
|
||||
|
||||
Antes de pedirle a un agente que genere código, **la especificación tiene que estar escrita, versionada y validada**. No hay excepciones.
|
||||
|
||||
**Por qué:** un agente sin especificación genera código que parece razonable pero no resuelve el problema que vos tenés. Termina rápido, queda mal, y descubrís el desfase 3 días después cuando es caro arreglarlo.
|
||||
|
||||
**Cómo se aplica:** todo sprint arranca con un brief versionado en `sprints/sprint-N/BRIEF.md`. Todo cambio importante dentro de un sprint arranca con un mockup o ADR. Todo tarea agéntica arranca con un prompt en archivo, no improvisado en chat.
|
||||
|
||||
**Cuándo NO aplica:** experimentación pura sin entregable. Si estás explorando si una librería sirve, podés hacer prompts libres. Pero el output de esa experimentación nunca va directo a producción.
|
||||
|
||||
---
|
||||
|
||||
## 2. La validación humana es ojo, no test
|
||||
|
||||
Los tests verdes no equivalen a etapa terminada. **El humano abre el artefacto final con sus ojos antes de declarar completado.**
|
||||
|
||||
**Por qué:** los agentes producen outputs que técnicamente cumplen los criterios programáticos pero pierden el contexto del producto. Tests verdes garantizan que el código no falla. Validación visual garantiza que el output es presentable.
|
||||
|
||||
**Cómo se aplica:** si el output es un archivo visible (PDF, screenshot, página web, documento), el humano lo abre. Si el output es código, el humano lo lee al menos en diagonal. Si el output es comportamiento (un endpoint que responde algo), el humano lo ejecuta manualmente al menos una vez antes del merge.
|
||||
|
||||
**Cuándo NO aplica:** outputs puramente internos (helpers, refactors estructurales) que se validan exclusivamente por tests. Pero estos casos son minoría.
|
||||
|
||||
---
|
||||
|
||||
## 3. La auditoría es adversarial, no confirmatoria
|
||||
|
||||
Cuando revisás el output de un agente, **buscá lo que está mal**, no lo que está bien. Confirmar es fácil; el agente ya viene optimizado para producir cosas que parecen correctas. Tu valor está en detectar lo que el agente racionalizó.
|
||||
|
||||
**Por qué:** los agentes tienen un sesgo hacia reportar éxito. "Tests verdes, build limpio, etapa completada" suena bien pero puede ocultar que el archivo generado no es el correcto, que la métrica no cuadra con los inputs, o que un detalle crítico se omitió silenciosamente.
|
||||
|
||||
**Cómo se aplica:** cuando recibís un reporte de agente, hacé tres preguntas antes de aprobar:
|
||||
1. ¿Los números que reportó cuadran si los recalculo a mano o pido detalle?
|
||||
2. ¿El artefacto entregado es el que pedí o uno parecido?
|
||||
3. ¿Lo que no menciona el reporte podría ser relevante?
|
||||
|
||||
**Cuándo NO aplica:** tareas rutinarias de bajo riesgo donde el costo de auditar supera el costo de un error. Pero estas son menos de las que parecen.
|
||||
|
||||
---
|
||||
|
||||
## 4. Las decisiones se registran como contratos
|
||||
|
||||
Toda decisión arquitectónica, de marca, o de proceso se documenta en el lugar correcto **explícitamente**, no en la memoria de quien decidió. Cuando aparece de nuevo, no se re-debate.
|
||||
|
||||
**Por qué:** las decisiones no registradas se erosionan. Un agente vuelve a preguntar lo mismo en la siguiente sesión, un miembro del equipo asume distinto, vos mismo en 2 semanas no recordás por qué eligieron X. El costo de re-debatir es alto y los outputs quedan inconsistentes.
|
||||
|
||||
**Cómo se aplica:**
|
||||
- Decisiones de producto → `CLAUDE.md` (reglas no negociables) o `ARCHITECTURE.md` (ADRs)
|
||||
- Decisiones de método → `methodology/PATTERNS.md`
|
||||
- Decisiones de etapa → "DECISIONES YA TOMADAS" en el prompt de la siguiente etapa
|
||||
- Decisiones de marca → `DESIGN_SYSTEM.md` o `BRAND_GUIDE.md`
|
||||
|
||||
**Cuándo NO aplica:** decisiones reversibles sin costo. Si elegís un nombre de variable, no lo documentes formalmente.
|
||||
|
||||
---
|
||||
|
||||
## 5. El humano es director, no operador
|
||||
|
||||
Tu trabajo es decidir **qué** se hace, **cuándo** se valida, y **si** lo entregado es aceptable. NO es traducir entre el agente y el código. Si te encontrás ejecutando comandos que el agente podría ejecutar, parar y delegarlos.
|
||||
|
||||
**Por qué:** el humano operador es el cuello de botella del sistema. Cada minuto que pasás copiando-pegando, formateando outputs, o transportando contexto entre sesiones, es un minuto que no estás pensando en producto, arquitectura, o estrategia. El humano vale por su criterio, no por su throughput.
|
||||
|
||||
**Cómo se aplica:**
|
||||
- Si el prompt se puede pre-armar en archivo, hacelo. No lo tipees cada vez.
|
||||
- Si la validación se puede automatizar (test, lint, screenshot), automatizala.
|
||||
- Si la decisión es repetitiva (formato, nombre, paleta), documentala una vez y referenciala.
|
||||
- Si te volvés "pasamanos" entre dos agentes, frená y revisá el flujo.
|
||||
|
||||
**Cuándo NO aplica:** las primeras 2-3 veces que aplicás el método, la operación manual es parte del aprendizaje. Después, la operación es señal de fricción que hay que eliminar.
|
||||
|
||||
---
|
||||
|
||||
## Cómo se relacionan los 5 principios
|
||||
|
||||
```
|
||||
1. Especificación precede al código → evita falsos arranques
|
||||
2. Validación humana es ojo → evita falsos cierres
|
||||
3. Auditoría adversarial → evita aprobaciones engañosas
|
||||
4. Decisiones como contratos → evita re-debate y deriva
|
||||
5. Humano director, no operador → evita cuello de botella
|
||||
```
|
||||
|
||||
Los principios 1-2 protegen las puntas (entrada y salida del trabajo).
|
||||
Los principios 3-4 protegen la mitad (cómo evaluamos y registramos).
|
||||
El principio 5 protege la sostenibilidad (que el método escale).
|
||||
54
methodology/README.md
Normal file
54
methodology/README.md
Normal file
@@ -0,0 +1,54 @@
|
||||
# Método de trabajo con agentes de IA
|
||||
|
||||
> Versión de trabajo. Nombre definitivo pendiente.
|
||||
>
|
||||
> Estado: **borrador en construcción**. Los patrones se validan en proyectos reales antes de promoverse a versión estable.
|
||||
|
||||
---
|
||||
|
||||
## Qué es esto
|
||||
|
||||
Es el método interno de trabajo para construir software con agentes de IA (Claude Code y otros) manteniendo gobernanza, calidad y aprendizaje acumulado.
|
||||
|
||||
**Hipótesis central:** los agentes de IA permiten producir software 5-10× más rápido que un desarrollador solo, pero **sin gobernanza producen deuda invisible que cuesta más caro de la que se ahorra**. Este método es el sistema de gobernanza.
|
||||
|
||||
## Qué NO es
|
||||
|
||||
- No es un manual de Claude Code. No enseña a usar la herramienta.
|
||||
- No es una metodología ágil reemplazante. Es complementario a Scrum/Kanban/lo que uses.
|
||||
- No es opcional dentro de InQuality cuando el output va a cliente o producción.
|
||||
|
||||
## Para quién
|
||||
|
||||
- Desarrolladores con experiencia técnica (programadores, ingenieros, analistas) que ya entienden conceptos de software (commits, tests, refactor, deuda técnica).
|
||||
- Líderes técnicos que orquestan equipos pequeños (2-10 personas) trabajando con agentes.
|
||||
|
||||
## Cómo se usa este repositorio
|
||||
|
||||
Lectura en orden recomendado:
|
||||
|
||||
1. **PRINCIPLES.md** — los 5 principios fundamentales. Es lo único memorizado obligatorio.
|
||||
2. **PATTERNS.md** — los patrones operativos derivados. Es referencia, no memoria.
|
||||
3. **ANTI_PATTERNS.md** — qué evitar y por qué. Útil para detectar problemas en flagrante.
|
||||
4. **TEMPLATES/** — scaffolds reutilizables para no empezar de cero.
|
||||
5. **CASE_STUDIES/** — proyectos reales aplicando el método. El primero es InQ ROI Sprint 1.5.
|
||||
|
||||
## Cómo contribuir
|
||||
|
||||
Si descubrís un patrón nuevo o un anti-patrón:
|
||||
|
||||
1. Documentalo en su archivo correspondiente con la estructura existente
|
||||
2. Citá el contexto real donde lo encontraste (proyecto + sprint)
|
||||
3. Pull request con revisión de al menos otra persona del equipo
|
||||
|
||||
Los patrones se validan en **al menos 2 proyectos distintos** antes de promoverse de "propuesto" a "estable".
|
||||
|
||||
## Estado actual de madurez
|
||||
|
||||
| Sección | Estado | Próxima revisión |
|
||||
|---|---|---|
|
||||
| Principios | Borrador inicial — 5 derivados de InQ ROI | Después de Sprint 2 con otro proyecto |
|
||||
| Patrones | 12 identificados, marcados como propuestos | Promover a estable los que se apliquen en 2do proyecto |
|
||||
| Anti-patrones | 5 identificados, todos en flagrante real | Estables — son daño documentado |
|
||||
| Templates | 3 disponibles (Brief, Prompt etapa, Reporte) | Iterar con uso real |
|
||||
| Case studies | 1 en construcción (InQ ROI Sprint 1.5) | — |
|
||||
83
methodology/TEMPLATES/BRIEF_TEMPLATE.md
Normal file
83
methodology/TEMPLATES/BRIEF_TEMPLATE.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# Sprint N — [Nombre descriptivo]
|
||||
|
||||
> **Propósito:** [una oración que describe qué cambia con este sprint]
|
||||
>
|
||||
> **Justificación:** [por qué ahora, qué costo evita o qué oportunidad captura]
|
||||
|
||||
---
|
||||
|
||||
## 0. Contexto crítico
|
||||
|
||||
[Cualquier información del producto, marca, o cliente que aplica transversalmente a todas las etapas. Reglas no negociables que el agente debe respetar.]
|
||||
|
||||
---
|
||||
|
||||
## 1. Alcance del sprint
|
||||
|
||||
### Sí entra
|
||||
- [Feature o cambio 1]
|
||||
- [Feature o cambio 2]
|
||||
- ...
|
||||
|
||||
### NO entra
|
||||
- [Cosa que podría parecer en alcance pero NO]
|
||||
- [Feature postergada con razón]
|
||||
- ...
|
||||
|
||||
---
|
||||
|
||||
## 2. Decisiones tomadas previamente
|
||||
|
||||
| Decisión | Fuente / Justificación |
|
||||
|---|---|
|
||||
| [Decisión 1] | [Sprint o documento donde se decidió] |
|
||||
| [Decisión 2] | [...] |
|
||||
|
||||
---
|
||||
|
||||
## 3. Roadmap del sprint
|
||||
|
||||
Lista ordenada de etapas con expectativa calibrada de cada una:
|
||||
|
||||
| Etapa | Qué hace | Output esperado al final |
|
||||
|---|---|---|
|
||||
| 1 | [Descripción breve] | [Qué se ve, qué se mide] |
|
||||
| 2 | [...] | [...] |
|
||||
| ... | | |
|
||||
|
||||
---
|
||||
|
||||
## 4. Definition of Done del sprint completo
|
||||
|
||||
```
|
||||
[ ] [Criterio mensurable 1]
|
||||
[ ] [Criterio mensurable 2]
|
||||
[ ] [Tests verdes esperados N]
|
||||
[ ] [Validación visual con usuario]
|
||||
[ ] [Documentación actualizada]
|
||||
[ ] [Tag de release X]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Archivos que se crean / modifican (preview)
|
||||
|
||||
### Nuevos
|
||||
- [Archivo + propósito]
|
||||
|
||||
### Modificados
|
||||
- [Archivo + qué cambia en él]
|
||||
|
||||
---
|
||||
|
||||
## 6. Lo que NO entra en este sprint (postergado)
|
||||
|
||||
- [Cosa importante que considerada y rechazada para este sprint, con justificación]
|
||||
|
||||
---
|
||||
|
||||
## Notas finales para el agente
|
||||
|
||||
- [Recordatorios específicos del sprint]
|
||||
- [Cosas con las que el agente puede confundirse, aclaradas]
|
||||
- [Reglas operativas que aplican durante el sprint]
|
||||
105
methodology/TEMPLATES/ETAPA_PROMPT_TEMPLATE.md
Normal file
105
methodology/TEMPLATES/ETAPA_PROMPT_TEMPLATE.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# Sprint N — Etapa X: [Nombre descriptivo de la etapa]
|
||||
|
||||
> **Objetivo:** [una oración que describe qué hace esta etapa específica]
|
||||
>
|
||||
> **Pre-requisitos:** [qué tiene que estar listo antes de arrancar; típicamente etapas previas]
|
||||
>
|
||||
> **Etapa siguiente:** [qué viene después, para que el agente NO arranque eso sin OK]
|
||||
|
||||
---
|
||||
|
||||
## 1. Pre-tareas (si aplica)
|
||||
|
||||
[Actualizaciones a artefactos previos antes de la implementación. Por ejemplo: actualizar un audit, completar un documento de Etapa anterior.]
|
||||
|
||||
### 1.1 [Pre-tarea 1]
|
||||
|
||||
[Descripción concreta de qué hacer]
|
||||
|
||||
### 1.2 [Pre-tarea 2]
|
||||
|
||||
[...]
|
||||
|
||||
---
|
||||
|
||||
## 2. Decisiones ya tomadas (no consultar de nuevo)
|
||||
|
||||
| Decisión | Justificación |
|
||||
|---|---|
|
||||
| [Decisión 1] | [Por qué se eligió esto y no la alternativa] |
|
||||
| [Decisión 2] | [...] |
|
||||
|
||||
---
|
||||
|
||||
## 3. Tarea principal
|
||||
|
||||
### 3.1 [Subtarea 1]
|
||||
|
||||
**Ubicación:** [archivo o módulo]
|
||||
|
||||
**Descripción concreta:** [qué se implementa]
|
||||
|
||||
**Snippet de referencia** (si aplica):
|
||||
```typescript
|
||||
// código de referencia
|
||||
```
|
||||
|
||||
### 3.2 [Subtarea 2]
|
||||
|
||||
[...]
|
||||
|
||||
---
|
||||
|
||||
## 4. Tests obligatorios
|
||||
|
||||
### 4.1 Tests unitarios
|
||||
|
||||
[Lista de casos a cubrir, con inputs y outputs esperados]
|
||||
|
||||
### 4.2 Tests E2E o visuales (si aplica)
|
||||
|
||||
[Lo que requiere validación end-to-end]
|
||||
|
||||
---
|
||||
|
||||
## 5. Aplicación en múltiples lugares (si aplica)
|
||||
|
||||
[Si la tarea involucra cambios en múltiples capas, listarlas explícitamente]
|
||||
|
||||
a) [Capa 1]: [qué cambia]
|
||||
b) [Capa 2]: [qué cambia]
|
||||
c) [Capa 3]: [qué cambia]
|
||||
|
||||
---
|
||||
|
||||
## 6. Entregables (Definition of Done)
|
||||
|
||||
```
|
||||
[ ] [Criterio 1 — mensurable y específico]
|
||||
[ ] [Tests pasando: N esperados]
|
||||
[ ] [Build limpio]
|
||||
[ ] [Validación visual con artefactos concretos]
|
||||
[ ] [Documentación actualizada si aplica]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Reporte final a entregar
|
||||
|
||||
Cuando termines, devolveme:
|
||||
|
||||
1. [Métrica concreta 1 — ej: tabla de tests con resultados]
|
||||
2. [Artefacto visible 1 — ej: screenshot del componente]
|
||||
3. [Artefacto visible 2 — ej: PDF presentado con present_files]
|
||||
4. [Cantidad final de algo mensurable]
|
||||
5. **Hallazgos no esperados** — cualquier descubrimiento que merezca decisión arquitectónica
|
||||
|
||||
---
|
||||
|
||||
## 8. Reglas operativas (recordatorios)
|
||||
|
||||
1. **No declares etapa terminada sin validación visual** del artefacto final.
|
||||
2. **No racionalizar problemas** — si algo no cuadra, investigar causa raíz.
|
||||
3. **No tocar [lo que esta etapa NO debe tocar]** — está agendado para Etapa Y.
|
||||
4. **No avanzar a Etapa siguiente sin OK explícito.**
|
||||
5. **Si encontrás contradicción** entre este prompt y la realidad del código (un archivo no está donde decía, una función cambió de signature, etc.): **PARÁ y consultá**, no asumas.
|
||||
100
methodology/TEMPLATES/REPORT_TEMPLATE.md
Normal file
100
methodology/TEMPLATES/REPORT_TEMPLATE.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# Sprint N — Etapa X: Reporte final
|
||||
|
||||
> Reporte capturado al cierre de la etapa. Útil para auditoría y para reconstruir contexto en sesiones futuras.
|
||||
>
|
||||
> Generado por el agente, validado por el humano antes del commit.
|
||||
|
||||
---
|
||||
|
||||
## 1. Resumen de cambios
|
||||
|
||||
### Archivos creados/modificados
|
||||
|
||||
| Archivo | Acción | Líneas | Propósito |
|
||||
|---|---|---|---|
|
||||
| [path] | Creado/Modificado | +N/-M | [descripción breve] |
|
||||
|
||||
---
|
||||
|
||||
## 2. Tests
|
||||
|
||||
### Resultados
|
||||
|
||||
- Tests previos: N (sin regresión)
|
||||
- Tests nuevos: M
|
||||
- Total: N+M verdes
|
||||
|
||||
### Tests nuevos agregados
|
||||
|
||||
| Test | Caso | Resultado |
|
||||
|---|---|---|
|
||||
| [nombre] | [input → output esperado] | ✅ |
|
||||
|
||||
---
|
||||
|
||||
## 3. Artefactos visibles generados
|
||||
|
||||
| Artefacto | Tamaño | Validación | Path |
|
||||
|---|---|---|---|
|
||||
| [PDF / screenshot / archivo] | XX KB | ✓ visualizado | [path] |
|
||||
|
||||
---
|
||||
|
||||
## 4. Verificación programática (si aplica)
|
||||
|
||||
### Análisis de píxeles / contenido / métricas
|
||||
|
||||
[Resultados concretos: qué se midió y qué dio]
|
||||
|
||||
### Text extraction (si aplica)
|
||||
|
||||
[Palabras clave esperadas confirmadas en el output]
|
||||
|
||||
---
|
||||
|
||||
## 5. Validado vs Asumido
|
||||
|
||||
### Verificado
|
||||
- [Lista de cosas efectivamente comprobadas]
|
||||
|
||||
### Asumido (no validado en esta etapa)
|
||||
- [Lista de cosas que se asumen funcionando pero no se probaron explícitamente]
|
||||
|
||||
---
|
||||
|
||||
## 6. Hallazgos no esperados
|
||||
|
||||
[Cualquier descubrimiento durante la implementación que merezca decisión arquitectónica, aunque no esté en el DoD]
|
||||
|
||||
- **Hallazgo 1:** [descripción]
|
||||
- Impacto: [cuál]
|
||||
- Decisión requerida: [qué tiene que decidir el humano]
|
||||
- Sugerencia del agente: [recomendación]
|
||||
|
||||
---
|
||||
|
||||
## 7. Patrones aprendidos (cosecha para methodology/)
|
||||
|
||||
[Si durante esta etapa surgió un patrón nuevo o se validó uno existente, registralo acá. El humano decide si pasa a `methodology/PATTERNS.md`.]
|
||||
|
||||
- **Patrón candidato:** [descripción]
|
||||
- Categoría: [A/B/C/D/E]
|
||||
- Deriva de: [Principio N]
|
||||
- Indicador de aplicación correcta: [...]
|
||||
- Indicador de violación: [...]
|
||||
|
||||
---
|
||||
|
||||
## 8. Definition of Done — checklist final
|
||||
|
||||
```
|
||||
[x] Criterio 1 cumplido
|
||||
[x] Criterio 2 cumplido
|
||||
[ ] Criterio 3 — pendiente porque [razón]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Próximo paso
|
||||
|
||||
[Qué viene después: etapa siguiente, decisión pendiente del humano, etc.]
|
||||
871
sprints/sprint-1-5/BRIEF.md
Normal file
871
sprints/sprint-1-5/BRIEF.md
Normal file
@@ -0,0 +1,871 @@
|
||||
# Sprint 1.5 — Brief de Rediseño Visual
|
||||
|
||||
> **Propósito:** rediseñar la identidad visual del producto (PDFs + Web App) con manual de marca InQ ROI antes del cierre de Sprint 1. No agrega nuevas features funcionales; refina presentación, identidad y polish.
|
||||
|
||||
> **Justificación:** los PDFs y la web app actuales son funcionales pero genéricos. El producto va a ser usado en pre-venta, talleres y charlas de InQuality, requiere identidad sólida desde el inicio. La iteración visual es 5–10× más barata ahora que después.
|
||||
|
||||
---
|
||||
|
||||
## 0. Contexto crítico
|
||||
|
||||
Este producto es **una herramienta de InQuality**, no un producto independiente. Se construye con identidad propia (color naranja InQ) pero parte de la familia visual de productos InQuality (junto con CONCILIA, que usa morado). Lleva la marca "Powered by InQuality" en footers.
|
||||
|
||||
**Regla NO NEGOCIABLE de marca:** la versión corta de InQuality SIEMPRE se escribe **InQ** — I mayúscula, n minúscula, Q mayúscula. Cualquier desviación (InQ, INQ, Inq, inQ) es bug.
|
||||
|
||||
---
|
||||
|
||||
## 1. Manual de marca InQ ROI
|
||||
|
||||
### 1.1 Paleta cromática
|
||||
|
||||
#### Color protagonista — Naranja InQ
|
||||
| Token CSS | Hex | Uso |
|
||||
|---|---|---|
|
||||
| `--inq-orange` | `#F59845` | Principal. Logo, KPIs hero, headers, CTAs primarios |
|
||||
| `--inq-orange-dark` | `#B45309` | Texto destacado sobre fondos claros, hover de CTAs |
|
||||
| `--inq-orange-light` | `#FEF3E2` | Fondos de KPI cards, fondos sutiles |
|
||||
| `--inq-orange-lighter` | `#FFF8ED` | Fondos de banner narrativo, hover states muy sutiles |
|
||||
|
||||
#### Gradiente hero (sólo para KPIs hero y banners principales)
|
||||
```css
|
||||
background: linear-gradient(135deg, #F59845 0%, #ED3E8F 100%);
|
||||
```
|
||||
|
||||
Donde `#ED3E8F` es el magenta InQ. Este gradiente representa la familia visual InQuality y se usa SOLO en:
|
||||
- KPI hero "Ahorro proyectado a 3 años" (PDF y web)
|
||||
- Carátulas o banners principales (si aparecen)
|
||||
- NUNCA en bordes, separadores, fondos secundarios
|
||||
|
||||
#### Colores semánticos
|
||||
| Token CSS | Hex | Uso |
|
||||
|---|---|---|
|
||||
| `--color-success` | `#16A34A` | Ahorros positivos, "óptimo" |
|
||||
| `--color-success-light` | `#F0FDF4` | Fondos de mensajes positivos |
|
||||
| `--color-warning` | `#F59E0B` | Advertencias, sección transparencia |
|
||||
| `--color-warning-bg` | `#FFFBEB` | Fondos de advertencia |
|
||||
| `--color-danger` | `#EF4444` | Costos altos, errores |
|
||||
| `--color-danger-light` | `#FEE2E2` | Fondos de heatmap (alto costo) |
|
||||
|
||||
#### Heatmap (gradient de costo) — DECISIÓN: mantener colores saturados
|
||||
```css
|
||||
/* Bajo → Medio → Alto */
|
||||
heatmap-low: #10B981; /* verde saturado */
|
||||
heatmap-mid: #F59E0B; /* ámbar saturado */
|
||||
heatmap-high: #EF4444; /* rojo saturado */
|
||||
```
|
||||
|
||||
Razón: discriminan mejor visualmente en pantallas grandes (talleres, charlas) y mantienen calibración de los E2E de análisis de píxeles. Revisar en Sprint 3-4 con feedback de uso real.
|
||||
|
||||
#### Neutrales (tipografía y bordes)
|
||||
| Token CSS | Hex | Uso |
|
||||
|---|---|---|
|
||||
| `--text-primary` | `#0F172A` | Títulos, números importantes |
|
||||
| `--text-secondary` | `#475569` | Texto del cuerpo |
|
||||
| `--text-tertiary` | `#64748B` | Labels, metadatos |
|
||||
| `--text-disabled` | `#94A3B8` | Placeholders, texto muy secundario |
|
||||
| `--border-primary` | `#E2E8F0` | Bordes generales |
|
||||
| `--border-light` | `#F1F5F9` | Separadores sutiles |
|
||||
| `--bg-app` | `#F8FAFC` | Fondo de la app |
|
||||
| `--bg-card` | `#FAFBFC` | Fondo de tarjetas secundarias |
|
||||
|
||||
### 1.2 Tipografía
|
||||
|
||||
#### Familia
|
||||
- **Primaria** (web app y PDFs): system-ui stack, con fallback a Roboto embebido en PDFs.
|
||||
```css
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
```
|
||||
- **Mono** (números en tablas, datos financieros): `'JetBrains Mono', 'SF Mono', Consolas, monospace`.
|
||||
|
||||
#### Jerarquía de tamaños (PDF)
|
||||
| Elemento | Tamaño | Peso | Tracking |
|
||||
|---|---|---|---|
|
||||
| Logo "InQ ROI" en header | 22px | 700 | -0.8px |
|
||||
| Título sección (page title) | 16px | 500 | normal |
|
||||
| KPI Hero (cifra grande) | 30px | 700 | -1px |
|
||||
| KPI secundario (cifra) | 16px | 700 | normal |
|
||||
| Body text | 11px | 400 | normal |
|
||||
| Labels en cards | 8px | 500 | 1px (uppercase) |
|
||||
| Tabla — header | 10px | 500 | normal |
|
||||
| Tabla — body | 10px | 400 | normal |
|
||||
| Footer | 9px | 400 | normal |
|
||||
|
||||
#### Jerarquía de tamaños (Web App)
|
||||
| Elemento | Tamaño |
|
||||
|---|---|
|
||||
| Logo header | 18px / 700 |
|
||||
| Page title | 16px / 500 |
|
||||
| KPI Hero | 28px / 700 |
|
||||
| KPI secundario | 16px / 700 |
|
||||
| Nav / Tabs | 12px / 400-500 |
|
||||
| Body | 12-13px / 400 |
|
||||
| Labels en panels | 10-11px / 400-500 |
|
||||
|
||||
### 1.3 Reglas de uso del logo "InQ ROI"
|
||||
|
||||
- **Tipografía:** sans-serif bold con tracking apretado (-0.5px a -0.8px)
|
||||
- **Color por defecto:** `#F59845`
|
||||
- **Color sobre gradiente o fondos oscuros:** blanco
|
||||
- **Posición en PDFs:** esquina superior derecha del header de cada página
|
||||
- **Posición en Web App:** esquina superior izquierda del topbar
|
||||
- **Mínimo aire alrededor:** 16px en todas direcciones
|
||||
- **Aclaración "Powered by InQuality":** SIEMPRE en footer, no en header
|
||||
|
||||
### 1.4 Iconografía
|
||||
|
||||
- **Sistema:** Lucide React (ya instalado)
|
||||
- **Tamaños estándar:** 12px, 14px, 16px, 20px, 24px
|
||||
- **Color por defecto:** hereda del contexto (`currentColor`)
|
||||
- **Ícono "Automatizable" (⚡):** símbolo emoji ⚡ por ahora. Cambiar a `<Bot />` de Lucide en Sprint 2-3 (anotar en TODO.md)
|
||||
- **Badge automatizable:** círculo `#F59845` con ⚡ blanco centrado, tamaño 14-22px según contexto
|
||||
|
||||
### 1.5 Accesibilidad — Contraste
|
||||
|
||||
El naranja InQ `#F59845` sobre blanco tiene contraste WCAG ~2.42:1.
|
||||
- **AA normal text (4.5:1):** FAIL
|
||||
- **AA large text (3.0:1):** FAIL (apenas por debajo)
|
||||
|
||||
Decisión: aplicar `font-weight: 700` en CTAs primarios para acercarse al cumplimiento AA large, asumiendo el costo en accesibilidad estricta como decisión consciente. Documentado en audit.
|
||||
|
||||
---
|
||||
|
||||
## 2. Sistema de diseño — Componentes clave
|
||||
|
||||
### 2.1 KPI Card (cifra grande)
|
||||
|
||||
```
|
||||
Fondo: #FEF3E2 (inq-orange-light)
|
||||
Padding: 10px 12px
|
||||
Border-radius: 6px
|
||||
Label: 8px / 500 / letter-spacing 1px / color #92400E / uppercase
|
||||
Cifra: 16px / 700 / color #0F172A
|
||||
Delta: 10px / 500 / color #B45309 (verde-orange-dark)
|
||||
```
|
||||
|
||||
### 2.2 KPI Hero (gradiente)
|
||||
|
||||
```
|
||||
Fondo: linear-gradient(135deg, #F59845 0%, #ED3E8F 100%)
|
||||
Padding: 16-18px
|
||||
Border-radius: 6-8px
|
||||
Label: 9-10px / opacity 0.9 / letter-spacing 1.2px / white
|
||||
Cifra: 28-30px / 700 / letter-spacing -1px / white
|
||||
Subtítulo: 10-11px / opacity 0.85 / white
|
||||
```
|
||||
|
||||
### 2.3 Banner narrativo (resumen ejecutivo)
|
||||
|
||||
```
|
||||
Fondo: #FFF8ED (inq-orange-lighter)
|
||||
Border-left: 3px solid #F59845
|
||||
Padding: 10-12px 14px
|
||||
Border-radius: 0 4px 4px 0
|
||||
Texto: 11px / 400 / line-height 1.55 / color #475569
|
||||
```
|
||||
|
||||
### 2.4 Sección Transparencia Metodológica
|
||||
|
||||
```
|
||||
Fondo: #FFFBEB (warning-bg)
|
||||
Border: 0.5px solid #F59E0B
|
||||
Padding: 12px 14px
|
||||
Border-radius: 6px
|
||||
Título: 11px / 500 / color #92400E (con ícono ⚠)
|
||||
Texto: 10px / 400 / line-height 1.6 / color #78350F
|
||||
```
|
||||
|
||||
### 2.5 Tabla comparativa
|
||||
|
||||
```
|
||||
Header row:
|
||||
Fondo: #FFF8ED
|
||||
Border-bottom: 1px solid #F59845
|
||||
Padding: 8px 6px
|
||||
Texto: 10px / 500 / color #92400E
|
||||
|
||||
Body row (default):
|
||||
Fondo: white
|
||||
Border-bottom: 0.5px solid #E2E8F0
|
||||
Padding: 8px 6px
|
||||
Texto: 10px / 400 / color #0F172A
|
||||
Números: font-family mono
|
||||
|
||||
Body row (no automatizable):
|
||||
Fondo: #F8FAFC
|
||||
Texto: color #64748B (más tenue)
|
||||
|
||||
Total row:
|
||||
Fondo: #FFF8ED
|
||||
Border-top: 1.5px solid #F59845
|
||||
Texto: 10px / 500 / color #0F172A
|
||||
```
|
||||
|
||||
### 2.6 Header de página PDF
|
||||
|
||||
```
|
||||
Layout: flex justify-between
|
||||
Border-bottom: 3px solid #F59845 (página 1) / 2px (otras páginas)
|
||||
Padding-bottom: 10-12px
|
||||
Margin-bottom: 14-16px
|
||||
|
||||
Izquierda:
|
||||
Logo "InQ ROI": 18-22px / 700 / #F59845
|
||||
Tagline (página 1): 9px / letter-spacing 1.5px / #94A3B8
|
||||
|
||||
Derecha:
|
||||
Label "UN PRODUCTO DE": 9px / letter-spacing 1px / #94A3B8
|
||||
"InQ": 16px / 700 / #475569
|
||||
"InQuality": 9px / #64748B
|
||||
```
|
||||
|
||||
### 2.7 Footer de página PDF
|
||||
|
||||
```
|
||||
Position: absolute bottom 14-16px
|
||||
Padding-top: 6-8px
|
||||
Border-top: 0.5px solid #E2E8F0
|
||||
Layout: flex justify-between
|
||||
Font: 9px / 400 / #94A3B8
|
||||
|
||||
Izquierda:
|
||||
"InQ ROI" en bold #F59845
|
||||
" · Powered by InQuality · "
|
||||
Nombre cliente · fecha
|
||||
|
||||
Derecha:
|
||||
"Página X de Y"
|
||||
```
|
||||
|
||||
### 2.8 Badge "Automatizable" (⚡)
|
||||
|
||||
#### En canvas BPMN (overlay)
|
||||
```
|
||||
Tamaño: 14px diameter
|
||||
Fondo: #F59845
|
||||
Border: 1.5px solid white
|
||||
Posición: top: -8, left: nodeWidth - 12 (NO usar right por compatibilidad bpmn-js v18)
|
||||
Símbolo ⚡: white, 8px, font-weight 700
|
||||
```
|
||||
|
||||
#### En tabla
|
||||
```
|
||||
Tamaño: 14px diameter inline
|
||||
Fondo: #F59845
|
||||
Color: white
|
||||
```
|
||||
|
||||
#### En leyenda
|
||||
```
|
||||
Tamaño: 14px diameter
|
||||
Mismo estilo que en tabla
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Rediseño de PDFs
|
||||
|
||||
### 3.1 Decisión arquitectónica: orientación híbrida
|
||||
|
||||
Los PDFs con diagrama BPMN tendrán **layout híbrido portrait + landscape**:
|
||||
|
||||
- **Páginas SIN diagrama:** vertical A4 (portrait)
|
||||
- **Página DEL diagrama BPMN:** horizontal A4 (landscape) — para que el diagrama tenga espacio real
|
||||
|
||||
Esto es bloqueante: jsPDF soporta página por página con orientación individual. Implementar usando `doc.addPage([width, height], 'landscape')` para la página del diagrama.
|
||||
|
||||
### 3.2 PDF de Comparación + ROI (4 páginas)
|
||||
|
||||
#### Página 1 — Resumen ejecutivo (vertical)
|
||||
|
||||
Reemplaza la carátula. Header denso que incluye toda la metadata.
|
||||
|
||||
```
|
||||
Header (con border-bottom 3px solid #F59845):
|
||||
- Logo InQ ROI a la izquierda
|
||||
- "UN PRODUCTO DE / InQ / InQuality" a la derecha
|
||||
|
||||
Strip de metadata (grid 2fr 1fr 1fr en fondo #FAFBFC):
|
||||
- Proceso: Originación de créditos personales
|
||||
- Cliente: Banco Atlántico S.A.
|
||||
- Fecha: 15 mayo 2026
|
||||
|
||||
Banner narrativo (#FFF8ED con border-left naranja):
|
||||
Resumen ejecutivo: Automatización de N actividades sobre proceso de M etapas.
|
||||
Frecuencia X/año, horizonte Y años, inversión USD Z.
|
||||
|
||||
KPI Hero (gradiente naranja → magenta):
|
||||
AHORRO PROYECTADO A 3 AÑOS
|
||||
USD 192.400 — neto de inversión
|
||||
Recuperás 2,4× la inversión en el período
|
||||
|
||||
KPIs secundarios (grid 2x2):
|
||||
- AHORRO POR EJECUCIÓN: USD 18,16 — ↓ 38%
|
||||
- AHORRO ANUAL: USD 90.800
|
||||
- PAYBACK: 10,6 meses
|
||||
- ROI ANUAL: 114%
|
||||
|
||||
Top 3 ahorros (caja con border #E2E8F0):
|
||||
Header: "[3] Top actividades con mayor ahorro"
|
||||
3 barras horizontales con %, monto, label
|
||||
|
||||
Trayectoria del ahorro (caja con border #E2E8F0):
|
||||
Gráfico SVG nativo en jsPDF con:
|
||||
- Área negativa (antes del payback) en #FEE2E2
|
||||
- Área positiva (después) en #FED7AA
|
||||
- Línea principal #F59845
|
||||
- Marker vertical en mes de payback
|
||||
- Labels eje X: 0 / Año 1 / Año 2 / Año 3
|
||||
- Valor final en esquina superior derecha
|
||||
IMPORTANTE: dibujado con jsPDF nativo, NO captura html2canvas
|
||||
(los charts ECharts en imagen quedan borrosos, lo verificamos en MVP)
|
||||
|
||||
Footer (absolute bottom):
|
||||
"InQ ROI · Powered by InQuality · Banco Atlántico · 15 may 2026"
|
||||
"Página 1 de 4"
|
||||
```
|
||||
|
||||
#### Página 2 — Diagrama BPMN (horizontal)
|
||||
|
||||
```
|
||||
Orientación: landscape A4
|
||||
|
||||
Header (border-bottom 2px solid #F59845):
|
||||
- Logo InQ ROI + título "MAPA DE CALOR · ESCENARIO ACTUAL"
|
||||
- "Originación de créditos personales"
|
||||
- Costo total a la derecha
|
||||
|
||||
Canvas del diagrama:
|
||||
- Background #FAFBFC
|
||||
- Border 0.5px #E2E8F0
|
||||
- Border-radius 6px
|
||||
- Padding 18px
|
||||
- Altura ~400px (toma casi toda la página)
|
||||
- El diagrama BPMN ocupa TODO el ancho disponible
|
||||
- Embebido como JPEG vía html2canvas
|
||||
- Badge ⚡ #F59845 sobre los nodos automatizables
|
||||
|
||||
Leyenda al pie:
|
||||
- Heatmap gradient: bajo → alto
|
||||
- Badge ⚡: marcado como automatizable
|
||||
|
||||
Footer (modificado para landscape):
|
||||
Mismo formato pero ajustado al ancho horizontal
|
||||
```
|
||||
|
||||
#### Página 3 — Comparación por actividad (vertical)
|
||||
|
||||
```
|
||||
Header:
|
||||
- Logo InQ ROI
|
||||
- "COMPARACIÓN ACTIVIDAD POR ACTIVIDAD"
|
||||
- "Detalle de costos: actual vs. automatizado"
|
||||
|
||||
Texto introductorio:
|
||||
"Las actividades marcadas con [⚡] son candidatas a automatización..."
|
||||
|
||||
Tabla autotable (jsPDF-autotable):
|
||||
Columnas: Actividad | Costo actual | Costo auto. | Ahorro | % | Prob.
|
||||
Header con fondo #FFF8ED y border-bottom #F59845
|
||||
Filas automatizables: fondo blanco
|
||||
Filas no-automatizables: fondo #F8FAFC, texto #64748B
|
||||
Total row: fondo #FFF8ED, border-top 1.5px #F59845
|
||||
|
||||
Nota:
|
||||
"Tabla muestra X de Y actividades..."
|
||||
|
||||
Footer estándar
|
||||
```
|
||||
|
||||
#### Página 4 — Análisis y metodología (vertical)
|
||||
|
||||
```
|
||||
Header:
|
||||
"CONTEXTO DEL ANÁLISIS"
|
||||
"Composición del ahorro y metodología"
|
||||
|
||||
Sección: Origen del ahorro
|
||||
Texto: "El N% del ahorro proyectado proviene de la automatización de..."
|
||||
3 barras horizontales con el desglose
|
||||
|
||||
Sección: Metodología de cálculo
|
||||
Caja gris (#F8FAFC):
|
||||
- Costo por ejecución (fórmula)
|
||||
- Ahorro anual (fórmula)
|
||||
- Payback (fórmula)
|
||||
- ROI anualizado (fórmula)
|
||||
|
||||
Sección: Supuestos del análisis
|
||||
Caja ámbar (warning):
|
||||
Texto sobre limitaciones y supuestos
|
||||
|
||||
Sección: Transparencia metodológica (CONDICIONAL)
|
||||
Solo si TransparencySection detecta casos (los 4 ya implementados):
|
||||
- Caso 1: actividades automatizables con costo cero
|
||||
- Caso 2: inversión cero
|
||||
- Caso 3: ROI > 1000%
|
||||
- Caso 4: payback < 1 mes con inversión 0
|
||||
Mismo estilo de caja ámbar
|
||||
|
||||
Sección: Próximos pasos sugeridos (opcional, hardcoded por ahora)
|
||||
3-4 puntos de validación recomendada
|
||||
|
||||
Footer estándar
|
||||
```
|
||||
|
||||
### 3.3 PDFs de Actual y Automatizado (3 páginas cada uno)
|
||||
|
||||
Los PDFs por escenario individual mantienen estructura similar pero adaptada:
|
||||
|
||||
```
|
||||
Página 1 (vertical):
|
||||
Header
|
||||
Strip de metadata
|
||||
KPIs principales (Costo total, Costo directo/Overhead, Tiempo, Actividades)
|
||||
Top 3 actividades por costo
|
||||
Footer
|
||||
|
||||
Página 2 (horizontal):
|
||||
Diagrama BPMN con heatmap embebido
|
||||
Leyenda
|
||||
|
||||
Página 3 (vertical):
|
||||
Tabla de costos por actividad
|
||||
Nota metodológica
|
||||
Footer
|
||||
```
|
||||
|
||||
### 3.4 Formato de Payback (regla global)
|
||||
|
||||
Implementar en un helper compartido entre web y PDF:
|
||||
|
||||
```typescript
|
||||
function formatPayback(months: number): string {
|
||||
if (Number.isNaN(months) || !isFinite(months)) return "No recupera en horizonte";
|
||||
if (months < 0) return "Sin payback (costo aumenta)";
|
||||
if (months === 0) return "Inmediato";
|
||||
if (months < 0.1) return "< 1 día";
|
||||
if (months < 1) return `< 1 mes (${months.toFixed(2)} meses)`;
|
||||
if (months < 12) return `${months.toFixed(1)} meses`;
|
||||
if (months < 24) {
|
||||
const years = (months / 12).toFixed(1);
|
||||
return `${months.toFixed(1)} meses (~${years} años)`;
|
||||
}
|
||||
return `${(months / 12).toFixed(1)} años`;
|
||||
}
|
||||
```
|
||||
|
||||
Tests:
|
||||
- 0 → "Inmediato"
|
||||
- 0.05 → "< 1 día"
|
||||
- 0.5 → "< 1 mes (0.50 meses)"
|
||||
- 6 → "6.0 meses"
|
||||
- 15 → "15.0 meses (~1.3 años)"
|
||||
- 30 → "2.5 años"
|
||||
- Infinity → "No recupera en horizonte"
|
||||
- -1 → "Sin payback (costo aumenta)"
|
||||
- NaN → "No recupera en horizonte"
|
||||
- 11.95 → "11.9 meses"
|
||||
- 12.0 → "12.0 meses (~1.0 años)"
|
||||
|
||||
---
|
||||
|
||||
## 4. Rediseño Web App
|
||||
|
||||
### 4.1 Topbar global
|
||||
|
||||
```
|
||||
Background: white
|
||||
Border-bottom: 1px solid #E2E8F0
|
||||
Padding: 12px 20px
|
||||
Layout: flex justify-between
|
||||
|
||||
Izquierda:
|
||||
Logo "InQ ROI" 18px / 700 / #F59845
|
||||
Spacer 24px
|
||||
Nav links:
|
||||
- Workspace (activo: fondo #FFF8ED, texto #F59845, font-weight 500)
|
||||
- Reporte
|
||||
- Recursos
|
||||
Cada link: padding 6px 12px, border-radius 4px
|
||||
|
||||
Derecha:
|
||||
Botón secundario "Exportar PDF" (white, border #E2E8F0)
|
||||
Botón primario "Simular →" (background #F59845, color white, font-weight 700)
|
||||
```
|
||||
|
||||
### 4.2 Workspace (BpmnCanvas + ActivityPanel)
|
||||
|
||||
```
|
||||
Layout: flex, height calc(100vh - topbar)
|
||||
|
||||
Canvas izquierdo (flex 1):
|
||||
Background: #FAFBFC
|
||||
Padding: 20px
|
||||
Border-right: 1px solid #E2E8F0
|
||||
|
||||
Diagrama BPMN:
|
||||
- Estilos por defecto de bpmn-js
|
||||
- Actividad seleccionada: fondo #FFF8ED, border 2px #F59845
|
||||
- Badges ⚡ en automatizables: círculo #F59845, ⚡ blanco
|
||||
- Posición badge: top: -8, left: width - 12
|
||||
|
||||
Leyenda flotante (bottom-left):
|
||||
Background white, border 0.5px #E2E8F0, radius 6px
|
||||
Padding 8px 12px
|
||||
Contenido: "N actividades automatizables" con icono
|
||||
|
||||
Panel derecho (width 280-320px):
|
||||
Background: white
|
||||
Padding: 16px 18px
|
||||
Overflow: auto
|
||||
|
||||
Header del panel:
|
||||
Badge ⚡ + nombre actividad + "Actividad seleccionada"
|
||||
Border-bottom 1px #E2E8F0
|
||||
Padding-bottom 12px
|
||||
|
||||
Sección "COSTO ACTUAL":
|
||||
Label 10px / 500 / letter-spacing 1px / #94A3B8
|
||||
Inputs: border #E2E8F0, padding 6px 10px, bg #F8FAFC
|
||||
|
||||
Sección "AUTOMATIZACIÓN" (caja destacada):
|
||||
Background: #FFF8ED
|
||||
Border: 1px solid #F59845
|
||||
Padding: 12px
|
||||
Border-radius: 6px
|
||||
|
||||
Header con título y switch:
|
||||
"AUTOMATIZACIÓN" 11px / 500 / #92400E
|
||||
Switch: 30x16px, background #F59845 cuando ON
|
||||
|
||||
Inputs:
|
||||
border #F59845, background white, color #0F172A
|
||||
|
||||
Helper de ahorro estimado (cuando aplica):
|
||||
Background: #F0FDF4
|
||||
Border-left: 2px solid #16A34A
|
||||
Padding: 8px 10px
|
||||
Texto: 10px / color #15803D
|
||||
Texto: "Ahorro estimado: USD X por ejecución (Y%)"
|
||||
```
|
||||
|
||||
### 4.3 Reporte ROI (tab Comparación + ROI)
|
||||
|
||||
```
|
||||
Page header:
|
||||
Título "Nombre del proceso"
|
||||
Subtítulo "Cliente · Simulado el ..."
|
||||
|
||||
Tabs:
|
||||
3 tabs horizontales con border-bottom-color en activo
|
||||
Activo: border-bottom 2px #F59845, texto #F59845 / 500
|
||||
Inactivo: texto #64748B
|
||||
|
||||
Contenido tab "Comparación + ROI":
|
||||
|
||||
KPI Hero:
|
||||
Mismo estilo que PDF — gradient naranja → magenta
|
||||
Margin-bottom 12px
|
||||
|
||||
KPIs secundarios (grid 4 columnas):
|
||||
Mismo estilo que PDF
|
||||
Gap 8px
|
||||
|
||||
Gráficos (grid 2 columnas):
|
||||
Trayectoria del ahorro: chart con líneas y marker
|
||||
Top 3 ahorros: barras horizontales
|
||||
|
||||
Tabla comparativa completa abajo:
|
||||
Misma estructura que PDF Pág. 3
|
||||
Sortable por columna ahorro (mantener funcionalidad existente)
|
||||
|
||||
Sección Transparencia (condicional):
|
||||
Misma estructura que PDF, banner ámbar
|
||||
```
|
||||
|
||||
### 4.4 Componentes shadcn a personalizar
|
||||
|
||||
Los componentes shadcn que ya existen necesitan tema con los tokens nuevos:
|
||||
|
||||
- `Button` variant "default" → fondo `#F59845`, hover `#B45309`, font-weight 700
|
||||
- `Button` variant "secondary" → border `#E2E8F0`, hover bg `#F8FAFC`
|
||||
- `Tabs` → active state con color naranja en lugar de azul
|
||||
- `Switch` → naranja cuando checked
|
||||
- `Badge` → variantes "automatable" con fondo naranja
|
||||
|
||||
---
|
||||
|
||||
## 5. Cambios funcionales asociados
|
||||
|
||||
### 5.1 Helper `formatPayback`
|
||||
|
||||
Crear en `src/lib/format.ts` (o donde ya estén los formatters de moneda).
|
||||
|
||||
Tests obligatorios — ver sección 3.4.
|
||||
|
||||
Aplicar en:
|
||||
- `RoiKpiBar.tsx` (web)
|
||||
- `pdf-sections-roi.ts → drawRoiKpiCards`
|
||||
- `csv-export.ts` línea de metadata
|
||||
|
||||
### 5.2 Detector de ROI inusual ya implementado en Etapa 3 de Sprint 1
|
||||
|
||||
Verificar que la sección Transparencia se renderiza correctamente en el PDF (Sprint 1 Etapa 4 tuvo PDF de 36KB que era anómalo — revisar que ahora con el rediseño tenga densidad razonable).
|
||||
|
||||
### 5.3 Overlay badge en BpmnCanvas
|
||||
|
||||
El badge ⚡ ya está implementado. Cambios visuales:
|
||||
- Fondo de blanco a `#F59845` (más prominente)
|
||||
- ⚡ blanco en lugar de ámbar
|
||||
- Posición: cambiar de `{ top: -8, right: -8 }` a `{ top: -8, left: elementWidth - 12 }` para no depender del soporte de `right` en bpmn-js v18
|
||||
|
||||
### 5.4 Carátula del PDF — eliminar
|
||||
|
||||
El PDF anterior tenía una carátula con gradient grande. Reemplazar por header denso en página 1 (ver sección 3.2 — Página 1).
|
||||
|
||||
---
|
||||
|
||||
## 6. Validación E2E
|
||||
|
||||
### 6.1 Archivos a generar
|
||||
|
||||
Para validar el rediseño, generar los siguientes archivos en `tests/e2e/__output__/`:
|
||||
|
||||
**Setup A: medium-with-gateways realista**
|
||||
- 3 actividades automatizables (`task_recv`, `task_score`, `task_analisis`)
|
||||
- Costos directos: $200/actividad
|
||||
- Costos automatizados: $20/actividad
|
||||
- Frecuencia anual: 5.000
|
||||
- Horizonte: 3 años
|
||||
- Inversión: USD 80.000
|
||||
|
||||
Generar:
|
||||
- `medium-gw_actual_v2.pdf`
|
||||
- `medium-gw_automatizado_v2.pdf`
|
||||
- `medium-gw_roi_v2.pdf`
|
||||
|
||||
**Setup B: medium-with-gateways con ROI inusual**
|
||||
- Mismas actividades automatizables
|
||||
- Costos automatizados: $1 (para forzar ROI > 1000%)
|
||||
- Frecuencia anual: 12.000
|
||||
- Inversión: USD 10.000
|
||||
|
||||
Generar:
|
||||
- `medium-gw_roi_inusual_v2.pdf` — debe mostrar Transparencia Metodológica con aviso de ROI inusual
|
||||
|
||||
**Setup C: payback en distintos rangos**
|
||||
- `payback_inmediato.pdf` — inversión = 0
|
||||
- `payback_corto.pdf` — payback de 0.5 meses
|
||||
- `payback_normal.pdf` — payback de 10 meses
|
||||
- `payback_largo.pdf` — payback de 30 meses
|
||||
|
||||
Generar:
|
||||
- `payback_formats.pdf` — uno solo con los 4 casos para verificar el formato visual
|
||||
|
||||
### 6.2 Métricas que Claude Code DEBE reportar
|
||||
|
||||
Tabla de validación:
|
||||
|
||||
```
|
||||
┌────────────────────────────┬──────────┬──────────┬───────────────────┐
|
||||
│ Archivo │ Tamaño │ Páginas │ Validación visual │
|
||||
├────────────────────────────┼──────────┼──────────┼───────────────────┤
|
||||
│ medium-gw_actual_v2.pdf │ XX KB │ 3 │ ✓ / ✗ │
|
||||
│ medium-gw_automatizado_v2 │ XX KB │ 3 │ ✓ / ✗ │
|
||||
│ medium-gw_roi_v2.pdf │ XX KB │ 4 │ ✓ / ✗ │
|
||||
│ medium-gw_roi_inusual_v2 │ XX KB │ 4 │ ✓ / ✗ │
|
||||
└────────────────────────────┴──────────┴──────────┴───────────────────┘
|
||||
```
|
||||
|
||||
**Tamaño esperado por página: 25-50 KB.** Páginas con diagrama BPMN embebido pueden llegar a 60 KB. Si alguna página queda en < 15 KB es señal de que algo no se renderizó.
|
||||
|
||||
Análisis de píxeles del heatmap embebido (igual que MVP):
|
||||
- Detectar verde, amarillo y rojo en la página del diagrama
|
||||
- Verificar que el badge ⚡ naranja `#F59845` está presente (al menos un pixel naranja sobre el diagrama)
|
||||
|
||||
Text extraction con pdf-parse para verificar palabras clave:
|
||||
- `_actual.pdf`: "Costo total esperado", "Análisis de procesos"
|
||||
- `_automatizado.pdf`: "Costo total", "actividades no automatizables"
|
||||
- `_roi.pdf`: "Análisis de retorno", "Ahorro anual", "Payback", "ROI"
|
||||
- `_roi_inusual.pdf`: TODO lo anterior + "ROI inusualmente alto detectado"
|
||||
|
||||
Verificación de marca:
|
||||
- En cada PDF, buscar texto exacto "InQ" (con I-n-Q correctos)
|
||||
- Verificar que NO aparece "INQ", "Inq", "inq" en ningún PDF
|
||||
- Verificar "Powered by InQuality" en cada footer
|
||||
|
||||
### 6.3 Validación visual obligatoria por el usuario
|
||||
|
||||
Después de generar los archivos, presentarlos vía `present_files` para que el usuario abra los PDFs en Preview y valide:
|
||||
|
||||
1. ¿Los KPIs se ven como cards prominentes con el gradiente naranja → magenta?
|
||||
2. ¿El diagrama BPMN se ve grande y legible en la página horizontal?
|
||||
3. ¿El formato de payback es claro ("10.6 meses" vs "0.0 meses")?
|
||||
4. ¿La sección Transparencia metodológica aparece cuando corresponde?
|
||||
5. ¿"InQ ROI" y "Powered by InQuality" se ven correctos en headers/footers?
|
||||
6. ¿La densidad de información es adecuada (no hay páginas semivacías)?
|
||||
|
||||
---
|
||||
|
||||
## 7. Definition of Done
|
||||
|
||||
- [ ] Manual de marca aplicado: paleta naranja InQ, tipografía consistente, "InQ" siempre I-n-Q
|
||||
- [ ] PDF de Comparación + ROI con layout híbrido (vertical + horizontal + vertical + vertical)
|
||||
- [ ] PDF de Actual y Automatizado con layout híbrido (vertical + horizontal + vertical)
|
||||
- [ ] Página 1 de cada PDF SIN carátula, con header denso que incluye metadata
|
||||
- [ ] KPI Hero con gradiente naranja → magenta en PDF y Web
|
||||
- [ ] Top 3 ahorros visible en página 1 del PDF ROI
|
||||
- [ ] Tabla comparativa con paleta naranja consistente
|
||||
- [ ] Footer real al pie de página (no a mitad)
|
||||
- [ ] Helper `formatPayback` implementado y aplicado en UI, PDF y CSV
|
||||
- [ ] Badge ⚡ en BpmnCanvas con fondo naranja sólido `#F59845`
|
||||
- [ ] Posición del badge cambiada a `{ top, left }` (no `right`) — robusto a bpmn-js v18
|
||||
- [ ] Web app con identidad: topbar con logo, CTAs naranjas, tabs con color de marca
|
||||
- [ ] Panel de Automatización en ActivityPanel con caja naranja destacada
|
||||
- [ ] 7 archivos de validación generados en `tests/e2e/__output__/`
|
||||
- [ ] Análisis de píxeles confirma badge naranja + heatmap completo
|
||||
- [ ] Verificación textual confirma "InQ" correcto en todos los PDFs
|
||||
- [ ] `present_files` ejecutado para que el usuario abra los PDFs
|
||||
- [ ] 440 tests previos siguen verdes
|
||||
- [ ] Nuevos tests de `formatPayback` (≥12 casos)
|
||||
- [ ] Build limpio, lint limpio
|
||||
- [ ] CHANGELOG.md actualizado con sección "Sprint 1.5 — Rediseño visual"
|
||||
- [ ] DESIGN_SYSTEM.md creado con paleta, tipografía y componentes (referencia para Sprint 2+)
|
||||
|
||||
---
|
||||
|
||||
## 8. Lo que NO entra en Sprint 1.5
|
||||
|
||||
- Refinamiento del ícono ⚡ a Bot de Lucide (Sprint 2-3)
|
||||
- Nueva entidad `ProcessOverheadCost` para multas/penalidades (Sprint 2-3)
|
||||
- Branding completo con logo SVG de InQuality embebido (Sprint 3-4)
|
||||
- Excel multi-hoja con identidad (Sprint 3-4)
|
||||
- Carátula opcional vía toggle de export (no se necesita por ahora — decidimos no usarla)
|
||||
- Animaciones avanzadas en web app (Sprint 4+)
|
||||
- Modo oscuro (Sprint 4+)
|
||||
|
||||
---
|
||||
|
||||
## 9. Cambios en archivos clave
|
||||
|
||||
### Nuevos
|
||||
- `src/lib/format.ts` (o extender el existente) — `formatPayback`
|
||||
- `DESIGN_SYSTEM.md` — referencia visual del sistema
|
||||
- `src/lib/export/pdf-sections-shared.ts` — header y footer reutilizables
|
||||
- `tests/lib/format-payback.test.ts` — tests del helper
|
||||
|
||||
### Modificados
|
||||
- `src/lib/export/pdf-export.ts` — soportar orientación landscape en una página
|
||||
- `src/lib/export/pdf-sections.ts` — aplicar nuevo manual de marca
|
||||
- `src/lib/export/pdf-sections-roi.ts` — rediseño completo del PDF ROI
|
||||
- `src/features/workspace/BpmnCanvas.tsx` — badge ⚡ naranja + posición
|
||||
- `src/features/workspace/ActivityPanel.tsx` — sección Automatización con caja naranja
|
||||
- `src/features/report/RoiKpiBar.tsx` — KPI Hero gradiente + secundarios paleta
|
||||
- `src/features/report/ComparisonTable.tsx` — paleta naranja
|
||||
- `src/features/report/TransparencySection.tsx` — verificar render correcto
|
||||
- `src/components/ui/*` — tokens naranja en components shadcn (button, tabs, switch)
|
||||
- `tailwind.config.ts` — extender paleta con tokens InQ
|
||||
- `index.css` — definir variables CSS
|
||||
|
||||
### En CLAUDE.md, agregar regla crítica
|
||||
```
|
||||
## Reglas de marca (NO NEGOCIABLES)
|
||||
|
||||
1. La versión corta de InQuality SIEMPRE se escribe "InQ":
|
||||
- I mayúscula
|
||||
- n minúscula
|
||||
- Q mayúscula
|
||||
- Cualquier otra forma (INQ, Inq, inq, inQ) es bug
|
||||
|
||||
2. El producto se llama "InQ ROI" en este Sprint. Es nombre de trabajo,
|
||||
se reemplazará en Sprint 3-4. No debatir el nombre ahora.
|
||||
|
||||
3. Color protagonista: naranja InQ #F59845.
|
||||
Gradiente identidad: #F59845 → #ED3E8F (naranja → magenta).
|
||||
No usar morado de CONCILIA (#572FA2, #CB1889) en este producto.
|
||||
|
||||
4. Tagline obligatorio en footers de PDF: "Powered by InQuality".
|
||||
|
||||
5. No promover a Marcos como creador del producto. Si aparece nombre del
|
||||
consultor en algún campo, es como "consultor responsable", no como
|
||||
"creador" o "founder".
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. Orden de implementación (11 etapas)
|
||||
|
||||
Cada etapa es validable independientemente. Pattern: implementación → validación visual con usuario → siguiente etapa.
|
||||
|
||||
1. **Etapa 1 — Setup del sistema de diseño** ✅ COMPLETADA
|
||||
- DESIGN_SYSTEM.md, tailwind.config.ts, index.css
|
||||
- Tokens InQ + heatmap
|
||||
- Audit de azules y hardcodes
|
||||
- Tests de tokens
|
||||
|
||||
2. **Etapa 2 — Helper formatPayback + aplicación**
|
||||
- Helper en src/lib/format.ts (12 tests)
|
||||
- Aplicación en RoiKpiBar, PDF, CSV
|
||||
- Actualización del audit con WCAG y donut
|
||||
|
||||
3. **Etapa 3 — Web App: workspace + reporte**
|
||||
- Topbar con logo InQ ROI
|
||||
- ActivityPanel con sección Automatización naranja
|
||||
- Reporte con KPI Hero gradiente y secundarios paleta
|
||||
- font-weight 700 en CTAs primarios (WCAG)
|
||||
- Validación visual con usuario
|
||||
|
||||
4. **Etapa 4 — PDF: header y footer compartidos**
|
||||
- Crear `pdf-sections-shared.ts`
|
||||
- Refactorizar PDFs existentes para usar header/footer comunes
|
||||
- Aplicar paleta InQ
|
||||
|
||||
5. **Etapa 5 — PDF: layout híbrido (vertical + horizontal)**
|
||||
- Modificar `pdf-export.ts` para soportar landscape en página específica
|
||||
- Implementar página del diagrama horizontal
|
||||
- Generar primer PDF de validación
|
||||
|
||||
6. **Etapa 6 — PDF: rediseño completo de página 1 ROI**
|
||||
- Header denso sin carátula
|
||||
- KPI Hero, secundarios, top 3, gráfico de trayectoria
|
||||
- Aplicar `formatPayback`
|
||||
- Generar segundo PDF de validación
|
||||
|
||||
7. **Etapa 7 — PDF: páginas 3 y 4 ROI**
|
||||
- Tabla comparativa con paleta
|
||||
- Análisis textual con secciones
|
||||
- Sección Transparencia condicional
|
||||
- Generar tercer PDF de validación
|
||||
|
||||
8. **Etapa 8 — PDFs de Actual y Automatizado**
|
||||
- Aplicar mismo sistema
|
||||
- Verificar consistencia visual
|
||||
|
||||
9. **Etapa 9 — Badge ⚡ en BpmnCanvas**
|
||||
- Color naranja sólido
|
||||
- Posición robusta (top + left)
|
||||
- Test del overlay
|
||||
|
||||
10. **Etapa 10 — Validación E2E final**
|
||||
- Generar los 7 archivos especificados
|
||||
- Análisis de píxeles, text extraction
|
||||
- `present_files` para validación visual del usuario
|
||||
|
||||
11. **Etapa 11 — Documentación + Deploy**
|
||||
- CHANGELOG.md
|
||||
- Actualizar CLAUDE.md con reglas de marca
|
||||
- Tag de release v0.2.0-sprint1-visual
|
||||
|
||||
---
|
||||
|
||||
## Notas finales para Claude Code
|
||||
|
||||
- Este es un sprint de POLISH, no de features. Si encontrás algo que requiere cambios arquitectónicos importantes (más de 1 hora), PARÁ y consultá con el usuario antes de proceder.
|
||||
|
||||
- La validación visual final la hace el usuario abriendo los PDFs en Preview de Mac. Tu trabajo NO es solo generar archivos — es generar archivos QUE SE VEAN COMO EL MOCKUP MUESTRA. No declares la etapa terminada sin haber verificado tamaño, páginas, análisis de píxeles del heatmap, y palabras clave del texto extraído.
|
||||
|
||||
- Cada PDF generado pasa por `present_files` para que el usuario lo abra. NO te conformes con "los tests pasaron".
|
||||
|
||||
- Si en algún momento de la implementación descubrís que el mockup tiene una inconsistencia o un detalle no especificado, hacé las preguntas explícitamente antes de inventar la respuesta.
|
||||
|
||||
- El usuario ha sido riguroso pidiendo validación honesta. Mantené ese estándar: reportá lo que efectivamente verificaste, no lo que asumiste.
|
||||
220
sprints/sprint-1-5/ETAPA_1_PROMPT.md
Normal file
220
sprints/sprint-1-5/ETAPA_1_PROMPT.md
Normal file
@@ -0,0 +1,220 @@
|
||||
# Sprint 1.5 — Etapa 1: Setup del sistema de diseño
|
||||
|
||||
> **Estado: COMPLETADA y APROBADA** (16 mayo 2026)
|
||||
>
|
||||
> Este documento es el prompt original que se ejecutó. Se preserva como referencia histórica del Sprint 1.5. La evidencia de ejecución vive en:
|
||||
> - Código del repo (tokens InQ aplicados)
|
||||
> - `sprints/sprint-1-5/etapa-1-audit.md` (audit de azules y hardcodes)
|
||||
> - Tests en `tests/design-system/tokens.test.ts`
|
||||
|
||||
---
|
||||
|
||||
## Objetivo
|
||||
|
||||
Establecer la infraestructura visual del Sprint 1.5 antes de tocar cualquier componente de UI o PDF. Sin esto, los cambios de Etapas 2-9 quedarían hardcodeados con hexcodes dispersos.
|
||||
|
||||
---
|
||||
|
||||
## Plan aprobado con 4 ajustes
|
||||
|
||||
### Ajuste 1 — Heatmap: tokens SÍ, aplicación NO
|
||||
|
||||
Mantener los colores saturados actuales del heatmap (verde/ámbar/rojo). NO migrar a la paleta pastel del brief en esta etapa.
|
||||
|
||||
Razones:
|
||||
- Romper los E2E de análisis de píxeles calibrados a colores saturados sería retroceso. Esos tests fueron el mecanismo de validación más sólido en Sprint 1.
|
||||
- El producto se usa en talleres y charlas en pantallas grandes. El pastel se ve lavado a distancia.
|
||||
|
||||
Acciones:
|
||||
- En `tailwind.config.ts`, definir tokens del heatmap saturado actual:
|
||||
```typescript
|
||||
heatmap: {
|
||||
low: '#10B981',
|
||||
mid: '#F59E0B',
|
||||
high: '#EF4444',
|
||||
}
|
||||
```
|
||||
- Reemplazar los hex hardcodeados de `HeatmapCanvas` por estos tokens.
|
||||
- En `DESIGN_SYSTEM.md`, documentar la decisión.
|
||||
- En `TODO.md`: anotar revisión del heatmap para Sprint 3-4.
|
||||
|
||||
### Ajuste 2 — Audit de azules residuales y hardcodes
|
||||
|
||||
Antes de finalizar Etapa 1, ejecutar auditoría:
|
||||
|
||||
```bash
|
||||
grep -rn "blue\|sky\|indigo\|3B82F6\|2563EB\|1D4ED8" src/ \
|
||||
--include="*.tsx" --include="*.ts" --include="*.css"
|
||||
|
||||
grep -rn "primary" src/ --include="*.tsx" --include="*.ts"
|
||||
|
||||
grep -rn "#[0-9a-fA-F]\{6\}" src/ --include="*.tsx" --include="*.ts"
|
||||
```
|
||||
|
||||
Clasificar cada hallazgo en 3 categorías:
|
||||
- "Migrar a token InQ"
|
||||
- "Mantener azul funcional"
|
||||
- "Migrar a neutral"
|
||||
|
||||
Documentar en `sprints/sprint-1-5/etapa-1-audit.md` con archivo:línea, color, clasificación, acción sugerida. NO resolver en Etapa 1; solo listar.
|
||||
|
||||
### Ajuste 3 — Tests del sistema de diseño
|
||||
|
||||
Crear `tests/design-system/tokens.test.ts` con al menos:
|
||||
|
||||
```typescript
|
||||
describe('Design tokens', () => {
|
||||
it('expone tokens de marca InQ vía Tailwind config', () => {
|
||||
expect(config.theme.extend.colors.inq.orange.DEFAULT).toBe('#F59845');
|
||||
expect(config.theme.extend.colors.inq.orange.dark).toBe('#B45309');
|
||||
expect(config.theme.extend.colors.inq.orange.light).toBe('#FEF3E2');
|
||||
expect(config.theme.extend.colors.inq.orange.lighter).toBe('#FFF8ED');
|
||||
expect(config.theme.extend.colors.inq.magenta).toBe('#ED3E8F');
|
||||
});
|
||||
|
||||
it('NO incluye los colores de CONCILIA', () => {
|
||||
const allColors = JSON.stringify(config.theme.extend.colors);
|
||||
expect(allColors).not.toContain('#572FA2');
|
||||
expect(allColors).not.toContain('#CB1889');
|
||||
});
|
||||
|
||||
it('expone tokens del heatmap saturado', () => {
|
||||
expect(config.theme.extend.colors.heatmap.low).toBe('#10B981');
|
||||
expect(config.theme.extend.colors.heatmap.mid).toBe('#F59E0B');
|
||||
expect(config.theme.extend.colors.heatmap.high).toBe('#EF4444');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Adicionalmente, crear `tests/lib/format-payback.test.ts` con 7 `it.todo` que preparan Etapa 2.
|
||||
|
||||
### Ajuste 4 — Estructura anidada en Tailwind config
|
||||
|
||||
Estructura anidada (no con guiones en clases):
|
||||
|
||||
```typescript
|
||||
inq: {
|
||||
orange: {
|
||||
DEFAULT: '#F59845',
|
||||
dark: '#B45309',
|
||||
light: '#FEF3E2',
|
||||
lighter: '#FFF8ED',
|
||||
},
|
||||
magenta: '#ED3E8F',
|
||||
},
|
||||
heatmap: {
|
||||
low: '#10B981',
|
||||
mid: '#F59E0B',
|
||||
high: '#EF4444',
|
||||
}
|
||||
```
|
||||
|
||||
Permite uso natural:
|
||||
- `bg-inq-orange` (DEFAULT)
|
||||
- `bg-inq-orange-dark`
|
||||
- `bg-inq-orange-light`
|
||||
- `bg-inq-orange-lighter`
|
||||
- `bg-inq-magenta`
|
||||
- `bg-heatmap-low`
|
||||
|
||||
Colores semánticos:
|
||||
```typescript
|
||||
success: { DEFAULT: '#16A34A', light: '#F0FDF4' },
|
||||
warning: { DEFAULT: '#F59E0B', bg: '#FFFBEB' },
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Checklist final de Etapa 1
|
||||
|
||||
```
|
||||
[x] DESIGN_SYSTEM.md creado con sección de decisión sobre heatmap
|
||||
[x] tailwind.config.ts con tokens InQ anidados + tokens heatmap saturado
|
||||
[x] src/index.css con --primary naranja y variables InQ
|
||||
[x] HeatmapCanvas migrado a tokens heatmap.* (find-and-replace simple)
|
||||
[x] CLAUDE.md con sección "Reglas de marca" al inicio (prominente)
|
||||
[x] tests/design-system/tokens.test.ts con 3 tests verdes
|
||||
[x] tests/lib/format-payback.test.ts con 7 it.todo
|
||||
[x] sprints/sprint-1-5/etapa-1-audit.md con hallazgos (sin resolver)
|
||||
[x] TODO.md actualizado con nota de revisión de heatmap para Sprint 3-4
|
||||
[x] 440 tests previos + 3 nuevos = 443 verdes
|
||||
[x] npm run build limpio
|
||||
[x] npm run dev levanta sin errores
|
||||
[x] Verificación visual con dev server: screenshots de CTAs naranjas,
|
||||
tabs activos naranjas, switches checked naranjas
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Reporte de ejecución (resumen)
|
||||
|
||||
### Archivos modificados/creados
|
||||
|
||||
| Archivo | Acción | Líneas |
|
||||
|---|---|---|
|
||||
| `tailwind.config.js` | Modificado | +25 (tokens inq.*, heatmap.*, success, warning) |
|
||||
| `src/styles/globals.css` | Modificado | +22 (--primary naranja, variables --inq-*) |
|
||||
| `src/components/ui/tabs.tsx` | Modificado | 1 (text-inq-orange + font-semibold en activo) |
|
||||
| `CLAUDE.md` | Modificado | +42 (sección "Reglas de Marca" prominente) |
|
||||
| `TODO.md` | Modificado | +3 (entrada revisión heatmap Sprint 3-4) |
|
||||
| `DESIGN_SYSTEM.md` | Creado | 232 |
|
||||
| `sprints/sprint-1-5/etapa-1-audit.md` | Creado | 80 |
|
||||
| `tests/design-system/tokens.test.ts` | Creado | 37 (3 tests) |
|
||||
| `tests/lib/format-payback.test.ts` | Creado | 18 (7 it.todo) |
|
||||
| `tests/e2e/screenshots-etapa-1.spec.ts` | Creado | 60 |
|
||||
| `tests/screenshots/etapa-1/*.png` | Generados | 3 |
|
||||
|
||||
### Hallazgos del audit (9 azules + 12 hardcodes)
|
||||
|
||||
Categorizados por etapa de resolución:
|
||||
|
||||
- **Etapa 3 (charts web):** `CumulativeSavingsChart.tsx`, `TopSavingsChart.tsx`, `HeatmapLegend.tsx`, `chart-options.ts`
|
||||
- **Etapa 4-8 (PDFs):** `pdf-sections.ts`, `pdf-export.ts`, `pdf-sections-roi.ts` (`PDF.blue`)
|
||||
- **Etapa 9 (badge ⚡):** `BpmnCanvas.tsx`
|
||||
- **NO migrar (decisión arquitectónica):** `GatewayPanel.tsx` (azul = semántica funcional info banner)
|
||||
|
||||
### Validación visual confirmada
|
||||
|
||||
3 screenshots en `tests/screenshots/etapa-1/`:
|
||||
- `workspace.png` — botón Simular naranja, tab Actividad activo naranja, borde del nodo seleccionado naranja
|
||||
- `report-tabs.png` — tab Actual activo naranja, Exportar PDF naranja, KPI icons naranjas
|
||||
- `switch-on.png` — switch automatizable ON naranja, sección automatización con caja naranja, Guardar cambios naranja
|
||||
|
||||
El cambio de `--primary` de azul a naranja propagó correctamente a: Button, Switch, Tabs, Slider, Tooltip, Badge, rings de focus, bordes de selección en canvas BPMN.
|
||||
|
||||
### Descubrimientos no esperados
|
||||
|
||||
- `--primary-foreground` (210 40% 98%, blanco casi puro) funciona correctamente sobre el naranja sin modificación.
|
||||
- `--ring` también está en naranja, los focus rings de inputs y botones son coherentes con la marca.
|
||||
|
||||
### Tests finales
|
||||
|
||||
- 443 tests verdes (440 previos + 3 nuevos de tokens)
|
||||
- 7 `it.todo` listos para Etapa 2 (formatPayback)
|
||||
- Build limpio, sin warnings TS ni lint nuevos
|
||||
|
||||
---
|
||||
|
||||
## Aprobación final del usuario
|
||||
|
||||
Confirmada con observaciones que se trasladan a Etapa 2:
|
||||
|
||||
1. La fila de `GatewayPanel.tsx` en el audit se reclasifica de "Mantener azul funcional / Evaluar Sprint 2" a "Decisión arquitectónica: mantener azul informativo. No es marca, es semántica funcional."
|
||||
|
||||
2. El donut chart (`chart-options.ts:123`) tiene una decisión visual pendiente: sector "directo" en naranja InQ, sector "overhead" en slate-400 o naranja claro (no en otro naranja). Decisión final en Etapa 3.
|
||||
|
||||
3. Contraste WCAG del naranja `#F59845` sobre blanco: ratio ~2.42:1, FAIL para AA normal y AA large. Decisión propuesta para Etapa 3: aplicar `font-weight: 700` en CTAs primarios (opción D del análisis).
|
||||
|
||||
Estas 3 observaciones se incorporan en Etapa 2 como pre-tareas.
|
||||
|
||||
---
|
||||
|
||||
## Lecciones operativas capturadas
|
||||
|
||||
1. **Pattern de auditoría preventiva**: el grep de azules y hex residuales antes de mergear cambios de paleta previno que la migración a InQ quedara incompleta. Replicar este pattern en cualquier cambio de paleta futuro.
|
||||
|
||||
2. **Validación visual con screenshots Playwright**: más robusto que pedirle al usuario que capture manualmente. Los PNG quedan versionados en `tests/screenshots/etapa-*/` como evidencia de la etapa.
|
||||
|
||||
3. **Decisiones arquitectónicas vs decisiones de marca**: `GatewayPanel` enseñó que no todo color se debe alinear con la marca. El azul informativo es una convención semántica funcional que vale la pena preservar.
|
||||
|
||||
4. **El audit que clasifica por etapa de resolución** evita el "tendremos que migrar todo de golpe". Tokenizar primero, aplicar después en pequeños lotes.
|
||||
213
sprints/sprint-1-5/ETAPA_2_PROMPT.md
Normal file
213
sprints/sprint-1-5/ETAPA_2_PROMPT.md
Normal file
@@ -0,0 +1,213 @@
|
||||
GO — Etapa 2: Helper formatPayback + aplicación
|
||||
|
||||
Tu plan original tenía 7 it.todo listos. Esta etapa los convierte en
|
||||
tests reales, implementa el helper y lo aplica en 3 lugares.
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
PRE-TAREAS (actualizar artefactos de Etapa 1)
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
Antes de implementar formatPayback, hacé estas 3 actualizaciones rápidas:
|
||||
|
||||
1. Actualizar etapa-1-audit.md — fila de GatewayPanel.tsx:
|
||||
Cambiar la categoría de las 5 referencias blue-* de GatewayPanel de
|
||||
"Mantener azul funcional / Evaluar en Sprint 2" a:
|
||||
|
||||
"Decisión arquitectónica: mantener azul informativo. No es color
|
||||
de marca, es semántica funcional (info banner, valor inmutable,
|
||||
patrón Bootstrap/Tailwind estándar). NO migrar."
|
||||
|
||||
2. Actualizar etapa-1-audit.md — agregar fila al final de la sección
|
||||
"Hallazgos — Hex hardcodes" para el donut chart:
|
||||
|
||||
| chart-options.ts:123 | #3b82f6 → naranja | Composición directo/overhead
|
||||
| en donut. Decisión visual: el sector "directo" va en naranja InQ
|
||||
| #F59845. El sector "overhead" NO debe ser otro naranja (pierde
|
||||
| contraste) — usar slate-400 (#94A3B8) o naranja muy claro
|
||||
| (#FED7AA). Decisión final en Etapa 3 mirando el render. |
|
||||
|
||||
3. Verificar contraste WCAG de #F59845 sobre blanco. Ejecutá:
|
||||
|
||||
node -e "
|
||||
const hex = '#F59845';
|
||||
const r = parseInt(hex.slice(1,3), 16) / 255;
|
||||
const g = parseInt(hex.slice(3,5), 16) / 255;
|
||||
const b = parseInt(hex.slice(5,7), 16) / 255;
|
||||
const lin = (c) => c <= 0.03928 ? c/12.92 : Math.pow((c+0.055)/1.055, 2.4);
|
||||
const L1 = 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b);
|
||||
const L2 = 1;
|
||||
const ratio = (L2 + 0.05) / (L1 + 0.05);
|
||||
console.log('Contrast ratio:', ratio.toFixed(2), ':1');
|
||||
console.log('AA normal text (4.5):', ratio >= 4.5 ? 'PASS' : 'FAIL');
|
||||
console.log('AA large text (3.0):', ratio >= 3.0 ? 'PASS' : 'FAIL');
|
||||
"
|
||||
|
||||
Anotá el resultado en etapa-1-audit.md como nueva sección
|
||||
"Accesibilidad — Contraste de marca". Si el resultado es FAIL para
|
||||
AA normal, agregá las 4 opciones de remediación al audit:
|
||||
|
||||
A) Aceptar contraste sub-WCAG en CTAs (riesgo accesibilidad)
|
||||
B) Oscurecer naranja a #D97706 para CTAs (rompe marca parcialmente)
|
||||
C) Usar texto oscuro #451A03 en CTAs sobre naranja (cambia look)
|
||||
D) Forzar font-weight: 700 en CTAs primarios (cumple AA large)
|
||||
|
||||
Marcá la opción D como propuesta a implementar en Etapa 3 cuando
|
||||
rediseñemos KPI cards y CTAs. NO modificar componentes en esta etapa.
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
DECISIONES YA TOMADAS (no consultar de nuevo)
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
Confirmadas con el usuario:
|
||||
|
||||
Payback negativo → "Sin payback (costo aumenta)"
|
||||
(caso donde costo automatizado > costo actual, escenario
|
||||
matemáticamente posible pero indica error de configuración o
|
||||
automatización inviable)
|
||||
|
||||
Texto del formato → usar caracteres compactos "<" y "~"
|
||||
(universales y legibles en KPI cards)
|
||||
|
||||
Pluralización → siempre plural incluso con decimales
|
||||
("1.0 meses", no "1.0 mes")
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
TAREA PRINCIPAL — IMPLEMENTAR formatPayback
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
1. Implementar formatPayback en src/lib/format.ts:
|
||||
|
||||
function formatPayback(months: number): string {
|
||||
if (Number.isNaN(months) || !isFinite(months)) {
|
||||
return "No recupera en horizonte";
|
||||
}
|
||||
if (months < 0) {
|
||||
return "Sin payback (costo aumenta)";
|
||||
}
|
||||
if (months === 0) {
|
||||
return "Inmediato";
|
||||
}
|
||||
if (months < 0.1) {
|
||||
return "< 1 día";
|
||||
}
|
||||
if (months < 1) {
|
||||
return `< 1 mes (${months.toFixed(2)} meses)`;
|
||||
}
|
||||
if (months < 12) {
|
||||
return `${months.toFixed(1)} meses`;
|
||||
}
|
||||
if (months < 24) {
|
||||
const years = (months / 12).toFixed(1);
|
||||
return `${months.toFixed(1)} meses (~${years} años)`;
|
||||
}
|
||||
return `${(months / 12).toFixed(1)} años`;
|
||||
}
|
||||
|
||||
2. Convertir los 7 it.todo existentes en tests reales:
|
||||
|
||||
- formatPayback(0) === "Inmediato"
|
||||
- formatPayback(0.05) === "< 1 día"
|
||||
- formatPayback(0.5) === "< 1 mes (0.50 meses)"
|
||||
- formatPayback(6) === "6.0 meses"
|
||||
- formatPayback(15) === "15.0 meses (~1.3 años)"
|
||||
- formatPayback(30) === "2.5 años"
|
||||
- formatPayback(Infinity) === "No recupera en horizonte"
|
||||
|
||||
3. Agregar 5 tests de edge cases:
|
||||
|
||||
- formatPayback(-1) === "Sin payback (costo aumenta)"
|
||||
// payback negativo: costo automatizado supera al actual
|
||||
- formatPayback(-100) === "Sin payback (costo aumenta)"
|
||||
// negativo grande: mismo comportamiento
|
||||
- formatPayback(NaN) === "No recupera en horizonte"
|
||||
// NaN cae en el primer guard
|
||||
- formatPayback(11.95) === "11.9 meses"
|
||||
// verificar que el borde con 12 no salta a "1.0 años" prematuramente
|
||||
- formatPayback(12.0) === "12.0 meses (~1.0 años)"
|
||||
// exactamente en el umbral
|
||||
|
||||
Total: 12 tests verdes en tests/lib/format-payback.test.ts
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
APLICACIÓN EN 3 LUGARES
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
a) RoiKpiBar.tsx (web app):
|
||||
|
||||
- Reemplazar el formato actual del KPI "PAYBACK" por formatPayback(months)
|
||||
- El KPI card debe mostrar el string completo
|
||||
- PROBLEMA POTENCIAL: strings largos como "15.0 meses (~1.3 años)"
|
||||
pueden desbordar la card. Soluciones:
|
||||
- Opción 1: reducir font-size del valor a 14px en el card de payback
|
||||
(solo en ese card, no en los otros KPIs)
|
||||
- Opción 2: usar 2 líneas — primera línea cifra principal, segunda
|
||||
línea texto secundario en font-size menor
|
||||
|
||||
PROBÁ ambas y mostrame screenshot de cada una en Etapa 3. Por ahora
|
||||
implementá la opción 1 (más simple, mantiene grilla consistente).
|
||||
|
||||
b) src/lib/export/pdf-sections-roi.ts → drawRoiKpiCards:
|
||||
|
||||
- Aplicar formatPayback en la KPI card del PDF
|
||||
- Verificar ancho: el card actual mide ~120px en página A4. String
|
||||
"15.0 meses (~1.3 años)" en font 16px puede no entrar.
|
||||
Si es así, reducir font-size de esa card específica a 14px.
|
||||
- Probar con paybacks de distintos rangos: 0.5, 6, 15, 30 meses
|
||||
para ver el comportamiento.
|
||||
|
||||
c) src/lib/export/csv-export.ts:
|
||||
|
||||
- En la línea de metadata "# Payback (meses): X.XX" reemplazar el
|
||||
número crudo por formatPayback formateado
|
||||
- AGREGAR una segunda línea inmediatamente después:
|
||||
"# Payback (meses, raw): X.XXXX"
|
||||
Esto preserva compatibilidad con integraciones futuras de BI/Excel
|
||||
que necesiten el valor numérico crudo.
|
||||
|
||||
d) BONUS — verificar TransparencySection:
|
||||
|
||||
El detector de ROI inusual (Etapa 3 de Sprint 1) menciona payback en
|
||||
alguno de sus 4 casos. Verificá si el texto incluye payback formateado
|
||||
o crudo. Si es crudo, aplicar formatPayback también ahí.
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
ENTREGABLES
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
[ ] etapa-1-audit.md actualizado con 3 correcciones (GatewayPanel,
|
||||
donut chart, contraste WCAG)
|
||||
[ ] formatPayback implementado en src/lib/format.ts
|
||||
[ ] 12 tests verdes en tests/lib/format-payback.test.ts
|
||||
[ ] formatPayback aplicado en RoiKpiBar.tsx
|
||||
[ ] formatPayback aplicado en pdf-sections-roi.ts (drawRoiKpiCards)
|
||||
[ ] formatPayback aplicado en csv-export.ts (con doble línea: formateado
|
||||
+ raw para compatibilidad)
|
||||
[ ] TransparencySection verificado y actualizado si aplica
|
||||
[ ] 443 tests previos + 12 nuevos = 455+ tests verdes
|
||||
[ ] npm run build limpio
|
||||
[ ] Screenshot del RoiKpiBar mostrando un payback de 10.6 meses
|
||||
(caso del PDF roi-realistic)
|
||||
[ ] PDF de muestra generado con setup realista del brief:
|
||||
- medium-with-gateways
|
||||
- 3 automatizables, $200/$20 costos
|
||||
- 5000 ejecuciones/año, 3 años, USD 80.000 inversión
|
||||
- Resultado esperado: payback ~10.6 meses (NO "0.0 meses")
|
||||
→ guardar como tests/e2e/__output__/payback-formatted-sample.pdf
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
REPORTE FINAL A PRESENTAR
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
1. Resultado del cálculo de contraste WCAG (PASS/FAIL para AA normal
|
||||
y AA large)
|
||||
2. Confirmación de las 3 actualizaciones del audit
|
||||
3. Tabla de tests con resultados (12 verdes esperados)
|
||||
4. Screenshot del RoiKpiBar con payback formateado
|
||||
5. PDF de muestra presentado con present_files para que el usuario
|
||||
abra en Preview y valide visualmente
|
||||
6. Cantidad final de tests verdes
|
||||
7. Cualquier desbordamiento de UI/PDF detectado y cómo se resolvió
|
||||
|
||||
NO arranques Etapa 3 sin mi OK explícito.
|
||||
|
||||
Go.
|
||||
852
sprints/sprint-1-5/SPRINT_1_5_BRIEF_REDISENIO_VISUAL.md
Normal file
852
sprints/sprint-1-5/SPRINT_1_5_BRIEF_REDISENIO_VISUAL.md
Normal file
@@ -0,0 +1,852 @@
|
||||
# Sprint 1.5 — Brief de Rediseño Visual
|
||||
|
||||
> **Propósito:** rediseñar la identidad visual del producto (PDFs + Web App) con manual de marca InQ ROI antes del cierre de Sprint 1. No agrega nuevas features funcionales; refina presentación, identidad y polish.
|
||||
|
||||
> **Justificación:** los PDFs y la web app actuales son funcionales pero genéricos. El producto va a ser usado en pre-venta, talleres y charlas de InQuality, requiere identidad sólida desde el inicio. La iteración visual es 5–10× más barata ahora que después.
|
||||
|
||||
---
|
||||
|
||||
## 0. Contexto crítico
|
||||
|
||||
Este producto es **una herramienta de InQuality**, no un producto independiente. Se construye con identidad propia (color naranja InQ) pero parte de la familia visual de productos InQuality (junto con CONCILIA, que usa morado). Lleva la marca "Powered by InQuality" en footers.
|
||||
|
||||
**Regla NO NEGOCIABLE de marca:** la versión corta de InQuality SIEMPRE se escribe **InQ** — I mayúscula, n minúscula, Q mayúscula. Cualquier desviación (InQ, INQ, Inq, inQ) es bug.
|
||||
|
||||
---
|
||||
|
||||
## 1. Manual de marca InQ ROI
|
||||
|
||||
### 1.1 Paleta cromática
|
||||
|
||||
#### Color protagonista — Naranja InQ
|
||||
| Token CSS | Hex | Uso |
|
||||
|---|---|---|
|
||||
| `--inq-orange` | `#F59845` | Principal. Logo, KPIs hero, headers, CTAs primarios |
|
||||
| `--inq-orange-dark` | `#B45309` | Texto destacado sobre fondos claros, hover de CTAs |
|
||||
| `--inq-orange-light` | `#FEF3E2` | Fondos de KPI cards, fondos sutiles |
|
||||
| `--inq-orange-lighter` | `#FFF8ED` | Fondos de banner narrativo, hover states muy sutiles |
|
||||
|
||||
#### Gradiente hero (sólo para KPIs hero y banners principales)
|
||||
```css
|
||||
background: linear-gradient(135deg, #F59845 0%, #ED3E8F 100%);
|
||||
```
|
||||
|
||||
Donde `#ED3E8F` es el magenta InQ. Este gradiente representa la familia visual InQuality y se usa SOLO en:
|
||||
- KPI hero "Ahorro proyectado a 3 años" (PDF y web)
|
||||
- Carátulas o banners principales (si aparecen)
|
||||
- NUNCA en bordes, separadores, fondos secundarios
|
||||
|
||||
#### Colores semánticos
|
||||
| Token CSS | Hex | Uso |
|
||||
|---|---|---|
|
||||
| `--color-success` | `#16A34A` | Ahorros positivos, "óptimo" |
|
||||
| `--color-success-light` | `#F0FDF4` | Fondos de mensajes positivos |
|
||||
| `--color-warning` | `#F59E0B` | Advertencias, sección transparencia |
|
||||
| `--color-warning-bg` | `#FFFBEB` | Fondos de advertencia |
|
||||
| `--color-danger` | `#EF4444` | Costos altos, errores |
|
||||
| `--color-danger-light` | `#FEE2E2` | Fondos de heatmap (alto costo) |
|
||||
|
||||
#### Heatmap (gradient de costo)
|
||||
```css
|
||||
/* Bajo → Medio → Alto */
|
||||
background: linear-gradient(to right, #BBF7D0, #FED7AA, #FECACA);
|
||||
```
|
||||
|
||||
#### Neutrales (tipografía y bordes)
|
||||
| Token CSS | Hex | Uso |
|
||||
|---|---|---|
|
||||
| `--text-primary` | `#0F172A` | Títulos, números importantes |
|
||||
| `--text-secondary` | `#475569` | Texto del cuerpo |
|
||||
| `--text-tertiary` | `#64748B` | Labels, metadatos |
|
||||
| `--text-disabled` | `#94A3B8` | Placeholders, texto muy secundario |
|
||||
| `--border-primary` | `#E2E8F0` | Bordes generales |
|
||||
| `--border-light` | `#F1F5F9` | Separadores sutiles |
|
||||
| `--bg-app` | `#F8FAFC` | Fondo de la app |
|
||||
| `--bg-card` | `#FAFBFC` | Fondo de tarjetas secundarias |
|
||||
|
||||
### 1.2 Tipografía
|
||||
|
||||
#### Familia
|
||||
- **Primaria** (web app y PDFs): system-ui stack, con fallback a Roboto embebido en PDFs.
|
||||
```css
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
```
|
||||
- **Mono** (números en tablas, datos financieros): `'JetBrains Mono', 'SF Mono', Consolas, monospace`.
|
||||
|
||||
#### Jerarquía de tamaños (PDF)
|
||||
| Elemento | Tamaño | Peso | Tracking |
|
||||
|---|---|---|---|
|
||||
| Logo "InQ ROI" en header | 22px | 700 | -0.8px |
|
||||
| Título sección (página title) | 16px | 500 | normal |
|
||||
| KPI Hero (cifra grande) | 30px | 700 | -1px |
|
||||
| KPI secundario (cifra) | 16px | 700 | normal |
|
||||
| Body text | 11px | 400 | normal |
|
||||
| Labels en cards | 8px | 500 | 1px (uppercase) |
|
||||
| Tabla — header | 10px | 500 | normal |
|
||||
| Tabla — body | 10px | 400 | normal |
|
||||
| Footer | 9px | 400 | normal |
|
||||
|
||||
#### Jerarquía de tamaños (Web App)
|
||||
| Elemento | Tamaño |
|
||||
|---|---|
|
||||
| Logo header | 18px / 700 |
|
||||
| Page title | 16px / 500 |
|
||||
| KPI Hero | 28px / 700 |
|
||||
| KPI secundario | 16px / 700 |
|
||||
| Nav / Tabs | 12px / 400-500 |
|
||||
| Body | 12-13px / 400 |
|
||||
| Labels en panels | 10-11px / 400-500 |
|
||||
|
||||
### 1.3 Reglas de uso del logo "InQ ROI"
|
||||
|
||||
- **Tipografía:** sans-serif bold con tracking apretado (-0.5px a -0.8px)
|
||||
- **Color por defecto:** `#F59845`
|
||||
- **Color sobre gradiente o fondos oscuros:** blanco
|
||||
- **Posición en PDFs:** esquina superior derecha del header de cada página
|
||||
- **Posición en Web App:** esquina superior izquierda del topbar
|
||||
- **Mínimo aire alrededor:** 16px en todas direcciones
|
||||
- **Aclaración "Powered by InQuality":** SIEMPRE en footer, no en header
|
||||
|
||||
### 1.4 Iconografía
|
||||
|
||||
- **Sistema:** Lucide React (ya instalado)
|
||||
- **Tamaños estándar:** 12px, 14px, 16px, 20px, 24px
|
||||
- **Color por defecto:** hereda del contexto (`currentColor`)
|
||||
- **Ícono "Automatizable" (⚡):** símbolo emoji ⚡ por ahora. Cambiar a `<Bot />` de Lucide en Sprint 2-3 (anotar en TODO.md)
|
||||
- **Badge automatizable:** círculo `#F59845` con ⚡ blanco centrado, tamaño 14-22px según contexto
|
||||
|
||||
---
|
||||
|
||||
## 2. Sistema de diseño — Componentes clave
|
||||
|
||||
### 2.1 KPI Card (cifra grande)
|
||||
|
||||
```
|
||||
Fondo: #FEF3E2 (inq-orange-light)
|
||||
Padding: 10px 12px
|
||||
Border-radius: 6px
|
||||
Label: 8px / 500 / letter-spacing 1px / color #92400E / uppercase
|
||||
Cifra: 16px / 700 / color #0F172A
|
||||
Delta: 10px / 500 / color #B45309 (verde-orange-dark)
|
||||
```
|
||||
|
||||
### 2.2 KPI Hero (gradiente)
|
||||
|
||||
```
|
||||
Fondo: linear-gradient(135deg, #F59845 0%, #ED3E8F 100%)
|
||||
Padding: 16-18px
|
||||
Border-radius: 6-8px
|
||||
Label: 9-10px / opacity 0.9 / letter-spacing 1.2px / white
|
||||
Cifra: 28-30px / 700 / letter-spacing -1px / white
|
||||
Subtítulo: 10-11px / opacity 0.85 / white
|
||||
```
|
||||
|
||||
### 2.3 Banner narrativo (resumen ejecutivo)
|
||||
|
||||
```
|
||||
Fondo: #FFF8ED (inq-orange-lighter)
|
||||
Border-left: 3px solid #F59845
|
||||
Padding: 10-12px 14px
|
||||
Border-radius: 0 4px 4px 0
|
||||
Texto: 11px / 400 / line-height 1.55 / color #475569
|
||||
```
|
||||
|
||||
### 2.4 Sección Transparencia Metodológica
|
||||
|
||||
```
|
||||
Fondo: #FFFBEB (warning-bg)
|
||||
Border: 0.5px solid #F59E0B
|
||||
Padding: 12px 14px
|
||||
Border-radius: 6px
|
||||
Título: 11px / 500 / color #92400E (con ícono ⚠)
|
||||
Texto: 10px / 400 / line-height 1.6 / color #78350F
|
||||
```
|
||||
|
||||
### 2.5 Tabla comparativa
|
||||
|
||||
```
|
||||
Header row:
|
||||
Fondo: #FFF8ED
|
||||
Border-bottom: 1px solid #F59845
|
||||
Padding: 8px 6px
|
||||
Texto: 10px / 500 / color #92400E
|
||||
|
||||
Body row (default):
|
||||
Fondo: white
|
||||
Border-bottom: 0.5px solid #E2E8F0
|
||||
Padding: 8px 6px
|
||||
Texto: 10px / 400 / color #0F172A
|
||||
Números: font-family mono
|
||||
|
||||
Body row (no automatizable):
|
||||
Fondo: #F8FAFC
|
||||
Texto: color #64748B (más tenue)
|
||||
|
||||
Total row:
|
||||
Fondo: #FFF8ED
|
||||
Border-top: 1.5px solid #F59845
|
||||
Texto: 10px / 500 / color #0F172A
|
||||
```
|
||||
|
||||
### 2.6 Header de página PDF
|
||||
|
||||
```
|
||||
Layout: flex justify-between
|
||||
Border-bottom: 3px solid #F59845 (página 1) / 2px (otras páginas)
|
||||
Padding-bottom: 10-12px
|
||||
Margin-bottom: 14-16px
|
||||
|
||||
Izquierda:
|
||||
Logo "InQ ROI": 18-22px / 700 / #F59845
|
||||
Tagline (página 1): 9px / letter-spacing 1.5px / #94A3B8
|
||||
|
||||
Derecha:
|
||||
Label "UN PRODUCTO DE": 9px / letter-spacing 1px / #94A3B8
|
||||
"InQ": 16px / 700 / #475569
|
||||
"InQuality": 9px / #64748B
|
||||
```
|
||||
|
||||
### 2.7 Footer de página PDF
|
||||
|
||||
```
|
||||
Position: absolute bottom 14-16px
|
||||
Padding-top: 6-8px
|
||||
Border-top: 0.5px solid #E2E8F0
|
||||
Layout: flex justify-between
|
||||
Font: 9px / 400 / #94A3B8
|
||||
|
||||
Izquierda:
|
||||
"InQ ROI" en bold #F59845
|
||||
" · Powered by InQuality · "
|
||||
Nombre cliente · fecha
|
||||
|
||||
Derecha:
|
||||
"Página X de Y"
|
||||
```
|
||||
|
||||
### 2.8 Badge "Automatizable" (⚡)
|
||||
|
||||
#### En canvas BPMN (overlay)
|
||||
```
|
||||
Tamaño: 14px diameter
|
||||
Fondo: #F59845
|
||||
Border: 1.5px solid white
|
||||
Posición: top: -8, left: nodeWidth - 12 (ver Etapa 2 - cambio de bpmn-js right)
|
||||
Símbolo ⚡: white, 8px, font-weight 700
|
||||
```
|
||||
|
||||
#### En tabla
|
||||
```
|
||||
Tamaño: 14px diameter inline
|
||||
Fondo: #F59845
|
||||
Color: white
|
||||
```
|
||||
|
||||
#### En leyenda
|
||||
```
|
||||
Tamaño: 14px diameter
|
||||
Mismo estilo que en tabla
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Rediseño de PDFs
|
||||
|
||||
### 3.1 Decisión arquitectónica: orientación híbrida
|
||||
|
||||
Los PDFs con diagrama BPMN tendrán **layout híbrido portrait + landscape**:
|
||||
|
||||
- **Páginas SIN diagrama:** vertical A4 (portrait)
|
||||
- **Página DEL diagrama BPMN:** horizontal A4 (landscape) — para que el diagrama tenga espacio real
|
||||
|
||||
Esto es bloqueante: jsPDF soporta página por página con orientación individual. Implementar usando `doc.addPage([width, height], 'landscape')` para la página del diagrama.
|
||||
|
||||
### 3.2 PDF de Comparación + ROI (4 páginas)
|
||||
|
||||
#### Página 1 — Resumen ejecutivo (vertical)
|
||||
|
||||
Reemplaza la carátula. Header denso que incluye toda la metadata.
|
||||
|
||||
```
|
||||
Header (con border-bottom 3px solid #F59845):
|
||||
- Logo InQ ROI a la izquierda
|
||||
- "UN PRODUCTO DE / InQ / InQuality" a la derecha
|
||||
|
||||
Strip de metadata (grid 2fr 1fr 1fr en fondo #FAFBFC):
|
||||
- Proceso: Originación de créditos personales
|
||||
- Cliente: Banco Atlántico S.A.
|
||||
- Fecha: 15 mayo 2026
|
||||
|
||||
Banner narrativo (#FFF8ED con border-left naranja):
|
||||
Resumen ejecutivo: Automatización de N actividades sobre proceso de M etapas.
|
||||
Frecuencia X/año, horizonte Y años, inversión USD Z.
|
||||
|
||||
KPI Hero (gradiente naranja → magenta):
|
||||
AHORRO PROYECTADO A 3 AÑOS
|
||||
USD 192.400 — neto de inversión
|
||||
Recuperás 2,4× la inversión en el período
|
||||
|
||||
KPIs secundarios (grid 2x2):
|
||||
- AHORRO POR EJECUCIÓN: USD 18,16 — ↓ 38%
|
||||
- AHORRO ANUAL: USD 90.800
|
||||
- PAYBACK: 10,6 meses
|
||||
- ROI ANUAL: 114%
|
||||
|
||||
Top 3 ahorros (caja con border #E2E8F0):
|
||||
Header: "[3] Top actividades con mayor ahorro"
|
||||
3 barras horizontales con %, monto, label
|
||||
|
||||
Trayectoria del ahorro (caja con border #E2E8F0):
|
||||
Gráfico SVG nativo en jsPDF con:
|
||||
- Área negativa (antes del payback) en #FEE2E2
|
||||
- Área positiva (después) en #FED7AA
|
||||
- Línea principal #F59845
|
||||
- Marker vertical en mes de payback
|
||||
- Labels eje X: 0 / Año 1 / Año 2 / Año 3
|
||||
- Valor final en esquina superior derecha
|
||||
IMPORTANTE: dibujado con jsPDF nativo, NO captura html2canvas
|
||||
(los charts ECharts en imagen quedan borrosos, lo verificamos en MVP)
|
||||
|
||||
Footer (absolute bottom):
|
||||
"InQ ROI · Powered by InQuality · Banco Atlántico · 15 may 2026"
|
||||
"Página 1 de 4"
|
||||
```
|
||||
|
||||
#### Página 2 — Diagrama BPMN (horizontal)
|
||||
|
||||
```
|
||||
Orientación: landscape A4
|
||||
|
||||
Header (border-bottom 2px solid #F59845):
|
||||
- Logo InQ ROI + título "MAPA DE CALOR · ESCENARIO ACTUAL"
|
||||
- "Originación de créditos personales"
|
||||
- Costo total a la derecha
|
||||
|
||||
Canvas del diagrama:
|
||||
- Background #FAFBFC
|
||||
- Border 0.5px #E2E8F0
|
||||
- Border-radius 6px
|
||||
- Padding 18px
|
||||
- Altura ~400px (toma casi toda la página)
|
||||
- El diagrama BPMN ocupa TODO el ancho disponible
|
||||
- Embebido como JPEG vía html2canvas
|
||||
- Badge ⚡ #F59845 sobre los nodos automatizables
|
||||
|
||||
Leyenda al pie:
|
||||
- Heatmap gradient: bajo → alto
|
||||
- Badge ⚡: marcado como automatizable
|
||||
|
||||
Footer (modificado para landscape):
|
||||
Mismo formato pero ajustado al ancho horizontal
|
||||
```
|
||||
|
||||
#### Página 3 — Comparación por actividad (vertical)
|
||||
|
||||
```
|
||||
Header:
|
||||
- Logo InQ ROI
|
||||
- "COMPARACIÓN ACTIVIDAD POR ACTIVIDAD"
|
||||
- "Detalle de costos: actual vs. automatizado"
|
||||
|
||||
Texto introductorio:
|
||||
"Las actividades marcadas con [⚡] son candidatas a automatización..."
|
||||
|
||||
Tabla autotable (jsPDF-autotable):
|
||||
Columnas: Actividad | Costo actual | Costo auto. | Ahorro | % | Prob.
|
||||
Header con fondo #FFF8ED y border-bottom #F59845
|
||||
Filas automatizables: fondo blanco
|
||||
Filas no-automatizables: fondo #F8FAFC, texto #64748B
|
||||
Total row: fondo #FFF8ED, border-top 1.5px #F59845
|
||||
|
||||
Nota:
|
||||
"Tabla muestra X de Y actividades..."
|
||||
|
||||
Footer estándar
|
||||
```
|
||||
|
||||
#### Página 4 — Análisis y metodología (vertical)
|
||||
|
||||
```
|
||||
Header:
|
||||
"CONTEXTO DEL ANÁLISIS"
|
||||
"Composición del ahorro y metodología"
|
||||
|
||||
Sección: Origen del ahorro
|
||||
Texto: "El N% del ahorro proyectado proviene de la automatización de..."
|
||||
3 barras horizontales con el desglose
|
||||
|
||||
Sección: Metodología de cálculo
|
||||
Caja gris (#F8FAFC):
|
||||
- Costo por ejecución (fórmula)
|
||||
- Ahorro anual (fórmula)
|
||||
- Payback (fórmula)
|
||||
- ROI anualizado (fórmula)
|
||||
|
||||
Sección: Supuestos del análisis
|
||||
Caja ámbar (warning):
|
||||
Texto sobre limitaciones y supuestos
|
||||
|
||||
Sección: Transparencia metodológica (CONDICIONAL)
|
||||
Solo si TransparencySection detecta casos (los 4 ya implementados):
|
||||
- Caso 1: actividades automatizables con costo cero
|
||||
- Caso 2: inversión cero
|
||||
- Caso 3: ROI > 1000%
|
||||
- Caso 4: payback < 1 mes con inversión 0
|
||||
Mismo estilo de caja ámbar
|
||||
|
||||
Sección: Próximos pasos sugeridos (opcional, hardcoded por ahora)
|
||||
3-4 puntos de validación recomendada
|
||||
|
||||
Footer estándar
|
||||
```
|
||||
|
||||
### 3.3 PDFs de Actual y Automatizado (3 páginas cada uno)
|
||||
|
||||
Los PDFs por escenario individual mantienen estructura similar pero adaptada:
|
||||
|
||||
```
|
||||
Página 1 (vertical):
|
||||
Header
|
||||
Strip de metadata
|
||||
KPIs principales (Costo total, Costo directo/Overhead, Tiempo, Actividades)
|
||||
Top 3 actividades por costo
|
||||
Footer
|
||||
|
||||
Página 2 (horizontal):
|
||||
Diagrama BPMN con heatmap embebido
|
||||
Leyenda
|
||||
|
||||
Página 3 (vertical):
|
||||
Tabla de costos por actividad
|
||||
Nota metodológica
|
||||
Footer
|
||||
```
|
||||
|
||||
### 3.4 Formato de Payback (regla global)
|
||||
|
||||
Implementar en un helper compartido entre web y PDF:
|
||||
|
||||
```typescript
|
||||
function formatPayback(months: number): string {
|
||||
if (!isFinite(months)) return "No recupera en horizonte";
|
||||
if (months === 0) return "Inmediato";
|
||||
if (months < 0.1) return "< 1 día";
|
||||
if (months < 1) return `< 1 mes (${months.toFixed(2)} meses)`;
|
||||
if (months < 12) return `${months.toFixed(1)} meses`;
|
||||
if (months < 24) {
|
||||
const years = (months / 12).toFixed(1);
|
||||
return `${months.toFixed(1)} meses (~${years} años)`;
|
||||
}
|
||||
return `${(months / 12).toFixed(1)} años`;
|
||||
}
|
||||
```
|
||||
|
||||
Tests:
|
||||
- 0 → "Inmediato"
|
||||
- 0.05 → "< 1 día"
|
||||
- 0.5 → "< 1 mes (0.50 meses)"
|
||||
- 6 → "6.0 meses"
|
||||
- 15 → "15.0 meses (~1.3 años)"
|
||||
- 30 → "2.5 años"
|
||||
- Infinity → "No recupera en horizonte"
|
||||
|
||||
---
|
||||
|
||||
## 4. Rediseño Web App
|
||||
|
||||
### 4.1 Topbar global
|
||||
|
||||
```
|
||||
Background: white
|
||||
Border-bottom: 1px solid #E2E8F0
|
||||
Padding: 12px 20px
|
||||
Layout: flex justify-between
|
||||
|
||||
Izquierda:
|
||||
Logo "InQ ROI" 18px / 700 / #F59845
|
||||
Spacer 24px
|
||||
Nav links:
|
||||
- Workspace (activo: fondo #FFF8ED, texto #F59845, font-weight 500)
|
||||
- Reporte
|
||||
- Recursos
|
||||
Cada link: padding 6px 12px, border-radius 4px
|
||||
|
||||
Derecha:
|
||||
Botón secundario "Exportar PDF" (white, border #E2E8F0)
|
||||
Botón primario "Simular →" (background #F59845, color white)
|
||||
```
|
||||
|
||||
### 4.2 Workspace (BpmnCanvas + ActivityPanel)
|
||||
|
||||
```
|
||||
Layout: flex, height calc(100vh - topbar)
|
||||
|
||||
Canvas izquierdo (flex 1):
|
||||
Background: #FAFBFC
|
||||
Padding: 20px
|
||||
Border-right: 1px solid #E2E8F0
|
||||
|
||||
Diagrama BPMN:
|
||||
- Estilos por defecto de bpmn-js
|
||||
- Actividad seleccionada: fondo #FFF8ED, border 2px #F59845
|
||||
- Badges ⚡ en automatizables: círculo #F59845, ⚡ blanco
|
||||
- Posición badge: top: -8, left: width - 12
|
||||
|
||||
Leyenda flotante (bottom-left):
|
||||
Background white, border 0.5px #E2E8F0, radius 6px
|
||||
Padding 8px 12px
|
||||
Contenido: "N actividades automatizables" con icono
|
||||
|
||||
Panel derecho (width 280-320px):
|
||||
Background: white
|
||||
Padding: 16px 18px
|
||||
Overflow: auto
|
||||
|
||||
Header del panel:
|
||||
Badge ⚡ + nombre actividad + "Actividad seleccionada"
|
||||
Border-bottom 1px #E2E8F0
|
||||
Padding-bottom 12px
|
||||
|
||||
Sección "COSTO ACTUAL":
|
||||
Label 10px / 500 / letter-spacing 1px / #94A3B8
|
||||
Inputs: border #E2E8F0, padding 6px 10px, bg #F8FAFC
|
||||
|
||||
Sección "AUTOMATIZACIÓN" (caja destacada):
|
||||
Background: #FFF8ED
|
||||
Border: 1px solid #F59845
|
||||
Padding: 12px
|
||||
Border-radius: 6px
|
||||
|
||||
Header con título y switch:
|
||||
"AUTOMATIZACIÓN" 11px / 500 / #92400E
|
||||
Switch: 30x16px, background #F59845 cuando ON
|
||||
|
||||
Inputs:
|
||||
border #F59845, background white, color #0F172A
|
||||
|
||||
Helper de ahorro estimado (cuando aplica):
|
||||
Background: #F0FDF4
|
||||
Border-left: 2px solid #16A34A
|
||||
Padding: 8px 10px
|
||||
Texto: 10px / color #15803D
|
||||
Texto: "Ahorro estimado: USD X por ejecución (Y%)"
|
||||
```
|
||||
|
||||
### 4.3 Reporte ROI (tab Comparación + ROI)
|
||||
|
||||
```
|
||||
Page header:
|
||||
Título "Nombre del proceso"
|
||||
Subtítulo "Cliente · Simulado el ..."
|
||||
|
||||
Tabs:
|
||||
3 tabs horizontales con border-bottom-color en activo
|
||||
Activo: border-bottom 2px #F59845, texto #F59845 / 500
|
||||
Inactivo: texto #64748B
|
||||
|
||||
Contenido tab "Comparación + ROI":
|
||||
|
||||
KPI Hero:
|
||||
Mismo estilo que PDF — gradient naranja → magenta
|
||||
Margin-bottom 12px
|
||||
|
||||
KPIs secundarios (grid 4 columnas):
|
||||
Mismo estilo que PDF
|
||||
Gap 8px
|
||||
|
||||
Gráficos (grid 2 columnas):
|
||||
Trayectoria del ahorro: chart con líneas y marker
|
||||
Top 3 ahorros: barras horizontales
|
||||
|
||||
Tabla comparativa completa abajo:
|
||||
Misma estructura que PDF Pág. 3
|
||||
Sortable por columna ahorro (mantener funcionalidad existente)
|
||||
|
||||
Sección Transparencia (condicional):
|
||||
Misma estructura que PDF, banner ámbar
|
||||
```
|
||||
|
||||
### 4.4 Componentes shadcn a personalizar
|
||||
|
||||
Los componentes shadcn que ya existen necesitan tema con los tokens nuevos:
|
||||
|
||||
- `Button` variant "default" → fondo `#F59845`, hover `#B45309`
|
||||
- `Button` variant "secondary" → border `#E2E8F0`, hover bg `#F8FAFC`
|
||||
- `Tabs` → active state con color naranja en lugar de azul
|
||||
- `Switch` → naranja cuando checked
|
||||
- `Badge` → variantes "automatable" con fondo naranja
|
||||
|
||||
---
|
||||
|
||||
## 5. Cambios funcionales asociados
|
||||
|
||||
### 5.1 Helper `formatPayback`
|
||||
|
||||
Crear en `src/lib/format.ts` (o donde ya estén los formatters de moneda).
|
||||
|
||||
Tests obligatorios — ver sección 3.4.
|
||||
|
||||
Aplicar en:
|
||||
- `RoiKpiBar.tsx` (web)
|
||||
- `pdf-sections-roi.ts → drawRoiKpiCards`
|
||||
- `csv-export.ts` línea de metadata
|
||||
|
||||
### 5.2 Detector de ROI inusual ya implementado en Etapa 3
|
||||
|
||||
Verificar que la sección Transparencia se renderiza correctamente en el PDF (Sprint 1 Etapa 4 tuvo PDF de 36KB que era anómalo — revisar que ahora con el rediseño tenga densidad razonable).
|
||||
|
||||
### 5.3 Overlay badge en BpmnCanvas
|
||||
|
||||
El badge ⚡ ya está implementado. Cambios visuales:
|
||||
- Fondo de blanco a `#F59845` (más prominente)
|
||||
- ⚡ blanco en lugar de ámbar
|
||||
- Posición: cambiar de `{ top: -8, right: -8 }` a `{ top: -8, left: elementWidth - 12 }` para no depender del soporte de `right` en bpmn-js v18 (ya identificamos este riesgo en checkpoint anterior)
|
||||
|
||||
### 5.4 Carátula del PDF — eliminar
|
||||
|
||||
El PDF anterior tenía una carátula con gradient grande. Reemplazar por header denso en página 1 (ver sección 3.2 — Página 1).
|
||||
|
||||
---
|
||||
|
||||
## 6. Validación E2E
|
||||
|
||||
### 6.1 Archivos a generar
|
||||
|
||||
Para validar el rediseño, generar los siguientes archivos en `tests/e2e/__output__/`:
|
||||
|
||||
**Setup A: medium-with-gateways realista**
|
||||
- 3 actividades automatizables (`task_recv`, `task_score`, `task_analisis`)
|
||||
- Costos directos: $200/actividad
|
||||
- Costos automatizados: $20/actividad
|
||||
- Frecuencia anual: 5.000
|
||||
- Horizonte: 3 años
|
||||
- Inversión: USD 80.000
|
||||
|
||||
Generar:
|
||||
- `medium-gw_actual_v2.pdf`
|
||||
- `medium-gw_automatizado_v2.pdf`
|
||||
- `medium-gw_roi_v2.pdf`
|
||||
|
||||
**Setup B: medium-with-gateways con ROI inusual**
|
||||
- Mismas actividades automatizables
|
||||
- Costos automatizados: $1 (para forzar ROI > 1000%)
|
||||
- Frecuencia anual: 12.000
|
||||
- Inversión: USD 10.000
|
||||
|
||||
Generar:
|
||||
- `medium-gw_roi_inusual_v2.pdf` — debe mostrar Transparencia Metodológica con aviso de ROI inusual
|
||||
|
||||
**Setup C: payback en distintos rangos**
|
||||
- `payback_inmediato.pdf` — inversión = 0
|
||||
- `payback_corto.pdf` — payback de 0.5 meses
|
||||
- `payback_normal.pdf` — payback de 10 meses
|
||||
- `payback_largo.pdf` — payback de 30 meses
|
||||
|
||||
Generar:
|
||||
- `payback_formats.pdf` — uno solo con los 4 casos para verificar el formato visual
|
||||
|
||||
### 6.2 Métricas que Claude Code DEBE reportar
|
||||
|
||||
Tabla de validación:
|
||||
|
||||
```
|
||||
┌────────────────────────────┬──────────┬──────────┬───────────────────┐
|
||||
│ Archivo │ Tamaño │ Páginas │ Validación visual │
|
||||
├────────────────────────────┼──────────┼──────────┼───────────────────┤
|
||||
│ medium-gw_actual_v2.pdf │ XX KB │ 3 │ ✓ / ✗ │
|
||||
│ medium-gw_automatizado_v2 │ XX KB │ 3 │ ✓ / ✗ │
|
||||
│ medium-gw_roi_v2.pdf │ XX KB │ 4 │ ✓ / ✗ │
|
||||
│ medium-gw_roi_inusual_v2 │ XX KB │ 4 │ ✓ / ✗ │
|
||||
└────────────────────────────┴──────────┴──────────┴───────────────────┘
|
||||
```
|
||||
|
||||
**Tamaño esperado por página: 25-50 KB.** Páginas con diagrama BPMN embebido pueden llegar a 60 KB. Si alguna página queda en < 15 KB es señal de que algo no se renderizó.
|
||||
|
||||
Análisis de píxeles del heatmap embebido (igual que MVP):
|
||||
- Detectar verde, amarillo y rojo en la página del diagrama
|
||||
- Verificar que el badge ⚡ naranja `#F59845` está presente (al menos un pixel naranja sobre el diagrama)
|
||||
|
||||
Text extraction con pdf-parse para verificar palabras clave:
|
||||
- `_actual.pdf`: "Costo total esperado", "Análisis de procesos"
|
||||
- `_automatizado.pdf`: "Costo total", "actividades no automatizables"
|
||||
- `_roi.pdf`: "Análisis de retorno", "Ahorro anual", "Payback", "ROI"
|
||||
- `_roi_inusual.pdf`: TODO lo anterior + "ROI inusualmente alto detectado"
|
||||
|
||||
Verificación de marca:
|
||||
- En cada PDF, buscar texto exacto "InQ" (con I-n-Q correctos)
|
||||
- Verificar que NO aparece "INQ", "Inq", "inq" en ningún PDF
|
||||
- Verificar "Powered by InQuality" en cada footer
|
||||
|
||||
### 6.3 Validación visual obligatoria por el usuario
|
||||
|
||||
Después de generar los archivos, presentarlos vía `present_files` para que el usuario abra los PDFs en Preview y valide:
|
||||
|
||||
1. ¿Los KPIs se ven como cards prominentes con el gradiente naranja → magenta?
|
||||
2. ¿El diagrama BPMN se ve grande y legible en la página horizontal?
|
||||
3. ¿El formato de payback es claro ("10.6 meses" vs "0.0 meses")?
|
||||
4. ¿La sección Transparencia metodológica aparece cuando corresponde?
|
||||
5. ¿"InQ ROI" y "Powered by InQuality" se ven correctos en headers/footers?
|
||||
6. ¿La densidad de información es adecuada (no hay páginas semivacías)?
|
||||
|
||||
---
|
||||
|
||||
## 7. Definition of Done
|
||||
|
||||
- [ ] Manual de marca aplicado: paleta naranja InQ, tipografía consistente, "InQ" siempre I-n-Q
|
||||
- [ ] PDF de Comparación + ROI con layout híbrido (vertical + horizontal + vertical + vertical)
|
||||
- [ ] PDF de Actual y Automatizado con layout híbrido (vertical + horizontal + vertical)
|
||||
- [ ] Página 1 de cada PDF SIN carátula, con header denso que incluye metadata
|
||||
- [ ] KPI Hero con gradiente naranja → magenta en PDF y Web
|
||||
- [ ] Top 3 ahorros visible en página 1 del PDF ROI
|
||||
- [ ] Tabla comparativa con paleta naranja consistente
|
||||
- [ ] Footer real al pie de página (no a mitad)
|
||||
- [ ] Helper `formatPayback` implementado y aplicado en UI, PDF y CSV
|
||||
- [ ] Badge ⚡ en BpmnCanvas con fondo naranja sólido `#F59845`
|
||||
- [ ] Posición del badge cambiada a `{ top, left }` (no `right`) — robusto a bpmn-js v18
|
||||
- [ ] Web app con identidad: topbar con logo, CTAs naranjas, tabs con color de marca
|
||||
- [ ] Panel de Automatización en ActivityPanel con caja naranja destacada
|
||||
- [ ] 7 archivos de validación generados en `tests/e2e/__output__/`
|
||||
- [ ] Análisis de píxeles confirma badge naranja + heatmap completo
|
||||
- [ ] Verificación textual confirma "InQ" correcto en todos los PDFs
|
||||
- [ ] `present_files` ejecutado para que el usuario abra los PDFs
|
||||
- [ ] 440 tests previos siguen verdes
|
||||
- [ ] Nuevos tests de `formatPayback` (≥10 casos)
|
||||
- [ ] Build limpio, lint limpio
|
||||
- [ ] CHANGELOG.md actualizado con sección "Sprint 1.5 — Rediseño visual"
|
||||
- [ ] DESIGN_SYSTEM.md creado con paleta, tipografía y componentes (referencia para Sprint 2+)
|
||||
|
||||
---
|
||||
|
||||
## 8. Lo que NO entra en Sprint 1.5
|
||||
|
||||
- Refinamiento del ícono ⚡ a Bot de Lucide (Sprint 2-3)
|
||||
- Nueva entidad `ProcessOverheadCost` para multas/penalidades (Sprint 2-3)
|
||||
- Branding completo con logo SVG de InQuality embebido (Sprint 3-4)
|
||||
- Excel multi-hoja con identidad (Sprint 3-4)
|
||||
- Carátula opcional vía toggle de export (no se necesita por ahora — decidimos no usarla)
|
||||
- Animaciones avanzadas en web app (Sprint 4+)
|
||||
- Modo oscuro (Sprint 4+)
|
||||
|
||||
---
|
||||
|
||||
## 9. Cambios en archivos clave
|
||||
|
||||
### Nuevos
|
||||
- `src/lib/format.ts` (o extender el existente) — `formatPayback`
|
||||
- `DESIGN_SYSTEM.md` — referencia visual del sistema
|
||||
- `src/lib/export/pdf-sections-shared.ts` — header y footer reutilizables
|
||||
- `tests/lib/format-payback.test.ts` — tests del helper
|
||||
|
||||
### Modificados
|
||||
- `src/lib/export/pdf-export.ts` — soportar orientación landscape en una página
|
||||
- `src/lib/export/pdf-sections.ts` — aplicar nuevo manual de marca
|
||||
- `src/lib/export/pdf-sections-roi.ts` — rediseño completo del PDF ROI
|
||||
- `src/features/workspace/BpmnCanvas.tsx` — badge ⚡ naranja + posición
|
||||
- `src/features/workspace/ActivityPanel.tsx` — sección Automatización con caja naranja
|
||||
- `src/features/report/RoiKpiBar.tsx` — KPI Hero gradiente + secundarios paleta
|
||||
- `src/features/report/ComparisonTable.tsx` — paleta naranja
|
||||
- `src/features/report/TransparencySection.tsx` — verificar render correcto
|
||||
- `src/components/ui/*` — tokens naranja en components shadcn (button, tabs, switch)
|
||||
- `tailwind.config.ts` — extender paleta con tokens InQ
|
||||
- `index.css` — definir variables CSS
|
||||
|
||||
### En CLAUDE.md, agregar regla crítica
|
||||
```
|
||||
## Reglas de marca (NO NEGOCIABLES)
|
||||
|
||||
1. La versión corta de InQuality SIEMPRE se escribe "InQ":
|
||||
- I mayúscula
|
||||
- n minúscula
|
||||
- Q mayúscula
|
||||
- Cualquier otra forma (INQ, Inq, inq, inQ) es bug
|
||||
|
||||
2. El producto se llama "InQ ROI" en este Sprint. Es nombre de trabajo,
|
||||
se reemplazará en Sprint 3-4. No debatir el nombre ahora.
|
||||
|
||||
3. Color protagonista: naranja InQ #F59845.
|
||||
Gradiente identidad: #F59845 → #ED3E8F (naranja → magenta).
|
||||
No usar morado de CONCILIA (#572FA2, #CB1889) en este producto.
|
||||
|
||||
4. Tagline obligatorio en footers de PDF: "Powered by InQuality".
|
||||
|
||||
5. No promover a Marcos como creador del producto. Si aparece nombre del
|
||||
consultor en algún campo, es como "consultor responsable", no como
|
||||
"creador" o "founder".
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. Orden sugerido de implementación
|
||||
|
||||
Para que sea incremental y validable en cada paso:
|
||||
|
||||
1. **Setup del sistema de diseño**
|
||||
- Crear `DESIGN_SYSTEM.md`
|
||||
- Extender `tailwind.config.ts` con tokens InQ
|
||||
- Definir variables CSS en `index.css`
|
||||
- Personalizar componentes shadcn (button, tabs, switch)
|
||||
|
||||
2. **Helper de formato + tests**
|
||||
- Implementar `formatPayback` con 10 tests
|
||||
- Aplicar en `RoiKpiBar` (web)
|
||||
|
||||
3. **Web App: workspace + reporte**
|
||||
- Topbar con logo InQ ROI
|
||||
- ActivityPanel con sección Automatización naranja
|
||||
- Reporte con KPI Hero gradiente y secundarios paleta
|
||||
- Validación visual con usuario
|
||||
|
||||
4. **PDF: header y footer compartidos**
|
||||
- Crear `pdf-sections-shared.ts`
|
||||
- Refactorizar PDFs existentes para usar header/footer comunes
|
||||
- Aplicar paleta InQ
|
||||
|
||||
5. **PDF: layout híbrido (vertical + horizontal)**
|
||||
- Modificar `pdf-export.ts` para soportar landscape en página específica
|
||||
- Implementar página del diagrama horizontal
|
||||
- Generar primer PDF de validación
|
||||
|
||||
6. **PDF: rediseño completo de página 1 ROI**
|
||||
- Header denso sin carátula
|
||||
- KPI Hero, secundarios, top 3, gráfico de trayectoria
|
||||
- Aplicar `formatPayback`
|
||||
- Generar segundo PDF de validación
|
||||
|
||||
7. **PDF: páginas 3 y 4 ROI**
|
||||
- Tabla comparativa con paleta
|
||||
- Análisis textual con secciones
|
||||
- Sección Transparencia condicional
|
||||
- Generar tercer PDF de validación
|
||||
|
||||
8. **PDFs de Actual y Automatizado**
|
||||
- Aplicar mismo sistema
|
||||
- Verificar consistencia visual
|
||||
|
||||
9. **Badge ⚡ en BpmnCanvas**
|
||||
- Color naranja sólido
|
||||
- Posición robusta (top + left)
|
||||
- Test del overlay
|
||||
|
||||
10. **Validación E2E final**
|
||||
- Generar los 7 archivos especificados
|
||||
- Análisis de píxeles, text extraction
|
||||
- `present_files` para validación visual del usuario
|
||||
|
||||
11. **Documentación**
|
||||
- CHANGELOG.md
|
||||
- Actualizar CLAUDE.md con reglas de marca
|
||||
- Tag de release v0.2.0-sprint1-visual
|
||||
|
||||
---
|
||||
|
||||
## Notas finales para Claude Code
|
||||
|
||||
- Este es un sprint de POLISH, no de features. Si encontrás algo que requiere cambios arquitectónicos importantes (más de 1 hora), PARÁ y consultá con el usuario antes de proceder.
|
||||
|
||||
- La validación visual final la hace el usuario abriendo los PDFs en Preview de Mac. Tu trabajo NO es solo generar archivos — es generar archivos QUE SE VEAN COMO EL MOCKUP MUESTRA. No declares la etapa terminada sin haber verificado tamaño, páginas, análisis de píxeles del heatmap, y palabras clave del texto extraído.
|
||||
|
||||
- Cada PDF generado pasa por `present_files` para que el usuario lo abra. NO te conformes con "los tests pasaron".
|
||||
|
||||
- Si en algún momento de la implementación descubrís que el mockup tiene una inconsistencia o un detalle no especificado, hacé las preguntas explícitamente antes de inventar la respuesta.
|
||||
|
||||
- El usuario ha sido riguroso pidiendo validación honesta. Mantené ese estándar: reportá lo que efectivamente verificaste, no lo que asumiste.
|
||||
116
sprints/sprint-1-5/etapa-1-audit.md
Normal file
116
sprints/sprint-1-5/etapa-1-audit.md
Normal file
@@ -0,0 +1,116 @@
|
||||
# Auditoría de colores — Etapa 1 Sprint 1.5
|
||||
|
||||
> Hallazgos del audit de azules, hardcodes y `primary` en el código fuente.
|
||||
> **No se resuelven en Etapa 1.** Las acciones se ejecutan en Etapas 3 (Web App) y 4-8 (PDFs).
|
||||
>
|
||||
> Fecha: 2026-05-16 · Ejecutado por: Claude Code
|
||||
> Comandos: `grep -rn "blue|sky|indigo|3B82F6|2563EB" src/` + `grep -rn "#[0-9a-fA-F]{6}" src/`
|
||||
|
||||
---
|
||||
|
||||
## Categorías
|
||||
|
||||
- **Migrar a InQ orange**: color azul que debería ser naranja de marca
|
||||
- **Mantener azul funcional**: azul donde es convención semántica (info, links, paralelo AND)
|
||||
- **Migrar a neutral**: azul accidental que debería ser slate/gray
|
||||
- **Migrar a token**: hex hardcodeado que tiene un token equivalente en tailwind.config.js
|
||||
|
||||
---
|
||||
|
||||
## Hallazgos — Azules en clases Tailwind
|
||||
|
||||
| Archivo:línea | Clase actual | Categoría | Acción sugerida |
|
||||
|---|---|---|---|
|
||||
| `GatewayPanel.tsx:122` | `bg-blue-50 border-blue-200` | **Decisión arquitectónica: NO migrar** | Decisión arquitectónica: mantener azul informativo. No es color de marca, es semántica funcional (info banner, valor inmutable, patrón Bootstrap/Tailwind estándar). NO migrar. |
|
||||
| `GatewayPanel.tsx:124` | `text-blue-500` | **Decisión arquitectónica: NO migrar** | Decisión arquitectónica: mantener azul informativo. No es color de marca, es semántica funcional (info banner, valor inmutable, patrón Bootstrap/Tailwind estándar). NO migrar. |
|
||||
| `GatewayPanel.tsx:126-127` | `text-blue-800`, `text-blue-700` | **Decisión arquitectónica: NO migrar** | Decisión arquitectónica: mantener azul informativo. No es color de marca, es semántica funcional (info banner, valor inmutable, patrón Bootstrap/Tailwind estándar). NO migrar. |
|
||||
| `GatewayPanel.tsx:144` | `text-blue-600` | **Decisión arquitectónica: NO migrar** | Decisión arquitectónica: mantener azul informativo. No es color de marca, es semántica funcional (info banner, valor inmutable, patrón Bootstrap/Tailwind estándar). NO migrar. |
|
||||
| `ResourcesPanel.tsx:22` | `bg-blue-100 text-blue-700` (rol "role") | **Migrar a neutral** | Badge de tipo "role" no tiene razón de ser azul. Migrar a slate o usar color propio del sistema de recursos. Etapa 3. |
|
||||
|
||||
## Hallazgos — `PDF.blue` en exportación
|
||||
|
||||
| Archivo:línea | Color actual | Categoría | Acción sugerida |
|
||||
|---|---|---|---|
|
||||
| `pdf-sections.ts:9` | `blue: [30, 64, 175]` (`#1E40AF`) | **Migrar a InQ orange** | Header de tabla PDF usa azul corporativo. Reemplazar por naranja InQ `[245, 152, 69]` (`#F59845`) en Etapa 4 (PDF: header y footer). |
|
||||
| `pdf-sections.ts:112` | `PDF.blue` en KPI card accent | **Migrar a InQ orange** | El KPI "Costo total" usa azul como accent. Cambiar a naranja InQ en Etapa 6 (PDF: rediseño página 1). |
|
||||
| `pdf-export.ts:120` | `fillColor: PDF.blue` en autotable | **Migrar a InQ orange** | Header de tabla de costos en azul. Migrar en Etapa 7 (PDF: páginas 3-4). |
|
||||
| `pdf-sections-roi.ts:203` | `fillColor: PDF.blue` en autotable | **Migrar a InQ orange** | Header de tabla comparativa ROI. Migrar en Etapa 7. |
|
||||
|
||||
## Hallazgos — Hex hardcodes en componentes React
|
||||
|
||||
| Archivo:línea | Hex | Descripción | Categoría | Acción sugerida |
|
||||
|---|---|---|---|---|
|
||||
| `BpmnCanvas.tsx:24` | `#f59e0b` | Stroke del ícono Bot en SVG inline | **Migrar a InQ orange** | En Etapa 9 el badge ⚡ cambia a fondo naranja sólido `#F59845`. El stroke del SVG se rediseña en esa etapa. |
|
||||
| `BpmnCanvas.tsx:40` | `#fffbeb` | Fondo del badge Bot (amber-50) | **Migrar a InQ orange** | Reemplazar por `var(--inq-orange-lighter)` `#FFF8ED` en Etapa 9. |
|
||||
| `BpmnCanvas.tsx:41` | `#e2e8f0` | Borde del badge Bot | **Mantener neutral** | Borde sutil, está bien como slate-200. |
|
||||
| `CumulativeSavingsChart.tsx:32,34` | `#10b981` | Color del marker de payback | **Migrar a token** | Verde éxito = `var(--color-success)` `#16A34A`. Migrar en Etapa 3. |
|
||||
| `CumulativeSavingsChart.tsx:55` | `#10b981`, `#ef4444` | Colores del tooltip (positivo/negativo) | **Migrar a token** | Usar `--color-success` y `--color-danger`. Etapa 3. |
|
||||
| `CumulativeSavingsChart.tsx:91,102` | `#3b82f6` | Línea y punto del chart acumulado | **Migrar a InQ orange** | La línea del gráfico de trayectoria debería ser naranja InQ `#F59845` para coherencia de marca. Etapa 3. |
|
||||
| `HeatmapCanvas.tsx:118` | `#f8fafc` | Background del canvas | **Mantener neutral** | slate-50 es correcto para fondo del diagrama BPMN. |
|
||||
| `TopSavingsChart.tsx:73,79` | `#10b981` | Barras y labels del chart | **Migrar a token** | Verde éxito correcto. Usar `--color-success` vía `style={{ color: 'var(--color-success)' }}`. Etapa 3. |
|
||||
| `HeatmapLegend.tsx:24` | `#10b981`, `#f59e0b`, `#ef4444` | Gradiente de la leyenda del heatmap | **Migrar a token** | Usar constantes exportadas de `colors.ts` o tokens `heatmap.*`. Etapa 3. |
|
||||
| `chart-options.ts:12` | `#3b82f6` (role) | Color del tipo de recurso "role" | **Migrar a neutral** | El azul para "roles" no es marca InQ. Evaluar paleta diferenciadora de tipos en Sprint 2. |
|
||||
| `chart-options.ts:12` | `#8b5cf6` (system) | Color del tipo "system" | **Mantener azul funcional** | Violeta para sistemas es una convención razonable. Evaluar en Sprint 2. |
|
||||
| `chart-options.ts:123` | `#3b82f6` | Costo directo en donut chart | **Migrar a InQ orange** | Composición directo/overhead en donut. Decisión visual: el sector "directo" va en naranja InQ `#F59845`. El sector "overhead" NO debe ser otro naranja (pierde contraste) — usar slate-400 (`#94A3B8`) o naranja muy claro (`#FED7AA`). Decisión final en Etapa 3 mirando el render. |
|
||||
| `chart-options.ts:57,69,211,224` | `#f1f5f9`, `#e2e8f0` | Grid lines y ejes de charts | **Mantener neutral** | slate-100/200 son correctos para UI de soporte. |
|
||||
| `chart-options.ts:63,107,209` | `#475569` | Labels de ejes | **Mantener neutral** | slate-600, correcto. |
|
||||
| `chart-options.ts:78,217,237` | `#64748b`, `#94a3b8` | Labels secundarios | **Mantener neutral** | slate-500/400, correctos. |
|
||||
| `chart-options.ts:136` | `#1e293b` | Fill del label de total en donut | **Mantener neutral** | slate-800, correcto para texto. |
|
||||
|
||||
## Hallazgos — `primary` en JSX
|
||||
|
||||
| Archivo | Usos | Evaluación |
|
||||
|---|---|---|
|
||||
| `router.tsx`, `WorkspacePage.tsx` | `text-primary` spinner | ✅ Correcto — spinner naranja InQ ahora |
|
||||
| `ResourcesPanel.tsx:101` | `border-primary/20 bg-primary/5` | ✅ Correcto — borde/fondo naranja sutil |
|
||||
| `RoiKpiBar.tsx:88-89` | `text-primary`, `bg-primary/10` | ✅ Correcto — ícono Calendar naranja |
|
||||
| `KpiBar.tsx:46-47` | `text-primary`, `bg-primary/10` | ✅ Correcto — ícono DollarSign naranja |
|
||||
| `ActivitiesTable.tsx:22-23` | `text-primary` arrows | ✅ Correcto — flechas de ordenamiento naranjas |
|
||||
| `ActivitiesTable.tsx:96` | `bg-primary/5 ring-primary/20` | ✅ Correcto — highlight de fila naranja |
|
||||
| `ImportPage.tsx:173,198-199,205,210-211,252,255-258` | `text-primary`, `bg-primary/*`, `border-primary` | ✅ Correcto — AccentS de la landing page naranjas |
|
||||
| `SampleProcessLoader.tsx:77,83-84,92` | `hover:border-primary/30`, `bg-primary/10`, `text-primary` | ✅ Correcto |
|
||||
| `WorkspacePage.tsx:178,243` | `text-primary border-primary/30`, `bg-primary` | ✅ Correcto |
|
||||
| `slider.tsx` | `bg-primary/20`, `bg-primary`, `border-primary/50` | ✅ Correcto — slider naranja |
|
||||
| `tooltip.tsx` | `bg-primary text-primary-foreground` | ✅ Correcto — tooltip naranja |
|
||||
| `switch.tsx` | `bg-primary` when checked | ✅ Correcto — switch naranja |
|
||||
| `button.tsx` | `bg-primary text-primary-foreground` default | ✅ Correcto — botón naranja |
|
||||
| `badge.tsx` | `bg-primary text-primary-foreground` | ✅ Correcto — badge naranja |
|
||||
|
||||
---
|
||||
|
||||
## Resumen de acciones pendientes
|
||||
|
||||
| Etapa | Archivos afectados | Acción |
|
||||
|---|---|---|
|
||||
| Etapa 3 (Web App) | `CumulativeSavingsChart.tsx`, `TopSavingsChart.tsx`, `HeatmapLegend.tsx`, `chart-options.ts` | Migrar hex a tokens CSS/constantes |
|
||||
| Etapa 4-8 (PDFs) | `pdf-sections.ts`, `pdf-export.ts`, `pdf-sections-roi.ts` | Reemplazar `PDF.blue` por array naranja InQ |
|
||||
| Etapa 9 (Badge ⚡) | `BpmnCanvas.tsx` | Rediseño completo del badge a naranja sólido |
|
||||
| Sprint 2 | `ResourcesPanel.tsx`, `chart-options.ts` | Evaluar paleta de tipos de recurso |
|
||||
|
||||
**No se toca nada de lo anterior en Etapa 1.**
|
||||
|
||||
---
|
||||
|
||||
## Accesibilidad — Contraste de marca
|
||||
|
||||
**Color auditado**: `#F59845` (InQ orange) sobre fondo blanco `#FFFFFF`
|
||||
**Resultado (calculado 2026-05-16)**:
|
||||
|
||||
```
|
||||
Contrast ratio: 2.22 :1
|
||||
AA normal text (4.5): FAIL
|
||||
AA large text (3.0): FAIL
|
||||
```
|
||||
|
||||
**Veredicto**: el naranja InQ no alcanza el mínimo WCAG AA en ninguna categoría de texto.
|
||||
|
||||
**Opciones de remediación**:
|
||||
|
||||
| Opción | Descripción | Trade-off |
|
||||
|---|---|---|
|
||||
| A | Aceptar contraste sub-WCAG en CTAs | Riesgo accesibilidad — usuarios con baja visión |
|
||||
| B | Oscurecer naranja a `#D97706` en CTAs | Rompe marca parcialmente — perceptible en UI |
|
||||
| C | Usar texto oscuro `#451A03` en CTAs sobre naranja | Cambia el look del botón visiblemente |
|
||||
| **D** | **Forzar `font-weight: 700` en CTAs primarios** | **Cumple AA large text con texto grande/bold** |
|
||||
|
||||
**Propuesta para Etapa 3**: implementar opción D — `font-weight: 700` en todos los CTAs primarios y KPI cards. NO modificar componentes en esta etapa.
|
||||
@@ -2,7 +2,7 @@ export function AppFooter() {
|
||||
return (
|
||||
<footer className="mt-12 py-4 border-t border-slate-100 text-center">
|
||||
<p className="text-xs text-slate-300">
|
||||
Process Cost Platform · v0.1.0 · Hecho desde Paraguay 🇵🇾
|
||||
InQ ROI · Powered by InQuality · v0.1.0 · Hecho desde Paraguay 🇵🇾
|
||||
</p>
|
||||
</footer>
|
||||
)
|
||||
|
||||
@@ -8,7 +8,7 @@ const buttonVariants = cva(
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
||||
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90 font-bold',
|
||||
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||
outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||
|
||||
36
src/components/ui/switch.tsx
Normal file
36
src/components/ui/switch.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface SwitchProps {
|
||||
checked: boolean
|
||||
onCheckedChange: (checked: boolean) => void
|
||||
id?: string
|
||||
disabled?: boolean
|
||||
'aria-label'?: string
|
||||
}
|
||||
|
||||
export function Switch({ checked, onCheckedChange, id, disabled, 'aria-label': ariaLabel }: SwitchProps) {
|
||||
return (
|
||||
<button
|
||||
id={id}
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
aria-label={ariaLabel}
|
||||
disabled={disabled}
|
||||
onClick={() => onCheckedChange(!checked)}
|
||||
className={cn(
|
||||
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors duration-200',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
|
||||
'disabled:cursor-not-allowed disabled:opacity-50',
|
||||
checked ? 'bg-primary' : 'bg-slate-200'
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform duration-200',
|
||||
checked ? 'translate-x-4' : 'translate-x-0'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-inq-orange data-[state=active]:shadow data-[state=active]:font-semibold',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
79
src/domain/roi.ts
Normal file
79
src/domain/roi.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
// Cálculos de ROI de automatización — funciones puras, sin dependencias de UI ni persistencia.
|
||||
// Fórmulas nominales simples (ADR-014): sin VPN, TIR ni tasa de descuento.
|
||||
// Los edge cases (inversión cero, ahorro negativo, división por cero) están explicitados.
|
||||
|
||||
export interface RoiInput {
|
||||
costPerExecutionActual: number // costo total de una ejecución en escenario actual
|
||||
costPerExecutionAutomated: number // costo total de una ejecución en escenario automatizado
|
||||
annualFrequency: number // ejecuciones por año
|
||||
analysisHorizonYears: number // horizonte de análisis en años
|
||||
automationInvestment: number // inversión total única del proyecto de automatización
|
||||
}
|
||||
|
||||
export interface RoiResult {
|
||||
savingsPerExecution: number // ahorro por ejecución individual (actual - automatizado)
|
||||
savingsPerExecutionPercent: number // ahorro % sobre el costo actual (0 si actual = 0)
|
||||
annualSavings: number // ahorro anual = ahorro/ejecución × frecuencia
|
||||
paybackMonths: number // meses para recuperar inversión (Infinity si ahorro <= 0)
|
||||
paybackYears: number // años para recuperar inversión
|
||||
cumulativeSavingsHorizon: number // ahorro acumulado neto al final del horizonte
|
||||
breaksEvenInHorizon: boolean // ¿el payback ocurre dentro del horizonte?
|
||||
roiAnnualPercent: number // ROI anualizado % = (ahorroAnual / inversión) × 100
|
||||
// Infinity si inversión = 0 y ahorro > 0
|
||||
}
|
||||
|
||||
export function calculateRoi(input: RoiInput): RoiResult {
|
||||
const {
|
||||
costPerExecutionActual,
|
||||
costPerExecutionAutomated,
|
||||
annualFrequency,
|
||||
analysisHorizonYears,
|
||||
automationInvestment,
|
||||
} = input
|
||||
|
||||
const savingsPerExecution = costPerExecutionActual - costPerExecutionAutomated
|
||||
|
||||
// Evitar división por cero cuando el costo actual es 0
|
||||
const savingsPerExecutionPercent =
|
||||
costPerExecutionActual > 0
|
||||
? (savingsPerExecution / costPerExecutionActual) * 100
|
||||
: 0
|
||||
|
||||
const annualSavings = savingsPerExecution * annualFrequency
|
||||
|
||||
// Payback: si no hay ahorro (o es negativo), nunca se recupera la inversión
|
||||
let paybackMonths: number
|
||||
if (annualSavings <= 0) {
|
||||
paybackMonths = Infinity
|
||||
} else if (automationInvestment === 0) {
|
||||
// Inversión cero con ahorro positivo: recuperación instantánea
|
||||
paybackMonths = 0
|
||||
} else {
|
||||
paybackMonths = (automationInvestment / annualSavings) * 12
|
||||
}
|
||||
|
||||
const paybackYears = paybackMonths / 12 // Infinity / 12 = Infinity, 0 / 12 = 0
|
||||
|
||||
const cumulativeSavingsHorizon = annualSavings * analysisHorizonYears - automationInvestment
|
||||
|
||||
const breaksEvenInHorizon = isFinite(paybackYears) && paybackYears <= analysisHorizonYears
|
||||
|
||||
// ROI anualizado: Infinity si inversión = 0 con ahorro > 0; 0 si inversión = 0 y ahorro = 0
|
||||
let roiAnnualPercent: number
|
||||
if (automationInvestment === 0) {
|
||||
roiAnnualPercent = annualSavings > 0 ? Infinity : 0
|
||||
} else {
|
||||
roiAnnualPercent = (annualSavings / automationInvestment) * 100
|
||||
}
|
||||
|
||||
return {
|
||||
savingsPerExecution,
|
||||
savingsPerExecutionPercent,
|
||||
annualSavings,
|
||||
paybackMonths,
|
||||
paybackYears,
|
||||
cumulativeSavingsHorizon,
|
||||
breaksEvenInHorizon,
|
||||
roiAnnualPercent,
|
||||
}
|
||||
}
|
||||
@@ -22,6 +22,9 @@ export const ActivitySchema = z.object({
|
||||
directCostFixed: z.number().min(0),
|
||||
executionTimeMinutes: z.number().min(0),
|
||||
assignedResources: z.array(ActivityResourceAssignmentSchema),
|
||||
automatable: z.boolean().default(false),
|
||||
automatedCostFixed: z.number().min(0).default(0),
|
||||
automatedTimeMinutes: z.number().min(0).default(0),
|
||||
})
|
||||
|
||||
export const GatewayBranchSchema = z.object({
|
||||
@@ -45,6 +48,9 @@ export const ProcessSchema = z.object({
|
||||
bpmnXml: z.string().min(1),
|
||||
currency: z.string().length(3, 'Código ISO de 3 letras'),
|
||||
overheadPercentage: z.number().min(0).max(1),
|
||||
annualFrequency: z.number().min(1).default(1000),
|
||||
analysisHorizonYears: z.number().min(1).max(20).default(3),
|
||||
automationInvestment: z.number().min(0).default(0),
|
||||
createdAt: z.number(),
|
||||
updatedAt: z.number(),
|
||||
})
|
||||
|
||||
@@ -181,6 +181,9 @@ export function runSimulation(input: SimulationInput): SimulationResult {
|
||||
const perActivity: ActivitySimResult[] = []
|
||||
const resourceTotals = new Map<string, { cost: number; minutes: number; name: string }>()
|
||||
|
||||
// Seleccionar campos del escenario: para actividades automatable, usar costos automatizados
|
||||
const scenario = input.scenario ?? 'actual'
|
||||
|
||||
for (const activity of activities.values()) {
|
||||
const execProb = execProbs.get(activity.bpmnElementId) ?? 0
|
||||
const node = graph.nodes.get(activity.bpmnElementId)
|
||||
@@ -192,13 +195,19 @@ export function runSimulation(input: SimulationInput): SimulationResult {
|
||||
continue
|
||||
}
|
||||
|
||||
// En escenario automatizado, usar campos automatizados solo para actividades marcadas;
|
||||
// el resto mantiene sus costos originales (regla de negocio central del Sprint 1).
|
||||
const useAutomated = scenario === 'automated' && activity.automatable
|
||||
const directCostFixed = useAutomated ? activity.automatedCostFixed : activity.directCostFixed
|
||||
const executionTimeMinutes = useAutomated ? activity.automatedTimeMinutes : activity.executionTimeMinutes
|
||||
|
||||
const resourceBreakdown: ActivitySimResult['resourceCostBreakdown'] = []
|
||||
let resourceCostDirect = 0
|
||||
|
||||
for (const assignment of activity.assignedResources) {
|
||||
const resource = resources.get(assignment.resourceId)
|
||||
if (!resource) continue
|
||||
const hoursUsed = (activity.executionTimeMinutes / 60) * assignment.utilizationPercent
|
||||
const hoursUsed = (executionTimeMinutes / 60) * assignment.utilizationPercent
|
||||
const cost = resource.costPerHour * hoursUsed * execProb
|
||||
resourceBreakdown.push({ resourceId: resource.id, resourceName: resource.name, cost })
|
||||
resourceCostDirect += cost
|
||||
@@ -211,7 +220,7 @@ export function runSimulation(input: SimulationInput): SimulationResult {
|
||||
})
|
||||
}
|
||||
|
||||
const fixedCostExpected = activity.directCostFixed * execProb
|
||||
const fixedCostExpected = directCostFixed * execProb
|
||||
const totalExpectedDirectCost = fixedCostExpected + resourceCostDirect
|
||||
|
||||
perActivity.push({
|
||||
@@ -225,7 +234,7 @@ export function runSimulation(input: SimulationInput): SimulationResult {
|
||||
expectedExecutions: execProb,
|
||||
executionProbability: execProb,
|
||||
resourceCostBreakdown: resourceBreakdown,
|
||||
executionTimeMinutes: activity.executionTimeMinutes,
|
||||
executionTimeMinutes,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,9 @@ export interface Process {
|
||||
bpmnXml: string
|
||||
currency: string
|
||||
overheadPercentage: number
|
||||
annualFrequency: number // 🆕 Sprint 1 — execuciones por año, default 1000
|
||||
analysisHorizonYears: number // 🆕 Sprint 1 — horizonte de análisis en años, default 3
|
||||
automationInvestment: number // 🆕 Sprint 1 — inversión total del proyecto, default 0
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
}
|
||||
@@ -26,6 +29,9 @@ export interface Activity {
|
||||
directCostFixed: number
|
||||
executionTimeMinutes: number
|
||||
assignedResources: ActivityResourceAssignment[]
|
||||
automatable: boolean // 🆕 Sprint 1 — si la actividad es candidata a automatización
|
||||
automatedCostFixed: number // 🆕 Sprint 1 — costo recurrente por ejecución automatizada
|
||||
automatedTimeMinutes: number // 🆕 Sprint 1 — tiempo de la actividad en escenario automatizado
|
||||
}
|
||||
|
||||
export interface ActivityResourceAssignment {
|
||||
@@ -63,11 +69,16 @@ export interface Simulation {
|
||||
id: UUID
|
||||
processId: UUID
|
||||
executedAt: number
|
||||
result: SimulationResult
|
||||
result: SimulationResult // escenario actual
|
||||
resultAutomated?: SimulationResult // 🆕 Sprint 1 — escenario automatizado (opcional por retrocompatibilidad)
|
||||
}
|
||||
|
||||
// ─── Motor de simulación: Input/Output ───────────────────────────────────────
|
||||
|
||||
// Escenario de simulación: actual (campos directCostFixed/executionTimeMinutes)
|
||||
// o automatizado (automatedCostFixed/automatedTimeMinutes para actividades marcadas).
|
||||
export type Scenario = 'actual' | 'automated'
|
||||
|
||||
export interface SimulationInput {
|
||||
processXml: string
|
||||
activities: Map<BpmnElementId, Activity>
|
||||
@@ -77,6 +88,7 @@ export interface SimulationInput {
|
||||
currency: string
|
||||
overheadPercentage: number
|
||||
}
|
||||
scenario?: Scenario // default 'actual' — opcional para retrocompatibilidad con tests existentes
|
||||
}
|
||||
|
||||
export interface ActivitySimResult {
|
||||
|
||||
@@ -64,6 +64,9 @@ export function ImportPage() {
|
||||
bpmnXml: xml,
|
||||
currency: 'USD',
|
||||
overheadPercentage: 0.2,
|
||||
annualFrequency: 1000,
|
||||
analysisHorizonYears: 3,
|
||||
automationInvestment: 0,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
}
|
||||
@@ -78,6 +81,9 @@ export function ImportPage() {
|
||||
directCostFixed: 0,
|
||||
executionTimeMinutes: 0,
|
||||
assignedResources: [],
|
||||
automatable: false,
|
||||
automatedCostFixed: 0,
|
||||
automatedTimeMinutes: 0,
|
||||
}))
|
||||
|
||||
const gatewayElements = extractGatewayElements(graph)
|
||||
|
||||
12
src/features/report/AutomationScenarioNote.tsx
Normal file
12
src/features/report/AutomationScenarioNote.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
// Leyenda para el tab "Automatizado" del reporte.
|
||||
// Explica por qué ciertas actividades mantienen su costo original.
|
||||
// Se coloca al pie del heatmap en el tab "Automatizado" — wired en Etapa 3.
|
||||
|
||||
export function AutomationScenarioNote() {
|
||||
return (
|
||||
<p className="text-xs text-slate-500 text-center mt-2 px-4">
|
||||
💡 Las actividades no marcadas como automatizables mantienen su costo original en este
|
||||
escenario. Identificalas por el ícono ámbar de automatización en el workspace.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
134
src/features/report/ComparisonTable.tsx
Normal file
134
src/features/report/ComparisonTable.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import { Bot, ArrowUpDown } from 'lucide-react'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import { formatCurrency, formatPercent } from '@/lib/format'
|
||||
import type { ActivitySimResult } from '@/domain/types'
|
||||
|
||||
interface ComparisonRow {
|
||||
activityId: string
|
||||
activityName: string
|
||||
actualCost: number
|
||||
automatedCost: number
|
||||
savings: number
|
||||
savingsPercent: number
|
||||
automatable: boolean
|
||||
}
|
||||
|
||||
interface ComparisonTableProps {
|
||||
perActivityActual: ActivitySimResult[]
|
||||
perActivityAutomated: ActivitySimResult[]
|
||||
automatableIds: Set<string> // bpmnElementIds marcados como automatizables
|
||||
currency: string
|
||||
}
|
||||
|
||||
export function ComparisonTable({
|
||||
perActivityActual,
|
||||
perActivityAutomated,
|
||||
automatableIds,
|
||||
currency,
|
||||
}: ComparisonTableProps) {
|
||||
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')
|
||||
|
||||
const automatedByActivityId = useMemo(() => {
|
||||
const m = new Map<string, ActivitySimResult>()
|
||||
for (const a of perActivityAutomated) m.set(a.activityId, a)
|
||||
return m
|
||||
}, [perActivityAutomated])
|
||||
|
||||
const rows: ComparisonRow[] = useMemo(() => {
|
||||
return perActivityActual
|
||||
.map((act) => {
|
||||
const automated = automatedByActivityId.get(act.activityId)
|
||||
const automatedCost = automated?.expectedTotalCost ?? act.expectedTotalCost
|
||||
const savings = act.expectedTotalCost - automatedCost
|
||||
const savingsPercent =
|
||||
act.expectedTotalCost > 0 ? (savings / act.expectedTotalCost) * 100 : 0
|
||||
return {
|
||||
activityId: act.activityId,
|
||||
activityName: act.activityName,
|
||||
actualCost: act.expectedTotalCost,
|
||||
automatedCost,
|
||||
savings,
|
||||
savingsPercent,
|
||||
automatable: automatableIds.has(act.bpmnElementId),
|
||||
}
|
||||
})
|
||||
.sort((a, b) => (b.savings - a.savings) * (sortDir === 'desc' ? 1 : -1))
|
||||
}, [perActivityActual, automatedByActivityId, automatableIds, sortDir])
|
||||
|
||||
if (rows.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-24 text-xs text-slate-400 rounded-xl border border-slate-200">
|
||||
Sin actividades para comparar
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-inq-orange/20 overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader style={{ background: '#FFF8ED', borderBottom: '1px solid #F59845' }}>
|
||||
<tr>
|
||||
<TableHead className="w-8 text-xs text-amber-800/70" />
|
||||
<TableHead className="text-xs text-amber-800/70 font-medium uppercase tracking-wide">Actividad</TableHead>
|
||||
<TableHead className="text-xs text-right text-amber-800/70 font-medium uppercase tracking-wide">Costo actual</TableHead>
|
||||
<TableHead className="text-xs text-right text-amber-800/70 font-medium uppercase tracking-wide">Costo automatizado</TableHead>
|
||||
<TableHead
|
||||
className="text-xs text-right cursor-pointer select-none text-amber-800/70 font-medium uppercase tracking-wide hover:text-amber-900"
|
||||
onClick={() => setSortDir((d) => (d === 'desc' ? 'asc' : 'desc'))}
|
||||
>
|
||||
<span className="inline-flex items-center justify-end gap-1">
|
||||
Ahorro
|
||||
<ArrowUpDown className="h-3 w-3 opacity-40" />
|
||||
</span>
|
||||
</TableHead>
|
||||
<TableHead className="text-xs text-right text-amber-800/70 font-medium uppercase tracking-wide">% ahorro</TableHead>
|
||||
</tr>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rows.map((row) => {
|
||||
const savingsColor =
|
||||
row.savings > 0
|
||||
? 'text-emerald-700'
|
||||
: row.savings < 0
|
||||
? 'text-red-600'
|
||||
: 'text-slate-400'
|
||||
const rowClass = row.automatable ? '' : 'bg-slate-50/60'
|
||||
const textClass = row.automatable ? 'text-slate-800' : 'text-slate-500'
|
||||
return (
|
||||
<TableRow key={row.activityId} className={rowClass}>
|
||||
<TableCell className="py-2">
|
||||
{row.automatable && (
|
||||
<Bot
|
||||
className="h-3.5 w-3.5 text-amber-500"
|
||||
aria-label="Marcada como automatizable"
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className={`text-xs font-medium max-w-48 truncate ${textClass}`}>
|
||||
{row.activityName}
|
||||
</TableCell>
|
||||
<TableCell className={`text-xs font-mono text-right ${row.automatable ? 'text-slate-600' : 'text-slate-400'}`}>
|
||||
{formatCurrency(row.actualCost, currency)}
|
||||
</TableCell>
|
||||
<TableCell className={`text-xs font-mono text-right ${row.automatable ? 'text-slate-600' : 'text-slate-400'}`}>
|
||||
{formatCurrency(row.automatedCost, currency)}
|
||||
</TableCell>
|
||||
<TableCell className={`text-xs font-mono font-semibold text-right ${row.automatable ? savingsColor : 'text-slate-300'}`}>
|
||||
{row.automatable
|
||||
? (row.savings > 0 ? '+' : '') + formatCurrency(row.savings, currency)
|
||||
: '—'}
|
||||
</TableCell>
|
||||
<TableCell className={`text-xs font-mono text-right ${row.automatable ? savingsColor : 'text-slate-300'}`}>
|
||||
{row.automatable
|
||||
? (row.savings > 0 ? '+' : '') + formatPercent(row.savingsPercent)
|
||||
: '—'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
115
src/features/report/CumulativeSavingsChart.tsx
Normal file
115
src/features/report/CumulativeSavingsChart.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { useMemo } from 'react'
|
||||
import ReactECharts from 'echarts-for-react'
|
||||
import { formatCurrency } from '@/lib/format'
|
||||
import type { RoiResult } from '@/domain/roi'
|
||||
|
||||
interface CumulativeSavingsChartProps {
|
||||
roi: RoiResult
|
||||
horizonYears: number
|
||||
currency: string
|
||||
investment: number
|
||||
}
|
||||
|
||||
export function CumulativeSavingsChart({
|
||||
roi,
|
||||
horizonYears,
|
||||
currency,
|
||||
investment,
|
||||
}: CumulativeSavingsChartProps) {
|
||||
const option = useMemo(() => {
|
||||
const years = Array.from({ length: horizonYears + 1 }, (_, i) => i)
|
||||
const values = years.map((y) => roi.annualSavings * y - investment)
|
||||
|
||||
const markLineData: unknown[] = []
|
||||
if (isFinite(roi.paybackYears) && roi.paybackYears > 0 && roi.paybackYears <= horizonYears) {
|
||||
markLineData.push({
|
||||
xAxis: roi.paybackYears,
|
||||
name: 'Payback',
|
||||
label: {
|
||||
formatter: `Payback\n${roi.paybackYears.toFixed(1)} años`,
|
||||
position: 'insideEndTop',
|
||||
fontSize: 10,
|
||||
color: '#16A34A',
|
||||
},
|
||||
lineStyle: { color: '#16A34A', type: 'dashed', width: 2 },
|
||||
})
|
||||
}
|
||||
|
||||
// Línea de referencia en y=0 para identificar el break-even visualmente
|
||||
markLineData.push({
|
||||
yAxis: 0,
|
||||
name: 'Break-even',
|
||||
label: { formatter: '', position: 'insideStartTop' },
|
||||
lineStyle: { color: '#94a3b8', type: 'solid', width: 1 },
|
||||
})
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: unknown[]) => {
|
||||
const p = params[0] as { dataIndex: number; value: [number, number] }
|
||||
const year = p.value[0]
|
||||
const val = p.value[1]
|
||||
return `<div style="font-size:12px;line-height:1.6">
|
||||
<div style="font-weight:600;margin-bottom:4px">Año ${year}</div>
|
||||
<div>Acumulado neto: <strong style="color:${val >= 0 ? '#16A34A' : '#EF4444'}">${formatCurrency(val, currency)}</strong></div>
|
||||
</div>`
|
||||
},
|
||||
},
|
||||
grid: { left: 16, right: 24, top: 16, bottom: 8, containLabel: true },
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: 'Año',
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: { fontSize: 10, color: '#94a3b8' },
|
||||
min: 0,
|
||||
max: horizonYears,
|
||||
interval: 1,
|
||||
axisLabel: { fontSize: 11, formatter: (v: number) => `Año ${v}` },
|
||||
splitLine: { lineStyle: { color: '#f1f5f9' } },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
formatter: (v: number) => {
|
||||
if (v === 0) return '0'
|
||||
const abs = Math.abs(v)
|
||||
const sign = v < 0 ? '-' : ''
|
||||
if (abs >= 1_000_000) return `${sign}${(abs / 1_000_000).toFixed(1)}M`
|
||||
if (abs >= 1_000) return `${sign}${(abs / 1_000).toFixed(0)}k`
|
||||
return String(v)
|
||||
},
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#f1f5f9' } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: years.map((y, i) => [y, values[i]]),
|
||||
smooth: false,
|
||||
lineStyle: { color: '#F59845', width: 2.5 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(245,152,69,0.18)' },
|
||||
{ offset: 1, color: 'rgba(245,152,69,0.02)' },
|
||||
],
|
||||
},
|
||||
},
|
||||
itemStyle: { color: '#F59845' },
|
||||
symbolSize: 6,
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: ['none', 'none'],
|
||||
data: markLineData,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}, [roi, horizonYears, currency, investment])
|
||||
|
||||
return <ReactECharts option={option} style={{ height: 280 }} notMerge />
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { formatCurrency, formatPercent } from '@/lib/format'
|
||||
import { heatmapLegendBounds } from '@/lib/colors'
|
||||
import { heatmapLegendBounds, HEATMAP_LOW_HEX, HEATMAP_MID_HEX, HEATMAP_HIGH_HEX } from '@/lib/colors'
|
||||
import type { HeatmapMode } from '@/lib/colors'
|
||||
import type { ActivitySimResult } from '@/domain/types'
|
||||
|
||||
@@ -21,7 +21,7 @@ export function HeatmapLegend({ perActivity, mode, currency }: HeatmapLegendProp
|
||||
<div className="flex items-center gap-3 mt-3">
|
||||
<span className="text-xs text-slate-500 shrink-0">Bajo costo</span>
|
||||
<div className="flex-1 h-3 rounded-full" style={{
|
||||
background: 'linear-gradient(to right, #10b981, #f59e0b, #ef4444)'
|
||||
background: `linear-gradient(to right, ${HEATMAP_LOW_HEX}, ${HEATMAP_MID_HEX}, ${HEATMAP_HIGH_HEX})`
|
||||
}} />
|
||||
<span className="text-xs text-slate-500 shrink-0">Alto costo</span>
|
||||
<div className="h-4 border-l border-slate-200 mx-1" />
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
import { useCallback, useRef, useState } from 'react'
|
||||
import { useCallback, useMemo, useRef, useState } from 'react'
|
||||
import { useParams, useNavigate } from '@tanstack/react-router'
|
||||
import { AlertTriangle, Home } from 'lucide-react'
|
||||
import { AlertTriangle, Home, Info } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { TooltipProvider } from '@/components/ui/tooltip'
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
|
||||
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { AppFooter } from '@/components/AppFooter'
|
||||
import { calculateRoi } from '@/domain/roi'
|
||||
import { useReportData } from './useReportData'
|
||||
import { ReportHeader } from './ReportHeader'
|
||||
import { KpiBar } from './KpiBar'
|
||||
import { RoiKpiBar } from './RoiKpiBar'
|
||||
import { HeatmapCanvas, type HeatmapCanvasHandle } from './HeatmapCanvas'
|
||||
import { HeatmapLegend } from './HeatmapLegend'
|
||||
import { HeatmapModeToggle } from './HeatmapModeToggle'
|
||||
@@ -17,48 +20,102 @@ import { TopActivitiesChart } from './TopActivitiesChart'
|
||||
import { CostCompositionChart } from './CostCompositionChart'
|
||||
import { CostByResourceChart } from './CostByResourceChart'
|
||||
import { ActivitiesTable } from './ActivitiesTable'
|
||||
import { ComparisonTable } from './ComparisonTable'
|
||||
import { CumulativeSavingsChart } from './CumulativeSavingsChart'
|
||||
import { TopSavingsChart } from './TopSavingsChart'
|
||||
import { TransparencySection } from './TransparencySection'
|
||||
import { AutomationScenarioNote } from './AutomationScenarioNote'
|
||||
import { MethodologyFooter } from './MethodologyFooter'
|
||||
import type { HeatmapMode } from '@/lib/colors'
|
||||
|
||||
export function ReportPage() {
|
||||
const { processId } = useParams({ from: '/report/$processId' })
|
||||
const navigate = useNavigate()
|
||||
const { process, simulation, resources, isLoading, error } = useReportData(processId)
|
||||
const { process, simulation, activities, resources, isLoading, error } = useReportData(processId)
|
||||
|
||||
const { toast } = useToast()
|
||||
const [heatmapMode, setHeatmapMode] = useState<HeatmapMode>('relative')
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const [isExportingPdf, setIsExportingPdf] = useState(false)
|
||||
const [isExportingCsv, setIsExportingCsv] = useState(false)
|
||||
|
||||
// Set de bpmnElementIds marcados como automatizables — debe estar antes de los early returns
|
||||
const automatableIds = useMemo(
|
||||
() => new Set(activities.filter((a) => a.automatable).map((a) => a.bpmnElementId)),
|
||||
[activities]
|
||||
)
|
||||
|
||||
// ROI — calculado solo cuando hay ambos resultados
|
||||
const roi = useMemo(() => {
|
||||
const result = simulation?.result
|
||||
const resultAutomated = simulation?.resultAutomated
|
||||
if (!result || !resultAutomated || !process) return null
|
||||
return calculateRoi({
|
||||
costPerExecutionActual: result.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
annualFrequency: process.annualFrequency,
|
||||
analysisHorizonYears: process.analysisHorizonYears,
|
||||
automationInvestment: process.automationInvestment,
|
||||
})
|
||||
}, [simulation, process])
|
||||
|
||||
// Estado y refs para el tab "Actual"
|
||||
const [selectedIdActual, setSelectedIdActual] = useState<string | null>(null)
|
||||
const heatmapRef = useRef<HeatmapCanvasHandle>(null)
|
||||
const heatmapSectionRef = useRef<HTMLDivElement>(null)
|
||||
const tableSectionRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Click en heatmap → resaltar fila en tabla + scroll a tabla
|
||||
const handleHeatmapClick = useCallback((bpmnElementId: string) => {
|
||||
setSelectedId(bpmnElementId)
|
||||
// Estado y refs para el tab "Automatizado"
|
||||
const [selectedIdAuto, setSelectedIdAuto] = useState<string | null>(null)
|
||||
const heatmapRefAuto = useRef<HeatmapCanvasHandle>(null)
|
||||
const heatmapSectionRefAuto = useRef<HTMLDivElement>(null)
|
||||
const tableSectionRefAuto = useRef<HTMLDivElement>(null)
|
||||
|
||||
const [isExportingPdf, setIsExportingPdf] = useState(false)
|
||||
const [isExportingCsv, setIsExportingCsv] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<'actual' | 'automatizado' | 'roi'>('actual')
|
||||
|
||||
// Tab "Actual" — cross-linking heatmap ↔ tabla
|
||||
const handleHeatmapClickActual = useCallback((bpmnElementId: string) => {
|
||||
setSelectedIdActual(bpmnElementId)
|
||||
setTimeout(() => {
|
||||
tableSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}, 50)
|
||||
}, [])
|
||||
|
||||
// Click en fila de tabla → resaltar en canvas + scroll a heatmap
|
||||
const handleTableRowClick = useCallback((bpmnElementId: string) => {
|
||||
setSelectedId(bpmnElementId)
|
||||
const handleTableRowClickActual = useCallback((bpmnElementId: string) => {
|
||||
setSelectedIdActual(bpmnElementId)
|
||||
heatmapRef.current?.highlightElement(bpmnElementId)
|
||||
setTimeout(() => {
|
||||
heatmapSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}, 50)
|
||||
}, [])
|
||||
|
||||
// Tab "Automatizado" — cross-linking heatmap ↔ tabla
|
||||
const handleHeatmapClickAuto = useCallback((bpmnElementId: string) => {
|
||||
setSelectedIdAuto(bpmnElementId)
|
||||
setTimeout(() => {
|
||||
tableSectionRefAuto.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}, 50)
|
||||
}, [])
|
||||
|
||||
const handleTableRowClickAuto = useCallback((bpmnElementId: string) => {
|
||||
setSelectedIdAuto(bpmnElementId)
|
||||
heatmapRefAuto.current?.highlightElement(bpmnElementId)
|
||||
setTimeout(() => {
|
||||
heatmapSectionRefAuto.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}, 50)
|
||||
}, [])
|
||||
|
||||
const handleExportPdf = useCallback(async () => {
|
||||
if (!process || !simulation || isExportingPdf) return
|
||||
setIsExportingPdf(true)
|
||||
try {
|
||||
const heatmapImageData = await heatmapRef.current?.captureImage() ?? null
|
||||
let heatmapImageData: string | null = null
|
||||
if (activeTab === 'actual') {
|
||||
heatmapImageData = await heatmapRef.current?.captureImage() ?? null
|
||||
} else if (activeTab === 'automatizado') {
|
||||
heatmapImageData = await heatmapRefAuto.current?.captureImage() ?? null
|
||||
}
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await exportToPdf({ process, simulation, resources, heatmapImageData })
|
||||
await exportToPdf({ process, simulation, resources, heatmapImageData, tab: activeTab, activities })
|
||||
toast({ title: 'PDF generado', description: 'El reporte se descargó correctamente.' })
|
||||
} catch (err) {
|
||||
console.error('PDF export error:', err)
|
||||
@@ -66,14 +123,14 @@ export function ReportPage() {
|
||||
} finally {
|
||||
setIsExportingPdf(false)
|
||||
}
|
||||
}, [process, simulation, resources, isExportingPdf, toast])
|
||||
}, [process, simulation, resources, isExportingPdf, toast, activeTab, activities])
|
||||
|
||||
const handleExportCsv = useCallback(async () => {
|
||||
if (!process || !simulation || isExportingCsv) return
|
||||
setIsExportingCsv(true)
|
||||
try {
|
||||
const { exportToCsv } = await import('@/lib/export/csv-export')
|
||||
exportToCsv({ process, simulation, resources })
|
||||
exportToCsv({ process, simulation, resources, tab: activeTab, activities })
|
||||
toast({ title: 'CSV generado', description: 'Los datos se descargaron correctamente.' })
|
||||
} catch (err) {
|
||||
console.error('CSV export error:', err)
|
||||
@@ -81,14 +138,13 @@ export function ReportPage() {
|
||||
} finally {
|
||||
setIsExportingCsv(false)
|
||||
}
|
||||
}, [process, simulation, resources, isExportingCsv, toast])
|
||||
}, [process, simulation, resources, isExportingCsv, toast, activeTab, activities])
|
||||
|
||||
// ── Loading — skeleton en lugar de pantalla en blanco ────────────────────
|
||||
// ── Loading ───────────────────────────────────────────────────────────────
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
<div className="max-w-screen-xl mx-auto px-6 py-10 animate-pulse">
|
||||
{/* Header skeleton */}
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div className="space-y-2">
|
||||
<div className="h-3 w-20 bg-slate-200 rounded" />
|
||||
@@ -100,7 +156,6 @@ export function ReportPage() {
|
||||
<div className="h-9 w-32 bg-slate-200 rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
{/* KPI skeleton */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
<div key={i} className="bg-white rounded-xl border border-slate-200 p-6 flex gap-4">
|
||||
@@ -113,12 +168,10 @@ export function ReportPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Canvas skeleton */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
|
||||
<div className="h-5 w-48 bg-slate-200 rounded mb-4" />
|
||||
<div className="h-72 bg-slate-100 rounded-lg" />
|
||||
</div>
|
||||
{/* Table skeleton */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||||
<div className="h-4 w-40 bg-slate-200 rounded mb-4" />
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
@@ -159,14 +212,19 @@ export function ReportPage() {
|
||||
}
|
||||
|
||||
const result = simulation.result
|
||||
const perActivity = result.perActivity
|
||||
const resultAutomated = simulation.resultAutomated ?? null
|
||||
const hasAutomatedResult = resultAutomated !== null
|
||||
|
||||
// Tabs de escenarios se habilitan solo cuando hay resultado automatizado Y hay actividades
|
||||
// marcadas como automatizables. Sin automatizables, los tabs muestran datos idénticos al actual.
|
||||
const hasAutomatedScenario = hasAutomatedResult && automatableIds.size > 0
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
<div className="max-w-screen-xl mx-auto px-6 py-10">
|
||||
|
||||
{/* ── 1. Header ─────────────────────────────────────────────── */}
|
||||
{/* ── Header (fuera de los tabs: aplica a todos los escenarios) ──── */}
|
||||
<ReportHeader
|
||||
process={process}
|
||||
simulatedAt={simulation.executedAt}
|
||||
@@ -177,10 +235,50 @@ export function ReportPage() {
|
||||
isExportingCsv={isExportingCsv}
|
||||
/>
|
||||
|
||||
{/* ── 2. KPI Bar ────────────────────────────────────────────── */}
|
||||
{/* ── Tabs ─────────────────────────────────────────────────────── */}
|
||||
<Tabs defaultValue="actual" className="w-full" onValueChange={(v) => setActiveTab(v as typeof activeTab)}>
|
||||
<TabsList className="mb-6">
|
||||
<TabsTrigger value="actual">Actual</TabsTrigger>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="contents">
|
||||
<TabsTrigger value="automatizado" disabled={!hasAutomatedScenario}>
|
||||
Automatizado
|
||||
</TabsTrigger>
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
{!hasAutomatedScenario && (
|
||||
<TooltipContent side="bottom" className="text-xs max-w-56">
|
||||
{!hasAutomatedResult
|
||||
? 'Re-simulá el proceso para generar el escenario automatizado'
|
||||
: 'Marcá al menos una actividad como automatizable en el workspace para ver este escenario'}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="contents">
|
||||
<TabsTrigger value="roi" disabled={!hasAutomatedScenario}>
|
||||
Comparación + ROI
|
||||
</TabsTrigger>
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
{!hasAutomatedScenario && (
|
||||
<TooltipContent side="bottom" className="text-xs max-w-56">
|
||||
{!hasAutomatedResult
|
||||
? 'Re-simulá el proceso para generar el análisis de ROI'
|
||||
: 'Marcá al menos una actividad como automatizable en el workspace para calcular el ROI'}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</TabsList>
|
||||
|
||||
{/* ──────────────── TAB: ACTUAL ──────────────────────────────── */}
|
||||
<TabsContent value="actual">
|
||||
<KpiBar result={result} currency={process.currency} />
|
||||
|
||||
{/* ── 3. Mapa de Calor ──────────────────────────────────────── */}
|
||||
<div ref={heatmapSectionRef} className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
@@ -195,25 +293,23 @@ export function ReportPage() {
|
||||
<HeatmapCanvas
|
||||
ref={heatmapRef}
|
||||
xml={process.bpmnXml}
|
||||
perActivity={perActivity}
|
||||
perActivity={result.perActivity}
|
||||
mode={heatmapMode}
|
||||
currency={process.currency}
|
||||
selectedId={selectedId}
|
||||
onActivityClick={handleHeatmapClick}
|
||||
selectedId={selectedIdActual}
|
||||
onActivityClick={handleHeatmapClickActual}
|
||||
minHeight={520}
|
||||
/>
|
||||
|
||||
<HeatmapLegend
|
||||
perActivity={perActivity}
|
||||
perActivity={result.perActivity}
|
||||
mode={heatmapMode}
|
||||
currency={process.currency}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ── 4. Warnings ───────────────────────────────────────────── */}
|
||||
<WarningsBanner warnings={result.warnings} />
|
||||
|
||||
{/* ── 5. Análisis — 3 gráficos ──────────────────────────────── */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-base font-semibold text-slate-800 mb-4">Análisis de composición</h2>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
@@ -222,25 +318,23 @@ export function ReportPage() {
|
||||
Top actividades por costo
|
||||
</h3>
|
||||
<TopActivitiesChart
|
||||
perActivity={perActivity}
|
||||
perActivity={result.perActivity}
|
||||
mode={heatmapMode}
|
||||
currency={process.currency}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
|
||||
<h3 className="text-xs font-semibold text-slate-600 uppercase tracking-wide mb-4">
|
||||
Composición directo / overhead
|
||||
</h3>
|
||||
<CostCompositionChart result={result} currency={process.currency} />
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
|
||||
<h3 className="text-xs font-semibold text-slate-600 uppercase tracking-wide mb-4">
|
||||
Costo por tipo de recurso
|
||||
</h3>
|
||||
<CostByResourceChart
|
||||
perActivity={perActivity}
|
||||
perActivity={result.perActivity}
|
||||
resources={resources}
|
||||
currency={process.currency}
|
||||
/>
|
||||
@@ -248,31 +342,221 @@ export function ReportPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── 6. Tabla detalle ──────────────────────────────────────── */}
|
||||
<div ref={tableSectionRef} className="mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-base font-semibold text-slate-800">
|
||||
Detalle por actividad
|
||||
<span className="ml-2 text-sm font-normal text-slate-400">({perActivity.length} actividades)</span>
|
||||
<span className="ml-2 text-sm font-normal text-slate-400">
|
||||
({result.perActivity.length} actividades)
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<ActivitiesTable
|
||||
perActivity={perActivity}
|
||||
perActivity={result.perActivity}
|
||||
mode={heatmapMode}
|
||||
currency={process.currency}
|
||||
highlightedId={selectedId}
|
||||
onRowClick={handleTableRowClick}
|
||||
highlightedId={selectedIdActual}
|
||||
onRowClick={handleTableRowClickActual}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
{/* ── 7. Footer metodológico ────────────────────────────────── */}
|
||||
<MethodologyFooter process={process} />
|
||||
|
||||
<AppFooter />
|
||||
</TabsContent>
|
||||
|
||||
{/* ──────────────── TAB: AUTOMATIZADO ───────────────────────── */}
|
||||
<TabsContent value="automatizado">
|
||||
{!hasAutomatedResult ? (
|
||||
<NeedsResimulate processId={processId} />
|
||||
) : (
|
||||
<>
|
||||
<KpiBar result={resultAutomated!} currency={process.currency} />
|
||||
|
||||
<div ref={heatmapSectionRefAuto} className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-slate-800">Mapa de calor — Escenario Automatizado</h2>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
Hacé click en una actividad para ver su detalle en la tabla
|
||||
</p>
|
||||
</div>
|
||||
<HeatmapModeToggle mode={heatmapMode} onChange={setHeatmapMode} />
|
||||
</div>
|
||||
|
||||
<HeatmapCanvas
|
||||
ref={heatmapRefAuto}
|
||||
xml={process.bpmnXml}
|
||||
perActivity={resultAutomated!.perActivity}
|
||||
mode={heatmapMode}
|
||||
currency={process.currency}
|
||||
selectedId={selectedIdAuto}
|
||||
onActivityClick={handleHeatmapClickAuto}
|
||||
minHeight={520}
|
||||
/>
|
||||
|
||||
<HeatmapLegend
|
||||
perActivity={resultAutomated!.perActivity}
|
||||
mode={heatmapMode}
|
||||
currency={process.currency}
|
||||
/>
|
||||
|
||||
<AutomationScenarioNote />
|
||||
</div>
|
||||
|
||||
<WarningsBanner warnings={resultAutomated!.warnings} />
|
||||
|
||||
<div className="mb-6">
|
||||
<h2 className="text-base font-semibold text-slate-800 mb-4">Análisis de composición</h2>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
|
||||
<h3 className="text-xs font-semibold text-slate-600 uppercase tracking-wide mb-4">
|
||||
Top actividades por costo
|
||||
</h3>
|
||||
<TopActivitiesChart
|
||||
perActivity={resultAutomated!.perActivity}
|
||||
mode={heatmapMode}
|
||||
currency={process.currency}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
|
||||
<h3 className="text-xs font-semibold text-slate-600 uppercase tracking-wide mb-4">
|
||||
Composición directo / overhead
|
||||
</h3>
|
||||
<CostCompositionChart result={resultAutomated!} currency={process.currency} />
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
|
||||
<h3 className="text-xs font-semibold text-slate-600 uppercase tracking-wide mb-4">
|
||||
Costo por tipo de recurso
|
||||
</h3>
|
||||
<CostByResourceChart
|
||||
perActivity={resultAutomated!.perActivity}
|
||||
resources={resources}
|
||||
currency={process.currency}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={tableSectionRefAuto} className="mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-base font-semibold text-slate-800">
|
||||
Detalle por actividad — Automatizado
|
||||
<span className="ml-2 text-sm font-normal text-slate-400">
|
||||
({resultAutomated!.perActivity.length} actividades)
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<ActivitiesTable
|
||||
perActivity={resultAutomated!.perActivity}
|
||||
mode={heatmapMode}
|
||||
currency={process.currency}
|
||||
highlightedId={selectedIdAuto}
|
||||
onRowClick={handleTableRowClickAuto}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
<MethodologyFooter process={process} />
|
||||
<AppFooter />
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* ──────────────── TAB: COMPARACIÓN + ROI ──────────────────── */}
|
||||
<TabsContent value="roi">
|
||||
{!hasAutomatedResult || !roi ? (
|
||||
<NeedsResimulate processId={processId} />
|
||||
) : (
|
||||
<>
|
||||
{/* KPIs de ROI */}
|
||||
<RoiKpiBar
|
||||
roi={roi}
|
||||
currency={process.currency}
|
||||
horizonYears={process.analysisHorizonYears}
|
||||
/>
|
||||
|
||||
{/* Tabla de comparación actividad por actividad */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-base font-semibold text-slate-800 mb-4">
|
||||
Comparación por actividad
|
||||
</h2>
|
||||
<ComparisonTable
|
||||
perActivityActual={result.perActivity}
|
||||
perActivityAutomated={resultAutomated!.perActivity}
|
||||
automatableIds={automatableIds}
|
||||
currency={process.currency}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Gráficos: ahorro acumulado + top ahorros */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
|
||||
<h3 className="text-xs font-semibold text-slate-600 uppercase tracking-wide mb-4">
|
||||
Ahorro acumulado neto ({process.analysisHorizonYears} años)
|
||||
</h3>
|
||||
<CumulativeSavingsChart
|
||||
roi={roi}
|
||||
horizonYears={process.analysisHorizonYears}
|
||||
currency={process.currency}
|
||||
investment={process.automationInvestment}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
|
||||
<h3 className="text-xs font-semibold text-slate-600 uppercase tracking-wide mb-4">
|
||||
Top actividades por ahorro
|
||||
</h3>
|
||||
<TopSavingsChart
|
||||
perActivityActual={result.perActivity}
|
||||
perActivityAutomated={resultAutomated!.perActivity}
|
||||
currency={process.currency}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transparencia metodológica (condicional) */}
|
||||
<div className="mb-6">
|
||||
<TransparencySection
|
||||
activities={activities}
|
||||
investment={process.automationInvestment}
|
||||
roi={roi ?? undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
<MethodologyFooter process={process} />
|
||||
<AppFooter />
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Componente auxiliar: aviso cuando falta re-simular ───────────────────────
|
||||
|
||||
function NeedsResimulate({ processId }: { processId: string }) {
|
||||
const navigate = useNavigate()
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-4 py-20 text-center">
|
||||
<div className="w-12 h-12 bg-amber-50 rounded-full flex items-center justify-center">
|
||||
<Info className="h-6 w-6 text-amber-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-700 mb-1">
|
||||
Esta simulación no incluye el escenario automatizado
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 max-w-sm">
|
||||
Volvé al workspace y presioná "Simular" para generar ambos escenarios.
|
||||
</p>
|
||||
</div>
|
||||
<Button size="sm" onClick={() => navigate({ to: '/workspace/$processId', params: { processId } })}>
|
||||
Ir al workspace
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
128
src/features/report/RoiKpiBar.tsx
Normal file
128
src/features/report/RoiKpiBar.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import { TrendingDown, Calendar, DollarSign, Percent } from 'lucide-react'
|
||||
import { formatCurrency, formatPayback, formatPercent } from '@/lib/format'
|
||||
import type { RoiResult } from '@/domain/roi'
|
||||
|
||||
interface RoiKpiBarProps {
|
||||
roi: RoiResult
|
||||
currency: string
|
||||
horizonYears: number
|
||||
}
|
||||
|
||||
function RoiKpiHero({
|
||||
label, value, sub,
|
||||
}: {
|
||||
label: string
|
||||
value: string
|
||||
sub?: string
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-testid="roi-kpi-card"
|
||||
className="rounded-xl p-5 mb-4"
|
||||
style={{ background: 'linear-gradient(135deg, #F59845 0%, #ED3E8F 100%)' }}
|
||||
>
|
||||
<p className="text-xs font-semibold text-white/90 uppercase tracking-widest mb-1">{label}</p>
|
||||
<p className="text-3xl font-bold font-mono text-white leading-tight" style={{ letterSpacing: '-0.5px' }}>
|
||||
{value}
|
||||
</p>
|
||||
{sub && <p className="text-sm text-white/85 mt-1">{sub}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RoiKpiCard({
|
||||
label, value, sub, icon, iconColor, valueColor, compact,
|
||||
}: {
|
||||
label: string
|
||||
value: string
|
||||
sub?: string
|
||||
icon: React.ReactNode
|
||||
iconColor: string
|
||||
valueColor?: string
|
||||
compact?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div data-testid="roi-kpi-card" className="bg-white rounded-xl border border-slate-200 shadow-sm p-4 flex items-start gap-3">
|
||||
<div className={`shrink-0 p-2.5 rounded-lg ${iconColor}`}>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-1">{label}</p>
|
||||
<p className={`${compact ? 'text-sm' : 'text-xl'} font-bold font-mono leading-tight ${valueColor ?? 'text-slate-900'}`}>{value}</p>
|
||||
{sub && <p className="text-xs text-slate-400 mt-0.5 leading-snug">{sub}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function RoiKpiBar({ roi, currency, horizonYears }: RoiKpiBarProps) {
|
||||
const paybackStr = formatPayback(roi.paybackMonths)
|
||||
|
||||
const roiStr = !isFinite(roi.roiAnnualPercent)
|
||||
? '∞%'
|
||||
: formatPercent(roi.roiAnnualPercent)
|
||||
|
||||
const savingsPosColor = roi.savingsPerExecution > 0
|
||||
? 'text-emerald-700'
|
||||
: roi.savingsPerExecution < 0
|
||||
? 'text-red-600'
|
||||
: 'text-slate-900'
|
||||
|
||||
const annualPosColor = roi.annualSavings > 0
|
||||
? 'text-emerald-700'
|
||||
: roi.annualSavings < 0
|
||||
? 'text-red-600'
|
||||
: 'text-slate-900'
|
||||
|
||||
const cumulativeSub = roi.cumulativeSavingsHorizon > 0
|
||||
? `neto de inversión inicial · ${horizonYears} años`
|
||||
: 'sin recuperación neta en el horizonte'
|
||||
|
||||
return (
|
||||
<div className="mb-8">
|
||||
{/* KPI Hero — Ahorro proyectado a N años */}
|
||||
<RoiKpiHero
|
||||
label={`Ahorro proyectado a ${horizonYears} años`}
|
||||
value={formatCurrency(roi.cumulativeSavingsHorizon, currency)}
|
||||
sub={cumulativeSub}
|
||||
/>
|
||||
|
||||
{/* KPIs secundarios — grid 4 columnas */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<RoiKpiCard
|
||||
label="Ahorro por ejecución"
|
||||
value={formatCurrency(roi.savingsPerExecution, currency)}
|
||||
sub={`${formatPercent(roi.savingsPerExecutionPercent)} vs. escenario actual`}
|
||||
icon={<TrendingDown className="h-4 w-4 text-emerald-600" />}
|
||||
iconColor="bg-emerald-50"
|
||||
valueColor={savingsPosColor}
|
||||
/>
|
||||
<RoiKpiCard
|
||||
label="Ahorro anual"
|
||||
value={formatCurrency(roi.annualSavings, currency)}
|
||||
sub="sobre la frecuencia configurada"
|
||||
icon={<DollarSign className="h-4 w-4 text-emerald-600" />}
|
||||
iconColor="bg-emerald-50"
|
||||
valueColor={annualPosColor}
|
||||
/>
|
||||
<RoiKpiCard
|
||||
label="Payback"
|
||||
value={paybackStr}
|
||||
sub={roi.breaksEvenInHorizon ? '✓ Dentro del horizonte' : 'Fuera del horizonte de análisis'}
|
||||
icon={<Calendar className="h-4 w-4 text-primary" />}
|
||||
iconColor="bg-primary/10"
|
||||
valueColor={roi.breaksEvenInHorizon ? 'text-emerald-700' : 'text-slate-900'}
|
||||
compact
|
||||
/>
|
||||
<RoiKpiCard
|
||||
label="ROI anual"
|
||||
value={roiStr}
|
||||
sub="retorno anual sobre la inversión"
|
||||
icon={<Percent className="h-4 w-4 text-amber-600" />}
|
||||
iconColor="bg-amber-50"
|
||||
valueColor={roi.roiAnnualPercent > 0 ? 'text-emerald-700' : roi.roiAnnualPercent < 0 ? 'text-red-600' : 'text-slate-900'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
95
src/features/report/TopSavingsChart.tsx
Normal file
95
src/features/report/TopSavingsChart.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { useMemo } from 'react'
|
||||
import ReactECharts from 'echarts-for-react'
|
||||
import { formatCurrency } from '@/lib/format'
|
||||
import type { ActivitySimResult } from '@/domain/types'
|
||||
|
||||
interface TopSavingsChartProps {
|
||||
perActivityActual: ActivitySimResult[]
|
||||
perActivityAutomated: ActivitySimResult[]
|
||||
currency: string
|
||||
}
|
||||
|
||||
function truncate(s: string, max: number) {
|
||||
return s.length > max ? s.slice(0, max - 1) + '…' : s
|
||||
}
|
||||
|
||||
export function TopSavingsChart({
|
||||
perActivityActual,
|
||||
perActivityAutomated,
|
||||
currency,
|
||||
}: TopSavingsChartProps) {
|
||||
const option = useMemo(() => {
|
||||
const automatedMap = new Map(perActivityAutomated.map((a) => [a.activityId, a]))
|
||||
|
||||
const top5 = perActivityActual
|
||||
.map((act) => {
|
||||
const auto = automatedMap.get(act.activityId)
|
||||
const savings = act.expectedTotalCost - (auto?.expectedTotalCost ?? act.expectedTotalCost)
|
||||
return { name: act.activityName, value: savings }
|
||||
})
|
||||
.filter((s) => s.value > 0)
|
||||
.sort((a, b) => b.value - a.value)
|
||||
.slice(0, 5)
|
||||
|
||||
if (top5.length === 0) return null
|
||||
|
||||
const reversed = [...top5].reverse()
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
formatter: (params: unknown[]) => {
|
||||
const p = params[0] as { name: string; value: number }
|
||||
return `<div style="font-size:12px"><b>${p.name}</b><br/>Ahorro: <strong>${formatCurrency(p.value, currency)}</strong></div>`
|
||||
},
|
||||
},
|
||||
grid: { left: 12, right: 32, top: 8, bottom: 8, containLabel: true },
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
formatter: (v: number) => {
|
||||
if (v === 0) return '0'
|
||||
if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`
|
||||
if (v >= 1_000) return `${(v / 1_000).toFixed(0)}k`
|
||||
return String(v)
|
||||
},
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#f1f5f9' } },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: reversed.map((s) => truncate(s.name, 22)),
|
||||
axisLabel: { fontSize: 10, color: '#64748b' },
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: reversed.map((s) => s.value),
|
||||
barMaxWidth: 32,
|
||||
itemStyle: { color: '#16A34A', borderRadius: [0, 4, 4, 0] },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: 10,
|
||||
formatter: (p: { value: number }) => formatCurrency(p.value, currency),
|
||||
color: '#16A34A',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}, [perActivityActual, perActivityAutomated, currency])
|
||||
|
||||
if (!option) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-48 text-xs text-slate-400">
|
||||
Sin actividades con ahorro positivo
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return <ReactECharts option={option} style={{ height: Math.max(180, option.yAxis.data.length * 48) }} notMerge />
|
||||
}
|
||||
91
src/features/report/TransparencySection.tsx
Normal file
91
src/features/report/TransparencySection.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import { AlertTriangle } from 'lucide-react'
|
||||
import { formatPercent } from '@/lib/format'
|
||||
import type { Activity } from '@/domain/types'
|
||||
import type { RoiResult } from '@/domain/roi'
|
||||
|
||||
// Umbral de ROI a partir del cual se dispara la advertencia de verosimilitud.
|
||||
// Un ROI > 1000% anual es matemáticamente posible pero comercialmente inverosímil:
|
||||
// indica casi siempre un input incorrecto (frecuencia sobreestimada, costo auto subestimado
|
||||
// o inversión subestimada). Documentado en METHODOLOGY_AUTOMATED_COST.md.
|
||||
const ROI_HIGH_THRESHOLD = 1000
|
||||
|
||||
interface TransparencySectionProps {
|
||||
activities: Activity[]
|
||||
investment: number
|
||||
roi?: RoiResult
|
||||
}
|
||||
|
||||
export function TransparencySection({ activities, investment, roi }: TransparencySectionProps) {
|
||||
const zeroCostAutomatable = activities.filter(
|
||||
(a) => a.automatable && a.automatedCostFixed === 0 && a.automatedTimeMinutes === 0
|
||||
)
|
||||
const investmentIsZero = investment === 0
|
||||
|
||||
// Caso 4: ROI > 1000% finito (Infinity no aplica — ya lo cubre el caso de investment=0)
|
||||
const roiIsUnusuallyHigh =
|
||||
roi !== undefined &&
|
||||
Number.isFinite(roi.roiAnnualPercent) &&
|
||||
roi.roiAnnualPercent > ROI_HIGH_THRESHOLD
|
||||
|
||||
if (zeroCostAutomatable.length === 0 && !investmentIsZero && !roiIsUnusuallyHigh) return null
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-amber-200 bg-amber-50 p-5 space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-4 w-4 text-amber-600 shrink-0" />
|
||||
<h3 className="text-sm font-semibold text-amber-800">Transparencia metodológica</h3>
|
||||
</div>
|
||||
|
||||
{zeroCostAutomatable.length > 0 && (
|
||||
<div className="text-xs text-amber-700 leading-relaxed space-y-1.5">
|
||||
<p className="font-medium">
|
||||
{zeroCostAutomatable.length === 1
|
||||
? '1 actividad automatizable sin costo configurado:'
|
||||
: `${zeroCostAutomatable.length} actividades automatizables sin costo configurado:`}
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-0.5 ml-1">
|
||||
{zeroCostAutomatable.map((a) => (
|
||||
<li key={a.id} className="font-mono">
|
||||
{a.name || a.bpmnElementId}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="text-amber-600">
|
||||
Estas actividades se incluyen en el escenario automatizado con costo cero, lo que puede
|
||||
inflar artificialmente el ahorro calculado. Configurá sus costos en el workspace para
|
||||
un análisis realista.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{investmentIsZero && (
|
||||
<p className="text-xs text-amber-700 leading-relaxed">
|
||||
<span className="font-medium">Inversión en automatización no configurada.</span>{' '}
|
||||
El payback aparece como inmediato y el ROI como infinito porque no hay inversión inicial.
|
||||
Configurá la inversión total en la tab "Global" del workspace para un análisis
|
||||
financiero completo.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{roiIsUnusuallyHigh && roi && (
|
||||
<div className="text-xs text-amber-700 leading-relaxed space-y-1.5">
|
||||
<p>
|
||||
<span className="font-medium">
|
||||
ROI inusualmente alto detectado: {formatPercent(roi.roiAnnualPercent)}.
|
||||
</span>{' '}
|
||||
Un ROI superior al {formatPercent(ROI_HIGH_THRESHOLD, 0)} anual suele indicar uno de estos casos:
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-0.5 ml-1">
|
||||
<li>Frecuencia anual del proceso sobreestimada</li>
|
||||
<li>Costo automatizado por ejecución subestimado</li>
|
||||
<li>Inversión en automatización subestimada</li>
|
||||
</ul>
|
||||
<p className="text-amber-600">
|
||||
Revisá estos inputs antes de presentar el reporte al cliente.
|
||||
Ver <span className="font-mono">METHODOLOGY_AUTOMATED_COST.md</span> para guía de estimación.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,14 +1,12 @@
|
||||
import { useCallback } from 'react'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { useProcessStore } from '@/store/process-store'
|
||||
import { useSimulationStore } from '@/store/simulation-store'
|
||||
import { runSimulation } from '@/domain/simulation'
|
||||
import { simulationRepo } from '@/persistence/repositories'
|
||||
import type { SimulationInput } from '@/domain/types'
|
||||
|
||||
export function useSimulate() {
|
||||
const { currentProcess, activities, gateways, resources } = useProcessStore()
|
||||
const { setResult, setRunning, setError } = useSimulationStore()
|
||||
const { persistResults, setRunning, setError } = useSimulationStore()
|
||||
|
||||
const simulate = useCallback(async () => {
|
||||
if (!currentProcess) {
|
||||
@@ -20,7 +18,7 @@ export function useSimulate() {
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const input: SimulationInput = {
|
||||
const baseInput: Omit<SimulationInput, 'scenario'> = {
|
||||
processXml: currentProcess.bpmnXml,
|
||||
activities: new Map(activities.map((a) => [a.bpmnElementId, a])),
|
||||
gateways: new Map(gateways.map((g) => [g.bpmnElementId, g])),
|
||||
@@ -31,26 +29,20 @@ export function useSimulate() {
|
||||
},
|
||||
}
|
||||
|
||||
const result = runSimulation(input)
|
||||
// Las dos simulaciones se computan y persisten SIEMPRE en conjunto (regla dura).
|
||||
const resultActual = runSimulation({ ...baseInput, scenario: 'actual' })
|
||||
const resultAutomated = runSimulation({ ...baseInput, scenario: 'automated' })
|
||||
|
||||
const simulation = {
|
||||
id: uuidv4(),
|
||||
processId: currentProcess.id,
|
||||
executedAt: Date.now(),
|
||||
result,
|
||||
}
|
||||
|
||||
await simulationRepo.save(simulation)
|
||||
setResult(result)
|
||||
await persistResults(currentProcess.id, resultActual, resultAutomated)
|
||||
setRunning(false)
|
||||
return result
|
||||
return { resultActual, resultAutomated }
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Error en la simulación'
|
||||
setError(message)
|
||||
setRunning(false)
|
||||
return null
|
||||
}
|
||||
}, [currentProcess, activities, gateways, resources, setResult, setRunning, setError])
|
||||
}, [currentProcess, activities, gateways, resources, persistResults, setRunning, setError])
|
||||
|
||||
return { simulate }
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { PlusCircle, Trash2, Info } from 'lucide-react'
|
||||
import { PlusCircle, Trash2, Info, AlertTriangle } from 'lucide-react'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Button } from '@/components/ui/button'
|
||||
@@ -7,6 +7,8 @@ import { Slider } from '@/components/ui/slider'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { useProcessStore } from '@/store/process-store'
|
||||
import { formatCurrency } from '@/lib/format'
|
||||
import type { Activity } from '@/domain/types'
|
||||
@@ -122,7 +124,7 @@ export function ActivityPanel({ selectedElementId }: ActivityPanelProps) {
|
||||
type="number"
|
||||
min={0}
|
||||
step={10}
|
||||
value={localActivity.directCostFixed}
|
||||
value={localActivity.directCostFixed === 0 ? '' : localActivity.directCostFixed}
|
||||
onChange={(e) => handleChange('directCostFixed', Math.max(0, parseFloat(e.target.value) || 0))}
|
||||
className="font-mono h-8 text-sm"
|
||||
placeholder="0"
|
||||
@@ -147,7 +149,7 @@ export function ActivityPanel({ selectedElementId }: ActivityPanelProps) {
|
||||
type="number"
|
||||
min={0}
|
||||
step={5}
|
||||
value={localActivity.executionTimeMinutes}
|
||||
value={localActivity.executionTimeMinutes === 0 ? '' : localActivity.executionTimeMinutes}
|
||||
onChange={(e) => handleChange('executionTimeMinutes', Math.max(0, parseFloat(e.target.value) || 0))}
|
||||
className="font-mono h-8 text-sm"
|
||||
placeholder="0"
|
||||
@@ -226,6 +228,101 @@ export function ActivityPanel({ selectedElementId }: ActivityPanelProps) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Sección: Automatización ──────────────────────────────────── */}
|
||||
<div>
|
||||
<Separator className="mb-4" />
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Automatización</p>
|
||||
|
||||
{/* Toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="automatable-toggle" className="text-xs font-medium cursor-pointer">
|
||||
¿Es automatizable?
|
||||
</Label>
|
||||
<Switch
|
||||
id="automatable-toggle"
|
||||
checked={localActivity.automatable}
|
||||
onCheckedChange={(v) => handleChange('automatable', v)}
|
||||
aria-label="Marcar actividad como automatizable"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Campos — aparecen con transición suave cuando toggle=ON */}
|
||||
<div className={`space-y-3 overflow-hidden transition-all duration-200 ${localActivity.automatable ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0'}`}>
|
||||
|
||||
{/* Costo automatizado */}
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Label htmlFor="automated-cost" className="text-xs font-medium">
|
||||
Costo automatizado
|
||||
</Label>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3 w-3 text-slate-400 cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" className="max-w-56 text-xs">
|
||||
Costo recurrente por ejecución automatizada. No incluye la inversión inicial del proyecto.
|
||||
Ver METHODOLOGY_AUTOMATED_COST.md para la guía de cálculo.
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Input
|
||||
id="automated-cost"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
value={localActivity.automatedCostFixed === 0 ? '' : localActivity.automatedCostFixed}
|
||||
onChange={(e) => handleChange('automatedCostFixed', Math.max(0, parseFloat(e.target.value) || 0))}
|
||||
className="font-mono h-8 text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tiempo automatizado */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="automated-time" className="text-xs font-medium">
|
||||
Tiempo automatizado (min)
|
||||
</Label>
|
||||
<Input
|
||||
id="automated-time"
|
||||
type="number"
|
||||
min={0}
|
||||
step={1}
|
||||
value={localActivity.automatedTimeMinutes === 0 ? '' : localActivity.automatedTimeMinutes}
|
||||
onChange={(e) => handleChange('automatedTimeMinutes', Math.max(0, parseFloat(e.target.value) || 0))}
|
||||
className="font-mono h-8 text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Helper ámbar — siempre en el DOM para que la transición funcione
|
||||
al tipear un valor (no desaparece instantáneo sino con fade).
|
||||
La condición controla opacity + max-h, no mount/unmount. */}
|
||||
{(() => {
|
||||
const showHelper = localActivity.automatable
|
||||
&& localActivity.automatedCostFixed === 0
|
||||
&& localActivity.automatedTimeMinutes === 0
|
||||
return (
|
||||
<div
|
||||
aria-hidden={!showHelper}
|
||||
className={`overflow-hidden transition-all duration-150 ease-out ${
|
||||
showHelper ? 'opacity-100 max-h-20' : 'opacity-0 max-h-0'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-2 rounded-lg bg-amber-50 border border-amber-200 px-3 py-2">
|
||||
<AlertTriangle className="h-3.5 w-3.5 text-amber-600 shrink-0 mt-0.5" />
|
||||
<p className="text-xs text-amber-700 leading-snug">
|
||||
Esta actividad aparecerá en "Transparencia metodológica" del reporte hasta que cargues valores.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Guardar */}
|
||||
<Button
|
||||
size="sm"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { useEffect, useRef, useCallback } from 'react'
|
||||
import BpmnViewer from 'bpmn-js/lib/Viewer'
|
||||
|
||||
export type BpmnElementCategory = 'activity' | 'gateway' | 'other'
|
||||
@@ -19,37 +19,117 @@ function classifyElement(type: string): BpmnElementCategory {
|
||||
return 'other'
|
||||
}
|
||||
|
||||
// SVG inline del ícono Bot de Lucide (12×12 px, color ámbar #f59e0b).
|
||||
// Copiado de lucide.dev/icons/bot — robot con antena, cuerpo rectangular y ojos.
|
||||
const BOT_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 8V4H8"/>
|
||||
<rect width="16" height="12" x="4" y="8" rx="2"/>
|
||||
<path d="M2 14h2"/>
|
||||
<path d="M20 14h2"/>
|
||||
<path d="M15 13v2"/>
|
||||
<path d="M9 13v2"/>
|
||||
</svg>`
|
||||
|
||||
// HTML del badge de automatización.
|
||||
// Fondo #fffbeb (amber-50): identidad cromática con el ícono Bot ámbar,
|
||||
// contrasta con el fondo blanco de los nodos BPMN.
|
||||
function makeBadgeHtml(): string {
|
||||
return `<div title="Actividad marcada como automatizable" style="
|
||||
width:20px;height:20px;
|
||||
border-radius:50%;
|
||||
background:#fffbeb;
|
||||
border:1px solid #e2e8f0;
|
||||
box-shadow:0 1px 3px rgba(0,0,0,0.12);
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
cursor:default;
|
||||
pointer-events:none;
|
||||
">${BOT_SVG}</div>`
|
||||
}
|
||||
|
||||
// Identificador del tipo de overlay para poder remover solo los nuestros.
|
||||
const OVERLAY_TYPE = 'automation-indicator'
|
||||
|
||||
interface BpmnCanvasProps {
|
||||
xml: string
|
||||
onElementClick?: (elementId: string, elementName: string, category: BpmnElementCategory) => void
|
||||
selectedElementId?: string | null
|
||||
automatableElementIds?: string[] // IDs de actividades marcadas como automatizables
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function BpmnCanvas({ xml, onElementClick, selectedElementId, className }: BpmnCanvasProps) {
|
||||
export function BpmnCanvas({
|
||||
xml,
|
||||
onElementClick,
|
||||
selectedElementId,
|
||||
automatableElementIds = [],
|
||||
className,
|
||||
}: BpmnCanvasProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const viewerRef = useRef<InstanceType<typeof BpmnViewer> | null>(null)
|
||||
const isImportedRef = useRef(false)
|
||||
|
||||
// ─── Inicializar viewer ────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return
|
||||
const viewer = new BpmnViewer({ container: containerRef.current })
|
||||
viewerRef.current = viewer
|
||||
return () => {
|
||||
isImportedRef.current = false
|
||||
viewer.destroy()
|
||||
viewerRef.current = null
|
||||
}
|
||||
}, [])
|
||||
|
||||
// ─── Sincronizar overlays de automatización ───────────────────────────────
|
||||
const syncAutomationOverlays = useCallback(() => {
|
||||
const viewer = viewerRef.current
|
||||
if (!viewer || !isImportedRef.current) return
|
||||
|
||||
const overlays = viewer.get('overlays') as any
|
||||
const reg = viewer.get('elementRegistry') as any
|
||||
|
||||
// Remover overlays anteriores del tipo propio antes de re-agregar
|
||||
overlays.remove({ type: OVERLAY_TYPE })
|
||||
|
||||
for (const elementId of automatableElementIds) {
|
||||
try {
|
||||
// Leer el ancho real del elemento para posicionar el badge en la
|
||||
// esquina superior derecha con overlap: left = width - 12 pone el
|
||||
// borde derecho del badge 8px fuera del borde derecho del nodo.
|
||||
// (right: -8 en la API tiene semántica distinta: left = -right + width
|
||||
// con -8 daría left = 8 + width, enteramente fuera del nodo.)
|
||||
const el = reg?.get(elementId)
|
||||
const width = el?.width ?? 100
|
||||
overlays.add(elementId, OVERLAY_TYPE, {
|
||||
position: { top: -8, left: width - 12 },
|
||||
html: makeBadgeHtml(),
|
||||
})
|
||||
} catch {
|
||||
// El elemento puede no existir en el diagrama actual — ignorar
|
||||
}
|
||||
}
|
||||
}, [automatableElementIds])
|
||||
|
||||
// ─── Importar XML ──────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
const viewer = viewerRef.current
|
||||
if (!viewer || !xml) return
|
||||
isImportedRef.current = false
|
||||
viewer.importXML(xml).then(({ warnings }) => {
|
||||
if (warnings.length) console.warn('bpmn-js warnings:', warnings)
|
||||
const canvas = viewer.get('canvas') as any
|
||||
canvas.zoom('fit-viewport', 'auto')
|
||||
isImportedRef.current = true
|
||||
syncAutomationOverlays()
|
||||
}).catch((err: Error) => console.error('Error cargando BPMN:', err))
|
||||
}, [xml])
|
||||
}, [xml, syncAutomationOverlays])
|
||||
|
||||
// ─── Re-sincronizar overlays cuando cambia la lista de automatizables ─────
|
||||
useEffect(() => {
|
||||
syncAutomationOverlays()
|
||||
}, [syncAutomationOverlays])
|
||||
|
||||
// ─── Click handler ─────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
const viewer = viewerRef.current
|
||||
if (!viewer || !onElementClick) return
|
||||
@@ -67,6 +147,7 @@ export function BpmnCanvas({ xml, onElementClick, selectedElementId, className }
|
||||
return () => eventBus.off('element.click', handler)
|
||||
}, [onElementClick])
|
||||
|
||||
// ─── Highlight del elemento seleccionado ──────────────────────────────────
|
||||
useEffect(() => {
|
||||
const viewer = viewerRef.current
|
||||
if (!viewer) return
|
||||
|
||||
@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { useProcessStore } from '@/store/process-store'
|
||||
import { formatPercent } from '@/lib/format'
|
||||
@@ -27,6 +28,9 @@ export function GlobalSettingsPanel() {
|
||||
const [localClient, setLocalClient] = useState('')
|
||||
const [localCurrency, setLocalCurrency] = useState('USD')
|
||||
const [localOverhead, setLocalOverhead] = useState(20)
|
||||
const [localFrequency, setLocalFrequency] = useState(1000)
|
||||
const [localHorizon, setLocalHorizon] = useState(3)
|
||||
const [localInvestment, setLocalInvestment] = useState(0)
|
||||
const [isDirty, setIsDirty] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -35,18 +39,26 @@ export function GlobalSettingsPanel() {
|
||||
setLocalClient(currentProcess.clientName)
|
||||
setLocalCurrency(currentProcess.currency)
|
||||
setLocalOverhead(Math.round(currentProcess.overheadPercentage * 100))
|
||||
setLocalFrequency(currentProcess.annualFrequency)
|
||||
setLocalHorizon(currentProcess.analysisHorizonYears)
|
||||
setLocalInvestment(currentProcess.automationInvestment)
|
||||
setIsDirty(false)
|
||||
}, [currentProcess])
|
||||
|
||||
function markDirty() { setIsDirty(true) }
|
||||
|
||||
async function handleSave() {
|
||||
const clampedHorizon = Math.min(10, Math.max(1, localHorizon))
|
||||
await updateProcess({
|
||||
name: localName.trim() || 'Proceso sin nombre',
|
||||
clientName: localClient.trim(),
|
||||
currency: localCurrency,
|
||||
overheadPercentage: localOverhead / 100,
|
||||
annualFrequency: Math.max(1, localFrequency),
|
||||
analysisHorizonYears: clampedHorizon,
|
||||
automationInvestment: Math.max(0, localInvestment),
|
||||
})
|
||||
setLocalHorizon(clampedHorizon)
|
||||
setIsDirty(false)
|
||||
}
|
||||
|
||||
@@ -125,6 +137,99 @@ export function GlobalSettingsPanel() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ── Sección: Análisis de Impacto ──────────────────────────────── */}
|
||||
<div>
|
||||
<Separator className="mb-4" />
|
||||
<div className="space-y-4">
|
||||
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Análisis de Impacto</p>
|
||||
|
||||
{/* Frecuencia anual */}
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Label htmlFor="annual-frequency" className="text-xs font-medium">
|
||||
Frecuencia anual
|
||||
</Label>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3 w-3 text-slate-400 cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" className="max-w-52 text-xs">
|
||||
Cantidad de veces que se ejecuta el proceso completo por año. Se usa para anualizar los costos y calcular el ahorro.
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Input
|
||||
id="annual-frequency"
|
||||
type="number"
|
||||
min={1}
|
||||
max={10_000_000}
|
||||
step={1}
|
||||
value={localFrequency === 0 ? '' : localFrequency}
|
||||
onChange={(e) => { setLocalFrequency(Math.max(1, parseInt(e.target.value) || 1)); markDirty() }}
|
||||
className="font-mono h-8 text-sm"
|
||||
placeholder="1000"
|
||||
/>
|
||||
<p className="text-[10px] text-slate-400">
|
||||
Ejemplos: 12 (mensual) · 52 (semanal) · 250 (diario laboral) · 8760 (cada hora)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Horizonte de análisis */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Label className="text-xs font-medium">Horizonte de análisis</Label>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3 w-3 text-slate-400 cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" className="max-w-52 text-xs">
|
||||
Años hasta los que se proyecta el ahorro acumulado. Determina el eje X del gráfico de ROI.
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<span className="text-sm font-mono font-semibold text-slate-700">
|
||||
{localHorizon} {localHorizon === 1 ? 'año' : 'años'}
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[localHorizon]}
|
||||
min={1}
|
||||
max={10}
|
||||
step={1}
|
||||
onValueChange={([v]) => { setLocalHorizon(v); markDirty() }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Inversión en automatización */}
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Label htmlFor="automation-investment" className="text-xs font-medium">
|
||||
Inversión en automatización
|
||||
</Label>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-3 w-3 text-slate-400 cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" className="max-w-56 text-xs">
|
||||
Costo único total del proyecto: desarrollo, licencias, implementación, capacitación. No incluir costos recurrentes.
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Input
|
||||
id="automation-investment"
|
||||
type="number"
|
||||
min={0}
|
||||
step={100}
|
||||
value={localInvestment === 0 ? '' : localInvestment}
|
||||
onChange={(e) => { setLocalInvestment(Math.max(0, parseFloat(e.target.value) || 0)); markDirty() }}
|
||||
className="font-mono h-8 text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Guardar */}
|
||||
<Button
|
||||
size="sm"
|
||||
|
||||
@@ -19,7 +19,7 @@ const RESOURCE_TYPE_LABELS: Record<ResourceType, string> = {
|
||||
}
|
||||
|
||||
const RESOURCE_TYPE_COLORS: Record<ResourceType, string> = {
|
||||
role: 'bg-blue-100 text-blue-700',
|
||||
role: 'bg-slate-100 text-slate-600',
|
||||
person: 'bg-green-100 text-green-700',
|
||||
system: 'bg-purple-100 text-purple-700',
|
||||
equipment: 'bg-amber-100 text-amber-700',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useRef, useState, useCallback, useMemo } from 'react'
|
||||
import { useEffect, useRef, useState, useCallback, useMemo, useDeferredValue } from 'react'
|
||||
import { useParams, useNavigate } from '@tanstack/react-router'
|
||||
import {
|
||||
Loader2, BarChart3, Play, AlertTriangle,
|
||||
@@ -23,8 +23,8 @@ type SelectedCategory = 'activity' | 'gateway' | null
|
||||
export function WorkspacePage() {
|
||||
const { processId } = useParams({ from: '/workspace/$processId' })
|
||||
const navigate = useNavigate()
|
||||
const { currentProcess, isLoading, error, loadProcess, gateways } = useProcessStore()
|
||||
const { isRunning, result, error: simError, selectActivity } = useSimulationStore()
|
||||
const { currentProcess, activities, isLoading, error, loadProcess, gateways } = useProcessStore()
|
||||
const { isRunning, resultActual, error: simError, selectActivity } = useSimulationStore()
|
||||
const { simulate } = useSimulate()
|
||||
const { toast } = useToast()
|
||||
|
||||
@@ -64,6 +64,14 @@ export function WorkspacePage() {
|
||||
|
||||
const canSimulate = !isRunning && xorValidation.valid
|
||||
|
||||
// IDs de actividades marcadas como automatizables — alimenta los overlays del canvas.
|
||||
// useDeferredValue evita re-renders en cascada mientras el usuario edita el panel.
|
||||
const automatableElementIds = useMemo(
|
||||
() => activities.filter((a) => a.automatable).map((a) => a.bpmnElementId),
|
||||
[activities]
|
||||
)
|
||||
const deferredAutomatableIds = useDeferredValue(automatableElementIds)
|
||||
|
||||
const handleElementClick = useCallback((
|
||||
elementId: string,
|
||||
elementName: string,
|
||||
@@ -91,6 +99,8 @@ export function WorkspacePage() {
|
||||
if (simResult) navigate({ to: '/report/$processId', params: { processId } })
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
@@ -161,7 +171,7 @@ export function WorkspacePage() {
|
||||
)}
|
||||
|
||||
{/* Ver reporte si ya hay simulación */}
|
||||
{result && (
|
||||
{resultActual && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@@ -223,6 +233,7 @@ export function WorkspacePage() {
|
||||
xml={currentProcess.bpmnXml}
|
||||
onElementClick={handleElementClick}
|
||||
selectedElementId={selectedElementId}
|
||||
automatableElementIds={deferredAutomatableIds}
|
||||
className="absolute inset-0"
|
||||
/>
|
||||
|
||||
|
||||
@@ -120,7 +120,7 @@ export function buildCostCompositionOption(
|
||||
labelLine: { length: 10, length2: 8 },
|
||||
emphasis: { label: { fontSize: 13, fontWeight: 'bold' } },
|
||||
data: [
|
||||
{ value: result.totalDirectCost, name: 'Costo directo', itemStyle: { color: '#3b82f6' } },
|
||||
{ value: result.totalDirectCost, name: 'Costo directo', itemStyle: { color: '#F59845' } },
|
||||
...(hasIndirect ? [{ value: result.totalIndirectCost, name: 'Costo indirecto (overhead)', itemStyle: { color: '#94a3b8' } }] : []),
|
||||
],
|
||||
}],
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
// Paleta heatmap: verde → amarillo → rojo
|
||||
// INVARIANTE: estos valores DEBEN coincidir con tailwind.config.js heatmap.*
|
||||
const HEATMAP_LOW = { r: 16, g: 185, b: 129 } // #10b981
|
||||
const HEATMAP_MID = { r: 245, g: 158, b: 11 } // #f59e0b
|
||||
const HEATMAP_HIGH = { r: 239, g: 68, b: 68 } // #ef4444
|
||||
|
||||
export const HEATMAP_LOW_HEX = '#10b981'
|
||||
export const HEATMAP_MID_HEX = '#f59e0b'
|
||||
export const HEATMAP_HIGH_HEX = '#ef4444'
|
||||
|
||||
function lerp(a: number, b: number, t: number): number {
|
||||
return Math.round(a + (b - a) * t)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import Papa from 'papaparse'
|
||||
import { formatSimulationTimestamp } from '@/lib/format'
|
||||
import { formatPayback, formatSimulationTimestamp } from '@/lib/format'
|
||||
import { calculateRoi } from '@/domain/roi'
|
||||
import { buildFileName } from './slug'
|
||||
import type { Process, Simulation, Resource, ActivitySimResult } from '@/domain/types'
|
||||
import type { Process, Simulation, Resource, Activity, ActivitySimResult } from '@/domain/types'
|
||||
|
||||
export type ReportTab = 'actual' | 'automatizado' | 'roi'
|
||||
|
||||
// Monedas que usan coma como separador decimal (necesitan punto y coma en el CSV)
|
||||
const COMMA_DECIMAL_CURRENCIES = new Set(['PYG', 'BRL', 'EUR', 'ARS', 'COP', 'MXN', 'CLP'])
|
||||
@@ -18,19 +21,11 @@ function formatDecimalForCsv(value: number, currency: string): string {
|
||||
return formatted
|
||||
}
|
||||
|
||||
function buildResourcesCell(
|
||||
act: ActivitySimResult,
|
||||
resources: Resource[]
|
||||
): string {
|
||||
function buildResourcesCell(act: ActivitySimResult, resources: Resource[]): string {
|
||||
if (act.resourceCostBreakdown.length === 0) return ''
|
||||
const resourceById = new Map(resources.map((r) => [r.id, r]))
|
||||
return act.resourceCostBreakdown
|
||||
.map((rb) => {
|
||||
const res = resourceById.get(rb.resourceId)
|
||||
if (!res) return rb.resourceName
|
||||
// Calcular % de utilización desde el costo relativo
|
||||
return res.name
|
||||
})
|
||||
.map((rb) => resourceById.get(rb.resourceId)?.name ?? rb.resourceName)
|
||||
.join('; ')
|
||||
}
|
||||
|
||||
@@ -38,42 +33,43 @@ export interface CsvExportParams {
|
||||
process: Process
|
||||
simulation: Simulation
|
||||
resources: Resource[]
|
||||
tab?: ReportTab // default: 'actual'
|
||||
activities?: Activity[] // requerido para tab='roi'
|
||||
}
|
||||
|
||||
export function generateCsvContent(params: CsvExportParams): string {
|
||||
const { process, simulation, resources } = params
|
||||
const { process, simulation, resources, tab = 'actual', activities = [] } = params
|
||||
const { currency } = process
|
||||
const result = simulation.result
|
||||
|
||||
if (tab === 'roi') {
|
||||
return generateRoiCsvContent(process, simulation, resources, activities, currency)
|
||||
}
|
||||
|
||||
const result = tab === 'automatizado'
|
||||
? (simulation.resultAutomated ?? simulation.result)
|
||||
: simulation.result
|
||||
|
||||
const delimiter = getDelimiter(currency)
|
||||
const { date } = formatSimulationTimestamp(simulation.executedAt)
|
||||
|
||||
// ── Filas de metadata como comentarios ──────────────────────────────────
|
||||
const meta = [
|
||||
`# Proceso: ${process.name}`,
|
||||
`# Cliente: ${process.clientName || 'N/A'}`,
|
||||
`# Fecha simulación: ${date}`,
|
||||
`# Moneda: ${currency}`,
|
||||
`# Escenario: ${tab === 'automatizado' ? 'Automatizado' : 'Actual'}`,
|
||||
`# Costo total (${currency}): ${formatDecimalForCsv(result.totalCost, currency)}`,
|
||||
`# Costo directo: ${formatDecimalForCsv(result.totalDirectCost, currency)}`,
|
||||
`# Costo indirecto (overhead ${(process.overheadPercentage * 100).toFixed(0)}%): ${formatDecimalForCsv(result.totalIndirectCost, currency)}`,
|
||||
'',
|
||||
].join('\r\n')
|
||||
|
||||
// ── Headers ──────────────────────────────────────────────────────────────
|
||||
const headers = [
|
||||
'ID BPMN',
|
||||
'Actividad',
|
||||
'Tipo',
|
||||
`Costo directo (${currency})`,
|
||||
`Costo indirecto (${currency})`,
|
||||
`Costo total (${currency})`,
|
||||
'% del total',
|
||||
'Tiempo (min)',
|
||||
'Ejecuciones esperadas',
|
||||
'Recursos asignados',
|
||||
'ID BPMN', 'Actividad', 'Tipo',
|
||||
`Costo directo (${currency})`, `Costo indirecto (${currency})`, `Costo total (${currency})`,
|
||||
'% del total', 'Tiempo (min)', 'Ejecuciones esperadas', 'Recursos asignados',
|
||||
]
|
||||
|
||||
// ── Filas ─────────────────────────────────────────────────────────────────
|
||||
const rows = result.perActivity.map((act) => [
|
||||
act.bpmnElementId,
|
||||
act.activityName,
|
||||
@@ -87,22 +83,130 @@ export function generateCsvContent(params: CsvExportParams): string {
|
||||
buildResourcesCell(act, resources),
|
||||
])
|
||||
|
||||
const csvBody = Papa.unparse(
|
||||
{ fields: headers, data: rows },
|
||||
{ delimiter, newline: '\r\n', quotes: true }
|
||||
)
|
||||
const csvBody = Papa.unparse({ fields: headers, data: rows }, { delimiter, newline: '\r\n', quotes: true })
|
||||
return '' + meta + csvBody
|
||||
}
|
||||
|
||||
// BOM UTF-8 + metadata + datos
|
||||
// ─── CSV de ROI: 16 columnas + metadata extendida ────────────────────────────
|
||||
|
||||
function generateRoiCsvContent(
|
||||
process: Process,
|
||||
simulation: Simulation,
|
||||
resources: Resource[],
|
||||
activities: Activity[],
|
||||
currency: string
|
||||
): string {
|
||||
const resultActual = simulation.result
|
||||
const resultAutomated = simulation.resultAutomated ?? simulation.result
|
||||
const delimiter = getDelimiter(currency)
|
||||
const { date } = formatSimulationTimestamp(simulation.executedAt)
|
||||
|
||||
const roi = calculateRoi({
|
||||
costPerExecutionActual: resultActual.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
annualFrequency: process.annualFrequency,
|
||||
analysisHorizonYears: process.analysisHorizonYears,
|
||||
automationInvestment: process.automationInvestment,
|
||||
})
|
||||
|
||||
const roiStr = !Number.isFinite(roi.roiAnnualPercent)
|
||||
? 'Infinito'
|
||||
: formatDecimalForCsv(roi.roiAnnualPercent, currency)
|
||||
|
||||
const meta = [
|
||||
`# Proceso: ${process.name}`,
|
||||
`# Cliente: ${process.clientName || 'N/A'}`,
|
||||
`# Fecha simulación: ${date}`,
|
||||
`# Moneda: ${currency}`,
|
||||
`# Costo total actual (${currency}): ${formatDecimalForCsv(resultActual.totalCost, currency)}`,
|
||||
`# Costo total automatizado (${currency}): ${formatDecimalForCsv(resultAutomated.totalCost, currency)}`,
|
||||
`# Ahorro por ejecución (${currency}): ${formatDecimalForCsv(roi.savingsPerExecution, currency)}`,
|
||||
`# Ahorro anual (${currency}): ${formatDecimalForCsv(roi.annualSavings, currency)}`,
|
||||
`# Payback (meses): ${formatPayback(roi.paybackMonths)}`,
|
||||
`# Payback (meses, raw): ${Number.isFinite(roi.paybackMonths) ? roi.paybackMonths.toFixed(4) : roi.paybackMonths}`,
|
||||
`# Ahorro acumulado a ${process.analysisHorizonYears} años (${currency}): ${formatDecimalForCsv(roi.cumulativeSavingsHorizon, currency)}`,
|
||||
`# ROI anualizado (%): ${roiStr}`,
|
||||
`# Frecuencia anual: ${process.annualFrequency}`,
|
||||
`# Horizonte de análisis: ${process.analysisHorizonYears} años`,
|
||||
`# Inversión en automatización (${currency}): ${formatDecimalForCsv(process.automationInvestment, currency)}`,
|
||||
'',
|
||||
].join('\r\n')
|
||||
|
||||
// Mapas para lookup eficiente
|
||||
const autoByBpmnId = new Map(resultAutomated.perActivity.map((a) => [a.bpmnElementId, a]))
|
||||
const actByBpmnId = new Map(activities.map((a) => [a.bpmnElementId, a]))
|
||||
|
||||
const headers = [
|
||||
'ID BPMN',
|
||||
'Actividad',
|
||||
'Tipo',
|
||||
'Automatizable',
|
||||
'Probabilidad (%)',
|
||||
`Costo actual directo (${currency})`,
|
||||
`Costo actual indirecto (${currency})`,
|
||||
`Costo actual total (${currency})`,
|
||||
'Tiempo actual (min)',
|
||||
`Costo automatizado directo (${currency})`,
|
||||
`Costo automatizado indirecto (${currency})`,
|
||||
`Costo automatizado total (${currency})`,
|
||||
'Tiempo automatizado (min)',
|
||||
`Ahorro (${currency})`,
|
||||
'Ahorro (%)',
|
||||
'Recursos asignados',
|
||||
]
|
||||
|
||||
const rows = [...resultActual.perActivity]
|
||||
.sort((a, b) => {
|
||||
const aSavings = a.expectedTotalCost - (autoByBpmnId.get(a.bpmnElementId)?.expectedTotalCost ?? a.expectedTotalCost)
|
||||
const bSavings = b.expectedTotalCost - (autoByBpmnId.get(b.bpmnElementId)?.expectedTotalCost ?? b.expectedTotalCost)
|
||||
return bSavings - aSavings
|
||||
})
|
||||
.map((act) => {
|
||||
const autoAct = autoByBpmnId.get(act.bpmnElementId)
|
||||
const domainAct = actByBpmnId.get(act.bpmnElementId)
|
||||
const isAutomatable = domainAct?.automatable ?? false
|
||||
const automatedTime = domainAct?.automatedTimeMinutes ?? act.executionTimeMinutes
|
||||
|
||||
const autoCostDirect = autoAct?.expectedDirectCost ?? act.expectedDirectCost
|
||||
const autoCostIndirect = autoAct?.expectedIndirectCost ?? act.expectedIndirectCost
|
||||
const autoCostTotal = autoAct?.expectedTotalCost ?? act.expectedTotalCost
|
||||
const savings = act.expectedTotalCost - autoCostTotal
|
||||
const savingsPct = act.expectedTotalCost > 0 ? (savings / act.expectedTotalCost) * 100 : 0
|
||||
|
||||
return [
|
||||
act.bpmnElementId,
|
||||
act.activityName,
|
||||
act.bpmnElementId.includes('subprocess') ? 'subproceso' : 'tarea',
|
||||
isAutomatable ? 'true' : 'false',
|
||||
formatDecimalForCsv(act.executionProbability * 100, currency),
|
||||
formatDecimalForCsv(act.expectedDirectCost, currency),
|
||||
formatDecimalForCsv(act.expectedIndirectCost, currency),
|
||||
formatDecimalForCsv(act.expectedTotalCost, currency),
|
||||
formatDecimalForCsv(act.executionTimeMinutes, currency),
|
||||
formatDecimalForCsv(autoCostDirect, currency),
|
||||
formatDecimalForCsv(autoCostIndirect, currency),
|
||||
formatDecimalForCsv(autoCostTotal, currency),
|
||||
formatDecimalForCsv(automatedTime, currency),
|
||||
formatDecimalForCsv(savings, currency),
|
||||
formatDecimalForCsv(savingsPct, currency),
|
||||
buildResourcesCell(act, resources),
|
||||
]
|
||||
})
|
||||
|
||||
const csvBody = Papa.unparse({ fields: headers, data: rows }, { delimiter, newline: '\r\n', quotes: true })
|
||||
return '' + meta + csvBody
|
||||
}
|
||||
|
||||
export function exportToCsv(params: CsvExportParams): void {
|
||||
const content = generateCsvContent(params)
|
||||
const tab = params.tab ?? 'actual'
|
||||
const suffix = tab === 'roi' ? '_roi' : tab === 'automatizado' ? '_automatizado' : '_actual'
|
||||
const fileName = buildFileName(
|
||||
params.process.name,
|
||||
params.process.clientName,
|
||||
new Date(params.simulation.executedAt),
|
||||
'csv'
|
||||
'csv',
|
||||
suffix
|
||||
)
|
||||
|
||||
const blob = new Blob([content], { type: 'text/csv;charset=utf-8' })
|
||||
|
||||
@@ -1,23 +1,30 @@
|
||||
import { buildFileName } from './slug'
|
||||
import { calculateRoi } from '@/domain/roi'
|
||||
import {
|
||||
drawHeader, drawKpiCards, drawHeatmapImage, drawHeatmapLegend,
|
||||
drawAnalysisSection, drawMethodologySection, addPageNumbers, PDF,
|
||||
} from './pdf-sections'
|
||||
import type { Process, Simulation, Resource } from '@/domain/types'
|
||||
import {
|
||||
drawRoiExecutiveSummary, drawRoiKpiCards, buildComparisonTableConfig,
|
||||
drawRoiAnalysisPage, drawRoiMethodologySection,
|
||||
} from './pdf-sections-roi'
|
||||
import type { Process, Simulation, Resource, Activity } from '@/domain/types'
|
||||
|
||||
export type ReportTab = 'actual' | 'automatizado' | 'roi'
|
||||
|
||||
export interface PdfExportParams {
|
||||
process: Process
|
||||
simulation: Simulation
|
||||
resources: Resource[]
|
||||
heatmapImageData: string | null // data URL de la imagen capturada del canvas
|
||||
heatmapImageData: string | null
|
||||
tab?: ReportTab // default: 'actual'
|
||||
activities?: Activity[] // requerido para tab='roi' (transparencia + tabla)
|
||||
}
|
||||
|
||||
export async function exportToPdf(params: PdfExportParams): Promise<void> {
|
||||
const { process, simulation, resources, heatmapImageData } = params
|
||||
const result = simulation.result
|
||||
const { process, simulation, resources, heatmapImageData, tab = 'actual', activities = [] } = params
|
||||
const currency = process.currency
|
||||
|
||||
// Carga dinámica: jsPDF + autotable solo se descargan al hacer click
|
||||
const [{ jsPDF }, { default: autoTable }] = await Promise.all([
|
||||
import('jspdf'),
|
||||
import('jspdf-autotable'),
|
||||
@@ -25,44 +32,66 @@ export async function exportToPdf(params: PdfExportParams): Promise<void> {
|
||||
|
||||
const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' })
|
||||
|
||||
// Metadata del PDF
|
||||
doc.setProperties({
|
||||
if (tab === 'roi') {
|
||||
await exportRoiPdf(doc, autoTable, process, simulation, activities, currency)
|
||||
} else {
|
||||
const result = tab === 'automatizado'
|
||||
? (simulation.resultAutomated ?? simulation.result)
|
||||
: simulation.result
|
||||
await exportScenarioPdf(doc, autoTable, process, simulation, result, resources, heatmapImageData, currency)
|
||||
}
|
||||
|
||||
const suffix = tab === 'roi' ? '_roi' : tab === 'automatizado' ? '_automatizado' : '_actual'
|
||||
const fileName = buildFileName(process.name, process.clientName, new Date(simulation.executedAt), 'pdf', suffix)
|
||||
doc.save(fileName)
|
||||
}
|
||||
|
||||
// ─── Escenario único (actual o automatizado) ──────────────────────────────────
|
||||
|
||||
async function exportScenarioPdf(
|
||||
doc: any,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
|
||||
autoTable: Function,
|
||||
process: Process,
|
||||
simulation: Simulation,
|
||||
result: Simulation['result'],
|
||||
resources: Resource[],
|
||||
heatmapImageData: string | null,
|
||||
currency: string
|
||||
): Promise<void> {
|
||||
const docAny = doc as any
|
||||
|
||||
docAny.setProperties({
|
||||
title: `Análisis de costos - ${process.name}`,
|
||||
author: process.clientName || '',
|
||||
subject: 'Simulación de proceso BPMN',
|
||||
creator: 'Process Cost Platform',
|
||||
creator: 'InQ ROI',
|
||||
keywords: 'bpmn, costos, simulación',
|
||||
})
|
||||
|
||||
// ── PÁGINA 1: Header + KPIs + Heatmap ────────────────────────────────────
|
||||
let y = drawHeader(doc as any, process, simulation.executedAt)
|
||||
y = drawKpiCards(doc as any, result, currency, y)
|
||||
let y = drawHeader(docAny, process, simulation.executedAt)
|
||||
y = drawKpiCards(docAny, result, currency, y)
|
||||
y += 4
|
||||
|
||||
// Título del heatmap
|
||||
doc.setFont('helvetica', 'bold')
|
||||
doc.setFontSize(10)
|
||||
doc.setTextColor(...PDF.slate900)
|
||||
doc.text('Mapa de calor de costos', PDF.margin, y)
|
||||
docAny.setFont('helvetica', 'bold')
|
||||
docAny.setFontSize(10)
|
||||
docAny.setTextColor(...PDF.slate900)
|
||||
docAny.text('Mapa de calor de costos', PDF.margin, y)
|
||||
y += 5
|
||||
|
||||
y = drawHeatmapImage(doc as any, heatmapImageData, y)
|
||||
y = drawHeatmapLegend(doc as any, y)
|
||||
y = drawHeatmapImage(docAny, heatmapImageData, y)
|
||||
y = drawHeatmapLegend(docAny, y)
|
||||
y += 4
|
||||
|
||||
// ── PÁGINA 2: Análisis ────────────────────────────────────────────────────
|
||||
doc.addPage()
|
||||
docAny.addPage()
|
||||
y = PDF.margin
|
||||
y = drawAnalysisSection(doc as any, result, currency, y)
|
||||
y = drawAnalysisSection(docAny, result, currency, y)
|
||||
y += 6
|
||||
|
||||
// ── PÁGINA 3+: Tabla detalle (autotable maneja paginación automática) ─────
|
||||
void resources // disponible para uso futuro (recursos en tabla de actividades)
|
||||
void resources
|
||||
|
||||
const RA = 'right' as const
|
||||
|
||||
const tableHead = [
|
||||
[
|
||||
const tableHead = [[
|
||||
{ content: 'Actividad', styles: { cellWidth: 48 } },
|
||||
{ content: `Dir. (${currency})`, styles: { halign: RA, cellWidth: 25 } },
|
||||
{ content: `Indir. (${currency})`, styles: { halign: RA, cellWidth: 25 } },
|
||||
@@ -70,8 +99,7 @@ export async function exportToPdf(params: PdfExportParams): Promise<void> {
|
||||
{ content: '% total', styles: { halign: RA, cellWidth: 16 } },
|
||||
{ content: 'Tiempo', styles: { halign: RA, cellWidth: 14 } },
|
||||
{ content: 'Prob.', styles: { halign: RA, cellWidth: 14 } },
|
||||
],
|
||||
]
|
||||
]]
|
||||
|
||||
const tableBody = result.perActivity.map((act) => [
|
||||
{ content: act.activityName },
|
||||
@@ -83,40 +111,92 @@ export async function exportToPdf(params: PdfExportParams): Promise<void> {
|
||||
{ content: `${(act.executionProbability * 100).toFixed(0)}%`, styles: { halign: RA } },
|
||||
])
|
||||
|
||||
autoTable(doc, {
|
||||
autoTable(docAny, {
|
||||
head: tableHead,
|
||||
body: tableBody,
|
||||
startY: y,
|
||||
margin: { left: PDF.margin, right: PDF.margin },
|
||||
styles: { fontSize: 8, cellPadding: 2.5, overflow: 'ellipsize' },
|
||||
headStyles: {
|
||||
fillColor: PDF.blue,
|
||||
textColor: [255, 255, 255],
|
||||
fontStyle: 'bold',
|
||||
fontSize: 8,
|
||||
},
|
||||
headStyles: { fillColor: PDF.blue, textColor: [255, 255, 255], fontStyle: 'bold', fontSize: 8 },
|
||||
alternateRowStyles: { fillColor: PDF.slate50 },
|
||||
columnStyles: { 0: { cellWidth: 48 } },
|
||||
didDrawPage: () => {
|
||||
// Placeholder — los footers se añaden al final con addPageNumbers
|
||||
},
|
||||
})
|
||||
|
||||
// ── PÁGINA FINAL: Metodología ────────────────────────────────────────────
|
||||
docAny.addPage()
|
||||
drawMethodologySection(docAny, process, PDF.margin)
|
||||
addPageNumbers(docAny, 'InQ ROI · Powered by InQuality', simulation.executedAt)
|
||||
}
|
||||
|
||||
// ─── ROI — 4 páginas ──────────────────────────────────────────────────────────
|
||||
|
||||
async function exportRoiPdf(
|
||||
doc: any,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
|
||||
autoTable: Function,
|
||||
process: Process,
|
||||
simulation: Simulation,
|
||||
activities: Activity[],
|
||||
currency: string
|
||||
): Promise<void> {
|
||||
const result = simulation.result
|
||||
const resultAutomated = simulation.resultAutomated ?? result
|
||||
|
||||
const roi = calculateRoi({
|
||||
costPerExecutionActual: result.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
annualFrequency: process.annualFrequency,
|
||||
analysisHorizonYears: process.analysisHorizonYears,
|
||||
automationInvestment: process.automationInvestment,
|
||||
})
|
||||
|
||||
doc.setProperties({
|
||||
title: `Análisis de ROI - ${process.name}`,
|
||||
author: process.clientName || '',
|
||||
subject: 'Análisis de retorno de inversión para automatización BPMN',
|
||||
creator: 'InQ ROI',
|
||||
keywords: 'bpmn, roi, automatización, payback',
|
||||
})
|
||||
|
||||
// ── Página 1: Header + resumen ejecutivo + 5 KPI cards ─────────────────────
|
||||
let y = drawHeader(doc, process, simulation.executedAt)
|
||||
y = drawRoiExecutiveSummary(doc, process, roi, currency, y)
|
||||
y = drawRoiKpiCards(doc, roi, currency, process.analysisHorizonYears, y)
|
||||
|
||||
// ── Página 2: Tabla comparativa ────────────────────────────────────────────
|
||||
doc.addPage()
|
||||
drawMethodologySection(doc as any, process, PDF.margin)
|
||||
y = PDF.margin
|
||||
|
||||
// ── FOOTER en todas las páginas ───────────────────────────────────────────
|
||||
addPageNumbers(doc as any, 'Process Cost Platform', simulation.executedAt)
|
||||
doc.setFont('helvetica', 'bold')
|
||||
doc.setFontSize(12)
|
||||
doc.setTextColor(...PDF.slate900)
|
||||
doc.text('Comparación por actividad', PDF.margin, y)
|
||||
y += 4
|
||||
|
||||
// ── Descargar ─────────────────────────────────────────────────────────────
|
||||
const fileName = buildFileName(
|
||||
process.name,
|
||||
process.clientName,
|
||||
new Date(simulation.executedAt),
|
||||
'pdf'
|
||||
doc.setFont('helvetica', 'normal')
|
||||
doc.setFontSize(8)
|
||||
doc.setTextColor(...PDF.slate500)
|
||||
doc.text('(*) Actividades en negrita están marcadas como automatizables', PDF.margin, y + 3)
|
||||
y += 8
|
||||
|
||||
const tableConfig = buildComparisonTableConfig(
|
||||
result.perActivity,
|
||||
resultAutomated.perActivity,
|
||||
activities,
|
||||
currency,
|
||||
y
|
||||
)
|
||||
doc.save(fileName)
|
||||
autoTable(doc, tableConfig)
|
||||
|
||||
// ── Página 3: Análisis textual + transparencia ─────────────────────────────
|
||||
doc.addPage()
|
||||
y = PDF.margin
|
||||
drawRoiAnalysisPage(doc, roi, process, result.perActivity, resultAutomated.perActivity, activities, currency, y)
|
||||
|
||||
// ── Página 4: Metodología ──────────────────────────────────────────────────
|
||||
doc.addPage()
|
||||
drawRoiMethodologySection(doc, process, PDF.margin)
|
||||
|
||||
addPageNumbers(doc, 'InQ ROI · Powered by InQuality', simulation.executedAt)
|
||||
}
|
||||
|
||||
function formatNum(n: number): string {
|
||||
|
||||
452
src/lib/export/pdf-sections-roi.ts
Normal file
452
src/lib/export/pdf-sections-roi.ts
Normal file
@@ -0,0 +1,452 @@
|
||||
import { formatCurrency, formatPayback, formatPercent } from '@/lib/format'
|
||||
import type { ActivitySimResult, Process, Activity } from '@/domain/types'
|
||||
import type { RoiResult } from '@/domain/roi'
|
||||
import { PDF, type DocLike } from './pdf-sections'
|
||||
|
||||
const ROI_HIGH_THRESHOLD = 1000
|
||||
|
||||
// ─── Resumen ejecutivo ────────────────────────────────────────────────────────
|
||||
|
||||
export function drawRoiExecutiveSummary(
|
||||
doc: DocLike,
|
||||
process: Process,
|
||||
roi: RoiResult,
|
||||
currency: string,
|
||||
startY: number
|
||||
): number {
|
||||
let y = startY
|
||||
|
||||
doc.setFont('helvetica', 'bold')
|
||||
doc.setFontSize(12)
|
||||
doc.setTextColor(...PDF.slate900)
|
||||
doc.text('Análisis de retorno de inversión', PDF.margin, y)
|
||||
y += 6
|
||||
|
||||
doc.setDrawColor(...PDF.slate200)
|
||||
doc.setLineWidth(0.2)
|
||||
doc.line(PDF.margin, y, PDF.margin + PDF.contentW, y)
|
||||
y += 5
|
||||
|
||||
doc.setFont('helvetica', 'normal')
|
||||
doc.setFontSize(9)
|
||||
doc.setTextColor(...PDF.slate700)
|
||||
|
||||
const investmentStr = process.automationInvestment > 0
|
||||
? `inversión estimada de ${formatCurrency(process.automationInvestment, currency)}`
|
||||
: 'inversión aún no configurada'
|
||||
|
||||
const summary = `Análisis de retorno de inversión para automatización del proceso "${process.name}"` +
|
||||
(process.clientName ? ` del cliente ${process.clientName}` : '') +
|
||||
`, con frecuencia anual de ${process.annualFrequency.toLocaleString('es-PY')} ejecuciones,` +
|
||||
` horizonte de ${process.analysisHorizonYears} años e ${investmentStr}.`
|
||||
|
||||
const summaryLines = doc.splitTextToSize(summary, PDF.contentW)
|
||||
doc.text(summaryLines, PDF.margin, y)
|
||||
y += summaryLines.length * 4.5 + 3
|
||||
|
||||
// Sub-resumen de resultado
|
||||
const resultText = roi.savingsPerExecution > 0
|
||||
? `Resultado: ahorro de ${formatCurrency(roi.savingsPerExecution, currency)} por ejecución (${formatPercent(roi.savingsPerExecutionPercent)} de reducción). ` +
|
||||
(Number.isFinite(roi.paybackMonths)
|
||||
? roi.breaksEvenInHorizon
|
||||
? `La inversión se recupera en ${roi.paybackMonths < 24 ? `${roi.paybackMonths.toFixed(1)} meses` : `${roi.paybackYears.toFixed(1)} años`}, dentro del horizonte de análisis.`
|
||||
: `El payback ocurre en ${roi.paybackYears.toFixed(1)} años, fuera del horizonte analizado.`
|
||||
: 'Sin ahorro neto — la automatización no se recupera con los datos actuales.')
|
||||
: 'El escenario automatizado no genera ahorro con los datos actuales. Revisá los costos configurados.'
|
||||
|
||||
const resultLines = doc.splitTextToSize(resultText, PDF.contentW)
|
||||
doc.setFont('helvetica', 'italic')
|
||||
doc.setFontSize(8.5)
|
||||
doc.setTextColor(...PDF.slate500)
|
||||
doc.text(resultLines, PDF.margin, y)
|
||||
y += resultLines.length * 4 + 4
|
||||
|
||||
doc.setFont('helvetica', 'normal')
|
||||
doc.setTextColor(...PDF.slate700)
|
||||
return y
|
||||
}
|
||||
|
||||
// ─── 5 KPI cards (grid 2×3 — 5 celdas, 6ta vacía o con meta-info) ────────────
|
||||
|
||||
export function drawRoiKpiCards(
|
||||
doc: DocLike,
|
||||
roi: RoiResult,
|
||||
currency: string,
|
||||
horizonYears: number,
|
||||
startY: number
|
||||
): number {
|
||||
const cardW = 52, cardH = 28, gapX = 7, gapY = 5
|
||||
const col1 = PDF.margin, col2 = PDF.margin + cardW + gapX, col3 = PDF.margin + (cardW + gapX) * 2
|
||||
|
||||
const paybackStr = formatPayback(roi.paybackMonths)
|
||||
|
||||
const roiStr = !Number.isFinite(roi.roiAnnualPercent)
|
||||
? '∞'
|
||||
: `${roi.roiAnnualPercent.toFixed(0)}%`
|
||||
|
||||
const kpis = [
|
||||
// Fila 1: 3 cards
|
||||
{ label: 'AHORRO POR EJECUCIÓN', value: formatCurrency(roi.savingsPerExecution, currency), sub: `${formatPercent(roi.savingsPerExecutionPercent)} vs. actual`, positive: roi.savingsPerExecution >= 0 },
|
||||
{ label: 'AHORRO ANUAL', value: formatCurrency(roi.annualSavings, currency), sub: `× ${horizonYears} años`, positive: roi.annualSavings >= 0 },
|
||||
{ label: 'PAYBACK', value: paybackStr, sub: roi.breaksEvenInHorizon ? 'Dentro del horizonte' : 'Fuera del horizonte', positive: roi.breaksEvenInHorizon },
|
||||
// Fila 2: 2 cards + 1 vacía
|
||||
{ label: `ACUMULADO (${horizonYears} AÑOS)`, value: formatCurrency(roi.cumulativeSavingsHorizon, currency), sub: 'neto de inversión', positive: roi.cumulativeSavingsHorizon >= 0 },
|
||||
{ label: 'ROI ANUAL', value: roiStr, sub: 'retorno sobre la inversión', positive: roi.roiAnnualPercent >= 0 },
|
||||
]
|
||||
|
||||
const cols = [col1, col2, col3]
|
||||
let maxY = startY
|
||||
|
||||
kpis.forEach((kpi, idx) => {
|
||||
const row = Math.floor(idx / 3)
|
||||
const col = idx % 3
|
||||
const x = cols[col]
|
||||
const y = startY + row * (cardH + gapY)
|
||||
|
||||
// Fondo
|
||||
doc.setFillColor(...PDF.slate50)
|
||||
doc.roundedRect(x, y, cardW, cardH, 2, 2, 'F')
|
||||
|
||||
// Borde
|
||||
doc.setDrawColor(...PDF.slate200)
|
||||
doc.setLineWidth(0.2)
|
||||
doc.roundedRect(x, y, cardW, cardH, 2, 2, 'S')
|
||||
|
||||
// Label
|
||||
doc.setFont('helvetica', 'normal')
|
||||
doc.setFontSize(5.5)
|
||||
doc.setTextColor(...PDF.slate500)
|
||||
doc.text(kpi.label, x + 3, y + 5.5)
|
||||
|
||||
// Valor
|
||||
const valueColor = kpi.positive ? [16, 185, 129] as [number,number,number] : [239, 68, 68] as [number,number,number]
|
||||
doc.setFont('helvetica', 'bold')
|
||||
doc.setFontSize(kpi.value.length > 22 ? 7 : kpi.value.length > 14 ? 9 : 11)
|
||||
doc.setTextColor(...valueColor)
|
||||
doc.text(kpi.value, x + 3, y + 16)
|
||||
|
||||
// Sub-texto
|
||||
doc.setFont('helvetica', 'normal')
|
||||
doc.setFontSize(6)
|
||||
doc.setTextColor(...PDF.slate500)
|
||||
const subLines = doc.splitTextToSize(kpi.sub, cardW - 6)
|
||||
doc.text(subLines, x + 3, y + 22)
|
||||
|
||||
maxY = Math.max(maxY, y + cardH)
|
||||
})
|
||||
|
||||
return maxY + 6
|
||||
}
|
||||
|
||||
// ─── Config de autotable para la tabla comparativa ────────────────────────────
|
||||
// Se llama desde pdf-export.ts donde autoTable ya está importado dinámicamente.
|
||||
|
||||
export function buildComparisonTableConfig(
|
||||
perActivityActual: ActivitySimResult[],
|
||||
perActivityAutomated: ActivitySimResult[],
|
||||
activities: Activity[],
|
||||
currency: string,
|
||||
startY: number
|
||||
): Record<string, unknown> {
|
||||
const autoByBpmnId = new Map(perActivityAutomated.map((a) => [a.bpmnElementId, a]))
|
||||
const isAutomatableMap = new Map(activities.map((a) => [a.bpmnElementId, a.automatable]))
|
||||
|
||||
const RA = 'right' as const
|
||||
|
||||
const head = [[
|
||||
{ content: 'Actividad', styles: { cellWidth: 42 } },
|
||||
{ content: `Act. (${currency})`, styles: { halign: RA, cellWidth: 22 } },
|
||||
{ content: `Auto. (${currency})`, styles: { halign: RA, cellWidth: 22 } },
|
||||
{ content: `Ahorro (${currency})`, styles: { halign: RA, cellWidth: 22 } },
|
||||
{ content: 'Ahorro %', styles: { halign: RA, cellWidth: 16 } },
|
||||
{ content: 'Prob.', styles: { halign: RA, cellWidth: 14 } },
|
||||
]]
|
||||
|
||||
const body = [...perActivityActual]
|
||||
.sort((a, b) => {
|
||||
const aCost = autoByBpmnId.get(a.bpmnElementId)?.expectedTotalCost ?? a.expectedTotalCost
|
||||
const bCost = autoByBpmnId.get(b.bpmnElementId)?.expectedTotalCost ?? b.expectedTotalCost
|
||||
return (b.expectedTotalCost - bCost) - (a.expectedTotalCost - aCost)
|
||||
})
|
||||
.map((act) => {
|
||||
const auto = autoByBpmnId.get(act.bpmnElementId)
|
||||
const autoCost = auto?.expectedTotalCost ?? act.expectedTotalCost
|
||||
const savings = act.expectedTotalCost - autoCost
|
||||
const savingsPct = act.expectedTotalCost > 0 ? (savings / act.expectedTotalCost) * 100 : 0
|
||||
const isAutomatable = isAutomatableMap.get(act.bpmnElementId) ?? false
|
||||
|
||||
const savingsColor = savings > 0 ? [16, 185, 129] : savings < 0 ? [239, 68, 68] : [100, 116, 139]
|
||||
const rowFill = isAutomatable ? [255, 255, 255] : [248, 250, 252]
|
||||
|
||||
return [
|
||||
{ content: act.activityName, styles: { fillColor: rowFill, fontStyle: isAutomatable ? 'bold' : 'normal' as const } },
|
||||
{ content: fmtNum(act.expectedTotalCost), styles: { halign: RA, font: 'courier', fillColor: rowFill } },
|
||||
{ content: fmtNum(autoCost), styles: { halign: RA, font: 'courier', fillColor: rowFill } },
|
||||
{ content: (savings >= 0 ? '+' : '') + fmtNum(savings), styles: { halign: RA, font: 'courier', fillColor: rowFill, textColor: savingsColor } },
|
||||
{ content: (savings >= 0 ? '+' : '') + savingsPct.toFixed(1) + '%', styles: { halign: RA, fillColor: rowFill, textColor: savingsColor } },
|
||||
{ content: `${(act.executionProbability * 100).toFixed(0)}%`, styles: { halign: RA, fillColor: rowFill } },
|
||||
]
|
||||
})
|
||||
|
||||
return {
|
||||
head,
|
||||
body,
|
||||
startY,
|
||||
margin: { left: PDF.margin, right: PDF.margin },
|
||||
styles: { fontSize: 7.5, cellPadding: 2, overflow: 'ellipsize' },
|
||||
headStyles: { fillColor: PDF.blue, textColor: [255, 255, 255], fontStyle: 'bold', fontSize: 7.5 },
|
||||
columnStyles: { 0: { cellWidth: 42 } },
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Página 3: resúmenes textuales + transparencia ────────────────────────────
|
||||
|
||||
export function drawRoiAnalysisPage(
|
||||
doc: DocLike,
|
||||
roi: RoiResult,
|
||||
process: Process,
|
||||
perActivityActual: ActivitySimResult[],
|
||||
perActivityAutomated: ActivitySimResult[],
|
||||
activities: Activity[],
|
||||
currency: string,
|
||||
startY: number
|
||||
): number {
|
||||
let y = startY
|
||||
|
||||
doc.setFont('helvetica', 'bold')
|
||||
doc.setFontSize(12)
|
||||
doc.setTextColor(...PDF.slate900)
|
||||
doc.text('Análisis del ahorro', PDF.margin, y)
|
||||
y += 6
|
||||
|
||||
doc.setDrawColor(...PDF.slate200)
|
||||
doc.setLineWidth(0.2)
|
||||
doc.line(PDF.margin, y, PDF.margin + PDF.contentW, y)
|
||||
y += 6
|
||||
|
||||
// ── Composición del ahorro ──────────────────────────────────────────────────
|
||||
const autoByBpmnId = new Map(perActivityAutomated.map((a) => [a.bpmnElementId, a]))
|
||||
const savingsPerAct = perActivityActual
|
||||
.map((a) => {
|
||||
const auto = autoByBpmnId.get(a.bpmnElementId)
|
||||
return { name: a.activityName, savings: a.expectedTotalCost - (auto?.expectedTotalCost ?? a.expectedTotalCost) }
|
||||
})
|
||||
.filter((s) => s.savings > 0)
|
||||
.sort((a, b) => b.savings - a.savings)
|
||||
|
||||
doc.setFont('helvetica', 'bold')
|
||||
doc.setFontSize(9)
|
||||
doc.setTextColor(...PDF.slate700)
|
||||
doc.text('Composición del ahorro', PDF.margin, y)
|
||||
y += 5
|
||||
|
||||
doc.setFont('helvetica', 'normal')
|
||||
doc.setFontSize(8.5)
|
||||
|
||||
if (savingsPerAct.length > 0) {
|
||||
const top3 = savingsPerAct.slice(0, 3)
|
||||
const top3TotalSavings = top3.reduce((s, a) => s + a.savings, 0)
|
||||
const totalSavingsAll = savingsPerAct.reduce((s, a) => s + a.savings, 0)
|
||||
const top3Pct = totalSavingsAll > 0 ? (top3TotalSavings / totalSavingsAll * 100).toFixed(0) : '0'
|
||||
|
||||
const compositionText = `El ${top3Pct}% del ahorro total proviene de las primeras ${Math.min(3, savingsPerAct.length)} actividades automatizadas:`
|
||||
const compositionLines = doc.splitTextToSize(compositionText, PDF.contentW)
|
||||
doc.text(compositionLines, PDF.margin, y)
|
||||
y += compositionLines.length * 4.5 + 2
|
||||
|
||||
for (const act of top3) {
|
||||
const actPct = totalSavingsAll > 0 ? (act.savings / totalSavingsAll * 100).toFixed(1) : '0'
|
||||
doc.text(` • ${act.name}: ${formatCurrency(act.savings, currency)} (${actPct}% del ahorro total)`, PDF.margin, y)
|
||||
y += 4.5
|
||||
}
|
||||
} else {
|
||||
doc.setTextColor(...PDF.slate500)
|
||||
doc.text('Sin actividades con ahorro positivo en el escenario actual.', PDF.margin, y)
|
||||
doc.setTextColor(...PDF.slate700)
|
||||
y += 5
|
||||
}
|
||||
y += 4
|
||||
|
||||
// ── Trayectoria del ahorro ──────────────────────────────────────────────────
|
||||
doc.setFont('helvetica', 'bold')
|
||||
doc.setFontSize(9)
|
||||
doc.text('Trayectoria del ahorro acumulado', PDF.margin, y)
|
||||
y += 5
|
||||
|
||||
doc.setFont('helvetica', 'normal')
|
||||
doc.setFontSize(8.5)
|
||||
|
||||
let trajectoryText: string
|
||||
if (process.automationInvestment > 0 && Number.isFinite(roi.paybackMonths)) {
|
||||
const recoveryStr = roi.paybackMonths < 24
|
||||
? `${roi.paybackMonths.toFixed(1)} meses`
|
||||
: `${roi.paybackYears.toFixed(1)} años`
|
||||
const multiple = process.automationInvestment > 0
|
||||
? (roi.cumulativeSavingsHorizon / process.automationInvestment + 1).toFixed(1)
|
||||
: '∞'
|
||||
trajectoryText =
|
||||
`La inversión de ${formatCurrency(process.automationInvestment, currency)} se recupera en ${recoveryStr}. ` +
|
||||
`A ${process.analysisHorizonYears} años, el ahorro acumulado proyectado es ` +
|
||||
`${formatCurrency(roi.cumulativeSavingsHorizon, currency)}, equivalente a ${multiple}x la inversión inicial.`
|
||||
} else if (process.automationInvestment === 0) {
|
||||
trajectoryText =
|
||||
`Sin inversión configurada — el ahorro anual de ${formatCurrency(roi.annualSavings, currency)} ` +
|
||||
`equivale a ${formatCurrency(roi.cumulativeSavingsHorizon, currency)} acumulados en ${process.analysisHorizonYears} años.`
|
||||
} else {
|
||||
trajectoryText = 'Sin ahorro proyectado con los datos actuales. Revisá los costos automatizados configurados.'
|
||||
}
|
||||
|
||||
const trajectoryLines = doc.splitTextToSize(trajectoryText, PDF.contentW)
|
||||
doc.text(trajectoryLines, PDF.margin, y)
|
||||
y += trajectoryLines.length * 4.5 + 6
|
||||
|
||||
// ── Transparencia metodológica (si aplica) ────────────────────────────────
|
||||
y = drawTransparencyBlock(doc, activities, process.automationInvestment, roi, y)
|
||||
|
||||
return y
|
||||
}
|
||||
|
||||
export function drawTransparencyBlock(
|
||||
doc: DocLike,
|
||||
activities: Activity[],
|
||||
investment: number,
|
||||
roi: RoiResult,
|
||||
startY: number
|
||||
): number {
|
||||
const zeroCost = activities.filter(
|
||||
(a) => a.automatable && a.automatedCostFixed === 0 && a.automatedTimeMinutes === 0
|
||||
)
|
||||
const investmentZero = investment === 0
|
||||
const roiHigh = Number.isFinite(roi.roiAnnualPercent) && roi.roiAnnualPercent > ROI_HIGH_THRESHOLD
|
||||
|
||||
if (zeroCost.length === 0 && !investmentZero && !roiHigh) return startY
|
||||
|
||||
const boxX = PDF.margin
|
||||
const boxW = PDF.contentW
|
||||
|
||||
// ── Paso 1: recopilar todo el contenido para calcular altura ─────────────
|
||||
type TextBlock = { text: string[]; bold?: boolean; fontSize: number }
|
||||
const blocks: TextBlock[] = []
|
||||
|
||||
blocks.push({ text: ['Transparencia metodológica'], bold: true, fontSize: 9 })
|
||||
|
||||
if (zeroCost.length > 0) {
|
||||
const msg = zeroCost.length === 1
|
||||
? `1 actividad automatizable sin costo configurado: "${zeroCost[0].name || zeroCost[0].bpmnElementId}". El ahorro puede estar inflado artificialmente.`
|
||||
: `${zeroCost.length} actividades sin costo automatizado: ${zeroCost.map((a) => a.name || a.bpmnElementId).join(', ')}. El ahorro puede estar inflado.`
|
||||
blocks.push({ text: doc.splitTextToSize(msg, boxW - 8), fontSize: 8 })
|
||||
}
|
||||
|
||||
if (investmentZero) {
|
||||
blocks.push({
|
||||
text: doc.splitTextToSize(
|
||||
'Inversión en automatización no configurada. El payback aparece como inmediato y el ROI como infinito. Configurá la inversión en el workspace para un análisis realista.',
|
||||
boxW - 8
|
||||
),
|
||||
fontSize: 8,
|
||||
})
|
||||
}
|
||||
|
||||
if (roiHigh) {
|
||||
blocks.push({
|
||||
text: doc.splitTextToSize(
|
||||
`ROI inusualmente alto detectado: ${formatPercent(roi.roiAnnualPercent)}. Un ROI > ${formatPercent(ROI_HIGH_THRESHOLD, 0)} anual suele indicar frecuencia sobreestimada, costo automatizado subestimado o inversión insuficiente. Revisá antes de presentar al cliente.`,
|
||||
boxW - 8
|
||||
),
|
||||
fontSize: 8,
|
||||
})
|
||||
}
|
||||
|
||||
// Calcular altura total del bloque
|
||||
let height = 6 // padding top
|
||||
for (const b of blocks) {
|
||||
height += b.text.length * (b.bold ? 4.5 : 3.8) + 3
|
||||
}
|
||||
height += 3 // padding bottom
|
||||
|
||||
// ── Paso 2: dibujar fondo y borde ────────────────────────────────────────
|
||||
doc.setFillColor(255, 251, 235) // amber-50
|
||||
doc.setDrawColor(253, 230, 138) // amber-200
|
||||
doc.setLineWidth(0.3)
|
||||
doc.rect(boxX, startY, boxW, height, 'FD')
|
||||
|
||||
// ── Paso 3: dibujar texto encima del rectángulo ───────────────────────────
|
||||
let y = startY + 6
|
||||
|
||||
for (const b of blocks) {
|
||||
if (b.bold) {
|
||||
doc.setFont('helvetica', 'bold')
|
||||
doc.setFontSize(b.fontSize)
|
||||
doc.setTextColor(146, 64, 14) // amber-800
|
||||
} else {
|
||||
doc.setFont('helvetica', 'normal')
|
||||
doc.setFontSize(b.fontSize)
|
||||
doc.setTextColor(180, 83, 9) // amber-700
|
||||
}
|
||||
doc.text(b.text, boxX + 4, y)
|
||||
y += b.text.length * (b.bold ? 4.5 : 3.8) + 3
|
||||
}
|
||||
|
||||
return startY + height + 4
|
||||
}
|
||||
|
||||
// ─── Sección metodológica ampliada para el tab ROI ────────────────────────────
|
||||
|
||||
export function drawRoiMethodologySection(doc: DocLike, process: Process, startY: number): number {
|
||||
let y = startY
|
||||
|
||||
doc.setFont('helvetica', 'bold')
|
||||
doc.setFontSize(10)
|
||||
doc.setTextColor(...PDF.slate900)
|
||||
doc.text('Nota metodológica — Análisis de ROI', PDF.margin, y)
|
||||
y += 5
|
||||
|
||||
doc.setFont('helvetica', 'normal')
|
||||
doc.setFontSize(8)
|
||||
doc.setTextColor(...PDF.slate500)
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'Costo por ejecución actual:',
|
||||
body: `Σ(actividades) [costo_fijo × prob_ejecución] × (1 + overhead ${(process.overheadPercentage * 100).toFixed(0)}%). Probabilidades calculadas por propagación hacia adelante en el grafo BPMN.`,
|
||||
},
|
||||
{
|
||||
title: 'Costo por ejecución automatizado:',
|
||||
body: 'Mismo modelo, pero las actividades marcadas como automatizables usan su costo automatizado configurado. Las no marcadas mantienen el costo actual.',
|
||||
},
|
||||
{
|
||||
title: 'Ahorro anual:',
|
||||
body: `(Costo actual − Costo automatizado) × ${process.annualFrequency.toLocaleString('es-PY')} ejecuciones/año.`,
|
||||
},
|
||||
{
|
||||
title: 'Payback (meses):',
|
||||
body: `(Inversión / Ahorro anual) × 12. Nominal simple — no incluye tasa de descuento ni inflación.`,
|
||||
},
|
||||
{
|
||||
title: 'Ahorro acumulado:',
|
||||
body: `Ahorro anual × ${process.analysisHorizonYears} años − Inversión inicial. Nominal, sin VP.`,
|
||||
},
|
||||
{
|
||||
title: 'ROI anualizado:',
|
||||
body: '(Ahorro anual / Inversión) × 100%. Referencia: METHODOLOGY_AUTOMATED_COST.md.',
|
||||
},
|
||||
]
|
||||
|
||||
for (const s of sections) {
|
||||
doc.setFont('helvetica', 'bold')
|
||||
doc.text(s.title, PDF.margin, y)
|
||||
y += 4
|
||||
doc.setFont('helvetica', 'normal')
|
||||
const lines = doc.splitTextToSize(s.body, PDF.contentW - 4)
|
||||
doc.text(lines, PDF.margin + 4, y)
|
||||
y += lines.length * 3.8 + 2
|
||||
}
|
||||
|
||||
return y
|
||||
}
|
||||
|
||||
// ─── Helpers locales ──────────────────────────────────────────────────────────
|
||||
|
||||
function fmtNum(n: number): string {
|
||||
return n.toLocaleString('es-PY', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
}
|
||||
@@ -18,7 +18,7 @@ export const PDF = {
|
||||
}
|
||||
|
||||
// Tipo mínimo de doc para los helpers (evitar importar jsPDF en este archivo)
|
||||
type DocLike = {
|
||||
export type DocLike = {
|
||||
setFont: (name: string, style: string) => void
|
||||
setFontSize: (size: number) => void
|
||||
setTextColor: (...args: number[]) => void
|
||||
|
||||
@@ -12,7 +12,8 @@ export function buildFileName(
|
||||
processName: string,
|
||||
clientName: string | undefined,
|
||||
date: Date,
|
||||
ext: 'pdf' | 'csv'
|
||||
ext: 'pdf' | 'csv',
|
||||
suffix = '' // '_actual' | '_automatizado' | '_roi' | ''
|
||||
): string {
|
||||
const dateStr = [
|
||||
date.getFullYear(),
|
||||
@@ -24,5 +25,5 @@ export function buildFileName(
|
||||
if (clientName?.trim()) parts.push(slugify(clientName.trim()))
|
||||
parts.push(dateStr)
|
||||
|
||||
return `${parts.join('_')}.${ext}`
|
||||
return `${parts.join('_')}${suffix}.${ext}`
|
||||
}
|
||||
|
||||
@@ -25,6 +25,32 @@ export function formatMinutes(minutes: number): string {
|
||||
return m > 0 ? `${h}h ${m}min` : `${h}h`
|
||||
}
|
||||
|
||||
export function formatPayback(months: number): string {
|
||||
if (Number.isNaN(months) || !isFinite(months)) {
|
||||
return 'No recupera en horizonte'
|
||||
}
|
||||
if (months < 0) {
|
||||
return 'Sin payback (costo aumenta)'
|
||||
}
|
||||
if (months === 0) {
|
||||
return 'Inmediato'
|
||||
}
|
||||
if (months < 0.1) {
|
||||
return '< 1 día'
|
||||
}
|
||||
if (months < 1) {
|
||||
return `< 1 mes (${months.toFixed(2)} meses)`
|
||||
}
|
||||
if (months < 12) {
|
||||
return `${months.toFixed(1)} meses`
|
||||
}
|
||||
if (months < 24) {
|
||||
const years = (months / 12).toFixed(1)
|
||||
return `${months.toFixed(1)} meses (~${years} años)`
|
||||
}
|
||||
return `${(months / 12).toFixed(1)} años`
|
||||
}
|
||||
|
||||
// Formato de timestamp de simulación: "13 de mayo de 2026 a las 09:45"
|
||||
// Locale explícito es-PY — nunca depende del locale del browser del cliente.
|
||||
export function formatSimulationTimestamp(ts: number): { date: string; time: string } {
|
||||
|
||||
@@ -18,6 +18,29 @@ export class ProcessCostDb extends Dexie {
|
||||
resources: 'id, processId, name',
|
||||
simulations: 'id, processId, executedAt',
|
||||
})
|
||||
|
||||
// Sprint 1: agrega campos de automatización a Activity y volumetría a Process.
|
||||
// El upgrade popula datos existentes con defaults para garantizar invariante de tipo.
|
||||
this.version(2)
|
||||
.stores({
|
||||
processes: 'id, name, updatedAt',
|
||||
activities: 'id, processId, bpmnElementId',
|
||||
gateways: 'id, processId, bpmnElementId',
|
||||
resources: 'id, processId, name',
|
||||
simulations: 'id, processId, executedAt',
|
||||
})
|
||||
.upgrade(async (tx) => {
|
||||
await tx.table('activities').toCollection().modify((act) => {
|
||||
if (act.automatable === undefined) act.automatable = false
|
||||
if (act.automatedCostFixed === undefined) act.automatedCostFixed = 0
|
||||
if (act.automatedTimeMinutes === undefined) act.automatedTimeMinutes = 0
|
||||
})
|
||||
await tx.table('processes').toCollection().modify((proc) => {
|
||||
if (proc.annualFrequency === undefined) proc.annualFrequency = 1000
|
||||
if (proc.analysisHorizonYears === undefined) proc.analysisHorizonYears = 3
|
||||
if (proc.automationInvestment === undefined) proc.automationInvestment = 0
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,27 @@
|
||||
/**
|
||||
* @internal
|
||||
*
|
||||
* Repositorios de acceso a IndexedDB (Dexie).
|
||||
*
|
||||
* REGLA ARQUITECTÓNICA: este módulo solo debe importarse desde `src/store/**`.
|
||||
* Las features y hooks deben mutar datos a través de los stores (useProcessStore,
|
||||
* useSimulationStore), que garantizan la invalidación del resultado de simulación
|
||||
* cuando los datos cambian.
|
||||
*
|
||||
* Excepciones permitidas (ver eslint.config.js):
|
||||
* - src/features/import/** → operación de importación inicial (no hay simulación previa)
|
||||
* - src/features/report/useReportData.ts → solo lectura, sin mutaciones
|
||||
* - tests/** → acceso directo controlado en contexto de testing
|
||||
*
|
||||
* Cualquier import desde fuera de estos paths falla `npm run lint`.
|
||||
*/
|
||||
|
||||
import { db } from './db'
|
||||
import type { Process, Activity, GatewayConfig, Resource, Simulation } from '@/domain/types'
|
||||
|
||||
// ─── Process ─────────────────────────────────────────────────────────────────
|
||||
|
||||
/** @internal Solo llamar desde src/store/process-store.ts */
|
||||
export const processRepo = {
|
||||
async save(process: Process): Promise<void> {
|
||||
await db.processes.put(process)
|
||||
@@ -29,6 +48,7 @@ export const processRepo = {
|
||||
|
||||
// ─── Activity ─────────────────────────────────────────────────────────────────
|
||||
|
||||
/** @internal Solo llamar desde src/store/process-store.ts */
|
||||
export const activityRepo = {
|
||||
async save(activity: Activity): Promise<void> {
|
||||
await db.activities.put(activity)
|
||||
@@ -56,6 +76,7 @@ export const activityRepo = {
|
||||
|
||||
// ─── GatewayConfig ────────────────────────────────────────────────────────────
|
||||
|
||||
/** @internal Solo llamar desde src/store/process-store.ts */
|
||||
export const gatewayRepo = {
|
||||
async save(gateway: GatewayConfig): Promise<void> {
|
||||
await db.gateways.put(gateway)
|
||||
@@ -76,6 +97,7 @@ export const gatewayRepo = {
|
||||
|
||||
// ─── Resource ─────────────────────────────────────────────────────────────────
|
||||
|
||||
/** @internal Solo llamar desde src/store/process-store.ts */
|
||||
export const resourceRepo = {
|
||||
async save(resource: Resource): Promise<void> {
|
||||
await db.resources.put(resource)
|
||||
@@ -96,6 +118,7 @@ export const resourceRepo = {
|
||||
|
||||
// ─── Simulation ───────────────────────────────────────────────────────────────
|
||||
|
||||
/** @internal Solo llamar desde src/store/simulation-store.ts */
|
||||
export const simulationRepo = {
|
||||
async save(simulation: Simulation): Promise<void> {
|
||||
await db.simulations.put(simulation)
|
||||
|
||||
@@ -1,28 +1,76 @@
|
||||
import { create } from 'zustand'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import type { SimulationResult } from '@/domain/types'
|
||||
import { simulationRepo } from '@/persistence/repositories'
|
||||
|
||||
// Excepción arquitectónica documentada: simulation-store importa process-store en una dirección
|
||||
// para suscribirse a cambios de datos y invalidar resultados. No existe dependencia inversa.
|
||||
import { useProcessStore } from '@/store/process-store'
|
||||
|
||||
interface SimulationState {
|
||||
result: SimulationResult | null
|
||||
resultActual: SimulationResult | null // resultado del escenario actual
|
||||
resultAutomated: SimulationResult | null // resultado del escenario automatizado
|
||||
lastSimulatedAt: Date | null // timestamp de la última simulación exitosa
|
||||
isRunning: boolean
|
||||
error: string | null
|
||||
selectedActivityId: string | null
|
||||
|
||||
setResult: (result: SimulationResult) => void
|
||||
// Persiste ambos resultados en IndexedDB y actualiza el estado en memoria.
|
||||
// REGLA: los dos resultados siempre se guardan y actualizan en conjunto.
|
||||
persistResults: (processId: string, actual: SimulationResult, automated: SimulationResult) => Promise<void>
|
||||
setRunning: (running: boolean) => void
|
||||
setError: (error: string | null) => void
|
||||
selectActivity: (bpmnElementId: string | null) => void
|
||||
// Invalida AMBOS resultados a null. Se llama cuando cambian datos del proceso.
|
||||
invalidateResults: () => void
|
||||
reset: () => void
|
||||
}
|
||||
|
||||
export const useSimulationStore = create<SimulationState>((set) => ({
|
||||
result: null,
|
||||
resultActual: null,
|
||||
resultAutomated: null,
|
||||
lastSimulatedAt: null,
|
||||
isRunning: false,
|
||||
error: null,
|
||||
selectedActivityId: null,
|
||||
|
||||
setResult: (result) => set({ result, error: null }),
|
||||
persistResults: async (processId, actual, automated) => {
|
||||
await simulationRepo.save({
|
||||
id: uuidv4(),
|
||||
processId,
|
||||
executedAt: Date.now(),
|
||||
result: actual,
|
||||
resultAutomated: automated,
|
||||
})
|
||||
set({ resultActual: actual, resultAutomated: automated, lastSimulatedAt: new Date(), error: null })
|
||||
},
|
||||
|
||||
setRunning: (isRunning) => set({ isRunning }),
|
||||
setError: (error) => set({ error }),
|
||||
selectActivity: (selectedActivityId) => set({ selectedActivityId }),
|
||||
reset: () => set({ result: null, isRunning: false, error: null, selectedActivityId: null }),
|
||||
|
||||
invalidateResults: () =>
|
||||
set({ resultActual: null, resultAutomated: null, lastSimulatedAt: null }),
|
||||
|
||||
reset: () =>
|
||||
set({
|
||||
resultActual: null,
|
||||
resultAutomated: null,
|
||||
lastSimulatedAt: null,
|
||||
isRunning: false,
|
||||
error: null,
|
||||
selectedActivityId: null,
|
||||
}),
|
||||
}))
|
||||
|
||||
// Suscripción reactiva: cualquier cambio en activities o currentProcess del process-store
|
||||
// invalida los resultados para garantizar que nunca haya resultados "viejos" visibles.
|
||||
// La comparación por referencia de Zustand asegura que solo fires en cambios reales.
|
||||
useProcessStore.subscribe((state, prevState) => {
|
||||
if (
|
||||
state.activities !== prevState.activities ||
|
||||
state.currentProcess !== prevState.currentProcess
|
||||
) {
|
||||
useSimulationStore.getState().invalidateResults()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -9,14 +9,19 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* ── Shadcn/ui tokens — primary cambiado a InQ Orange ─────────────────
|
||||
Antes: azul (221.2 83.2% 53.3%).
|
||||
Ahora: naranja InQ #F59845 ≈ HSL(28, 90%, 62%).
|
||||
Esto actualiza automáticamente Button default, Switch checked,
|
||||
Tabs ring, Slider y cualquier componente que use bg-primary/text-primary. */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 221.2 83.2% 53.3%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--primary: 28 90% 62%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
@@ -27,8 +32,25 @@
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%;
|
||||
--ring: 28 90% 62%;
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* ── InQ ROI brand variables ─────────────────────────────────────────
|
||||
Para uso en CSS inline, SVG y contextos donde Tailwind no aplica.
|
||||
En componentes React, preferir las clases Tailwind (bg-inq-orange, etc.) */
|
||||
--inq-orange: #F59845;
|
||||
--inq-orange-dark: #B45309;
|
||||
--inq-orange-light: #FEF3E2;
|
||||
--inq-orange-lighter: #FFF8ED;
|
||||
--inq-magenta: #ED3E8F;
|
||||
|
||||
/* ── Semánticos ──────────────────────────────────────────────────────*/
|
||||
--color-success: #16A34A;
|
||||
--color-success-light: #F0FDF4;
|
||||
--color-warning: #F59E0B;
|
||||
--color-warning-bg: #FFFBEB;
|
||||
--color-danger: #EF4444;
|
||||
--color-danger-light: #FEE2E2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -45,10 +45,35 @@ export default {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
// ── InQ ROI brand tokens ──────────────────────────────────────────
|
||||
// Uso: bg-inq-orange, bg-inq-orange-dark, bg-inq-magenta, etc.
|
||||
// El gradiente identidad (#F59845 → #ED3E8F) se usa SOLO en KPI Hero
|
||||
// y banners principales. NUNCA en bordes ni fondos secundarios.
|
||||
inq: {
|
||||
orange: {
|
||||
DEFAULT: '#F59845',
|
||||
dark: '#B45309',
|
||||
light: '#FEF3E2',
|
||||
lighter: '#FFF8ED',
|
||||
},
|
||||
magenta: '#ED3E8F',
|
||||
},
|
||||
// ── Heatmap (saturado, calibrado para análisis de píxeles E2E) ──
|
||||
// DEBE coincidir con HEATMAP_LOW/MID/HIGH en src/lib/colors.ts.
|
||||
// Cambiar solo en conjunto con recalibración de tests E2E.
|
||||
heatmap: {
|
||||
low: '#10b981',
|
||||
mid: '#f59e0b',
|
||||
high: '#ef4444',
|
||||
low: '#10B981',
|
||||
mid: '#F59E0B',
|
||||
high: '#EF4444',
|
||||
},
|
||||
// ── Semánticos ───────────────────────────────────────────────────
|
||||
success: {
|
||||
DEFAULT: '#16A34A',
|
||||
light: '#F0FDF4',
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: '#F59E0B',
|
||||
bg: '#FFFBEB',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
|
||||
49
tests/design-system/tokens.test.ts
Normal file
49
tests/design-system/tokens.test.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Tests del sistema de diseño InQ ROI — Sprint 1.5.
|
||||
*
|
||||
* Verifican que los tokens de marca estén correctamente definidos en
|
||||
* tailwind.config.js y que no haya contaminación de la marca hermana CONCILIA.
|
||||
*
|
||||
* Estos tests son la fuente de verdad del contrato de marca: si cambiás
|
||||
* un token, el test falla y te fuerza a ser explícito con el cambio.
|
||||
*/
|
||||
import { describe, it, expect } from 'vitest'
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
||||
const tailwindConfig = require('../../tailwind.config.js').default ?? require('../../tailwind.config.js')
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const colors = (tailwindConfig.theme.extend.colors) as Record<string, any>
|
||||
|
||||
describe('Design tokens — paleta InQ ROI', () => {
|
||||
it('expone tokens de marca InQ con estructura anidada correcta', () => {
|
||||
const inq = colors.inq
|
||||
|
||||
expect(inq.orange.DEFAULT).toBe('#F59845')
|
||||
expect(inq.orange.dark).toBe('#B45309')
|
||||
expect(inq.orange.light).toBe('#FEF3E2')
|
||||
expect(inq.orange.lighter).toBe('#FFF8ED')
|
||||
expect(inq.magenta).toBe('#ED3E8F')
|
||||
})
|
||||
|
||||
it('NO incluye los colores de CONCILIA (marca hermana, no mezclar)', () => {
|
||||
const configStr = JSON.stringify(tailwindConfig)
|
||||
|
||||
// Morado primario de CONCILIA
|
||||
expect(configStr).not.toContain('#572FA2')
|
||||
expect(configStr).not.toContain('#572fa2')
|
||||
|
||||
// Magenta de CONCILIA
|
||||
expect(configStr).not.toContain('#CB1889')
|
||||
expect(configStr).not.toContain('#cb1889')
|
||||
})
|
||||
|
||||
it('expone tokens del heatmap saturado (calibrado para tests E2E)', () => {
|
||||
const heatmap = colors.heatmap
|
||||
|
||||
// Valores en mayúscula: #10B981, #F59E0B, #EF4444
|
||||
// Deben coincidir con HEATMAP_LOW/MID/HIGH en src/lib/colors.ts
|
||||
expect(heatmap.low).toBe('#10B981')
|
||||
expect(heatmap.mid).toBe('#F59E0B')
|
||||
expect(heatmap.high).toBe('#EF4444')
|
||||
})
|
||||
})
|
||||
161
tests/domain/roi.test.ts
Normal file
161
tests/domain/roi.test.ts
Normal file
@@ -0,0 +1,161 @@
|
||||
/**
|
||||
* Tests del módulo domain/roi.ts.
|
||||
* Cubren: happy path, edge cases de inversión cero, ahorro cero/negativo,
|
||||
* división por cero, escenarios de largo plazo y corto plazo.
|
||||
* Todas las fórmulas son nominales simples (ADR-014).
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { calculateRoi } from '@/domain/roi'
|
||||
import type { RoiInput } from '@/domain/roi'
|
||||
|
||||
// ─── Fixture base ─────────────────────────────────────────────────────────────
|
||||
|
||||
function baseInput(overrides: Partial<RoiInput> = {}): RoiInput {
|
||||
return {
|
||||
costPerExecutionActual: 100,
|
||||
costPerExecutionAutomated: 20,
|
||||
annualFrequency: 1000,
|
||||
analysisHorizonYears: 3,
|
||||
automationInvestment: 50_000,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Happy path ───────────────────────────────────────────────────────────────
|
||||
|
||||
describe('calculateRoi — happy path', () => {
|
||||
it('calcula ahorro por ejecución correctamente', () => {
|
||||
const r = calculateRoi(baseInput())
|
||||
expect(r.savingsPerExecution).toBeCloseTo(80)
|
||||
})
|
||||
|
||||
it('calcula ahorro por ejecución en %', () => {
|
||||
const r = calculateRoi(baseInput())
|
||||
expect(r.savingsPerExecutionPercent).toBeCloseTo(80) // 80/100 = 80%
|
||||
})
|
||||
|
||||
it('calcula ahorro anual = ahorro/ejecución × frecuencia', () => {
|
||||
const r = calculateRoi(baseInput())
|
||||
expect(r.annualSavings).toBeCloseTo(80_000) // 80 × 1000
|
||||
})
|
||||
|
||||
it('calcula payback en meses correctamente', () => {
|
||||
const r = calculateRoi(baseInput())
|
||||
// $50.000 / $80.000/año × 12 = 7.5 meses
|
||||
expect(r.paybackMonths).toBeCloseTo(7.5)
|
||||
})
|
||||
|
||||
it('calcula payback en años', () => {
|
||||
const r = calculateRoi(baseInput())
|
||||
expect(r.paybackYears).toBeCloseTo(0.625)
|
||||
})
|
||||
|
||||
it('calcula ahorro acumulado neto al horizonte', () => {
|
||||
const r = calculateRoi(baseInput())
|
||||
// ($80.000 × 3 años) - $50.000 = $190.000
|
||||
expect(r.cumulativeSavingsHorizon).toBeCloseTo(190_000)
|
||||
})
|
||||
|
||||
it('el payback dentro del horizonte es true cuando paybackYears < horizonYears', () => {
|
||||
const r = calculateRoi(baseInput()) // payback ~0.625 < 3 años
|
||||
expect(r.breaksEvenInHorizon).toBe(true)
|
||||
})
|
||||
|
||||
it('calcula ROI anualizado %', () => {
|
||||
const r = calculateRoi(baseInput())
|
||||
// ($80.000 / $50.000) × 100 = 160%
|
||||
expect(r.roiAnnualPercent).toBeCloseTo(160)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── Edge case: inversión cero con ahorro positivo ────────────────────────────
|
||||
|
||||
describe('calculateRoi — inversión cero', () => {
|
||||
it('payback es 0 meses (recuperación instantánea)', () => {
|
||||
const r = calculateRoi(baseInput({ automationInvestment: 0 }))
|
||||
expect(r.paybackMonths).toBe(0)
|
||||
expect(r.paybackYears).toBe(0)
|
||||
})
|
||||
|
||||
it('breaksEvenInHorizon es true', () => {
|
||||
const r = calculateRoi(baseInput({ automationInvestment: 0 }))
|
||||
expect(r.breaksEvenInHorizon).toBe(true)
|
||||
})
|
||||
|
||||
it('roiAnnualPercent es Infinity', () => {
|
||||
const r = calculateRoi(baseInput({ automationInvestment: 0 }))
|
||||
expect(r.roiAnnualPercent).toBe(Infinity)
|
||||
})
|
||||
|
||||
it('inversión cero con ahorro cero: roiAnnualPercent es 0', () => {
|
||||
const r = calculateRoi(baseInput({
|
||||
automationInvestment: 0,
|
||||
costPerExecutionActual: 100,
|
||||
costPerExecutionAutomated: 100,
|
||||
}))
|
||||
expect(r.roiAnnualPercent).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── Edge case: ahorro cero o negativo ────────────────────────────────────────
|
||||
|
||||
describe('calculateRoi — ahorro negativo o cero', () => {
|
||||
it('si el costo automatizado = costo actual, ahorro = 0', () => {
|
||||
const r = calculateRoi(baseInput({ costPerExecutionAutomated: 100 }))
|
||||
expect(r.savingsPerExecution).toBeCloseTo(0)
|
||||
expect(r.annualSavings).toBeCloseTo(0)
|
||||
})
|
||||
|
||||
it('ahorro cero → payback Infinity', () => {
|
||||
const r = calculateRoi(baseInput({ costPerExecutionAutomated: 100 }))
|
||||
expect(r.paybackMonths).toBe(Infinity)
|
||||
expect(r.paybackYears).toBe(Infinity)
|
||||
})
|
||||
|
||||
it('ahorro cero → breaksEvenInHorizon false', () => {
|
||||
const r = calculateRoi(baseInput({ costPerExecutionAutomated: 100 }))
|
||||
expect(r.breaksEvenInHorizon).toBe(false)
|
||||
})
|
||||
|
||||
it('ahorro negativo (automatizado más caro): payback Infinity', () => {
|
||||
const r = calculateRoi(baseInput({ costPerExecutionAutomated: 150 }))
|
||||
expect(r.annualSavings).toBeLessThan(0)
|
||||
expect(r.paybackMonths).toBe(Infinity)
|
||||
expect(r.breaksEvenInHorizon).toBe(false)
|
||||
})
|
||||
|
||||
it('ahorro negativo: cumulativeSavings también es negativo', () => {
|
||||
const r = calculateRoi(baseInput({ costPerExecutionAutomated: 150 }))
|
||||
expect(r.cumulativeSavingsHorizon).toBeLessThan(0)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── Edge case: costo actual cero (evitar div/0) ──────────────────────────────
|
||||
|
||||
describe('calculateRoi — costo actual cero', () => {
|
||||
it('savingsPerExecutionPercent es 0, no NaN ni Infinity', () => {
|
||||
const r = calculateRoi(baseInput({
|
||||
costPerExecutionActual: 0,
|
||||
costPerExecutionAutomated: 0,
|
||||
}))
|
||||
expect(r.savingsPerExecutionPercent).toBe(0)
|
||||
expect(Number.isFinite(r.savingsPerExecutionPercent)).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── Escenario de largo plazo (horizonte 10 años) ─────────────────────────────
|
||||
|
||||
describe('calculateRoi — horizonte extendido', () => {
|
||||
it('payback fuera del horizonte corto → breaksEvenInHorizon false', () => {
|
||||
// savingsPerExec=10, freq=1000 → annualSavings=$10.000; payback=$500.000/$10.000=50 años
|
||||
const r = calculateRoi(baseInput({
|
||||
automationInvestment: 500_000,
|
||||
costPerExecutionActual: 100,
|
||||
costPerExecutionAutomated: 90,
|
||||
annualFrequency: 1000,
|
||||
}))
|
||||
expect(r.paybackYears).toBeGreaterThan(3)
|
||||
expect(r.breaksEvenInHorizon).toBe(false)
|
||||
})
|
||||
})
|
||||
@@ -89,6 +89,9 @@ describe('runSimulation', () => {
|
||||
directCostFixed: directCost,
|
||||
executionTimeMinutes: minutes,
|
||||
assignedResources: resources,
|
||||
automatable: false,
|
||||
automatedCostFixed: 0,
|
||||
automatedTimeMinutes: 0,
|
||||
})
|
||||
|
||||
it('calcula costo total sin recursos — proceso lineal', () => {
|
||||
@@ -208,3 +211,182 @@ describe('runSimulation', () => {
|
||||
expect(result.perActivity[1].bpmnElementId).toBe('taskA')
|
||||
})
|
||||
})
|
||||
|
||||
// ─── Sprint 1: escenario 'automated' + actividades automatizables ─────────────
|
||||
|
||||
describe('runSimulation — scenario automated', () => {
|
||||
const makeAutoActivity = (
|
||||
bpmnElementId: string,
|
||||
opts: {
|
||||
directCost?: number; directTime?: number
|
||||
automatable?: boolean; automatedCost?: number; automatedTime?: number
|
||||
} = {}
|
||||
): Activity => ({
|
||||
id: `act-${bpmnElementId}`,
|
||||
processId: 'proc1',
|
||||
bpmnElementId,
|
||||
name: bpmnElementId,
|
||||
type: 'task',
|
||||
directCostFixed: opts.directCost ?? 100,
|
||||
executionTimeMinutes: opts.directTime ?? 60,
|
||||
assignedResources: [],
|
||||
automatable: opts.automatable ?? false,
|
||||
automatedCostFixed: opts.automatedCost ?? 0,
|
||||
automatedTimeMinutes: opts.automatedTime ?? 0,
|
||||
})
|
||||
|
||||
// ─── scenario=automated con costos en cero ────────────────────────────────
|
||||
|
||||
it('scenario=automated con automatedCostFixed=0 y automatedTimeMinutes=0 devuelve cost=0 time=0 sin NaN', () => {
|
||||
const act = makeAutoActivity('taskA', {
|
||||
directCost: 500, directTime: 60,
|
||||
automatable: true, automatedCost: 0, automatedTime: 0,
|
||||
})
|
||||
|
||||
const result = runSimulation({
|
||||
processXml: LINEAR_BPMN,
|
||||
activities: new Map([['taskA', act], ['taskB', makeAutoActivity('taskB')]]),
|
||||
gateways: new Map(),
|
||||
resources: new Map(),
|
||||
globalSettings: { currency: 'USD', overheadPercentage: 0 },
|
||||
scenario: 'automated',
|
||||
})
|
||||
|
||||
const actResult = result.perActivity.find((a) => a.bpmnElementId === 'taskA')!
|
||||
expect(actResult).toBeDefined()
|
||||
expect(actResult.expectedDirectCost).toBe(0)
|
||||
expect(actResult.executionTimeMinutes).toBe(0)
|
||||
|
||||
// Verificación explícita de ausencia de NaN en todos los campos numéricos
|
||||
expect(Number.isNaN(actResult.expectedDirectCost)).toBe(false)
|
||||
expect(Number.isNaN(actResult.expectedIndirectCost)).toBe(false)
|
||||
expect(Number.isNaN(actResult.expectedTotalCost)).toBe(false)
|
||||
expect(Number.isNaN(actResult.percentOfTotal)).toBe(false)
|
||||
expect(Number.isNaN(result.totalCost)).toBe(false)
|
||||
})
|
||||
|
||||
it('actividad NO automatable mantiene costos originales en scenario=automated', () => {
|
||||
const act = makeAutoActivity('taskA', {
|
||||
directCost: 200, directTime: 30,
|
||||
automatable: false, automatedCost: 0, automatedTime: 0,
|
||||
})
|
||||
|
||||
const result = runSimulation({
|
||||
processXml: LINEAR_BPMN,
|
||||
activities: new Map([['taskA', act], ['taskB', makeAutoActivity('taskB')]]),
|
||||
gateways: new Map(),
|
||||
resources: new Map(),
|
||||
globalSettings: { currency: 'USD', overheadPercentage: 0 },
|
||||
scenario: 'automated',
|
||||
})
|
||||
|
||||
const actResult = result.perActivity.find((a) => a.bpmnElementId === 'taskA')!
|
||||
// automatable=false → usa costo original
|
||||
expect(actResult.expectedDirectCost).toBeCloseTo(200)
|
||||
expect(actResult.executionTimeMinutes).toBe(30)
|
||||
})
|
||||
|
||||
// ─── La probabilidad de ejecución NO depende del scenario ────────────────
|
||||
|
||||
it('probabilidad de ejecución NO cambia entre scenario=actual y scenario=automated', () => {
|
||||
// Usamos el BPMN XOR: taskB tiene prob 0.7, taskC tiene prob 0.3
|
||||
const XOR_BPMN_LOCAL = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" targetNamespace="test">
|
||||
<process id="p" isExecutable="false">
|
||||
<startEvent id="start"><outgoing>f1</outgoing></startEvent>
|
||||
<task id="taskA" name="A"><incoming>f1</incoming><outgoing>f2</outgoing></task>
|
||||
<exclusiveGateway id="gw1"><incoming>f2</incoming><outgoing>f3</outgoing><outgoing>f4</outgoing></exclusiveGateway>
|
||||
<task id="taskB" name="B"><incoming>f3</incoming><outgoing>f5</outgoing></task>
|
||||
<task id="taskC" name="C"><incoming>f4</incoming><outgoing>f6</outgoing></task>
|
||||
<endEvent id="end"><incoming>f5</incoming><incoming>f6</incoming></endEvent>
|
||||
<sequenceFlow id="f1" sourceRef="start" targetRef="taskA"/>
|
||||
<sequenceFlow id="f2" sourceRef="taskA" targetRef="gw1"/>
|
||||
<sequenceFlow id="f3" sourceRef="gw1" targetRef="taskB"/>
|
||||
<sequenceFlow id="f4" sourceRef="gw1" targetRef="taskC"/>
|
||||
<sequenceFlow id="f5" sourceRef="taskB" targetRef="end"/>
|
||||
<sequenceFlow id="f6" sourceRef="taskC" targetRef="end"/>
|
||||
</process>
|
||||
</definitions>`
|
||||
|
||||
const activities = new Map([
|
||||
['taskA', makeAutoActivity('taskA', { automatable: true, automatedCost: 5, automatedTime: 2 })],
|
||||
['taskB', makeAutoActivity('taskB', { automatable: true, automatedCost: 0, automatedTime: 0 })],
|
||||
['taskC', makeAutoActivity('taskC', { automatable: false })],
|
||||
])
|
||||
|
||||
const gateways = new Map([['gw1', {
|
||||
id: 'gw1', processId: 'proc1', bpmnElementId: 'gw1', gatewayType: 'exclusive' as const,
|
||||
branches: [
|
||||
{ flowId: 'f3', targetElementId: 'taskB', probability: 0.7 },
|
||||
{ flowId: 'f4', targetElementId: 'taskC', probability: 0.3 },
|
||||
],
|
||||
}]])
|
||||
|
||||
const baseInput = {
|
||||
processXml: XOR_BPMN_LOCAL,
|
||||
activities,
|
||||
gateways,
|
||||
resources: new Map(),
|
||||
globalSettings: { currency: 'USD', overheadPercentage: 0 },
|
||||
}
|
||||
|
||||
const resultActual = runSimulation({ ...baseInput, scenario: 'actual' })
|
||||
const resultAutomated = runSimulation({ ...baseInput, scenario: 'automated' })
|
||||
|
||||
// taskA tiene prob 1.0 en ambos
|
||||
const aActual = resultActual.perActivity.find((a) => a.bpmnElementId === 'taskA')!
|
||||
const aAuto = resultAutomated.perActivity.find((a) => a.bpmnElementId === 'taskA')!
|
||||
expect(aActual.executionProbability).toBeCloseTo(1.0)
|
||||
expect(aAuto.executionProbability).toBeCloseTo(1.0)
|
||||
|
||||
// taskB tiene prob 0.7 en ambos (el scenario no cambia el grafo)
|
||||
const bActual = resultActual.perActivity.find((a) => a.bpmnElementId === 'taskB')!
|
||||
const bAuto = resultAutomated.perActivity.find((a) => a.bpmnElementId === 'taskB')!
|
||||
expect(bActual.executionProbability).toBeCloseTo(0.7)
|
||||
expect(bAuto.executionProbability).toBeCloseTo(0.7)
|
||||
|
||||
// taskC tiene prob 0.3 en ambos
|
||||
const cActual = resultActual.perActivity.find((a) => a.bpmnElementId === 'taskC')!
|
||||
const cAuto = resultAutomated.perActivity.find((a) => a.bpmnElementId === 'taskC')!
|
||||
expect(cActual.executionProbability).toBeCloseTo(0.3)
|
||||
expect(cAuto.executionProbability).toBeCloseTo(0.3)
|
||||
|
||||
// Los costos SÍ cambian para actividades automatable=true
|
||||
// taskB en actual: directCostFixed=100; en automated: automatedCostFixed=0
|
||||
expect(bActual.expectedDirectCost).toBeGreaterThan(0)
|
||||
expect(bAuto.expectedDirectCost).toBe(0)
|
||||
|
||||
// taskC no es automatable → costos iguales en ambos
|
||||
expect(cActual.expectedDirectCost).toBeCloseTo(cAuto.expectedDirectCost)
|
||||
})
|
||||
|
||||
it('NaN no aparece en ningún campo cuando TODOS los costos son cero', () => {
|
||||
const activities = new Map([
|
||||
['taskA', makeAutoActivity('taskA', { directCost: 0, directTime: 0, automatable: true, automatedCost: 0, automatedTime: 0 })],
|
||||
['taskB', makeAutoActivity('taskB', { directCost: 0, directTime: 0, automatable: true, automatedCost: 0, automatedTime: 0 })],
|
||||
])
|
||||
|
||||
for (const scenario of ['actual', 'automated'] as const) {
|
||||
const result = runSimulation({
|
||||
processXml: LINEAR_BPMN,
|
||||
activities,
|
||||
gateways: new Map(),
|
||||
resources: new Map(),
|
||||
globalSettings: { currency: 'USD', overheadPercentage: 0.2 },
|
||||
scenario,
|
||||
})
|
||||
|
||||
expect(Number.isNaN(result.totalCost)).toBe(false)
|
||||
expect(Number.isNaN(result.totalDirectCost)).toBe(false)
|
||||
expect(Number.isNaN(result.totalIndirectCost)).toBe(false)
|
||||
|
||||
for (const act of result.perActivity) {
|
||||
expect(Number.isNaN(act.expectedDirectCost)).toBe(false)
|
||||
expect(Number.isNaN(act.expectedIndirectCost)).toBe(false)
|
||||
expect(Number.isNaN(act.expectedTotalCost)).toBe(false)
|
||||
expect(Number.isNaN(act.percentOfTotal)).toBe(false)
|
||||
expect(Number.isNaN(act.executionProbability)).toBe(false)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
280
tests/e2e/export-roi.spec.ts
Normal file
280
tests/e2e/export-roi.spec.ts
Normal file
@@ -0,0 +1,280 @@
|
||||
/**
|
||||
* E2E: Verifica el export PDF y CSV del tab "Comparación + ROI".
|
||||
*
|
||||
* Flujo completo:
|
||||
* 1. Importar medium-with-gateways
|
||||
* 2. Configurar task_recv como automatizable ($50 de costo, 5 min)
|
||||
* 3. Configurar volumetría e inversión en el tab Global
|
||||
* 4. Simular ambos escenarios
|
||||
* 5. Navegar al tab "Comparación + ROI"
|
||||
* 6. Exportar PDF → verificar tamaño, páginas, keywords, acentos
|
||||
* 7. Exportar CSV → verificar BOM, 16 columnas, metadata ROI
|
||||
*
|
||||
* Test adicional: con BPMN sin automatizables, los tabs ROI y Automatizado
|
||||
* están disabled y los botones de export funcionan para el tab actual.
|
||||
*
|
||||
* Ejecutar: npx playwright test tests/e2e/export-roi.spec.ts
|
||||
*/
|
||||
import { test, expect } from '@playwright/test'
|
||||
import { readFileSync, mkdirSync } from 'fs'
|
||||
import { resolve } from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
import { PDFParse } from 'pdf-parse'
|
||||
|
||||
const __dirname = fileURLToPath(new URL('.', import.meta.url))
|
||||
const BPMN_DIR = resolve(__dirname, '../../public/sample-processes')
|
||||
const OUTPUT_DIR = resolve(__dirname, '__output__')
|
||||
|
||||
test.beforeAll(() => {
|
||||
mkdirSync(OUTPUT_DIR, { recursive: true })
|
||||
})
|
||||
|
||||
async function parsePdf(buffer: Buffer): Promise<{ numpages: number; text: string }> {
|
||||
const parser = new PDFParse({ data: buffer })
|
||||
const result = await parser.getText()
|
||||
await parser.destroy()
|
||||
return { numpages: result.total, text: result.text }
|
||||
}
|
||||
|
||||
// ─── Helper: importar BPMN y llegar al workspace ──────────────────────────────
|
||||
|
||||
async function importBpmn(page: import('@playwright/test').Page, bpmnFile: string) {
|
||||
await page.goto('/')
|
||||
const fileInput = page.locator('#bpmn-file-input')
|
||||
await fileInput.setInputFiles(resolve(BPMN_DIR, bpmnFile))
|
||||
await page.waitForURL(/\/workspace\//, { timeout: 15_000 })
|
||||
await page.waitForSelector('button:has-text("Simular")', { timeout: 15_000 })
|
||||
await page.waitForTimeout(1_500)
|
||||
}
|
||||
|
||||
// ─── Helper: configurar una actividad como automatizable ──────────────────────
|
||||
|
||||
async function makeAutomatable(
|
||||
page: import('@playwright/test').Page,
|
||||
elementId: string,
|
||||
cost: number,
|
||||
timeMin: number
|
||||
) {
|
||||
// Click en el elemento BPMN en el canvas
|
||||
await page.locator(`[data-element-id="${elementId}"]`).first().click()
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// Activar el toggle de automatizable
|
||||
const toggle = page.getByRole('switch', { name: /automatizable/i })
|
||||
if (await toggle.getAttribute('aria-checked') === 'false') {
|
||||
await toggle.click()
|
||||
await page.waitForTimeout(300)
|
||||
}
|
||||
|
||||
// Ingresar costo automatizado
|
||||
const costInput = page.getByLabel(/Costo automatizado/i)
|
||||
await costInput.fill(String(cost))
|
||||
|
||||
// Ingresar tiempo automatizado
|
||||
const timeInput = page.getByLabel(/Tiempo automatizado/i)
|
||||
await timeInput.fill(String(timeMin))
|
||||
|
||||
// Guardar
|
||||
const guardarBtn = page.getByRole('button', { name: /Guardar/i })
|
||||
await guardarBtn.click()
|
||||
await page.waitForTimeout(500)
|
||||
}
|
||||
|
||||
// ─── Helper: configurar volumetría en tab Global ──────────────────────────────
|
||||
|
||||
async function configureGlobal(
|
||||
page: import('@playwright/test').Page,
|
||||
annualFrequency: number,
|
||||
investment: number
|
||||
) {
|
||||
// Ir al tab Global
|
||||
const globalTab = page.getByRole('tab', { name: /Global/i })
|
||||
await globalTab.click()
|
||||
await page.waitForTimeout(300)
|
||||
|
||||
// Frecuencia anual
|
||||
const freqInput = page.getByLabel(/Frecuencia anual/i)
|
||||
await freqInput.fill(String(annualFrequency))
|
||||
|
||||
// Inversión
|
||||
const investInput = page.getByLabel(/Inversión en automatización/i)
|
||||
await investInput.fill(String(investment))
|
||||
|
||||
// Guardar
|
||||
const guardarBtn = page.getByRole('button', { name: /Guardar/i })
|
||||
await guardarBtn.click()
|
||||
await page.waitForTimeout(500)
|
||||
}
|
||||
|
||||
// ─── Helper: simular y llegar al reporte ──────────────────────────────────────
|
||||
|
||||
async function simulateAndGoToReport(page: import('@playwright/test').Page) {
|
||||
const simBtn = page.getByRole('button', { name: 'Simular' })
|
||||
await expect(simBtn).not.toBeDisabled({ timeout: 5_000 })
|
||||
await simBtn.click()
|
||||
await page.waitForURL(/\/report\//, { timeout: 20_000 })
|
||||
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 30_000 })
|
||||
await page.waitForSelector('.bpmn-container .djs-group', { timeout: 30_000 })
|
||||
}
|
||||
|
||||
// ─── Test principal: flujo ROI completo ───────────────────────────────────────
|
||||
|
||||
test('Export ROI — flujo completo con medium-with-gateways', async ({ page }) => {
|
||||
await importBpmn(page, 'medium-with-gateways.bpmn')
|
||||
|
||||
// Configurar task_recv como automatizable ($50, 5 min)
|
||||
await makeAutomatable(page, 'task_recv', 50, 5)
|
||||
|
||||
// Configurar volumetría e inversión
|
||||
await configureGlobal(page, 12_000, 50_000)
|
||||
|
||||
// Simular
|
||||
await simulateAndGoToReport(page)
|
||||
|
||||
// Navegar al tab ROI
|
||||
const roiTab = page.getByRole('tab', { name: /Comparación/i })
|
||||
await expect(roiTab).not.toBeDisabled({ timeout: 5_000 })
|
||||
await roiTab.click()
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// ── PDF ROI ────────────────────────────────────────────────────────────────
|
||||
const pdfPath = resolve(OUTPUT_DIR, 'roi-test.pdf')
|
||||
const pdfDownload = page.waitForEvent('download', { timeout: 90_000 })
|
||||
await page.getByRole('button', { name: 'Exportar PDF' }).click()
|
||||
const dlPdf = await pdfDownload
|
||||
await dlPdf.saveAs(pdfPath)
|
||||
|
||||
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 30_000 })
|
||||
|
||||
const pdfBuffer = readFileSync(pdfPath)
|
||||
const pdfBytes = pdfBuffer.length
|
||||
console.log(`\n📊 ROI PDF: ${pdfBytes} bytes (${(pdfBytes / 1024).toFixed(1)} KB)`)
|
||||
|
||||
// Tamaño razonable: < 400 KB
|
||||
expect(pdfBytes).toBeGreaterThan(30_000)
|
||||
expect(pdfBytes).toBeLessThan(400_000)
|
||||
|
||||
// Nombre con sufijo _roi
|
||||
const downloadName = dlPdf.suggestedFilename()
|
||||
console.log(` Nombre archivo: ${downloadName}`)
|
||||
expect(downloadName).toMatch(/_roi\.pdf$/)
|
||||
|
||||
// Contenido mínimo
|
||||
const { numpages, text } = await parsePdf(pdfBuffer)
|
||||
console.log(` Páginas: ${numpages}`)
|
||||
console.log(` Primeros 300 chars: ${text.slice(0, 300).replace(/\n/g, ' ')}`)
|
||||
|
||||
// Al menos 3 páginas (hay 4 en el ROI PDF)
|
||||
expect(numpages).toBeGreaterThanOrEqual(3)
|
||||
|
||||
// Keywords que deben estar en el texto del PDF
|
||||
expect(text).toMatch(/ROI|retorno|automatizaci/i)
|
||||
expect(text).toMatch(/Payback|payback|recupera/i)
|
||||
expect(text).toMatch(/ahorro|Ahorro/i)
|
||||
expect(text).toContain('USD')
|
||||
|
||||
// ── CSV ROI ────────────────────────────────────────────────────────────────
|
||||
const csvPath = resolve(OUTPUT_DIR, 'roi-test.csv')
|
||||
const csvDownload = page.waitForEvent('download', { timeout: 30_000 })
|
||||
await page.getByRole('button', { name: 'Exportar CSV' }).click()
|
||||
const dlCsv = await csvDownload
|
||||
await dlCsv.saveAs(csvPath)
|
||||
|
||||
const csvBuffer = readFileSync(csvPath)
|
||||
const csvBytes = csvBuffer.length
|
||||
console.log(` CSV: ${csvBytes} bytes`)
|
||||
console.log(` Nombre archivo CSV: ${dlCsv.suggestedFilename()}`)
|
||||
|
||||
// Nombre con sufijo _roi
|
||||
expect(dlCsv.suggestedFilename()).toMatch(/_roi\.csv$/)
|
||||
|
||||
const csvText = csvBuffer.toString('utf-8')
|
||||
|
||||
// BOM UTF-8
|
||||
expect(csvText).toMatch(/^/)
|
||||
|
||||
// Metadata ROI presente
|
||||
expect(csvText).toContain('# Ahorro por ejecución')
|
||||
expect(csvText).toContain('# Payback (meses)')
|
||||
expect(csvText).toContain('# ROI anualizado')
|
||||
expect(csvText).toContain('# Frecuencia anual: 12000')
|
||||
|
||||
// 16 columnas en el header de datos
|
||||
const csvNoBom = csvText.startsWith('') ? csvText.slice(1) : csvText
|
||||
const headerLine = csvNoBom.split('\r\n').find((l) => !l.startsWith('#') && l.trim())!
|
||||
const colCount = headerLine.split('","').length
|
||||
console.log(` Columnas CSV: ${colCount}`)
|
||||
expect(colCount).toBe(16)
|
||||
|
||||
// Columna Automatizable presente
|
||||
expect(csvText).toContain('Automatizable')
|
||||
})
|
||||
|
||||
// ─── Test: sin automatizables → tab ROI disabled, export de "Actual" OK ──────
|
||||
|
||||
test('Tabs ROI/Automatizado disabled cuando no hay actividades automatizables', async ({ page }) => {
|
||||
await importBpmn(page, 'simple-linear.bpmn')
|
||||
await simulateAndGoToReport(page)
|
||||
|
||||
// Los tabs deben estar disabled
|
||||
const autoTab = page.getByRole('tab', { name: /Automatizado/i })
|
||||
const roiTab = page.getByRole('tab', { name: /Comparación/i })
|
||||
|
||||
await expect(autoTab).toBeDisabled()
|
||||
await expect(roiTab).toBeDisabled()
|
||||
|
||||
// El export PDF/CSV del tab "Actual" sigue funcionando
|
||||
const pdfPath = resolve(OUTPUT_DIR, 'no-automatable.pdf')
|
||||
const pdfDownload = page.waitForEvent('download', { timeout: 90_000 })
|
||||
await page.getByRole('button', { name: 'Exportar PDF' }).click()
|
||||
const dlPdf = await pdfDownload
|
||||
await dlPdf.saveAs(pdfPath)
|
||||
|
||||
const downloadName = dlPdf.suggestedFilename()
|
||||
console.log(`\n📄 Sin automatizables — nombre PDF: ${downloadName}`)
|
||||
expect(downloadName).toMatch(/_actual\.pdf$/)
|
||||
|
||||
const pdfBuffer = readFileSync(pdfPath)
|
||||
expect(pdfBuffer.length).toBeGreaterThan(30_000)
|
||||
|
||||
const csvDownload = page.waitForEvent('download', { timeout: 30_000 })
|
||||
await page.getByRole('button', { name: 'Exportar CSV' }).click()
|
||||
const dlCsv = await csvDownload
|
||||
|
||||
console.log(` Nombre CSV: ${dlCsv.suggestedFilename()}`)
|
||||
expect(dlCsv.suggestedFilename()).toMatch(/_actual\.csv$/)
|
||||
})
|
||||
|
||||
// ─── Test: tab Automatizado → PDF y CSV con sufijo correcto ───────────────────
|
||||
|
||||
test('Export Automatizado — sufijo _automatizado en nombres de archivo', async ({ page }) => {
|
||||
await importBpmn(page, 'medium-with-gateways.bpmn')
|
||||
await makeAutomatable(page, 'task_recv', 30, 5)
|
||||
await simulateAndGoToReport(page)
|
||||
|
||||
// Ir al tab Automatizado
|
||||
const autoTab = page.getByRole('tab', { name: /^Automatizado$/i })
|
||||
await expect(autoTab).not.toBeDisabled()
|
||||
await autoTab.click()
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// PDF con sufijo _automatizado
|
||||
const pdfPath = resolve(OUTPUT_DIR, 'automatizado.pdf')
|
||||
const pdfDownload = page.waitForEvent('download', { timeout: 90_000 })
|
||||
await page.getByRole('button', { name: 'Exportar PDF' }).click()
|
||||
const dlPdf = await pdfDownload
|
||||
await dlPdf.saveAs(pdfPath)
|
||||
|
||||
const pdfName = dlPdf.suggestedFilename()
|
||||
console.log(`\n⚙️ Automatizado PDF: ${pdfName}`)
|
||||
expect(pdfName).toMatch(/_automatizado\.pdf$/)
|
||||
|
||||
const pdfBuffer = readFileSync(pdfPath)
|
||||
expect(pdfBuffer.length).toBeGreaterThan(30_000)
|
||||
|
||||
// CSV con sufijo _automatizado
|
||||
const csvDownload = page.waitForEvent('download', { timeout: 30_000 })
|
||||
await page.getByRole('button', { name: 'Exportar CSV' }).click()
|
||||
const dlCsv = await csvDownload
|
||||
expect(dlCsv.suggestedFilename()).toMatch(/_automatizado\.csv$/)
|
||||
})
|
||||
174
tests/e2e/payback-etapa-2.spec.ts
Normal file
174
tests/e2e/payback-etapa-2.spec.ts
Normal file
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* Etapa 2 Sprint 1.5 — Validación visual de formatPayback.
|
||||
*
|
||||
* 1. Screenshot del RoiKpiBar mostrando payback formateado (no "0.0 meses").
|
||||
* 2. Screenshot de TransparencySection con ROI > 1000%.
|
||||
* 3. PDF correcto del tab "Comparación + ROI" guardado para validación visual.
|
||||
*
|
||||
* Setup: medium-with-gateways, task_recv + task_score + task_analisis automatizables,
|
||||
* $200 costo directo / $20 costo automatizado, 5000 ejecuciones/año, $80.000 inversión.
|
||||
*
|
||||
* Root cause del PDF erróneo en run anterior: el test exportaba antes de navegar al
|
||||
* tab ROI, por lo que activeTab = 'actual' y se generaba el PDF del escenario actual.
|
||||
* Fix: navegar al tab "Comparación + ROI" ANTES de exportar.
|
||||
*/
|
||||
import { test, expect } from '@playwright/test'
|
||||
import { resolve } from 'path'
|
||||
import { mkdirSync } from 'fs'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
const __dirname = fileURLToPath(new URL('.', import.meta.url))
|
||||
const BPMN_DIR = resolve(__dirname, '../../public/sample-processes')
|
||||
const OUT_DIR = resolve(__dirname, './__output__')
|
||||
|
||||
test.beforeAll(() => { mkdirSync(OUT_DIR, { recursive: true }) })
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
async function importBpmn(page: import('@playwright/test').Page, filename: string) {
|
||||
await page.goto('/')
|
||||
await page.locator('#bpmn-file-input').setInputFiles(resolve(BPMN_DIR, filename))
|
||||
await page.waitForURL(/\/workspace\//, { timeout: 15_000 })
|
||||
await page.waitForSelector('button:has-text("Simular")', { timeout: 10_000 })
|
||||
await page.waitForTimeout(1_000)
|
||||
}
|
||||
|
||||
async function setActivityCosts(
|
||||
page: import('@playwright/test').Page,
|
||||
elementId: string,
|
||||
directCost: number,
|
||||
automatedCost: number,
|
||||
automatedTime: number
|
||||
) {
|
||||
await page.locator(`[data-element-id="${elementId}"]`).first().click()
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
const toggle = page.getByRole('switch', { name: /automatizable/i })
|
||||
if (await toggle.getAttribute('aria-checked') === 'false') {
|
||||
await toggle.click()
|
||||
await page.waitForTimeout(300)
|
||||
}
|
||||
|
||||
const directCostInput = page.getByLabel(/Costo directo fijo/i)
|
||||
await directCostInput.fill(String(directCost))
|
||||
|
||||
const autoCostInput = page.getByLabel(/Costo automatizado/i)
|
||||
await autoCostInput.fill(String(automatedCost))
|
||||
|
||||
const autoTimeInput = page.getByLabel(/Tiempo automatizado/i)
|
||||
await autoTimeInput.fill(String(automatedTime))
|
||||
|
||||
const guardar = page.getByRole('button', { name: /Guardar/i })
|
||||
await guardar.click()
|
||||
await page.waitForTimeout(500)
|
||||
}
|
||||
|
||||
async function configureGlobal(
|
||||
page: import('@playwright/test').Page,
|
||||
annualFrequency: number,
|
||||
investment: number
|
||||
) {
|
||||
const globalTab = page.getByRole('tab', { name: /Global/i })
|
||||
await globalTab.click()
|
||||
await page.waitForTimeout(300)
|
||||
|
||||
const freqInput = page.getByLabel(/Frecuencia anual/i)
|
||||
await freqInput.fill(String(annualFrequency))
|
||||
|
||||
const investInput = page.getByLabel(/Inversión en automatización/i)
|
||||
await investInput.fill(String(investment))
|
||||
|
||||
const guardar = page.getByRole('button', { name: /Guardar/i })
|
||||
await guardar.click()
|
||||
await page.waitForTimeout(500)
|
||||
}
|
||||
|
||||
async function setupRealisticScenario(page: import('@playwright/test').Page) {
|
||||
await importBpmn(page, 'medium-with-gateways.bpmn')
|
||||
await setActivityCosts(page, 'task_recv', 200, 20, 10)
|
||||
await setActivityCosts(page, 'task_score', 200, 20, 10)
|
||||
await setActivityCosts(page, 'task_analisis', 200, 20, 10)
|
||||
await configureGlobal(page, 5000, 80000)
|
||||
|
||||
const simBtn = page.getByRole('button', { name: 'Simular' })
|
||||
await expect(simBtn).not.toBeDisabled({ timeout: 5_000 })
|
||||
await simBtn.click()
|
||||
await page.waitForURL(/\/report\//, { timeout: 20_000 })
|
||||
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 15_000 })
|
||||
await page.waitForTimeout(800)
|
||||
|
||||
// Navegar al tab Comparación + ROI — NECESARIO para que activeTab sea 'roi'
|
||||
const roiTab = page.getByRole('tab', { name: /Comparación/i })
|
||||
await expect(roiTab).not.toBeDisabled({ timeout: 5_000 })
|
||||
await roiTab.click()
|
||||
await page.waitForSelector('[data-testid="roi-kpi-card"]', { timeout: 10_000 })
|
||||
await page.waitForTimeout(800)
|
||||
}
|
||||
|
||||
// ─── Tests ────────────────────────────────────────────────────────────────────
|
||||
|
||||
test('screenshot RoiKpiBar — payback formateado (no "0.0 meses")', async ({ page }) => {
|
||||
await setupRealisticScenario(page)
|
||||
|
||||
// Screenshot del viewport — muestra KPI bar
|
||||
await page.screenshot({
|
||||
path: resolve(OUT_DIR, 'payback-roi-kpi-bar.png'),
|
||||
fullPage: false,
|
||||
})
|
||||
|
||||
// Verificar que el payback card NO muestra "0.0 meses"
|
||||
const cards = page.locator('[data-testid="roi-kpi-card"]')
|
||||
const texts = await cards.allTextContents()
|
||||
console.log('KPI card texts:', JSON.stringify(texts, null, 2))
|
||||
const hasOldFormat = texts.some(t => /\b0\.0 meses\b/.test(t))
|
||||
expect(hasOldFormat, 'Payback card must not show "0.0 meses" — use formatPayback').toBe(false)
|
||||
})
|
||||
|
||||
test('screenshot TransparencySection — ROI > 1000% dispara aviso', async ({ page }) => {
|
||||
await setupRealisticScenario(page)
|
||||
|
||||
// Verificar que ROI es > 1000% (condición para disparar Transparencia)
|
||||
const cards = page.locator('[data-testid="roi-kpi-card"]')
|
||||
const texts = await cards.allTextContents()
|
||||
const roiText = texts.find(t => t.toLowerCase().includes('roi anual')) ?? ''
|
||||
console.log('ROI card text:', roiText)
|
||||
|
||||
// Scroll hasta el final de la página para revelar TransparencySection
|
||||
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// Verificar que la sección existe en el DOM
|
||||
const transparency = page.locator('text=Transparencia metodológica').first()
|
||||
await expect(transparency).toBeVisible({ timeout: 5_000 })
|
||||
|
||||
// Screenshot full-page para capturar la sección
|
||||
await page.screenshot({
|
||||
path: resolve(OUT_DIR, 'payback-transparency-section.png'),
|
||||
fullPage: true,
|
||||
})
|
||||
|
||||
console.log('TransparencySection visible con ROI:', roiText)
|
||||
})
|
||||
|
||||
test('PDF ROI correcto — tab "Comparación + ROI" activo al exportar', async ({ page }) => {
|
||||
// Root cause del PDF erróneo anterior: exportar con activeTab = 'actual'.
|
||||
// Fix: setupRealisticScenario ya navega al tab ROI ANTES de este punto.
|
||||
await setupRealisticScenario(page)
|
||||
|
||||
// Tab ROI ya activo — el BPMN canvas no existe en este tab, no esperar por él
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
const [download] = await Promise.all([
|
||||
page.waitForEvent('download', { timeout: 30_000 }),
|
||||
page.getByRole('button', { name: 'Exportar PDF' }).click(),
|
||||
])
|
||||
|
||||
const outPath = resolve(OUT_DIR, 'etapa-2-payback-roi-sample.pdf')
|
||||
await download.saveAs(outPath)
|
||||
console.log('PDF ROI guardado:', outPath)
|
||||
|
||||
expect(download.suggestedFilename()).toMatch(/_roi\.pdf$|\.pdf$/)
|
||||
|
||||
// El nombre debe contener "roi" si la implementación usa activeTab en el slug
|
||||
console.log('Nombre sugerido:', download.suggestedFilename())
|
||||
})
|
||||
65
tests/e2e/screenshots-etapa-1.spec.ts
Normal file
65
tests/e2e/screenshots-etapa-1.spec.ts
Normal file
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* Screenshots de validación visual — Etapa 1 Sprint 1.5.
|
||||
*
|
||||
* Captura 3 vistas que muestran la identidad InQ aplicada:
|
||||
* 1. workspace.png — CTAs naranjas, Simular button, tabs
|
||||
* 2. report-tabs.png — tab activo naranja en el reporte
|
||||
* 3. switch-on.png — switch de automatización en estado ON naranja
|
||||
*
|
||||
* Estos screenshots son evidencia de que el cambio de --primary a naranja
|
||||
* se ve correctamente en la aplicación real.
|
||||
*/
|
||||
import { test } from '@playwright/test'
|
||||
import { resolve } from 'path'
|
||||
import { mkdirSync } from 'fs'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
const __dirname = fileURLToPath(new URL('.', import.meta.url))
|
||||
const BPMN_DIR = resolve(__dirname, '../../public/sample-processes')
|
||||
const OUT_DIR = resolve(__dirname, '../screenshots/etapa-1')
|
||||
|
||||
test.beforeAll(() => { mkdirSync(OUT_DIR, { recursive: true }) })
|
||||
|
||||
test('screenshot workspace — CTAs naranjas visibles', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
await page.locator('#bpmn-file-input').setInputFiles(resolve(BPMN_DIR, 'simple-linear.bpmn'))
|
||||
await page.waitForURL(/\/workspace\//, { timeout: 15_000 })
|
||||
await page.waitForSelector('button:has-text("Simular")', { timeout: 10_000 })
|
||||
await page.waitForTimeout(1_000)
|
||||
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'workspace.png'), fullPage: false })
|
||||
})
|
||||
|
||||
test('screenshot switch ON — switch de automatización naranja', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
await page.locator('#bpmn-file-input').setInputFiles(resolve(BPMN_DIR, 'simple-linear.bpmn'))
|
||||
await page.waitForURL(/\/workspace\//, { timeout: 15_000 })
|
||||
await page.waitForSelector('button:has-text("Simular")', { timeout: 10_000 })
|
||||
await page.waitForTimeout(1_500)
|
||||
|
||||
// Hacer click en el primer task del BPMN para abrir el ActivityPanel
|
||||
await page.locator('[data-element-id="task1"]').first().click()
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// Encender el switch de automatización
|
||||
const toggle = page.getByRole('switch', { name: /automatizable/i })
|
||||
await toggle.click()
|
||||
await page.waitForTimeout(300)
|
||||
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'switch-on.png'), fullPage: false })
|
||||
})
|
||||
|
||||
test('screenshot report-tabs — tab activo naranja', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
await page.locator('#bpmn-file-input').setInputFiles(resolve(BPMN_DIR, 'medium-with-gateways.bpmn'))
|
||||
await page.waitForURL(/\/workspace\//, { timeout: 15_000 })
|
||||
await page.waitForSelector('button:has-text("Simular")', { timeout: 10_000 })
|
||||
await page.waitForTimeout(1_500)
|
||||
|
||||
const simBtn = page.getByRole('button', { name: 'Simular' })
|
||||
await simBtn.click()
|
||||
await page.waitForURL(/\/report\//, { timeout: 20_000 })
|
||||
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 20_000 })
|
||||
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'report-tabs.png'), fullPage: false })
|
||||
})
|
||||
134
tests/e2e/screenshots-etapa-3.spec.ts
Normal file
134
tests/e2e/screenshots-etapa-3.spec.ts
Normal file
@@ -0,0 +1,134 @@
|
||||
/**
|
||||
* Screenshots de validación visual — Etapa 3 Sprint 1.5.
|
||||
*
|
||||
* Captura 8 vistas que demuestran la identidad InQ aplicada en el web app:
|
||||
* 1. e3-workspace.png — topbar + CTAs naranjas bold
|
||||
* 2. e3-switch-on.png — ActivityPanel switch ON (caja naranja)
|
||||
* 3. e3-report-tabs.png — tab activo naranja en reporte
|
||||
* 4. e3-roi-kpi-hero.png — KPI Hero con gradiente naranja→magenta
|
||||
* 5. e3-comparison-table.png — tabla comparativa con header naranja
|
||||
* 6. e3-cumulative-chart.png — gráfico acumulado con línea naranja
|
||||
* 7. e3-donut-chart.png — donut directo/overhead (naranja/slate)
|
||||
* 8. e3-transparency.png — TransparencySection con ROI > 1000%
|
||||
*/
|
||||
import { test } from '@playwright/test'
|
||||
import { resolve } from 'path'
|
||||
import { mkdirSync } from 'fs'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
const __dirname = fileURLToPath(new URL('.', import.meta.url))
|
||||
const BPMN_DIR = resolve(__dirname, '../../public/sample-processes')
|
||||
const OUT_DIR = resolve(__dirname, '../screenshots/etapa-3')
|
||||
|
||||
test.beforeAll(() => { mkdirSync(OUT_DIR, { recursive: true }) })
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
async function importBpmn(page: import('@playwright/test').Page, filename: string) {
|
||||
await page.goto('/')
|
||||
await page.locator('#bpmn-file-input').setInputFiles(resolve(BPMN_DIR, filename))
|
||||
await page.waitForURL(/\/workspace\//, { timeout: 15_000 })
|
||||
await page.waitForSelector('button:has-text("Simular")', { timeout: 10_000 })
|
||||
await page.waitForTimeout(800)
|
||||
}
|
||||
|
||||
async function setActivityCosts(
|
||||
page: import('@playwright/test').Page,
|
||||
elementId: string,
|
||||
directCost: number,
|
||||
automatedCost: number
|
||||
) {
|
||||
await page.locator(`[data-element-id="${elementId}"]`).first().click()
|
||||
await page.waitForTimeout(400)
|
||||
const toggle = page.getByRole('switch', { name: /automatizable/i })
|
||||
if (await toggle.getAttribute('aria-checked') === 'false') await toggle.click()
|
||||
await page.waitForTimeout(200)
|
||||
await page.getByLabel(/Costo directo fijo/i).fill(String(directCost))
|
||||
await page.getByLabel(/Costo automatizado/i).fill(String(automatedCost))
|
||||
await page.getByLabel(/Tiempo automatizado/i).fill('10')
|
||||
await page.getByRole('button', { name: /Guardar/i }).click()
|
||||
await page.waitForTimeout(400)
|
||||
}
|
||||
|
||||
async function configureGlobal(page: import('@playwright/test').Page, freq: number, inv: number) {
|
||||
await page.getByRole('tab', { name: /Global/i }).click()
|
||||
await page.waitForTimeout(300)
|
||||
await page.getByLabel(/Frecuencia anual/i).fill(String(freq))
|
||||
await page.getByLabel(/Inversión en automatización/i).fill(String(inv))
|
||||
await page.getByRole('button', { name: /Guardar/i }).click()
|
||||
await page.waitForTimeout(400)
|
||||
}
|
||||
|
||||
async function goToRoiTab(page: import('@playwright/test').Page) {
|
||||
const roiTab = page.getByRole('tab', { name: /Comparación/i })
|
||||
await roiTab.click()
|
||||
await page.waitForSelector('[data-testid="roi-kpi-card"]', { timeout: 10_000 })
|
||||
await page.waitForTimeout(600)
|
||||
}
|
||||
|
||||
// ─── 1. Workspace — topbar + CTAs ─────────────────────────────────────────────
|
||||
|
||||
test('e3-1: workspace — CTAs naranjas bold', async ({ page }) => {
|
||||
await importBpmn(page, 'simple-linear.bpmn')
|
||||
await page.waitForTimeout(500)
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'e3-workspace.png'), fullPage: false })
|
||||
})
|
||||
|
||||
// ─── 2. Switch ON en ActivityPanel ────────────────────────────────────────────
|
||||
|
||||
test('e3-2: switch ON — caja automatización naranja', async ({ page }) => {
|
||||
await importBpmn(page, 'simple-linear.bpmn')
|
||||
await page.locator('[data-element-id="task1"]').first().click()
|
||||
await page.waitForTimeout(400)
|
||||
const toggle = page.getByRole('switch', { name: /automatizable/i })
|
||||
if (await toggle.getAttribute('aria-checked') === 'false') await toggle.click()
|
||||
await page.waitForTimeout(300)
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'e3-switch-on.png'), fullPage: false })
|
||||
})
|
||||
|
||||
// ─── 3-8. Setup realista para los screenshots del reporte ─────────────────────
|
||||
|
||||
test('e3-3-to-8: reporte — 6 screenshots del tab ROI', async ({ page }) => {
|
||||
await importBpmn(page, 'medium-with-gateways.bpmn')
|
||||
await setActivityCosts(page, 'task_recv', 200, 20)
|
||||
await setActivityCosts(page, 'task_score', 200, 20)
|
||||
await setActivityCosts(page, 'task_analisis', 200, 20)
|
||||
await configureGlobal(page, 5000, 80000)
|
||||
|
||||
const simBtn = page.getByRole('button', { name: 'Simular' })
|
||||
await simBtn.click()
|
||||
await page.waitForURL(/\/report\//, { timeout: 20_000 })
|
||||
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 15_000 })
|
||||
await page.waitForTimeout(800)
|
||||
|
||||
// 3. Tabs
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'e3-report-tabs.png'), fullPage: false })
|
||||
|
||||
await goToRoiTab(page)
|
||||
|
||||
// 4. KPI Hero
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'e3-roi-kpi-hero.png'), fullPage: false })
|
||||
|
||||
// 5. Comparison Table (scroll down)
|
||||
await page.evaluate(() => window.scrollBy(0, 420))
|
||||
await page.waitForTimeout(300)
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'e3-comparison-table.png'), fullPage: false })
|
||||
|
||||
// 6. Cumulative chart (scroll to charts section)
|
||||
await page.evaluate(() => window.scrollBy(0, 500))
|
||||
await page.waitForTimeout(400)
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'e3-cumulative-chart.png'), fullPage: false })
|
||||
|
||||
// 7. Donut chart (actual tab)
|
||||
await page.getByRole('tab', { name: 'Actual' }).click()
|
||||
await page.waitForTimeout(600)
|
||||
await page.evaluate(() => window.scrollTo(0, 0))
|
||||
await page.waitForTimeout(300)
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'e3-donut-chart.png'), fullPage: false })
|
||||
|
||||
// 8. Transparency section — ROI > 1000% (back to ROI tab, scroll to bottom)
|
||||
await goToRoiTab(page)
|
||||
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))
|
||||
await page.waitForTimeout(500)
|
||||
await page.screenshot({ path: resolve(OUT_DIR, 'e3-transparency.png'), fullPage: false })
|
||||
})
|
||||
411
tests/e2e/validate-dod-etapa4.spec.ts
Normal file
411
tests/e2e/validate-dod-etapa4.spec.ts
Normal file
@@ -0,0 +1,411 @@
|
||||
/**
|
||||
* Validación programática del DoD de Etapa 4 — Export PDF y CSV con ROI.
|
||||
*
|
||||
* Genera los 6 archivos para medium-with-gateways con configuración representativa:
|
||||
* - 3 actividades automatable: task_recv, task_score, task_analisis
|
||||
* - Costos actuales dispares (para heatmap con gradiente real)
|
||||
* - Costos automatizados: $20 / 5 min para las automatable
|
||||
* - Volumetría: annualFrequency=12000, horizon=3, investment=50000
|
||||
*
|
||||
* Archivos generados en tests/e2e/__output__/:
|
||||
* medium-gw_actual.pdf / medium-gw_actual.csv
|
||||
* medium-gw_automatizado.pdf / medium-gw_automatizado.csv
|
||||
* medium-gw_roi.pdf / medium-gw_roi.csv
|
||||
*
|
||||
* Ejecutar: npx playwright test tests/e2e/validate-dod-etapa4.spec.ts
|
||||
*/
|
||||
import { test, expect } from '@playwright/test'
|
||||
import { readFileSync, mkdirSync, writeFileSync } from 'fs'
|
||||
import { resolve } from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
import { PDFParse } from 'pdf-parse'
|
||||
import sharp from 'sharp'
|
||||
import { PDFDocument, PDFName, PDFRawStream } from 'pdf-lib'
|
||||
|
||||
const __dirname = fileURLToPath(new URL('.', import.meta.url))
|
||||
const BPMN_DIR = resolve(__dirname, '../../public/sample-processes')
|
||||
const OUTPUT_DIR = resolve(__dirname, '__output__')
|
||||
|
||||
test.beforeAll(() => {
|
||||
mkdirSync(OUTPUT_DIR, { recursive: true })
|
||||
})
|
||||
|
||||
// ─── Helpers (mismos que export-pdf.spec.ts) ──────────────────────────────────
|
||||
|
||||
async function parsePdf(buffer: Buffer): Promise<{ numpages: number; text: string }> {
|
||||
const parser = new PDFParse({ data: buffer })
|
||||
const result = await parser.getText()
|
||||
await parser.destroy()
|
||||
return { numpages: result.total, text: result.text }
|
||||
}
|
||||
|
||||
async function extractJpegFromPdf(pdfBuf: Buffer): Promise<Buffer> {
|
||||
try {
|
||||
const doc = await PDFDocument.load(pdfBuf, { ignoreEncryption: true })
|
||||
for (const [, obj] of doc.context.enumerateIndirectObjects()) {
|
||||
if (obj instanceof PDFRawStream) {
|
||||
const subtype = obj.dict.lookupMaybe(PDFName.of('Subtype'), PDFName)
|
||||
const filter = obj.dict.lookupMaybe(PDFName.of('Filter'), PDFName)
|
||||
if (subtype?.toString() === '/Image' && filter?.toString() === '/DCTDecode') {
|
||||
return Buffer.from(obj.contents)
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch { /* fallback */ }
|
||||
|
||||
const soi = Buffer.from([0xff, 0xd8, 0xff])
|
||||
const start = pdfBuf.indexOf(soi)
|
||||
if (start === -1) throw new Error('No se encontró JPEG en el PDF')
|
||||
const endstreamBuf = Buffer.from('endstream')
|
||||
const endstreamPos = pdfBuf.indexOf(endstreamBuf, start)
|
||||
if (endstreamPos === -1) throw new Error('No se encontró endstream')
|
||||
let eoi = endstreamPos - 1
|
||||
while (eoi > start + 2) {
|
||||
if (pdfBuf[eoi] === 0xd9 && pdfBuf[eoi - 1] === 0xff) { eoi++; break }
|
||||
eoi--
|
||||
}
|
||||
const jpeg = pdfBuf.subarray(start, eoi)
|
||||
if (jpeg.length < 100) throw new Error(`JPEG muy pequeño: ${jpeg.length} bytes`)
|
||||
return jpeg
|
||||
}
|
||||
|
||||
async function analyzeJpegColors(jpegBuf: Buffer) {
|
||||
const { data, info } = await sharp(jpegBuf).raw().toBuffer({ resolveWithObject: true })
|
||||
const ch = info.channels
|
||||
let greenPx = 0, amberPx = 0, redPx = 0
|
||||
for (let i = 0; i < data.length; i += ch) {
|
||||
const r = data[i], g = data[i + 1], b = data[i + 2]
|
||||
if (g > r * 1.4 && g > 120 && g > b) greenPx++
|
||||
else if (r > 180 && g > 120 && b < 120 && r > g && r < g * 1.8) amberPx++
|
||||
else if (r > g * 1.8 && r > b * 1.8 && r > 180) redPx++
|
||||
}
|
||||
return { greenPx, amberPx, redPx, total: data.length / ch }
|
||||
}
|
||||
|
||||
// ─── Configuración del proceso ────────────────────────────────────────────────
|
||||
|
||||
// Costos dispares para heatmap con gradiente real (mismo patrón que export-pdf.spec.ts)
|
||||
const ACTUAL_COST: Record<string, number> = {
|
||||
task_recv: 10_000, // prob 1.0 → $10.000 → ROJO
|
||||
task_valid: 200, // prob 1.0 → $200 → VERDE
|
||||
task_score: 400, // prob 0.5 → $200 → VERDE
|
||||
task_pedir_docs: 200, // prob 0.5 → $100 → VERDE
|
||||
task_bureau: 200, // prob 0.5 → $100 → VERDE
|
||||
task_empleador: 200, // prob 0.5 → $100 → VERDE
|
||||
task_analisis: 5_000, // prob 1.0 → $5.000 → ÁMBAR
|
||||
task_aprobar: 200, // prob 0.5 → $100 → VERDE
|
||||
task_rechazar: 200, // prob 0.5 → $100 → VERDE
|
||||
task_desembolso: 200, // prob 0.5 → $100 → VERDE
|
||||
task_archivo: 200, // prob 1.0 → $200 → VERDE
|
||||
}
|
||||
|
||||
// Automatable: task_recv, task_score, task_analisis con costo=$20, tiempo=5min
|
||||
const AUTOMATABLE = new Set(['task_recv', 'task_score', 'task_analisis'])
|
||||
const AUTO_COST = 20
|
||||
const AUTO_TIME = 5
|
||||
|
||||
// ─── Test único que genera y valida los 6 archivos ───────────────────────────
|
||||
|
||||
test('DoD Etapa 4 — genera y valida los 6 archivos de export para medium-with-gateways', async ({ page }) => {
|
||||
|
||||
// ── Fase 1: importar BPMN e inyectar configuración en IndexedDB ─────────────
|
||||
await page.goto('/')
|
||||
await page.locator('#bpmn-file-input').setInputFiles(resolve(BPMN_DIR, 'medium-with-gateways.bpmn'))
|
||||
await page.waitForURL(/\/workspace\//, { timeout: 15_000 })
|
||||
const processId = page.url().split('/workspace/')[1]
|
||||
await page.waitForTimeout(1_500)
|
||||
|
||||
// Inyectar costos de actividades y flags de automatización en IndexedDB
|
||||
await page.evaluate(async ({ procId, actualCosts, automatable, autoCost, autoTime }) => {
|
||||
const DB_NAME = 'ProcessCostPlatform'
|
||||
const db = await new Promise<IDBDatabase>((res, rej) => {
|
||||
const req = indexedDB.open(DB_NAME)
|
||||
req.onsuccess = () => res(req.result)
|
||||
req.onerror = () => rej(req.error)
|
||||
})
|
||||
const acts = await new Promise<any[]>((res, rej) => {
|
||||
const tx = db.transaction('activities', 'readonly')
|
||||
const req = tx.objectStore('activities').index('processId').getAll(procId)
|
||||
req.onsuccess = () => res(req.result)
|
||||
req.onerror = () => rej(req.error)
|
||||
})
|
||||
await new Promise<void>((res, rej) => {
|
||||
const tx = db.transaction('activities', 'readwrite')
|
||||
const store = tx.objectStore('activities')
|
||||
let pending = acts.length
|
||||
if (pending === 0) { res(); return }
|
||||
for (const act of acts) {
|
||||
const isAuto = (automatable as string[]).includes(act.bpmnElementId)
|
||||
const req = store.put({
|
||||
...act,
|
||||
directCostFixed: (actualCosts as Record<string, number>)[act.bpmnElementId] ?? 200,
|
||||
executionTimeMinutes: 60,
|
||||
automatable: isAuto,
|
||||
automatedCostFixed: isAuto ? autoCost : 0,
|
||||
automatedTimeMinutes: isAuto ? autoTime : 0,
|
||||
})
|
||||
req.onsuccess = () => { if (--pending === 0) res() }
|
||||
req.onerror = () => rej(req.error)
|
||||
}
|
||||
})
|
||||
|
||||
// Inyectar volumetría en el proceso
|
||||
const proc = await new Promise<any>((res, rej) => {
|
||||
const tx = db.transaction('processes', 'readonly')
|
||||
const req = tx.objectStore('processes').get(procId)
|
||||
req.onsuccess = () => res(req.result)
|
||||
req.onerror = () => rej(req.error)
|
||||
})
|
||||
if (proc) {
|
||||
await new Promise<void>((res, rej) => {
|
||||
const tx = db.transaction('processes', 'readwrite')
|
||||
const req = tx.objectStore('processes').put({
|
||||
...proc,
|
||||
annualFrequency: 12_000,
|
||||
analysisHorizonYears: 3,
|
||||
automationInvestment: 50_000,
|
||||
})
|
||||
req.onsuccess = () => res()
|
||||
req.onerror = () => rej(req.error)
|
||||
})
|
||||
}
|
||||
db.close()
|
||||
}, { procId: processId, actualCosts: ACTUAL_COST, automatable: [...AUTOMATABLE], autoCost: AUTO_COST, autoTime: AUTO_TIME })
|
||||
|
||||
// Recargar para que el store de Zustand relea desde Dexie
|
||||
await page.reload()
|
||||
await page.waitForSelector('button:has-text("Simular")', { timeout: 15_000 })
|
||||
await page.waitForTimeout(1_500)
|
||||
|
||||
// ── Fase 2: simular y llegar al reporte ──────────────────────────────────────
|
||||
const simBtn = page.getByRole('button', { name: 'Simular' })
|
||||
await expect(simBtn).not.toBeDisabled({ timeout: 5_000 })
|
||||
await simBtn.click()
|
||||
await page.waitForURL(/\/report\//, { timeout: 20_000 })
|
||||
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 30_000 })
|
||||
await page.waitForSelector('.bpmn-container .djs-group', { timeout: 30_000 })
|
||||
|
||||
// Esperar a que el heatmap tenga colores reales
|
||||
await page.waitForFunction(() => {
|
||||
const rects = Array.from(document.querySelectorAll('.bpmn-container .djs-visual rect'))
|
||||
return rects.some((r) => {
|
||||
const fill = (r as HTMLElement).style.fill
|
||||
return fill && fill !== '#cbd5e1'
|
||||
})
|
||||
}, { timeout: 30_000 })
|
||||
|
||||
// ── Fase 3: exportar desde tab "Actual" ──────────────────────────────────────
|
||||
// Tab "Actual" está activo por defecto
|
||||
|
||||
const actualPdfPath = resolve(OUTPUT_DIR, 'medium-gw_actual.pdf')
|
||||
const actualCsvPath = resolve(OUTPUT_DIR, 'medium-gw_actual.csv')
|
||||
|
||||
let dl = await Promise.all([
|
||||
page.waitForEvent('download', { timeout: 90_000 }),
|
||||
page.getByRole('button', { name: 'Exportar PDF' }).click(),
|
||||
])
|
||||
await dl[0].saveAs(actualPdfPath)
|
||||
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 20_000 })
|
||||
|
||||
let dlCsv = await Promise.all([
|
||||
page.waitForEvent('download', { timeout: 30_000 }),
|
||||
page.getByRole('button', { name: 'Exportar CSV' }).click(),
|
||||
])
|
||||
await dlCsv[0].saveAs(actualCsvPath)
|
||||
|
||||
// ── Fase 4: exportar desde tab "Automatizado" ─────────────────────────────────
|
||||
await page.getByRole('tab', { name: /^Automatizado$/i }).click()
|
||||
await page.waitForTimeout(1_000)
|
||||
|
||||
const autoPdfPath = resolve(OUTPUT_DIR, 'medium-gw_automatizado.pdf')
|
||||
const autoCsvPath = resolve(OUTPUT_DIR, 'medium-gw_automatizado.csv')
|
||||
|
||||
dl = await Promise.all([
|
||||
page.waitForEvent('download', { timeout: 90_000 }),
|
||||
page.getByRole('button', { name: 'Exportar PDF' }).click(),
|
||||
])
|
||||
await dl[0].saveAs(autoPdfPath)
|
||||
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 20_000 })
|
||||
|
||||
dlCsv = await Promise.all([
|
||||
page.waitForEvent('download', { timeout: 30_000 }),
|
||||
page.getByRole('button', { name: 'Exportar CSV' }).click(),
|
||||
])
|
||||
await dlCsv[0].saveAs(autoCsvPath)
|
||||
|
||||
// ── Fase 5: exportar desde tab "Comparación + ROI" ───────────────────────────
|
||||
await page.getByRole('tab', { name: /Comparación/i }).click()
|
||||
await page.waitForTimeout(1_000)
|
||||
|
||||
const roiPdfPath = resolve(OUTPUT_DIR, 'medium-gw_roi.pdf')
|
||||
const roiCsvPath = resolve(OUTPUT_DIR, 'medium-gw_roi.csv')
|
||||
|
||||
dl = await Promise.all([
|
||||
page.waitForEvent('download', { timeout: 90_000 }),
|
||||
page.getByRole('button', { name: 'Exportar PDF' }).click(),
|
||||
])
|
||||
await dl[0].saveAs(roiPdfPath)
|
||||
await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 20_000 })
|
||||
|
||||
dlCsv = await Promise.all([
|
||||
page.waitForEvent('download', { timeout: 30_000 }),
|
||||
page.getByRole('button', { name: 'Exportar CSV' }).click(),
|
||||
])
|
||||
await dlCsv[0].saveAs(roiCsvPath)
|
||||
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
// ── VALIDACIÓN PROGRAMÁTICA ──────────────────────────────────────────────────
|
||||
// ══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const results: string[] = [
|
||||
'╔══════════════════════════════════════════════════════════════════════╗',
|
||||
'║ DoD Etapa 4 — Validación programática de los 6 archivos ║',
|
||||
'╠══════════════════════════════════════════════════════════════════════╣',
|
||||
]
|
||||
|
||||
// ── Validar actual.pdf ────────────────────────────────────────────────────────
|
||||
const actualPdfBuf = readFileSync(actualPdfPath)
|
||||
const { numpages: actualPages, text: actualText } = await parsePdf(actualPdfBuf)
|
||||
const actualKb = (actualPdfBuf.length / 1024).toFixed(1)
|
||||
|
||||
const actualHasJpeg = actualPdfBuf.includes(Buffer.from([0xff, 0xd8, 0xff]))
|
||||
const actualJpeg = await extractJpegFromPdf(actualPdfBuf)
|
||||
const actualPixels = await analyzeJpegColors(actualJpeg)
|
||||
|
||||
const actualOk =
|
||||
actualPdfBuf.length > 40_000 &&
|
||||
actualPages >= 2 &&
|
||||
actualText.includes('COSTO TOTAL') &&
|
||||
actualHasJpeg &&
|
||||
actualPixels.redPx >= 100 &&
|
||||
actualPixels.greenPx >= 100
|
||||
|
||||
results.push(`║ actual.pdf │ ${actualKb.padEnd(6)} KB │ ${String(actualPages).padEnd(6)} pgs │ ${actualOk ? '✓ OK' : '✗ FAIL'} ║`)
|
||||
results.push(`║ JPEG: ${actualHasJpeg ? '✓' : '✗'} Verde:${actualPixels.greenPx.toLocaleString().padStart(6)}px Ámbar:${actualPixels.amberPx.toLocaleString().padStart(5)}px Rojo:${actualPixels.redPx.toLocaleString().padStart(5)}px ║`)
|
||||
|
||||
// ── Validar automatizado.pdf ──────────────────────────────────────────────────
|
||||
const autoPdfBuf = readFileSync(autoPdfPath)
|
||||
const { numpages: autoPages, text: autoText } = await parsePdf(autoPdfBuf)
|
||||
const autoKb = (autoPdfBuf.length / 1024).toFixed(1)
|
||||
|
||||
const autoHasJpeg = autoPdfBuf.includes(Buffer.from([0xff, 0xd8, 0xff]))
|
||||
const autoJpeg = await extractJpegFromPdf(autoPdfBuf)
|
||||
const autoPixels = await analyzeJpegColors(autoJpeg)
|
||||
|
||||
const autoOk =
|
||||
autoPdfBuf.length > 40_000 &&
|
||||
autoPages >= 2 &&
|
||||
autoText.includes('COSTO TOTAL') &&
|
||||
autoHasJpeg &&
|
||||
autoPixels.greenPx >= 100
|
||||
|
||||
results.push(`║ automatizado.pdf│ ${autoKb.padEnd(6)} KB │ ${String(autoPages).padEnd(6)} pgs │ ${autoOk ? '✓ OK' : '✗ FAIL'} ║`)
|
||||
results.push(`║ JPEG: ${autoHasJpeg ? '✓' : '✗'} Verde:${autoPixels.greenPx.toLocaleString().padStart(6)}px Ámbar:${autoPixels.amberPx.toLocaleString().padStart(5)}px Rojo:${autoPixels.redPx.toLocaleString().padStart(5)}px ║`)
|
||||
|
||||
// ── Validar roi.pdf ───────────────────────────────────────────────────────────
|
||||
const roiPdfBuf = readFileSync(roiPdfPath)
|
||||
const { numpages: roiPages, text: roiText } = await parsePdf(roiPdfBuf)
|
||||
const roiKb = (roiPdfBuf.length / 1024).toFixed(1)
|
||||
|
||||
// El PDF de ROI NO debe tener heatmap JPEG (solo texto y tablas)
|
||||
const roiHasJpeg = roiPdfBuf.includes(Buffer.from([0xff, 0xd8, 0xff]))
|
||||
|
||||
const roiOk =
|
||||
roiPdfBuf.length > 20_000 &&
|
||||
roiPages >= 3 &&
|
||||
roiText.match(/retorno|ROI|ahorro/i) !== null &&
|
||||
!roiHasJpeg // confirmamos que no tiene JPEG (spec correcto)
|
||||
|
||||
results.push(`║ roi.pdf │ ${roiKb.padEnd(6)} KB │ ${String(roiPages).padEnd(6)} pgs │ ${roiOk ? '✓ OK' : '✗ FAIL'} ║`)
|
||||
results.push(`║ Sin heatmap JPEG (correcto): ${roiHasJpeg ? '✗ TIENE JPEG (inesperado)' : '✓ sin JPEG'} ║`)
|
||||
|
||||
// ── Validar actual.csv ────────────────────────────────────────────────────────
|
||||
const actualCsvBuf = readFileSync(actualCsvPath)
|
||||
const actualCsvText = actualCsvBuf.toString('utf-8')
|
||||
const actualCsvBom = actualCsvBuf[0] === 0xEF || actualCsvText.charCodeAt(0) === 0xFEFF
|
||||
const actualCsvNoBom = actualCsvText.startsWith('') ? actualCsvText.slice(1) : actualCsvText
|
||||
const actualHeaderLine = actualCsvNoBom.split('\r\n').find((l) => !l.startsWith('#') && l.trim())!
|
||||
const actualCsvCols = actualHeaderLine ? actualHeaderLine.split('","').length : 0
|
||||
|
||||
const actualCsvOk = actualCsvBuf.length > 500 && actualCsvBom && actualCsvCols === 10
|
||||
results.push(`║ actual.csv │ ${actualCsvBuf.length} B │ ${actualCsvCols} cols │ ${actualCsvOk ? '✓ OK' : '✗ FAIL'} ║`)
|
||||
results.push(`║ BOM: ${actualCsvBom ? '✓' : '✗'} Columnas: ${actualCsvCols} (esperado: 10) ║`)
|
||||
|
||||
// ── Validar automatizado.csv ──────────────────────────────────────────────────
|
||||
const autoCsvBuf = readFileSync(autoCsvPath)
|
||||
const autoCsvText = autoCsvBuf.toString('utf-8')
|
||||
const autoCsvBom = autoCsvBuf[0] === 0xEF || autoCsvText.charCodeAt(0) === 0xFEFF
|
||||
const autoCsvNoBom = autoCsvText.startsWith('') ? autoCsvText.slice(1) : autoCsvText
|
||||
const autoHeaderLine = autoCsvNoBom.split('\r\n').find((l) => !l.startsWith('#') && l.trim())!
|
||||
const autoCsvCols = autoHeaderLine ? autoHeaderLine.split('","').length : 0
|
||||
const autoCsvHasEscenario = autoCsvText.includes('Automatizado')
|
||||
|
||||
const autoCsvOk = autoCsvBuf.length > 500 && autoCsvBom && autoCsvCols === 10 && autoCsvHasEscenario
|
||||
results.push(`║ automatizado.csv│ ${autoCsvBuf.length} B │ ${autoCsvCols} cols │ ${autoCsvOk ? '✓ OK' : '✗ FAIL'} ║`)
|
||||
results.push(`║ BOM: ${autoCsvBom ? '✓' : '✗'} Columnas: ${autoCsvCols} (esperado: 10) Escenario: ${autoCsvHasEscenario ? '✓' : '✗'} ║`)
|
||||
|
||||
// ── Validar roi.csv ───────────────────────────────────────────────────────────
|
||||
const roiCsvBuf = readFileSync(roiCsvPath)
|
||||
const roiCsvText = roiCsvBuf.toString('utf-8')
|
||||
const roiCsvBom = roiCsvBuf[0] === 0xEF || roiCsvText.charCodeAt(0) === 0xFEFF
|
||||
const roiCsvNoBom = roiCsvText.startsWith('') ? roiCsvText.slice(1) : roiCsvText
|
||||
const roiHeaderLine = roiCsvNoBom.split('\r\n').find((l) => !l.startsWith('#') && l.trim())!
|
||||
const roiCsvCols = roiHeaderLine ? roiHeaderLine.split('","').length : 0
|
||||
const roiHasPayback = roiCsvText.includes('Payback')
|
||||
const roiHasROI = roiCsvText.includes('ROI anualizado')
|
||||
const roiHasFreq = roiCsvText.includes('12000')
|
||||
const roiHasAutomatable = roiCsvText.includes('Automatizable')
|
||||
|
||||
const roiCsvOk = roiCsvBuf.length > 1000 && roiCsvBom && roiCsvCols === 16 && roiHasPayback && roiHasROI
|
||||
|
||||
results.push(`║ roi.csv │ ${roiCsvBuf.length} B │ ${roiCsvCols} cols│ ${roiCsvOk ? '✓ OK' : '✗ FAIL'} ║`)
|
||||
results.push(`║ BOM: ${roiCsvBom ? '✓' : '✗'} Cols: ${roiCsvCols}/16 Payback: ${roiHasPayback ? '✓' : '✗'} ROI: ${roiHasROI ? '✓' : '✗'} Freq: ${roiHasFreq ? '✓' : '✗'} AutoCol: ${roiHasAutomatable ? '✓' : '✗'} ║`)
|
||||
|
||||
results.push('╚══════════════════════════════════════════════════════════════════════╝')
|
||||
|
||||
console.log('\n' + results.join('\n'))
|
||||
|
||||
// ── Texto del roi.pdf — primeras 20 líneas ────────────────────────────────────
|
||||
const roiLines = roiText.split('\n').filter((l) => l.trim()).slice(0, 20)
|
||||
console.log('\n── Texto extraído roi.pdf (primeras 20 líneas) ──')
|
||||
roiLines.forEach((l, i) => console.log(` ${String(i + 1).padStart(2)}: ${l}`))
|
||||
|
||||
// ── Guardar reporte de validación como artefacto ──────────────────────────────
|
||||
writeFileSync(
|
||||
resolve(OUTPUT_DIR, 'dod-etapa4-report.txt'),
|
||||
results.join('\n') + '\n\n── roi.pdf (primeras 20 líneas) ──\n' + roiLines.join('\n')
|
||||
)
|
||||
|
||||
// ── Assertions duras — cualquier falla detiene Etapa 5 ────────────────────────
|
||||
expect(actualPdfBuf.length, 'actual.pdf debe ser > 40 KB').toBeGreaterThan(40_000)
|
||||
expect(actualPages, 'actual.pdf debe tener ≥ 2 páginas').toBeGreaterThanOrEqual(2)
|
||||
expect(actualText, 'actual.pdf debe contener "COSTO TOTAL"').toContain('COSTO TOTAL')
|
||||
expect(actualHasJpeg, 'actual.pdf debe tener heatmap JPEG embebido').toBe(true)
|
||||
expect(actualPixels.redPx, 'actual.pdf JPEG debe tener píxeles rojos (≥100)').toBeGreaterThanOrEqual(100)
|
||||
expect(actualPixels.greenPx, 'actual.pdf JPEG debe tener píxeles verdes (≥100)').toBeGreaterThanOrEqual(100)
|
||||
|
||||
expect(autoPdfBuf.length, 'automatizado.pdf debe ser > 40 KB').toBeGreaterThan(40_000)
|
||||
expect(autoPages, 'automatizado.pdf debe tener ≥ 2 páginas').toBeGreaterThanOrEqual(2)
|
||||
expect(autoText, 'automatizado.pdf debe contener "COSTO TOTAL"').toContain('COSTO TOTAL')
|
||||
expect(autoHasJpeg, 'automatizado.pdf debe tener heatmap JPEG embebido').toBe(true)
|
||||
expect(autoPixels.greenPx, 'automatizado.pdf JPEG debe tener píxeles verdes (≥100)').toBeGreaterThanOrEqual(100)
|
||||
|
||||
expect(roiPdfBuf.length, 'roi.pdf debe ser > 20 KB').toBeGreaterThan(20_000)
|
||||
expect(roiPages, 'roi.pdf debe tener ≥ 3 páginas').toBeGreaterThanOrEqual(3)
|
||||
expect(roiText, 'roi.pdf debe contener keyword de ROI').toMatch(/retorno|ROI|ahorro/i)
|
||||
expect(roiHasJpeg, 'roi.pdf NO debe contener heatmap JPEG (solo texto)').toBe(false)
|
||||
|
||||
expect(actualCsvBom, 'actual.csv BOM UTF-8').toBe(true)
|
||||
expect(actualCsvCols, 'actual.csv debe tener 10 columnas').toBe(10)
|
||||
|
||||
expect(autoCsvBom, 'automatizado.csv BOM UTF-8').toBe(true)
|
||||
expect(autoCsvCols, 'automatizado.csv debe tener 10 columnas').toBe(10)
|
||||
expect(autoCsvHasEscenario, 'automatizado.csv debe indicar escenario Automatizado').toBe(true)
|
||||
|
||||
expect(roiCsvBom, 'roi.csv BOM UTF-8').toBe(true)
|
||||
expect(roiCsvCols, 'roi.csv debe tener 16 columnas').toBe(16)
|
||||
expect(roiHasPayback, 'roi.csv debe tener metadata de Payback').toBe(true)
|
||||
expect(roiHasROI, 'roi.csv debe tener metadata de ROI anualizado').toBe(true)
|
||||
expect(roiHasFreq, 'roi.csv debe tener frecuencia anual 12000').toBe(true)
|
||||
expect(roiHasAutomatable, 'roi.csv debe tener columna Automatizable').toBe(true)
|
||||
})
|
||||
@@ -37,7 +37,7 @@ exports[`buildCostCompositionOption — estructura del objeto ECharts > snapshot
|
||||
"data": [
|
||||
{
|
||||
"itemStyle": {
|
||||
"color": "#3b82f6",
|
||||
"color": "#F59845",
|
||||
},
|
||||
"name": "Costo directo",
|
||||
"value": 1000,
|
||||
|
||||
@@ -226,7 +226,8 @@ describe('MethodologyFooter', () => {
|
||||
const proc = {
|
||||
id: 'p1', name: 'Proceso Test', clientName: '',
|
||||
bpmnXml: '<def/>', currency: 'USD',
|
||||
overheadPercentage: 0.2, createdAt: 0, updatedAt: 0,
|
||||
overheadPercentage: 0.2, annualFrequency: 1000, analysisHorizonYears: 3, automationInvestment: 0,
|
||||
createdAt: 0, updatedAt: 0,
|
||||
}
|
||||
expect(() => render(<MethodologyFooter process={proc} />)).not.toThrow()
|
||||
})
|
||||
@@ -235,7 +236,8 @@ describe('MethodologyFooter', () => {
|
||||
const proc = {
|
||||
id: 'p1', name: 'Proc', clientName: '',
|
||||
bpmnXml: '', currency: 'USD',
|
||||
overheadPercentage: 0.25, createdAt: 0, updatedAt: 0,
|
||||
overheadPercentage: 0.25, annualFrequency: 1000, analysisHorizonYears: 3, automationInvestment: 0,
|
||||
createdAt: 0, updatedAt: 0,
|
||||
}
|
||||
render(<MethodologyFooter process={proc} />)
|
||||
const text = document.body.textContent ?? ''
|
||||
@@ -246,7 +248,8 @@ describe('MethodologyFooter', () => {
|
||||
const proc = {
|
||||
id: 'p1', name: 'Proc', clientName: '',
|
||||
bpmnXml: '', currency: 'USD',
|
||||
overheadPercentage: 0.2, createdAt: 0, updatedAt: 0,
|
||||
overheadPercentage: 0.2, annualFrequency: 1000, analysisHorizonYears: 3, automationInvestment: 0,
|
||||
createdAt: 0, updatedAt: 0,
|
||||
}
|
||||
render(<MethodologyFooter process={proc} />)
|
||||
const text = document.body.textContent ?? ''
|
||||
@@ -326,6 +329,9 @@ describe('ReportPage — con datos completos', () => {
|
||||
bpmnXml: '<?xml version="1.0"?><definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"><process id="p"><startEvent id="s"><outgoing>f1</outgoing></startEvent><task id="t1" name="Task 1"><incoming>f1</incoming><outgoing>f2</outgoing></task><endEvent id="e"><incoming>f2</incoming></endEvent><sequenceFlow id="f1" sourceRef="s" targetRef="t1"/><sequenceFlow id="f2" sourceRef="t1" targetRef="e"/></process></definitions>',
|
||||
currency: 'USD',
|
||||
overheadPercentage: 0.2,
|
||||
annualFrequency: 1000,
|
||||
analysisHorizonYears: 3,
|
||||
automationInvestment: 0,
|
||||
createdAt: Date.now() - 1000 * 60 * 30,
|
||||
updatedAt: Date.now() - 1000 * 60 * 30,
|
||||
}
|
||||
|
||||
@@ -31,6 +31,7 @@ function buildSimInput(xml: string, directCost: number, overhead: number, curren
|
||||
directCostFixed: directCost,
|
||||
executionTimeMinutes: 30,
|
||||
assignedResources: [],
|
||||
automatable: false, automatedCostFixed: 0, automatedTimeMinutes: 0,
|
||||
}])
|
||||
)
|
||||
|
||||
|
||||
792
tests/features/report/roi-components.test.tsx
Normal file
792
tests/features/report/roi-components.test.tsx
Normal file
@@ -0,0 +1,792 @@
|
||||
/**
|
||||
* Tests de los componentes de ROI del reporte (Sprint 1 — Etapa 3).
|
||||
*
|
||||
* Cubre: RoiKpiBar, ComparisonTable, TransparencySection, TopSavingsChart,
|
||||
* CumulativeSavingsChart, y el comportamiento de tabs de ReportPage.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import React from 'react'
|
||||
|
||||
// ─── Mocks de dependencias del browser ───────────────────────────────────────
|
||||
|
||||
vi.mock('bpmn-js/lib/Viewer', () => ({
|
||||
default: class MockViewer {
|
||||
importXML = vi.fn().mockResolvedValue({ warnings: [] })
|
||||
get = vi.fn().mockImplementation((svc: string) => {
|
||||
if (svc === 'canvas') return { zoom: vi.fn(), addMarker: vi.fn(), removeMarker: vi.fn() }
|
||||
if (svc === 'elementRegistry') return { forEach: vi.fn(), getGraphics: vi.fn().mockReturnValue(null), get: vi.fn().mockReturnValue({ width: 100 }) }
|
||||
if (svc === 'overlays') return { add: vi.fn(), remove: vi.fn() }
|
||||
if (svc === 'eventBus') return { on: vi.fn(), off: vi.fn() }
|
||||
return {}
|
||||
})
|
||||
destroy = vi.fn()
|
||||
},
|
||||
}))
|
||||
|
||||
vi.mock('echarts-for-react', () => ({
|
||||
default: ({ style }: { option: unknown; style?: React.CSSProperties }) => (
|
||||
<div data-testid="echarts-chart" style={style} />
|
||||
),
|
||||
}))
|
||||
|
||||
vi.mock('@/features/report/useReportData', () => ({
|
||||
useReportData: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('@tanstack/react-router', async (importActual) => {
|
||||
const actual = await importActual<typeof import('@tanstack/react-router')>()
|
||||
return {
|
||||
...actual,
|
||||
useParams: vi.fn().mockReturnValue({ processId: 'test-proc-id' }),
|
||||
useNavigate: vi.fn().mockReturnValue(vi.fn()),
|
||||
}
|
||||
})
|
||||
|
||||
// ─── Fixtures ─────────────────────────────────────────────────────────────────
|
||||
|
||||
import type { ActivitySimResult, Activity, SimulationResult } from '@/domain/types'
|
||||
import type { RoiResult } from '@/domain/roi'
|
||||
import { TooltipProvider } from '@/components/ui/tooltip'
|
||||
|
||||
const makeActivity = (id: string, name: string, cost: number): ActivitySimResult => ({
|
||||
activityId: id,
|
||||
bpmnElementId: `bpmn_${id}`,
|
||||
activityName: name,
|
||||
expectedDirectCost: cost * 0.83,
|
||||
expectedIndirectCost: cost * 0.17,
|
||||
expectedTotalCost: cost,
|
||||
percentOfTotal: 33,
|
||||
executionProbability: 1.0,
|
||||
expectedExecutions: 1.0,
|
||||
executionTimeMinutes: 60,
|
||||
resourceCostBreakdown: [],
|
||||
})
|
||||
|
||||
const perActivityActual: ActivitySimResult[] = [
|
||||
makeActivity('a1', 'Recibir solicitud', 600),
|
||||
makeActivity('a2', 'Calcular score', 300),
|
||||
makeActivity('a3', 'Analizar riesgo', 100),
|
||||
]
|
||||
|
||||
const perActivityAutomated: ActivitySimResult[] = [
|
||||
makeActivity('a1', 'Recibir solicitud', 60), // 90% ahorro
|
||||
makeActivity('a2', 'Calcular score', 30), // 90% ahorro
|
||||
makeActivity('a3', 'Analizar riesgo', 100), // sin cambio (no automatable)
|
||||
]
|
||||
|
||||
const mockResult: SimulationResult = {
|
||||
totalCost: 1000,
|
||||
totalDirectCost: 833,
|
||||
totalIndirectCost: 167,
|
||||
totalTimeMinutes: 180,
|
||||
perActivity: perActivityActual,
|
||||
perResource: [],
|
||||
warnings: [],
|
||||
}
|
||||
|
||||
const mockResultAutomated: SimulationResult = {
|
||||
totalCost: 190,
|
||||
totalDirectCost: 158,
|
||||
totalIndirectCost: 32,
|
||||
totalTimeMinutes: 30,
|
||||
perActivity: perActivityAutomated,
|
||||
perResource: [],
|
||||
warnings: [],
|
||||
}
|
||||
|
||||
const mockRoi: RoiResult = {
|
||||
savingsPerExecution: 810,
|
||||
savingsPerExecutionPercent: 81,
|
||||
annualSavings: 9_720_000,
|
||||
paybackMonths: 0.617,
|
||||
paybackYears: 0.051,
|
||||
cumulativeSavingsHorizon: 29_110_000,
|
||||
breaksEvenInHorizon: true,
|
||||
roiAnnualPercent: 19440,
|
||||
}
|
||||
|
||||
const roiNoSavings: RoiResult = {
|
||||
savingsPerExecution: -50,
|
||||
savingsPerExecutionPercent: -10,
|
||||
annualSavings: -60_000,
|
||||
paybackMonths: Infinity,
|
||||
paybackYears: Infinity,
|
||||
cumulativeSavingsHorizon: -230_000,
|
||||
breaksEvenInHorizon: false,
|
||||
roiAnnualPercent: -60,
|
||||
}
|
||||
|
||||
const roiZeroInvestment: RoiResult = {
|
||||
savingsPerExecution: 200,
|
||||
savingsPerExecutionPercent: 50,
|
||||
annualSavings: 240_000,
|
||||
paybackMonths: 0,
|
||||
paybackYears: 0,
|
||||
cumulativeSavingsHorizon: 720_000,
|
||||
breaksEvenInHorizon: true,
|
||||
roiAnnualPercent: Infinity,
|
||||
}
|
||||
|
||||
// ─── RoiKpiBar ────────────────────────────────────────────────────────────────
|
||||
|
||||
import { RoiKpiBar } from '@/features/report/RoiKpiBar'
|
||||
|
||||
describe('RoiKpiBar', () => {
|
||||
it('renderiza exactamente 5 ROI KPI cards', () => {
|
||||
render(<RoiKpiBar roi={mockRoi} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getAllByTestId('roi-kpi-card')).toHaveLength(5)
|
||||
})
|
||||
|
||||
it('muestra el ahorro por ejecución formateado con moneda', () => {
|
||||
render(<RoiKpiBar roi={mockRoi} currency="USD" horizonYears={3} />)
|
||||
const text = document.body.textContent ?? ''
|
||||
// $810.00 debe aparecer
|
||||
expect(text).toMatch(/810/)
|
||||
})
|
||||
|
||||
it('payback Infinity → muestra "No recupera en horizonte"', () => {
|
||||
render(<RoiKpiBar roi={roiNoSavings} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getByText(/No recupera en horizonte/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('payback 0 (inversión cero) → muestra "Inmediato"', () => {
|
||||
render(<RoiKpiBar roi={roiZeroInvestment} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getByText(/Inmediato/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('ROI Infinity (inversión cero) → muestra "∞%"', () => {
|
||||
render(<RoiKpiBar roi={roiZeroInvestment} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getByText('∞%')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('ahorro negativo: "breaksEvenInHorizon = false" → subtexto fuera del horizonte', () => {
|
||||
render(<RoiKpiBar roi={roiNoSavings} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getByText(/Fuera del horizonte/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('breaksEvenInHorizon = true → subtexto dentro del horizonte', () => {
|
||||
render(<RoiKpiBar roi={mockRoi} currency="USD" horizonYears={3} />)
|
||||
expect(screen.getByText(/Dentro del horizonte/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('horizonYears se refleja en el label del KPI de acumulado', () => {
|
||||
render(<RoiKpiBar roi={mockRoi} currency="USD" horizonYears={5} />)
|
||||
const text = document.body.textContent ?? ''
|
||||
expect(text).toMatch(/5 años/)
|
||||
})
|
||||
|
||||
it('ningún KPI muestra NaN', () => {
|
||||
render(<RoiKpiBar roi={mockRoi} currency="USD" horizonYears={3} />)
|
||||
const text = document.body.textContent ?? ''
|
||||
expect(text).not.toContain('NaN')
|
||||
})
|
||||
})
|
||||
|
||||
// ─── ComparisonTable ──────────────────────────────────────────────────────────
|
||||
|
||||
import { ComparisonTable } from '@/features/report/ComparisonTable'
|
||||
|
||||
const automatableIds = new Set(['bpmn_a1', 'bpmn_a2']) // a1 y a2 son automatizables
|
||||
const noAutomatableIds = new Set<string>()
|
||||
|
||||
describe('ComparisonTable', () => {
|
||||
it('renderiza N+1 rows (N actividades + 1 header)', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
automatableIds={automatableIds}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
const rows = screen.getAllByRole('row')
|
||||
expect(rows).toHaveLength(perActivityActual.length + 1)
|
||||
})
|
||||
|
||||
it('actividades automatable muestran ícono Bot', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
automatableIds={automatableIds}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
// a1 y a2 son automatable → 2 íconos Bot
|
||||
const botIcons = document.querySelectorAll('[aria-label="Marcada como automatizable"]')
|
||||
expect(botIcons).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('actividades NO automatable NO muestran ícono Bot', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
automatableIds={noAutomatableIds} // ninguna automatable
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
const botIcons = document.querySelectorAll('[aria-label="Marcada como automatizable"]')
|
||||
expect(botIcons).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('ahorro de a1: 600 - 60 = 540 aparece en la tabla', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
automatableIds={automatableIds}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
const text = document.body.textContent ?? ''
|
||||
expect(text).toMatch(/540/)
|
||||
})
|
||||
|
||||
it('tabla vacía: muestra mensaje sin actividades', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={[]}
|
||||
perActivityAutomated={[]}
|
||||
automatableIds={noAutomatableIds}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/Sin actividades para comparar/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('ahorro negativo: se muestra sin prefijo +', () => {
|
||||
const negativeActual = [makeActivity('x1', 'Tarea cara auto', 100)]
|
||||
const negativeAuto = [makeActivity('x1', 'Tarea cara auto', 200)] // costo auto > actual
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={negativeActual}
|
||||
perActivityAutomated={negativeAuto}
|
||||
automatableIds={new Set(['bpmn_x1'])}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
// -100 de ahorro, sin prefijo '+'
|
||||
const text = document.body.textContent ?? ''
|
||||
expect(text).not.toMatch(/\+.*-/)
|
||||
})
|
||||
|
||||
it('sort toggle: clic en encabezado "Ahorro" invierte el orden', () => {
|
||||
render(
|
||||
<ComparisonTable
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
automatableIds={automatableIds}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
// Buscar el th que contiene "Ahorro" (hay múltiples elementos con ese texto)
|
||||
const headers = screen.getAllByRole('columnheader')
|
||||
const ahorroHeader = headers.find((h) => /Ahorro/i.test(h.textContent ?? ''))
|
||||
expect(ahorroHeader).toBeDefined()
|
||||
|
||||
// Antes del click: orden desc (a1=540 primero)
|
||||
const rowsBefore = screen.getAllByRole('row').slice(1)
|
||||
const firstNameBefore = rowsBefore[0].textContent
|
||||
|
||||
fireEvent.click(ahorroHeader!)
|
||||
// Después del click: orden asc (a3=0 primero)
|
||||
const rowsAfter = screen.getAllByRole('row').slice(1)
|
||||
const firstNameAfter = rowsAfter[0].textContent
|
||||
|
||||
expect(firstNameBefore).not.toBe(firstNameAfter)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── TransparencySection ──────────────────────────────────────────────────────
|
||||
|
||||
import { TransparencySection } from '@/features/report/TransparencySection'
|
||||
|
||||
const makeActivityDomain = (id: string, name: string, automatable: boolean, zeroCosts: boolean): Activity => ({
|
||||
id, processId: 'p1', bpmnElementId: `bpmn_${id}`, name, type: 'task',
|
||||
directCostFixed: 200, executionTimeMinutes: 60, assignedResources: [],
|
||||
automatable,
|
||||
automatedCostFixed: zeroCosts ? 0 : 50,
|
||||
automatedTimeMinutes: zeroCosts ? 0 : 10,
|
||||
})
|
||||
|
||||
describe('TransparencySection', () => {
|
||||
it('retorna null cuando no hay issues — no renderiza nada', () => {
|
||||
const { container } = render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Tarea', true, false)]} // automatable con costos configurados
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
|
||||
it('Caso 1: actividad automatable con costos en cero → sección visible', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Facturación', true, true)]} // automatable, costo=0
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/Transparencia metodológica/i)).toBeInTheDocument()
|
||||
expect(screen.getByText('Facturación')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 1: mensaje explica que el ahorro puede estar inflado', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Facturación', true, true)]}
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/inflar artificialmente el ahorro/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 1: plural correcto cuando hay múltiples actividades en cero', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[
|
||||
makeActivityDomain('a1', 'Tarea 1', true, true),
|
||||
makeActivityDomain('a2', 'Tarea 2', true, true),
|
||||
]}
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/2 actividades automatizables sin costo configurado/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 2: investment=0 → muestra aviso de inversión no configurada', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Tarea', true, false)]} // costos OK
|
||||
investment={0}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/Inversión en automatización no configurada/i)).toBeInTheDocument()
|
||||
expect(screen.getByText(/payback aparece como inmediato/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 3: ambos issues coexisten — se muestran ambos mensajes en la misma sección', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Facturación', true, true)]} // costo cero
|
||||
investment={0} // inversión cero
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('Facturación')).toBeInTheDocument()
|
||||
expect(screen.getByText(/Inversión en automatización no configurada/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('actividades no automatable no generan issue aunque tengan costos cero', () => {
|
||||
const { container } = render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Manual', false, true)]} // no automatable
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
|
||||
// ─── Caso 4: ROI inusualmente alto ────────────────────────────────────────
|
||||
|
||||
const makeRoi = (roiAnnualPercent: number): RoiResult => ({
|
||||
savingsPerExecution: 100,
|
||||
savingsPerExecutionPercent: 50,
|
||||
annualSavings: 1_200_000,
|
||||
paybackMonths: 0.5,
|
||||
paybackYears: 0.04,
|
||||
cumulativeSavingsHorizon: 3_550_000,
|
||||
breaksEvenInHorizon: true,
|
||||
roiAnnualPercent,
|
||||
})
|
||||
|
||||
it('Caso 4: ROI al 999% NO dispara el aviso de ROI inusual', () => {
|
||||
const { container } = render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'T', true, false)]}
|
||||
investment={50_000}
|
||||
roi={makeRoi(999)}
|
||||
/>
|
||||
)
|
||||
// No hay otros issues → el componente no renderiza (999% no supera el umbral)
|
||||
expect(container.firstChild).toBeNull()
|
||||
})
|
||||
|
||||
it('Caso 4: ROI al 1001% SÍ dispara el aviso de ROI inusual', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'T', true, false)]}
|
||||
investment={50_000}
|
||||
roi={makeRoi(1001)}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/ROI inusualmente alto detectado/i)).toBeInTheDocument()
|
||||
// El texto incluye el valor formateado (>1000%)
|
||||
const text = document.body.textContent ?? ''
|
||||
expect(text).toMatch(/1\.001/)
|
||||
})
|
||||
|
||||
it('Caso 4: ROI Infinity (investment=0) NO dispara este aviso — lo cubre el caso 2', () => {
|
||||
const { container } = render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'T', true, false)]}
|
||||
investment={0} // caso 2 activo
|
||||
roi={makeRoi(Infinity)}
|
||||
/>
|
||||
)
|
||||
// El caso 2 (investment=0) sí aparece, pero NO el aviso de "ROI inusualmente alto"
|
||||
expect(screen.queryByText(/ROI inusualmente alto detectado/i)).not.toBeInTheDocument()
|
||||
// El caso 2 sí está presente
|
||||
expect(container.firstChild).not.toBeNull()
|
||||
expect(screen.getByText(/Inversión en automatización no configurada/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 4: ROI negativo NO dispara el aviso de ROI inusual', () => {
|
||||
const { container } = render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'T', true, false)]}
|
||||
investment={50_000}
|
||||
roi={makeRoi(-50)}
|
||||
/>
|
||||
)
|
||||
expect(container.firstChild).toBeNull()
|
||||
expect(screen.queryByText(/ROI inusualmente alto detectado/i)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('Caso 4 coexiste con Caso 1: ROI alto Y actividad con costo=0 → ambos mensajes', () => {
|
||||
render(
|
||||
<TransparencySection
|
||||
activities={[makeActivityDomain('a1', 'Facturación', true, true)]} // costo=0
|
||||
investment={50_000} // no es cero
|
||||
roi={makeRoi(5000)} // > 1000 y finite
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText('Facturación')).toBeInTheDocument() // Caso 1
|
||||
expect(screen.getByText(/ROI inusualmente alto detectado/i)).toBeInTheDocument() // Caso 4
|
||||
})
|
||||
})
|
||||
|
||||
// ─── TopSavingsChart ──────────────────────────────────────────────────────────
|
||||
|
||||
import { TopSavingsChart } from '@/features/report/TopSavingsChart'
|
||||
|
||||
describe('TopSavingsChart', () => {
|
||||
it('muestra empty state cuando no hay ahorros positivos', () => {
|
||||
// perActivityAutomated con costos mayores → ahorro negativo
|
||||
const actualCosts = [makeActivity('a1', 'Tarea', 100)]
|
||||
const autoCosts = [makeActivity('a1', 'Tarea', 200)]
|
||||
render(
|
||||
<TopSavingsChart
|
||||
perActivityActual={actualCosts}
|
||||
perActivityAutomated={autoCosts}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
expect(screen.getByText(/Sin actividades con ahorro positivo/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('con ahorros positivos: renderiza el chart ECharts', () => {
|
||||
render(
|
||||
<TopSavingsChart
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('excluye actividades con ahorro cero o negativo del chart', () => {
|
||||
// a3 no tiene ahorro (costos iguales) → no debe aparecer en el chart
|
||||
// Solo a1 y a2 tienen ahorro positivo
|
||||
// Si renderiza chart → hay ≥1 actividad con ahorro > 0
|
||||
render(
|
||||
<TopSavingsChart
|
||||
perActivityActual={perActivityActual}
|
||||
perActivityAutomated={perActivityAutomated}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
// Chart renderizado → hay actividades con ahorro positivo
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('con más de 5 actividades: sigue renderizando chart (top-5 filtrado internamente)', () => {
|
||||
const manyActual = Array.from({ length: 8 }, (_, i) =>
|
||||
makeActivity(`a${i}`, `Tarea ${i}`, (i + 1) * 100)
|
||||
)
|
||||
const manyAuto = Array.from({ length: 8 }, (_, i) =>
|
||||
makeActivity(`a${i}`, `Tarea ${i}`, (i + 1) * 10)
|
||||
)
|
||||
render(
|
||||
<TopSavingsChart
|
||||
perActivityActual={manyActual}
|
||||
perActivityAutomated={manyAuto}
|
||||
currency="USD"
|
||||
/>
|
||||
)
|
||||
// No debe tirar error ni mostrar más de 5 en el chart (ECharts mockeado — no podemos inspeccionar option)
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ─── CumulativeSavingsChart ───────────────────────────────────────────────────
|
||||
|
||||
import { CumulativeSavingsChart } from '@/features/report/CumulativeSavingsChart'
|
||||
|
||||
describe('CumulativeSavingsChart', () => {
|
||||
it('renderiza el chart sin crash (payback dentro del horizonte)', () => {
|
||||
render(
|
||||
<CumulativeSavingsChart
|
||||
roi={mockRoi}
|
||||
horizonYears={3}
|
||||
currency="USD"
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renderiza el chart sin crash cuando payback = Infinity (sin ahorro)', () => {
|
||||
render(
|
||||
<CumulativeSavingsChart
|
||||
roi={roiNoSavings}
|
||||
horizonYears={3}
|
||||
currency="USD"
|
||||
investment={50_000}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renderiza el chart sin crash cuando investment = 0', () => {
|
||||
render(
|
||||
<CumulativeSavingsChart
|
||||
roi={roiZeroInvestment}
|
||||
horizonYears={3}
|
||||
currency="USD"
|
||||
investment={0}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByTestId('echarts-chart')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ─── ReportPage — comportamiento de tabs ──────────────────────────────────────
|
||||
|
||||
import { useReportData } from '@/features/report/useReportData'
|
||||
import { ReportPage } from '@/features/report/ReportPage'
|
||||
|
||||
const mockProcessBase = {
|
||||
id: 'test-proc-id', name: 'Proceso Test', clientName: 'Cliente',
|
||||
bpmnXml: '<?xml version="1.0"?><definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"><process id="p"><startEvent id="s"><outgoing>f1</outgoing></startEvent><task id="t1" name="Task 1"><incoming>f1</incoming><outgoing>f2</outgoing></task><endEvent id="e"><incoming>f2</incoming></endEvent><sequenceFlow id="f1" sourceRef="s" targetRef="t1"/><sequenceFlow id="f2" sourceRef="t1" targetRef="e"/></process></definitions>',
|
||||
currency: 'USD', overheadPercentage: 0.2,
|
||||
annualFrequency: 1200, analysisHorizonYears: 3, automationInvestment: 50_000,
|
||||
createdAt: Date.now() - 3600_000, updatedAt: Date.now() - 3600_000,
|
||||
}
|
||||
|
||||
const mockSimulationBase = {
|
||||
id: 'sim-1', processId: 'test-proc-id',
|
||||
executedAt: Date.now() - 600_000,
|
||||
result: mockResult,
|
||||
}
|
||||
|
||||
const automtableActivity: Activity = {
|
||||
id: 'act-1', processId: 'test-proc-id', bpmnElementId: 'bpmn_a1', name: 'Recibir solicitud',
|
||||
type: 'task', directCostFixed: 500, executionTimeMinutes: 60, assignedResources: [],
|
||||
automatable: true, automatedCostFixed: 50, automatedTimeMinutes: 5,
|
||||
}
|
||||
|
||||
const nonAutomatableActivity: Activity = {
|
||||
...automtableActivity, id: 'act-2', bpmnElementId: 'bpmn_a2', name: 'Procesar',
|
||||
automatable: false,
|
||||
}
|
||||
|
||||
describe('ReportPage — comportamiento de tabs', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('sin resultAutomated (snapshot viejo): tabs "Automatizado" y "ROI" están disabled', () => {
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase }, // sin resultAutomated
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
const tabAuto = screen.getByRole('tab', { name: /automatizado/i })
|
||||
const tabRoi = screen.getByRole('tab', { name: /comparación/i })
|
||||
expect(tabAuto).toBeDisabled()
|
||||
expect(tabRoi).toBeDisabled()
|
||||
})
|
||||
|
||||
it('con resultAutomated pero SIN actividades automatizables: tabs disabled', () => {
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [nonAutomatableActivity], // no hay automatable
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
const tabAuto = screen.getByRole('tab', { name: /automatizado/i })
|
||||
const tabRoi = screen.getByRole('tab', { name: /comparación/i })
|
||||
expect(tabAuto).toBeDisabled()
|
||||
expect(tabRoi).toBeDisabled()
|
||||
})
|
||||
|
||||
it('con resultAutomated Y actividades automatizables: tabs habilitados', () => {
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity], // hay 1 automatable
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
const tabAuto = screen.getByRole('tab', { name: /automatizado/i })
|
||||
const tabRoi = screen.getByRole('tab', { name: /comparación/i })
|
||||
expect(tabAuto).not.toBeDisabled()
|
||||
expect(tabRoi).not.toBeDisabled()
|
||||
})
|
||||
|
||||
it('tab "Actual" activo por defecto: muestra los 4 KPI cards del costo actual', () => {
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
// Tab "Actual" activo por defecto → 4 kpi-cards (no 5 roi-kpi-cards)
|
||||
expect(screen.getAllByTestId('kpi-card')).toHaveLength(4)
|
||||
expect(screen.queryByTestId('roi-kpi-card')).toBeNull()
|
||||
})
|
||||
|
||||
it('click en tab "Comparación + ROI": muestra 5 ROI KPI cards', async () => {
|
||||
const user = userEvent.setup()
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
await user.click(screen.getByRole('tab', { name: /comparación/i }))
|
||||
await waitFor(() => expect(screen.getAllByTestId('roi-kpi-card')).toHaveLength(5))
|
||||
})
|
||||
|
||||
it('click en tab "Comparación + ROI": la tabla de comparación tiene N+1 rows', async () => {
|
||||
const user = userEvent.setup()
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
await user.click(screen.getByRole('tab', { name: /comparación/i }))
|
||||
// mockResult tiene 3 actividades → 3 data rows + 1 header
|
||||
await waitFor(() => expect(screen.getAllByRole('row')).toHaveLength(perActivityActual.length + 1))
|
||||
})
|
||||
|
||||
it('click en tab "Comparación + ROI" con investment=0: TransparencySection visible', async () => {
|
||||
const user = userEvent.setup()
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: { ...mockProcessBase, automationInvestment: 0 },
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
await user.click(screen.getByRole('tab', { name: /comparación/i }))
|
||||
await waitFor(() => expect(screen.getByText(/Transparencia metodológica/i)).toBeInTheDocument())
|
||||
})
|
||||
|
||||
it('tab "Automatizado": muestra los 4 KPI cards del escenario automatizado', () => {
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
fireEvent.click(screen.getByRole('tab', { name: /automatizado/i }))
|
||||
// El tab automatizado también muestra 4 kpi-cards (del escenario automatizado)
|
||||
const kpiCards = screen.getAllByTestId('kpi-card')
|
||||
// Puede haber 4 del tab actual (ocultos) + 4 del tab automatizado = 8
|
||||
// O solo 4 si Radix desmonta el tab inactivo
|
||||
expect(kpiCards.length).toBeGreaterThanOrEqual(4)
|
||||
})
|
||||
|
||||
it('tab "Automatizado": la nota de AutomationScenarioNote está presente', async () => {
|
||||
const user = userEvent.setup()
|
||||
vi.mocked(useReportData).mockReturnValue({
|
||||
process: mockProcessBase,
|
||||
simulation: { ...mockSimulationBase, resultAutomated: mockResultAutomated },
|
||||
activities: [automtableActivity],
|
||||
resources: [],
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
render(
|
||||
<TooltipProvider>
|
||||
<ReportPage />
|
||||
</TooltipProvider>
|
||||
)
|
||||
await user.click(screen.getByRole('tab', { name: /automatizado/i }))
|
||||
await waitFor(() =>
|
||||
expect(screen.getByText(/actividades no marcadas como automatizables/i)).toBeInTheDocument()
|
||||
)
|
||||
})
|
||||
})
|
||||
157
tests/features/workspace/ActivityPanel.test.tsx
Normal file
157
tests/features/workspace/ActivityPanel.test.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
/**
|
||||
* Tests de la sección "Automatización" del ActivityPanel.
|
||||
*
|
||||
* Los mocks del store usan vi.hoisted() para crear referencias estables:
|
||||
* si el mock devuelve una nueva referencia de activities en cada render,
|
||||
* el useEffect de ActivityPanel entra en loop infinito.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen, fireEvent, act } from '@testing-library/react'
|
||||
import { TooltipProvider } from '@/components/ui/tooltip'
|
||||
|
||||
// ─── Mocks con referencias estables vía vi.hoisted ───────────────────────────
|
||||
|
||||
const processStoreMock = vi.hoisted(() => {
|
||||
const activity = {
|
||||
id: 'act-1', processId: 'p1', bpmnElementId: 'task1', name: 'Facturación',
|
||||
type: 'task' as const,
|
||||
directCostFixed: 200, executionTimeMinutes: 60, assignedResources: [],
|
||||
automatable: false, automatedCostFixed: 0, automatedTimeMinutes: 0,
|
||||
}
|
||||
return {
|
||||
activities: [activity], // referencia estable — no cambia entre renders
|
||||
resources: [],
|
||||
updateActivity: vi.fn(),
|
||||
subscribe: vi.fn(), // requerido por simulation-store.ts al importarse
|
||||
}
|
||||
})
|
||||
|
||||
const simulationStoreMock = vi.hoisted(() => ({
|
||||
resultActual: null as null | object,
|
||||
resultAutomated: null as null | object,
|
||||
invalidateResults: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('@/store/process-store', () => ({
|
||||
useProcessStore: () => processStoreMock,
|
||||
// Zustand también expone .subscribe() como método estático del hook
|
||||
useProcessStore_subscribe: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('@/store/simulation-store', () => ({
|
||||
useSimulationStore: () => simulationStoreMock,
|
||||
}))
|
||||
|
||||
import { ActivityPanel } from '@/features/workspace/ActivityPanel'
|
||||
|
||||
// ─── Helper ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function renderPanel(selectedElementId = 'task1') {
|
||||
return render(
|
||||
<TooltipProvider>
|
||||
<ActivityPanel selectedElementId={selectedElementId} />
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Tests ────────────────────────────────────────────────────────────────────
|
||||
|
||||
beforeEach(() => {
|
||||
// Resetear el mock de updateActivity y restaurar la actividad base
|
||||
processStoreMock.updateActivity.mockReset()
|
||||
processStoreMock.updateActivity.mockResolvedValue(undefined)
|
||||
processStoreMock.activities[0].automatable = false
|
||||
processStoreMock.activities[0].automatedCostFixed = 0
|
||||
processStoreMock.activities[0].automatedTimeMinutes = 0
|
||||
simulationStoreMock.resultActual = null
|
||||
simulationStoreMock.resultAutomated = null
|
||||
simulationStoreMock.invalidateResults.mockReset()
|
||||
})
|
||||
|
||||
describe('ActivityPanel — sección Automatización', () => {
|
||||
it('sección Automatización está presente y toggle en OFF por defecto', () => {
|
||||
renderPanel()
|
||||
expect(screen.getByText('¿Es automatizable?')).toBeInTheDocument()
|
||||
const toggle = screen.getByRole('switch', { name: /automatizable/i })
|
||||
expect(toggle).toHaveAttribute('aria-checked', 'false')
|
||||
})
|
||||
|
||||
it('Toggle ON: aria-checked cambia a true', async () => {
|
||||
renderPanel()
|
||||
const toggle = screen.getByRole('switch', { name: /automatizable/i })
|
||||
|
||||
await act(async () => { fireEvent.click(toggle) })
|
||||
|
||||
expect(toggle).toHaveAttribute('aria-checked', 'true')
|
||||
})
|
||||
|
||||
it('Toggle ON con ambos campos en 0: helper ámbar está en el DOM y visible (opacity-100)', async () => {
|
||||
renderPanel()
|
||||
const toggle = screen.getByRole('switch', { name: /automatizable/i })
|
||||
|
||||
await act(async () => { fireEvent.click(toggle) })
|
||||
|
||||
// El helper siempre está en el DOM — verificamos que el texto existe y el contenedor es visible
|
||||
const helperText = screen.getByText(/Transparencia metodológica/i)
|
||||
expect(helperText).toBeInTheDocument()
|
||||
// El contenedor padre tiene opacity-100 cuando showHelper=true
|
||||
const helperContainer = helperText.closest('[aria-hidden]')
|
||||
expect(helperContainer).toHaveAttribute('aria-hidden', 'false')
|
||||
})
|
||||
|
||||
it('Toggle ON con costo > 0: helper ámbar está en el DOM pero oculto (aria-hidden=true)', async () => {
|
||||
renderPanel()
|
||||
const toggle = screen.getByRole('switch', { name: /automatizable/i })
|
||||
await act(async () => { fireEvent.click(toggle) })
|
||||
|
||||
const costoInput = screen.getByLabelText(/Costo automatizado/i)
|
||||
await act(async () => {
|
||||
fireEvent.change(costoInput, { target: { value: '50' } })
|
||||
})
|
||||
|
||||
// El texto sigue en el DOM (transición CSS, no unmount)
|
||||
const helperText = screen.getByText(/Transparencia metodológica/i)
|
||||
expect(helperText).toBeInTheDocument()
|
||||
// Pero el contenedor está marcado aria-hidden=true (oculto visualmente)
|
||||
const helperContainer = helperText.closest('[aria-hidden]')
|
||||
expect(helperContainer).toHaveAttribute('aria-hidden', 'true')
|
||||
})
|
||||
|
||||
it('Editar costo automatizado y guardar llama updateActivity con el valor correcto', async () => {
|
||||
renderPanel()
|
||||
const toggle = screen.getByRole('switch', { name: /automatizable/i })
|
||||
await act(async () => { fireEvent.click(toggle) })
|
||||
|
||||
const costoInput = screen.getByLabelText(/Costo automatizado/i)
|
||||
await act(async () => {
|
||||
fireEvent.change(costoInput, { target: { value: '25' } })
|
||||
})
|
||||
|
||||
const guardarBtn = screen.getByRole('button', { name: /Guardar/i })
|
||||
await act(async () => { fireEvent.click(guardarBtn) })
|
||||
|
||||
expect(processStoreMock.updateActivity).toHaveBeenCalledOnce()
|
||||
const arg = processStoreMock.updateActivity.mock.calls[0][0]
|
||||
expect(arg.automatedCostFixed).toBe(25)
|
||||
expect(arg.automatable).toBe(true)
|
||||
})
|
||||
|
||||
it('Guardar llama updateActivity (la invalidación reactiva es responsabilidad del store)', async () => {
|
||||
renderPanel()
|
||||
const toggle = screen.getByRole('switch', { name: /automatizable/i })
|
||||
await act(async () => { fireEvent.click(toggle) })
|
||||
|
||||
const tiempoInput = screen.getByLabelText(/Tiempo automatizado/i)
|
||||
await act(async () => {
|
||||
fireEvent.change(tiempoInput, { target: { value: '5' } })
|
||||
})
|
||||
|
||||
const guardarBtn = screen.getByRole('button', { name: /Guardar/i })
|
||||
await act(async () => { fireEvent.click(guardarBtn) })
|
||||
|
||||
expect(processStoreMock.updateActivity).toHaveBeenCalledOnce()
|
||||
const arg = processStoreMock.updateActivity.mock.calls[0][0]
|
||||
expect(arg.automatedTimeMinutes).toBe(5)
|
||||
})
|
||||
})
|
||||
131
tests/features/workspace/BpmnCanvas.test.tsx
Normal file
131
tests/features/workspace/BpmnCanvas.test.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
/**
|
||||
* Tests del overlay de automatización en BpmnCanvas.
|
||||
*
|
||||
* bpmn-js se mockea completamente. El elementRegistry.get() devuelve
|
||||
* elementos con width=100 para verificar el posicionamiento left=width-12=88.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, act } from '@testing-library/react'
|
||||
|
||||
// ─── Mock de bpmn-js ──────────────────────────────────────────────────────────
|
||||
|
||||
const mockOverlaysAdd = vi.fn()
|
||||
const mockOverlaysRemove = vi.fn()
|
||||
const mockCanvasZoom = vi.fn()
|
||||
const mockRegForEach = vi.fn()
|
||||
// elementRegistry.get() devuelve un elemento con width=100 (nodo estándar de bpmn-js)
|
||||
const mockRegGet = vi.fn().mockReturnValue({ width: 100, height: 80 })
|
||||
|
||||
vi.mock('bpmn-js/lib/Viewer', () => ({
|
||||
default: class MockViewer {
|
||||
importXML = vi.fn().mockResolvedValue({ warnings: [] })
|
||||
|
||||
get = vi.fn().mockImplementation((svc: string) => {
|
||||
if (svc === 'overlays') return { add: mockOverlaysAdd, remove: mockOverlaysRemove }
|
||||
if (svc === 'canvas') return { zoom: mockCanvasZoom, addMarker: vi.fn(), removeMarker: vi.fn() }
|
||||
if (svc === 'elementRegistry') return { forEach: mockRegForEach, get: mockRegGet }
|
||||
if (svc === 'eventBus') return { on: vi.fn(), off: vi.fn() }
|
||||
return {}
|
||||
})
|
||||
|
||||
destroy = vi.fn()
|
||||
},
|
||||
}))
|
||||
|
||||
import { BpmnCanvas } from '@/features/workspace/BpmnCanvas'
|
||||
|
||||
// ─── Fixture ──────────────────────────────────────────────────────────────────
|
||||
|
||||
const SIMPLE_XML = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" targetNamespace="test">
|
||||
<process id="p"><startEvent id="s"/></process>
|
||||
</definitions>`
|
||||
|
||||
// Con width=100 de mockRegGet, left = 100 - 12 = 88
|
||||
const EXPECTED_LEFT = 88
|
||||
const EXPECTED_TOP = -8
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockRegGet.mockReturnValue({ width: 100, height: 80 })
|
||||
})
|
||||
|
||||
async function flush() {
|
||||
await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
|
||||
}
|
||||
|
||||
// ─── Tests ────────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('BpmnCanvas — overlay de automatización', () => {
|
||||
it('sin actividades automatizables: overlays.add NO se llama, remove sí', async () => {
|
||||
await act(async () => {
|
||||
render(<BpmnCanvas xml={SIMPLE_XML} automatableElementIds={[]} />)
|
||||
})
|
||||
await flush()
|
||||
|
||||
expect(mockOverlaysAdd).not.toHaveBeenCalled()
|
||||
expect(mockOverlaysRemove).toHaveBeenCalledWith({ type: 'automation-indicator' })
|
||||
})
|
||||
|
||||
it('posición: usa elementRegistry para calcular left=width-12, top=-8 (esquina superior derecha)', async () => {
|
||||
await act(async () => {
|
||||
render(<BpmnCanvas xml={SIMPLE_XML} automatableElementIds={['task_a']} />)
|
||||
})
|
||||
await flush()
|
||||
|
||||
expect(mockOverlaysAdd).toHaveBeenCalledOnce()
|
||||
const position = mockOverlaysAdd.mock.calls[0][2].position
|
||||
|
||||
// top: -8 — badge 8px por encima del borde superior del nodo
|
||||
expect(position.top).toBe(EXPECTED_TOP)
|
||||
// left: width-12 = 88 — badge en la región derecha, 8px fuera del borde derecho (20-12=8px sticking out)
|
||||
expect(position.left).toBe(EXPECTED_LEFT)
|
||||
// No usa right (semántica confusa en diagram-js: right:-8 → left=8+width, enteramente fuera)
|
||||
expect(position.right).toBeUndefined()
|
||||
})
|
||||
|
||||
it('con 2 actividades automatizables: overlays.add llamado 2 veces con posición correcta', async () => {
|
||||
await act(async () => {
|
||||
render(<BpmnCanvas xml={SIMPLE_XML} automatableElementIds={['task_a', 'task_b']} />)
|
||||
})
|
||||
await flush()
|
||||
|
||||
expect(mockOverlaysAdd).toHaveBeenCalledTimes(2)
|
||||
for (const call of mockOverlaysAdd.mock.calls) {
|
||||
expect(call[2].position).toEqual({ top: EXPECTED_TOP, left: EXPECTED_LEFT })
|
||||
}
|
||||
})
|
||||
|
||||
it('HTML del overlay: title correcto, SVG ámbar (#f59e0b), fondo #fffbeb', async () => {
|
||||
await act(async () => {
|
||||
render(<BpmnCanvas xml={SIMPLE_XML} automatableElementIds={['task_1']} />)
|
||||
})
|
||||
await flush()
|
||||
|
||||
const html: string = mockOverlaysAdd.mock.calls[0][2].html
|
||||
|
||||
expect(html).toContain('Actividad marcada como automatizable')
|
||||
expect(html).toContain('<svg')
|
||||
expect(html).toContain('#f59e0b') // color ámbar del ícono Bot
|
||||
expect(html).toContain('#fffbeb') // fondo amber-50 del círculo
|
||||
})
|
||||
|
||||
it('al quitar una actividad: remove() vuelve a llamarse y add() refleja la lista nueva', async () => {
|
||||
const { rerender } = render(
|
||||
<BpmnCanvas xml={SIMPLE_XML} automatableElementIds={['task_a', 'task_b']} />
|
||||
)
|
||||
await flush()
|
||||
|
||||
expect(mockOverlaysAdd).toHaveBeenCalledTimes(2)
|
||||
const removeCalls1 = mockOverlaysRemove.mock.calls.length
|
||||
|
||||
await act(async () => {
|
||||
rerender(<BpmnCanvas xml={SIMPLE_XML} automatableElementIds={['task_a']} />)
|
||||
})
|
||||
await flush()
|
||||
|
||||
expect(mockOverlaysRemove.mock.calls.length).toBeGreaterThan(removeCalls1)
|
||||
expect(mockOverlaysAdd).toHaveBeenCalledTimes(3) // 2 + 1
|
||||
})
|
||||
})
|
||||
132
tests/features/workspace/GlobalSettingsPanel.test.tsx
Normal file
132
tests/features/workspace/GlobalSettingsPanel.test.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* Tests de la sección "Análisis de Impacto" del GlobalSettingsPanel.
|
||||
*
|
||||
* Los mocks usan vi.hoisted() para que currentProcess sea una referencia
|
||||
* estable entre renders (evita el loop infinito del useEffect de sync).
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen, fireEvent, act } from '@testing-library/react'
|
||||
import { TooltipProvider } from '@/components/ui/tooltip'
|
||||
|
||||
// ─── Mocks con referencia estable ─────────────────────────────────────────────
|
||||
|
||||
const processStoreMock = vi.hoisted(() => ({
|
||||
currentProcess: {
|
||||
id: 'p1', name: 'Proceso test', clientName: 'Cliente A',
|
||||
bpmnXml: '<def/>', currency: 'USD', overheadPercentage: 0.2,
|
||||
annualFrequency: 1000, analysisHorizonYears: 3, automationInvestment: 0,
|
||||
createdAt: 0, updatedAt: 0,
|
||||
},
|
||||
updateProcess: vi.fn(),
|
||||
subscribe: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('@/store/process-store', () => ({
|
||||
useProcessStore: () => processStoreMock,
|
||||
}))
|
||||
|
||||
vi.mock('@/store/simulation-store', () => ({
|
||||
useSimulationStore: () => ({
|
||||
resultActual: null,
|
||||
resultAutomated: null,
|
||||
invalidateResults: vi.fn(),
|
||||
}),
|
||||
}))
|
||||
|
||||
import { GlobalSettingsPanel } from '@/features/workspace/GlobalSettingsPanel'
|
||||
|
||||
// ─── Helper ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function renderPanel() {
|
||||
return render(
|
||||
<TooltipProvider>
|
||||
<GlobalSettingsPanel />
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Tests ────────────────────────────────────────────────────────────────────
|
||||
|
||||
beforeEach(() => {
|
||||
processStoreMock.updateProcess.mockReset()
|
||||
processStoreMock.updateProcess.mockResolvedValue(undefined)
|
||||
// Restaurar defaults del proceso
|
||||
processStoreMock.currentProcess.annualFrequency = 1000
|
||||
processStoreMock.currentProcess.analysisHorizonYears = 3
|
||||
processStoreMock.currentProcess.automationInvestment = 0
|
||||
})
|
||||
|
||||
describe('GlobalSettingsPanel — sección Análisis de Impacto', () => {
|
||||
it('renderiza los 3 campos de impacto con sus labels correctos', () => {
|
||||
renderPanel()
|
||||
expect(screen.getByLabelText(/Frecuencia anual/i)).toBeInTheDocument()
|
||||
expect(screen.getByText(/Horizonte de análisis/i)).toBeInTheDocument()
|
||||
expect(screen.getByLabelText(/Inversión en automatización/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('frecuencia anual muestra el default 1000 del proceso', () => {
|
||||
renderPanel()
|
||||
const freqInput = screen.getByLabelText(/Frecuencia anual/i) as HTMLInputElement
|
||||
expect(freqInput.value).toBe('1000')
|
||||
})
|
||||
|
||||
it('editar frecuencia y guardar incluye el nuevo valor en updateProcess', async () => {
|
||||
renderPanel()
|
||||
const freqInput = screen.getByLabelText(/Frecuencia anual/i)
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.change(freqInput, { target: { value: '5000' } })
|
||||
})
|
||||
|
||||
// Después de cambiar, el botón debería mostrar "Guardar configuración"
|
||||
const guardarBtn = await screen.findByRole('button', { name: /Guardar/i })
|
||||
await act(async () => { fireEvent.click(guardarBtn) })
|
||||
|
||||
expect(processStoreMock.updateProcess).toHaveBeenCalledOnce()
|
||||
const calledWith = processStoreMock.updateProcess.mock.calls[0][0]
|
||||
expect(calledWith.annualFrequency).toBe(5000)
|
||||
})
|
||||
|
||||
it('horizonte de análisis se muestra en texto (default 3 años)', () => {
|
||||
renderPanel()
|
||||
expect(screen.getByText('3 años')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('guardar incluye horizonte actual en updateProcess', async () => {
|
||||
renderPanel()
|
||||
const freqInput = screen.getByLabelText(/Frecuencia anual/i)
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.change(freqInput, { target: { value: '1200' } })
|
||||
})
|
||||
|
||||
const guardarBtn = await screen.findByRole('button', { name: /Guardar/i })
|
||||
await act(async () => { fireEvent.click(guardarBtn) })
|
||||
|
||||
const calledWith = processStoreMock.updateProcess.mock.calls[0][0]
|
||||
expect(calledWith.analysisHorizonYears).toBe(3)
|
||||
expect(calledWith.analysisHorizonYears).toBeGreaterThanOrEqual(1)
|
||||
expect(calledWith.analysisHorizonYears).toBeLessThanOrEqual(10)
|
||||
})
|
||||
|
||||
it('editar inversión en automatización y guardar la incluye correctamente', async () => {
|
||||
renderPanel()
|
||||
const investInput = screen.getByLabelText(/Inversión en automatización/i)
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.change(investInput, { target: { value: '75000' } })
|
||||
})
|
||||
|
||||
const guardarBtn = await screen.findByRole('button', { name: /Guardar/i })
|
||||
await act(async () => { fireEvent.click(guardarBtn) })
|
||||
|
||||
const calledWith = processStoreMock.updateProcess.mock.calls[0][0]
|
||||
expect(calledWith.automationInvestment).toBe(75000)
|
||||
})
|
||||
|
||||
it('sección "ANÁLISIS DE IMPACTO" aparece con su label de sección', () => {
|
||||
renderPanel()
|
||||
expect(screen.getByText(/Análisis de Impacto/i)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
145
tests/integration/dexie-migration.test.ts
Normal file
145
tests/integration/dexie-migration.test.ts
Normal file
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* Tests de migración Dexie v1 → v2 (Sprint 1).
|
||||
*
|
||||
* Verifican que:
|
||||
* 1. Registros sin los campos nuevos reciben defaults correctos tras el upgrade.
|
||||
* 2. Registros con los campos ya presentes no son modificados.
|
||||
* 3. Los nuevos campos se pueden leer y persistir correctamente.
|
||||
*
|
||||
* Usan fake-indexeddb (parcheado en tests/setup.ts).
|
||||
*/
|
||||
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
|
||||
import { db } from '@/persistence/db'
|
||||
import { activityRepo, processRepo } from '@/persistence/repositories'
|
||||
import type { Activity, Process } from '@/domain/types'
|
||||
|
||||
// ─── Fixtures de registros "viejos" (sin campos Sprint 1) ─────────────────────
|
||||
|
||||
function makeLegacyActivity(id: string, processId: string): Omit<Activity, 'automatable' | 'automatedCostFixed' | 'automatedTimeMinutes'> {
|
||||
return {
|
||||
id, processId,
|
||||
bpmnElementId: `task_${id}`,
|
||||
name: `Tarea ${id}`,
|
||||
type: 'task',
|
||||
directCostFixed: 500,
|
||||
executionTimeMinutes: 45,
|
||||
assignedResources: [],
|
||||
}
|
||||
}
|
||||
|
||||
function makeLegacyProcess(id: string): Omit<Process, 'annualFrequency' | 'analysisHorizonYears' | 'automationInvestment'> {
|
||||
return {
|
||||
id, name: 'Proceso Legacy', clientName: 'Cliente Viejo',
|
||||
bpmnXml: '<definitions/>', currency: 'USD', overheadPercentage: 0.15,
|
||||
createdAt: 1000, updatedAt: 2000,
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Setup / Teardown ─────────────────────────────────────────────────────────
|
||||
|
||||
beforeEach(async () => {
|
||||
await db.open()
|
||||
await db.transaction('rw', [db.processes, db.activities], async () => {
|
||||
await db.processes.clear()
|
||||
await db.activities.clear()
|
||||
})
|
||||
})
|
||||
|
||||
afterEach(async () => {
|
||||
await db.close()
|
||||
})
|
||||
|
||||
// ─── Tests de defaults tras migración ─────────────────────────────────────────
|
||||
|
||||
describe('Migración Dexie v2 — Activity: defaults de campos Sprint 1', () => {
|
||||
it('actividades nuevas tienen automatable=false por defecto', async () => {
|
||||
const act: Activity = {
|
||||
...makeLegacyActivity('a1', 'p1'),
|
||||
automatable: false,
|
||||
automatedCostFixed: 0,
|
||||
automatedTimeMinutes: 0,
|
||||
}
|
||||
await activityRepo.save(act)
|
||||
const retrieved = await activityRepo.getByProcess('p1')
|
||||
expect(retrieved[0].automatable).toBe(false)
|
||||
expect(retrieved[0].automatedCostFixed).toBe(0)
|
||||
expect(retrieved[0].automatedTimeMinutes).toBe(0)
|
||||
})
|
||||
|
||||
it('los campos de automatización persisten con valores no-default', async () => {
|
||||
const act: Activity = {
|
||||
...makeLegacyActivity('a2', 'p1'),
|
||||
automatable: true,
|
||||
automatedCostFixed: 12.5,
|
||||
automatedTimeMinutes: 3,
|
||||
}
|
||||
await activityRepo.save(act)
|
||||
const [retrieved] = await activityRepo.getByProcess('p1')
|
||||
expect(retrieved.automatable).toBe(true)
|
||||
expect(retrieved.automatedCostFixed).toBe(12.5)
|
||||
expect(retrieved.automatedTimeMinutes).toBe(3)
|
||||
})
|
||||
|
||||
it('update de actividad preserva los campos de automatización existentes', async () => {
|
||||
const act: Activity = {
|
||||
...makeLegacyActivity('a3', 'p1'),
|
||||
automatable: true,
|
||||
automatedCostFixed: 5,
|
||||
automatedTimeMinutes: 10,
|
||||
}
|
||||
await activityRepo.save(act)
|
||||
// Actualizar solo directCostFixed — los campos de automatización no deben cambiar
|
||||
await activityRepo.save({ ...act, directCostFixed: 999 })
|
||||
const [updated] = await activityRepo.getByProcess('p1')
|
||||
expect(updated.directCostFixed).toBe(999)
|
||||
expect(updated.automatable).toBe(true)
|
||||
expect(updated.automatedCostFixed).toBe(5)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Migración Dexie v2 — Process: defaults de campos Sprint 1', () => {
|
||||
it('procesos nuevos tienen annualFrequency=1000 por defecto', async () => {
|
||||
const proc: Process = {
|
||||
...makeLegacyProcess('proc-1'),
|
||||
annualFrequency: 1000,
|
||||
analysisHorizonYears: 3,
|
||||
automationInvestment: 0,
|
||||
}
|
||||
await processRepo.save(proc)
|
||||
const retrieved = await processRepo.getById('proc-1')
|
||||
expect(retrieved!.annualFrequency).toBe(1000)
|
||||
expect(retrieved!.analysisHorizonYears).toBe(3)
|
||||
expect(retrieved!.automationInvestment).toBe(0)
|
||||
})
|
||||
|
||||
it('los campos de volumetría persisten con valores configurados', async () => {
|
||||
const proc: Process = {
|
||||
...makeLegacyProcess('proc-2'),
|
||||
annualFrequency: 5000,
|
||||
analysisHorizonYears: 5,
|
||||
automationInvestment: 75_000,
|
||||
}
|
||||
await processRepo.save(proc)
|
||||
const retrieved = await processRepo.getById('proc-2')
|
||||
expect(retrieved!.annualFrequency).toBe(5000)
|
||||
expect(retrieved!.analysisHorizonYears).toBe(5)
|
||||
expect(retrieved!.automationInvestment).toBe(75_000)
|
||||
})
|
||||
|
||||
it('update de proceso preserva campos de volumetría', async () => {
|
||||
const proc: Process = {
|
||||
...makeLegacyProcess('proc-3'),
|
||||
annualFrequency: 2000,
|
||||
analysisHorizonYears: 4,
|
||||
automationInvestment: 30_000,
|
||||
}
|
||||
await processRepo.save(proc)
|
||||
// Actualizar solo el nombre — los campos de volumetría no deben cambiar
|
||||
await processRepo.save({ ...proc, name: 'Nombre Actualizado' })
|
||||
const updated = await processRepo.getById('proc-3')
|
||||
expect(updated!.name).toBe('Nombre Actualizado')
|
||||
expect(updated!.annualFrequency).toBe(2000)
|
||||
expect(updated!.automationInvestment).toBe(30_000)
|
||||
})
|
||||
})
|
||||
@@ -85,6 +85,7 @@ describe('motor / propagación con GatewayConfig correcta', () => {
|
||||
actIds.map((id) => [id, {
|
||||
id: uuidv4(), processId, bpmnElementId: id, name: id,
|
||||
type: 'task', directCostFixed: 100, executionTimeMinutes: 30, assignedResources: [],
|
||||
automatable: false, automatedCostFixed: 0, automatedTimeMinutes: 0,
|
||||
}])
|
||||
)
|
||||
|
||||
|
||||
@@ -27,6 +27,9 @@ function makeProcess(id = 'proc-1'): Process {
|
||||
bpmnXml: '<definitions/>',
|
||||
currency: 'USD',
|
||||
overheadPercentage: 0.2,
|
||||
annualFrequency: 1000,
|
||||
analysisHorizonYears: 3,
|
||||
automationInvestment: 0,
|
||||
createdAt: 1000,
|
||||
updatedAt: 2000,
|
||||
}
|
||||
@@ -42,6 +45,9 @@ function makeActivity(id: string, processId: string, bpmnElementId: string): Act
|
||||
directCostFixed: 100,
|
||||
executionTimeMinutes: 30,
|
||||
assignedResources: [{ resourceId: 'res-1', utilizationPercent: 0.5 }],
|
||||
automatable: false,
|
||||
automatedCostFixed: 0,
|
||||
automatedTimeMinutes: 0,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -53,6 +53,9 @@ function buildInput(
|
||||
directCostFixed,
|
||||
executionTimeMinutes,
|
||||
assignedResources: [],
|
||||
automatable: false,
|
||||
automatedCostFixed: 0,
|
||||
automatedTimeMinutes: 0,
|
||||
},
|
||||
])
|
||||
)
|
||||
|
||||
232
tests/integration/sprint1-flow.test.ts
Normal file
232
tests/integration/sprint1-flow.test.ts
Normal file
@@ -0,0 +1,232 @@
|
||||
/**
|
||||
* Test integrador del flujo completo del Sprint 1.
|
||||
*
|
||||
* Verifica que las piezas del dominio conectan correctamente:
|
||||
* parseBpmnXml → extractActivityElements → runSimulation (actual + automated)
|
||||
* → calculateRoi → KPIs correctos
|
||||
*
|
||||
* BPMN base: medium-with-gateways (Aprobación de crédito)
|
||||
* — 11 actividades, 3 gateways (2 XOR + 1 AND), 5 flujos condicionales
|
||||
*
|
||||
* Costos usados (deliberadamente simples para assertions deterministas):
|
||||
* - Todas las actividades: directCostFixed=$200, executionTimeMinutes=60
|
||||
* - Automatable: solo task_recv y task_score (las más caras por prob alta)
|
||||
* - automatedCostFixed=$20 (90% de ahorro), automatedTimeMinutes=5
|
||||
* - annualFrequency=1200 (100 ejecuciones/mes), horizonte=3 años, inversión=$50.000
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { readFileSync } from 'fs'
|
||||
import { resolve } from 'path'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { parseBpmnXml, extractActivityElements, extractGatewayElements } from '@/domain/bpmn-parser'
|
||||
import { runSimulation } from '@/domain/simulation'
|
||||
import { calculateRoi } from '@/domain/roi'
|
||||
import { bpmnTypeToGatewayType } from '@/domain/types'
|
||||
import type { Activity, GatewayConfig, SimulationInput } from '@/domain/types'
|
||||
|
||||
const MEDIUM_XML = readFileSync(
|
||||
resolve(__dirname, '../../public/sample-processes/medium-with-gateways.bpmn'),
|
||||
'utf-8'
|
||||
)
|
||||
|
||||
// Actividades automatable y sus costos automatizados
|
||||
const AUTOMATABLE_IDS = new Set(['task_recv', 'task_score'])
|
||||
const AUTOMATED_COST = 20
|
||||
const AUTOMATED_TIME = 5
|
||||
|
||||
function buildActivities(xml: string): Map<string, Activity> {
|
||||
const graph = parseBpmnXml(xml)
|
||||
const elements = extractActivityElements(graph)
|
||||
return new Map(
|
||||
elements.map((el) => [el.bpmnElementId, {
|
||||
id: uuidv4(),
|
||||
processId: 'sprint1-test',
|
||||
bpmnElementId: el.bpmnElementId,
|
||||
name: el.name,
|
||||
type: el.type,
|
||||
directCostFixed: 200,
|
||||
executionTimeMinutes: 60,
|
||||
assignedResources: [],
|
||||
automatable: AUTOMATABLE_IDS.has(el.bpmnElementId),
|
||||
automatedCostFixed: AUTOMATABLE_IDS.has(el.bpmnElementId) ? AUTOMATED_COST : 0,
|
||||
automatedTimeMinutes: AUTOMATABLE_IDS.has(el.bpmnElementId) ? AUTOMATED_TIME : 0,
|
||||
}])
|
||||
)
|
||||
}
|
||||
|
||||
function buildGateways(xml: string): Map<string, GatewayConfig> {
|
||||
const graph = parseBpmnXml(xml)
|
||||
const elements = extractGatewayElements(graph)
|
||||
return new Map(
|
||||
elements.map((el) => {
|
||||
const gwType = bpmnTypeToGatewayType(el.gatewayType as any)
|
||||
const n = el.outgoing.length
|
||||
return [el.bpmnElementId, {
|
||||
id: uuidv4(),
|
||||
processId: 'sprint1-test',
|
||||
bpmnElementId: el.bpmnElementId,
|
||||
gatewayType: gwType,
|
||||
branches: el.outgoing.map((flowId) => ({
|
||||
flowId,
|
||||
targetElementId: graph.flows.get(flowId)?.targetRef ?? '',
|
||||
probability: gwType === 'parallel' ? 1.0 : parseFloat((1 / n).toFixed(4)),
|
||||
})),
|
||||
}]
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
const BASE_INPUT: Omit<SimulationInput, 'scenario'> = {
|
||||
processXml: MEDIUM_XML,
|
||||
activities: buildActivities(MEDIUM_XML),
|
||||
gateways: buildGateways(MEDIUM_XML),
|
||||
resources: new Map(),
|
||||
globalSettings: { currency: 'USD', overheadPercentage: 0.2 },
|
||||
}
|
||||
|
||||
const VOLUMETRY = {
|
||||
annualFrequency: 1200,
|
||||
analysisHorizonYears: 3,
|
||||
automationInvestment: 50_000,
|
||||
}
|
||||
|
||||
// ─── Tests ────────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('Sprint 1 — flujo integrado: simulación dual + ROI', () => {
|
||||
const resultActual = runSimulation({ ...BASE_INPUT, scenario: 'actual' })
|
||||
const resultAutomated = runSimulation({ ...BASE_INPUT, scenario: 'automated' })
|
||||
|
||||
// ─── Simulación actual ──────────────────────────────────────────────────
|
||||
|
||||
it('simulación actual produce resultado no nulo con actividades reales', () => {
|
||||
expect(resultActual.totalCost).toBeGreaterThan(0)
|
||||
expect(resultActual.perActivity.length).toBeGreaterThan(0)
|
||||
expect(resultActual.warnings).toBeDefined()
|
||||
})
|
||||
|
||||
it('simulación actual: task_recv tiene probabilidad 1.0 (primer nodo del proceso)', () => {
|
||||
const recv = resultActual.perActivity.find((a) => a.bpmnElementId === 'task_recv')
|
||||
expect(recv).toBeDefined()
|
||||
expect(recv!.executionProbability).toBeCloseTo(1.0)
|
||||
})
|
||||
|
||||
it('simulación actual: las actividades con costos tienen expectedDirectCost > 0', () => {
|
||||
for (const act of resultActual.perActivity) {
|
||||
expect(Number.isNaN(act.expectedDirectCost)).toBe(false)
|
||||
expect(act.expectedDirectCost).toBeGreaterThanOrEqual(0)
|
||||
}
|
||||
})
|
||||
|
||||
// ─── Simulación automatizada ────────────────────────────────────────────
|
||||
|
||||
it('simulación automatizada produce totalCost menor que actual', () => {
|
||||
// Hay actividades automatable con costo menor → total debe bajar
|
||||
expect(resultAutomated.totalCost).toBeLessThan(resultActual.totalCost)
|
||||
})
|
||||
|
||||
it('probabilidades de ejecución son idénticas entre escenarios', () => {
|
||||
for (const actActual of resultActual.perActivity) {
|
||||
const actAuto = resultAutomated.perActivity.find(
|
||||
(a) => a.bpmnElementId === actActual.bpmnElementId
|
||||
)
|
||||
expect(actAuto).toBeDefined()
|
||||
expect(actAuto!.executionProbability).toBeCloseTo(actActual.executionProbability, 5)
|
||||
}
|
||||
})
|
||||
|
||||
it('actividades automatable tienen expectedDirectCost menor en escenario automatizado', () => {
|
||||
for (const bpmnElementId of AUTOMATABLE_IDS) {
|
||||
const actual = resultActual.perActivity.find((a) => a.bpmnElementId === bpmnElementId)
|
||||
const automated = resultAutomated.perActivity.find((a) => a.bpmnElementId === bpmnElementId)
|
||||
if (!actual || !automated) continue // podría no aparecer si prob=0
|
||||
expect(automated.expectedDirectCost).toBeLessThan(actual.expectedDirectCost)
|
||||
}
|
||||
})
|
||||
|
||||
it('actividades no automatable tienen el mismo costo en ambos escenarios', () => {
|
||||
for (const act of resultActual.perActivity) {
|
||||
if (AUTOMATABLE_IDS.has(act.bpmnElementId)) continue
|
||||
const auto = resultAutomated.perActivity.find((a) => a.bpmnElementId === act.bpmnElementId)!
|
||||
expect(auto.expectedDirectCost).toBeCloseTo(act.expectedDirectCost, 5)
|
||||
}
|
||||
})
|
||||
|
||||
it('ningún campo numérico del resultado automatizado es NaN', () => {
|
||||
expect(Number.isNaN(resultAutomated.totalCost)).toBe(false)
|
||||
expect(Number.isNaN(resultAutomated.totalDirectCost)).toBe(false)
|
||||
expect(Number.isNaN(resultAutomated.totalIndirectCost)).toBe(false)
|
||||
for (const act of resultAutomated.perActivity) {
|
||||
expect(Number.isNaN(act.expectedDirectCost)).toBe(false)
|
||||
expect(Number.isNaN(act.expectedTotalCost)).toBe(false)
|
||||
expect(Number.isNaN(act.percentOfTotal)).toBe(false)
|
||||
}
|
||||
})
|
||||
|
||||
// ─── calculateRoi conecta con los resultados de simulación ─────────────
|
||||
|
||||
it('calculateRoi recibe costos de ambas simulaciones y devuelve KPIs válidos', () => {
|
||||
const roi = calculateRoi({
|
||||
costPerExecutionActual: resultActual.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
...VOLUMETRY,
|
||||
})
|
||||
|
||||
// Ahorro positivo (automated < actual)
|
||||
expect(roi.savingsPerExecution).toBeGreaterThan(0)
|
||||
expect(roi.annualSavings).toBeGreaterThan(0)
|
||||
|
||||
// Payback finito y positivo
|
||||
expect(roi.paybackMonths).toBeGreaterThan(0)
|
||||
expect(Number.isFinite(roi.paybackMonths)).toBe(true)
|
||||
|
||||
// Con inversión $50.000 y ahorro anual razonable, debería pagar dentro del horizonte de 3 años
|
||||
// (esto depende de los costos calculados, pero verificamos que es un número razonable)
|
||||
expect(roi.paybackYears).toBeGreaterThan(0)
|
||||
|
||||
// ROI anualizado positivo (ahorro > 0, inversión > 0)
|
||||
expect(roi.roiAnnualPercent).toBeGreaterThan(0)
|
||||
expect(Number.isNaN(roi.roiAnnualPercent)).toBe(false)
|
||||
expect(Number.isNaN(roi.cumulativeSavingsHorizon)).toBe(false)
|
||||
})
|
||||
|
||||
it('ahorro acumulado a 3 años supera la inversión si hay ahorro positivo suficiente', () => {
|
||||
const roi = calculateRoi({
|
||||
costPerExecutionActual: resultActual.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
...VOLUMETRY,
|
||||
})
|
||||
|
||||
if (roi.annualSavings * VOLUMETRY.analysisHorizonYears > VOLUMETRY.automationInvestment) {
|
||||
expect(roi.cumulativeSavingsHorizon).toBeGreaterThan(0)
|
||||
expect(roi.breaksEvenInHorizon).toBe(true)
|
||||
} else {
|
||||
// Si el ahorro es menor que la inversión en 3 años, el test es informativo
|
||||
expect(roi.cumulativeSavingsHorizon).toBeDefined()
|
||||
}
|
||||
})
|
||||
|
||||
// ─── Transparencia metodológica: actividades automatable con costo cero ─
|
||||
|
||||
it('detecta actividades automatable con automatedCostFixed=0 para transparencia', () => {
|
||||
// En nuestro fixture solo task_recv y task_score son automatable con costo > 0.
|
||||
// Si alguien marca una actividad como automatable pero no pone costo,
|
||||
// el resultado automatizado de esa actividad debe tener cost=0.
|
||||
const activities = buildActivities(MEDIUM_XML)
|
||||
|
||||
// Forzar una actividad automatable con costo cero (simula campo no configurado)
|
||||
const taskValid = activities.get('task_valid')
|
||||
if (taskValid) {
|
||||
activities.set('task_valid', { ...taskValid, automatable: true, automatedCostFixed: 0, automatedTimeMinutes: 0 })
|
||||
}
|
||||
|
||||
const result = runSimulation({ ...BASE_INPUT, activities, scenario: 'automated' })
|
||||
const validResult = result.perActivity.find((a) => a.bpmnElementId === 'task_valid')
|
||||
|
||||
if (validResult && validResult.executionProbability > 0) {
|
||||
// automatable=true pero costos en 0 → contribuye con $0 al total automatizado
|
||||
expect(validResult.expectedDirectCost).toBe(0)
|
||||
expect(Number.isNaN(validResult.expectedDirectCost)).toBe(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
447
tests/integration/sprint1-report-roi.test.ts
Normal file
447
tests/integration/sprint1-report-roi.test.ts
Normal file
@@ -0,0 +1,447 @@
|
||||
/**
|
||||
* Test integrador del flujo ROI completo — Sprint 1 Etapa 3.
|
||||
*
|
||||
* Para cada sample BPMN verifica que el pipeline:
|
||||
* parseBpmnXml → runSimulation (dual) → calculateRoi
|
||||
* produce KPIs numéricos válidos y detecta las condiciones de transparencia
|
||||
* metodológica correctamente.
|
||||
*
|
||||
* Los 4 casos:
|
||||
* A) simple-linear SIN automatizables → automatableIds.size = 0
|
||||
* B) medium-with-gateways, 3 automatable → KPIs positivos, payback razonable
|
||||
* C) medium-with-gateways, 1 automatable en ceros + investment=0 → transparencia doble
|
||||
* D) complex-with-loop → warnings preservados en ambos escenarios
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { readFileSync } from 'fs'
|
||||
import { resolve } from 'path'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { parseBpmnXml, extractActivityElements, extractGatewayElements } from '@/domain/bpmn-parser'
|
||||
import { runSimulation } from '@/domain/simulation'
|
||||
import { calculateRoi } from '@/domain/roi'
|
||||
import { formatCurrency, formatPercent } from '@/lib/format'
|
||||
import { bpmnTypeToGatewayType } from '@/domain/types'
|
||||
import type { Activity, GatewayConfig, SimulationInput } from '@/domain/types'
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function loadBpmn(name: string): string {
|
||||
return readFileSync(resolve(__dirname, '../../public/sample-processes', name), 'utf-8')
|
||||
}
|
||||
|
||||
function buildSimInput(
|
||||
xml: string,
|
||||
directCost: number,
|
||||
automatableIds: Set<string>,
|
||||
automatedCost: number,
|
||||
automatedTime: number,
|
||||
): SimulationInput {
|
||||
const graph = parseBpmnXml(xml)
|
||||
const actEls = extractActivityElements(graph)
|
||||
const gwEls = extractGatewayElements(graph)
|
||||
const processId = 'roi-test'
|
||||
|
||||
const activities = new Map<string, Activity>(
|
||||
actEls.map((el) => [el.bpmnElementId, {
|
||||
id: uuidv4(), processId, bpmnElementId: el.bpmnElementId,
|
||||
name: el.name, type: el.type,
|
||||
directCostFixed: directCost,
|
||||
executionTimeMinutes: 60,
|
||||
assignedResources: [],
|
||||
automatable: automatableIds.has(el.bpmnElementId),
|
||||
automatedCostFixed: automatableIds.has(el.bpmnElementId) ? automatedCost : 0,
|
||||
automatedTimeMinutes: automatableIds.has(el.bpmnElementId) ? automatedTime : 0,
|
||||
}])
|
||||
)
|
||||
|
||||
const gateways = new Map<string, GatewayConfig>(
|
||||
gwEls.map((el) => {
|
||||
const gwType = bpmnTypeToGatewayType(el.gatewayType as any)
|
||||
const n = el.outgoing.length
|
||||
return [el.bpmnElementId, {
|
||||
id: uuidv4(), processId, bpmnElementId: el.bpmnElementId,
|
||||
gatewayType: gwType,
|
||||
branches: el.outgoing.map((flowId) => ({
|
||||
flowId, targetElementId: graph.flows.get(flowId)?.targetRef ?? '',
|
||||
probability: gwType === 'parallel' ? 1.0 : parseFloat((1 / n).toFixed(4)),
|
||||
})),
|
||||
}]
|
||||
})
|
||||
)
|
||||
|
||||
return {
|
||||
processXml: xml,
|
||||
activities,
|
||||
gateways,
|
||||
resources: new Map(),
|
||||
globalSettings: { currency: 'USD', overheadPercentage: 0.2 },
|
||||
}
|
||||
}
|
||||
|
||||
// Volumetría estándar para todos los tests (la especificada en el brief)
|
||||
const VOL = { annualFrequency: 12_000, analysisHorizonYears: 3, automationInvestment: 50_000 }
|
||||
|
||||
// ─── CASO A: simple-linear SIN automatizables ─────────────────────────────────
|
||||
|
||||
describe('Caso A — simple-linear SIN automatizables', () => {
|
||||
const xml = loadBpmn('simple-linear.bpmn')
|
||||
const noAutomatable = new Set<string>()
|
||||
const input = buildSimInput(xml, 200, noAutomatable, 0, 0)
|
||||
|
||||
const resultActual = runSimulation({ ...input, scenario: 'actual' })
|
||||
const resultAutomated = runSimulation({ ...input, scenario: 'automated' })
|
||||
|
||||
it('simple-linear tiene 5 actividades', () => {
|
||||
const graph = parseBpmnXml(xml)
|
||||
const actEls = extractActivityElements(graph)
|
||||
expect(actEls).toHaveLength(5)
|
||||
})
|
||||
|
||||
it('automatableIds.size === 0: ninguna actividad marcada como automatizable', () => {
|
||||
const graph = parseBpmnXml(xml)
|
||||
const actEls = extractActivityElements(graph)
|
||||
const automatableIds = actEls.filter((el) => noAutomatable.has(el.bpmnElementId))
|
||||
expect(automatableIds).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('resultActual y resultAutomated tienen costos idénticos (sin automatizables)', () => {
|
||||
expect(resultActual.totalCost).toBeCloseTo(resultAutomated.totalCost, 4)
|
||||
})
|
||||
|
||||
it('ROI con costos idénticos: savingsPerExecution = 0, annualSavings = 0', () => {
|
||||
const roi = calculateRoi({
|
||||
costPerExecutionActual: resultActual.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
...VOL,
|
||||
})
|
||||
expect(roi.savingsPerExecution).toBeCloseTo(0, 4)
|
||||
expect(roi.annualSavings).toBeCloseTo(0, 2)
|
||||
})
|
||||
|
||||
it('con ahorro cero: paybackMonths = Infinity', () => {
|
||||
const roi = calculateRoi({
|
||||
costPerExecutionActual: resultActual.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
...VOL,
|
||||
})
|
||||
expect(roi.paybackMonths).toBe(Infinity)
|
||||
})
|
||||
|
||||
it('con ahorro cero: breaksEvenInHorizon = false', () => {
|
||||
const roi = calculateRoi({
|
||||
costPerExecutionActual: resultActual.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
...VOL,
|
||||
})
|
||||
expect(roi.breaksEvenInHorizon).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── CASO B: medium-with-gateways con 3 automatizables ───────────────────────
|
||||
|
||||
describe('Caso B — medium-with-gateways, 3 automatizables, valores plausibles', () => {
|
||||
const xml = loadBpmn('medium-with-gateways.bpmn')
|
||||
// task_recv (prob≈1.0), task_score (prob≈0.5), task_analisis (prob≈0.5 post-parallel)
|
||||
const automatable3 = new Set(['task_recv', 'task_score', 'task_analisis'])
|
||||
const input = buildSimInput(xml, 200, automatable3, 20, 5)
|
||||
|
||||
const resultActual = runSimulation({ ...input, scenario: 'actual' })
|
||||
const resultAutomated = runSimulation({ ...input, scenario: 'automated' })
|
||||
const roi = calculateRoi({
|
||||
costPerExecutionActual: resultActual.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
...VOL,
|
||||
})
|
||||
|
||||
it('reporta los KPIs reales del Caso B para inspección manual', () => {
|
||||
// Este test siempre pasa — su propósito es mostrar valores en la consola
|
||||
console.log('\n╔══════════════════════════════════════════════════════════╗')
|
||||
console.log('║ CASO B: medium-with-gateways — KPIs del sistema ║')
|
||||
console.log('╠══════════════════════════════════════════════════════════╣')
|
||||
console.log(`║ Costo actual por ejecución: ${formatCurrency(resultActual.totalCost, 'USD').padEnd(26)} ║`)
|
||||
console.log(`║ Costo automático por ejec.: ${formatCurrency(resultAutomated.totalCost, 'USD').padEnd(26)} ║`)
|
||||
console.log('╠══════════════════════════════════════════════════════════╣')
|
||||
console.log(`║ Ahorro por ejecución: ${formatCurrency(roi.savingsPerExecution, 'USD').padEnd(30)} ║`)
|
||||
console.log(`║ Reducción %: ${formatPercent(roi.savingsPerExecutionPercent).padEnd(30)} ║`)
|
||||
console.log(`║ Ahorro anual: ${formatCurrency(roi.annualSavings, 'USD').padEnd(30)} ║`)
|
||||
console.log(`║ Payback: ${roi.paybackMonths.toFixed(1)} meses`.padEnd(57) + '║')
|
||||
console.log(`║ Acumulado a 3 años: ${formatCurrency(roi.cumulativeSavingsHorizon, 'USD').padEnd(30)} ║`)
|
||||
console.log(`║ ROI anualizado: ${formatPercent(roi.roiAnnualPercent).padEnd(30)} ║`)
|
||||
console.log('╚══════════════════════════════════════════════════════════╝\n')
|
||||
expect(true).toBe(true)
|
||||
})
|
||||
|
||||
it('dump de costos por actividad — reconciliación aritmética completa', () => {
|
||||
const autoByElem = new Map(resultAutomated.perActivity.map((a) => [a.bpmnElementId, a]))
|
||||
|
||||
// Construcción de la tabla en orden de procesamiento topológico
|
||||
const all = resultActual.perActivity
|
||||
.slice()
|
||||
.sort((a, b) => b.executionProbability - a.executionProbability || a.activityName.localeCompare(b.activityName))
|
||||
|
||||
const AUTOMATABLE = new Set(['task_recv', 'task_score', 'task_analisis'])
|
||||
|
||||
let directActualSum = 0
|
||||
let directAutoSum = 0
|
||||
|
||||
console.log('\n┌────────────────────────────────┬──────┬──────────────┬──────────────┐')
|
||||
console.log('│ bpmnElementId │ prob │ directo act. │ directo auto │')
|
||||
console.log('├────────────────────────────────┼──────┼──────────────┼──────────────┤')
|
||||
for (const act of all) {
|
||||
const aAuto = autoByElem.get(act.bpmnElementId)
|
||||
const prob = act.executionProbability
|
||||
const dAct = act.expectedDirectCost
|
||||
const dAuto = aAuto?.expectedDirectCost ?? 0
|
||||
const auto = AUTOMATABLE.has(act.bpmnElementId) ? '★' : ' '
|
||||
directActualSum += dAct
|
||||
directAutoSum += dAuto
|
||||
const idPadded = act.bpmnElementId.padEnd(30)
|
||||
const probStr = prob.toFixed(2).padStart(4)
|
||||
const actStr = dAct.toFixed(2).padStart(12)
|
||||
const autoStr = dAuto.toFixed(2).padStart(12)
|
||||
console.log(`│ ${auto}${idPadded} │ ${probStr} │ ${actStr} │ ${autoStr} │`)
|
||||
}
|
||||
console.log('├────────────────────────────────┼──────┼──────────────┼──────────────┤')
|
||||
console.log(`│ SUMA DIRECTA │ │ ${directActualSum.toFixed(2).padStart(12)} │ ${directAutoSum.toFixed(2).padStart(12)} │`)
|
||||
console.log(`│ + overhead 20% │ │ ${(directActualSum * 1.2).toFixed(2).padStart(12)} │ ${(directAutoSum * 1.2).toFixed(2).padStart(12)} │`)
|
||||
console.log('└────────────────────────────────┴──────┴──────────────┴──────────────┘\n')
|
||||
|
||||
// Verificaciones aritméticas exactas
|
||||
// sum probs de actividades: 1+1+0.5+0.5+0.5+0.5+1+0.5+0.5+0.5+1 = 7.5
|
||||
const sumProbs = all.reduce((s, a) => s + a.executionProbability, 0)
|
||||
expect(sumProbs).toBeCloseTo(7.5, 4)
|
||||
|
||||
// Directo actual = 7.5 × $200 = $1.500
|
||||
expect(directActualSum).toBeCloseTo(1500, 2)
|
||||
|
||||
// Total con overhead = $1.800
|
||||
expect(resultActual.totalCost).toBeCloseTo(1800, 2)
|
||||
|
||||
// Directo automatizado:
|
||||
// task_recv(1×$20)+task_valid(1×$200)+task_score(0.5×$20)+task_pedir_docs(0.5×$200)
|
||||
// +task_bureau(0.5×$200)+task_empleador(0.5×$200)+task_analisis(1×$20)
|
||||
// +task_aprobar(0.5×$200)+task_rechazar(0.5×$200)+task_desembolso(0.5×$200)+task_archivo(1×$200)
|
||||
// = $20+$200+$10+$100+$100+$100+$20+$100+$100+$100+$200 = $1.050
|
||||
expect(directAutoSum).toBeCloseTo(1050, 2)
|
||||
|
||||
// Total automatizado con overhead = $1.260
|
||||
expect(resultAutomated.totalCost).toBeCloseTo(1260, 2)
|
||||
})
|
||||
|
||||
it('costAutomated < costActual (hay ahorro)', () => {
|
||||
expect(resultAutomated.totalCost).toBeLessThan(resultActual.totalCost)
|
||||
})
|
||||
|
||||
it('savingsPerExecution > 0 (ahorro positivo por ejecución)', () => {
|
||||
expect(roi.savingsPerExecution).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('annualSavings > 0 (ahorro anual positivo)', () => {
|
||||
expect(roi.annualSavings).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('paybackMonths es finito y positivo', () => {
|
||||
expect(Number.isFinite(roi.paybackMonths)).toBe(true)
|
||||
expect(roi.paybackMonths).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('paybackMonths < 24 (recupera la inversión en menos de 2 años con datos plausibles)', () => {
|
||||
expect(roi.paybackMonths).toBeLessThan(24)
|
||||
})
|
||||
|
||||
it('ROI anualizado > 100% (inversión se multiplica en el horizonte)', () => {
|
||||
expect(roi.roiAnnualPercent).toBeGreaterThan(100)
|
||||
})
|
||||
|
||||
it('breaksEvenInHorizon = true (se recupera dentro de 3 años)', () => {
|
||||
expect(roi.breaksEvenInHorizon).toBe(true)
|
||||
})
|
||||
|
||||
it('ningún KPI es NaN', () => {
|
||||
expect(Number.isNaN(roi.savingsPerExecution)).toBe(false)
|
||||
expect(Number.isNaN(roi.annualSavings)).toBe(false)
|
||||
expect(Number.isNaN(roi.cumulativeSavingsHorizon)).toBe(false)
|
||||
expect(Number.isNaN(roi.roiAnnualPercent)).toBe(false)
|
||||
expect(Number.isNaN(roi.paybackMonths)).toBe(false)
|
||||
})
|
||||
|
||||
it('tabla de comparación: task_recv tiene ahorro diferente de cero', () => {
|
||||
const actualRecv = resultActual.perActivity.find((a) => a.bpmnElementId === 'task_recv')
|
||||
const autoRecv = resultAutomated.perActivity.find((a) => a.bpmnElementId === 'task_recv')
|
||||
expect(actualRecv).toBeDefined()
|
||||
expect(autoRecv).toBeDefined()
|
||||
expect(autoRecv!.expectedDirectCost).toBeLessThan(actualRecv!.expectedDirectCost)
|
||||
})
|
||||
|
||||
it('tabla de comparación: actividades no automatable tienen costos idénticos en ambos escenarios', () => {
|
||||
const nonAutomatableIds = ['task_valid', 'task_bureau', 'task_empleador', 'task_archivo']
|
||||
for (const id of nonAutomatableIds) {
|
||||
const actual = resultActual.perActivity.find((a) => a.bpmnElementId === id)
|
||||
const auto = resultAutomated.perActivity.find((a) => a.bpmnElementId === id)
|
||||
if (!actual || !auto) continue
|
||||
expect(auto.expectedDirectCost).toBeCloseTo(actual.expectedDirectCost, 4)
|
||||
}
|
||||
})
|
||||
|
||||
it('probabilidades de ejecución idénticas entre escenarios (el grafo no cambia)', () => {
|
||||
for (const actActual of resultActual.perActivity) {
|
||||
const actAuto = resultAutomated.perActivity.find(
|
||||
(a) => a.bpmnElementId === actActual.bpmnElementId
|
||||
)
|
||||
expect(actAuto).toBeDefined()
|
||||
expect(actAuto!.executionProbability).toBeCloseTo(actActual.executionProbability, 5)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// ─── CASO C: transparencia metodológica (ambas condiciones) ──────────────────
|
||||
|
||||
describe('Caso C — medium-with-gateways, 1 automatable en ceros + investment=0', () => {
|
||||
const xml = loadBpmn('medium-with-gateways.bpmn')
|
||||
const graph = parseBpmnXml(xml)
|
||||
const actEls = extractActivityElements(graph)
|
||||
const gwEls = extractGatewayElements(graph)
|
||||
|
||||
// Construir actividades: task_valid marcada como automatable pero con costo=0 y tiempo=0
|
||||
const activities = new Map<string, Activity>(
|
||||
actEls.map((el) => [el.bpmnElementId, {
|
||||
id: uuidv4(), processId: 'c-test', bpmnElementId: el.bpmnElementId,
|
||||
name: el.name, type: el.type,
|
||||
directCostFixed: 200, executionTimeMinutes: 60, assignedResources: [],
|
||||
automatable: el.bpmnElementId === 'task_valid',
|
||||
automatedCostFixed: 0, // cero — trigger de transparencia
|
||||
automatedTimeMinutes: 0, // cero — trigger de transparencia
|
||||
}])
|
||||
)
|
||||
|
||||
const gateways = new Map<string, GatewayConfig>(
|
||||
gwEls.map((el) => {
|
||||
const gwType = bpmnTypeToGatewayType(el.gatewayType as any)
|
||||
const n = el.outgoing.length
|
||||
return [el.bpmnElementId, {
|
||||
id: uuidv4(), processId: 'c-test', bpmnElementId: el.bpmnElementId,
|
||||
gatewayType: gwType,
|
||||
branches: el.outgoing.map((flowId) => ({
|
||||
flowId, targetElementId: graph.flows.get(flowId)?.targetRef ?? '',
|
||||
probability: gwType === 'parallel' ? 1.0 : parseFloat((1 / n).toFixed(4)),
|
||||
})),
|
||||
}]
|
||||
})
|
||||
)
|
||||
|
||||
const input: SimulationInput = {
|
||||
processXml: xml, activities, gateways, resources: new Map(),
|
||||
globalSettings: { currency: 'USD', overheadPercentage: 0.2 },
|
||||
}
|
||||
|
||||
const resultActual = runSimulation({ ...input, scenario: 'actual' })
|
||||
const resultAutomated = runSimulation({ ...input, scenario: 'automated' })
|
||||
|
||||
// investment=0 para el segundo trigger de transparencia
|
||||
const roi = calculateRoi({
|
||||
costPerExecutionActual: resultActual.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
annualFrequency: 12_000,
|
||||
analysisHorizonYears: 3,
|
||||
automationInvestment: 0, // ← trigger de transparencia
|
||||
})
|
||||
|
||||
it('task_valid automatable con costo=0 → en escenario automatizado, task_valid contribuye $0 de costo directo', () => {
|
||||
const taskValidAuto = resultAutomated.perActivity.find((a) => a.bpmnElementId === 'task_valid')
|
||||
expect(taskValidAuto).toBeDefined()
|
||||
// automatable=true pero costo=0 → contribuye con $0 al directo automatizado
|
||||
expect(taskValidAuto!.expectedDirectCost).toBeCloseTo(0, 4)
|
||||
})
|
||||
|
||||
it('TransparencySection Condición 1: hay 1 actividad automatable con costos en cero', () => {
|
||||
const zeroCostAutomatable = actEls.filter((el) => {
|
||||
const act = activities.get(el.bpmnElementId)
|
||||
return act?.automatable && act.automatedCostFixed === 0 && act.automatedTimeMinutes === 0
|
||||
})
|
||||
expect(zeroCostAutomatable).toHaveLength(1)
|
||||
expect(zeroCostAutomatable[0].bpmnElementId).toBe('task_valid')
|
||||
})
|
||||
|
||||
it('TransparencySection Condición 2: investment=0 → paybackMonths=0 (inmediato)', () => {
|
||||
expect(roi.paybackMonths).toBe(0)
|
||||
})
|
||||
|
||||
it('TransparencySection Condición 2: investment=0 → roiAnnualPercent=Infinity', () => {
|
||||
expect(roi.roiAnnualPercent).toBe(Infinity)
|
||||
})
|
||||
|
||||
it('ambas condiciones de transparencia coexisten en el mismo proceso', () => {
|
||||
const zeroCostAutomatable = actEls.filter((el) => {
|
||||
const act = activities.get(el.bpmnElementId)
|
||||
return act?.automatable && act.automatedCostFixed === 0 && act.automatedTimeMinutes === 0
|
||||
})
|
||||
// Condición 1: al menos 1 automatable con costo=0
|
||||
expect(zeroCostAutomatable.length).toBeGreaterThan(0)
|
||||
// Condición 2: investment=0
|
||||
expect(roi.paybackMonths).toBe(0)
|
||||
expect(roi.roiAnnualPercent).toBe(Infinity)
|
||||
})
|
||||
|
||||
it('el ahorro sigue siendo positivo aunque task_valid tenga costo=0 en automático (la reducción es real)', () => {
|
||||
// task_valid automatable con costo=0 reduce el total del escenario automatizado
|
||||
expect(resultAutomated.totalCost).toBeLessThan(resultActual.totalCost)
|
||||
expect(roi.savingsPerExecution).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── CASO D: complex-with-loop + warnings ─────────────────────────────────────
|
||||
|
||||
describe('Caso D — complex-with-loop, warnings preservados en ambos escenarios', () => {
|
||||
const xml = loadBpmn('complex-with-loop.bpmn')
|
||||
const automatable = new Set(['task_preparar', 'task_inspeccion'])
|
||||
const input = buildSimInput(xml, 200, automatable, 25, 5)
|
||||
|
||||
const resultActual = runSimulation({ ...input, scenario: 'actual' })
|
||||
const resultAutomated = runSimulation({ ...input, scenario: 'automated' })
|
||||
|
||||
it('el escenario actual produce warnings (loop detectado)', () => {
|
||||
expect(resultActual.warnings.length).toBeGreaterThan(0)
|
||||
const loopWarning = resultActual.warnings.some(
|
||||
(w) => w.toLowerCase().includes('loop') || w.toLowerCase().includes('ciclo') || w.toLowerCase().includes('visitad')
|
||||
)
|
||||
expect(loopWarning).toBe(true)
|
||||
})
|
||||
|
||||
it('el escenario automatizado también tiene los mismos warnings de loop', () => {
|
||||
expect(resultAutomated.warnings.length).toBeGreaterThan(0)
|
||||
// La estructura del grafo no cambia entre escenarios → mismo warning
|
||||
expect(resultAutomated.warnings.length).toBe(resultActual.warnings.length)
|
||||
})
|
||||
|
||||
it('el tab ROI (cambio de tab) NO silencia el warning — los datos de warnings coexisten', () => {
|
||||
// Este test valida que el SimulationResult preserva el array de warnings
|
||||
// independientemente del escenario. La UI del tab ROI no tiene WarningsBanner
|
||||
// (solo Actual y Automatizado lo tienen), pero los datos existen.
|
||||
expect(resultActual.warnings).toBeDefined()
|
||||
expect(Array.isArray(resultActual.warnings)).toBe(true)
|
||||
expect(resultAutomated.warnings).toBeDefined()
|
||||
expect(Array.isArray(resultAutomated.warnings)).toBe(true)
|
||||
})
|
||||
|
||||
it('aún con loop, el totalCost no es NaN', () => {
|
||||
expect(Number.isNaN(resultActual.totalCost)).toBe(false)
|
||||
expect(Number.isNaN(resultAutomated.totalCost)).toBe(false)
|
||||
})
|
||||
|
||||
it('aún con loop, la diferencia de costos entre escenarios es real y positiva', () => {
|
||||
expect(resultAutomated.totalCost).toBeLessThan(resultActual.totalCost)
|
||||
})
|
||||
|
||||
it('aún con loop, calculateRoi no produce NaN ni errores', () => {
|
||||
const roi = calculateRoi({
|
||||
costPerExecutionActual: resultActual.totalCost,
|
||||
costPerExecutionAutomated: resultAutomated.totalCost,
|
||||
...VOL,
|
||||
})
|
||||
expect(Number.isNaN(roi.savingsPerExecution)).toBe(false)
|
||||
expect(Number.isNaN(roi.annualSavings)).toBe(false)
|
||||
expect(Number.isNaN(roi.cumulativeSavingsHorizon)).toBe(false)
|
||||
expect(roi.savingsPerExecution).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
216
tests/lib/export/csv-export-roi.test.ts
Normal file
216
tests/lib/export/csv-export-roi.test.ts
Normal file
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* Tests del export CSV para el tab "Comparación + ROI" (Sprint 1 — Etapa 4).
|
||||
* Verifica las 16 columnas, la metadata extendida, sufijos de archivo y
|
||||
* compatibilidad con el comportamiento anterior (tabs actual y automatizado).
|
||||
*/
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { generateCsvContent } from '@/lib/export/csv-export'
|
||||
import type { Process, Simulation, Activity, SimulationResult } from '@/domain/types'
|
||||
|
||||
// ─── Fixtures ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function makeProcess(extras: Partial<Process> = {}): Process {
|
||||
return {
|
||||
id: 'p1', name: 'Proceso de Crédito', clientName: 'Banco XYZ',
|
||||
bpmnXml: '', currency: 'USD', overheadPercentage: 0.2,
|
||||
annualFrequency: 1200, analysisHorizonYears: 3, automationInvestment: 50_000,
|
||||
createdAt: 0, updatedAt: 0, ...extras,
|
||||
}
|
||||
}
|
||||
|
||||
const perActivityActual: SimulationResult['perActivity'] = [
|
||||
{
|
||||
activityId: 'a1', bpmnElementId: 'task_recv', activityName: 'Recibir solicitud',
|
||||
expectedDirectCost: 200, expectedIndirectCost: 40, expectedTotalCost: 240,
|
||||
percentOfTotal: 60, executionProbability: 1.0, expectedExecutions: 1.0,
|
||||
executionTimeMinutes: 60, resourceCostBreakdown: [],
|
||||
},
|
||||
{
|
||||
activityId: 'a2', bpmnElementId: 'task_valid', activityName: 'Validar datos',
|
||||
expectedDirectCost: 100, expectedIndirectCost: 20, expectedTotalCost: 120,
|
||||
percentOfTotal: 40, executionProbability: 0.8, expectedExecutions: 0.8,
|
||||
executionTimeMinutes: 30, resourceCostBreakdown: [],
|
||||
},
|
||||
]
|
||||
|
||||
const perActivityAutomated: SimulationResult['perActivity'] = [
|
||||
{
|
||||
activityId: 'a1', bpmnElementId: 'task_recv', activityName: 'Recibir solicitud',
|
||||
expectedDirectCost: 20, expectedIndirectCost: 4, expectedTotalCost: 24,
|
||||
percentOfTotal: 40, executionProbability: 1.0, expectedExecutions: 1.0,
|
||||
executionTimeMinutes: 5, resourceCostBreakdown: [],
|
||||
},
|
||||
{
|
||||
activityId: 'a2', bpmnElementId: 'task_valid', activityName: 'Validar datos',
|
||||
expectedDirectCost: 100, expectedIndirectCost: 20, expectedTotalCost: 120,
|
||||
percentOfTotal: 60, executionProbability: 0.8, expectedExecutions: 0.8,
|
||||
executionTimeMinutes: 30, resourceCostBreakdown: [],
|
||||
},
|
||||
]
|
||||
|
||||
const mockSimulation: Simulation = {
|
||||
id: 'sim1', processId: 'p1',
|
||||
executedAt: new Date('2026-05-13T10:00:00Z').getTime(),
|
||||
result: {
|
||||
totalCost: 360, totalDirectCost: 300, totalIndirectCost: 60, totalTimeMinutes: 84,
|
||||
perActivity: perActivityActual, perResource: [], warnings: [],
|
||||
},
|
||||
resultAutomated: {
|
||||
totalCost: 144, totalDirectCost: 120, totalIndirectCost: 24, totalTimeMinutes: 8,
|
||||
perActivity: perActivityAutomated, perResource: [], warnings: [],
|
||||
},
|
||||
}
|
||||
|
||||
const mockActivities: Activity[] = [
|
||||
{
|
||||
id: 'a1', processId: 'p1', bpmnElementId: 'task_recv', name: 'Recibir solicitud', type: 'task',
|
||||
directCostFixed: 200, executionTimeMinutes: 60, assignedResources: [],
|
||||
automatable: true, automatedCostFixed: 20, automatedTimeMinutes: 5,
|
||||
},
|
||||
{
|
||||
id: 'a2', processId: 'p1', bpmnElementId: 'task_valid', name: 'Validar datos', type: 'task',
|
||||
directCostFixed: 100, executionTimeMinutes: 30, assignedResources: [],
|
||||
automatable: false, automatedCostFixed: 0, automatedTimeMinutes: 0,
|
||||
},
|
||||
]
|
||||
|
||||
// ─── CSV ROI: estructura de columnas ──────────────────────────────────────────
|
||||
|
||||
describe('CSV tab=roi — 16 columnas', () => {
|
||||
it('tiene exactamente 16 columnas en el header', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
const csvNoBom = csv.startsWith('') ? csv.slice(1) : csv
|
||||
const headerLine = csvNoBom.split('\r\n').find((l) => !l.startsWith('#') && l.trim())!
|
||||
// Papa.unparse envuelve en comillas — contar separadores + 1
|
||||
const cols = headerLine.split('","').length
|
||||
expect(cols).toBe(16)
|
||||
})
|
||||
|
||||
it('tiene los headers esperados (muestra)', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
expect(csv).toContain('ID BPMN')
|
||||
expect(csv).toContain('Automatizable')
|
||||
expect(csv).toContain('Costo actual total')
|
||||
expect(csv).toContain('Costo automatizado total')
|
||||
expect(csv).toContain('Ahorro')
|
||||
expect(csv).toContain('Tiempo automatizado')
|
||||
expect(csv).toContain('Recursos asignados')
|
||||
})
|
||||
})
|
||||
|
||||
describe('CSV tab=roi — metadata extendida', () => {
|
||||
it('contiene campos de ROI en la metadata', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
expect(csv).toContain('# Ahorro por ejecución')
|
||||
expect(csv).toContain('# Ahorro anual')
|
||||
expect(csv).toContain('# Payback (meses)')
|
||||
expect(csv).toContain('# ROI anualizado')
|
||||
expect(csv).toContain('# Frecuencia anual')
|
||||
expect(csv).toContain('# Horizonte de análisis')
|
||||
expect(csv).toContain('# Inversión en automatización')
|
||||
})
|
||||
|
||||
it('costo total actual y automatizado están en la metadata', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
expect(csv).toContain('# Costo total actual')
|
||||
expect(csv).toContain('# Costo total automatizado')
|
||||
// Valores concretos del fixture: 360 y 144
|
||||
expect(csv).toContain('360.00')
|
||||
expect(csv).toContain('144.00')
|
||||
})
|
||||
|
||||
it('metadata incluye el horizonte y frecuencia configurados', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
expect(csv).toContain('# Frecuencia anual: 1200')
|
||||
expect(csv).toContain('# Horizonte de análisis: 3 años')
|
||||
})
|
||||
})
|
||||
|
||||
describe('CSV tab=roi — datos de actividades', () => {
|
||||
it('actividad automatable tiene "true" en la columna Automatizable', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
// task_recv es automatable=true
|
||||
expect(csv).toContain('"true"')
|
||||
})
|
||||
|
||||
it('actividad NO automatable tiene "false" en la columna Automatizable', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
expect(csv).toContain('"false"')
|
||||
})
|
||||
|
||||
it('ahorro de task_recv: 240 - 24 = 216 aparece en los datos', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
expect(csv).toContain('216.00')
|
||||
})
|
||||
|
||||
it('actividad no automatable tiene ahorro 0 (costos iguales)', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
// task_valid: 120 - 120 = 0
|
||||
expect(csv).toContain('0.00')
|
||||
})
|
||||
|
||||
it('N+1 filas (N actividades + 1 header)', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
const csvNoBom = csv.startsWith('') ? csv.slice(1) : csv
|
||||
const dataLines = csvNoBom.split('\r\n').filter((l) => l.trim() && !l.startsWith('#'))
|
||||
expect(dataLines).toHaveLength(perActivityActual.length + 1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('CSV tab=roi — separadores y BOM', () => {
|
||||
it('BOM UTF-8 presente', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
expect(csv.charCodeAt(0)).toBe(0xFEFF)
|
||||
})
|
||||
|
||||
it('USD: separador coma', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess({ currency: 'USD' }), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
const csvNoBom = csv.startsWith('') ? csv.slice(1) : csv
|
||||
const headerLine = csvNoBom.split('\r\n').find((l) => !l.startsWith('#') && l.trim())!
|
||||
expect(headerLine).toContain('","')
|
||||
})
|
||||
|
||||
it('PYG: separador punto y coma', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess({ currency: 'PYG' }), simulation: mockSimulation, resources: [], tab: 'roi', activities: mockActivities })
|
||||
const csvNoBom = csv.startsWith('') ? csv.slice(1) : csv
|
||||
const headerLine = csvNoBom.split('\r\n').find((l) => !l.startsWith('#') && l.trim())!
|
||||
expect(headerLine).toContain('";"')
|
||||
})
|
||||
})
|
||||
|
||||
// ─── CSV tab=automatizado ─────────────────────────────────────────────────────
|
||||
|
||||
describe('CSV tab=automatizado', () => {
|
||||
it('usa los datos del escenario automatizado (totalCost=144)', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'automatizado' })
|
||||
expect(csv).toContain('# Escenario: Automatizado')
|
||||
expect(csv).toContain('144.00')
|
||||
})
|
||||
|
||||
it('tiene 10 columnas (mismo formato que actual)', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'automatizado' })
|
||||
const csvNoBom = csv.startsWith('') ? csv.slice(1) : csv
|
||||
const headerLine = csvNoBom.split('\r\n').find((l) => !l.startsWith('#') && l.trim())!
|
||||
const cols = headerLine.split('","').length
|
||||
expect(cols).toBe(10)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── CSV tab=actual — regresión ───────────────────────────────────────────────
|
||||
|
||||
describe('CSV tab=actual (regresión)', () => {
|
||||
it('tab=actual funciona igual que antes (escenario actual, 10 cols)', () => {
|
||||
const csv = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'actual' })
|
||||
expect(csv).toContain('# Escenario: Actual')
|
||||
expect(csv).toContain('360.00')
|
||||
const csvNoBom = csv.startsWith('') ? csv.slice(1) : csv
|
||||
const headerLine = csvNoBom.split('\r\n').find((l) => !l.startsWith('#') && l.trim())!
|
||||
expect(headerLine.split('","').length).toBe(10)
|
||||
})
|
||||
|
||||
it('tab=undefined → igual que tab=actual', () => {
|
||||
const csvDefault = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [] })
|
||||
const csvActual = generateCsvContent({ process: makeProcess(), simulation: mockSimulation, resources: [], tab: 'actual' })
|
||||
expect(csvDefault).toBe(csvActual)
|
||||
})
|
||||
})
|
||||
@@ -8,6 +8,7 @@ function makeProcess(currency: string, extras: Partial<Process> = {}): Process {
|
||||
return {
|
||||
id: 'p1', name: 'Proceso de Ventas', clientName: 'Empresa ABC',
|
||||
bpmnXml: '', currency, overheadPercentage: 0.2,
|
||||
annualFrequency: 1000, analysisHorizonYears: 3, automationInvestment: 0,
|
||||
createdAt: 0, updatedAt: 0, ...extras,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,6 +26,7 @@ function buildInput(xml: string, directCost: number): SimulationInput {
|
||||
actEls.map((el) => [el.bpmnElementId, {
|
||||
id: uuidv4(), processId, bpmnElementId: el.bpmnElementId, name: el.name,
|
||||
type: el.type, directCostFixed: directCost, executionTimeMinutes: 30, assignedResources: [],
|
||||
automatable: false, automatedCostFixed: 0, automatedTimeMinutes: 0,
|
||||
}])
|
||||
)
|
||||
|
||||
@@ -63,6 +64,7 @@ describe('Medición de tamaños de CSV — 3 sample BPMNs', () => {
|
||||
const process: Process = {
|
||||
id: 'p1', name: bpmn.name, clientName: bpmn.client,
|
||||
bpmnXml: xml, currency: 'USD', overheadPercentage: 0.2,
|
||||
annualFrequency: 1000, analysisHorizonYears: 3, automationInvestment: 0,
|
||||
createdAt: 0, updatedAt: 0,
|
||||
}
|
||||
|
||||
|
||||
206
tests/lib/export/pdf-export-roi.test.ts
Normal file
206
tests/lib/export/pdf-export-roi.test.ts
Normal file
@@ -0,0 +1,206 @@
|
||||
/**
|
||||
* Tests del export PDF para el tab "Comparación + ROI" (Sprint 1 — Etapa 4).
|
||||
* También verifica sufijos de nombre de archivo para los 3 tabs.
|
||||
* jsPDF y autotable se mockean.
|
||||
*/
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
|
||||
// ─── Mock de jsPDF ────────────────────────────────────────────────────────────
|
||||
|
||||
const mockDoc = {
|
||||
setProperties: vi.fn(),
|
||||
setFont: vi.fn(),
|
||||
setFontSize: vi.fn(),
|
||||
setTextColor: vi.fn(),
|
||||
setFillColor: vi.fn(),
|
||||
setDrawColor: vi.fn(),
|
||||
setLineWidth: vi.fn(),
|
||||
text: vi.fn(),
|
||||
rect: vi.fn(),
|
||||
roundedRect: vi.fn(),
|
||||
line: vi.fn(),
|
||||
addImage: vi.fn(),
|
||||
addPage: vi.fn(),
|
||||
setPage: vi.fn(),
|
||||
save: vi.fn(),
|
||||
splitTextToSize: vi.fn().mockImplementation((text: string) => [text]),
|
||||
internal: { getNumberOfPages: vi.fn().mockReturnValue(4) },
|
||||
}
|
||||
|
||||
vi.mock('jspdf', () => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
function MockJsPDF(this: any) { return mockDoc }
|
||||
return { jsPDF: MockJsPDF }
|
||||
})
|
||||
|
||||
const mockAutoTable = vi.fn()
|
||||
vi.mock('jspdf-autotable', () => ({ default: mockAutoTable }))
|
||||
|
||||
// ─── Fixtures ─────────────────────────────────────────────────────────────────
|
||||
|
||||
import type { Process, Simulation, Activity } from '@/domain/types'
|
||||
|
||||
const mockProcess: Process = {
|
||||
id: 'p1', name: 'Proceso de Aprobación de Crédito', clientName: 'Banco XYZ',
|
||||
bpmnXml: '', currency: 'USD', overheadPercentage: 0.2,
|
||||
annualFrequency: 1200, analysisHorizonYears: 3, automationInvestment: 50_000,
|
||||
createdAt: 0, updatedAt: 0,
|
||||
}
|
||||
|
||||
const perActivityActual = [
|
||||
{
|
||||
activityId: 'a1', bpmnElementId: 'task_recv', activityName: 'Recibir solicitud',
|
||||
expectedDirectCost: 200, expectedIndirectCost: 40, expectedTotalCost: 240,
|
||||
percentOfTotal: 60, executionProbability: 1.0, expectedExecutions: 1.0,
|
||||
executionTimeMinutes: 60, resourceCostBreakdown: [],
|
||||
},
|
||||
{
|
||||
activityId: 'a2', bpmnElementId: 'task_valid', activityName: 'Validar datos',
|
||||
expectedDirectCost: 100, expectedIndirectCost: 20, expectedTotalCost: 120,
|
||||
percentOfTotal: 40, executionProbability: 0.8, expectedExecutions: 0.8,
|
||||
executionTimeMinutes: 30, resourceCostBreakdown: [],
|
||||
},
|
||||
]
|
||||
|
||||
const perActivityAutomated = [
|
||||
{
|
||||
activityId: 'a1', bpmnElementId: 'task_recv', activityName: 'Recibir solicitud',
|
||||
expectedDirectCost: 20, expectedIndirectCost: 4, expectedTotalCost: 24,
|
||||
percentOfTotal: 40, executionProbability: 1.0, expectedExecutions: 1.0,
|
||||
executionTimeMinutes: 5, resourceCostBreakdown: [],
|
||||
},
|
||||
{
|
||||
activityId: 'a2', bpmnElementId: 'task_valid', activityName: 'Validar datos',
|
||||
expectedDirectCost: 100, expectedIndirectCost: 20, expectedTotalCost: 120,
|
||||
percentOfTotal: 60, executionProbability: 0.8, expectedExecutions: 0.8,
|
||||
executionTimeMinutes: 30, resourceCostBreakdown: [],
|
||||
},
|
||||
]
|
||||
|
||||
const mockSimulation: Simulation = {
|
||||
id: 'sim1', processId: 'p1',
|
||||
executedAt: new Date('2026-05-13T10:00:00Z').getTime(),
|
||||
result: {
|
||||
totalCost: 360, totalDirectCost: 300, totalIndirectCost: 60, totalTimeMinutes: 84,
|
||||
perActivity: perActivityActual, perResource: [], warnings: [],
|
||||
},
|
||||
resultAutomated: {
|
||||
totalCost: 144, totalDirectCost: 120, totalIndirectCost: 24, totalTimeMinutes: 8,
|
||||
perActivity: perActivityAutomated, perResource: [], warnings: [],
|
||||
},
|
||||
}
|
||||
|
||||
const mockActivities: Activity[] = [
|
||||
{
|
||||
id: 'a1', processId: 'p1', bpmnElementId: 'task_recv', name: 'Recibir solicitud', type: 'task',
|
||||
directCostFixed: 200, executionTimeMinutes: 60, assignedResources: [],
|
||||
automatable: true, automatedCostFixed: 20, automatedTimeMinutes: 5,
|
||||
},
|
||||
{
|
||||
id: 'a2', processId: 'p1', bpmnElementId: 'task_valid', name: 'Validar datos', type: 'task',
|
||||
directCostFixed: 100, executionTimeMinutes: 30, assignedResources: [],
|
||||
automatable: false, automatedCostFixed: 0, automatedTimeMinutes: 0,
|
||||
},
|
||||
]
|
||||
|
||||
// ─── Tests ────────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('exportToPdf — tab=roi', () => {
|
||||
beforeEach(() => { vi.clearAllMocks() })
|
||||
|
||||
it('no lanza error con tab=roi y parámetros válidos', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await expect(
|
||||
exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: null, tab: 'roi', activities: mockActivities })
|
||||
).resolves.not.toThrow()
|
||||
})
|
||||
|
||||
it('tab=roi: llama a addPage al menos 3 veces (4 páginas)', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: null, tab: 'roi', activities: mockActivities })
|
||||
expect(mockDoc.addPage.mock.calls.length).toBeGreaterThanOrEqual(3)
|
||||
})
|
||||
|
||||
it('tab=roi: autoTable llamado con 6 columnas en el head (tabla comparativa)', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: null, tab: 'roi', activities: mockActivities })
|
||||
// autoTable puede llamarse múltiples veces; la tabla de comparación tiene 6 cols en head
|
||||
const roiTableCall = mockAutoTable.mock.calls.find((call) => {
|
||||
const head = call[1]?.head
|
||||
return Array.isArray(head) && Array.isArray(head[0]) && head[0].length === 6
|
||||
})
|
||||
expect(roiTableCall).toBeDefined()
|
||||
})
|
||||
|
||||
it('tab=roi: nombre de archivo termina en _roi.pdf', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: null, tab: 'roi', activities: mockActivities })
|
||||
const saveName = mockDoc.save.mock.calls[0][0] as string
|
||||
expect(saveName).toMatch(/_roi\.pdf$/)
|
||||
})
|
||||
|
||||
it('tab=roi: setProperties incluye "retorno de inversión" en subject', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: null, tab: 'roi', activities: mockActivities })
|
||||
expect(mockDoc.setProperties).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ subject: expect.stringContaining('retorno') })
|
||||
)
|
||||
})
|
||||
|
||||
it('tab=roi: NO llama a addImage (el tab ROI no tiene heatmap)', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
const fakeDataUrl = 'data:image/jpeg;base64,/9j/fake'
|
||||
await exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: fakeDataUrl, tab: 'roi', activities: mockActivities })
|
||||
// El ROI PDF no embebe heatmap aunque se pase imageData
|
||||
expect(mockDoc.addImage).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('tab=roi sin resultAutomated: no lanza error (usa result como fallback)', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
const simSinAuto = { ...mockSimulation, resultAutomated: undefined }
|
||||
await expect(
|
||||
exportToPdf({ process: mockProcess, simulation: simSinAuto, resources: [], heatmapImageData: null, tab: 'roi', activities: mockActivities })
|
||||
).resolves.not.toThrow()
|
||||
})
|
||||
})
|
||||
|
||||
describe('exportToPdf — tab=actual', () => {
|
||||
beforeEach(() => { vi.clearAllMocks() })
|
||||
|
||||
it('tab=actual: nombre de archivo termina en _actual.pdf', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: null, tab: 'actual' })
|
||||
expect(mockDoc.save.mock.calls[0][0]).toMatch(/_actual\.pdf$/)
|
||||
})
|
||||
|
||||
it('tab=actual: contiene el proceso en el título (setProperties)', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: null, tab: 'actual' })
|
||||
expect(mockDoc.setProperties).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ title: expect.stringContaining('Proceso de Aprobación de Crédito') })
|
||||
)
|
||||
})
|
||||
|
||||
it('tab=undefined (default): se comporta como actual', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: null })
|
||||
expect(mockDoc.save.mock.calls[0][0]).toMatch(/_actual\.pdf$/)
|
||||
})
|
||||
})
|
||||
|
||||
describe('exportToPdf — tab=automatizado', () => {
|
||||
beforeEach(() => { vi.clearAllMocks() })
|
||||
|
||||
it('tab=automatizado: nombre de archivo termina en _automatizado.pdf', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: null, tab: 'automatizado' })
|
||||
expect(mockDoc.save.mock.calls[0][0]).toMatch(/_automatizado\.pdf$/)
|
||||
})
|
||||
|
||||
it('tab=automatizado: no lanza error', async () => {
|
||||
const { exportToPdf } = await import('@/lib/export/pdf-export')
|
||||
await expect(
|
||||
exportToPdf({ process: mockProcess, simulation: mockSimulation, resources: [], heatmapImageData: null, tab: 'automatizado' })
|
||||
).resolves.not.toThrow()
|
||||
})
|
||||
})
|
||||
@@ -46,6 +46,7 @@ const mockProcess: Process = {
|
||||
clientName: 'Banco XYZ',
|
||||
bpmnXml: '', currency: 'USD',
|
||||
overheadPercentage: 0.2,
|
||||
annualFrequency: 1000, analysisHorizonYears: 3, automationInvestment: 0,
|
||||
createdAt: 0, updatedAt: 0,
|
||||
}
|
||||
|
||||
|
||||
67
tests/lib/format-payback.test.ts
Normal file
67
tests/lib/format-payback.test.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* Tests de formatPayback — Sprint 1.5 Etapa 2.
|
||||
*
|
||||
* 7 casos base + 5 edge cases = 12 tests.
|
||||
* Regla: un payback de "0.0 meses" (como mostraba el sistema con costos
|
||||
* artificialmente bajos) es confuso. formatPayback resuelve esto con
|
||||
* una escala legible para el consultor y el cliente.
|
||||
*/
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { formatPayback } from '../../src/lib/format'
|
||||
|
||||
describe('formatPayback', () => {
|
||||
// Casos base
|
||||
it('0 → "Inmediato"', () => {
|
||||
expect(formatPayback(0)).toBe('Inmediato')
|
||||
})
|
||||
|
||||
it('0.05 → "< 1 día"', () => {
|
||||
expect(formatPayback(0.05)).toBe('< 1 día')
|
||||
})
|
||||
|
||||
it('0.5 → "< 1 mes (0.50 meses)"', () => {
|
||||
expect(formatPayback(0.5)).toBe('< 1 mes (0.50 meses)')
|
||||
})
|
||||
|
||||
it('6 → "6.0 meses"', () => {
|
||||
expect(formatPayback(6)).toBe('6.0 meses')
|
||||
})
|
||||
|
||||
it('15 → "15.0 meses (~1.3 años)"', () => {
|
||||
expect(formatPayback(15)).toBe('15.0 meses (~1.3 años)')
|
||||
})
|
||||
|
||||
it('30 → "2.5 años"', () => {
|
||||
expect(formatPayback(30)).toBe('2.5 años')
|
||||
})
|
||||
|
||||
it('Infinity → "No recupera en horizonte"', () => {
|
||||
expect(formatPayback(Infinity)).toBe('No recupera en horizonte')
|
||||
})
|
||||
|
||||
// Edge cases
|
||||
it('-1 → "Sin payback (costo aumenta)"', () => {
|
||||
// payback negativo: costo automatizado supera al actual
|
||||
expect(formatPayback(-1)).toBe('Sin payback (costo aumenta)')
|
||||
})
|
||||
|
||||
it('-100 → "Sin payback (costo aumenta)"', () => {
|
||||
// negativo grande: mismo comportamiento
|
||||
expect(formatPayback(-100)).toBe('Sin payback (costo aumenta)')
|
||||
})
|
||||
|
||||
it('NaN → "No recupera en horizonte"', () => {
|
||||
// NaN cae en el primer guard
|
||||
expect(formatPayback(NaN)).toBe('No recupera en horizonte')
|
||||
})
|
||||
|
||||
it('11.95 → "11.9 meses"', () => {
|
||||
// verificar que el borde con 12 no salta a "1.0 años" prematuramente
|
||||
expect(formatPayback(11.95)).toBe('11.9 meses')
|
||||
})
|
||||
|
||||
it('12.0 → "12.0 meses (~1.0 años)"', () => {
|
||||
// exactamente en el umbral
|
||||
expect(formatPayback(12.0)).toBe('12.0 meses (~1.0 años)')
|
||||
})
|
||||
})
|
||||
371
tests/proceso_carga_facturas.bpmn
Normal file
371
tests/proceso_carga_facturas.bpmn
Normal file
@@ -0,0 +1,371 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
|
||||
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
|
||||
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
|
||||
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
id="Definitions_CargaFacturasSAP"
|
||||
targetNamespace="http://inquality.com/bpmn/cargafacturas">
|
||||
<bpmn:collaboration id="Collaboration_1">
|
||||
<bpmn:participant id="Participant_IKData" name="IKData (OCR)" processRef="Process_IKData"/>
|
||||
<bpmn:participant id="Participant_Robot" name="Robot RPA (RocketBot)" processRef="Process_Robot"/>
|
||||
<bpmn:participant id="Participant_SAP" name="SAP Business One" processRef="Process_SAP"/>
|
||||
<bpmn:participant id="Participant_Excepcion" name="Bandeja manual / Operador humano" processRef="Process_Excepcion"/>
|
||||
<bpmn:messageFlow id="MF_1" sourceRef="Task_GenerarPayload" targetRef="StartEvent_Robot"/>
|
||||
<bpmn:messageFlow id="MF_2" sourceRef="Task_GuardarFactura" targetRef="Task_RecibirFactura"/>
|
||||
<bpmn:messageFlow id="MF_3" sourceRef="Task_DerivarBandeja" targetRef="Task_RevisionManual"/>
|
||||
</bpmn:collaboration>
|
||||
<bpmn:process id="Process_IKData" name="IKData (OCR)" isExecutable="false">
|
||||
<bpmn:startEvent id="StartEvent_IKData" name="Factura escaneada">
|
||||
<bpmn:outgoing>Flow_IK_1</bpmn:outgoing>
|
||||
</bpmn:startEvent>
|
||||
<bpmn:task id="Task_OCR" name="Procesar OCR sobre factura">
|
||||
<bpmn:incoming>Flow_IK_1</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_IK_2</bpmn:outgoing>
|
||||
</bpmn:task>
|
||||
<bpmn:task id="Task_GenerarPayload" name="Generar payload JSON estructurado">
|
||||
<bpmn:incoming>Flow_IK_2</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_IK_3</bpmn:outgoing>
|
||||
</bpmn:task>
|
||||
<bpmn:endEvent id="EndEvent_IKData" name="Payload disponible">
|
||||
<bpmn:incoming>Flow_IK_3</bpmn:incoming>
|
||||
</bpmn:endEvent>
|
||||
<bpmn:sequenceFlow id="Flow_IK_1" sourceRef="StartEvent_IKData" targetRef="Task_OCR"/>
|
||||
<bpmn:sequenceFlow id="Flow_IK_2" sourceRef="Task_OCR" targetRef="Task_GenerarPayload"/>
|
||||
<bpmn:sequenceFlow id="Flow_IK_3" sourceRef="Task_GenerarPayload" targetRef="EndEvent_IKData"/>
|
||||
</bpmn:process>
|
||||
<bpmn:process id="Process_Robot" name="Robot RPA (RocketBot)" isExecutable="true">
|
||||
<bpmn:startEvent id="StartEvent_Robot" name="Recibe payload">
|
||||
<bpmn:outgoing>Flow_R_1</bpmn:outgoing>
|
||||
<bpmn:messageEventDefinition id="MED_1"/>
|
||||
</bpmn:startEvent>
|
||||
<bpmn:serviceTask id="Task_LeerPayload" name="Leer y validar payload (RPA-001 a RPA-003)">
|
||||
<bpmn:incoming>Flow_R_1</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_2</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:exclusiveGateway id="Gateway_PayloadValido" name="¿Payload válido?">
|
||||
<bpmn:incoming>Flow_R_2</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_3_Si</bpmn:outgoing>
|
||||
<bpmn:outgoing>Flow_R_3_No</bpmn:outgoing>
|
||||
</bpmn:exclusiveGateway>
|
||||
<bpmn:serviceTask id="Task_AbrirSAP" name="Abrir y navegar SAP B1 a Factura proveedores (RPA-004, RPA-005)">
|
||||
<bpmn:incoming>Flow_R_3_Si</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_4</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:serviceTask id="Task_CargarCabecera" name="Cargar cabecera: proveedor, fechas, folio (RPA-006 a RPA-009)">
|
||||
<bpmn:incoming>Flow_R_4</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_5</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:exclusiveGateway id="Gateway_ProveedorExiste" name="¿Proveedor existe en SAP?">
|
||||
<bpmn:incoming>Flow_R_5</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_6_Si</bpmn:outgoing>
|
||||
<bpmn:outgoing>Flow_R_6_No</bpmn:outgoing>
|
||||
</bpmn:exclusiveGateway>
|
||||
<bpmn:serviceTask id="Task_CargarLinea" name="Cargar línea de servicio: cuenta, descripción, sucursal, depto, U.negocio, región, IVA, monto (RPA-010 a RPA-018)">
|
||||
<bpmn:incoming>Flow_R_6_Si</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_7</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:exclusiveGateway id="Gateway_CalculoOK" name="¿SAP recalculó totales OK?">
|
||||
<bpmn:incoming>Flow_R_7</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_8_Si</bpmn:outgoing>
|
||||
<bpmn:outgoing>Flow_R_8_No</bpmn:outgoing>
|
||||
</bpmn:exclusiveGateway>
|
||||
<bpmn:exclusiveGateway id="Gateway_TimbradoExiste" name="¿Timbrado vigente cargado?">
|
||||
<bpmn:incoming>Flow_R_8_Si</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_9_Si</bpmn:outgoing>
|
||||
<bpmn:outgoing>Flow_R_9_No</bpmn:outgoing>
|
||||
</bpmn:exclusiveGateway>
|
||||
<bpmn:subProcess id="SubProcess_Timbrado" name="Sub-proceso: Crear timbrado nuevo (RPA-021 a RPA-025)">
|
||||
<bpmn:incoming>Flow_R_9_No</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_10</bpmn:outgoing>
|
||||
<bpmn:startEvent id="SubStart_Timbrado">
|
||||
<bpmn:outgoing>SubFlow_T_1</bpmn:outgoing>
|
||||
</bpmn:startEvent>
|
||||
<bpmn:serviceTask id="SubTask_NavegarTimbrado" name="Navegar a Creación de Timbrado y añadir línea">
|
||||
<bpmn:incoming>SubFlow_T_1</bpmn:incoming>
|
||||
<bpmn:outgoing>SubFlow_T_2</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:serviceTask id="SubTask_CompletarTimbrado" name="Completar campos del timbrado y guardar">
|
||||
<bpmn:incoming>SubFlow_T_2</bpmn:incoming>
|
||||
<bpmn:outgoing>SubFlow_T_3</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:endEvent id="SubEnd_Timbrado">
|
||||
<bpmn:incoming>SubFlow_T_3</bpmn:incoming>
|
||||
</bpmn:endEvent>
|
||||
<bpmn:sequenceFlow id="SubFlow_T_1" sourceRef="SubStart_Timbrado" targetRef="SubTask_NavegarTimbrado"/>
|
||||
<bpmn:sequenceFlow id="SubFlow_T_2" sourceRef="SubTask_NavegarTimbrado" targetRef="SubTask_CompletarTimbrado"/>
|
||||
<bpmn:sequenceFlow id="SubFlow_T_3" sourceRef="SubTask_CompletarTimbrado" targetRef="SubEnd_Timbrado"/>
|
||||
</bpmn:subProcess>
|
||||
<bpmn:serviceTask id="Task_CargarCtrlTimbrado" name="Ingresar control de timbrado y autocompletar (RPA-026, RPA-028)">
|
||||
<bpmn:incoming>Flow_R_9_Si</bpmn:incoming>
|
||||
<bpmn:incoming>Flow_R_10</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_11</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:serviceTask id="Task_ValidacionFinal" name="Validar coincidencia IVA, número y monto (RPA-029)">
|
||||
<bpmn:incoming>Flow_R_11</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_12</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:exclusiveGateway id="Gateway_ValidacionFinal" name="¿Datos coinciden?">
|
||||
<bpmn:incoming>Flow_R_12</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_13_Si</bpmn:outgoing>
|
||||
<bpmn:outgoing>Flow_R_13_No</bpmn:outgoing>
|
||||
</bpmn:exclusiveGateway>
|
||||
<bpmn:serviceTask id="Task_GuardarFactura" name="Guardar factura: Agregar y nuevo (RPA-030, RPA-031)">
|
||||
<bpmn:incoming>Flow_R_13_Si</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_14</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:exclusiveGateway id="Gateway_GuardadoOK" name="¿Guardado confirmado?">
|
||||
<bpmn:incoming>Flow_R_14</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_15_Si</bpmn:outgoing>
|
||||
<bpmn:outgoing>Flow_R_15_No</bpmn:outgoing>
|
||||
</bpmn:exclusiveGateway>
|
||||
<bpmn:serviceTask id="Task_LogYNotificar" name="Registrar log + mover archivo + notificar (RPA-032 a RPA-034)">
|
||||
<bpmn:incoming>Flow_R_15_Si</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_16</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:endEvent id="EndEvent_OK" name="Factura cargada exitosamente">
|
||||
<bpmn:incoming>Flow_R_16</bpmn:incoming>
|
||||
</bpmn:endEvent>
|
||||
<bpmn:serviceTask id="Task_DerivarBandeja" name="Derivar a bandeja manual con motivo (RPA-035, RPA-036)">
|
||||
<bpmn:incoming>Flow_R_3_No</bpmn:incoming>
|
||||
<bpmn:incoming>Flow_R_6_No</bpmn:incoming>
|
||||
<bpmn:incoming>Flow_R_8_No</bpmn:incoming>
|
||||
<bpmn:incoming>Flow_R_13_No</bpmn:incoming>
|
||||
<bpmn:incoming>Flow_R_15_No</bpmn:incoming>
|
||||
<bpmn:outgoing>Flow_R_17</bpmn:outgoing>
|
||||
</bpmn:serviceTask>
|
||||
<bpmn:endEvent id="EndEvent_Excepcion" name="Derivado a operador humano">
|
||||
<bpmn:incoming>Flow_R_17</bpmn:incoming>
|
||||
</bpmn:endEvent>
|
||||
<bpmn:sequenceFlow id="Flow_R_1" sourceRef="StartEvent_Robot" targetRef="Task_LeerPayload"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_2" sourceRef="Task_LeerPayload" targetRef="Gateway_PayloadValido"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_3_Si" name="Sí" sourceRef="Gateway_PayloadValido" targetRef="Task_AbrirSAP"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_3_No" name="No" sourceRef="Gateway_PayloadValido" targetRef="Task_DerivarBandeja"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_4" sourceRef="Task_AbrirSAP" targetRef="Task_CargarCabecera"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_5" sourceRef="Task_CargarCabecera" targetRef="Gateway_ProveedorExiste"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_6_Si" name="Sí" sourceRef="Gateway_ProveedorExiste" targetRef="Task_CargarLinea"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_6_No" name="No" sourceRef="Gateway_ProveedorExiste" targetRef="Task_DerivarBandeja"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_7" sourceRef="Task_CargarLinea" targetRef="Gateway_CalculoOK"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_8_Si" name="Sí" sourceRef="Gateway_CalculoOK" targetRef="Gateway_TimbradoExiste"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_8_No" name="No" sourceRef="Gateway_CalculoOK" targetRef="Task_DerivarBandeja"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_9_Si" name="Sí" sourceRef="Gateway_TimbradoExiste" targetRef="Task_CargarCtrlTimbrado"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_9_No" name="No" sourceRef="Gateway_TimbradoExiste" targetRef="SubProcess_Timbrado"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_10" sourceRef="SubProcess_Timbrado" targetRef="Task_CargarCtrlTimbrado"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_11" sourceRef="Task_CargarCtrlTimbrado" targetRef="Task_ValidacionFinal"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_12" sourceRef="Task_ValidacionFinal" targetRef="Gateway_ValidacionFinal"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_13_Si" name="Sí" sourceRef="Gateway_ValidacionFinal" targetRef="Task_GuardarFactura"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_13_No" name="No" sourceRef="Gateway_ValidacionFinal" targetRef="Task_DerivarBandeja"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_14" sourceRef="Task_GuardarFactura" targetRef="Gateway_GuardadoOK"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_15_Si" name="Sí" sourceRef="Gateway_GuardadoOK" targetRef="Task_LogYNotificar"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_15_No" name="No" sourceRef="Gateway_GuardadoOK" targetRef="Task_DerivarBandeja"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_16" sourceRef="Task_LogYNotificar" targetRef="EndEvent_OK"/>
|
||||
<bpmn:sequenceFlow id="Flow_R_17" sourceRef="Task_DerivarBandeja" targetRef="EndEvent_Excepcion"/>
|
||||
</bpmn:process>
|
||||
<bpmn:process id="Process_SAP" name="SAP Business One" isExecutable="false">
|
||||
<bpmn:task id="Task_RecibirFactura" name="Persistir factura en módulo de Compras"/>
|
||||
</bpmn:process>
|
||||
<bpmn:process id="Process_Excepcion" name="Bandeja manual" isExecutable="false">
|
||||
<bpmn:userTask id="Task_RevisionManual" name="Operador humano revisa y completa caso"/>
|
||||
</bpmn:process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1">
|
||||
<bpmndi:BPMNShape id="Participant_IKData_di" bpmnElement="Participant_IKData" isHorizontal="true">
|
||||
<dc:Bounds x="100" y="40" width="900" height="120"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="StartEvent_IKData_di" bpmnElement="StartEvent_IKData">
|
||||
<dc:Bounds x="160" y="82" width="36" height="36"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="145" y="125" width="70" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_OCR_di" bpmnElement="Task_OCR">
|
||||
<dc:Bounds x="260" y="60" width="120" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_GenerarPayload_di" bpmnElement="Task_GenerarPayload">
|
||||
<dc:Bounds x="440" y="60" width="140" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="EndEvent_IKData_di" bpmnElement="EndEvent_IKData">
|
||||
<dc:Bounds x="640" y="82" width="36" height="36"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="620" y="125" width="80" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNEdge id="Flow_IK_1_di" bpmnElement="Flow_IK_1">
|
||||
<di:waypoint x="196" y="100"/><di:waypoint x="260" y="100"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_IK_2_di" bpmnElement="Flow_IK_2">
|
||||
<di:waypoint x="380" y="100"/><di:waypoint x="440" y="100"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_IK_3_di" bpmnElement="Flow_IK_3">
|
||||
<di:waypoint x="580" y="100"/><di:waypoint x="640" y="100"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="Participant_Robot_di" bpmnElement="Participant_Robot" isHorizontal="true">
|
||||
<dc:Bounds x="100" y="180" width="2400" height="320"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="StartEvent_Robot_di" bpmnElement="StartEvent_Robot">
|
||||
<dc:Bounds x="160" y="322" width="36" height="36"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="145" y="365" width="70" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_LeerPayload_di" bpmnElement="Task_LeerPayload">
|
||||
<dc:Bounds x="260" y="300" width="160" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Gateway_PayloadValido_di" bpmnElement="Gateway_PayloadValido" isMarkerVisible="true">
|
||||
<dc:Bounds x="475" y="315" width="50" height="50"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="465" y="280" width="70" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_AbrirSAP_di" bpmnElement="Task_AbrirSAP">
|
||||
<dc:Bounds x="580" y="300" width="160" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_CargarCabecera_di" bpmnElement="Task_CargarCabecera">
|
||||
<dc:Bounds x="780" y="300" width="160" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Gateway_ProveedorExiste_di" bpmnElement="Gateway_ProveedorExiste" isMarkerVisible="true">
|
||||
<dc:Bounds x="990" y="315" width="50" height="50"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="975" y="280" width="80" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_CargarLinea_di" bpmnElement="Task_CargarLinea">
|
||||
<dc:Bounds x="1090" y="300" width="160" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Gateway_CalculoOK_di" bpmnElement="Gateway_CalculoOK" isMarkerVisible="true">
|
||||
<dc:Bounds x="1295" y="315" width="50" height="50"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1280" y="280" width="80" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Gateway_TimbradoExiste_di" bpmnElement="Gateway_TimbradoExiste" isMarkerVisible="true">
|
||||
<dc:Bounds x="1395" y="315" width="50" height="50"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1380" y="280" width="80" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="SubProcess_Timbrado_di" bpmnElement="SubProcess_Timbrado" isExpanded="false">
|
||||
<dc:Bounds x="1390" y="200" width="180" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_CargarCtrlTimbrado_di" bpmnElement="Task_CargarCtrlTimbrado">
|
||||
<dc:Bounds x="1500" y="300" width="160" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_ValidacionFinal_di" bpmnElement="Task_ValidacionFinal">
|
||||
<dc:Bounds x="1700" y="300" width="160" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Gateway_ValidacionFinal_di" bpmnElement="Gateway_ValidacionFinal" isMarkerVisible="true">
|
||||
<dc:Bounds x="1915" y="315" width="50" height="50"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1900" y="280" width="80" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_GuardarFactura_di" bpmnElement="Task_GuardarFactura">
|
||||
<dc:Bounds x="2020" y="300" width="160" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Gateway_GuardadoOK_di" bpmnElement="Gateway_GuardadoOK" isMarkerVisible="true">
|
||||
<dc:Bounds x="2225" y="315" width="50" height="50"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="2210" y="280" width="80" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_LogYNotificar_di" bpmnElement="Task_LogYNotificar">
|
||||
<dc:Bounds x="2310" y="300" width="160" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="EndEvent_OK_di" bpmnElement="EndEvent_OK">
|
||||
<dc:Bounds x="2440" y="220" width="36" height="36"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="2410" y="200" width="100" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_DerivarBandeja_di" bpmnElement="Task_DerivarBandeja">
|
||||
<dc:Bounds x="1090" y="430" width="160" height="60"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="EndEvent_Excepcion_di" bpmnElement="EndEvent_Excepcion">
|
||||
<dc:Bounds x="1310" y="442" width="36" height="36"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1280" y="485" width="100" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNEdge id="Flow_R_1_di" bpmnElement="Flow_R_1">
|
||||
<di:waypoint x="196" y="340"/><di:waypoint x="260" y="340"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_2_di" bpmnElement="Flow_R_2">
|
||||
<di:waypoint x="420" y="340"/><di:waypoint x="475" y="340"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_3_Si_di" bpmnElement="Flow_R_3_Si">
|
||||
<di:waypoint x="525" y="340"/><di:waypoint x="580" y="340"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="540" y="320" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_3_No_di" bpmnElement="Flow_R_3_No">
|
||||
<di:waypoint x="500" y="365"/><di:waypoint x="500" y="460"/><di:waypoint x="1090" y="460"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="510" y="380" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_4_di" bpmnElement="Flow_R_4">
|
||||
<di:waypoint x="740" y="340"/><di:waypoint x="780" y="340"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_5_di" bpmnElement="Flow_R_5">
|
||||
<di:waypoint x="940" y="340"/><di:waypoint x="990" y="340"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_6_Si_di" bpmnElement="Flow_R_6_Si">
|
||||
<di:waypoint x="1040" y="340"/><di:waypoint x="1090" y="340"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1055" y="320" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_6_No_di" bpmnElement="Flow_R_6_No">
|
||||
<di:waypoint x="1015" y="365"/><di:waypoint x="1015" y="460"/><di:waypoint x="1090" y="460"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1025" y="380" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_7_di" bpmnElement="Flow_R_7">
|
||||
<di:waypoint x="1250" y="340"/><di:waypoint x="1295" y="340"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_8_Si_di" bpmnElement="Flow_R_8_Si">
|
||||
<di:waypoint x="1345" y="340"/><di:waypoint x="1395" y="340"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1360" y="320" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_8_No_di" bpmnElement="Flow_R_8_No">
|
||||
<di:waypoint x="1320" y="365"/><di:waypoint x="1320" y="460"/><di:waypoint x="1250" y="460"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1330" y="380" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_9_Si_di" bpmnElement="Flow_R_9_Si">
|
||||
<di:waypoint x="1445" y="340"/><di:waypoint x="1500" y="340"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1460" y="320" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_9_No_di" bpmnElement="Flow_R_9_No">
|
||||
<di:waypoint x="1420" y="315"/><di:waypoint x="1420" y="280"/><di:waypoint x="1480" y="280"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1430" y="290" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_10_di" bpmnElement="Flow_R_10">
|
||||
<di:waypoint x="1480" y="240"/><di:waypoint x="1580" y="240"/><di:waypoint x="1580" y="300"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_11_di" bpmnElement="Flow_R_11">
|
||||
<di:waypoint x="1660" y="340"/><di:waypoint x="1700" y="340"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_12_di" bpmnElement="Flow_R_12">
|
||||
<di:waypoint x="1860" y="340"/><di:waypoint x="1915" y="340"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_13_Si_di" bpmnElement="Flow_R_13_Si">
|
||||
<di:waypoint x="1965" y="340"/><di:waypoint x="2020" y="340"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1980" y="320" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_13_No_di" bpmnElement="Flow_R_13_No">
|
||||
<di:waypoint x="1940" y="365"/><di:waypoint x="1940" y="460"/><di:waypoint x="1250" y="460"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="1950" y="380" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_14_di" bpmnElement="Flow_R_14">
|
||||
<di:waypoint x="2180" y="340"/><di:waypoint x="2225" y="340"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_15_Si_di" bpmnElement="Flow_R_15_Si">
|
||||
<di:waypoint x="2275" y="340"/><di:waypoint x="2310" y="340"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="2285" y="320" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_15_No_di" bpmnElement="Flow_R_15_No">
|
||||
<di:waypoint x="2250" y="365"/><di:waypoint x="2250" y="460"/><di:waypoint x="1250" y="460"/>
|
||||
<bpmndi:BPMNLabel><dc:Bounds x="2260" y="380" width="20" height="14"/></bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_16_di" bpmnElement="Flow_R_16">
|
||||
<di:waypoint x="2390" y="300"/><di:waypoint x="2390" y="240"/><di:waypoint x="2440" y="240"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_R_17_di" bpmnElement="Flow_R_17">
|
||||
<di:waypoint x="1250" y="460"/><di:waypoint x="1310" y="460"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="Participant_SAP_di" bpmnElement="Participant_SAP" isHorizontal="true">
|
||||
<dc:Bounds x="100" y="520" width="2400" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_RecibirFactura_di" bpmnElement="Task_RecibirFactura">
|
||||
<dc:Bounds x="2310" y="535" width="160" height="50"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Participant_Excepcion_di" bpmnElement="Participant_Excepcion" isHorizontal="true">
|
||||
<dc:Bounds x="100" y="620" width="2400" height="80"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Task_RevisionManual_di" bpmnElement="Task_RevisionManual">
|
||||
<dc:Bounds x="1110" y="635" width="160" height="50"/>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNEdge id="MF_1_di" bpmnElement="MF_1">
|
||||
<di:waypoint x="510" y="140"/><di:waypoint x="510" y="200"/><di:waypoint x="178" y="200"/><di:waypoint x="178" y="322"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="MF_2_di" bpmnElement="MF_2">
|
||||
<di:waypoint x="2390" y="380"/><di:waypoint x="2390" y="535"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="MF_3_di" bpmnElement="MF_3">
|
||||
<di:waypoint x="1170" y="490"/><di:waypoint x="1170" y="635"/>
|
||||
</bpmndi:BPMNEdge>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn:definitions>
|
||||
BIN
tests/screenshots/etapa-1/report-tabs.png
Normal file
BIN
tests/screenshots/etapa-1/report-tabs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
tests/screenshots/etapa-1/switch-on.png
Normal file
BIN
tests/screenshots/etapa-1/switch-on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
tests/screenshots/etapa-1/workspace.png
Normal file
BIN
tests/screenshots/etapa-1/workspace.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
tests/screenshots/etapa-3/e3-comparison-table.png
Normal file
BIN
tests/screenshots/etapa-3/e3-comparison-table.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
tests/screenshots/etapa-3/e3-cumulative-chart.png
Normal file
BIN
tests/screenshots/etapa-3/e3-cumulative-chart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
tests/screenshots/etapa-3/e3-donut-chart.png
Normal file
BIN
tests/screenshots/etapa-3/e3-donut-chart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
tests/screenshots/etapa-3/e3-report-tabs.png
Normal file
BIN
tests/screenshots/etapa-3/e3-report-tabs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
tests/screenshots/etapa-3/e3-roi-kpi-hero.png
Normal file
BIN
tests/screenshots/etapa-3/e3-roi-kpi-hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
tests/screenshots/etapa-3/e3-switch-on.png
Normal file
BIN
tests/screenshots/etapa-3/e3-switch-on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
tests/screenshots/etapa-3/e3-transparency.png
Normal file
BIN
tests/screenshots/etapa-3/e3-transparency.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
tests/screenshots/etapa-3/e3-workspace.png
Normal file
BIN
tests/screenshots/etapa-3/e3-workspace.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -6,3 +6,19 @@ import '@testing-library/jest-dom'
|
||||
if (typeof HTMLElement !== 'undefined') {
|
||||
HTMLElement.prototype.scrollIntoView = () => {}
|
||||
}
|
||||
|
||||
// jsdom no implementa ResizeObserver (usado por Radix UI Slider y otros)
|
||||
if (typeof ResizeObserver === 'undefined') {
|
||||
global.ResizeObserver = class ResizeObserver {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
}
|
||||
}
|
||||
|
||||
// jsdom no implementa PointerEvent (usado por Radix UI primitivos)
|
||||
if (typeof PointerEvent === 'undefined') {
|
||||
global.PointerEvent = class PointerEvent extends MouseEvent {
|
||||
constructor(type: string, init?: PointerEventInit) { super(type, init) }
|
||||
} as typeof PointerEvent
|
||||
}
|
||||
|
||||
136
tests/store/simulation-store-invalidation.test.ts
Normal file
136
tests/store/simulation-store-invalidation.test.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* Tests de invalidación del simulation store.
|
||||
*
|
||||
* Regla dura del Sprint 1: cualquier mutación en Activity o Process invalida
|
||||
* AMBOS resultados (resultActual y resultAutomated) a null simultáneamente.
|
||||
* Nunca puede haber un resultado "nuevo" y el otro "viejo".
|
||||
*
|
||||
* Nota: los tests poblan el store con setState() directamente (sin Dexie)
|
||||
* porque prueban el comportamiento en memoria, no la persistencia.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, beforeEach } from 'vitest'
|
||||
import { useSimulationStore } from '@/store/simulation-store'
|
||||
import { useProcessStore } from '@/store/process-store'
|
||||
import type { SimulationResult, Activity, Process } from '@/domain/types'
|
||||
|
||||
// Resultado mock mínimo para poblar el store sin Dexie
|
||||
function makeMockResult(totalCost = 1000): SimulationResult {
|
||||
return {
|
||||
totalCost, totalDirectCost: totalCost * 0.8, totalIndirectCost: totalCost * 0.2,
|
||||
totalTimeMinutes: 60, perActivity: [], perResource: [], warnings: [],
|
||||
}
|
||||
}
|
||||
|
||||
function setMockResults(actual = makeMockResult(), automated = makeMockResult(500)) {
|
||||
useSimulationStore.setState({
|
||||
resultActual: actual,
|
||||
resultAutomated: automated,
|
||||
lastSimulatedAt: new Date(),
|
||||
})
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
// Resetear ambos stores antes de cada test para aislamiento
|
||||
useSimulationStore.getState().reset()
|
||||
useProcessStore.setState({
|
||||
currentProcess: null, activities: [], gateways: [], resources: [],
|
||||
isLoading: false, error: null,
|
||||
})
|
||||
})
|
||||
|
||||
// ─── invalidateResults() directa ─────────────────────────────────────────────
|
||||
|
||||
describe('simulation store — invalidateResults()', () => {
|
||||
it('pone resultActual y resultAutomated a null', () => {
|
||||
setMockResults()
|
||||
expect(useSimulationStore.getState().resultActual).not.toBeNull()
|
||||
expect(useSimulationStore.getState().resultAutomated).not.toBeNull()
|
||||
|
||||
useSimulationStore.getState().invalidateResults()
|
||||
|
||||
expect(useSimulationStore.getState().resultActual).toBeNull()
|
||||
expect(useSimulationStore.getState().resultAutomated).toBeNull()
|
||||
})
|
||||
|
||||
it('también limpia lastSimulatedAt', () => {
|
||||
setMockResults()
|
||||
expect(useSimulationStore.getState().lastSimulatedAt).not.toBeNull()
|
||||
|
||||
useSimulationStore.getState().invalidateResults()
|
||||
expect(useSimulationStore.getState().lastSimulatedAt).toBeNull()
|
||||
})
|
||||
|
||||
it('setState directo establece resultados independientes para actual y automated', () => {
|
||||
const mockA = makeMockResult(1000)
|
||||
const mockB = makeMockResult(500)
|
||||
setMockResults(mockA, mockB)
|
||||
|
||||
const state = useSimulationStore.getState()
|
||||
expect(state.resultActual!.totalCost).toBe(1000)
|
||||
expect(state.resultAutomated!.totalCost).toBe(500)
|
||||
expect(state.lastSimulatedAt).toBeInstanceOf(Date)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── Invalidación reactiva vía suscripción al process store ──────────────────
|
||||
|
||||
describe('simulation store — invalidación por cambio en process store', () => {
|
||||
it('cambio en activities invalida ambos resultados', () => {
|
||||
setMockResults()
|
||||
expect(useSimulationStore.getState().resultActual).not.toBeNull()
|
||||
|
||||
useProcessStore.setState({ activities: [] })
|
||||
|
||||
expect(useSimulationStore.getState().resultActual).toBeNull()
|
||||
expect(useSimulationStore.getState().resultAutomated).toBeNull()
|
||||
})
|
||||
|
||||
it('cambio en currentProcess invalida ambos resultados', () => {
|
||||
setMockResults()
|
||||
|
||||
const proc: Process = {
|
||||
id: 'new-proc', name: 'Nuevo', clientName: '', bpmnXml: '<def/>',
|
||||
currency: 'USD', overheadPercentage: 0.2,
|
||||
annualFrequency: 500, analysisHorizonYears: 2, automationInvestment: 10_000,
|
||||
createdAt: Date.now(), updatedAt: Date.now(),
|
||||
}
|
||||
useProcessStore.setState({ currentProcess: proc })
|
||||
|
||||
expect(useSimulationStore.getState().resultActual).toBeNull()
|
||||
expect(useSimulationStore.getState().resultAutomated).toBeNull()
|
||||
})
|
||||
|
||||
it('editar campo de actividad invalida ambos resultados', () => {
|
||||
// Test explícito pedido en el brief: simula lo que hace updateActivity
|
||||
setMockResults()
|
||||
|
||||
const newActivities: Activity[] = [{
|
||||
id: 'a1', processId: 'p1', bpmnElementId: 'task_1', name: 'Tarea',
|
||||
type: 'task',
|
||||
directCostFixed: 999, // campo modificado
|
||||
executionTimeMinutes: 30, assignedResources: [],
|
||||
automatable: false, automatedCostFixed: 0, automatedTimeMinutes: 0,
|
||||
}]
|
||||
useProcessStore.setState({ activities: newActivities })
|
||||
|
||||
expect(useSimulationStore.getState().resultActual).toBeNull()
|
||||
expect(useSimulationStore.getState().resultAutomated).toBeNull()
|
||||
})
|
||||
|
||||
it('setState con las MISMAS activities (mismo reference) NO invalida', () => {
|
||||
const activities: Activity[] = [{
|
||||
id: 'a1', processId: 'p1', bpmnElementId: 't1', name: 'T',
|
||||
type: 'task', directCostFixed: 100, executionTimeMinutes: 30,
|
||||
assignedResources: [], automatable: false, automatedCostFixed: 0, automatedTimeMinutes: 0,
|
||||
}]
|
||||
|
||||
useProcessStore.setState({ activities })
|
||||
setMockResults()
|
||||
|
||||
// Misma referencia: no debe invalidar
|
||||
useProcessStore.setState({ activities })
|
||||
|
||||
expect(useSimulationStore.getState().resultActual).not.toBeNull()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user