diff --git a/frontend/components/tabs/AgenticReadinessTab.tsx b/frontend/components/tabs/AgenticReadinessTab.tsx index 9a20a01..85a7ef1 100644 --- a/frontend/components/tabs/AgenticReadinessTab.tsx +++ b/frontend/components/tabs/AgenticReadinessTab.tsx @@ -2163,7 +2163,7 @@ function ExpandableSkillRow({ {dataPoint.originalQueues.map((queue, queueIdx) => { const queueMonthlySavings = queue.annualCost ? Math.round(queue.annualCost * 0.35 / 12) : 0; const tierStyle = getTierStyle(queue.tier); - const redFlags = detectRedFlags(queue); + const redFlags = detectRedFlags(queue, redFlagConfigs); return ( = {}; allHumanOnlyQueues.forEach(queue => { - const flags = detectRedFlags(queue); + const flags = detectRedFlags(queue, redFlagConfigs); // Determinar razón principal (prioridad: cv_high > transfer_high > volume_low > valid_low) let reason = 'Sin Red Flags específicos'; let reasonId = 'no_flags'; @@ -2579,7 +2579,7 @@ function HumanOnlyByReasonSection({ drilldownData }: { drilldownData: DrilldownD // Convertir a array y ordenar por volumen const reasonGroups = Object.entries(queuesByReason) .map(([reasonId, queues]) => { - const flagConfig = RED_FLAG_CONFIGS.find(c => c.id === reasonId); + const flagConfig = redFlagConfigs.find(c => c.id === reasonId); return { reasonId, reason: flagConfig?.label || 'Sin Red Flags específicos', @@ -2719,7 +2719,7 @@ function HumanOnlyByReasonSection({ drilldownData }: { drilldownData: DrilldownD {group.queues.slice(0, 20).map((queue) => { - const flags = detectRedFlags(queue); + const flags = detectRedFlags(queue, redFlagConfigs); return ( @@ -2947,7 +2947,7 @@ function HumanOnlyRedFlagsSection({ drilldownData }: { drilldownData: DrilldownD // Colas con red flags (la mayoría de HUMAN-ONLY tendrán red flags por definición) const queuesWithFlags = humanOnlyQueues.map(q => ({ queue: q, - flags: detectRedFlags(q) + flags: detectRedFlags(q, redFlagConfigs) })).filter(qf => qf.flags.length > 0); // Ordenar por volumen (mayor primero para priorizar) @@ -2970,7 +2970,7 @@ function HumanOnlyRedFlagsSection({ drilldownData }: { drilldownData: DrilldownD const pctCosteRedFlags = costeAnualTotal > 0 ? (costeAnualRedFlags / costeAnualTotal) * 100 : 0; // Estadísticas detalladas por tipo de red flag - const flagStats = RED_FLAG_CONFIGS.map(config => { + const flagStats = redFlagConfigs.map(config => { const matchingQueues = queuesWithFlags.filter(qf => qf.flags.some(f => f.config.id === config.id) ); @@ -3625,6 +3625,9 @@ function RoadmapConnectionSection({ drilldownData }: { drilldownData: DrilldownD } export function AgenticReadinessTab({ data, onTabChange }: AgenticReadinessTabProps) { + const { t } = useTranslation(); + const redFlagConfigs = getRedFlagConfigs(t); + // Debug: Log drilldown data status console.log('🔍 AgenticReadinessTab - drilldownData:', { exists: !!data.drilldownData, diff --git a/frontend/components/tabs/RoadmapTab.tsx b/frontend/components/tabs/RoadmapTab.tsx index 133ba08..ef726c1 100644 --- a/frontend/components/tabs/RoadmapTab.tsx +++ b/frontend/components/tabs/RoadmapTab.tsx @@ -187,7 +187,8 @@ const calcularPaybackCompleto = ( ahorroAnual: number, waves: string[], esHabilitador: boolean, - incluyeQuickWin: boolean + incluyeQuickWin: boolean, + t: any ): PaybackInfo => { // 1. Caso especial: escenario habilitador con poco ahorro directo if (esHabilitador || ahorroAnual < inversion * 0.1) { @@ -230,7 +231,7 @@ const calcularPaybackCompleto = ( const paybackTotal = mesesImplementacion + mesesRecuperacion; // 7. Formatear resultado según duración - return formatearPaybackResult(paybackTotal, mesesImplementacion, mesesRecuperacion, margenMensual, inversion); + return formatearPaybackResult(paybackTotal, mesesImplementacion, mesesRecuperacion, margenMensual, inversion, t); }; /** @@ -241,7 +242,8 @@ const formatearPaybackResult = ( mesesImpl: number, mesesRec: number, margenMensual: number, - inversion: number + inversion: number, + t: any ): PaybackInfo => { const tooltipBase = `Implementación: ${mesesImpl} meses → Recuperación: ${mesesRec} meses. ` + `Margen: ${formatCurrency(margenMensual * 12)}/año.`; @@ -1966,17 +1968,17 @@ export function RoadmapTab({ data }: RoadmapTabProps) { // v3.9: Calcular payback completo para cada escenario const consPaybackInfo = calcularPaybackCompleto( consInversion, consMargen, consSavings, - ['wave1', 'wave2'], consEsHabilitador, false + ['wave1', 'wave2'], consEsHabilitador, false, t ); const modPaybackInfo = calcularPaybackCompleto( modInversion, modMargen, modSavings, - ['wave1', 'wave2', 'wave3'], modEsHabilitador, false + ['wave1', 'wave2', 'wave3'], modEsHabilitador, false, t ); // Agresivo incluye Wave 4 (Quick Wins potenciales si hay AUTOMATE queues) const agrIncluyeQuickWin = tierCounts.AUTOMATE.length >= 3; const agrPaybackInfo = calcularPaybackCompleto( agrInversion, agrMargen, agrSavings, - ['wave1', 'wave2', 'wave3', 'wave4'], agrEsHabilitador, agrIncluyeQuickWin + ['wave1', 'wave2', 'wave3', 'wave4'], agrEsHabilitador, agrIncluyeQuickWin, t ); const escenarios: EscenarioData[] = [