Files

sujucu70 1bb0765766 Initial commit - ACME demo version

2026-02-04 11:08:21 +01:00

7.2 KiB

Raw Permalink Blame History

🚀 Guía de Configuración Local - Beyond Diagnostic Prototipo

✅ Estado Actual

La aplicación ha sido completamente revisada y corregida con todas las validaciones necesarias para ejecutarse sin errores.

📊 Correcciones Implementadas

✅ 22 errores críticos corregidos
✅ Validaciones de división por cero
✅ Protección contra valores null/undefined
✅ Manejo seguro de operaciones matemáticas
✅ Compilación exitosa sin errores

📋 Requisitos Previos

Node.js v16 o superior (recomendado v18+)
npm v8 o superior
Git (opcional, para clonar o descargar)

Verificar versiones:

node --version
npm --version

🛠️ Instalación y Ejecución

1️⃣ Instalar Dependencias

cd C:\Users\sujuc\BeyondDiagnosticPrototipo
npm install

Resultado esperado:

added 161 packages in 5s

⚠️ Nota: Puede haber 1 aviso de vulnerabilidad alta en dependencias transitivas (no afecta el funcionamiento local)

2️⃣ Ejecutar en Modo Desarrollo

npm run dev

Output esperado:

  VITE v6.4.1  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  press h + enter to show help

3️⃣ Abrir en el Navegador

Automáticamente se abrirá en http://localhost:5173/
O acceder manualmente a: http://localhost:5173

🏗️ Compilar para Producción

Si deseas generar la versión optimizada:

npm run build

Output esperado:

✓ 2726 modules transformed
✓ built in 4.07s

La aplicación compilada estará en la carpeta dist/

Para ver una vista previa local de la compilación:

npm run preview

📁 Estructura de Archivos

BeyondDiagnosticPrototipo/
├── src/
│   ├── components/          # 37 componentes React
│   ├── utils/               # 8 utilidades TypeScript
│   ├── styles/              # Estilos personalizados
│   ├── types.ts             # Definiciones de tipos
│   ├── constants.ts         # Constantes
│   ├── App.tsx              # Componente raíz
│   └── index.tsx            # Punto de entrada
├── public/                  # Archivos estáticos
├── dist/                    # Build producción (después de npm run build)
├── package.json             # Dependencias
├── tsconfig.json            # Configuración TypeScript
├── vite.config.ts           # Configuración Vite
└── index.html               # HTML principal

🚀 Características Principales

📊 Dashboard Interactivo

Heatmaps dinámicos de rendimiento
Análisis de variabilidad con múltiples dimensiones
Matriz de oportunidades con priorización automática
Roadmap de transformación de 18 meses

🤖 Análisis Agentic Readiness

Cálculo multidimensional basado en:
- Predictibilidad (CV del AHT)
- Complejidad inversa (tasa de transferencia)
- Repetitividad (volumen)
- Estabilidad (distribución horaria)
- ROI potencial

📈 Datos y Visualización

Soporte para CSV y Excel (.xlsx)
Generación de datos sintéticos como fallback
Gráficos con Recharts (Line, Bar, Area, Composed)
Animaciones con Framer Motion

💼 Modelo Económico

Cálculo de NPV, IRR, TCO
Análisis de sensibilidad (pesimista/base/optimista)
Comparación de alternativas de implementación

🎯 Benchmark Competitivo

Comparación con percentiles de industria (P25, P50, P75, P90)
Posicionamiento en matriz competitiva
Recomendaciones priorizadas

🎨 Interfaz de Usuario

Flujo Principal

Selector de Tier (Gold/Silver/Bronze)
Carga de datos (CSV/Excel o datos sintéticos)
Dashboard completo con 11 secciones:
- Health Score & KPIs
- Heatmap de Performance
- Análisis de Variabilidad
- Matriz de Oportunidades
- Roadmap de Transformación
- Modelo Económico
- Benchmark vs Industria
- Y más...

Características UX

✨ Animaciones fluidas de Framer Motion
🎯 Tooltips interactivos con Radix UI
📱 Responsive design con Tailwind CSS
🔔 Notificaciones con React Hot Toast
⌨️ Iconos SVG con Lucide React

🔧 Troubleshooting

❌ Error: "Port 5173 already in use"

# Opción 1: Usar puerto diferente
npm run dev -- --port 3000

# Opción 2: Terminar proceso que usa 5173
# Windows:
netstat -ano | findstr :5173
taskkill /PID <PID> /F

❌ Error: "Cannot find module..."

# Limpiar node_modules y reinstalar
rm -r node_modules package-lock.json
npm install

❌ Error: "VITE not found"

# Instalar Vite globalmente (si npm install no funcionó)
npm install -g vite

❌ TypeScript errors

# Compilar y verificar tipos
npx tsc --noEmit

📝 Archivo de Datos de Ejemplo

Para pruebas, la aplicación genera automáticamente datos sintéticos si no cargas un archivo. Para cargar datos reales:

Formato CSV Requerido

interaction_id,datetime_start,queue_skill,channel,duration_talk,hold_time,wrap_up_time,agent_id,transfer_flag
1,2024-01-15 09:30:00,Ventas Inbound,Phone,240,15,30,AG001,false
2,2024-01-15 09:45:00,Soporte Técnico N1,Chat,180,0,20,AG002,true
...

Columnas Requeridas

interaction_id - ID único
datetime_start - Fecha/hora de inicio
queue_skill - Tipo de cola/skill
channel - Canal (Phone, Chat, Email, etc.)
duration_talk - Duración conversación (segundos)
hold_time - Tiempo en espera (segundos)
wrap_up_time - Tiempo de resumen (segundos)
agent_id - ID del agente
transfer_flag - Booleano (true/false o 1/0)

📊 Variables de Entorno (Opcional)

Crear archivo .env.local en la raíz (si es necesario en futuro):

VITE_API_URL=http://localhost:3000
VITE_MODE=development

🧪 Testing & Development

Verificar TypeScript

npx tsc --noEmit

Formatear código

npx prettier --write src/

Ver dependencias

npm list

🎯 Próximos Pasos Recomendados

Ejecutar localmente: npm run dev
Explorar Dashboard: Navegar por todas las secciones
Cargar datos: Usar el cargador de CSV/Excel
Probar interactividad: Hacer clic en gráficos, tooltips, botones
Revisar código: Explorar src/components/ para entender la arquitectura

📞 Soporte & Debugging

Habilitar logs detallados

Abrir DevTools del navegador (F12) y ver consola para:

🔍 Logs de cálculos (🟢, 🟡, 🔴 emojis)
⚠️ Advertencias de datos
❌ Errores con stack traces

Archivos de interés

src/App.tsx - Punto de entrada principal
src/components/SinglePageDataRequestIntegrated.tsx - Orquestador principal
src/utils/analysisGenerator.ts - Generador de análisis
src/utils/realDataAnalysis.ts - Procesamiento de datos reales
src/utils/agenticReadinessV2.ts - Cálculo de readiness

✨ Notas Finales

La aplicación está completamente funcional y sin errores críticos
Todos los cálculos numéricos están protegidos contra edge cases
El código está tipado en TypeScript para mayor seguridad
Los componentes cuentan con error boundaries para manejo robusto

¡Disfruta explorando Beyond Diagnostic! 🚀

7.2 KiB Raw Permalink Blame History Unescape Escape