feat: Add Law 10/2025 compliance analysis tab
- Add new Law10Tab with compliance analysis for Spanish Law 10/2025 - Sections: LAW-01 (Response Speed), LAW-02 (Resolution Quality), LAW-07 (Time Coverage) - Add Data Maturity Summary showing available/estimable/missing data - Add Validation Questionnaire for manual data input - Add Dimension Connections linking to other analysis tabs - Fix KPI consistency: use correct field names (abandonment_rate, aht_seconds) - Fix cache directory path for Windows compatibility - Update economic calculations to use actual economicModel data Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
sujucu70
@@ -1,8 +1,7 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { LayoutDashboard, Layers, Bot, Map } from 'lucide-react';
|
||||
import { formatDateMonthYear } from '../utils/formatters';
|
||||
import { LayoutDashboard, Layers, Bot, Map, ShieldCheck, Info, Scale } from 'lucide-react';
|
||||
|
||||
export type TabId = 'executive' | 'dimensions' | 'readiness' | 'roadmap';
|
||||
export type TabId = 'executive' | 'dimensions' | 'readiness' | 'roadmap' | 'law10';
|
||||
|
||||
export interface TabConfig {
|
||||
id: TabId;
|
||||
@@ -14,6 +13,7 @@ interface DashboardHeaderProps {
|
||||
title?: string;
|
||||
activeTab: TabId;
|
||||
onTabChange: (id: TabId) => void;
|
||||
onMetodologiaClick?: () => void;
|
||||
}
|
||||
|
||||
const TABS: TabConfig[] = [
|
||||
@@ -21,20 +21,32 @@ const TABS: TabConfig[] = [
|
||||
{ id: 'dimensions', label: 'Dimensiones', icon: Layers },
|
||||
{ id: 'readiness', label: 'Agentic Readiness', icon: Bot },
|
||||
{ id: 'roadmap', label: 'Roadmap', icon: Map },
|
||||
{ id: 'law10', label: 'Ley 10/2025', icon: Scale },
|
||||
];
|
||||
|
||||
export function DashboardHeader({
|
||||
title = 'AIR EUROPA - Beyond CX Analytics',
|
||||
activeTab,
|
||||
onTabChange
|
||||
onTabChange,
|
||||
onMetodologiaClick
|
||||
}: DashboardHeaderProps) {
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-white border-b border-slate-200 shadow-sm">
|
||||
{/* Top row: Title and Date */}
|
||||
{/* Top row: Title and Metodología Badge */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 sm:py-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h1 className="text-base sm:text-xl font-bold text-slate-800 truncate">{title}</h1>
|
||||
<span className="text-xs sm:text-sm text-slate-500 flex-shrink-0">{formatDateMonthYear()}</span>
|
||||
{onMetodologiaClick && (
|
||||
<button
|
||||
onClick={onMetodologiaClick}
|
||||
className="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 bg-green-100 text-green-800 rounded-full text-[10px] sm:text-xs font-medium hover:bg-green-200 transition-colors cursor-pointer flex-shrink-0"
|
||||
>
|
||||
<ShieldCheck className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
|
||||
<span className="hidden md:inline">Metodología de Transformación de Datos aplicada</span>
|
||||
<span className="md:hidden">Metodología</span>
|
||||
<Info className="w-2.5 h-2.5 sm:w-3 sm:h-3 opacity-60" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { ArrowLeft, ShieldCheck, Info } from 'lucide-react';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { DashboardHeader, TabId } from './DashboardHeader';
|
||||
import { formatDateMonthYear } from '../utils/formatters';
|
||||
import { ExecutiveSummaryTab } from './tabs/ExecutiveSummaryTab';
|
||||
import { DimensionAnalysisTab } from './tabs/DimensionAnalysisTab';
|
||||
import { AgenticReadinessTab } from './tabs/AgenticReadinessTab';
|
||||
import { RoadmapTab } from './tabs/RoadmapTab';
|
||||
import { Law10Tab } from './tabs/Law10Tab';
|
||||
import { MetodologiaDrawer } from './MetodologiaDrawer';
|
||||
import type { AnalysisData } from '../types';
|
||||
|
||||
@@ -33,6 +35,8 @@ export function DashboardTabs({
|
||||
return <AgenticReadinessTab data={data} onTabChange={setActiveTab} />;
|
||||
case 'roadmap':
|
||||
return <RoadmapTab data={data} />;
|
||||
case 'law10':
|
||||
return <Law10Tab data={data} onTabChange={setActiveTab} />;
|
||||
default:
|
||||
return <ExecutiveSummaryTab data={data} />;
|
||||
}
|
||||
@@ -61,6 +65,7 @@ export function DashboardTabs({
|
||||
title={title}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
onMetodologiaClick={() => setMetodologiaOpen(true)}
|
||||
/>
|
||||
|
||||
{/* Tab Content */}
|
||||
@@ -84,23 +89,7 @@ export function DashboardTabs({
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-sm text-slate-500">
|
||||
<span className="hidden sm:inline">Beyond Diagnosis - Contact Center Analytics Platform</span>
|
||||
<span className="sm:hidden text-xs">Beyond Diagnosis</span>
|
||||
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
||||
<span className="text-xs sm:text-sm">
|
||||
{data.tier ? data.tier.toUpperCase() : 'GOLD'} |
|
||||
{data.source === 'backend' ? 'Genesys' : data.source || 'synthetic'}
|
||||
</span>
|
||||
<span className="hidden sm:inline text-slate-300">|</span>
|
||||
{/* Badge Metodología */}
|
||||
<button
|
||||
onClick={() => setMetodologiaOpen(true)}
|
||||
className="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 bg-green-100 text-green-800 rounded-full text-[10px] sm:text-xs font-medium hover:bg-green-200 transition-colors cursor-pointer"
|
||||
>
|
||||
<ShieldCheck className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
|
||||
<span className="hidden md:inline">Metodología de Transformación de Datos aplicada</span>
|
||||
<span className="md:hidden">Metodología</span>
|
||||
<Info className="w-2.5 h-2.5 sm:w-3 sm:h-3 opacity-60" />
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-xs sm:text-sm text-slate-400 italic">{formatDateMonthYear()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -304,6 +304,111 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
);
|
||||
}
|
||||
|
||||
function CPICalculationSection({ totalCost, totalVolume, costPerHour = 20 }: { totalCost: number; totalVolume: number; costPerHour?: number }) {
|
||||
// Productivity factor: agents are ~70% productive (rest is breaks, training, after-call work, etc.)
|
||||
const effectiveProductivity = 0.70;
|
||||
|
||||
// CPI = Total Cost / Total Volume
|
||||
// El coste total ya incluye: TODOS los registros (noise + zombie + valid) y el factor de productividad
|
||||
const cpi = totalVolume > 0 ? totalCost / totalVolume : 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<BarChart3 className="w-5 h-5 text-emerald-600" />
|
||||
Coste por Interacción (CPI)
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
El CPI se calcula dividiendo el <strong>coste total</strong> entre el <strong>volumen de interacciones</strong>.
|
||||
El coste total incluye <em>todas</em> las interacciones (noise, zombie y válidas) porque todas se facturan,
|
||||
y aplica un factor de productividad del {(effectiveProductivity * 100).toFixed(0)}%.
|
||||
</p>
|
||||
|
||||
{/* Fórmula visual */}
|
||||
<div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4 mb-4">
|
||||
<div className="text-center mb-3">
|
||||
<span className="text-xs text-emerald-700 uppercase tracking-wider font-medium">Fórmula de Cálculo</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 text-lg font-mono flex-wrap">
|
||||
<span className="px-3 py-1 bg-white rounded border border-emerald-300">CPI</span>
|
||||
<span className="text-emerald-600">=</span>
|
||||
<span className="px-2 py-1 bg-blue-100 rounded text-blue-800 text-sm">Coste Total</span>
|
||||
<span className="text-emerald-600">÷</span>
|
||||
<span className="px-2 py-1 bg-amber-100 rounded text-amber-800 text-sm">Volumen Total</span>
|
||||
</div>
|
||||
<p className="text-[10px] text-center text-emerald-600 mt-2">
|
||||
El coste total usa (AHT segundos ÷ 3600) × coste/hora × volumen ÷ productividad
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cómo se calcula el coste total */}
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 mb-4">
|
||||
<div className="text-sm font-semibold text-slate-700 mb-2">¿Cómo se calcula el Coste Total?</div>
|
||||
<div className="bg-white rounded p-3 mb-3">
|
||||
<div className="flex items-center justify-center gap-2 text-sm font-mono flex-wrap">
|
||||
<span className="text-slate-600">Coste =</span>
|
||||
<span className="px-2 py-1 bg-blue-100 rounded text-blue-800 text-xs">(AHT seg ÷ 3600)</span>
|
||||
<span className="text-slate-400">×</span>
|
||||
<span className="px-2 py-1 bg-amber-100 rounded text-amber-800 text-xs">€{costPerHour}/h</span>
|
||||
<span className="text-slate-400">×</span>
|
||||
<span className="px-2 py-1 bg-gray-100 rounded text-gray-800 text-xs">Volumen</span>
|
||||
<span className="text-slate-400">÷</span>
|
||||
<span className="px-2 py-1 bg-purple-100 rounded text-purple-800 text-xs">{(effectiveProductivity * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600">
|
||||
El <strong>AHT</strong> está en segundos, se convierte a horas dividiendo por 3600.
|
||||
Incluye todas las interacciones que generan coste (noise + zombie + válidas).
|
||||
Solo se excluyen los abandonos porque no consumen tiempo de agente.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Componentes del coste horario */}
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="text-sm font-semibold text-amber-800">Coste por Hora del Agente (Fully Loaded)</div>
|
||||
<span className="text-xs bg-amber-200 text-amber-800 px-2 py-0.5 rounded-full font-medium">
|
||||
Valor introducido: €{costPerHour.toFixed(2)}/h
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-amber-700 mb-3">
|
||||
Este valor fue configurado en la pantalla de entrada de datos y debe incluir todos los costes asociados al agente:
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Salario bruto del agente</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Costes de seguridad social</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Licencias de software</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Infraestructura y puesto</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Supervisión y QA</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Formación y overhead</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-amber-600 mt-3 italic">
|
||||
💡 Si necesita ajustar este valor, puede volver a la pantalla de entrada de datos y modificarlo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BeforeAfterSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
const rows = [
|
||||
{
|
||||
@@ -528,6 +633,9 @@ function GuaranteesSection() {
|
||||
export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerProps) {
|
||||
// Calcular datos del resumen desde AnalysisData
|
||||
const totalRegistros = data.heatmapData?.reduce((sum, h) => sum + h.volume, 0) || 0;
|
||||
const totalCost = data.heatmapData?.reduce((sum, h) => sum + (h.annual_cost || 0), 0) || 0;
|
||||
// cost_volume: volumen usado para calcular coste (non-abandon), fallback a volume si no existe
|
||||
const totalCostVolume = data.heatmapData?.reduce((sum, h) => sum + (h.cost_volume || h.volume), 0) || totalRegistros;
|
||||
|
||||
// Calcular meses de histórico desde dateRange
|
||||
let mesesHistorico = 1;
|
||||
@@ -633,6 +741,11 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
|
||||
<SkillsMappingSection numSkillsNegocio={dataSummary.kpis.skillsNegocio} />
|
||||
<TaxonomySection data={dataSummary.taxonomia} />
|
||||
<KPIRedefinitionSection kpis={dataSummary.kpis} />
|
||||
<CPICalculationSection
|
||||
totalCost={totalCost}
|
||||
totalVolume={totalCostVolume}
|
||||
costPerHour={data.staticConfig?.cost_per_hour || 20}
|
||||
/>
|
||||
<BeforeAfterSection kpis={dataSummary.kpis} />
|
||||
<GuaranteesSection />
|
||||
</div>
|
||||
|
||||
@@ -81,13 +81,14 @@ const OpportunityMatrixPro: React.FC<OpportunityMatrixProProps> = ({ data, heatm
|
||||
};
|
||||
}, [dataWithPriority]);
|
||||
|
||||
// Dynamic title
|
||||
// Dynamic title - v4.3: Top 10 iniciativas por potencial económico
|
||||
const dynamicTitle = useMemo(() => {
|
||||
const { quickWins } = portfolioSummary;
|
||||
if (quickWins.count > 0) {
|
||||
return `${quickWins.count} Quick Wins pueden generar €${(quickWins.savings / 1000).toFixed(0)}K en ahorros con implementación en Q1-Q2`;
|
||||
const totalQueues = dataWithPriority.length;
|
||||
const totalSavings = portfolioSummary.totalSavings;
|
||||
if (totalQueues === 0) {
|
||||
return 'No hay iniciativas con potencial de ahorro identificadas';
|
||||
}
|
||||
return `Portfolio de ${dataWithPriority.length} oportunidades identificadas con potencial de €${(portfolioSummary.totalSavings / 1000).toFixed(0)}K`;
|
||||
return `Top ${totalQueues} iniciativas por potencial económico | Ahorro total: €${(totalSavings / 1000).toFixed(0)}K/año`;
|
||||
}, [portfolioSummary, dataWithPriority]);
|
||||
|
||||
const getQuadrantInfo = (impact: number, feasibility: number): QuadrantInfo => {
|
||||
@@ -160,21 +161,24 @@ const OpportunityMatrixPro: React.FC<OpportunityMatrixProProps> = ({ data, heatm
|
||||
<div id="opportunities" className="bg-white p-8 rounded-xl border border-slate-200 shadow-sm">
|
||||
{/* Header with Dynamic Title */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-bold text-2xl text-slate-800">Opportunity Matrix</h3>
|
||||
<div className="group relative">
|
||||
<HelpCircle size={18} className="text-slate-400 cursor-pointer" />
|
||||
<div className="absolute bottom-full mb-2 w-80 bg-slate-800 text-white text-xs rounded py-2 px-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none z-10">
|
||||
Prioriza iniciativas basadas en Impacto vs. Factibilidad. El tamaño de la burbuja representa el ahorro potencial. Los números indican la priorización estratégica. Click para ver detalles completos.
|
||||
<div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-slate-800"></div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-bold text-2xl text-slate-800">Opportunity Matrix - Top 10 Iniciativas</h3>
|
||||
<div className="group relative">
|
||||
<HelpCircle size={18} className="text-slate-400 cursor-pointer" />
|
||||
<div className="absolute bottom-full mb-2 w-80 bg-slate-800 text-white text-xs rounded py-2 px-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none z-10">
|
||||
Top 10 colas por potencial económico (todos los tiers). Eje X = Factibilidad (Agentic Score), Eje Y = Impacto (Ahorro TCO). Tamaño = Ahorro potencial. 🤖=AUTOMATE, 🤝=ASSIST, 📚=AUGMENT.
|
||||
<div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-slate-800"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 italic">Priorizadas por potencial de ahorro TCO (🤖 AUTOMATE, 🤝 ASSIST, 📚 AUGMENT)</p>
|
||||
</div>
|
||||
<p className="text-base text-slate-700 font-medium leading-relaxed mb-1">
|
||||
{dynamicTitle}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">
|
||||
Portfolio de Oportunidades | Análisis de {dataWithPriority.length} iniciativas identificadas
|
||||
{dataWithPriority.length} iniciativas identificadas | Ahorro TCO según tier (AUTOMATE 70%, ASSIST 30%, AUGMENT 15%)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -217,33 +221,33 @@ const OpportunityMatrixPro: React.FC<OpportunityMatrixProProps> = ({ data, heatm
|
||||
<div className="relative w-full h-[500px] border-l-2 border-b-2 border-slate-400 rounded-bl-lg bg-gradient-to-tr from-slate-50 to-white">
|
||||
{/* Y-axis Label */}
|
||||
<div className="absolute -left-20 top-1/2 -translate-y-1/2 -rotate-90 text-sm font-bold text-slate-700 flex items-center gap-2">
|
||||
<TrendingUp size={18} /> IMPACTO
|
||||
<TrendingUp size={18} /> IMPACTO (Ahorro TCO)
|
||||
</div>
|
||||
|
||||
|
||||
{/* X-axis Label */}
|
||||
<div className="absolute -bottom-14 left-1/2 -translate-x-1/2 text-sm font-bold text-slate-700 flex items-center gap-2">
|
||||
<Zap size={18} /> FACTIBILIDAD
|
||||
<Zap size={18} /> FACTIBILIDAD (Agentic Score)
|
||||
</div>
|
||||
|
||||
{/* Axis scale labels */}
|
||||
<div className="absolute -left-2 top-0 -translate-x-full text-xs text-slate-500 font-medium">
|
||||
Muy Alto
|
||||
Alto (10)
|
||||
</div>
|
||||
<div className="absolute -left-2 top-1/2 -translate-x-full -translate-y-1/2 text-xs text-slate-500 font-medium">
|
||||
Medio
|
||||
Medio (5)
|
||||
</div>
|
||||
<div className="absolute -left-2 bottom-0 -translate-x-full text-xs text-slate-500 font-medium">
|
||||
Bajo
|
||||
Bajo (1)
|
||||
</div>
|
||||
|
||||
|
||||
<div className="absolute left-0 -bottom-2 translate-y-full text-xs text-slate-500 font-medium">
|
||||
Muy Difícil
|
||||
0
|
||||
</div>
|
||||
<div className="absolute left-1/2 -bottom-2 -translate-x-1/2 translate-y-full text-xs text-slate-500 font-medium">
|
||||
Moderado
|
||||
5
|
||||
</div>
|
||||
<div className="absolute right-0 -bottom-2 translate-y-full text-xs text-slate-500 font-medium">
|
||||
Fácil
|
||||
10
|
||||
</div>
|
||||
|
||||
{/* Quadrant Lines */}
|
||||
@@ -364,22 +368,24 @@ const OpportunityMatrixPro: React.FC<OpportunityMatrixProProps> = ({ data, heatm
|
||||
|
||||
{/* Enhanced Legend */}
|
||||
<div className="mt-8 p-4 bg-slate-50 rounded-lg">
|
||||
<div className="flex flex-wrap items-center gap-6 text-xs">
|
||||
<span className="font-semibold text-slate-700">Tamaño de burbuja = Ahorro potencial:</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded-full bg-slate-400"></div>
|
||||
<span className="text-slate-700">Pequeño (<€50K)</span>
|
||||
<div className="flex flex-wrap items-center gap-4 text-xs">
|
||||
<span className="font-semibold text-slate-700">Tier:</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<span>🤖</span>
|
||||
<span className="text-emerald-600 font-medium">AUTOMATE</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-slate-400"></div>
|
||||
<span className="text-slate-700">Medio (€50-150K)</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<span>🤝</span>
|
||||
<span className="text-blue-600 font-medium">ASSIST</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-400"></div>
|
||||
<span className="text-slate-700">Grande (>€150K)</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<span>📚</span>
|
||||
<span className="text-amber-600 font-medium">AUGMENT</span>
|
||||
</div>
|
||||
<span className="ml-4 text-slate-500">|</span>
|
||||
<span className="font-semibold text-slate-700">Número = Prioridad estratégica</span>
|
||||
<span className="text-slate-400">|</span>
|
||||
<span className="font-semibold text-slate-700">Tamaño = Ahorro TCO</span>
|
||||
<span className="text-slate-400">|</span>
|
||||
<span className="font-semibold text-slate-700">Número = Ranking</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -447,10 +453,10 @@ const OpportunityMatrixPro: React.FC<OpportunityMatrixProProps> = ({ data, heatm
|
||||
|
||||
{/* Methodology Footer */}
|
||||
<MethodologyFooter
|
||||
sources="Análisis interno de procesos operacionales | Benchmarks de implementación: Gartner Magic Quadrant for CCaaS 2024, Forrester Wave Contact Center 2024"
|
||||
methodology="Impacto: Basado en % reducción de AHT, mejora de FCR, y reducción de costes operacionales | Factibilidad: Evaluación de complejidad técnica (40%), cambio organizacional (30%), inversión requerida (30%) | Priorización: Score = (Impacto/10) × (Factibilidad/10) × (Ahorro/Max Ahorro)"
|
||||
notes="Ahorros calculados en escenario conservador (base case) sin incluir upside potencial | ROI calculado a 3 años con tasa de descuento 10%"
|
||||
lastUpdated="Enero 2025"
|
||||
sources="Agentic Readiness Score (5 factores ponderados) | Modelo TCO con CPI diferenciado por tier"
|
||||
methodology="Factibilidad = Agentic Score (0-10) | Impacto = Ahorro TCO anual según tier: AUTOMATE (Vol/11×12×70%×€2.18), ASSIST (×30%×€0.83), AUGMENT (×15%×€0.33)"
|
||||
notes="Top 10 iniciativas ordenadas por potencial económico | CPI: Humano €2.33, Bot €0.15, Assist €1.50, Augment €2.00"
|
||||
lastUpdated="Enero 2026"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
623
frontend/components/OpportunityPrioritizer.tsx
Normal file
623
frontend/components/OpportunityPrioritizer.tsx
Normal file
@@ -0,0 +1,623 @@
|
||||
/**
|
||||
* OpportunityPrioritizer - v1.0
|
||||
*
|
||||
* Redesigned Opportunity Matrix that clearly shows:
|
||||
* 1. WHERE are the opportunities (ranked list with context)
|
||||
* 2. WHERE to START (highlighted #1 with full justification)
|
||||
* 3. WHY this prioritization (tier-based rationale + metrics)
|
||||
*
|
||||
* Design principles:
|
||||
* - Scannable in 5 seconds (executive summary)
|
||||
* - Actionable in 30 seconds (clear next steps)
|
||||
* - Deep-dive available (expandable details)
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Opportunity, DrilldownDataPoint, AgenticTier } from '../types';
|
||||
import {
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
TrendingUp,
|
||||
Zap,
|
||||
Clock,
|
||||
Users,
|
||||
Bot,
|
||||
Headphones,
|
||||
BookOpen,
|
||||
AlertTriangle,
|
||||
CheckCircle2,
|
||||
ArrowRight,
|
||||
Info,
|
||||
Target,
|
||||
DollarSign,
|
||||
BarChart3,
|
||||
Sparkles
|
||||
} from 'lucide-react';
|
||||
|
||||
interface OpportunityPrioritizerProps {
|
||||
opportunities: Opportunity[];
|
||||
drilldownData?: DrilldownDataPoint[];
|
||||
costPerHour?: number;
|
||||
}
|
||||
|
||||
interface EnrichedOpportunity extends Opportunity {
|
||||
rank: number;
|
||||
tier: AgenticTier;
|
||||
volume: number;
|
||||
cv_aht: number;
|
||||
transfer_rate: number;
|
||||
fcr_rate: number;
|
||||
agenticScore: number;
|
||||
timelineMonths: number;
|
||||
effortLevel: 'low' | 'medium' | 'high';
|
||||
riskLevel: 'low' | 'medium' | 'high';
|
||||
whyPrioritized: string[];
|
||||
nextSteps: string[];
|
||||
annualCost?: number;
|
||||
}
|
||||
|
||||
// Tier configuration
|
||||
const TIER_CONFIG: Record<AgenticTier, {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
borderColor: string;
|
||||
savingsRate: string;
|
||||
timeline: string;
|
||||
description: string;
|
||||
}> = {
|
||||
'AUTOMATE': {
|
||||
icon: <Bot size={18} />,
|
||||
label: 'Automatizar',
|
||||
color: 'text-emerald-700',
|
||||
bgColor: 'bg-emerald-50',
|
||||
borderColor: 'border-emerald-300',
|
||||
savingsRate: '70%',
|
||||
timeline: '3-6 meses',
|
||||
description: 'Automatización completa con agentes IA'
|
||||
},
|
||||
'ASSIST': {
|
||||
icon: <Headphones size={18} />,
|
||||
label: 'Asistir',
|
||||
color: 'text-blue-700',
|
||||
bgColor: 'bg-blue-50',
|
||||
borderColor: 'border-blue-300',
|
||||
savingsRate: '30%',
|
||||
timeline: '6-9 meses',
|
||||
description: 'Copilot IA para agentes humanos'
|
||||
},
|
||||
'AUGMENT': {
|
||||
icon: <BookOpen size={18} />,
|
||||
label: 'Optimizar',
|
||||
color: 'text-amber-700',
|
||||
bgColor: 'bg-amber-50',
|
||||
borderColor: 'border-amber-300',
|
||||
savingsRate: '15%',
|
||||
timeline: '9-12 meses',
|
||||
description: 'Estandarización y mejora de procesos'
|
||||
},
|
||||
'HUMAN-ONLY': {
|
||||
icon: <Users size={18} />,
|
||||
label: 'Humano',
|
||||
color: 'text-slate-600',
|
||||
bgColor: 'bg-slate-50',
|
||||
borderColor: 'border-slate-300',
|
||||
savingsRate: '0%',
|
||||
timeline: 'N/A',
|
||||
description: 'Requiere intervención humana'
|
||||
}
|
||||
};
|
||||
|
||||
const OpportunityPrioritizer: React.FC<OpportunityPrioritizerProps> = ({
|
||||
opportunities,
|
||||
drilldownData,
|
||||
costPerHour = 20
|
||||
}) => {
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [showAllOpportunities, setShowAllOpportunities] = useState(false);
|
||||
|
||||
// Enrich opportunities with drilldown data
|
||||
const enrichedOpportunities = useMemo((): EnrichedOpportunity[] => {
|
||||
if (!opportunities || opportunities.length === 0) return [];
|
||||
|
||||
// Create a lookup map from drilldown data
|
||||
const queueLookup = new Map<string, {
|
||||
tier: AgenticTier;
|
||||
volume: number;
|
||||
cv_aht: number;
|
||||
transfer_rate: number;
|
||||
fcr_rate: number;
|
||||
agenticScore: number;
|
||||
annualCost?: number;
|
||||
}>();
|
||||
|
||||
if (drilldownData) {
|
||||
drilldownData.forEach(skill => {
|
||||
skill.originalQueues?.forEach(q => {
|
||||
queueLookup.set(q.original_queue_id.toLowerCase(), {
|
||||
tier: q.tier || 'HUMAN-ONLY',
|
||||
volume: q.volume,
|
||||
cv_aht: q.cv_aht,
|
||||
transfer_rate: q.transfer_rate,
|
||||
fcr_rate: q.fcr_rate,
|
||||
agenticScore: q.agenticScore,
|
||||
annualCost: q.annualCost
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return opportunities.map((opp, index) => {
|
||||
// Extract queue name (remove tier emoji prefix)
|
||||
const cleanName = opp.name.replace(/^[^\w\s]+\s*/, '').toLowerCase();
|
||||
const lookupData = queueLookup.get(cleanName);
|
||||
|
||||
// Determine tier from emoji prefix or lookup
|
||||
let tier: AgenticTier = 'ASSIST';
|
||||
if (opp.name.startsWith('🤖')) tier = 'AUTOMATE';
|
||||
else if (opp.name.startsWith('🤝')) tier = 'ASSIST';
|
||||
else if (opp.name.startsWith('📚')) tier = 'AUGMENT';
|
||||
else if (lookupData) tier = lookupData.tier;
|
||||
|
||||
// Calculate effort and risk based on metrics
|
||||
const cv = lookupData?.cv_aht || 50;
|
||||
const transfer = lookupData?.transfer_rate || 15;
|
||||
const effortLevel: 'low' | 'medium' | 'high' =
|
||||
tier === 'AUTOMATE' && cv < 60 ? 'low' :
|
||||
tier === 'ASSIST' || cv < 80 ? 'medium' : 'high';
|
||||
|
||||
const riskLevel: 'low' | 'medium' | 'high' =
|
||||
cv < 50 && transfer < 15 ? 'low' :
|
||||
cv < 80 && transfer < 30 ? 'medium' : 'high';
|
||||
|
||||
// Timeline based on tier
|
||||
const timelineMonths = tier === 'AUTOMATE' ? 4 : tier === 'ASSIST' ? 7 : 10;
|
||||
|
||||
// Generate "why" explanation
|
||||
const whyPrioritized: string[] = [];
|
||||
if (opp.savings > 50000) whyPrioritized.push(`Alto ahorro potencial (€${(opp.savings / 1000).toFixed(0)}K/año)`);
|
||||
if (lookupData?.volume && lookupData.volume > 1000) whyPrioritized.push(`Alto volumen (${lookupData.volume.toLocaleString()} interacciones)`);
|
||||
if (tier === 'AUTOMATE') whyPrioritized.push('Proceso altamente predecible y repetitivo');
|
||||
if (cv < 60) whyPrioritized.push('Baja variabilidad en tiempos de gestión');
|
||||
if (transfer < 15) whyPrioritized.push('Baja tasa de transferencias');
|
||||
if (opp.feasibility >= 7) whyPrioritized.push('Alta factibilidad técnica');
|
||||
|
||||
// Generate next steps
|
||||
const nextSteps: string[] = [];
|
||||
if (tier === 'AUTOMATE') {
|
||||
nextSteps.push('Definir flujos conversacionales principales');
|
||||
nextSteps.push('Identificar integraciones necesarias (CRM, APIs)');
|
||||
nextSteps.push('Crear piloto con 10% del volumen');
|
||||
} else if (tier === 'ASSIST') {
|
||||
nextSteps.push('Mapear puntos de fricción del agente');
|
||||
nextSteps.push('Diseñar sugerencias contextuales');
|
||||
nextSteps.push('Piloto con equipo seleccionado');
|
||||
} else {
|
||||
nextSteps.push('Analizar causa raíz de variabilidad');
|
||||
nextSteps.push('Estandarizar procesos y scripts');
|
||||
nextSteps.push('Capacitar equipo en mejores prácticas');
|
||||
}
|
||||
|
||||
return {
|
||||
...opp,
|
||||
rank: index + 1,
|
||||
tier,
|
||||
volume: lookupData?.volume || Math.round(opp.savings / 10),
|
||||
cv_aht: cv,
|
||||
transfer_rate: transfer,
|
||||
fcr_rate: lookupData?.fcr_rate || 75,
|
||||
agenticScore: lookupData?.agenticScore || opp.feasibility,
|
||||
timelineMonths,
|
||||
effortLevel,
|
||||
riskLevel,
|
||||
whyPrioritized,
|
||||
nextSteps,
|
||||
annualCost: lookupData?.annualCost
|
||||
};
|
||||
});
|
||||
}, [opportunities, drilldownData]);
|
||||
|
||||
// Summary stats
|
||||
const summary = useMemo(() => {
|
||||
const totalSavings = enrichedOpportunities.reduce((sum, o) => sum + o.savings, 0);
|
||||
const byTier = {
|
||||
AUTOMATE: enrichedOpportunities.filter(o => o.tier === 'AUTOMATE'),
|
||||
ASSIST: enrichedOpportunities.filter(o => o.tier === 'ASSIST'),
|
||||
AUGMENT: enrichedOpportunities.filter(o => o.tier === 'AUGMENT')
|
||||
};
|
||||
const quickWins = enrichedOpportunities.filter(o => o.tier === 'AUTOMATE' && o.effortLevel === 'low');
|
||||
|
||||
return {
|
||||
totalSavings,
|
||||
totalVolume: enrichedOpportunities.reduce((sum, o) => sum + o.volume, 0),
|
||||
byTier,
|
||||
quickWinsCount: quickWins.length,
|
||||
quickWinsSavings: quickWins.reduce((sum, o) => sum + o.savings, 0)
|
||||
};
|
||||
}, [enrichedOpportunities]);
|
||||
|
||||
const displayedOpportunities = showAllOpportunities
|
||||
? enrichedOpportunities
|
||||
: enrichedOpportunities.slice(0, 5);
|
||||
|
||||
const topOpportunity = enrichedOpportunities[0];
|
||||
|
||||
if (!enrichedOpportunities.length) {
|
||||
return (
|
||||
<div className="bg-white p-8 rounded-xl border border-slate-200 text-center">
|
||||
<AlertTriangle className="mx-auto mb-4 text-amber-500" size={48} />
|
||||
<h3 className="text-lg font-semibold text-slate-700">No hay oportunidades identificadas</h3>
|
||||
<p className="text-slate-500 mt-2">Los datos actuales no muestran oportunidades de automatización viables.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm">
|
||||
{/* Header - matching app's visual style */}
|
||||
<div className="p-6 border-b border-slate-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-900">Oportunidades Priorizadas</h2>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
{enrichedOpportunities.length} iniciativas ordenadas por potencial de ahorro y factibilidad
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Executive Summary - Answer "Where are opportunities?" in 5 seconds */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-6 bg-slate-50 border-b border-slate-200">
|
||||
<div className="bg-white rounded-lg p-4 border border-slate-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 text-slate-500 text-xs mb-1">
|
||||
<DollarSign size={14} />
|
||||
<span>Ahorro Total Identificado</span>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-slate-800">
|
||||
€{(summary.totalSavings / 1000).toFixed(0)}K
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">anuales</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-emerald-50 rounded-lg p-4 border border-emerald-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 text-emerald-600 text-xs mb-1">
|
||||
<Bot size={14} />
|
||||
<span>Quick Wins (AUTOMATE)</span>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-emerald-700">
|
||||
{summary.byTier.AUTOMATE.length}
|
||||
</div>
|
||||
<div className="text-xs text-emerald-600">
|
||||
€{(summary.byTier.AUTOMATE.reduce((s, o) => s + o.savings, 0) / 1000).toFixed(0)}K en 3-6 meses
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 rounded-lg p-4 border border-blue-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 text-blue-600 text-xs mb-1">
|
||||
<Headphones size={14} />
|
||||
<span>Asistencia (ASSIST)</span>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-blue-700">
|
||||
{summary.byTier.ASSIST.length}
|
||||
</div>
|
||||
<div className="text-xs text-blue-600">
|
||||
€{(summary.byTier.ASSIST.reduce((s, o) => s + o.savings, 0) / 1000).toFixed(0)}K en 6-9 meses
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-amber-50 rounded-lg p-4 border border-amber-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 text-amber-600 text-xs mb-1">
|
||||
<BookOpen size={14} />
|
||||
<span>Optimización (AUGMENT)</span>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-amber-700">
|
||||
{summary.byTier.AUGMENT.length}
|
||||
</div>
|
||||
<div className="text-xs text-amber-600">
|
||||
€{(summary.byTier.AUGMENT.reduce((s, o) => s + o.savings, 0) / 1000).toFixed(0)}K en 9-12 meses
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* START HERE - Answer "Where do I start?" */}
|
||||
{topOpportunity && (
|
||||
<div className="p-6 bg-gradient-to-r from-emerald-50 to-green-50 border-b-2 border-emerald-200">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Sparkles className="text-emerald-600" size={20} />
|
||||
<span className="text-emerald-800 font-bold text-lg">EMPIEZA AQUÍ</span>
|
||||
<span className="bg-emerald-600 text-white text-xs px-2 py-0.5 rounded-full">Prioridad #1</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border-2 border-emerald-300 p-6 shadow-lg">
|
||||
<div className="flex flex-col lg:flex-row lg:items-start gap-6">
|
||||
{/* Left: Main info */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className={`p-2 rounded-lg ${TIER_CONFIG[topOpportunity.tier].bgColor}`}>
|
||||
{TIER_CONFIG[topOpportunity.tier].icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-slate-800">
|
||||
{topOpportunity.name.replace(/^[^\w\s]+\s*/, '')}
|
||||
</h3>
|
||||
<span className={`text-sm font-medium ${TIER_CONFIG[topOpportunity.tier].color}`}>
|
||||
{TIER_CONFIG[topOpportunity.tier].label} • {TIER_CONFIG[topOpportunity.tier].description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Key metrics */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||||
<div className="bg-green-50 rounded-lg p-3">
|
||||
<div className="text-xs text-green-600 mb-1">Ahorro Anual</div>
|
||||
<div className="text-xl font-bold text-green-700">
|
||||
€{(topOpportunity.savings / 1000).toFixed(0)}K
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-slate-50 rounded-lg p-3">
|
||||
<div className="text-xs text-slate-500 mb-1">Volumen</div>
|
||||
<div className="text-xl font-bold text-slate-700">
|
||||
{topOpportunity.volume.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-slate-50 rounded-lg p-3">
|
||||
<div className="text-xs text-slate-500 mb-1">Timeline</div>
|
||||
<div className="text-xl font-bold text-slate-700">
|
||||
{topOpportunity.timelineMonths} meses
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-slate-50 rounded-lg p-3">
|
||||
<div className="text-xs text-slate-500 mb-1">Agentic Score</div>
|
||||
<div className="text-xl font-bold text-slate-700">
|
||||
{topOpportunity.agenticScore.toFixed(1)}/10
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Why this is #1 */}
|
||||
<div className="mb-4">
|
||||
<h4 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<Info size={14} />
|
||||
¿Por qué es la prioridad #1?
|
||||
</h4>
|
||||
<ul className="space-y-1">
|
||||
{topOpportunity.whyPrioritized.slice(0, 4).map((reason, i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm text-slate-600">
|
||||
<CheckCircle2 size={14} className="text-emerald-500 flex-shrink-0" />
|
||||
{reason}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Next steps */}
|
||||
<div className="lg:w-80 bg-emerald-50 rounded-lg p-4 border border-emerald-200">
|
||||
<h4 className="text-sm font-semibold text-emerald-800 mb-3 flex items-center gap-2">
|
||||
<ArrowRight size={14} />
|
||||
Próximos Pasos
|
||||
</h4>
|
||||
<ol className="space-y-2">
|
||||
{topOpportunity.nextSteps.map((step, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-sm text-emerald-700">
|
||||
<span className="bg-emerald-600 text-white w-5 h-5 rounded-full flex items-center justify-center text-xs flex-shrink-0 mt-0.5">
|
||||
{i + 1}
|
||||
</span>
|
||||
{step}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<button className="mt-4 w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-lg transition-colors flex items-center justify-center gap-2">
|
||||
Ver Detalle Completo
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Full Opportunity List - Answer "What else?" */}
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||
<BarChart3 size={20} />
|
||||
Todas las Oportunidades Priorizadas
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{displayedOpportunities.slice(1).map((opp) => (
|
||||
<motion.div
|
||||
key={opp.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={`border rounded-lg overflow-hidden transition-all ${
|
||||
expandedId === opp.id ? 'border-blue-300 shadow-md' : 'border-slate-200 hover:border-slate-300'
|
||||
}`}
|
||||
>
|
||||
{/* Collapsed view */}
|
||||
<div
|
||||
className="p-4 cursor-pointer hover:bg-slate-50 transition-colors"
|
||||
onClick={() => setExpandedId(expandedId === opp.id ? null : opp.id)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Rank */}
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg ${
|
||||
opp.rank <= 3 ? 'bg-emerald-100 text-emerald-700' :
|
||||
opp.rank <= 6 ? 'bg-blue-100 text-blue-700' :
|
||||
'bg-slate-100 text-slate-600'
|
||||
}`}>
|
||||
#{opp.rank}
|
||||
</div>
|
||||
|
||||
{/* Tier icon and name */}
|
||||
<div className={`p-2 rounded-lg ${TIER_CONFIG[opp.tier].bgColor}`}>
|
||||
{TIER_CONFIG[opp.tier].icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-semibold text-slate-800 truncate">
|
||||
{opp.name.replace(/^[^\w\s]+\s*/, '')}
|
||||
</h4>
|
||||
<span className={`text-xs ${TIER_CONFIG[opp.tier].color}`}>
|
||||
{TIER_CONFIG[opp.tier].label} • {TIER_CONFIG[opp.tier].timeline}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Quick stats */}
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
<div className="text-right">
|
||||
<div className="text-xs text-slate-500">Ahorro</div>
|
||||
<div className="font-bold text-green-600">€{(opp.savings / 1000).toFixed(0)}K</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-xs text-slate-500">Volumen</div>
|
||||
<div className="font-semibold text-slate-700">{opp.volume.toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-xs text-slate-500">Score</div>
|
||||
<div className="font-semibold text-slate-700">{opp.agenticScore.toFixed(1)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual bar: Value vs Effort */}
|
||||
<div className="hidden lg:block w-32">
|
||||
<div className="text-xs text-slate-500 mb-1">Valor / Esfuerzo</div>
|
||||
<div className="flex h-2 rounded-full overflow-hidden bg-slate-100">
|
||||
<div
|
||||
className="bg-emerald-500 transition-all"
|
||||
style={{ width: `${Math.min(100, opp.impact * 10)}%` }}
|
||||
/>
|
||||
<div
|
||||
className="bg-amber-400 transition-all"
|
||||
style={{ width: `${Math.min(100 - opp.impact * 10, (10 - opp.feasibility) * 10)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] text-slate-400 mt-0.5">
|
||||
<span>Valor</span>
|
||||
<span>Esfuerzo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expand icon */}
|
||||
<motion.div
|
||||
animate={{ rotate: expandedId === opp.id ? 90 : 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<ChevronRight className="text-slate-400" size={20} />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded details */}
|
||||
<AnimatePresence>
|
||||
{expandedId === opp.id && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="p-4 bg-slate-50 border-t border-slate-200">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Why prioritized */}
|
||||
<div>
|
||||
<h5 className="text-sm font-semibold text-slate-700 mb-2">¿Por qué esta posición?</h5>
|
||||
<ul className="space-y-1">
|
||||
{opp.whyPrioritized.map((reason, i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm text-slate-600">
|
||||
<CheckCircle2 size={12} className="text-emerald-500 flex-shrink-0" />
|
||||
{reason}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Metrics */}
|
||||
<div>
|
||||
<h5 className="text-sm font-semibold text-slate-700 mb-2">Métricas Clave</h5>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="bg-white rounded p-2 border border-slate-200">
|
||||
<div className="text-xs text-slate-500">CV AHT</div>
|
||||
<div className="font-semibold text-slate-700">{opp.cv_aht.toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="bg-white rounded p-2 border border-slate-200">
|
||||
<div className="text-xs text-slate-500">Transfer Rate</div>
|
||||
<div className="font-semibold text-slate-700">{opp.transfer_rate.toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="bg-white rounded p-2 border border-slate-200">
|
||||
<div className="text-xs text-slate-500">FCR</div>
|
||||
<div className="font-semibold text-slate-700">{opp.fcr_rate.toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="bg-white rounded p-2 border border-slate-200">
|
||||
<div className="text-xs text-slate-500">Riesgo</div>
|
||||
<div className={`font-semibold ${
|
||||
opp.riskLevel === 'low' ? 'text-emerald-600' :
|
||||
opp.riskLevel === 'medium' ? 'text-amber-600' : 'text-red-600'
|
||||
}`}>
|
||||
{opp.riskLevel === 'low' ? 'Bajo' : opp.riskLevel === 'medium' ? 'Medio' : 'Alto'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Next steps */}
|
||||
<div className="mt-4 pt-4 border-t border-slate-200">
|
||||
<h5 className="text-sm font-semibold text-slate-700 mb-2">Próximos Pasos</h5>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{opp.nextSteps.map((step, i) => (
|
||||
<span key={i} className="bg-white border border-slate-200 rounded-full px-3 py-1 text-xs text-slate-600">
|
||||
{i + 1}. {step}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Show more button */}
|
||||
{enrichedOpportunities.length > 5 && (
|
||||
<button
|
||||
onClick={() => setShowAllOpportunities(!showAllOpportunities)}
|
||||
className="mt-4 w-full py-3 border border-slate-200 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{showAllOpportunities ? (
|
||||
<>
|
||||
<ChevronDown size={16} className="rotate-180" />
|
||||
Mostrar menos
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown size={16} />
|
||||
Ver {enrichedOpportunities.length - 5} oportunidades más
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Methodology note */}
|
||||
<div className="px-6 pb-6">
|
||||
<div className="bg-slate-50 rounded-lg p-4 text-xs text-slate-500">
|
||||
<div className="flex items-start gap-2">
|
||||
<Info size={14} className="flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<strong>Metodología de priorización:</strong> Las oportunidades se ordenan por potencial de ahorro TCO (volumen × tasa de contención × diferencial CPI).
|
||||
La clasificación de tier (AUTOMATE/ASSIST/AUGMENT) se basa en el Agentic Readiness Score considerando predictibilidad (CV AHT),
|
||||
resolutividad (FCR + Transfer), volumen, calidad de datos y simplicidad del proceso.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OpportunityPrioritizer;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ChevronRight, TrendingUp, TrendingDown, Minus, AlertTriangle, Lightbulb, DollarSign } from 'lucide-react';
|
||||
import { ChevronRight, TrendingUp, TrendingDown, Minus, AlertTriangle, Lightbulb, DollarSign, Clock } from 'lucide-react';
|
||||
import type { AnalysisData, DimensionAnalysis, Finding, Recommendation, HeatmapDataPoint } from '../../types';
|
||||
import {
|
||||
Card,
|
||||
@@ -20,7 +20,7 @@ interface DimensionAnalysisTabProps {
|
||||
data: AnalysisData;
|
||||
}
|
||||
|
||||
// ========== ANÁLISIS CAUSAL CON IMPACTO ECONÓMICO ==========
|
||||
// ========== HALLAZGO CLAVE CON IMPACTO ECONÓMICO ==========
|
||||
|
||||
interface CausalAnalysis {
|
||||
finding: string;
|
||||
@@ -34,20 +34,44 @@ interface CausalAnalysis {
|
||||
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 análisis causal basado en dimensión y datos
|
||||
// Genera hallazgo clave basado en dimensión y datos
|
||||
function generateCausalAnalysis(
|
||||
dimension: DimensionAnalysis,
|
||||
heatmapData: HeatmapDataPoint[],
|
||||
economicModel: { currentAnnualCost: number }
|
||||
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);
|
||||
|
||||
// v3.11: CPI basado en modelo TCO (€2.33/interacción)
|
||||
// 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;
|
||||
const CPI = totalVolume > 0 ? economicModel.currentAnnualCost / (totalVolume * 12) : CPI_TCO;
|
||||
// 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
|
||||
@@ -56,8 +80,10 @@ function generateCausalAnalysis(
|
||||
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 * h.volume, 0) / totalVolume
|
||||
? 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
|
||||
@@ -71,77 +97,112 @@ function generateCausalAnalysis(
|
||||
|
||||
// Skills con problemas específicos
|
||||
const skillsHighCV = heatmapData.filter(h => (h.variability?.cv_aht || 0) > 100);
|
||||
const skillsLowFCR = heatmapData.filter(h => h.metrics.fcr < 50);
|
||||
// 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':
|
||||
// Análisis de variabilidad AHT
|
||||
if (avgCVAHT > 80) {
|
||||
const inefficiencyPct = Math.min(0.15, (avgCVAHT - 60) / 200);
|
||||
const inefficiencyCost = Math.round(economicModel.currentAnnualCost * inefficiencyPct);
|
||||
// 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: `Variabilidad AHT elevada: CV ${avgCVAHT.toFixed(0)}% (benchmark: <60%)`,
|
||||
probableCause: skillsHighCV.length > 0
|
||||
? `Falta de scripts estandarizados en ${skillsHighCV.slice(0, 3).map(s => s.skill).join(', ')}. Agentes manejan casos similares de formas muy diferentes.`
|
||||
: 'Procesos no documentados y falta de guías de atención claras.',
|
||||
economicImpact: inefficiencyCost,
|
||||
impactFormula: `Coste anual × ${(inefficiencyPct * 100).toFixed(1)}% ineficiencia = €${(economicModel.currentAnnualCost/1000).toFixed(0)}K × ${(inefficiencyPct * 100).toFixed(1)}%`,
|
||||
recommendation: 'Crear playbooks por tipología de consulta y certificar agentes en procesos estándar.',
|
||||
severity: avgCVAHT > 120 ? 'critical' : 'warning',
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
// Análisis de AHT absoluto
|
||||
if (avgAHT > 420) {
|
||||
const excessSeconds = avgAHT - 360;
|
||||
const excessCost = Math.round((excessSeconds / 3600) * totalVolume * 12 * 25);
|
||||
} else {
|
||||
// AHT dentro de benchmark - mostrar estado positivo
|
||||
analyses.push({
|
||||
finding: `AHT elevado: ${Math.floor(avgAHT / 60)}:${String(Math.round(avgAHT) % 60).padStart(2, '0')} (benchmark: 6:00)`,
|
||||
probableCause: 'Sistemas de información fragmentados, búsquedas manuales excesivas, o falta de herramientas de asistencia al agente.',
|
||||
economicImpact: excessCost,
|
||||
impactFormula: `Exceso ${Math.round(excessSeconds)}s × ${totalVolume.toLocaleString()} int/mes × 12 × €25/h`,
|
||||
recommendation: 'Implementar vista unificada de cliente y herramientas de sugerencia automática.',
|
||||
severity: avgAHT > 540 ? 'critical' : 'warning',
|
||||
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 de FCR
|
||||
// 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) {
|
||||
const recontactRate = (100 - avgFCR) / 100;
|
||||
const recontactCost = Math.round(totalVolume * 12 * recontactRate * CPI_TCO);
|
||||
analyses.push({
|
||||
finding: `FCR bajo: ${avgFCR.toFixed(0)}% (benchmark: >75%)`,
|
||||
probableCause: skillsLowFCR.length > 0
|
||||
? `Agentes sin autonomía para resolver en ${skillsLowFCR.slice(0, 2).map(s => s.skill).join(', ')}. Políticas de escalado excesivamente restrictivas.`
|
||||
: 'Falta de información completa en primer contacto o limitaciones de autoridad del agente.',
|
||||
economicImpact: recontactCost,
|
||||
impactFormula: `${totalVolume.toLocaleString()} int × 12 × ${(recontactRate * 100).toFixed(0)}% recontactos × €${CPI_TCO}/int`,
|
||||
recommendation: 'Empoderar agentes con mayor autoridad de resolución y crear Knowledge Base contextual.',
|
||||
severity: avgFCR < 50 ? 'critical' : 'warning',
|
||||
hasRealData: true
|
||||
});
|
||||
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.`;
|
||||
}
|
||||
|
||||
// Análisis de transferencias
|
||||
if (avgTransferRate > 15) {
|
||||
const transferCost = Math.round(totalVolume * 12 * (avgTransferRate / 100) * CPI_TCO * 0.5);
|
||||
analyses.push({
|
||||
finding: `Tasa de transferencias: ${avgTransferRate.toFixed(1)}% (benchmark: <10%)`,
|
||||
probableCause: skillsHighTransfer.length > 0
|
||||
? `Routing inicial incorrecto hacia ${skillsHighTransfer.slice(0, 2).map(s => s.skill).join(', ')}. IVR no identifica correctamente la intención del cliente.`
|
||||
: 'Reglas de enrutamiento desactualizadas o skills mal definidos.',
|
||||
economicImpact: transferCost,
|
||||
impactFormula: `${totalVolume.toLocaleString()} int × 12 × ${avgTransferRate.toFixed(1)}% × €${CPI_TCO} × 50% coste adicional`,
|
||||
recommendation: 'Revisar árbol de IVR, actualizar reglas de ACD y capacitar agentes en resolución integral.',
|
||||
severity: avgTransferRate > 25 ? 'critical' : 'warning',
|
||||
hasRealData: true
|
||||
});
|
||||
// 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':
|
||||
@@ -149,13 +210,16 @@ function generateCausalAnalysis(
|
||||
const topSkill = [...heatmapData].sort((a, b) => b.volume - a.volume)[0];
|
||||
const topSkillPct = topSkill ? (topSkill.volume / totalVolume) * 100 : 0;
|
||||
if (topSkillPct > 40 && topSkill) {
|
||||
const deflectionPotential = Math.round(topSkill.volume * 12 * CPI_TCO * 0.20);
|
||||
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: 'Dependencia excesiva de un skill puede indicar oportunidad de autoservicio o automatización parcial.',
|
||||
probableCause: `Alta concentración en un skill indica consultas repetitivas con potencial de automatización.`,
|
||||
economicImpact: deflectionPotential,
|
||||
impactFormula: `${topSkill.volume.toLocaleString()} int × 12 × €${CPI_TCO} × 20% deflexión potencial`,
|
||||
recommendation: `Analizar top consultas de ${topSkill.skill} para identificar candidatas a deflexión digital o FAQ automatizado.`,
|
||||
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
|
||||
});
|
||||
@@ -163,65 +227,102 @@ function generateCausalAnalysis(
|
||||
break;
|
||||
|
||||
case 'complexity_predictability':
|
||||
// v3.11: Análisis de complejidad basado en hold time y CV
|
||||
if (avgHoldTime > 45) {
|
||||
const excessHold = avgHoldTime - 30;
|
||||
const holdCost = Math.round((excessHold / 3600) * totalVolume * 12 * 25);
|
||||
// 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: `Hold time elevado: ${avgHoldTime.toFixed(0)}s promedio (benchmark: <30s)`,
|
||||
probableCause: 'Consultas complejas requieren búsqueda de información durante la llamada. Posible falta de acceso rápido a datos o sistemas.',
|
||||
economicImpact: holdCost,
|
||||
impactFormula: `Exceso ${Math.round(excessHold)}s × ${totalVolume.toLocaleString()} int × 12 × €25/h`,
|
||||
recommendation: 'Implementar acceso contextual a información del cliente y reducir sistemas fragmentados.',
|
||||
severity: avgHoldTime > 60 ? 'critical' : 'warning',
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
if (avgCVAHT > 100) {
|
||||
// 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: `Alta impredecibilidad: CV AHT ${avgCVAHT.toFixed(0)}% (benchmark: <75%)`,
|
||||
probableCause: 'Procesos con alta variabilidad dificultan la planificación de recursos y el staffing.',
|
||||
economicImpact: Math.round(economicModel.currentAnnualCost * 0.03),
|
||||
impactFormula: `~3% del coste operativo por ineficiencia de staffing`,
|
||||
recommendation: 'Segmentar procesos por complejidad y estandarizar los más frecuentes.',
|
||||
severity: 'warning',
|
||||
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':
|
||||
// v3.11: Solo generar análisis si hay datos de CSAT reales
|
||||
// Solo generar análisis si hay datos de CSAT reales
|
||||
if (avgCSAT > 0) {
|
||||
if (avgCSAT < 70) {
|
||||
// Estimación conservadora: impacto en retención
|
||||
const churnRisk = Math.round(totalVolume * 12 * 0.02 * 50); // 2% churn × €50 valor medio
|
||||
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: 'Experiencia del cliente subóptima puede estar relacionada con tiempos de espera, resolución incompleta, o trato del agente.',
|
||||
probableCause: 'Clientes insatisfechos por esperas, falta de resolución o experiencia de atención deficiente.',
|
||||
economicImpact: churnRisk,
|
||||
impactFormula: `${totalVolume.toLocaleString()} clientes × 12 × 2% riesgo churn × €50 valor`,
|
||||
recommendation: 'Implementar programa de voz del cliente (VoC) y cerrar loop de feedback.',
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
// Si no hay CSAT, no generamos análisis falso
|
||||
break;
|
||||
|
||||
case 'economy_cpi':
|
||||
// Análisis de CPI
|
||||
if (CPI > 3.5) {
|
||||
const excessCPI = CPI - CPI_TCO;
|
||||
const potentialSavings = Math.round(totalVolume * 12 * excessCPI);
|
||||
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: 'Combinación de AHT alto, baja productividad efectiva, o costes de personal por encima del mercado.',
|
||||
probableCause: 'Coste por interacción elevado por AHT alto, baja ocupación o estructura de costes ineficiente.',
|
||||
economicImpact: potentialSavings,
|
||||
impactFormula: `${totalVolume.toLocaleString()} int × 12 × €${excessCPI.toFixed(2)} exceso CPI`,
|
||||
recommendation: 'Revisar mix de canales, optimizar procesos para reducir AHT y evaluar modelo de staffing.',
|
||||
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
|
||||
});
|
||||
@@ -362,11 +463,11 @@ function DimensionCard({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Análisis Causal Completo - Solo si hay datos */}
|
||||
{/* Hallazgo Clave - Solo si hay datos */}
|
||||
{dimension.score >= 0 && causalAnalyses.length > 0 && (
|
||||
<div className="p-4 space-y-3">
|
||||
<h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Análisis Causal
|
||||
Hallazgo Clave
|
||||
</h4>
|
||||
{causalAnalyses.map((analysis, idx) => {
|
||||
const config = getSeverityConfig(analysis.severity);
|
||||
@@ -395,10 +496,18 @@ function DimensionCard({
|
||||
<span className="text-xs font-bold text-red-600">
|
||||
{formatCurrency(analysis.economicImpact)}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">impacto anual estimado</span>
|
||||
<span className="text-xs text-gray-500">impacto anual (coste del problema)</span>
|
||||
<span className="text-xs text-gray-400">i</span>
|
||||
</div>
|
||||
|
||||
{/* Ahorro de tiempo - da credibilidad al cálculo económico */}
|
||||
{analysis.timeSavings && (
|
||||
<div className="ml-6 mb-2 flex items-center gap-2">
|
||||
<Clock className="w-3 h-3 text-blue-500" />
|
||||
<span className="text-xs text-blue-700">{analysis.timeSavings}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recomendación inline */}
|
||||
<div className="ml-6 p-2 bg-white rounded border border-gray-200">
|
||||
<div className="flex items-start gap-2">
|
||||
@@ -412,7 +521,7 @@ function DimensionCard({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Fallback: Hallazgos originales si no hay análisis causal - Solo si hay datos */}
|
||||
{/* Fallback: Hallazgos originales si no hay hallazgo clave - Solo si hay datos */}
|
||||
{dimension.score >= 0 && causalAnalyses.length === 0 && findings.length > 0 && (
|
||||
<div className="p-4">
|
||||
<h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
|
||||
@@ -445,7 +554,7 @@ function DimensionCard({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recommendations Preview - Solo si no hay análisis causal y hay datos */}
|
||||
{/* Recommendations Preview - Solo si no hay hallazgo clave y hay datos */}
|
||||
{dimension.score >= 0 && causalAnalyses.length === 0 && recommendations.length > 0 && (
|
||||
<div className="px-4 pb-4">
|
||||
<div className="p-3 bg-blue-50 rounded-lg border border-blue-100">
|
||||
@@ -473,9 +582,9 @@ export function DimensionAnalysisTab({ data }: DimensionAnalysisTabProps) {
|
||||
const getRecommendationsForDimension = (dimensionId: string) =>
|
||||
data.recommendations.filter(r => r.dimensionId === dimensionId);
|
||||
|
||||
// Generar análisis causal para cada dimensión
|
||||
// Generar hallazgo clave para cada dimensión
|
||||
const getCausalAnalysisForDimension = (dimension: DimensionAnalysis) =>
|
||||
generateCausalAnalysis(dimension, data.heatmapData, data.economicModel);
|
||||
generateCausalAnalysis(dimension, data.heatmapData, data.economicModel, data.staticConfig, data.dateRange);
|
||||
|
||||
// Calcular impacto total de todas las dimensiones con datos
|
||||
const impactoTotal = coreDimensions
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
1801
frontend/components/tabs/Law10Tab.tsx
Normal file
1801
frontend/components/tabs/Law10Tab.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@@ -24,6 +24,8 @@ import {
|
||||
formatNumber,
|
||||
formatPercent,
|
||||
} from '../../config/designSystem';
|
||||
import OpportunityMatrixPro from '../OpportunityMatrixPro';
|
||||
import OpportunityPrioritizer from '../OpportunityPrioritizer';
|
||||
|
||||
interface RoadmapTabProps {
|
||||
data: AnalysisData;
|
||||
@@ -372,12 +374,6 @@ const formatROI = (roi: number, roiAjustado: number): {
|
||||
return { text: roiDisplay, showAjustado, isHighWarning };
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number): string => {
|
||||
if (value >= 1000000) return `€${(value / 1000000).toFixed(1)}M`;
|
||||
if (value >= 1000) return `€${Math.round(value / 1000)}K`;
|
||||
return `€${value.toLocaleString()}`;
|
||||
};
|
||||
|
||||
// ========== COMPONENTE: MAPA DE OPORTUNIDADES v3.5 ==========
|
||||
// Ejes actualizados:
|
||||
// - X: FACTIBILIDAD = Score Agentic Readiness (0-10)
|
||||
@@ -415,24 +411,31 @@ const CPI_CONFIG = {
|
||||
RATE_AUGMENT: 0.15 // 15% mejora en optimización
|
||||
};
|
||||
|
||||
// v3.6: Calcular ahorro TCO realista con fórmula explícita
|
||||
// Período de datos: el volumen corresponde a 11 meses, no es mensual
|
||||
const DATA_PERIOD_MONTHS = 11;
|
||||
|
||||
// v4.2: Calcular ahorro TCO realista con fórmula explícita
|
||||
// IMPORTANTE: El volumen es de 11 meses, se convierte a anual: (Vol/11) × 12
|
||||
function calculateTCOSavings(volume: number, tier: AgenticTier): number {
|
||||
if (volume === 0) return 0;
|
||||
|
||||
const { CPI_HUMANO, CPI_BOT, CPI_ASSIST, CPI_AUGMENT, RATE_AUTOMATE, RATE_ASSIST, RATE_AUGMENT } = CPI_CONFIG;
|
||||
|
||||
// Convertir volumen del período (11 meses) a volumen anual
|
||||
const annualVolume = (volume / DATA_PERIOD_MONTHS) * 12;
|
||||
|
||||
switch (tier) {
|
||||
case 'AUTOMATE':
|
||||
// Ahorro = Vol × 12 × 70% × (CPI_humano - CPI_bot)
|
||||
return Math.round(volume * 12 * RATE_AUTOMATE * (CPI_HUMANO - CPI_BOT));
|
||||
// Ahorro = VolAnual × 70% × (CPI_humano - CPI_bot)
|
||||
return Math.round(annualVolume * RATE_AUTOMATE * (CPI_HUMANO - CPI_BOT));
|
||||
|
||||
case 'ASSIST':
|
||||
// Ahorro = Vol × 12 × 30% × (CPI_humano - CPI_assist)
|
||||
return Math.round(volume * 12 * RATE_ASSIST * (CPI_HUMANO - CPI_ASSIST));
|
||||
// Ahorro = VolAnual × 30% × (CPI_humano - CPI_assist)
|
||||
return Math.round(annualVolume * RATE_ASSIST * (CPI_HUMANO - CPI_ASSIST));
|
||||
|
||||
case 'AUGMENT':
|
||||
// Ahorro = Vol × 12 × 15% × (CPI_humano - CPI_augment)
|
||||
return Math.round(volume * 12 * RATE_AUGMENT * (CPI_HUMANO - CPI_AUGMENT));
|
||||
// Ahorro = VolAnual × 15% × (CPI_humano - CPI_augment)
|
||||
return Math.round(annualVolume * RATE_AUGMENT * (CPI_HUMANO - CPI_AUGMENT));
|
||||
|
||||
case 'HUMAN-ONLY':
|
||||
default:
|
||||
@@ -1736,12 +1739,13 @@ export function RoadmapTab({ data }: RoadmapTabProps) {
|
||||
const totalVolume = Object.values(tierVolumes).reduce((a, b) => a + b, 0) || 1;
|
||||
|
||||
// Calcular ahorros potenciales por tier usando fórmula TCO
|
||||
// IMPORTANTE: El volumen es de 11 meses, se convierte a anual: (Vol/11) × 12
|
||||
const { CPI_HUMANO, CPI_BOT, CPI_ASSIST, CPI_AUGMENT, RATE_AUTOMATE, RATE_ASSIST, RATE_AUGMENT } = CPI_CONFIG;
|
||||
|
||||
const potentialSavings = {
|
||||
AUTOMATE: Math.round(tierVolumes.AUTOMATE * 12 * RATE_AUTOMATE * (CPI_HUMANO - CPI_BOT)),
|
||||
ASSIST: Math.round(tierVolumes.ASSIST * 12 * RATE_ASSIST * (CPI_HUMANO - CPI_ASSIST)),
|
||||
AUGMENT: Math.round(tierVolumes.AUGMENT * 12 * RATE_AUGMENT * (CPI_HUMANO - CPI_AUGMENT))
|
||||
AUTOMATE: Math.round((tierVolumes.AUTOMATE / DATA_PERIOD_MONTHS) * 12 * RATE_AUTOMATE * (CPI_HUMANO - CPI_BOT)),
|
||||
ASSIST: Math.round((tierVolumes.ASSIST / DATA_PERIOD_MONTHS) * 12 * RATE_ASSIST * (CPI_HUMANO - CPI_ASSIST)),
|
||||
AUGMENT: Math.round((tierVolumes.AUGMENT / DATA_PERIOD_MONTHS) * 12 * RATE_AUGMENT * (CPI_HUMANO - CPI_AUGMENT))
|
||||
};
|
||||
|
||||
// Colas que necesitan Wave 1 (Tier 3 + 4)
|
||||
@@ -1797,7 +1801,7 @@ export function RoadmapTab({ data }: RoadmapTabProps) {
|
||||
borderColor: 'border-amber-200',
|
||||
inversionSetup: 35000,
|
||||
costoRecurrenteAnual: 40000,
|
||||
ahorroAnual: potentialSavings.AUGMENT || 58000, // 15% efficiency
|
||||
ahorroAnual: potentialSavings.AUGMENT, // 15% efficiency - calculado desde datos reales
|
||||
esCondicional: true,
|
||||
condicion: 'Requiere CV ≤75% post-Wave 1 en colas target',
|
||||
porQueNecesario: `Implementar herramientas de soporte para colas Tier 3 (Score 3.5-5.5). Objetivo: elevar score a ≥5.5 para habilitar Wave 3. Foco en ${tierCounts.AUGMENT.length} colas con ${tierVolumes.AUGMENT.toLocaleString()} int/mes.`,
|
||||
@@ -1830,7 +1834,7 @@ export function RoadmapTab({ data }: RoadmapTabProps) {
|
||||
borderColor: 'border-blue-200',
|
||||
inversionSetup: 70000,
|
||||
costoRecurrenteAnual: 78000,
|
||||
ahorroAnual: potentialSavings.ASSIST || 145000, // 30% efficiency
|
||||
ahorroAnual: potentialSavings.ASSIST, // 30% efficiency - calculado desde datos reales
|
||||
esCondicional: true,
|
||||
condicion: 'Requiere Score ≥5.5 Y CV ≤90% Y Transfer ≤30%',
|
||||
porQueNecesario: `Copilot IA para agentes en colas Tier 2. Sugerencias en tiempo real, autocompletado, next-best-action. Objetivo: elevar score a ≥7.5 para Wave 4. Target: ${tierCounts.ASSIST.length} colas con ${tierVolumes.ASSIST.toLocaleString()} int/mes.`,
|
||||
@@ -1864,7 +1868,7 @@ export function RoadmapTab({ data }: RoadmapTabProps) {
|
||||
borderColor: 'border-emerald-200',
|
||||
inversionSetup: 85000,
|
||||
costoRecurrenteAnual: 108000,
|
||||
ahorroAnual: potentialSavings.AUTOMATE || 380000, // 70% containment
|
||||
ahorroAnual: potentialSavings.AUTOMATE, // 70% containment - calculado desde datos reales
|
||||
esCondicional: true,
|
||||
condicion: 'Requiere Score ≥7.5 Y CV ≤75% Y Transfer ≤20% Y FCR ≥50%',
|
||||
porQueNecesario: `Automatización end-to-end para colas Tier 1. Voicebot/Chatbot transaccional con 70% contención. Solo viable con procesos maduros. Target actual: ${tierCounts.AUTOMATE.length} colas con ${tierVolumes.AUTOMATE.toLocaleString()} int/mes.`,
|
||||
@@ -1906,9 +1910,10 @@ export function RoadmapTab({ data }: RoadmapTabProps) {
|
||||
const wave4Setup = 85000;
|
||||
const wave4Rec = 108000;
|
||||
|
||||
const wave2Savings = potentialSavings.AUGMENT || Math.round(tierVolumes.AUGMENT * 12 * 0.15 * 0.33);
|
||||
const wave3Savings = potentialSavings.ASSIST || Math.round(tierVolumes.ASSIST * 12 * 0.30 * 0.83);
|
||||
const wave4Savings = potentialSavings.AUTOMATE || Math.round(tierVolumes.AUTOMATE * 12 * 0.70 * 2.18);
|
||||
// Usar potentialSavings (ya corregidos con factor 12/11)
|
||||
const wave2Savings = potentialSavings.AUGMENT;
|
||||
const wave3Savings = potentialSavings.ASSIST;
|
||||
const wave4Savings = potentialSavings.AUTOMATE;
|
||||
|
||||
// Escenario 1: Conservador (Wave 1-2: FOUNDATION + AUGMENT)
|
||||
const consInversion = wave1Setup + wave2Setup;
|
||||
@@ -2520,85 +2525,17 @@ export function RoadmapTab({ data }: RoadmapTabProps) {
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-4">
|
||||
{/* ENFOQUE DUAL: Explicación + Tabla comparativa */}
|
||||
{/* ENFOQUE DUAL: Párrafo explicativo */}
|
||||
{recType === 'DUAL' && (
|
||||
<>
|
||||
{/* Explicación de los dos tracks */}
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="p-3 bg-gray-50 rounded-lg">
|
||||
<p className="font-semibold text-gray-800 mb-1">Track A: Quick Win</p>
|
||||
<p className="text-xs text-gray-600">
|
||||
Automatización inmediata de las colas ya preparadas (Tier AUTOMATE).
|
||||
Genera retorno desde el primer mes y valida el modelo de IA con bajo riesgo.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 rounded-lg">
|
||||
<p className="font-semibold text-gray-800 mb-1">Track B: Foundation</p>
|
||||
<p className="text-xs text-gray-600">
|
||||
Preparación de las colas que aún no están listas (Tier 3-4).
|
||||
Estandariza procesos y reduce variabilidad para habilitar automatización futura.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabla comparativa */}
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="text-left py-2 font-medium text-gray-500"></th>
|
||||
<th className="text-center py-2 font-medium text-gray-700">Quick Win</th>
|
||||
<th className="text-center py-2 font-medium text-gray-700">Foundation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-gray-600">
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500 text-xs">Alcance</td>
|
||||
<td className="py-2 text-center">
|
||||
<span className="font-medium text-gray-800">{pilotQueues.length} colas</span>
|
||||
<span className="text-xs text-gray-400 block">{pilotVolume.toLocaleString()} int/mes</span>
|
||||
</td>
|
||||
<td className="py-2 text-center">
|
||||
<span className="font-medium text-gray-800">{tierCounts['HUMAN-ONLY'].length + tierCounts.AUGMENT.length} colas</span>
|
||||
<span className="text-xs text-gray-400 block">Wave 1 + Wave 2</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500 text-xs">Inversión</td>
|
||||
<td className="py-2 text-center font-medium text-gray-800">{formatCurrency(pilotInversionTotal)}</td>
|
||||
<td className="py-2 text-center font-medium text-gray-800">{formatCurrency(wave1Setup + wave2Setup)}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500 text-xs">Retorno</td>
|
||||
<td className="py-2 text-center">
|
||||
<span className="font-medium text-gray-800">{formatCurrency(pilotAhorroAjustado)}/año</span>
|
||||
<span className="text-xs text-gray-400 block">directo (ajustado 50%)</span>
|
||||
</td>
|
||||
<td className="py-2 text-center">
|
||||
<span className="font-medium text-gray-800">{formatCurrency(potentialSavings.ASSIST + potentialSavings.AUGMENT)}/año</span>
|
||||
<span className="text-xs text-gray-400 block">habilitado (indirecto)</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500 text-xs">Timeline</td>
|
||||
<td className="py-2 text-center text-gray-800">2-3 meses</td>
|
||||
<td className="py-2 text-center text-gray-800">6-9 meses</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 text-gray-500 text-xs">ROI Year 1</td>
|
||||
<td className="py-2 text-center">
|
||||
<span className="font-semibold text-gray-900">{pilotROIDisplay.display}</span>
|
||||
</td>
|
||||
<td className="py-2 text-center text-gray-500 text-xs">No aplica (habilitador)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="text-xs text-gray-500 border-t border-gray-100 pt-3">
|
||||
<strong className="text-gray-700">¿Por qué dos tracks?</strong> Quick Win genera caja y confianza desde el inicio.
|
||||
Foundation prepara el {Math.round(assistPct + augmentPct)}% restante del volumen para fases posteriores.
|
||||
Ejecutarlos en paralelo acelera el time-to-value total.
|
||||
</div>
|
||||
</>
|
||||
<p className="text-sm text-gray-600 leading-relaxed">
|
||||
La Estrategia Dual consiste en ejecutar dos líneas de trabajo en paralelo:
|
||||
<strong className="text-gray-800"> Quick Win</strong> automatiza inmediatamente las {pilotQueues.length} colas
|
||||
ya preparadas (Tier AUTOMATE, {Math.round(totalVolume > 0 ? (tierVolumes.AUTOMATE / totalVolume) * 100 : 0)}% del volumen), generando retorno desde el primer mes;
|
||||
mientras que <strong className="text-gray-800">Foundation</strong> prepara el {Math.round(assistPct + augmentPct)}%
|
||||
restante del volumen (Tiers ASSIST y AUGMENT) estandarizando procesos y reduciendo variabilidad para habilitar
|
||||
automatización futura. Este enfoque maximiza el time-to-value: Quick Win financia la transformación y genera
|
||||
confianza organizacional, mientras Foundation amplía progresivamente el alcance de la automatización.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* FOUNDATION PRIMERO */}
|
||||
@@ -2765,6 +2702,16 @@ export function RoadmapTab({ data }: RoadmapTabProps) {
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════════════════
|
||||
OPORTUNIDADES PRIORIZADAS - Nueva visualización clara y accionable
|
||||
═══════════════════════════════════════════════════════════════════════════ */}
|
||||
{data.opportunities && data.opportunities.length > 0 && (
|
||||
<OpportunityPrioritizer
|
||||
opportunities={data.opportunities}
|
||||
drilldownData={data.drilldownData}
|
||||
/>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user