= {
+ automate_now: 'Automatizar Ahora',
+ assist_copilot: 'Asistir con Copilot',
+ optimize_first: 'Optimizar Primero'
+};
+
+interface TreemapContentProps {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+ name: string;
+ category: ReadinessCategory;
+ score: number;
+ value: number;
+}
+
+const CustomizedContent = ({
+ x,
+ y,
+ width,
+ height,
+ name,
+ category,
+ score,
+ value
+}: TreemapContentProps) => {
+ const showLabel = width > 60 && height > 40;
+ const showScore = width > 80 && height > 55;
+ const showValue = width > 100 && height > 70;
+
+ const baseColor = CATEGORY_COLORS[category] || '#94A3B8';
+
+ return (
+
+
+ {name.length > 15 && width < 120 ? `${name.slice(0, 12)}...` : name}
+
+ )}
+ {showScore && (
+
+ Score: {score.toFixed(1)}
+
+ )}
+ {showValue && (
+
+ €{(value / 1000).toFixed(0)}K
+
+ )}
+
+ );
+};
+
+interface TooltipPayload {
+ payload: TreemapData;
+}
+
+const CustomTooltip = ({ active, payload }: { active?: boolean; payload?: TooltipPayload[] }) => {
+ if (active && payload && payload.length) {
+ const data = payload[0].payload;
+ return (
+
+
{data.name}
+
{data.skill}
+
+
+ Readiness Score:
+ {data.score.toFixed(1)}/10
+
+
+ Ahorro Potencial:
+ €{data.value.toLocaleString()}
+
+ {data.volume && (
+
+ Volumen:
+ {data.volume.toLocaleString()}/mes
+
+ )}
+
+ Categoría:
+
+ {CATEGORY_LABELS[data.category]}
+
+
+
+
+ {title && (
+
{title}
+ )}
+
+
+
+
+ {/* Legend */}
+
+ {Object.entries(CATEGORY_COLORS).map(([category, color]) => (
+
+
+
+ {CATEGORY_LABELS[category as ReadinessCategory]}
+
+
+ ))}
+
+
+
{data.label}
+
+ {data.type === 'decrease' ? '-' : data.type === 'increase' ? '+' : ''}
+ {formatValue(data.value)}
+
+ {data.type !== 'initial' && data.type !== 'total' && (
+
+ Acumulado: {formatValue(data.cumulative)}
+
+ )}
+
+ {title && (
+
{title}
+ )}
+
+
+
+ `€${(value / 1000).toFixed(0)}K`}
+ />
+
+ {processedData.map((entry, index) => (
+ |
+ ))}
+ formatValue(value)}
+ style={{ fontSize: 10, fill: '#475569' }}
+ />
+
+
+
+
+ {/* Legend */}
+
+
+
+
+
+ {confidence && (
+
+ Confianza: {confidence === 'high' ? 'Alta' : confidence === 'medium' ? 'Media' : 'Baja'}
+
+ )}
+
+
+ {/* Score Display */}
+
+
+
+
+
+ {score.toFixed(1)}
+ /10
+
+
+
+
+
{getLabel(score)}
+
+ {score >= 7
+ ? 'Skills con alta predictibilidad y bajo riesgo de error'
+ : score >= 5
+ ? 'Skills aptos para asistencia AI con supervisión humana'
+ : 'Requiere optimización de procesos antes de automatizar'}
+
+
+
+
+
Desglose de Factores
+
+ {subFactors.map((factor) => {
+ const Icon = getIcon(factor.name);
+ const percentage = (factor.score / 10) * 100;
+ const weightPct = Math.round(factor.weight * 100);
+
+ return (
+
+
+
+ {factor.displayName}
+ ({weightPct}%)
+
+
{factor.score.toFixed(1)}
+
+
+
{factor.description}
+
+ );
+ })}
+
+
+
+
Análisis por Skill
+
+
+
+
+
+ Skill
+ Volumen
+ AHT
+ CV AHT
+ Transfer
+ Score
+ Categoría
+ Siguiente Paso
+
+
+
+ {sortedData.map((item) => (
+
+ {item.skill}
+
+ {item.volume.toLocaleString()}
+
+
+ {item.aht_seconds}s
+
+
+ 50 ? 'text-amber-600' : 'text-slate-600'}>
+ {item.variability.cv_aht.toFixed(0)}%
+
+
+
+ 20 ? 'text-red-600' : 'text-slate-600'}>
+ {item.variability.transfer_rate.toFixed(0)}%
+
+
+
+
+ {(item.automation_readiness / 10).toFixed(1)}
+
+
+
+
+ {getCategoryLabel(item.readiness_category)}
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+ {/* Top Row: Score Gauge + Sub-factors */}
+
+
+
+ {/* Treemap */}
+
+
+ {/* Skills Table */}
+
+
+ {/* Header */}
+
+
+
+
+
+
+
{dimension.title}
+
{dimension.summary}
+
+
+
+ {dimension.score}
+ {getScoreLabel(dimension.score)}
+
+
+
+
+
{dimension.kpi.label}
+
+
{dimension.kpi.value}
+ {dimension.kpi.change && (
+
+ {dimension.kpi.change}
+
+ )}
+
+
+ {dimension.percentile && (
+
+
+ Percentil
+ P{dimension.percentile}
+
+
+
+ )}
+
+
+ Hallazgos Clave
+
+
+ {findings.slice(0, 3).map((finding, idx) => (
+
+ {finding.text}
+
+ ))}
+ {findings.length === 0 && (
+ Sin hallazgos destacados
+ )}
+
+
+
+
+ Recomendación:
+ {recommendations[0].text}
+
+
+
+ );
+}
+
+// Benchmark Comparison Table
+function BenchmarkTable({ benchmarkData }: { benchmarkData: AnalysisData['benchmarkData'] }) {
+ const getPercentileColor = (percentile: number) => {
+ if (percentile >= 75) return 'text-emerald-600';
+ if (percentile >= 50) return 'text-amber-600';
+ return 'text-red-600';
+ };
+
+ return (
+
+
+
Benchmark vs Industria
+
+
+
+
+
+ KPI
+ Actual
+ Industria
+ Percentil
+
+
+
+ {benchmarkData.map((item) => (
+
+ {item.kpi}
+
+ {item.userDisplay}
+
+
+ {item.industryDisplay}
+
+
+ P{item.percentile}
+
+
+ ))}
+
+
+
+
+ {/* Dimensions Grid */}
+
+ {coreDimensions.map((dimension, idx) => (
+
+
+ {/* Benchmark Table */}
+
+
+
Health Score General
+
+
+ {/* Background circle */}
+
+
+ {score}
+ /100
+
+
+
{getLabel(score)}
+
+
{label}
+
{value}
+ {change && (
+
+ {change}
+
+ )}
+
+
Top 3 Oportunidades
+
+ {items.map((item) => (
+
+
+ {item.rank}
+
+
+
+ {getIcon(item.type)}
+ {item.title}
+
+ {item.metric && (
+
{item.metric}
+ )}
+
+ → {item.action}
+
+
+
+ ))}
+
+
+ {/* Main Grid: KPIs + Health Score */}
+
+ {/* Summary KPIs */}
+ {data.summaryKpis.slice(0, 3).map((kpi) => (
+
+
+ {/* Bullet Charts Row */}
+
+ v >= 1000 ? `${(v / 1000).toFixed(1)}K` : v.toString()}
+ />
+
+ 480s poor, 420-480 ok, <420 good
+ unit="s"
+ percentile={ahtBenchmark?.percentile}
+ inverse={true}
+ formatValue={(v) => v.toString()}
+ />
+
+ 75 good
+ unit="%"
+ percentile={fcrBenchmark?.percentile}
+ formatValue={(v) => v.toString()}
+ />
+
+ 25% poor, 15-25 ok, <15 good
+ unit="%"
+ inverse={true}
+ formatValue={(v) => v.toString()}
+ />
+
+
+ {/* Bottom Row: Top Opportunities + Economic Summary */}
+
+
+
+ {/* Economic Impact Summary */}
+
+
Impacto Económico
+
+
+
Coste Anual Actual
+
+ €{data.economicModel.currentAnnualCost.toLocaleString()}
+
+
+
+
Ahorro Potencial
+
+ €{data.economicModel.annualSavings.toLocaleString()}
+
+
+
+
Inversión Inicial
+
+ €{data.economicModel.initialInvestment.toLocaleString()}
+
+
+
+
ROI a 3 Años
+
+ {data.economicModel.roi3yr}%
+
+
+
+
+ {/* Payback indicator */}
+
+
+ Payback
+
+ {data.economicModel.paybackMonths} meses
+
+
+
+
+
+
+
+
Quick Wins Identificados
+
+
+ {topSavings.map((saving, idx) => (
+
+
+ {saving.category}
+
+
+ €{saving.amount.toLocaleString()}
+
+
{saving.percentage}% del ahorro total
+
+ ))}
+
+
+
+
Quick Wins
+
+
+ {quickWins.map((initiative) => (
+
+
+ {initiative.name}
+
+
{initiative.timeline}
+
+ €{initiative.investment.toLocaleString()} inversión
+
+
+ ))}
+
+
+
+
+
{initiative.name}
+
+ {initiative.phase}
+
+
+ {initiative.risk && (
+
+
+ Riesgo {initiative.risk === 'low' ? 'Bajo' : initiative.risk === 'medium' ? 'Medio' : 'Alto'}
+
+ )}
+
+
+
+
+
+
+ {initiative.resources.slice(0, 3).map((resource, idx) => (
+
+ {resource}
+
+ ))}
+
+ )}
+
+ );
+}
+
+// Business Case Summary
+function BusinessCaseSummary({ economicModel }: { economicModel: AnalysisData['economicModel'] }) {
+ return (
+
+
+
+
+
+
+
Inversión Total
+
+ €{economicModel.initialInvestment.toLocaleString()}
+
+
+
+
Ahorro Anual
+
+ €{economicModel.annualSavings.toLocaleString()}
+
+
+
+
Payback
+
+ {economicModel.paybackMonths} meses
+
+
+
+
ROI 3 Años
+
+ {economicModel.roi3yr}%
+
+
+
+
+ {/* Savings Breakdown */}
+
+
Desglose de Ahorros:
+ {economicModel.savingsBreakdown.map((item, idx) => (
+
+
+
+ {item.category}
+ €{item.amount.toLocaleString()}
+
+
+
+
{item.percentage}%
+
+ ))}
+
+
+
Timeline de Implementación
+
+
+ {/* Timeline line */}
+
+
+ {/* Phases */}
+
+ {phases.map((phase, idx) => {
+ const phaseInitiatives = initiatives.filter(i => i.phase === phase.phase);
+ return (
+
+ {/* Circle */}
+
+ {idx + 1}
+
+ {/* Label */}
+
{phase.label}
+ {/* Count */}
+
+ {phaseInitiatives.length} iniciativa{phaseInitiatives.length !== 1 ? 's' : ''}
+
+
+ );
+ })}
+
+
+ {/* Arrows */}
+
+
+
+ {/* Quick Wins */}
+
+
+ {/* Timeline Visual */}
+
+
+ {/* Waterfall Chart */}
+
+
+ {/* Initiatives by Phase */}
+
+ {/* Wave 1: Automate */}
+
+
+
+ Wave 1: Automatizar
+
+
+ {automateInitiatives.length > 0 ? (
+ automateInitiatives.map((init, idx) => (
+
+ ))
+ ) : (
+
+ Sin iniciativas en esta fase
+
+ )}
+
+
+
+ {/* Wave 2: Assist */}
+
+
+
+ Wave 2: Asistir
+
+
+ {assistInitiatives.length > 0 ? (
+ assistInitiatives.map((init, idx) => (
+
+ ))
+ ) : (
+
+ Sin iniciativas en esta fase
+
+ )}
+
+
+
+ {/* Wave 3: Augment */}
+
+
+
+ Wave 3: Aumentar
+
+
+ {augmentInitiatives.length > 0 ? (
+ augmentInitiatives.map((init, idx) => (
+
+ ))
+ ) : (
+
+ Sin iniciativas en esta fase
+
+ )}
+
+
+
+
+ {/* Business Case Summary */}
+
+