susana/BeyondCXAnalytics-Demo
2
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases 6 Wiki Activity

feat: translate additional AgenticReadinessTab sections

Browse Source 
- Add roadmapConnection translation namespace (20+ keys)
- Translate Quick Wins section (IMMEDIATE QUICK WINS)
- Translate Wave 1-3 Foundation section
- Translate "Click on reason to see affected queues" footer
- Update RoadmapConnectionSection to use i18n keys
- All calculations, metrics, and descriptions now bilingual

https://claude.ai/code/session_01GNbnkFoESkRcnPr3bLCYDg
This commit is contained in:
Claude
2026-02-08 14:38:43 +00:00
parent 8599ffba73
commit 4f9d1d50cb
3 changed files with 58 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/components/tabs/AgenticReadinessTab.tsx
View File

@@ -2808,7 +2808,7 @@ function HumanOnlyByReasonSection({ drilldownData, redFlagConfigs, t }: { drilld
{/* Footer */}
<div className="px-5 py-3 bg-gray-50 border-t border-gray-200 text-xs text-gray-500">
Click en una razón para ver las colas afectadas. Priorizar acciones según volumen impactado.
{t('agenticReadiness.table.clickToExpandReason')}
</div>
</div>
);
@@ -3501,7 +3501,7 @@ function SkillsToOptimizeSection({ drilldownData }: { drilldownData: DrilldownDa
}
// v3.6: Sección de conexión con Roadmap
function RoadmapConnectionSection({ drilldownData }: { drilldownData: DrilldownDataPoint[] }) {
function RoadmapConnectionSection({ drilldownData, t }: { drilldownData: DrilldownDataPoint[]; t: any }) {
// Extraer todas las colas
const allQueues = drilldownData.flatMap(skill =>
skill.originalQueues.map(q => ({ ...q, skillName: skill.skill }))
@@ -3584,27 +3584,27 @@ function RoadmapConnectionSection({ drilldownData }: { drilldownData: DrilldownD
<div className="rounded-lg p-4 border" style={{ backgroundColor: '#f0fdf4', borderColor: '#86efac' }}>
<div className="flex items-center gap-2 mb-2">
<span className="text-lg">✅</span>
<span className="font-bold text-emerald-800">QUICK WINS INMEDIATOS (sin Wave 1)</span>
<span className="font-bold text-emerald-800">{t('agenticReadiness.roadmapConnection.quickWinsTitle')}</span>
</div>
<div className="space-y-1 text-sm text-emerald-700">
<p>
<strong>{automateQueues.length} colas AUTOMATE</strong> con{' '}
<strong>{(automateVolume / 1000).toFixed(0)}K interacciones/mes</strong>
<strong>{t('agenticReadiness.roadmapConnection.automateQueues', { count: automateQueues.length })}</strong> {t('agenticReadiness.roadmapConnection.with')}{' '}
<strong>{(automateVolume / 1000).toFixed(0)}K {t('agenticReadiness.roadmapConnection.interactionsPerMonth')}</strong>
</p>
<p
className="cursor-help"
title={`Cálculo: ${automateVolume.toLocaleString()} int × 12 meses × 70% contención × €2.18/int = €${(annualSavingsAutomate / 1000000).toFixed(1)}M`}
title={t('agenticReadiness.roadmapConnection.calculationNote', { volume: automateVolume.toLocaleString(), rate: 70, type: t('agenticReadiness.roadmapConnection.containment'), cpi: '2.18' })}
>
Ahorro potencial: <strong className="text-emerald-800">€{(annualSavingsAutomate / 1000000).toFixed(1)}M/año</strong>
<span className="text-emerald-600 ml-1 text-xs">(70% contención × €2.18/int)</span>
{t('agenticReadiness.roadmapConnection.savingsPotential')} <strong className="text-emerald-800">€{(annualSavingsAutomate / 1000000).toFixed(1)}M{t('agenticReadiness.roadmapConnection.perYear')}</strong>
<span className="text-emerald-600 ml-1 text-xs">(70% {t('agenticReadiness.roadmapConnection.containment')} × €2.18{t('agenticReadiness.roadmapConnection.perInt')})</span>
</p>
{skillsWithAutomate.length > 0 && (
<p>
Skills: <strong>{skillsWithAutomate.join(', ')}</strong>
{t('agenticReadiness.roadmapConnection.skills')} <strong>{skillsWithAutomate.join(', ')}</strong>
</p>
)}
<p className="pt-1 text-emerald-600 italic text-xs">
→ Alineado con Wave 4 del Roadmap. Pueden implementarse en paralelo a Wave 1.
{t('agenticReadiness.roadmapConnection.alignedWithWave4')}
</p>
</div>
</div>
@@ -3616,35 +3616,35 @@ function RoadmapConnectionSection({ drilldownData }: { drilldownData: DrilldownD
<div className="flex items-center gap-2 mb-2">
<span className="text-lg">🔧</span>
<span className="font-bold" style={{ color: COLORS.dark }}>
WAVE 1-3: FOUNDATION → ASSIST ({assistQueues.length} colas)
{t('agenticReadiness.roadmapConnection.wave13Title', { count: assistQueues.length })}
</span>
</div>
<div className="space-y-1 text-sm" style={{ color: COLORS.dark }}>
<p>
<strong>{(assistVolume / 1000).toFixed(0)}K interacciones/mes</strong> en tier ASSIST
<strong>{(assistVolume / 1000).toFixed(0)}K {t('agenticReadiness.roadmapConnection.interactionsPerMonth')}</strong> {t('agenticReadiness.roadmapConnection.inTierAssist')}
</p>
{skillsNeedingWave1.length > 0 && (
<p>
<strong>Foco Wave 1:</strong> Reducir transfer en{' '}
<strong>{t('agenticReadiness.roadmapConnection.focusWave1')}</strong> {t('agenticReadiness.roadmapConnection.reduceTransferIn')}{' '}
<strong>{skillsNeedingWave1.map(s => s.skill).join(' & ')}</strong>{' '}
({Math.round(skillsNeedingWave1[0]?.humanPct || 0)}% HUMAN)
</p>
)}
<p
className="cursor-help"
title={`Cálculo: ${assistVolume.toLocaleString()} int × 12 meses × 30% deflection × €0.83/int`}
title={t('agenticReadiness.roadmapConnection.calculationNote', { volume: assistVolume.toLocaleString(), rate: 30, type: t('agenticReadiness.roadmapConnection.deflection'), cpi: '0.83' })}
>
<strong>Potencial con Copilot:</strong>{' '}
<strong>{t('agenticReadiness.roadmapConnection.potentialWithCopilot')}</strong>{' '}
<strong style={{ color: COLORS.primary }}>
€{potentialAnnualAssist >= 1000000
? `${(potentialAnnualAssist / 1000000).toFixed(1)}M`
: `${(potentialAnnualAssist / 1000).toFixed(0)}K`
}/año
}{t('agenticReadiness.roadmapConnection.perYear')}
</strong>
<span className="ml-1 text-xs" style={{ color: COLORS.medium }}>(30% deflection × €0.83/int)</span>
<span className="ml-1 text-xs" style={{ color: COLORS.medium }}>(30% {t('agenticReadiness.roadmapConnection.deflection')} × €0.83{t('agenticReadiness.roadmapConnection.perInt')})</span>
</p>
<p className="pt-1 italic text-xs" style={{ color: COLORS.medium }}>
→ Requiere Wave 1 (Foundation) para habilitar Copilot en Wave 3
{t('agenticReadiness.roadmapConnection.requiresWave1')}
</p>
</div>
</div>