christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 11:45:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: translate dashboard labels to English and restore CrazeLogo

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
App.tsx
+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"> <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="max-w-7xl mx-auto flex justify-between items-center">
<div className="flex items-center gap-3 md:gap-6"> <div className="flex items-center gap-3 md:gap-6">
{/* Logo Container - CraftAlley branding */} {/* Logo Container - Smaller on mobile */}
<div className="flex items-center gap-2 relative flex-shrink-0 cursor-pointer" onClick={() => setView('dashboard')}> <div className="h-10 w-32 md:h-12 md:w-48 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)]"> <CrazeLogo />
<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>
</div> </div>
{/* View Switcher */} {/* View Switcher */}
@@ -771,18 +766,18 @@ const App: React.FC = () => {
onClick={() => setShowFilters(prev => !prev)} 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" 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> </button>
{/* Export Action */} {/* Export Action */}
<button <button
onClick={() => { onClick={() => {
// simple mockup export alert // 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)]" 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> </button>
</div> </div>
</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"> <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> <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"> <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 // dynamic or default week number
return '25'; return '25';
})()} · {rawData.length.toLocaleString('de-DE')} registros })()} · {rawData.length.toLocaleString('en-US')} records
</p> </p>
</div> </div>
components/Dashboard.tsx
+11 -11
View File
@@ -534,7 +534,7 @@ const Dashboard: React.FC<DashboardProps> = ({
currentVal: formatVal(currentVal), currentVal: formatVal(currentVal),
prevVal: formatVal(prevVal), prevVal: formatVal(prevVal),
priorVal: formatVal(priorVal), priorVal: formatVal(priorVal),
diffLabel: `${formatDiff(currentVal, prevVal)} vs año anterior`, diffLabel: `${formatDiff(currentVal, prevVal)} vs prior year`,
mainGrowthPercent, mainGrowthPercent,
prevGrowthPercent prevGrowthPercent
}; };
@@ -618,7 +618,7 @@ const Dashboard: React.FC<DashboardProps> = ({
{/* Período Actual */} {/* Período Actual */}
<div className="pb-4 lg:pb-0 lg:pr-6"> <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"> <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>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-4 gap-2">
<div> <div>
@@ -655,7 +655,7 @@ const Dashboard: React.FC<DashboardProps> = ({
{/* Período Anterior */} {/* Período Anterior */}
<div className="pt-4 lg:pt-0 lg:pl-6"> <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"> <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> </div>
{prevKpi ? ( {prevKpi ? (
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-4 gap-2">
@@ -689,7 +689,7 @@ const Dashboard: React.FC<DashboardProps> = ({
</div> </div>
</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>
</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="border-t border-slate-800/80 pt-4 mt-2">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <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-lg font-bold text-slate-200 block">{sellOutStats.prevVal}</span>
<span className="text-xs text-emerald-400 font-bold">{sellOutStats.prevGrowthPercent}</span> <span className="text-xs text-emerald-400 font-bold">{sellOutStats.prevGrowthPercent}</span>
</div> </div>
<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-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> </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="border-t border-slate-800/80 pt-4 mt-2">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <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-lg font-bold text-slate-200 block">{unitsStats.prevVal}</span>
<span className="text-xs text-emerald-400 font-bold">{unitsStats.prevGrowthPercent}</span> <span className="text-xs text-emerald-400 font-bold">{unitsStats.prevGrowthPercent}</span>
</div> </div>
<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-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> </div>
</div> </div>
@@ -817,7 +817,7 @@ const Dashboard: React.FC<DashboardProps> = ({
</ExpandableCard> </ExpandableCard>
{/* Monthly Seasonality Chart */} {/* 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 flex-col h-full">
<div className="flex justify-end mb-2"> <div className="flex justify-end mb-2">
<div className="bg-slate-900 p-1 rounded-lg border border-slate-800 flex text-xs"> <div className="bg-slate-900 p-1 rounded-lg border border-slate-800 flex text-xs">