Support multiple languages

frontend/src/components/domain/auth/LoginForm.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, Input, Card } from '../../ui';
 import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/auth.store';
 import { useToast } from '../../../hooks/ui/useToast';
@@ -24,6 +25,7 @@ export const LoginForm: React.FC<LoginFormProps> = ({
   className,
   autoFocus = true
 }) => {
+  const { t } = useTranslation();
   const [credentials, setCredentials] = useState<LoginCredentials>({
     email: '',
     password: '',
@@ -32,7 +34,7 @@ export const LoginForm: React.FC<LoginFormProps> = ({
   const [errors, setErrors] = useState<Partial<LoginCredentials>>({});
   const [showPassword, setShowPassword] = useState(false);
   const emailInputRef = useRef<HTMLInputElement>(null);
-  
+
   const { login } = useAuthActions();
   const isLoading = useAuthLoading();
   const error = useAuthError();
@@ -49,13 +51,13 @@ export const LoginForm: React.FC<LoginFormProps> = ({
     const newErrors: Partial<LoginCredentials> = {};
     
     if (!credentials.email.trim()) {
-      newErrors.email = 'El email es requerido';
+      newErrors.email = t('auth:validation.email_required', 'El email es requerido');
     } else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(credentials.email)) {
-      newErrors.email = 'Por favor, ingrese un email válido';
+      newErrors.email = t('auth:validation.email_invalid', 'Por favor, ingrese un email válido');
     }
     
     if (!credentials.password) {
-      newErrors.password = 'La contraseña es requerida';
+      newErrors.password = t('auth:validation.password_required', 'La contraseña es requerida');
     }
     
     setErrors(newErrors);
@@ -114,10 +116,10 @@ export const LoginForm: React.FC<LoginFormProps> = ({
     <Card className={`p-8 w-full max-w-md ${className || ''}`} role="main">
       <div className="text-center mb-8">
         <h1 className="text-2xl font-bold text-text-primary mb-2">
-          Iniciar Sesión
+          {t('auth:login.title', 'Iniciar Sesión')}
         </h1>
         <p className="text-text-secondary">
-          Accede al panel de control de tu panadería
+          {t('auth:login.subtitle', 'Accede al panel de control de tu panadería')}
         </p>
       </div>
 
@@ -125,14 +127,14 @@ export const LoginForm: React.FC<LoginFormProps> = ({
         onSubmit={handleSubmit} 
         className="space-y-6"
         noValidate
-        aria-label="Formulario de inicio de sesión"
+        aria-label={t('auth:login.title', 'Formulario de inicio de sesión')}
         onKeyDown={handleKeyDown}
       >
         <div>
           <Input
             ref={emailInputRef}
             type="email"
-            label="Correo Electrónico"
+            label={t('auth:login.email', 'Correo Electrónico')}
             placeholder="tu.email@panaderia.com"
             value={credentials.email}
             onChange={handleInputChange('email')}
@@ -163,8 +165,8 @@ export const LoginForm: React.FC<LoginFormProps> = ({
         <div>
           <Input
             type={showPassword ? 'text' : 'password'}
-            label="Contraseña"
-            placeholder="Tu contraseña segura"
+            label={t('auth:login.password', 'Contraseña')}
+            placeholder={t('auth:login.password', 'Tu contraseña segura')}
             value={credentials.password}
             onChange={handleInputChange('password')}
             error={errors.password}

frontend/src/components/domain/auth/ProfileSettings.tsx

@@ -3,7 +3,6 @@ import { Button, Input, Card, Select, Avatar, Modal } from '../../ui';
 import { useAuthUser } from '../../../stores/auth.store';
 import { useToast } from '../../../hooks/ui/useToast';
 import { useUpdateProfile, useChangePassword, useAuthProfile } from '../../../api/hooks/auth';
-import { useEffect } from 'react';
 
 interface ProfileSettingsProps {
   onSuccess?: () => void;

frontend/src/components/domain/auth/RegisterForm.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, Input, Card } from '../../ui';
 import { PasswordCriteria, validatePassword, getPasswordErrors } from '../../ui/PasswordCriteria';
 import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/auth.store';
@@ -23,6 +24,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
   onLoginClick,
   className
 }) => {
+  const { t } = useTranslation();
   const [formData, setFormData] = useState<SimpleUserRegistration>({
     full_name: '',
     email: '',
@@ -53,19 +55,19 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
     const newErrors: Partial<SimpleUserRegistration> = {};
     
     if (!formData.full_name.trim()) {
-      newErrors.full_name = 'El nombre completo es requerido';
+      newErrors.full_name = t('auth:validation.first_name_required', 'El nombre completo es requerido');
     } else if (formData.full_name.trim().length < 2) {
-      newErrors.full_name = 'El nombre debe tener al menos 2 caracteres';
+      newErrors.full_name = t('auth:validation.field_required', 'El nombre debe tener al menos 2 caracteres');
     }
     
     if (!formData.email.trim()) {
-      newErrors.email = 'El email es requerido';
+      newErrors.email = t('auth:validation.email_required', 'El email es requerido');
     } else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(formData.email)) {
-      newErrors.email = 'Por favor, ingrese un email válido';
+      newErrors.email = t('auth:validation.email_invalid', 'Por favor, ingrese un email válido');
     }
     
     if (!formData.password) {
-      newErrors.password = 'La contraseña es requerida';
+      newErrors.password = t('auth:validation.password_required', 'La contraseña es requerida');
     } else {
       const passwordErrors = getPasswordErrors(formData.password);
       if (passwordErrors.length > 0) {
@@ -74,13 +76,13 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
     }
     
     if (!formData.confirmPassword) {
-      newErrors.confirmPassword = 'Confirma tu contraseña';
+      newErrors.confirmPassword = t('auth:register.confirm_password', 'Confirma tu contraseña');
     } else if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = 'Las contraseñas no coinciden';
+      newErrors.confirmPassword = t('auth:validation.passwords_must_match', 'Las contraseñas no coinciden');
     }
     
     if (!formData.acceptTerms) {
-      newErrors.acceptTerms = 'Debes aceptar los términos y condiciones';
+      newErrors.acceptTerms = t('auth:validation.terms_required', 'Debes aceptar los términos y condiciones');
     }
     
     setErrors(newErrors);
@@ -104,13 +106,13 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
       
       await register(registrationData);
       
-      showSuccessToast('¡Bienvenido! Tu cuenta ha sido creada correctamente.', {
-        title: 'Cuenta creada exitosamente'
+      showSuccessToast(t('auth:register.registering', '¡Bienvenido! Tu cuenta ha sido creada correctamente.'), {
+        title: t('auth:alerts.success_create', 'Cuenta creada exitosamente')
       });
       onSuccess?.();
     } catch (err) {
-      showErrorToast(error || 'No se pudo crear la cuenta. Verifica que el email no esté en uso.', {
-        title: 'Error al crear la cuenta'
+      showErrorToast(error || t('auth:register.register_button', 'No se pudo crear la cuenta. Verifica que el email no esté en uso.'), {
+        title: t('auth:alerts.error_create', 'Error al crear la cuenta')
       });
     }
   };
@@ -127,16 +129,16 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
     <Card className={`p-8 w-full max-w-md ${className || ''}`} role="main">
       <div className="text-center mb-8">
         <h1 className="text-3xl font-bold text-text-primary mb-2">
-          Crear Cuenta
+          {t('auth:register.title', 'Crear Cuenta')}
         </h1>
         <p className="text-text-secondary text-lg">
-          Únete y comienza hoy mismo
+          {t('auth:register.subtitle', 'Únete y comienza hoy mismo')}
         </p>
       </div>
 
       <form onSubmit={handleSubmit} className="space-y-6">
         <Input
-          label="Nombre Completo"
+          label={t('auth:register.first_name', 'Nombre Completo')}
           placeholder="Juan Pérez García"
           value={formData.full_name}
           onChange={handleInputChange('full_name')}
@@ -153,7 +155,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
         
         <Input
           type="email"
-          label="Correo Electrónico"
+          label={t('auth:register.email', 'Correo Electrónico')}
           placeholder="tu.email@ejemplo.com"
           value={formData.email}
           onChange={handleInputChange('email')}

frontend/src/components/domain/dashboard/RealTimeAlerts.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Card, CardHeader, CardBody } from '../../ui/Card';
 import { Badge } from '../../ui/Badge';
 import { Button } from '../../ui/Button';
@@ -41,6 +42,7 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
   className,
   maxAlerts = 10
 }) => {
+  const { t } = useTranslation(['dashboard']);
   const [expandedAlert, setExpandedAlert] = useState<string | null>(null);
 
   const { notifications, isConnected, markAsRead, removeNotification } = useNotifications();
@@ -108,11 +110,13 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
     const diffMs = now.getTime() - date.getTime();
     const diffMins = Math.floor(diffMs / (1000 * 60));
 
-    if (diffMins < 1) return 'Ahora';
-    if (diffMins < 60) return `${diffMins}m`;
+    if (diffMins < 1) return t('dashboard:alerts.time.now', 'Ahora');
+    if (diffMins < 60) return t('dashboard:alerts.time.minutes_ago', 'hace {{count}} min', { count: diffMins });
     const diffHours = Math.floor(diffMins / 60);
-    if (diffHours < 24) return `${diffHours}h`;
-    return date.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' });
+    if (diffHours < 24) return t('dashboard:alerts.time.hours_ago', 'hace {{count}} h', { count: diffHours });
+    return date.toLocaleDateString() === new Date(now.getTime() - 24 * 60 * 60 * 1000).toLocaleDateString()
+      ? t('dashboard:alerts.time.yesterday', 'Ayer')
+      : date.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' });
   };
 
   const toggleExpanded = (alertId: string) => {
@@ -147,7 +151,7 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
             </div>
             <div>
               <h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>
-                Alertas
+                {t('dashboard:alerts.title', 'Alertas')}
               </h3>
               <div className="flex items-center gap-2">
                 {isConnected ? (
@@ -156,7 +160,10 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
                   <WifiOff className="w-3 h-3" style={{ color: 'var(--color-error)' }} />
                 )}
                 <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                  {isConnected ? 'En vivo' : 'Desconectado'}
+                  {isConnected
+                    ? t('dashboard:alerts.live', 'En vivo')
+                    : t('dashboard:alerts.offline', 'Desconectado')
+                  }
                 </span>
               </div>
             </div>
@@ -182,7 +189,7 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
           <div className="p-6 text-center">
             <CheckCircle className="w-6 h-6 mx-auto mb-2" style={{ color: 'var(--color-success)' }} />
             <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-              No hay alertas activas
+              {t('dashboard:alerts.no_alerts', 'No hay alertas activas')}
             </p>
           </div>
         ) : (
@@ -241,7 +248,10 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
                           {alert.severity.toUpperCase()}
                         </Badge>
                         <Badge variant="secondary" size="sm">
-                          {alert.item_type === 'alert' ? '🚨 Alerta' : '💡 Recomendación'}
+                          {alert.item_type === 'alert'
+                            ? `🚨 ${t('dashboard:alerts.types.alert', 'Alerta')}`
+                            : `💡 ${t('dashboard:alerts.types.recommendation', 'Recomendación')}`
+                          }
                         </Badge>
                       </div>
 
@@ -277,7 +287,7 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
                       {alert.actions && alert.actions.length > 0 && (
                         <div className="mb-4">
                           <p className="text-xs font-semibold mb-2 uppercase tracking-wide" style={{ color: 'var(--text-primary)' }}>
-                            Acciones Recomendadas
+                            {t('dashboard:alerts.recommended_actions', 'Acciones Recomendadas')}
                           </p>
                           <div className="space-y-1">
                             {alert.actions.map((action, index) => (
@@ -298,7 +308,7 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
                       {alert.metadata && Object.keys(alert.metadata).length > 0 && (
                         <div className="mb-4 p-2 rounded-md" style={{ backgroundColor: 'var(--bg-secondary)' }}>
                           <p className="text-xs font-semibold mb-1 uppercase tracking-wide" style={{ color: 'var(--text-primary)' }}>
-                            Detalles Adicionales
+                            {t('dashboard:alerts.additional_details', 'Detalles Adicionales')}
                           </p>
                           <div className="text-xs space-y-1" style={{ color: 'var(--text-secondary)' }}>
                             {Object.entries(alert.metadata).map(([key, value]) => (
@@ -323,7 +333,7 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
                           className="h-8 px-3 text-xs font-medium"
                         >
                           <Check className="w-3 h-3 mr-1" />
-                          Marcar como leído
+                          {t('dashboard:alerts.mark_as_read', 'Marcar como leído')}
                         </Button>
                         <Button
                           variant="ghost"
@@ -335,7 +345,7 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
                           className="h-8 px-3 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50"
                         >
                           <Trash2 className="w-3 h-3 mr-1" />
-                          Eliminar
+                          {t('dashboard:alerts.remove', 'Eliminar')}
                         </Button>
                       </div>
                     </div>
@@ -355,7 +365,7 @@ const RealTimeAlerts: React.FC<RealTimeAlertsProps> = ({
             }}
           >
             <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-              {activeAlerts.length} alertas activas
+              {t('dashboard:alerts.active_count', '{{count}} alertas activas', { count: activeAlerts.length })}
             </p>
           </div>
         )}

frontend/src/components/domain/inventory/CreateIngredientModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Plus, Package, Calculator, Settings } from 'lucide-react';
 import { StatusModal } from '../../ui/StatusModal/StatusModal';
 import { IngredientCreate, UnitOfMeasure, IngredientCategory, ProductCategory } from '../../../api/types/inventory';
@@ -20,6 +21,7 @@ export const CreateIngredientModal: React.FC<CreateIngredientModalProps> = ({
   onClose,
   onCreateIngredient
 }) => {
+  const { t } = useTranslation(['inventory']);
   const [formData, setFormData] = useState<IngredientCreate>({
     name: '',
     description: '',
@@ -70,32 +72,32 @@ export const CreateIngredientModal: React.FC<CreateIngredientModalProps> = ({
   const handleSave = async () => {
     // Validation
     if (!formData.name?.trim()) {
-      alert('El nombre es requerido');
+      alert(t('inventory:validation.name_required', 'El nombre es requerido'));
       return;
     }
 
     if (!formData.category) {
-      alert('La categoría es requerida');
+      alert(t('inventory:validation.category_required', 'La categoría es requerida'));
       return;
     }
 
     if (!formData.unit_of_measure) {
-      alert('La unidad de medida es requerida');
+      alert(t('inventory:validation.unit_required', 'La unidad de medida es requerida'));
       return;
     }
 
     if (!formData.low_stock_threshold || formData.low_stock_threshold < 0) {
-      alert('El umbral de stock bajo debe ser un número positivo');
+      alert(t('inventory:validation.min_greater_than_zero', 'El umbral de stock bajo debe ser un número positivo'));
       return;
     }
 
     if (!formData.reorder_point || formData.reorder_point < 0) {
-      alert('El punto de reorden debe ser un número positivo');
+      alert(t('inventory:validation.min_greater_than_zero', 'El punto de reorden debe ser un número positivo'));
       return;
     }
 
     if (formData.reorder_point <= formData.low_stock_threshold) {
-      alert('El punto de reorden debe ser mayor que el umbral de stock bajo');
+      alert(t('inventory:validation.max_greater_than_min', 'El punto de reorden debe ser mayor que el umbral de stock bajo'));
       return;
     }
 
@@ -153,7 +155,7 @@ export const CreateIngredientModal: React.FC<CreateIngredientModalProps> = ({
 
   const statusConfig = {
     color: statusColors.inProgress.primary,
-    text: 'Nuevo Artículo',
+    text: t('inventory:actions.add_item', 'Nuevo Artículo'),
     icon: Plus,
     isCritical: false,
     isHighlight: true
@@ -161,11 +163,11 @@ export const CreateIngredientModal: React.FC<CreateIngredientModalProps> = ({
 
   const sections = [
     {
-      title: 'Información Básica',
+      title: t('inventory:forms.item_details', 'Información Básica'),
       icon: Package,
       fields: [
         {
-          label: 'Nombre',
+          label: t('inventory:fields.name', 'Nombre'),
           value: formData.name,
           type: 'text' as const,
           editable: true,
@@ -173,7 +175,7 @@ export const CreateIngredientModal: React.FC<CreateIngredientModalProps> = ({
           placeholder: 'Ej: Harina de trigo 000'
         },
         {
-          label: 'Descripción',
+          label: t('inventory:fields.description', 'Descripción'),
           value: formData.description || '',
           type: 'text' as const,
           editable: true,

frontend/src/components/domain/onboarding/OnboardingWizard.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { Button } from '../../ui/Button';
 import { Card, CardHeader, CardBody } from '../../ui/Card';
 import { useAuth } from '../../../contexts/AuthContext';
@@ -29,40 +30,41 @@ interface StepProps {
   isLastStep: boolean;
 }
 
-// Steps must match backend ONBOARDING_STEPS exactly
-// Note: "user_registered" is auto-completed and not shown in UI
-const STEPS: StepConfig[] = [
-  {
-    id: 'setup',
-    title: 'Registrar Panadería',
-    description: 'Configura la información básica de tu panadería',
-    component: RegisterTenantStep,
-  },
-  {
-    id: 'smart-inventory-setup',
-    title: 'Configurar Inventario',
-    description: 'Sube datos de ventas y configura tu inventario inicial',
-    component: UploadSalesDataStep,
-  },
-  {
-    id: 'ml-training',
-    title: 'Entrenamiento IA',
-    description: 'Entrena tu modelo de inteligencia artificial personalizado',
-    component: MLTrainingStep,
-  },
-  {
-    id: 'completion',
-    title: 'Configuración Completa',
-    description: '¡Bienvenido a tu sistema de gestión inteligente!',
-    component: CompletionStep,
-  },
-];
-
 export const OnboardingWizard: React.FC = () => {
+  const { t } = useTranslation();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const { user } = useAuth();
 
+  // Steps must match backend ONBOARDING_STEPS exactly
+  // Note: "user_registered" is auto-completed and not shown in UI
+  const STEPS: StepConfig[] = [
+    {
+      id: 'setup',
+      title: t('onboarding:wizard.steps.setup.title', 'Registrar Panadería'),
+      description: t('onboarding:wizard.steps.setup.description', 'Configura la información básica de tu panadería'),
+      component: RegisterTenantStep,
+    },
+    {
+      id: 'smart-inventory-setup',
+      title: t('onboarding:wizard.steps.smart_inventory_setup.title', 'Configurar Inventario'),
+      description: t('onboarding:wizard.steps.smart_inventory_setup.description', 'Sube datos de ventas y configura tu inventario inicial'),
+      component: UploadSalesDataStep,
+    },
+    {
+      id: 'ml-training',
+      title: t('onboarding:wizard.steps.ml_training.title', 'Entrenamiento IA'),
+      description: t('onboarding:wizard.steps.ml_training.description', 'Entrena tu modelo de inteligencia artificial personalizado'),
+      component: MLTrainingStep,
+    },
+    {
+      id: 'completion',
+      title: t('onboarding:wizard.steps.completion.title', 'Configuración Completa'),
+      description: t('onboarding:wizard.steps.completion.description', '¡Bienvenido a tu sistema de gestión inteligente!'),
+      component: CompletionStep,
+    },
+  ];
+
   // Check if this is a fresh onboarding (new tenant creation)
   const isNewTenant = searchParams.get('new') === 'true';
 
@@ -277,7 +279,7 @@ export const OnboardingWizard: React.FC = () => {
       }
       
       // Don't advance automatically on error - user should see the issue
-      alert(`Error al completar paso "${currentStep.title}": ${errorMessage}`);
+      alert(`${t('onboarding:errors.step_failed', 'Error al completar paso')} "${currentStep.title}": ${errorMessage}`);
     }
   };
 
@@ -289,7 +291,7 @@ export const OnboardingWizard: React.FC = () => {
           <CardBody>
             <div className="flex items-center justify-center space-x-3">
               <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--color-primary)]"></div>
-              <p className="text-[var(--text-secondary)] text-sm sm:text-base">Cargando tu progreso...</p>
+              <p className="text-[var(--text-secondary)] text-sm sm:text-base">{t('common:loading', 'Cargando tu progreso...')}</p>
             </div>
           </CardBody>
         </Card>
@@ -311,17 +313,17 @@ export const OnboardingWizard: React.FC = () => {
               </div>
               <div>
                 <h2 className="text-base sm:text-lg font-semibold text-[var(--text-primary)] mb-2">
-                  Error al cargar progreso
+                  {t('onboarding:errors.network_error', 'Error al cargar progreso')}
                 </h2>
                 <p className="text-sm sm:text-base text-[var(--text-secondary)] mb-4 px-2">
-                  No pudimos cargar tu progreso de configuración. Puedes continuar desde el inicio.
+                  {t('onboarding:errors.try_again', 'No pudimos cargar tu progreso de configuración. Puedes continuar desde el inicio.')}
                 </p>
                 <Button
                   onClick={() => setIsInitialized(true)}
                   variant="primary"
                   size="lg"
                 >
-                  Continuar
+                  {t('onboarding:wizard.navigation.next', 'Continuar')}
                 </Button>
               </div>
             </div>
@@ -350,10 +352,10 @@ export const OnboardingWizard: React.FC = () => {
               </div>
               <div>
                 <p className="text-sm font-medium text-[var(--text-primary)]">
-                  Creando Nueva Organización
+                  {t('onboarding:wizard.title', 'Creando Nueva Organización')}
                 </p>
                 <p className="text-xs text-[var(--text-secondary)]">
-                  Configurarás una nueva panadería desde cero. Este proceso es independiente de tus organizaciones existentes.
+                  {t('onboarding:wizard.subtitle', 'Configurarás una nueva panadería desde cero. Este proceso es independiente de tus organizaciones existentes.')}
                 </p>
               </div>
             </div>
@@ -366,21 +368,21 @@ export const OnboardingWizard: React.FC = () => {
         <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 space-y-2 sm:space-y-0">
           <div className="text-center sm:text-left">
             <h1 className="text-xl sm:text-2xl font-bold text-[var(--text-primary)]">
-              {isNewTenant ? 'Crear Nueva Organización' : 'Bienvenido a Bakery IA'}
+              {isNewTenant ? t('onboarding:wizard.title', 'Crear Nueva Organización') : t('onboarding:wizard.title', 'Bienvenido a Bakery IA')}
             </h1>
             <p className="text-[var(--text-secondary)] text-xs sm:text-sm mt-1">
               {isNewTenant
-                ? 'Configura tu nueva panadería desde cero'
-                : 'Configura tu sistema de gestión inteligente paso a paso'
+                ? t('onboarding:wizard.subtitle', 'Configura tu nueva panadería desde cero')
+                : t('onboarding:wizard.subtitle', 'Configura tu sistema de gestión inteligente paso a paso')
               }
             </p>
           </div>
           <div className="text-center sm:text-right">
             <div className="text-sm text-[var(--text-secondary)]">
-              Paso {currentStepIndex + 1} de {STEPS.length}
+              {t('onboarding:wizard.progress.step_of', 'Paso {{current}} de {{total}}', { current: currentStepIndex + 1, total: STEPS.length })}
             </div>
             <div className="text-xs text-[var(--text-tertiary)]">
-              {Math.round(progressPercentage)}% completado
+              {Math.round(progressPercentage)}% {t('onboarding:wizard.progress.completed', 'completado')}
               {isNewTenant && <span className="text-[var(--color-primary)] ml-1">(nuevo)</span>}
             </div>
           </div>

frontend/src/components/domain/sales/OrdersTable.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Table,
   Button,
@@ -95,35 +96,7 @@ const StatusColors = {
   [OrderStatus.CANCELADO]: 'red'
 } as const;
 
-const StatusLabels = {
-  [OrderStatus.PENDIENTE]: 'Pendiente',
-  [OrderStatus.CONFIRMADO]: 'Confirmado',
-  [OrderStatus.EN_PREPARACION]: 'En Preparación',
-  [OrderStatus.LISTO]: 'Listo para Entrega',
-  [OrderStatus.ENTREGADO]: 'Entregado',
-  [OrderStatus.CANCELADO]: 'Cancelado'
-} as const;
-
-const ChannelLabels = {
-  [SalesChannel.STORE_FRONT]: 'Tienda',
-  [SalesChannel.ONLINE]: 'Online',
-  [SalesChannel.PHONE_ORDER]: 'Teléfono',
-  [SalesChannel.DELIVERY]: 'Delivery',
-  [SalesChannel.CATERING]: 'Catering',
-  [SalesChannel.WHOLESALE]: 'Mayorista',
-  [SalesChannel.FARMERS_MARKET]: 'Mercado',
-  [SalesChannel.THIRD_PARTY]: 'Terceros'
-} as const;
-
-const PaymentLabels = {
-  [PaymentMethod.CASH]: 'Efectivo',
-  [PaymentMethod.CREDIT_CARD]: 'Tarjeta Crédito',
-  [PaymentMethod.DEBIT_CARD]: 'Tarjeta Débito',
-  [PaymentMethod.DIGITAL_WALLET]: 'Wallet Digital',
-  [PaymentMethod.BANK_TRANSFER]: 'Transferencia',
-  [PaymentMethod.CHECK]: 'Cheque',
-  [PaymentMethod.STORE_CREDIT]: 'Crédito Tienda'
-} as const;
+// Note: These will be replaced with translation functions inside the component
 
 export const OrdersTable: React.FC<OrdersTableProps> = ({
   tenantId,
@@ -132,6 +105,34 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
   onOrderUpdate,
   initialFilters = {}
 }) => {
+  const { t } = useTranslation(['sales']);
+
+  // Translation helper functions
+  const getStatusLabel = (status: OrderStatus) => {
+    const statusKey = status.toLowerCase();
+    return t(`sales:orders.status.${statusKey}`, StatusLabels[status] || status);
+  };
+
+  const getChannelLabel = (channel: SalesChannel) => {
+    const channelKey = channel.toLowerCase();
+    return t(`sales:orders.channels.${channelKey}`, channel);
+  };
+
+  const getPaymentLabel = (method: PaymentMethod) => {
+    const methodKey = method.toLowerCase();
+    return t(`sales:orders.payment_methods.${methodKey}`, method);
+  };
+
+  // Legacy objects for fallbacks (will be removed after migration)
+  const StatusLabels = {
+    [OrderStatus.PENDIENTE]: 'Pendiente',
+    [OrderStatus.CONFIRMADO]: 'Confirmado',
+    [OrderStatus.EN_PREPARACION]: 'En Preparación',
+    [OrderStatus.LISTO]: 'Listo para Entrega',
+    [OrderStatus.ENTREGADO]: 'Entregado',
+    [OrderStatus.CANCELADO]: 'Cancelado'
+  } as const;
+
   // State
   const [orders, setOrders] = useState<Order[]>([]);
   const [loading, setLoading] = useState(false);
@@ -270,7 +271,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'id',
-      title: 'Nº Pedido',
+      title: t('sales:orders.table.columns.order_number', 'Nº Pedido'),
       sortable: true,
       render: (order: Order) => (
         <button
@@ -286,7 +287,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'customer_name',
-      title: 'Cliente',
+      title: t('sales:orders.table.columns.customer', 'Cliente'),
       sortable: true,
       render: (order: Order) => (
         <div>
@@ -299,7 +300,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'products',
-      title: 'Productos',
+      title: t('sales:orders.table.columns.products', 'Productos'),
       render: (order: Order) => (
         <div>
           <div className="font-medium">{order.product_name}</div>
@@ -311,7 +312,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'total_revenue',
-      title: 'Total',
+      title: t('sales:orders.table.columns.total', 'Total'),
       sortable: true,
       render: (order: Order) => (
         <div className="text-right">
@@ -326,17 +327,17 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'status',
-      title: 'Estado',
+      title: t('sales:orders.table.columns.status', 'Estado'),
       sortable: true,
       render: (order: Order) => (
         <Badge color={StatusColors[order.status]} variant="soft">
-          {StatusLabels[order.status]}
+          {getStatusLabel(order.status)}
         </Badge>
       ),
     },
     {
       key: 'sales_channel',
-      title: 'Canal',
+      title: t('sales:orders.table.columns.channel', 'Canal'),
       render: (order: Order) => (
         <span className="text-sm text-[var(--text-secondary)]">
           {ChannelLabels[order.sales_channel]}
@@ -345,7 +346,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
     },
     {
       key: 'date',
-      title: 'Fecha',
+      title: t('sales:orders.table.columns.date', 'Fecha'),
       sortable: true,
       render: (order: Order) => (
         <div>
@@ -364,7 +365,7 @@ export const OrdersTable: React.FC<OrdersTableProps> = ({
   if (showActions) {
     columns.push({
       key: 'actions',
-      title: 'Acciones',
+      title: t('sales:orders.table.columns.actions', 'Acciones'),
       render: (order: Order) => (
         <div className="flex space-x-2">
           <Tooltip content="Ver detalles">