import React from 'react'; import { motion } from 'framer-motion'; import { ChevronRight, TrendingUp, TrendingDown, Minus, AlertTriangle, Lightbulb, DollarSign, Clock } from 'lucide-react'; import type { AnalysisData, DimensionAnalysis, Finding, Recommendation, HeatmapDataPoint } from '../../types'; import { Card, Badge, } from '../ui'; import { cn, COLORS, STATUS_CLASSES, getStatusFromScore, formatCurrency, formatNumber, formatPercent, } from '../../config/designSystem'; interface DimensionAnalysisTabProps { data: AnalysisData; } // ========== HALLAZGO CLAVE CON IMPACTO ECONÓMICO ========== interface CausalAnalysis { finding: string; probableCause: string; economicImpact: number; recommendation: string; severity: 'critical' | 'warning' | 'info'; } // v3.11: Interfaz extendida para incluir fórmula de cálculo interface CausalAnalysisExtended extends CausalAnalysis { impactFormula?: string; // Explicación de cómo se calculó el impacto hasRealData: boolean; // True si hay datos reales para calcular timeSavings?: string; // Ahorro de tiempo para dar credibilidad al impacto económico } // Genera hallazgo clave basado en dimensión y datos function generateCausalAnalysis( dimension: DimensionAnalysis, heatmapData: HeatmapDataPoint[], economicModel: { currentAnnualCost: number }, staticConfig?: { cost_per_hour: number }, dateRange?: { min: string; max: string } ): CausalAnalysisExtended[] { const analyses: CausalAnalysisExtended[] = []; const totalVolume = heatmapData.reduce((sum, h) => sum + h.volume, 0); // Coste horario del agente desde config (default €20 si no está definido) const HOURLY_COST = staticConfig?.cost_per_hour ?? 20; // Calcular factor de anualización basado en el período de datos // Si tenemos dateRange, calculamos cuántos días cubre y extrapolamos a año let annualizationFactor = 1; // Por defecto, asumimos que los datos ya son anuales if (dateRange?.min && dateRange?.max) { const startDate = new Date(dateRange.min); const endDate = new Date(dateRange.max); const daysCovered = Math.max(1, Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1); annualizationFactor = 365 / daysCovered; } // v3.11: CPI consistente con Executive Summary const CPI_TCO = 2.33; // Usar CPI pre-calculado de heatmapData si existe, sino calcular desde annual_cost/cost_volume const totalCostVolume = heatmapData.reduce((sum, h) => sum + (h.cost_volume || h.volume), 0); const totalAnnualCost = heatmapData.reduce((sum, h) => sum + (h.annual_cost || 0), 0); const hasCpiField = heatmapData.some(h => h.cpi !== undefined && h.cpi > 0); const CPI = hasCpiField ? (totalCostVolume > 0 ? heatmapData.reduce((sum, h) => sum + (h.cpi || 0) * (h.cost_volume || h.volume), 0) / totalCostVolume : CPI_TCO) : (totalCostVolume > 0 ? totalAnnualCost / totalCostVolume : CPI_TCO); // Calcular métricas agregadas const avgCVAHT = totalVolume > 0 ? heatmapData.reduce((sum, h) => sum + (h.variability?.cv_aht || 0) * h.volume, 0) / totalVolume : 0; const avgTransferRate = totalVolume > 0 ? heatmapData.reduce((sum, h) => sum + (h.variability?.transfer_rate || 0) * h.volume, 0) / totalVolume : 0; // Usar FCR Técnico (100 - transfer_rate) en lugar de FCR Real (con filtro recontacto 7d) // FCR Técnico es más comparable con benchmarks de industria const avgFCR = totalVolume > 0 ? heatmapData.reduce((sum, h) => sum + (h.metrics.fcr_tecnico ?? (100 - h.metrics.transfer_rate)) * h.volume, 0) / totalVolume : 0; const avgAHT = totalVolume > 0 ? heatmapData.reduce((sum, h) => sum + h.aht_seconds * h.volume, 0) / totalVolume : 0; const avgCSAT = totalVolume > 0 ? heatmapData.reduce((sum, h) => sum + (h.metrics?.csat || 0) * h.volume, 0) / totalVolume : 0; const avgHoldTime = totalVolume > 0 ? heatmapData.reduce((sum, h) => sum + (h.metrics?.hold_time || 0) * h.volume, 0) / totalVolume : 0; // Skills con problemas específicos const skillsHighCV = heatmapData.filter(h => (h.variability?.cv_aht || 0) > 100); // Usar FCR Técnico para identificar skills con bajo FCR const skillsLowFCR = heatmapData.filter(h => (h.metrics.fcr_tecnico ?? (100 - h.metrics.transfer_rate)) < 50); const skillsHighTransfer = heatmapData.filter(h => (h.variability?.transfer_rate || 0) > 20); // Parsear P50 AHT del KPI del header para consistencia visual // El KPI puede ser "345s (P50)" o similar const parseKpiAhtSeconds = (kpiValue: string): number | null => { const match = kpiValue.match(/(\d+)s/); return match ? parseInt(match[1], 10) : null; }; switch (dimension.name) { case 'operational_efficiency': // Obtener P50 AHT del header para mostrar valor consistente const p50Aht = parseKpiAhtSeconds(dimension.kpi.value) ?? avgAHT; // Eficiencia Operativa: enfocada en AHT (valor absoluto) // CV AHT se analiza en Complejidad & Predictibilidad (best practice) const hasHighAHT = p50Aht > 300; // 5:00 benchmark const ahtBenchmark = 300; // 5:00 objetivo if (hasHighAHT) { // Calcular impacto económico por AHT excesivo const excessSeconds = p50Aht - ahtBenchmark; const annualVolume = Math.round(totalVolume * annualizationFactor); const excessHours = Math.round((excessSeconds / 3600) * annualVolume); const ahtExcessCost = Math.round(excessHours * HOURLY_COST); // Estimar ahorro con solución Copilot (25-30% reducción AHT) const copilotSavings = Math.round(ahtExcessCost * 0.28); // Causa basada en AHT elevado const cause = 'Agentes dedican tiempo excesivo a búsqueda manual de información, navegación entre sistemas y tareas repetitivas.'; analyses.push({ finding: `AHT elevado: P50 ${Math.floor(p50Aht / 60)}:${String(Math.round(p50Aht) % 60).padStart(2, '0')} (benchmark: 5:00)`, probableCause: cause, economicImpact: ahtExcessCost, impactFormula: `${excessHours.toLocaleString()}h × €${HOURLY_COST}/h`, timeSavings: `${excessHours.toLocaleString()} horas/año en exceso de AHT`, recommendation: `Desplegar Copilot IA para agentes: (1) Auto-búsqueda en KB; (2) Sugerencias contextuales en tiempo real; (3) Scripts guiados para casos frecuentes. Reducción esperada: 20-30% AHT. Ahorro: ${formatCurrency(copilotSavings)}/año.`, severity: p50Aht > 420 ? 'critical' : 'warning', hasRealData: true }); } else { // AHT dentro de benchmark - mostrar estado positivo analyses.push({ finding: `AHT dentro de benchmark: P50 ${Math.floor(p50Aht / 60)}:${String(Math.round(p50Aht) % 60).padStart(2, '0')} (benchmark: 5:00)`, probableCause: 'Tiempos de gestión eficientes. Procesos operativos optimizados.', economicImpact: 0, impactFormula: 'Sin exceso de coste por AHT', timeSavings: 'Operación eficiente', recommendation: 'Mantener nivel actual. Considerar Copilot para mejora continua y reducción adicional de tiempos en casos complejos.', severity: 'info', hasRealData: true }); } break; case 'effectiveness_resolution': // Análisis principal: FCR Técnico y tasa de transferencias const annualVolumeEff = Math.round(totalVolume * annualizationFactor); const transferCount = Math.round(annualVolumeEff * (avgTransferRate / 100)); // Calcular impacto económico de transferencias const transferCostTotal = Math.round(transferCount * CPI_TCO * 0.5); // Potencial de mejora con IA const improvementPotential = avgFCR < 90 ? Math.round((90 - avgFCR) / 100 * annualVolumeEff) : 0; const potentialSavingsEff = Math.round(improvementPotential * CPI_TCO * 0.3); // Determinar severidad basada en FCR const effSeverity = avgFCR < 70 ? 'critical' : avgFCR < 85 ? 'warning' : 'info'; // Construir causa basada en datos let effCause = ''; if (avgFCR < 70) { effCause = skillsLowFCR.length > 0 ? `Alta tasa de transferencias (${avgTransferRate.toFixed(0)}%) indica falta de herramientas o autoridad. Crítico en ${skillsLowFCR.slice(0, 2).map(s => s.skill).join(', ')}.` : `Transferencias elevadas (${avgTransferRate.toFixed(0)}%): agentes sin información contextual o sin autoridad para resolver.`; } else if (avgFCR < 85) { effCause = `Transferencias del ${avgTransferRate.toFixed(0)}% indican oportunidad de mejora con asistencia IA para casos complejos.`; } else { effCause = `FCR Técnico en nivel óptimo. Transferencias del ${avgTransferRate.toFixed(0)}% principalmente en casos que requieren escalación legítima.`; } // Construir recomendación let effRecommendation = ''; if (avgFCR < 70) { effRecommendation = `Desplegar Knowledge Copilot con búsqueda inteligente en KB + Guided Resolution Copilot para casos complejos. Objetivo: FCR >85%. Potencial ahorro: ${formatCurrency(potentialSavingsEff)}/año.`; } else if (avgFCR < 85) { effRecommendation = `Implementar Copilot de asistencia en tiempo real: sugerencias contextuales + conexión con expertos virtuales para reducir transferencias. Objetivo: FCR >90%.`; } else { effRecommendation = `Mantener nivel actual. Considerar IA para análisis de transferencias legítimas y optimización de enrutamiento predictivo.`; } analyses.push({ finding: `FCR Técnico: ${avgFCR.toFixed(0)}% | Transferencias: ${avgTransferRate.toFixed(0)}% (benchmark: FCR >85%, Transfer <10%)`, probableCause: effCause, economicImpact: transferCostTotal, impactFormula: `${transferCount.toLocaleString()} transferencias/año × €${CPI_TCO}/int × 50% coste adicional`, timeSavings: `${transferCount.toLocaleString()} transferencias/año (${avgTransferRate.toFixed(0)}% del volumen)`, recommendation: effRecommendation, severity: effSeverity, hasRealData: true }); break; case 'volumetry_distribution': // Análisis de concentración de volumen const topSkill = [...heatmapData].sort((a, b) => b.volume - a.volume)[0]; const topSkillPct = topSkill ? (topSkill.volume / totalVolume) * 100 : 0; if (topSkillPct > 40 && topSkill) { const annualTopSkillVolume = Math.round(topSkill.volume * annualizationFactor); const deflectionPotential = Math.round(annualTopSkillVolume * CPI_TCO * 0.20); const interactionsDeflectable = Math.round(annualTopSkillVolume * 0.20); analyses.push({ finding: `Concentración de volumen: ${topSkill.skill} representa ${topSkillPct.toFixed(0)}% del total`, probableCause: `Alta concentración en un skill indica consultas repetitivas con potencial de automatización.`, economicImpact: deflectionPotential, impactFormula: `${topSkill.volume.toLocaleString()} int × anualización × €${CPI_TCO} × 20% deflexión potencial`, timeSavings: `${annualTopSkillVolume.toLocaleString()} interacciones/año en ${topSkill.skill} (${interactionsDeflectable.toLocaleString()} automatizables)`, recommendation: `Analizar tipologías de ${topSkill.skill} para deflexión a autoservicio o agente virtual. Potencial: ${formatCurrency(deflectionPotential)}/año.`, severity: 'info', hasRealData: true }); } break; case 'complexity_predictability': // KPI principal: CV AHT (predictability metric per industry standards) // Siempre mostrar análisis de CV AHT ya que es el KPI de esta dimensión const cvBenchmark = 75; // Best practice: CV AHT < 75% if (avgCVAHT > cvBenchmark) { const staffingCost = Math.round(economicModel.currentAnnualCost * 0.03); const staffingHours = Math.round(staffingCost / HOURLY_COST); const standardizationSavings = Math.round(staffingCost * 0.50); // Determinar severidad basada en CV AHT const cvSeverity = avgCVAHT > 125 ? 'critical' : avgCVAHT > 100 ? 'warning' : 'warning'; // Causa dinámica basada en nivel de variabilidad const cvCause = avgCVAHT > 125 ? 'Dispersión extrema en tiempos de atención impide planificación efectiva de recursos. Probable falta de scripts o procesos estandarizados.' : 'Variabilidad moderada en tiempos indica oportunidad de estandarización para mejorar planificación WFM.'; analyses.push({ finding: `CV AHT elevado: ${avgCVAHT.toFixed(0)}% (benchmark: <${cvBenchmark}%)`, probableCause: cvCause, economicImpact: staffingCost, impactFormula: `~3% del coste operativo por ineficiencia de staffing`, timeSavings: `~${staffingHours.toLocaleString()} horas/año en sobre/subdimensionamiento`, recommendation: `Implementar scripts guiados por IA que estandaricen la atención. Reducción esperada: -50% variabilidad. Ahorro: ${formatCurrency(standardizationSavings)}/año.`, severity: cvSeverity, hasRealData: true }); } else { // CV AHT dentro de benchmark - mostrar estado positivo analyses.push({ finding: `CV AHT dentro de benchmark: ${avgCVAHT.toFixed(0)}% (benchmark: <${cvBenchmark}%)`, probableCause: 'Tiempos de atención consistentes. Buena estandarización de procesos.', economicImpact: 0, impactFormula: 'Sin impacto por variabilidad', timeSavings: 'Planificación WFM eficiente', recommendation: 'Mantener nivel actual. Analizar casos atípicos para identificar oportunidades de mejora continua.', severity: 'info', hasRealData: true }); } // Análisis secundario: Hold Time (proxy de complejidad) if (avgHoldTime > 45) { const excessHold = avgHoldTime - 30; const annualVolumeHold = Math.round(totalVolume * annualizationFactor); const excessHoldHours = Math.round((excessHold / 3600) * annualVolumeHold); const holdCost = Math.round(excessHoldHours * HOURLY_COST); const searchCopilotSavings = Math.round(holdCost * 0.60); analyses.push({ finding: `Hold time elevado: ${avgHoldTime.toFixed(0)}s promedio (benchmark: <30s)`, probableCause: 'Agentes ponen cliente en espera para buscar información. Sistemas no presentan datos de forma contextual.', economicImpact: holdCost, impactFormula: `Exceso ${Math.round(excessHold)}s × ${totalVolume.toLocaleString()} int × anualización × €${HOURLY_COST}/h`, timeSavings: `${excessHoldHours.toLocaleString()} horas/año de cliente en espera`, recommendation: `Desplegar vista 360° con contexto automático: historial, productos y acciones sugeridas visibles al contestar. Reducción esperada: -60% hold time. Ahorro: ${formatCurrency(searchCopilotSavings)}/año.`, severity: avgHoldTime > 60 ? 'critical' : 'warning', hasRealData: true }); } break; case 'customer_satisfaction': // Solo generar análisis si hay datos de CSAT reales if (avgCSAT > 0) { if (avgCSAT < 70) { const annualVolumeCsat = Math.round(totalVolume * annualizationFactor); const customersAtRisk = Math.round(annualVolumeCsat * 0.02); const churnRisk = Math.round(customersAtRisk * 50); analyses.push({ finding: `CSAT por debajo del objetivo: ${avgCSAT.toFixed(0)}% (benchmark: >80%)`, probableCause: 'Clientes insatisfechos por esperas, falta de resolución o experiencia de atención deficiente.', economicImpact: churnRisk, impactFormula: `${totalVolume.toLocaleString()} clientes × anualización × 2% riesgo churn × €50 valor`, timeSavings: `${customersAtRisk.toLocaleString()} clientes/año en riesgo de fuga`, recommendation: `Implementar programa VoC: encuestas post-contacto + análisis de causas raíz + acción correctiva en 48h. Objetivo: CSAT >80%.`, severity: avgCSAT < 50 ? 'critical' : 'warning', hasRealData: true }); } } break; case 'economy_cpi': // Análisis de CPI if (CPI > 3.5) { const excessCPI = CPI - CPI_TCO; const annualVolumeCpi = Math.round(totalVolume * annualizationFactor); const potentialSavings = Math.round(annualVolumeCpi * excessCPI); const excessHours = Math.round(potentialSavings / HOURLY_COST); analyses.push({ finding: `CPI por encima del benchmark: €${CPI.toFixed(2)} (objetivo: €${CPI_TCO})`, probableCause: 'Coste por interacción elevado por AHT alto, baja ocupación o estructura de costes ineficiente.', economicImpact: potentialSavings, impactFormula: `${totalVolume.toLocaleString()} int × anualización × €${excessCPI.toFixed(2)} exceso CPI`, timeSavings: `€${excessCPI.toFixed(2)} exceso/int × ${annualVolumeCpi.toLocaleString()} int = ${excessHours.toLocaleString()}h equivalentes`, recommendation: `Optimizar mix de canales + reducir AHT con automatización + revisar modelo de staffing. Objetivo: CPI <€${CPI_TCO}.`, severity: CPI > 5 ? 'critical' : 'warning', hasRealData: true }); } break; } // v3.11: NO generar fallback con impacto económico falso // Si no hay análisis específico, simplemente retornar array vacío // La UI mostrará "Sin hallazgos críticos" en lugar de un impacto inventado return analyses; } // Formateador de moneda (usa la función importada de designSystem) // v3.15: Dimension Card Component - con diseño McKinsey function DimensionCard({ dimension, findings, recommendations, causalAnalyses, delay = 0 }: { dimension: DimensionAnalysis; findings: Finding[]; recommendations: Recommendation[]; causalAnalyses: CausalAnalysisExtended[]; delay?: number; }) { const Icon = dimension.icon; const getScoreVariant = (score: number): 'success' | 'warning' | 'critical' | 'default' => { if (score < 0) return 'default'; // N/A if (score >= 70) return 'success'; if (score >= 40) return 'warning'; return 'critical'; }; const getScoreLabel = (score: number): string => { if (score < 0) return 'N/A'; if (score >= 80) return 'Óptimo'; if (score >= 60) return 'Aceptable'; if (score >= 40) return 'Mejorable'; return 'Crítico'; }; const getSeverityConfig = (severity: string) => { if (severity === 'critical') return STATUS_CLASSES.critical; if (severity === 'warning') return STATUS_CLASSES.warning; return STATUS_CLASSES.info; }; // Get KPI trend icon const TrendIcon = dimension.kpi.changeType === 'positive' ? TrendingUp : dimension.kpi.changeType === 'negative' ? TrendingDown : Minus; const trendColor = dimension.kpi.changeType === 'positive' ? 'text-emerald-600' : dimension.kpi.changeType === 'negative' ? 'text-red-600' : 'text-gray-500'; // Calcular impacto total de esta dimensión const totalImpact = causalAnalyses.reduce((sum, a) => sum + a.economicImpact, 0); const scoreVariant = getScoreVariant(dimension.score); return ( {/* Header */}

{dimension.title}

{dimension.summary}

= 0 ? `${dimension.score} ${getScoreLabel(dimension.score)}` : '— N/A'} variant={scoreVariant} size="md" /> {totalImpact > 0 && (

Impacto: {formatCurrency(totalImpact)}

)}
{/* KPI Highlight */}
{dimension.kpi.label}
{dimension.kpi.value} {dimension.kpi.change && (
{dimension.kpi.change}
)}
{dimension.percentile && (
Percentil P{dimension.percentile}
)}
{/* Si no hay datos para esta dimensión (score < 0 = N/A) */} {dimension.score < 0 && (

Sin datos disponibles para esta dimensión.

)} {/* Hallazgo Clave - Solo si hay datos */} {dimension.score >= 0 && causalAnalyses.length > 0 && (

Hallazgo Clave

{causalAnalyses.map((analysis, idx) => { const config = getSeverityConfig(analysis.severity); return (
{/* Hallazgo */}

{analysis.finding}

{/* Causa probable */}

Causa probable:

{analysis.probableCause}

{/* Impacto económico */}
{formatCurrency(analysis.economicImpact)} impacto anual (coste del problema) i
{/* Ahorro de tiempo - da credibilidad al cálculo económico */} {analysis.timeSavings && (
{analysis.timeSavings}
)} {/* Recomendación inline */}

{analysis.recommendation}

); })}
)} {/* Fallback: Hallazgos originales si no hay hallazgo clave - Solo si hay datos */} {dimension.score >= 0 && causalAnalyses.length === 0 && findings.length > 0 && (

Hallazgos Clave

    {findings.slice(0, 3).map((finding, idx) => (
  • {finding.text}
    • ))}
)} {/* Si no hay análisis ni hallazgos pero sí hay datos */} {dimension.score >= 0 && causalAnalyses.length === 0 && findings.length === 0 && (

Métricas dentro de rangos aceptables. Sin hallazgos críticos.

)} {/* Recommendations Preview - Solo si no hay hallazgo clave y hay datos */} {dimension.score >= 0 && causalAnalyses.length === 0 && recommendations.length > 0 && (
Recomendación: {recommendations[0].text}
)} ); } // ========== v3.16: COMPONENTE PRINCIPAL ========== export function DimensionAnalysisTab({ data }: DimensionAnalysisTabProps) { // Filter out agentic_readiness (has its own tab) const coreDimensions = data.dimensions.filter(d => d.name !== 'agentic_readiness'); // Group findings and recommendations by dimension const getFindingsForDimension = (dimensionId: string) => data.findings.filter(f => f.dimensionId === dimensionId); const getRecommendationsForDimension = (dimensionId: string) => data.recommendations.filter(r => r.dimensionId === dimensionId); // Generar hallazgo clave para cada dimensión const getCausalAnalysisForDimension = (dimension: DimensionAnalysis) => generateCausalAnalysis(dimension, data.heatmapData, data.economicModel, data.staticConfig, data.dateRange); // Calcular impacto total de todas las dimensiones con datos const impactoTotal = coreDimensions .filter(d => d.score !== null && d.score !== undefined) .reduce((total, dimension) => { const analyses = getCausalAnalysisForDimension(dimension); return total + analyses.reduce((sum, a) => sum + a.economicImpact, 0); }, 0); // v3.16: Contar dimensiones por estado para el header const conDatos = coreDimensions.filter(d => d.score !== null && d.score !== undefined && d.score >= 0); const sinDatos = coreDimensions.filter(d => d.score === null || d.score === undefined || d.score < 0); return (
{/* v3.16: Header simplificado - solo título y subtítulo */}

Diagnóstico por Dimensión

{coreDimensions.length} dimensiones analizadas {sinDatos.length > 0 && ` (${sinDatos.length} sin datos)`}

{/* v3.16: Grid simple con todas las dimensiones sin agrupación */}
{coreDimensions.map((dimension, idx) => ( ))}
); } export default DimensionAnalysisTab;