refactor: implement i18n in core components (phase 1)

Refactored key components to use react-i18next translations: - ErrorBoundary: error messages and labels - ProgressStepper: step labels - DimensionCard: health status labels, descriptions, benchmark text, action buttons - DashboardTabs: back button, footer, default title Added translation keys to es.json and en.json: - dashboard.defaultTitle - All health status and benchmark keys already existed Build verified successfully. Remaining 31 components to be refactored in subsequent commits. https://claude.ai/code/session_4f888c33-8937-4db8-8a9d-ddc9ac51a725
2026-02-06 18:37:40 +00:00
parent 4be14f1420
commit 9bc1a1c0d3
6 changed files with 57 additions and 41 deletions
--- a/frontend/components/DashboardTabs.tsx
+++ b/frontend/components/DashboardTabs.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { ArrowLeft } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { DashboardHeader, TabId } from './DashboardHeader';
 import { formatDateMonthYear } from '../utils/formatters';
 import { ExecutiveSummaryTab } from './tabs/ExecutiveSummaryTab';
@@ -19,12 +20,15 @@ interface DashboardTabsProps {

 export function DashboardTabs({
  data,
-  title = 'CLIENTE DEMO - Beyond CX Analytics',
+  title,
  onBack
 }: DashboardTabsProps) {
+  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState<TabId>('executive');
  const [metodologiaOpen, setMetodologiaOpen] = useState(false);

+  const displayTitle = title || t('dashboard.defaultTitle');
+
  const renderTabContent = () => {
    switch (activeTab) {
      case 'executive':
@@ -53,8 +57,8 @@ export function DashboardTabs({
              className="flex items-center gap-2 text-sm text-slate-600 hover:text-slate-800 transition-colors"
            >
              <ArrowLeft className="w-4 h-4" />
-              <span className="hidden sm:inline">Volver al formulario</span>
-              <span className="sm:hidden">Volver</span>
+              <span className="hidden sm:inline">{t('dashboard.backToForm')}</span>
+              <span className="sm:hidden">{t('dashboard.back')}</span>
            </button>
          </div>
        </div>
@@ -62,7 +66,7 @@ export function DashboardTabs({

      {/* Sticky Header with Tabs */}
      <DashboardHeader
-        title={title}
+        title={displayTitle}
        activeTab={activeTab}
        onTabChange={setActiveTab}
        onMetodologiaClick={() => setMetodologiaOpen(true)}
@@ -87,8 +91,8 @@ export function DashboardTabs({
      <footer className="border-t border-slate-200 bg-white mt-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 sm:py-4">
          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-sm text-slate-500">
-            <span className="hidden sm:inline">Beyond Diagnosis - Contact Center Analytics Platform</span>
-            <span className="sm:hidden text-xs">Beyond Diagnosis</span>
+            <span className="hidden sm:inline">{t('dashboard.footer')}</span>
+            <span className="sm:hidden text-xs">{t('dashboard.footerShort')}</span>
            <span className="text-xs sm:text-sm text-slate-400 italic">{formatDateMonthYear()}</span>
          </div>
        </div>
--- a/frontend/components/DimensionCard.tsx
+++ b/frontend/components/DimensionCard.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { DimensionAnalysis } from '../types';
 import { motion } from 'framer-motion';
 import { AlertCircle, AlertTriangle, TrendingUp, CheckCircle, Zap } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import BadgePill from './BadgePill';

 interface HealthStatus {
@@ -14,59 +15,59 @@ interface HealthStatus {
  description: string;
 }

-const getHealthStatus = (score: number): HealthStatus => {
+const getHealthStatus = (score: number, t: (key: string) => string): HealthStatus => {
  if (score >= 86) {
    return {
      level: 'excellent',
-      label: 'EXCELENTE',
+      label: t('healthStatus.excellent'),
      color: 'text-cyan-700',
      textColor: 'text-cyan-700',
      bgColor: 'bg-cyan-50',
      icon: <CheckCircle size={20} className="text-cyan-600" />,
-      description: 'Top quartile, modelo a seguir'
+      description: t('healthStatus.excellentDesc')
    };
  }
  if (score >= 71) {
    return {
      level: 'good',
-      label: 'BUENO',
+      label: t('healthStatus.good'),
      color: 'text-emerald-700',
      textColor: 'text-emerald-700',
      bgColor: 'bg-emerald-50',
      icon: <TrendingUp size={20} className="text-emerald-600" />,
-      description: 'Por encima de benchmarks, desempeño sólido'
+      description: t('healthStatus.goodDesc')
    };
  }
  if (score >= 51) {
    return {
      level: 'medium',
-      label: 'MEDIO',
+      label: t('healthStatus.medium'),
      color: 'text-amber-700',
      textColor: 'text-amber-700',
      bgColor: 'bg-amber-50',
      icon: <AlertTriangle size={20} className="text-amber-600" />,
-      description: 'Oportunidad de mejora identificada'
+      description: t('healthStatus.mediumDesc')
    };
  }
  if (score >= 31) {
    return {
      level: 'low',
-      label: 'BAJO',
+      label: t('healthStatus.low'),
      color: 'text-orange-700',
      textColor: 'text-orange-700',
      bgColor: 'bg-orange-50',
      icon: <AlertTriangle size={20} className="text-orange-600" />,
-      description: 'Requiere mejora, por debajo de benchmarks'
+      description: t('healthStatus.lowDesc')
    };
  }
  return {
    level: 'critical',
-    label: 'CRÍTICO',
+    label: t('healthStatus.critical'),
    color: 'text-red-700',
    textColor: 'text-red-700',
    bgColor: 'bg-red-50',
    icon: <AlertCircle size={20} className="text-red-600" />,
-    description: 'Requiere acción inmediata'
+    description: t('healthStatus.criticalDesc')
  };
 };

@@ -79,7 +80,8 @@ const getProgressBarColor = (score: number): string => {
 };

 const ScoreIndicator: React.FC<{ score: number; benchmark?: number }> = ({ score, benchmark }) => {
-  const healthStatus = getHealthStatus(score);
+  const { t } = useTranslation();
+  const healthStatus = getHealthStatus(score, t);

  return (
    <div className="space-y-3">
@@ -119,21 +121,21 @@ const ScoreIndicator: React.FC<{ score: number; benchmark?: number }> = ({ score
      {benchmark !== undefined && (
        <div className="bg-slate-50 rounded-lg p-3 text-sm">
          <div className="flex items-center justify-between mb-2">
-            <span className="text-slate-600">Benchmark Industria (P50)</span>
+            <span className="text-slate-600">{t('benchmark.title')}</span>
            <span className="font-bold text-slate-900">{benchmark}/100</span>
          </div>
          <div className="text-xs text-slate-500">
            {score > benchmark ? (
              <span className="text-emerald-600 font-semibold">
-                ↑ {score - benchmark} puntos por encima del promedio
+                {t('benchmark.aboveBenchmark', { points: score - benchmark })}
              </span>
            ) : score === benchmark ? (
              <span className="text-amber-600 font-semibold">
-                = Alineado con promedio de industria
+                {t('benchmark.atBenchmark')}
              </span>
            ) : (
              <span className="text-orange-600 font-semibold">
-                ↓ {benchmark - score} puntos por debajo del promedio
+                {t('benchmark.belowBenchmark', { points: benchmark - score })}
              </span>
            )}
          </div>
@@ -154,7 +156,8 @@ const ScoreIndicator: React.FC<{ score: number; benchmark?: number }> = ({ score
 };

 const DimensionCard: React.FC<{ dimension: DimensionAnalysis }> = ({ dimension }) => {
-  const healthStatus = getHealthStatus(dimension.score);
+  const { t } = useTranslation();
+  const healthStatus = getHealthStatus(dimension.score, t);

  return (
    <motion.div
@@ -226,10 +229,10 @@ const DimensionCard: React.FC<{ dimension: DimensionAnalysis }> = ({ dimension }
      >
        <Zap size={16} />
        {dimension.score < 51
-          ? 'Ver Acciones Críticas'
+          ? t('dimensionCard.viewCriticalActions')
          : dimension.score < 71
-          ? 'Explorar Mejoras'
-          : 'En buen estado'}
+          ? t('dimensionCard.exploreImprovements')
+          : t('dimensionCard.inGoodState')}
      </motion.button>
    </motion.div>
  );
--- a/frontend/components/ErrorBoundary.tsx
+++ b/frontend/components/ErrorBoundary.tsx
@@ -1,7 +1,8 @@
 import React, { Component, ErrorInfo, ReactNode } from 'react';
 import { AlertTriangle } from 'lucide-react';
+import { withTranslation, WithTranslation } from 'react-i18next';

-interface Props {
+interface Props extends WithTranslation {
  children: ReactNode;
  fallback?: ReactNode;
  componentName?: string;
@@ -45,28 +46,31 @@ class ErrorBoundary extends Component<Props, State> {
        return this.props.fallback;
      }

+      const { t } = this.props;
+
      return (
        <div className="bg-amber-50 border-2 border-amber-200 rounded-lg p-6">
          <div className="flex items-start gap-3">
            <AlertTriangle className="text-amber-600 flex-shrink-0 mt-1" size={24} />
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-amber-900 mb-2">
-                {this.props.componentName ? `Error en ${this.props.componentName}` : 'Error de Renderizado'}
+                {this.props.componentName
+                  ? t('errors.errorInComponent', { componentName: this.props.componentName })
+                  : t('errors.renderError')}
              </h3>
              <p className="text-amber-800 mb-3">
-                Este componente encontró un error y no pudo renderizarse correctamente. 
-                El resto del dashboard sigue funcionando normalmente.
+                {t('errors.componentError')}
              </p>
              <details className="text-sm">
                <summary className="cursor-pointer text-amber-700 font-medium mb-2">
-                  Ver detalles técnicos
+                  {t('errors.viewTechnicalDetails')}
                </summary>
                <div className="bg-white rounded p-3 mt-2 font-mono text-xs overflow-auto max-h-40">
-                  <p className="text-red-600 font-semibold mb-1">Error:</p>
+                  <p className="text-red-600 font-semibold mb-1">{t('errors.errorLabel')}</p>
                  <p className="text-slate-700 mb-3">{this.state.error?.toString()}</p>
                  {this.state.errorInfo && (
                    <>
-                      <p className="text-red-600 font-semibold mb-1">Stack:</p>
+                      <p className="text-red-600 font-semibold mb-1">{t('errors.stackLabel')}</p>
                      <pre className="text-slate-600 whitespace-pre-wrap">
                        {this.state.errorInfo.componentStack}
                      </pre>
@@ -78,7 +82,7 @@ class ErrorBoundary extends Component<Props, State> {
                onClick={() => window.location.reload()}
                className="mt-4 px-4 py-2 bg-amber-600 text-white rounded hover:bg-amber-700 transition-colors"
              >
-                Recargar Página
+                {t('dashboard.reloadPage')}
              </button>
            </div>
          </div>
@@ -90,4 +94,4 @@ class ErrorBoundary extends Component<Props, State> {
  }
 }

-export default ErrorBoundary;
+export default withTranslation()(ErrorBoundary);
--- a/frontend/components/ProgressStepper.tsx
+++ b/frontend/components/ProgressStepper.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Check, Package, Upload, BarChart3 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';

 interface Step {
@@ -13,13 +14,15 @@ interface ProgressStepperProps {
  currentStep: number;
 }

-const steps: Step[] = [
-  { id: 1, label: 'Seleccionar Tier', icon: Package },
-  { id: 2, label: 'Subir Datos', icon: Upload },
-  { id: 3, label: 'Ver Resultados', icon: BarChart3 },
-];
-
 const ProgressStepper: React.FC<ProgressStepperProps> = ({ currentStep }) => {
+  const { t } = useTranslation();
+
+  const steps: Step[] = [
+    { id: 1, label: t('stepper.selectTier'), icon: Package },
+    { id: 2, label: t('stepper.uploadData'), icon: Upload },
+    { id: 3, label: t('stepper.viewResults'), icon: BarChart3 },
+  ];
+
  return (
    <div className="w-full max-w-3xl mx-auto mb-8">
      <div className="relative flex items-center justify-between">