289 lines
7.2 KiB
Markdown
289 lines
7.2 KiB
Markdown
# 🚀 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:
|
||
```bash
|
||
node --version
|
||
npm --version
|
||
```
|
||
|
||
---
|
||
|
||
## 🛠️ Instalación y Ejecución
|
||
|
||
### 1️⃣ Instalar Dependencias
|
||
```bash
|
||
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
|
||
```bash
|
||
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:
|
||
|
||
```bash
|
||
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:
|
||
```bash
|
||
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
|
||
1. **Selector de Tier** (Gold/Silver/Bronze)
|
||
2. **Carga de datos** (CSV/Excel o datos sintéticos)
|
||
3. **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"
|
||
```bash
|
||
# 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..."
|
||
```bash
|
||
# Limpiar node_modules y reinstalar
|
||
rm -r node_modules package-lock.json
|
||
npm install
|
||
```
|
||
|
||
### ❌ Error: "VITE not found"
|
||
```bash
|
||
# Instalar Vite globalmente (si npm install no funcionó)
|
||
npm install -g vite
|
||
```
|
||
|
||
### ❌ TypeScript errors
|
||
```bash
|
||
# 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
|
||
```csv
|
||
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
|
||
```bash
|
||
npx tsc --noEmit
|
||
```
|
||
|
||
### Formatear código
|
||
```bash
|
||
npx prettier --write src/
|
||
```
|
||
|
||
### Ver dependencias
|
||
```bash
|
||
npm list
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 Próximos Pasos Recomendados
|
||
|
||
1. **Ejecutar localmente**: `npm run dev`
|
||
2. **Explorar Dashboard**: Navegar por todas las secciones
|
||
3. **Cargar datos**: Usar el cargador de CSV/Excel
|
||
4. **Probar interactividad**: Hacer clic en gráficos, tooltips, botones
|
||
5. **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! 🚀
|