-
{score}
-
/100
+
+
+ {/* Gauge */}
+
+
+ {/* Breakdown */}
+
+
Health Score - Desglose
+
+
+ {factors.map((factor) => (
+
+
{factor.name}
+
+
{factor.score}
+
+ {factor.insight}
+
+
+ ))}
+
+
+ {/* Key Insight */}
+
+
+ Insight:
+ {getMainInsight()}
+
+
-
{getLabel(score)}
);
}
-// KPI Card Component
-function KpiCard({ label, value, change, changeType }: {
- label: string;
- value: string;
- change?: string;
- changeType?: 'positive' | 'negative' | 'neutral';
-}) {
- const ChangeIcon = changeType === 'positive' ? TrendingUp :
- changeType === 'negative' ? TrendingDown : Minus;
-
- const changeColor = changeType === 'positive' ? 'text-emerald-600' :
- changeType === 'negative' ? 'text-red-600' : 'text-slate-500';
-
- return (
-
-
{label}
-
{value}
- {change && (
-
-
- {change}
-
- )}
-
- );
-}
-
-// Top Opportunities Component (McKinsey style)
+// Top Opportunities Component
function TopOpportunities({ findings, opportunities }: {
findings: Finding[];
opportunities: { name: string; impact: number; savings: number }[];
}) {
- // Combine critical findings and high-impact opportunities
const items = [
...findings
.filter(f => f.type === 'critical' || f.type === 'warning')
@@ -108,49 +265,49 @@ function TopOpportunities({ findings, opportunities }: {
})),
].slice(0, 3);
- // Fill with opportunities if not enough findings
if (items.length < 3) {
const remaining = 3 - items.length;
opportunities
.sort((a, b) => b.savings - a.savings)
.slice(0, remaining)
- .forEach((opp, i) => {
- items.push({
- rank: items.length + 1,
- title: opp.name,
- metric: `€${opp.savings.toLocaleString()} ahorro potencial`,
- action: 'Implementar',
- type: 'info' as const
- });
+ .forEach(() => {
+ const opp = opportunities[items.length];
+ if (opp) {
+ items.push({
+ rank: items.length + 1,
+ title: opp.name,
+ metric: `€${opp.savings.toLocaleString()} ahorro potencial`,
+ action: 'Implementar',
+ type: 'info' as const
+ });
+ }
});
}
const getIcon = (type: string) => {
- if (type === 'critical') return
;
- if (type === 'warning') return
;
- return
;
+ if (type === 'critical') return
;
+ if (type === 'warning') return
;
+ return
;
};
return (
-
Top 3 Oportunidades
-
+
Top 3 Oportunidades
+
{items.map((item) => (
-
-
+
+
{item.rank}
-
+
{getIcon(item.type)}
- {item.title}
+ {item.title}
{item.metric && (
-
{item.metric}
+
{item.metric}
)}
-
- → {item.action}
-
+
→ {item.action}
))}
@@ -159,8 +316,38 @@ function TopOpportunities({ findings, opportunities }: {
);
}
+// Economic Summary Compact
+function EconomicSummary({ economicModel }: { economicModel: AnalysisData['economicModel'] }) {
+ return (
+
+
Impacto Económico
+
+
+
+
Coste Anual
+
€{(economicModel.currentAnnualCost / 1000).toFixed(0)}K
+
+
+
Ahorro Potencial
+
€{(economicModel.annualSavings / 1000).toFixed(0)}K
+
+
+
+
+
+
ROI 3 años
+
{economicModel.roi3yr}%
+
+
+
Payback
+
{economicModel.paybackMonths}m
+
+
+
+ );
+}
+
export function ExecutiveSummaryTab({ data }: ExecutiveSummaryTabProps) {
- // Extract key KPIs for bullet charts
const totalInteractions = data.heatmapData.reduce((sum, h) => sum + h.volume, 0);
const avgAHT = data.heatmapData.length > 0
? Math.round(data.heatmapData.reduce((sum, h) => sum + h.aht_seconds, 0) / data.heatmapData.length)
@@ -171,119 +358,41 @@ export function ExecutiveSummaryTab({ data }: ExecutiveSummaryTabProps) {
const avgTransferRate = data.heatmapData.length > 0
? Math.round(data.heatmapData.reduce((sum, h) => sum + h.metrics.transfer_rate, 0) / data.heatmapData.length)
: 0;
+ const avgCSAT = data.heatmapData.length > 0
+ ? Math.round(data.heatmapData.reduce((sum, h) => sum + h.metrics.csat, 0) / data.heatmapData.length)
+ : 0;
- // Find benchmark data
const ahtBenchmark = data.benchmarkData.find(b => b.kpi.toLowerCase().includes('aht'));
const fcrBenchmark = data.benchmarkData.find(b => b.kpi.toLowerCase().includes('fcr'));
return (
-
- {/* Main Grid: KPIs + Health Score */}
-
- {/* Summary KPIs */}
- {data.summaryKpis.slice(0, 3).map((kpi) => (
-
- ))}
+
+ {/* Key Metrics Bar */}
+
- {/* Health Score Gauge */}
-
-
+ {/* Health Score with Breakdown */}
+
- {/* 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 */}
-
+ {/* Bottom Row */}
+
-
- {/* 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
-
-
-
-
+
);