feat: complete Spanish-to-English translation for AgenticReadinessTab

Added remaining translation keys and updated all hardcoded Spanish strings:
- Added new translation keys to en.json and es.json (emptyStates, sections subsections)
- Updated table headers (skill classification, tier sections, queue details)
- Converted TIER_SECTION_CONFIG to getTierSectionConfig(t) function
- Updated TierQueueSection and HumanOnlyByReasonSection components to use translations
- Translated section titles, summary text, and inline labels
- Build verified successfully

https://claude.ai/code/session_03272424-c661-4002-a75e-2f81579fdd6e

frontend/components/tabs/AgenticReadinessTab.tsx

@@ -1862,7 +1862,7 @@ function SkillClassificationSection({ drilldownData }: { drilldownData: Drilldow
       {/* Header */}
       <div className="px-5 py-3" style={{ backgroundColor: COLORS.dark }}>
         <h2 className="font-bold text-sm" style={{ color: COLORS.white }}>
-          CLASIFICACIÓN POR SKILL
+          {t('agenticReadiness.sections.classificationBySkill')}
         </h2>
       </div>
 
@@ -1872,18 +1872,18 @@ function SkillClassificationSection({ drilldownData }: { drilldownData: Drilldow
           <table className="w-full text-sm">
             <thead>
               <tr style={{ color: COLORS.medium }}>
-                <th className="text-left py-2 font-medium">Skill</th>
-                <th className="text-right py-2 font-medium">Volumen</th>
-                <th className="text-center py-2 font-medium" colSpan={4}>Distribución Colas por Tier</th>
-                <th className="text-left py-2 font-medium pl-4">Acción</th>
+                <th className="text-left py-2 font-medium">{t('agenticReadiness.table.skill')}</th>
+                <th className="text-right py-2 font-medium">{t('agenticReadiness.table.volume')}</th>
+                <th className="text-center py-2 font-medium" colSpan={4}>{t('agenticReadiness.classification.distribution')}</th>
+                <th className="text-left py-2 font-medium pl-4">{t('agenticReadiness.classification.action')}</th>
               </tr>
               <tr style={{ color: COLORS.medium }} className="text-xs">
                 <th></th>
                 <th></th>
-                <th className="text-center py-1">AUTO</th>
-                <th className="text-center py-1">ASIST</th>
-                <th className="text-center py-1">AUGM</th>
-                <th className="text-center py-1">HUMAN</th>
+                <th className="text-center py-1">{t('agenticReadiness.classification.auto')}</th>
+                <th className="text-center py-1">{t('agenticReadiness.classification.assist')}</th>
+                <th className="text-center py-1">{t('agenticReadiness.classification.augm')}</th>
+                <th className="text-center py-1">{t('agenticReadiness.classification.human')}</th>
                 <th></th>
               </tr>
             </thead>
@@ -2298,7 +2298,7 @@ function ExpandableSkillRow({
 // ============================================
 
 // Configuración de colores y estilos por tier
-const TIER_SECTION_CONFIG: Record<AgenticTier, {
+const getTierSectionConfig = (t: any): Record<AgenticTier, {
   color: string;
   bgColor: string;
   borderColor: string;
@@ -2308,7 +2308,7 @@ const TIER_SECTION_CONFIG: Record<AgenticTier, {
   title: string;
   subtitle: string;
   emptyMessage: string;
-}> = {
+}> => ({
   'AUTOMATE': {
     color: '#10b981',
     bgColor: '#d1fae5',
@@ -2316,9 +2316,9 @@ const TIER_SECTION_CONFIG: Record<AgenticTier, {
     gradientFrom: 'from-emerald-50',
     gradientTo: 'to-emerald-100/50',
     icon: Sparkles,
-    title: 'Colas AUTOMATE',
-    subtitle: 'Listas para automatización completa con agente virtual (Score ≥7.5)',
-    emptyMessage: 'No hay colas clasificadas como AUTOMATE'
+    title: t('agenticReadiness.sections.queuesAutomate'),
+    subtitle: t('agenticReadiness.sections.readyForFullAutomation'),
+    emptyMessage: t('agenticReadiness.emptyStates.noQueuesClassifiedAs', { tier: 'AUTOMATE' })
   },
   'ASSIST': {
     color: '#3b82f6',
@@ -2327,9 +2327,9 @@ const TIER_SECTION_CONFIG: Record<AgenticTier, {
     gradientFrom: 'from-blue-50',
     gradientTo: 'to-blue-100/50',
     icon: Bot,
-    title: 'Colas ASSIST',
-    subtitle: 'Candidatas a Copilot - IA asiste al agente humano (Score 5.5-7.5)',
-    emptyMessage: 'No hay colas clasificadas como ASSIST'
+    title: t('agenticReadiness.sections.queuesAssist'),
+    subtitle: t('agenticReadiness.sections.candidatesForCopilot'),
+    emptyMessage: t('agenticReadiness.emptyStates.noQueuesClassifiedAs', { tier: 'ASSIST' })
   },
   'AUGMENT': {
     color: '#f59e0b',
@@ -2338,9 +2338,9 @@ const TIER_SECTION_CONFIG: Record<AgenticTier, {
     gradientFrom: 'from-amber-50',
     gradientTo: 'to-amber-100/50',
     icon: TrendingUp,
-    title: 'Colas AUGMENT',
-    subtitle: 'Requieren optimización previa: estandarizar procesos, reducir variabilidad (Score 3.5-5.5)',
-    emptyMessage: 'No hay colas clasificadas como AUGMENT'
+    title: t('agenticReadiness.sections.queuesAugment'),
+    subtitle: t('agenticReadiness.sections.requireOptimization'),
+    emptyMessage: t('agenticReadiness.emptyStates.noQueuesClassifiedAs', { tier: 'AUGMENT' })
   },
   'HUMAN-ONLY': {
     color: '#6b7280',
@@ -2349,24 +2349,26 @@ const TIER_SECTION_CONFIG: Record<AgenticTier, {
     gradientFrom: 'from-gray-50',
     gradientTo: 'to-gray-100/50',
     icon: Users,
-    title: 'Colas HUMAN-ONLY',
-    subtitle: 'No aptas para automatización: volumen insuficiente, datos de baja calidad o complejidad extrema',
-    emptyMessage: 'No hay colas clasificadas como HUMAN-ONLY'
+    title: t('agenticReadiness.sections.queuesHumanOnly'),
+    subtitle: t('agenticReadiness.sections.notSuitableForAutomation'),
+    emptyMessage: t('agenticReadiness.emptyStates.noQueuesClassifiedAs', { tier: 'HUMAN-ONLY' })
   }
-};
+});
 
 // Componente de tabla de colas por Tier (AUTOMATE, ASSIST, AUGMENT)
 function TierQueueSection({
   drilldownData,
   tier,
-  redFlagConfigs
+  redFlagConfigs,
+  t
 }: {
   drilldownData: DrilldownDataPoint[];
   tier: 'AUTOMATE' | 'ASSIST' | 'AUGMENT';
   redFlagConfigs: RedFlagConfig[];
+  t: any;
 }) {
   const [expandedSkills, setExpandedSkills] = useState<Set<string>>(new Set());
-  const config = TIER_SECTION_CONFIG[tier];
+  const config = getTierSectionConfig(t)[tier];
   const IconComponent = config.icon;
 
   // Extraer todas las colas del tier específico, agrupadas por skill
@@ -2418,7 +2420,7 @@ function TierQueueSection({
           </div>
           <div className="text-right">
             <span className="text-3xl font-bold" style={{ color: config.color }}>{totalQueues}</span>
-            <p className="text-sm" style={{ color: config.color + 'cc' }}>colas en {skillsWithTierQueues.length} skills</p>
+            <p className="text-sm" style={{ color: config.color + 'cc' }}>{t('agenticReadiness.sections.queuesIn', { count: skillsWithTierQueues.length })}</p>
           </div>
         </div>
       </div>
@@ -2427,14 +2429,14 @@ function TierQueueSection({
       <div className="px-5 py-3 border-b flex items-center justify-between text-sm" style={{ backgroundColor: config.bgColor + '40' }}>
         <div className="flex gap-4 flex-wrap">
           <span className="text-gray-600">
-            Volumen: <strong className="text-gray-800">{totalVolume.toLocaleString()}</strong> int/mes
+            {t('agenticReadiness.sections.volumeColon')} <strong className="text-gray-800">{totalVolume.toLocaleString()}</strong> {t('agenticReadiness.table.int')}/{t('agenticReadiness.table.perMonth').replace('/', '')}
           </span>
           <span className="text-gray-600">
-            Coste: <strong className="text-gray-800">{formatCurrency(totalCost)}</strong>/año
+            {t('agenticReadiness.sections.costColon')} <strong className="text-gray-800">{formatCurrency(totalCost)}</strong>{t('agenticReadiness.table.perYear')}
           </span>
         </div>
         <span className="font-bold" style={{ color: config.color }}>
-          Ahorro potencial: {formatCurrency(potentialSavings)}/año
+          {t('agenticReadiness.sections.potentialSavingsColon')} {formatCurrency(potentialSavings)}{t('agenticReadiness.table.perYear')}
         </span>
       </div>
 
@@ -2444,13 +2446,13 @@ function TierQueueSection({
           <thead>
             <tr className="text-xs text-gray-500 uppercase tracking-wider bg-gray-50 border-b border-gray-200">
               <th className="px-3 py-2.5 text-left font-medium w-8"></th>
-              <th className="px-3 py-2.5 text-left font-medium">Business Unit (Skill)</th>
-              <th className="px-3 py-2.5 text-center font-medium">Colas</th>
-              <th className="px-3 py-2.5 text-right font-medium">Volumen</th>
-              <th className="px-3 py-2.5 text-right font-medium">AHT Prom.</th>
-              <th className="px-3 py-2.5 text-right font-medium">CV Prom.</th>
-              <th className="px-3 py-2.5 text-right font-medium">FCR</th>
-              <th className="px-3 py-2.5 text-right font-medium">Ahorro Potencial</th>
+              <th className="px-3 py-2.5 text-left font-medium">{t('agenticReadiness.table.businessUnit')}</th>
+              <th className="px-3 py-2.5 text-center font-medium">{t('agenticReadiness.table.queues')}</th>
+              <th className="px-3 py-2.5 text-right font-medium">{t('agenticReadiness.table.volume')}</th>
+              <th className="px-3 py-2.5 text-right font-medium">{t('agenticReadiness.table.avgAht')}</th>
+              <th className="px-3 py-2.5 text-right font-medium">{t('agenticReadiness.table.avgCv')}</th>
+              <th className="px-3 py-2.5 text-right font-medium">{t('agenticReadiness.table.fcr')}</th>
+              <th className="px-3 py-2.5 text-right font-medium">{t('agenticReadiness.table.potentialSavings')}</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-100">
@@ -2510,14 +2512,14 @@ function TierQueueSection({
                           <table className="w-full text-sm">
                             <thead>
                               <tr className="text-xs text-gray-500 uppercase tracking-wider" style={{ backgroundColor: config.bgColor + '60' }}>
-                                <th className="px-4 py-2 text-left font-medium">Cola (ID)</th>
-                                <th className="px-3 py-2 text-right font-medium">Volumen</th>
-                                <th className="px-3 py-2 text-right font-medium">AHT</th>
-                                <th className="px-3 py-2 text-right font-medium">CV</th>
-                                <th className="px-3 py-2 text-right font-medium">Transfer</th>
-                                <th className="px-3 py-2 text-right font-medium">FCR</th>
-                                <th className="px-3 py-2 text-center font-medium">Score</th>
-                                <th className="px-3 py-2 text-right font-medium">Ahorro</th>
+                                <th className="px-4 py-2 text-left font-medium">{t('agenticReadiness.table.queueId')}</th>
+                                <th className="px-3 py-2 text-right font-medium">{t('agenticReadiness.table.volume')}</th>
+                                <th className="px-3 py-2 text-right font-medium">{t('agenticReadiness.table.aht')}</th>
+                                <th className="px-3 py-2 text-right font-medium">{t('agenticReadiness.table.cv')}</th>
+                                <th className="px-3 py-2 text-right font-medium">{t('agenticReadiness.table.transfer')}</th>
+                                <th className="px-3 py-2 text-right font-medium">{t('agenticReadiness.table.fcr')}</th>
+                                <th className="px-3 py-2 text-center font-medium">{t('agenticReadiness.table.score')}</th>
+                                <th className="px-3 py-2 text-right font-medium">{t('agenticReadiness.table.savingsPerMonth')}</th>
                               </tr>
                             </thead>
                             <tbody className="divide-y divide-gray-100">
@@ -2570,9 +2572,9 @@ function TierQueueSection({
 }
 
 // Componente para colas HUMAN-ONLY agrupadas por razón/red flag
-function HumanOnlyByReasonSection({ drilldownData, redFlagConfigs }: { drilldownData: DrilldownDataPoint[]; redFlagConfigs: RedFlagConfig[] }) {
+function HumanOnlyByReasonSection({ drilldownData, redFlagConfigs, t }: { drilldownData: DrilldownDataPoint[]; redFlagConfigs: RedFlagConfig[]; t: any }) {
   const [expandedReasons, setExpandedReasons] = useState<Set<string>>(new Set());
-  const config = TIER_SECTION_CONFIG['HUMAN-ONLY'];
+  const config = getTierSectionConfig(t)['HUMAN-ONLY'];
 
   // Extraer todas las colas HUMAN-ONLY
   const allHumanOnlyQueues = drilldownData.flatMap(skill =>
@@ -2665,7 +2667,7 @@ function HumanOnlyByReasonSection({ drilldownData, redFlagConfigs }: { drilldown
           </div>
           <div className="text-right">
             <span className="text-3xl font-bold" style={{ color: config.color }}>{totalQueues}</span>
-            <p className="text-sm text-gray-500">colas agrupadas por {reasonGroups.length} razones</p>
+            <p className="text-sm text-gray-500">{t('agenticReadiness.summary.groupedBy', { count: reasonGroups.length })}</p>
           </div>
         </div>
       </div>
@@ -2673,10 +2675,10 @@ function HumanOnlyByReasonSection({ drilldownData, redFlagConfigs }: { drilldown
       {/* Resumen */}
       <div className="px-5 py-3 border-b bg-gray-50 flex items-center justify-between text-sm">
         <span className="text-gray-600">
-          Volumen total: <strong className="text-gray-800">{totalVolume.toLocaleString()}</strong> int/mes
+          {t('agenticReadiness.humanOnlyReasons.volumeTotal')} <strong className="text-gray-800">{totalVolume.toLocaleString()}</strong> {t('agenticReadiness.table.int')}/{t('agenticReadiness.table.perMonth').replace('/', '')}
         </span>
         <span className="text-gray-500">
-          Estas colas requieren intervención antes de considerar automatización
+          {t('agenticReadiness.summary.requiresIntervention')}
         </span>
       </div>
 
@@ -2686,10 +2688,10 @@ function HumanOnlyByReasonSection({ drilldownData, redFlagConfigs }: { drilldown
           <thead>
             <tr className="text-xs text-gray-500 uppercase tracking-wider bg-gray-50 border-b border-gray-200">
               <th className="px-3 py-2.5 text-left font-medium w-8"></th>
-              <th className="px-3 py-2.5 text-left font-medium">Razón / Red Flag</th>
-              <th className="px-3 py-2.5 text-center font-medium">Colas</th>
-              <th className="px-3 py-2.5 text-right font-medium">Volumen</th>
-              <th className="px-3 py-2.5 text-left font-medium">Acción Recomendada</th>
+              <th className="px-3 py-2.5 text-left font-medium">{t('agenticReadiness.table.reason')}</th>
+              <th className="px-3 py-2.5 text-center font-medium">{t('agenticReadiness.table.queues')}</th>
+              <th className="px-3 py-2.5 text-right font-medium">{t('agenticReadiness.table.volume')}</th>
+              <th className="px-3 py-2.5 text-left font-medium">{t('agenticReadiness.table.recommendedAction')}</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-100">
@@ -2742,13 +2744,13 @@ function HumanOnlyByReasonSection({ drilldownData, redFlagConfigs }: { drilldown
                           <table className="w-full text-sm">
                             <thead>
                               <tr className="text-xs text-gray-500 uppercase tracking-wider bg-gray-100">
-                                <th className="px-4 py-2 text-left font-medium">Cola (ID)</th>
-                                <th className="px-3 py-2 text-left font-medium">Skill</th>
-                                <th className="px-3 py-2 text-right font-medium">Volumen</th>
-                                <th className="px-3 py-2 text-right font-medium">CV AHT</th>
-                                <th className="px-3 py-2 text-right font-medium">Transfer</th>
-                                <th className="px-3 py-2 text-center font-medium">Score</th>
-                                <th className="px-3 py-2 text-left font-medium">Red Flags</th>
+                                <th className="px-4 py-2 text-left font-medium">{t('agenticReadiness.table.queueId')}</th>
+                                <th className="px-3 py-2 text-left font-medium">{t('agenticReadiness.table.skill')}</th>
+                                <th className="px-3 py-2 text-right font-medium">{t('agenticReadiness.table.volume')}</th>
+                                <th className="px-3 py-2 text-right font-medium">{t('agenticReadiness.table.cv')}</th>
+                                <th className="px-3 py-2 text-right font-medium">{t('agenticReadiness.table.transfer')}</th>
+                                <th className="px-3 py-2 text-center font-medium">{t('agenticReadiness.table.score')}</th>
+                                <th className="px-3 py-2 text-left font-medium">{t('agenticReadiness.table.redFlags')}</th>
                               </tr>
                             </thead>
                             <tbody className="divide-y divide-gray-100 bg-white">
@@ -2864,10 +2866,10 @@ function PriorityCandidatesSection({ drilldownData, redFlagConfigs, t }: { drill
           <div>
             <h3 className="text-lg font-bold text-emerald-800 flex items-center gap-2">
               <Sparkles className="w-5 h-5" />
-              CLASIFICACIÓN POR TIER DE AUTOMATIZACIÓN
+              {t('agenticReadiness.sections.classificationByTier')}
             </h3>
             <p className="text-sm text-emerald-600 mt-1">
-              Skills con colas clasificadas como AUTOMATE (score ≥ 7.5, CV ≤ 75%, transfer ≤ 20%)
+              {t('agenticReadiness.classification.subtitle')}
             </p>
           </div>
           <div className="text-right">
@@ -3729,16 +3731,16 @@ export function AgenticReadinessTab({ data, onTabChange }: AgenticReadinessTabPr
       {data.drilldownData && data.drilldownData.length > 0 ? (
         <>
           {/* TABLA 1: Colas AUTOMATE - Listas para automatización */}
-          <TierQueueSection drilldownData={data.drilldownData} tier="AUTOMATE" redFlagConfigs={redFlagConfigs} />
+          <TierQueueSection drilldownData={data.drilldownData} tier="AUTOMATE" redFlagConfigs={redFlagConfigs} t={t} />
 
           {/* TABLA 2: Colas ASSIST - Candidatas a Copilot */}
-          <TierQueueSection drilldownData={data.drilldownData} tier="ASSIST" redFlagConfigs={redFlagConfigs} />
+          <TierQueueSection drilldownData={data.drilldownData} tier="ASSIST" redFlagConfigs={redFlagConfigs} t={t} />
 
           {/* TABLA 3: Colas AUGMENT - Requieren optimización */}
-          <TierQueueSection drilldownData={data.drilldownData} tier="AUGMENT" redFlagConfigs={redFlagConfigs} />
+          <TierQueueSection drilldownData={data.drilldownData} tier="AUGMENT" redFlagConfigs={redFlagConfigs} t={t} />
 
           {/* TABLA 4: Colas HUMAN-ONLY - Agrupadas por razón/red flag */}
-          <HumanOnlyByReasonSection drilldownData={data.drilldownData} redFlagConfigs={redFlagConfigs} />
+          <HumanOnlyByReasonSection drilldownData={data.drilldownData} redFlagConfigs={redFlagConfigs} t={t} />
         </>
       ) : (
         /* Fallback a tabla por Línea de Negocio si no hay drilldown data */