From b2c0e23136205cf81871208ac2ca87f8c50fb658 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 17 Jun 2026 11:41:14 +0200
Subject: [PATCH] chore: translate dashboard labels to English and restore
 CrazeLogo

---
 App.tsx                  | 21 ++++++++-------------
 components/Dashboard.tsx | 22 +++++++++++-----------
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/App.tsx b/App.tsx
index 51969ad..f52acab 100644
--- a/App.tsx
+++ b/App.tsx
@@ -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>
 
diff --git a/components/Dashboard.tsx b/components/Dashboard.tsx
index 89cf8f7..6873f52 100644
--- a/components/Dashboard.tsx
+++ b/components/Dashboard.tsx
@@ -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">