feat: translate remaining Spanish text in AgenticReadinessTab

- Translate "interacciones" and "colas analizadas" in summary footer
- Translate "Click en un skill para ver el detalle" in table footer
- Update red flag actions to use translation keys
- Add translation keys for:
  - Skills with Red Flags section title
  - Queues requiring intervention description
  - View Roadmap tab links
- Update getActionForFlag function to use i18n keys
- All AgenticReadinessTab content now fully bilingual (en/es)

https://claude.ai/code/session_01GNbnkFoESkRcnPr3bLCYDg
This commit is contained in:
Claude
2026-02-08 14:25:19 +00:00
parent 3a6652fdce
commit 8599ffba73
3 changed files with 29 additions and 21 deletions

View File

@@ -1558,10 +1558,10 @@ function AgenticReadinessHeader({
{/* Footer con totales */}
<div className="mt-3 pt-3 flex items-center justify-between text-xs" style={{ borderTop: `1px solid ${COLORS.light}`, color: COLORS.medium }}>
<span>
Total: <strong style={{ color: COLORS.dark }}>{formatVolume(totalVolume)}</strong> interacciones
Total: <strong style={{ color: COLORS.dark }}>{formatVolume(totalVolume)}</strong> {t('agenticReadiness.summary.interactions')}
</span>
<span>
<strong style={{ color: COLORS.dark }}>{totalQueues}</strong> colas analizadas
<strong style={{ color: COLORS.dark }}>{totalQueues}</strong> {t('agenticReadiness.summary.queuesAnalyzed')}
</span>
</div>
</div>
@@ -2565,7 +2565,7 @@ function TierQueueSection({
{/* Footer */}
<div className="px-5 py-3 bg-gray-50 border-t border-gray-200 text-xs text-gray-500">
Click en un skill para ver el detalle de colas individuales
{t('agenticReadiness.table.clickToExpand')}
</div>
</div>
);
@@ -2618,9 +2618,9 @@ function HumanOnlyByReasonSection({ drilldownData, redFlagConfigs, t }: { drilld
const flagConfig = redFlagConfigs.find(c => c.id === reasonId);
return {
reasonId,
reason: flagConfig?.label || 'Sin Red Flags específicos',
description: flagConfig?.description || 'Colas que no cumplen criterios de automatización',
action: flagConfig ? getActionForFlag(flagConfig.id) : 'Revisar manualmente',
reason: flagConfig?.label || t('agenticReadiness.redFlagsActions.noSpecificFlags'),
description: flagConfig?.description || t('agenticReadiness.redFlagsActions.noFlagsDesc'),
action: flagConfig ? getActionForFlag(flagConfig.id) : t('agenticReadiness.redFlagsActions.reviewManually'),
queues,
totalVolume: queues.reduce((s, q) => s + q.volume, 0),
queueCount: queues.length
@@ -2643,11 +2643,11 @@ function HumanOnlyByReasonSection({ drilldownData, redFlagConfigs, t }: { drilld
function getActionForFlag(flagId: string): string {
switch (flagId) {
case 'cv_high': return 'Estandarizar procesos y scripts';
case 'transfer_high': return 'Simplificar flujo, capacitar agentes';
case 'volume_low': return 'Consolidar con colas similares';
case 'valid_low': return 'Mejorar captura de datos';
default: return 'Revisar manualmente';
case 'cv_high': return t('agenticReadiness.redFlagsActions.standardizeProcesses');
case 'transfer_high': return t('agenticReadiness.redFlagsActions.simplifyFlow');
case 'volume_low': return t('agenticReadiness.redFlagsActions.consolidate');
case 'valid_low': return t('agenticReadiness.redFlagsActions.improveDataCapture');
default: return t('agenticReadiness.redFlagsActions.reviewManually');
}
}
@@ -3020,16 +3020,16 @@ function HumanOnlyRedFlagsSection({ drilldownData, redFlagConfigs }: { drilldown
let action = '';
switch (config.id) {
case 'cv_high':
action = 'Estandarizar procesos';
action = t('agenticReadiness.redFlagsActions.standardizeProcesses');
break;
case 'transfer_high':
action = 'Simplificar flujo / capacitar';
action = t('agenticReadiness.redFlagsActions.simplifyFlow');
break;
case 'volume_low':
action = 'Consolidar con similar';
action = t('agenticReadiness.redFlagsActions.consolidate');
break;
case 'valid_low':
action = 'Mejorar captura datos';
action = t('agenticReadiness.redFlagsActions.improveDataCapture');
break;
}
@@ -3057,10 +3057,10 @@ function HumanOnlyRedFlagsSection({ drilldownData, redFlagConfigs }: { drilldown
<div>
<h3 className="font-semibold text-gray-900 flex items-center gap-2">
<AlertOctagon className="w-5 h-5 text-amber-500" />
Skills con Red Flags
{t('agenticReadiness.redFlagsActions.skillsWithRedFlags')}
</h3>
<p className="text-sm text-gray-500 mt-1">
Colas que requieren intervención antes de automatizar
{t('agenticReadiness.redFlagsActions.queuesRequireIntervention')}
</p>
</div>
<Badge
@@ -3654,7 +3654,7 @@ function RoadmapConnectionSection({ drilldownData }: { drilldownData: DrilldownD
<div className="flex items-center gap-2 pt-2">
<span className="text-lg">👉</span>
<span className="text-sm font-medium" style={{ color: COLORS.primary }}>
Ver pestaña Roadmap para plan detallado
{t('agenticReadiness.redFlagsActions.viewRoadmapTab')}
</span>
</div>
</div>
@@ -3755,7 +3755,7 @@ export function AgenticReadinessTab({ data, onTabChange }: AgenticReadinessTabPr
onClick={() => onTabChange('roadmap')}
className="text-sm text-blue-600 hover:text-blue-800 hover:underline"
>
Ver pestaña Roadmap para plan detallado
{t('agenticReadiness.redFlagsActions.viewRoadmapLink')}
</button>
</div>
)}