Add English language support with i18n implementation
Implemented comprehensive internationalization (i18n) for both frontend and backend: Frontend: - Added react-i18next configuration with Spanish (default) and English - Created translation files (locales/es.json, locales/en.json) - Refactored core components to use i18n: LoginPage, DashboardHeader, DataUploader - Created LanguageSelector component with toggle between ES/EN - Updated API client to send Accept-Language header Backend: - Created i18n module with translation dictionary for error messages - Updated security.py to return localized authentication errors - Updated api/analysis.py to return localized validation errors - Implemented language detection from Accept-Language header Spanish remains the default language ensuring backward compatibility. Users can switch between languages using the language selector in the dashboard header. https://claude.ai/code/session_1N9VX
This commit is contained in:
Claude
@@ -1,5 +1,7 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { LayoutDashboard, Layers, Bot, Map, ShieldCheck, Info, Scale } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { LanguageSelector } from './LanguageSelector';
|
||||
|
||||
export type TabId = 'executive' | 'dimensions' | 'readiness' | 'roadmap' | 'law10';
|
||||
|
||||
@@ -16,37 +18,41 @@ interface DashboardHeaderProps {
|
||||
onMetodologiaClick?: () => void;
|
||||
}
|
||||
|
||||
const TABS: TabConfig[] = [
|
||||
{ id: 'executive', label: 'Resumen', icon: LayoutDashboard },
|
||||
{ id: 'dimensions', label: 'Dimensiones', icon: Layers },
|
||||
{ id: 'readiness', label: 'Agentic Readiness', icon: Bot },
|
||||
{ id: 'roadmap', label: 'Roadmap', icon: Map },
|
||||
{ id: 'law10', label: 'Ley 10/2025', icon: Scale },
|
||||
];
|
||||
|
||||
export function DashboardHeader({
|
||||
title = 'CLIENTE DEMO - Beyond CX Analytics',
|
||||
activeTab,
|
||||
onTabChange,
|
||||
onMetodologiaClick
|
||||
}: DashboardHeaderProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const TABS: TabConfig[] = [
|
||||
{ id: 'executive', label: t('tabs.executive'), icon: LayoutDashboard },
|
||||
{ id: 'dimensions', label: t('tabs.dimensions'), icon: Layers },
|
||||
{ id: 'readiness', label: t('tabs.agenticReadiness'), icon: Bot },
|
||||
{ id: 'roadmap', label: t('tabs.roadmap'), icon: Map },
|
||||
{ id: 'law10', label: t('tabs.law10'), icon: Scale },
|
||||
];
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-white border-b border-slate-200 shadow-sm">
|
||||
{/* Top row: Title and Metodología Badge */}
|
||||
{/* Top row: Title and Badges */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 sm:py-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h1 className="text-base sm:text-xl font-bold text-slate-800 truncate">{title}</h1>
|
||||
{onMetodologiaClick && (
|
||||
<button
|
||||
onClick={onMetodologiaClick}
|
||||
className="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 bg-green-100 text-green-800 rounded-full text-[10px] sm:text-xs font-medium hover:bg-green-200 transition-colors cursor-pointer flex-shrink-0"
|
||||
>
|
||||
<ShieldCheck className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
|
||||
<span className="hidden md:inline">Metodología de Transformación de Datos aplicada</span>
|
||||
<span className="md:hidden">Metodología</span>
|
||||
<Info className="w-2.5 h-2.5 sm:w-3 sm:h-3 opacity-60" />
|
||||
</button>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<LanguageSelector />
|
||||
{onMetodologiaClick && (
|
||||
<button
|
||||
onClick={onMetodologiaClick}
|
||||
className="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 bg-green-100 text-green-800 rounded-full text-[10px] sm:text-xs font-medium hover:bg-green-200 transition-colors cursor-pointer flex-shrink-0"
|
||||
>
|
||||
<ShieldCheck className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
|
||||
<span className="hidden md:inline">{t('methodology.appliedBadge')}</span>
|
||||
<span className="md:hidden">{t('methodology.appliedBadgeShort')}</span>
|
||||
<Info className="w-2.5 h-2.5 sm:w-3 sm:h-3 opacity-60" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { UploadCloud, File, Sheet, Loader2, CheckCircle, Sparkles, Wand2, BarChart3 } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { generateSyntheticCsv } from '../utils/syntheticDataGenerator';
|
||||
import { TierKey } from '../types';
|
||||
|
||||
@@ -21,6 +22,7 @@ const formatFileSize = (bytes: number, decimals = 2) => {
|
||||
};
|
||||
|
||||
const DataUploader: React.FC<DataUploaderProps> = ({ selectedTier, onAnalysisReady, isAnalyzing }) => {
|
||||
const { t } = useTranslation();
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [sheetUrl, setSheetUrl] = useState('');
|
||||
const [status, setStatus] = useState<UploadStatus>('idle');
|
||||
@@ -57,7 +59,7 @@ const DataUploader: React.FC<DataUploaderProps> = ({ selectedTier, onAnalysisRea
|
||||
setFile(selectedFile);
|
||||
setSheetUrl('');
|
||||
} else {
|
||||
setError('Tipo de archivo no válido. Sube un CSV o Excel.');
|
||||
setError(t('upload.invalidFileType'));
|
||||
setFile(null);
|
||||
}
|
||||
}
|
||||
@@ -89,19 +91,19 @@ const DataUploader: React.FC<DataUploaderProps> = ({ selectedTier, onAnalysisRea
|
||||
setStatus('generating');
|
||||
setTimeout(() => {
|
||||
const csvData = generateSyntheticCsv(selectedTier);
|
||||
handleDataReady('Datos Sintéticos Generados!');
|
||||
handleDataReady(t('upload.syntheticDataGenerated'));
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!file && !sheetUrl) {
|
||||
setError('Por favor, sube un archivo o introduce una URL de Google Sheet.');
|
||||
setError(t('upload.pleaseUploadFile'));
|
||||
return;
|
||||
}
|
||||
resetState(false);
|
||||
setStatus('uploading');
|
||||
setTimeout(() => {
|
||||
handleDataReady('Datos Recibidos!');
|
||||
handleDataReady(t('upload.dataReceived'));
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
@@ -114,7 +116,7 @@ const DataUploader: React.FC<DataUploaderProps> = ({ selectedTier, onAnalysisRea
|
||||
className="w-full flex items-center justify-center gap-2 text-white px-6 py-3 rounded-lg transition-colors shadow-sm hover:shadow-md bg-green-600 hover:bg-green-700 disabled:opacity-75 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isAnalyzing ? <Loader2 className="animate-spin" size={20} /> : <BarChart3 size={20} />}
|
||||
{isAnalyzing ? 'Analizando...' : 'Ver Dashboard de Diagnóstico'}
|
||||
{isAnalyzing ? t('upload.analyzingData') : t('dashboard.viewDashboard')}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -126,7 +128,7 @@ const DataUploader: React.FC<DataUploaderProps> = ({ selectedTier, onAnalysisRea
|
||||
className="w-full flex items-center justify-center gap-2 text-white px-6 py-3 rounded-lg transition-colors shadow-sm hover:shadow-md bg-blue-600 hover:bg-blue-700 disabled:opacity-75 disabled:cursor-not-allowed"
|
||||
>
|
||||
{status === 'uploading' ? <Loader2 className="animate-spin" size={20} /> : <Wand2 size={20} />}
|
||||
{status === 'uploading' ? 'Procesando...' : 'Generar Análisis'}
|
||||
{status === 'uploading' ? t('upload.processingData') : t('dashboard.generateAnalysis')}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -134,10 +136,10 @@ const DataUploader: React.FC<DataUploaderProps> = ({ selectedTier, onAnalysisRea
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<div className="mb-6">
|
||||
<span className="text-blue-600 font-semibold mb-1 block">Paso 2</span>
|
||||
<h2 className="text-2xl font-bold text-slate-900">Sube tus Datos y Ejecuta el Análisis</h2>
|
||||
<span className="text-blue-600 font-semibold mb-1 block">{t('stepper.step2')}</span>
|
||||
<h2 className="text-2xl font-bold text-slate-900">{t('upload.title')}</h2>
|
||||
<p className="text-slate-600 mt-1">
|
||||
Usa una de las siguientes opciones para enviarnos tus datos para el análisis.
|
||||
{t('upload.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -158,33 +160,33 @@ const DataUploader: React.FC<DataUploaderProps> = ({ selectedTier, onAnalysisRea
|
||||
/>
|
||||
<label htmlFor="file-upload" className="cursor-pointer flex flex-col items-center justify-center">
|
||||
<UploadCloud className="w-12 h-12 text-slate-400 mb-2" />
|
||||
<span className="font-semibold text-blue-600">Haz clic para subir un fichero</span>
|
||||
<span className="text-slate-500"> o arrástralo aquí</span>
|
||||
<p className="text-xs text-slate-400 mt-2">CSV, XLSX, o XLS</p>
|
||||
<span className="font-semibold text-blue-600">{t('upload.clickToUpload')}</span>
|
||||
<span className="text-slate-500"> {t('upload.dragAndDrop')}</span>
|
||||
<p className="text-xs text-slate-400 mt-2">{t('upload.fileTypes')}</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center text-slate-500">
|
||||
<hr className="w-full border-slate-300" />
|
||||
<span className="px-4 font-medium text-sm">O</span>
|
||||
<span className="px-4 font-medium text-sm">{t('common.or')}</span>
|
||||
<hr className="w-full border-slate-300" />
|
||||
</div>
|
||||
|
||||
<div className="text-center p-4 bg-slate-50 rounded-lg">
|
||||
<p className="text-sm text-slate-600 mb-3">¿No tienes datos a mano? Genera un set de datos de ejemplo.</p>
|
||||
<p className="text-sm text-slate-600 mb-3">{t('upload.noDataPrompt')}</p>
|
||||
<button
|
||||
onClick={handleGenerateSyntheticData}
|
||||
disabled={isActionInProgress}
|
||||
className="flex items-center justify-center gap-2 w-full sm:w-auto mx-auto bg-fuchsia-100 text-fuchsia-700 px-6 py-3 rounded-lg hover:bg-fuchsia-200 hover:text-fuchsia-800 transition-colors shadow-sm hover:shadow-md disabled:opacity-75 disabled:cursor-not-allowed font-semibold"
|
||||
>
|
||||
{status === 'generating' ? <Loader2 className="animate-spin" size={20} /> : <Sparkles size={20} />}
|
||||
{status === 'generating' ? 'Generando...' : 'Generar Datos Sintéticos'}
|
||||
{status === 'generating' ? t('upload.generating') : t('upload.generateSyntheticData')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center text-slate-500">
|
||||
<hr className="w-full border-slate-300" />
|
||||
<span className="px-4 font-medium text-sm">O</span>
|
||||
<span className="px-4 font-medium text-sm">{t('common.or')}</span>
|
||||
<hr className="w-full border-slate-300" />
|
||||
</div>
|
||||
|
||||
@@ -192,7 +194,7 @@ const DataUploader: React.FC<DataUploaderProps> = ({ selectedTier, onAnalysisRea
|
||||
<Sheet className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
|
||||
<input
|
||||
type="url"
|
||||
placeholder="Pega la URL de tu Google Sheet aquí"
|
||||
placeholder={t('upload.googleSheetPlaceholder')}
|
||||
value={sheetUrl}
|
||||
onChange={(e) => {
|
||||
resetState();
|
||||
@@ -249,7 +251,7 @@ const DataUploader: React.FC<DataUploaderProps> = ({ selectedTier, onAnalysisRea
|
||||
{status === 'success' && (
|
||||
<div className="flex items-center justify-center gap-2 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
|
||||
<CheckCircle className="w-6 h-6 flex-shrink-0" />
|
||||
<span className="font-semibold">{successMessage} ¡Listo para analizar!</span>
|
||||
<span className="font-semibold">{successMessage} {t('upload.readyToAnalyze')}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
29
frontend/components/LanguageSelector.tsx
Normal file
29
frontend/components/LanguageSelector.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Languages } from 'lucide-react';
|
||||
|
||||
export function LanguageSelector() {
|
||||
const { i18n } = useTranslation();
|
||||
|
||||
const toggleLanguage = () => {
|
||||
const newLang = i18n.language === 'es' ? 'en' : 'es';
|
||||
i18n.changeLanguage(newLang);
|
||||
localStorage.setItem('language', newLang);
|
||||
};
|
||||
|
||||
const currentLang = i18n.language === 'es' ? 'ES' : 'EN';
|
||||
const nextLang = i18n.language === 'es' ? 'EN' : 'ES';
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 text-slate-700 rounded-full text-xs font-medium hover:bg-slate-200 transition-colors cursor-pointer"
|
||||
title={`Switch to ${nextLang}`}
|
||||
>
|
||||
<Languages className="w-3.5 h-3.5" />
|
||||
<span className="font-semibold">{currentLang}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default LanguageSelector;
|
||||
@@ -3,9 +3,11 @@ import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Lock, User } from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAuth } from '../utils/AuthContext';
|
||||
|
||||
const LoginPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { login } = useAuth();
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
@@ -14,14 +16,14 @@ const LoginPage: React.FC = () => {
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!username || !password) {
|
||||
toast.error('Introduce usuario y contraseña');
|
||||
toast.error(t('auth.credentialsRequired'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await login(username, password);
|
||||
toast.success('Sesión iniciada');
|
||||
await login(username, password);
|
||||
toast.success(t('auth.sessionStarted'));
|
||||
} catch (err) {
|
||||
console.error('Error en login', err);
|
||||
const msg =
|
||||
@@ -48,14 +50,14 @@ const LoginPage: React.FC = () => {
|
||||
Beyond Diagnostic
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500">
|
||||
Inicia sesión para acceder al análisis
|
||||
{t('auth.loginTitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-slate-700">
|
||||
Usuario
|
||||
{t('auth.username')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-400">
|
||||
@@ -73,7 +75,7 @@ const LoginPage: React.FC = () => {
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-slate-700">
|
||||
Contraseña
|
||||
{t('auth.password')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-400">
|
||||
@@ -94,11 +96,11 @@ const LoginPage: React.FC = () => {
|
||||
disabled={isSubmitting}
|
||||
className="w-full inline-flex items-center justify-center rounded-2xl bg-indigo-600 text-white text-sm font-medium py-2.5 shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? 'Entrando…' : 'Entrar'}
|
||||
{isSubmitting ? t('auth.enteringButton') : t('auth.enterButton')}
|
||||
</button>
|
||||
|
||||
<p className="text-[11px] text-slate-400 text-center mt-2">
|
||||
La sesión permanecerá activa durante 1 hora.
|
||||
{t('auth.sessionInfo')}
|
||||
</p>
|
||||
</form>
|
||||
</motion.div>
|
||||
|
||||
21
frontend/i18n.ts
Normal file
21
frontend/i18n.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import es from './locales/es.json';
|
||||
import en from './locales/en.json';
|
||||
|
||||
// Configuración de i18next
|
||||
i18n
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
resources: {
|
||||
es: { translation: es },
|
||||
en: { translation: en },
|
||||
},
|
||||
lng: localStorage.getItem('language') || 'es', // Español por defecto
|
||||
fallbackLng: 'es', // Si falla una traducción, usa español
|
||||
interpolation: {
|
||||
escapeValue: false, // React ya escapa por defecto
|
||||
},
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
@@ -1,6 +1,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import './i18n'; // Inicializar i18n
|
||||
import App from './App';
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
|
||||
207
frontend/locales/en.json
Normal file
207
frontend/locales/en.json
Normal file
@@ -0,0 +1,207 @@
|
||||
{
|
||||
"common": {
|
||||
"or": "OR",
|
||||
"loading": "Loading...",
|
||||
"error": "Error",
|
||||
"success": "Success",
|
||||
"cancel": "Cancel",
|
||||
"confirm": "Confirm",
|
||||
"close": "Close",
|
||||
"save": "Save",
|
||||
"delete": "Delete",
|
||||
"edit": "Edit",
|
||||
"view": "View",
|
||||
"back": "Back",
|
||||
"next": "Next",
|
||||
"previous": "Previous",
|
||||
"search": "Search",
|
||||
"filter": "Filter",
|
||||
"export": "Export",
|
||||
"import": "Import"
|
||||
},
|
||||
"auth": {
|
||||
"login": "Log in",
|
||||
"logout": "Log out",
|
||||
"loginTitle": "Log in to access the analysis",
|
||||
"username": "Username",
|
||||
"password": "Password",
|
||||
"enterButton": "Enter",
|
||||
"enteringButton": "Logging in…",
|
||||
"sessionInfo": "The session will remain active for 1 hour.",
|
||||
"sessionExpired": "Session expired or incorrect credentials. Please log in again.",
|
||||
"loginRequired": "You must log in to analyze data.",
|
||||
"credentialsRequired": "Enter username and password",
|
||||
"sessionStarted": "Session started"
|
||||
},
|
||||
"upload": {
|
||||
"title": "Upload Your Data and Run Analysis",
|
||||
"uploadFile": "Upload File",
|
||||
"clickToUpload": "Click to upload a file",
|
||||
"dragAndDrop": "or drag and drop here",
|
||||
"fileTypes": "CSV, XLSX, or XLS",
|
||||
"googleSheetPlaceholder": "Paste your Google Sheet URL here",
|
||||
"invalidFileType": "Invalid file type. Upload a CSV or Excel file.",
|
||||
"pleaseUploadFile": "Please upload a file or enter a Google Sheet URL.",
|
||||
"generateSyntheticData": "Generate Synthetic Data",
|
||||
"syntheticDataGenerated": "Synthetic Data Generated!",
|
||||
"dataReceived": "Data Received!",
|
||||
"noDataPrompt": "Don't have data on hand? Generate a sample dataset.",
|
||||
"processingData": "Processing...",
|
||||
"analyzingData": "Analyzing...",
|
||||
"generating": "Generating...",
|
||||
"readyToAnalyze": "Ready to analyze!",
|
||||
"dataProcessed": "Data Processed",
|
||||
"recordsAnalyzed": "Records analyzed",
|
||||
"monthsHistory": "Months of history",
|
||||
"sourceSystem": "Source system",
|
||||
"highConfidence": "Confidence: High",
|
||||
"mediumConfidence": "Confidence: Medium",
|
||||
"lowConfidence": "Confidence: Low",
|
||||
"subtitle": "Use one of the following options to send us your data for analysis."
|
||||
},
|
||||
"stepper": {
|
||||
"step1": "Step 1",
|
||||
"step2": "Step 2",
|
||||
"step3": "Step 3",
|
||||
"selectTier": "Select Tier",
|
||||
"uploadData": "Upload Data",
|
||||
"viewResults": "View Results"
|
||||
},
|
||||
"tiers": {
|
||||
"gold": {
|
||||
"name": "GOLD Analysis",
|
||||
"description": "5 complete dimensions with advanced Agentic Readiness",
|
||||
"features": [
|
||||
"5 dimensions: Volumetry, Efficiency, Effectiveness, Complexity, Agentic Readiness",
|
||||
"Generative AI: Personalized insights by OpenAI",
|
||||
"Transformation roadmap: AUTOMATE, ASSIST, AUGMENT phases",
|
||||
"Prioritization matrix with maturity levels",
|
||||
"Advanced benchmarking against industry",
|
||||
"Exportable PDF reports"
|
||||
]
|
||||
},
|
||||
"silver": {
|
||||
"name": "SILVER Analysis",
|
||||
"description": "4 core dimensions with operational metrics",
|
||||
"features": [
|
||||
"4 dimensions: Volumetry, Efficiency, Effectiveness, Economy",
|
||||
"Analysis without generative AI",
|
||||
"Simplified roadmap",
|
||||
"Basic benchmark",
|
||||
"Opportunity matrix"
|
||||
]
|
||||
},
|
||||
"express": {
|
||||
"name": "EXPRESS Analysis",
|
||||
"description": "Quick diagnosis of volumetry and efficiency",
|
||||
"features": [
|
||||
"2 dimensions: Volumetry, Efficiency",
|
||||
"Instant analysis",
|
||||
"No AI or roadmap",
|
||||
"Ideal for quick tests"
|
||||
]
|
||||
}
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Diagnostic Dashboard",
|
||||
"viewDashboard": "View Diagnostic Dashboard",
|
||||
"generateAnalysis": "Generate Analysis",
|
||||
"analyzing": "Analyzing...",
|
||||
"analysisComplete": "Analysis completed!",
|
||||
"dataLoadedFromCache": "Data loaded from cache!",
|
||||
"reloadPage": "Reload Page"
|
||||
},
|
||||
"tabs": {
|
||||
"executive": "Summary",
|
||||
"dimensions": "Dimensions",
|
||||
"agenticReadiness": "Agentic Readiness",
|
||||
"roadmap": "Roadmap",
|
||||
"law10": "Law 10/2025"
|
||||
},
|
||||
"dimensions": {
|
||||
"volumetry": "Volumetry & Distribution",
|
||||
"operationalPerformance": "Operational Efficiency",
|
||||
"effectiveness": "Effectiveness & Resolution",
|
||||
"complexity": "Complexity & Predictability",
|
||||
"economy": "Economy & Costs",
|
||||
"agenticReadiness": "Agentic Readiness"
|
||||
},
|
||||
"healthStatus": {
|
||||
"excellent": "EXCELLENT",
|
||||
"excellentDesc": "Top quartile, role model",
|
||||
"good": "GOOD",
|
||||
"goodDesc": "Above benchmarks, solid performance",
|
||||
"medium": "MEDIUM",
|
||||
"mediumDesc": "Within expected range",
|
||||
"low": "LOW",
|
||||
"lowDesc": "Needs improvement, below benchmarks",
|
||||
"critical": "CRITICAL",
|
||||
"criticalDesc": "Requires immediate intervention"
|
||||
},
|
||||
"benchmark": {
|
||||
"title": "Industry Benchmark (P50)",
|
||||
"aboveBenchmark": "Above benchmarks, solid performance",
|
||||
"belowBenchmark": "Needs improvement, below benchmarks",
|
||||
"withinRange": "Within expected range"
|
||||
},
|
||||
"roadmap": {
|
||||
"wave1": "Wave 1: AUTOMATE",
|
||||
"wave2": "Wave 2: ASSIST",
|
||||
"wave3": "Wave 3: AUGMENT",
|
||||
"quickWins": "Quick Wins (0-6 months)",
|
||||
"buildCapability": "Build Capability (6-12 months)",
|
||||
"transform": "Transform (12-18 months)",
|
||||
"automate": "Automate",
|
||||
"duration3to6": "3-6 months",
|
||||
"duration6to12": "6-12 months",
|
||||
"duration12to18": "12-18 months"
|
||||
},
|
||||
"opportunities": {
|
||||
"viewCriticalActions": "View Critical Actions",
|
||||
"exploreImprovements": "Explore Improvements",
|
||||
"inGoodState": "In good state",
|
||||
"prioritize": "Prioritize",
|
||||
"optimize": "Optimize",
|
||||
"maintain": "Maintain"
|
||||
},
|
||||
"agenticReadiness": {
|
||||
"score": "Agentic Readiness Score",
|
||||
"confidence": "Confidence",
|
||||
"readyForCopilot": "Ready for Copilot",
|
||||
"readyForCopilotDesc": "Processes with sufficient predictability and simplicity for AI assistance (real-time suggestions, autocomplete).",
|
||||
"optimizeFirst": "Optimize first",
|
||||
"optimizeFirstDesc": "Standardize processes and reduce variability before implementing AI assistance.",
|
||||
"requiresHumanManagement": "Requires human management",
|
||||
"requiresHumanManagementDesc": "Complex or variable processes that need human intervention before considering automation."
|
||||
},
|
||||
"economicModel": {
|
||||
"title": "Economic Model",
|
||||
"costPerInteraction": "Cost per interaction (CPI) by channel",
|
||||
"totalCost": "Total Cost",
|
||||
"avgCost": "Average Cost",
|
||||
"costBreakdown": "Cost Breakdown",
|
||||
"enterCostPerHour": "Please enter the cost per hour for the agent.",
|
||||
"noCostConfig": "No cost configuration"
|
||||
},
|
||||
"charts": {
|
||||
"volumeByDayAndHour": "Volume by day of week and hour",
|
||||
"ahtDistributionBySkill": "AHT distribution by skill",
|
||||
"resolutionFunnelBySkill": "Resolution funnel (P50) by skill",
|
||||
"csatDistribution": "CSAT distribution"
|
||||
},
|
||||
"errors": {
|
||||
"renderError": "Rendering Error",
|
||||
"componentError": "This component encountered an error and could not render correctly.",
|
||||
"viewTechnicalDetails": "View technical details",
|
||||
"errorInComponent": "Error in {{componentName}}",
|
||||
"somethingWentWrong": "Something went wrong",
|
||||
"tryAgain": "Try again"
|
||||
},
|
||||
"methodology": {
|
||||
"title": "Methodology",
|
||||
"description": "Learn how we calculate metrics",
|
||||
"close": "Close",
|
||||
"appliedBadge": "Data Transformation Methodology Applied",
|
||||
"appliedBadgeShort": "Methodology"
|
||||
}
|
||||
}
|
||||
207
frontend/locales/es.json
Normal file
207
frontend/locales/es.json
Normal file
@@ -0,0 +1,207 @@
|
||||
{
|
||||
"common": {
|
||||
"or": "O",
|
||||
"loading": "Cargando...",
|
||||
"error": "Error",
|
||||
"success": "Éxito",
|
||||
"cancel": "Cancelar",
|
||||
"confirm": "Confirmar",
|
||||
"close": "Cerrar",
|
||||
"save": "Guardar",
|
||||
"delete": "Eliminar",
|
||||
"edit": "Editar",
|
||||
"view": "Ver",
|
||||
"back": "Volver",
|
||||
"next": "Siguiente",
|
||||
"previous": "Anterior",
|
||||
"search": "Buscar",
|
||||
"filter": "Filtrar",
|
||||
"export": "Exportar",
|
||||
"import": "Importar"
|
||||
},
|
||||
"auth": {
|
||||
"login": "Iniciar sesión",
|
||||
"logout": "Cerrar sesión",
|
||||
"loginTitle": "Inicia sesión para acceder al análisis",
|
||||
"username": "Usuario",
|
||||
"password": "Contraseña",
|
||||
"enterButton": "Entrar",
|
||||
"enteringButton": "Entrando…",
|
||||
"sessionInfo": "La sesión permanecerá activa durante 1 hora.",
|
||||
"sessionExpired": "Sesión caducada o credenciales incorrectas. Vuelve a iniciar sesión.",
|
||||
"loginRequired": "Debes iniciar sesión para analizar datos.",
|
||||
"credentialsRequired": "Introduce usuario y contraseña",
|
||||
"sessionStarted": "Sesión iniciada"
|
||||
},
|
||||
"upload": {
|
||||
"title": "Sube tus Datos y Ejecuta el Análisis",
|
||||
"uploadFile": "Subir Archivo",
|
||||
"clickToUpload": "Haz clic para subir un fichero",
|
||||
"dragAndDrop": "o arrastra y suelta aquí",
|
||||
"fileTypes": "CSV, XLSX, o XLS",
|
||||
"googleSheetPlaceholder": "Pega la URL de tu Google Sheet aquí",
|
||||
"invalidFileType": "Tipo de archivo no válido. Sube un CSV o Excel.",
|
||||
"pleaseUploadFile": "Por favor, sube un archivo o introduce una URL de Google Sheet.",
|
||||
"generateSyntheticData": "Generar Datos Sintéticos",
|
||||
"syntheticDataGenerated": "Datos Sintéticos Generados!",
|
||||
"dataReceived": "Datos Recibidos!",
|
||||
"noDataPrompt": "¿No tienes datos a mano? Genera un set de datos de ejemplo.",
|
||||
"processingData": "Procesando...",
|
||||
"analyzingData": "Analizando...",
|
||||
"generating": "Generando...",
|
||||
"readyToAnalyze": "¡Listo para analizar!",
|
||||
"dataProcessed": "Datos Procesados",
|
||||
"recordsAnalyzed": "Registros analizados",
|
||||
"monthsHistory": "Meses de histórico",
|
||||
"sourceSystem": "Sistema origen",
|
||||
"highConfidence": "Confianza: Alta",
|
||||
"mediumConfidence": "Confianza: Media",
|
||||
"lowConfidence": "Confianza: Baja",
|
||||
"subtitle": "Usa una de las siguientes opciones para enviarnos tus datos para el análisis."
|
||||
},
|
||||
"stepper": {
|
||||
"step1": "Paso 1",
|
||||
"step2": "Paso 2",
|
||||
"step3": "Paso 3",
|
||||
"selectTier": "Seleccionar Tier",
|
||||
"uploadData": "Subir Datos",
|
||||
"viewResults": "Ver Resultados"
|
||||
},
|
||||
"tiers": {
|
||||
"gold": {
|
||||
"name": "Análisis GOLD",
|
||||
"description": "5 dimensiones completas con Agentic Readiness avanzado",
|
||||
"features": [
|
||||
"5 dimensiones: Volumetría, Eficiencia, Efectividad, Complejidad, Agentic Readiness",
|
||||
"IA Generativa: Insights personalizados por OpenAI",
|
||||
"Roadmap de transformación: Fases AUTOMATE, ASSIST, AUGMENT",
|
||||
"Matriz de priorización con niveles de madurez",
|
||||
"Benchmarking avanzado contra industria",
|
||||
"Informes exportables en PDF"
|
||||
]
|
||||
},
|
||||
"silver": {
|
||||
"name": "Análisis SILVER",
|
||||
"description": "4 dimensiones core con métricas operativas",
|
||||
"features": [
|
||||
"4 dimensiones: Volumetría, Eficiencia, Efectividad, Economía",
|
||||
"Análisis sin IA generativa",
|
||||
"Roadmap simplificado",
|
||||
"Benchmark básico",
|
||||
"Matriz de oportunidades"
|
||||
]
|
||||
},
|
||||
"express": {
|
||||
"name": "Análisis EXPRESS",
|
||||
"description": "Diagnóstico rápido de volumetría y eficiencia",
|
||||
"features": [
|
||||
"2 dimensiones: Volumetría, Eficiencia",
|
||||
"Análisis instantáneo",
|
||||
"Sin IA ni roadmap",
|
||||
"Ideal para pruebas rápidas"
|
||||
]
|
||||
}
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Dashboard de Diagnóstico",
|
||||
"viewDashboard": "Ver Dashboard de Diagnóstico",
|
||||
"generateAnalysis": "Generar Análisis",
|
||||
"analyzing": "Analizando...",
|
||||
"analysisComplete": "¡Análisis completado!",
|
||||
"dataLoadedFromCache": "¡Datos cargados desde caché!",
|
||||
"reloadPage": "Recargar Página"
|
||||
},
|
||||
"tabs": {
|
||||
"executive": "Resumen",
|
||||
"dimensions": "Dimensiones",
|
||||
"agenticReadiness": "Agentic Readiness",
|
||||
"roadmap": "Roadmap",
|
||||
"law10": "Ley 10/2025"
|
||||
},
|
||||
"dimensions": {
|
||||
"volumetry": "Volumetría & Distribución",
|
||||
"operationalPerformance": "Eficiencia Operativa",
|
||||
"effectiveness": "Efectividad & Resolución",
|
||||
"complexity": "Complejidad & Predictibilidad",
|
||||
"economy": "Economía & Costes",
|
||||
"agenticReadiness": "Agentic Readiness"
|
||||
},
|
||||
"healthStatus": {
|
||||
"excellent": "EXCELENTE",
|
||||
"excellentDesc": "Top quartile, modelo a seguir",
|
||||
"good": "BUENO",
|
||||
"goodDesc": "Por encima de benchmarks, desempeño sólido",
|
||||
"medium": "MEDIO",
|
||||
"mediumDesc": "Dentro de rango esperado",
|
||||
"low": "BAJO",
|
||||
"lowDesc": "Requiere mejora, por debajo de benchmarks",
|
||||
"critical": "CRÍTICO",
|
||||
"criticalDesc": "Necesita intervención inmediata"
|
||||
},
|
||||
"benchmark": {
|
||||
"title": "Benchmark Industria (P50)",
|
||||
"aboveBenchmark": "Por encima de benchmarks, desempeño sólido",
|
||||
"belowBenchmark": "Requiere mejora, por debajo de benchmarks",
|
||||
"withinRange": "Dentro de rango esperado"
|
||||
},
|
||||
"roadmap": {
|
||||
"wave1": "Wave 1: AUTOMATE",
|
||||
"wave2": "Wave 2: ASSIST",
|
||||
"wave3": "Wave 3: AUGMENT",
|
||||
"quickWins": "Quick Wins (0-6 meses)",
|
||||
"buildCapability": "Build Capability (6-12 meses)",
|
||||
"transform": "Transform (12-18 meses)",
|
||||
"automate": "Automatizar",
|
||||
"duration3to6": "3-6 meses",
|
||||
"duration6to12": "6-12 meses",
|
||||
"duration12to18": "12-18 meses"
|
||||
},
|
||||
"opportunities": {
|
||||
"viewCriticalActions": "Ver Acciones Críticas",
|
||||
"explorImprovements": "Explorar Mejoras",
|
||||
"inGoodState": "En buen estado",
|
||||
"prioritize": "Priorizar",
|
||||
"optimize": "Optimizar",
|
||||
"maintain": "Mantener"
|
||||
},
|
||||
"agenticReadiness": {
|
||||
"score": "Agentic Readiness Score",
|
||||
"confidence": "Confianza",
|
||||
"readyForCopilot": "Listo para Copilot",
|
||||
"readyForCopilotDesc": "Procesos con predictibilidad y simplicidad suficientes para asistencia IA (sugerencias en tiempo real, autocompletado).",
|
||||
"optimizeFirst": "Optimizar primero",
|
||||
"optimizeFirstDesc": "Estandarizar procesos y reducir variabilidad antes de implementar asistencia IA.",
|
||||
"requiresHumanManagement": "Requiere gestión humana",
|
||||
"requiresHumanManagementDesc": "Procesos complejos o variables que necesitan intervención humana antes de considerar automatización."
|
||||
},
|
||||
"economicModel": {
|
||||
"title": "Modelo Económico",
|
||||
"costPerInteraction": "Coste por interacción (CPI) por canal",
|
||||
"totalCost": "Coste Total",
|
||||
"avgCost": "Coste Promedio",
|
||||
"costBreakdown": "Desglose de Costes",
|
||||
"enterCostPerHour": "Por favor, introduce el coste por hora del agente.",
|
||||
"noCostConfig": "Sin configuración de costes"
|
||||
},
|
||||
"charts": {
|
||||
"volumeByDayAndHour": "Volumen por día de la semana y hora",
|
||||
"ahtDistributionBySkill": "Distribución de AHT por skill",
|
||||
"resolutionFunnelBySkill": "Funnel de resolución (P50) por skill",
|
||||
"csatDistribution": "Distribución de CSAT"
|
||||
},
|
||||
"errors": {
|
||||
"renderError": "Error de Renderizado",
|
||||
"componentError": "Este componente encontró un error y no pudo renderizarse correctamente.",
|
||||
"viewTechnicalDetails": "Ver detalles técnicos",
|
||||
"errorInComponent": "Error en {{componentName}}",
|
||||
"somethingWentWrong": "Algo salió mal",
|
||||
"tryAgain": "Intentar de nuevo"
|
||||
},
|
||||
"methodology": {
|
||||
"title": "Metodología",
|
||||
"description": "Conoce cómo calculamos las métricas",
|
||||
"close": "Cerrar",
|
||||
"appliedBadge": "Metodología de Transformación de Datos aplicada",
|
||||
"appliedBadgeShort": "Metodología"
|
||||
}
|
||||
}
|
||||
89
frontend/package-lock.json
generated
89
frontend/package-lock.json
generated
@@ -12,11 +12,13 @@
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.23.24",
|
||||
"i18next": "^25.8.4",
|
||||
"lucide-react": "^0.554.0",
|
||||
"react": "^19.2.0",
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-i18next": "^16.5.4",
|
||||
"recharts": "^3.4.1",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
@@ -261,6 +263,15 @@
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.28.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
|
||||
"integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/template": {
|
||||
"version": "7.27.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
|
||||
@@ -2300,6 +2311,46 @@
|
||||
"csstype": "^3.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/html-parse-stringify": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
|
||||
"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"void-elements": "3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/i18next": {
|
||||
"version": "25.8.4",
|
||||
"resolved": "https://registry.npmjs.org/i18next/-/i18next-25.8.4.tgz",
|
||||
"integrity": "sha512-a9A0MnUjKvzjEN/26ZY1okpra9kA8MEwzYEz1BNm+IyxUKPRH6ihf0p7vj8YvULwZHKHl3zkJ6KOt4hewxBecQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://locize.com"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://locize.com/i18next.html"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "^5"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/immer": {
|
||||
"version": "10.2.0",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
|
||||
@@ -2518,6 +2569,33 @@
|
||||
"react-dom": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/react-i18next": {
|
||||
"version": "16.5.4",
|
||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.5.4.tgz",
|
||||
"integrity": "sha512-6yj+dcfMncEC21QPhOTsW8mOSO+pzFmT6uvU7XXdvM/Cp38zJkmTeMeKmTrmCMD5ToT79FmiE/mRWiYWcJYW4g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"html-parse-stringify": "^3.0.1",
|
||||
"use-sync-external-store": "^1.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"i18next": ">= 25.6.2",
|
||||
"react": ">= 16.8.0",
|
||||
"typescript": "^5"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "19.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
|
||||
@@ -2791,7 +2869,7 @@
|
||||
"version": "5.8.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
|
||||
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
@@ -2988,6 +3066,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/void-elements": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
|
||||
"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/wmf": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
|
||||
|
||||
@@ -13,11 +13,13 @@
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.23.24",
|
||||
"i18next": "^25.8.4",
|
||||
"lucide-react": "^0.554.0",
|
||||
"react": "^19.2.0",
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-i18next": "^16.5.4",
|
||||
"recharts": "^3.4.1",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// utils/AuthContext.tsx
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
import i18n from '../i18n';
|
||||
|
||||
const API_BASE_URL =
|
||||
import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000';
|
||||
@@ -61,6 +62,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: basic,
|
||||
'Accept-Language': i18n.language || 'es',
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// utils/apiClient.ts
|
||||
import type { TierKey } from '../types';
|
||||
import i18n from '../i18n';
|
||||
|
||||
type SegmentMapping = {
|
||||
high_value_queues: string[];
|
||||
@@ -85,6 +86,7 @@ export async function callAnalysisApiRaw(params: {
|
||||
body: formData,
|
||||
headers: {
|
||||
...authHeaders,
|
||||
'Accept-Language': i18n.language || 'es',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user