chore: translate dashboard labels to English and restore CrazeLogo

This commit is contained in:
Christian Vidal Wolf
2026-06-17 11:41:14 +02:00
parent 3cb986bd90
commit b2c0e23136
2 changed files with 19 additions and 24 deletions
+8 -13
View File
@@ -700,14 +700,9 @@ const App: React.FC = () => {
<header className="bg-slate-950/90 backdrop-blur border-b border-border py-2 px-3 md:py-3 md:px-6 relative z-40 shadow-2xl">
<div className="max-w-7xl mx-auto flex justify-between items-center">
<div className="flex items-center gap-3 md:gap-6">
{/* Logo Container - CraftAlley branding */}
<div className="flex items-center gap-2 relative flex-shrink-0 cursor-pointer" onClick={() => setView('dashboard')}>
<div className="bg-cyan-500 rounded-lg p-1.5 flex items-center justify-center w-8 h-8 shadow-[0_0_8px_rgba(6,182,212,0.4)]">
<svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9s2.015-9 4.5-9y" />
</svg>
</div>
<span className="font-extrabold text-slate-100 text-base tracking-tight select-none">CraftAlley</span>
{/* Logo Container - Smaller on mobile */}
<div className="h-10 w-32 md:h-12 md:w-48 relative flex-shrink-0 cursor-pointer" onClick={() => setView('dashboard')}>
<CrazeLogo />
</div>
{/* View Switcher */}
@@ -771,18 +766,18 @@ const App: React.FC = () => {
onClick={() => setShowFilters(prev => !prev)}
className="flex items-center gap-1 px-2.5 py-1 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded text-xs font-semibold text-slate-300 transition-all active:scale-95"
>
<span>{showFilters ? 'Ocultar' : '+ Filtrar'}</span>
<span>{showFilters ? 'Hide Filters' : '+ Filter'}</span>
</button>
{/* Export Action */}
<button
onClick={() => {
// simple mockup export alert
alert("Exportando datos filtrados...");
alert("Exporting filtered data...");
}}
className="px-3.5 py-1 bg-cyan-600 hover:bg-cyan-500 rounded text-xs font-bold text-white transition-all active:scale-95 shadow-[0_0_8px_rgba(6,182,212,0.2)]"
>
Exportar
Export
</button>
</div>
</div>
@@ -803,10 +798,10 @@ const App: React.FC = () => {
<div className="max-w-7xl mx-auto px-3 md:px-6 pt-6 pb-2">
<h2 className="text-2xl font-extrabold text-white tracking-tight uppercase">Analytics Dashboard</h2>
<p className="text-[11px] text-slate-500 font-medium mt-1">
Actualizado {lastUpdated ? new Date(lastUpdated).toLocaleDateString('es-ES', { day: 'numeric', month: 'short', year: 'numeric' }) : '17 jun 2026'} · Semana {(() => {
Updated {lastUpdated ? new Date(lastUpdated).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' }) : 'Jun 17, 2026'} · Week {(() => {
// dynamic or default week number
return '25';
})()} · {rawData.length.toLocaleString('de-DE')} registros
})()} · {rawData.length.toLocaleString('en-US')} records
</p>
</div>
+11 -11
View File
@@ -534,7 +534,7 @@ const Dashboard: React.FC<DashboardProps> = ({
currentVal: formatVal(currentVal),
prevVal: formatVal(prevVal),
priorVal: formatVal(priorVal),
diffLabel: `${formatDiff(currentVal, prevVal)} vs año anterior`,
diffLabel: `${formatDiff(currentVal, prevVal)} vs prior year`,
mainGrowthPercent,
prevGrowthPercent
};
@@ -618,7 +618,7 @@ const Dashboard: React.FC<DashboardProps> = ({
{/* Período Actual */}
<div className="pb-4 lg:pb-0 lg:pr-6">
<div className="bg-slate-800/40 px-3 py-1.5 rounded text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
Período Actual ({currentYear})
Current Period ({currentYear})
</div>
<div className="grid grid-cols-4 gap-2">
<div>
@@ -655,7 +655,7 @@ const Dashboard: React.FC<DashboardProps> = ({
{/* Período Anterior */}
<div className="pt-4 lg:pt-0 lg:pl-6">
<div className="bg-slate-800/40 px-3 py-1.5 rounded text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
Período Anterior ({prevYear || 'N/A'})
Previous Period ({prevYear || 'N/A'})
</div>
{prevKpi ? (
<div className="grid grid-cols-4 gap-2">
@@ -689,7 +689,7 @@ const Dashboard: React.FC<DashboardProps> = ({
</div>
</div>
) : (
<div className="text-sm text-slate-500 italic py-2">No hay datos históricos disponibles</div>
<div className="text-sm text-slate-500 italic py-2">No historical data available</div>
)}
</div>
</div>
@@ -718,14 +718,14 @@ const Dashboard: React.FC<DashboardProps> = ({
<div className="border-t border-slate-800/80 pt-4 mt-2">
<div className="grid grid-cols-2 gap-4">
<div>
<span className="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">Año Anterior ({sellOutStats.prevYear})</span>
<span className="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">Previous Year ({sellOutStats.prevYear})</span>
<span className="text-lg font-bold text-slate-200 block">{sellOutStats.prevVal}</span>
<span className="text-xs text-emerald-400 font-bold">{sellOutStats.prevGrowthPercent}</span>
</div>
<div>
<span className="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">Hace 2 Años ({sellOutStats.twoYearsPrior || 'N/A'})</span>
<span className="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">2 Years Prior ({sellOutStats.twoYearsPrior || 'N/A'})</span>
<span className="text-lg font-bold text-slate-200 block">{sellOutStats.priorVal}</span>
<span className="text-xs text-slate-500 font-medium">referencia</span>
<span className="text-xs text-slate-500 font-medium">reference</span>
</div>
</div>
</div>
@@ -750,14 +750,14 @@ const Dashboard: React.FC<DashboardProps> = ({
<div className="border-t border-slate-800/80 pt-4 mt-2">
<div className="grid grid-cols-2 gap-4">
<div>
<span className="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">Año Anterior ({unitsStats.prevYear})</span>
<span className="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">Previous Year ({unitsStats.prevYear})</span>
<span className="text-lg font-bold text-slate-200 block">{unitsStats.prevVal}</span>
<span className="text-xs text-emerald-400 font-bold">{unitsStats.prevGrowthPercent}</span>
</div>
<div>
<span className="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">Hace 2 Años ({unitsStats.twoYearsPrior || 'N/A'})</span>
<span className="text-[10px] text-slate-500 uppercase tracking-wider block mb-1">2 Years Prior ({unitsStats.twoYearsPrior || 'N/A'})</span>
<span className="text-lg font-bold text-slate-200 block">{unitsStats.priorVal}</span>
<span className="text-xs text-slate-500 font-medium">referencia</span>
<span className="text-xs text-slate-500 font-medium">reference</span>
</div>
</div>
</div>
@@ -817,7 +817,7 @@ const Dashboard: React.FC<DashboardProps> = ({
</ExpandableCard>
{/* Monthly Seasonality Chart */}
<ExpandableCard title="Estacionalidad Mensual - Ventas" className="h-96">
<ExpandableCard title="Monthly Seasonality - Sales" className="h-96">
<div className="flex flex-col h-full">
<div className="flex justify-end mb-2">
<div className="bg-slate-900 p-1 rounded-lg border border-slate-800 flex text-xs">