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

style: condense advertising performance panel in dashboard

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-21 12:53:21 +01:00
parent 0138b787b2
commit cc6fd25065
1 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Dashboard.tsx
+31 -30
View File
@@ -508,21 +508,21 @@ const Dashboard: React.FC<DashboardProps> = ({ data, contextData, adsData = [] }
return ( return (
<div className="p-6 space-y-6 max-w-7xl mx-auto animate-fade-in pb-24"> <div className="p-6 space-y-6 max-w-7xl mx-auto animate-fade-in pb-24">
{/* Ads Performance Section - Supports Multiple Years and Growth */} {/* Ads Performance Section - Condensed Layout */}
{adsKPIsByYear && availableAdsYears.length > 0 && ( {adsKPIsByYear && availableAdsYears.length > 0 && (
<div className="bg-gradient-to-br from-fuchsia-950/20 to-indigo-950/30 border border-fuchsia-500/30 rounded-2xl p-6 animate-fade-in shadow-xl"> <div className="bg-gradient-to-br from-fuchsia-950/20 to-indigo-950/30 border border-fuchsia-500/30 rounded-2xl p-4 animate-fade-in shadow-xl">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-2 mb-4">
<div className="relative"> <div className="relative">
<span className="absolute inset-0 bg-fuchsia-400 rounded-full animate-ping opacity-20"></span> <span className="absolute inset-0 bg-fuchsia-400 rounded-full animate-ping opacity-20"></span>
<span className="relative block w-2.5 h-2.5 rounded-full bg-fuchsia-400 shadow-[0_0_8px_rgba(232,121,249,0.8)]"></span> <span className="relative block w-2 h-2 rounded-full bg-fuchsia-400 shadow-[0_0_8px_rgba(232,121,249,0.8)]"></span>
</div> </div>
<h3 className="text-sm font-black text-fuchsia-400 uppercase tracking-[0.2em]">Advertising Performance Breakdown</h3> <h3 className="text-xs font-black text-fuchsia-400 uppercase tracking-widest">Advertising Performance</h3>
<div className="ml-auto px-3 py-1 bg-slate-900/50 rounded-full border border-fuchsia-500/20 text-[10px] text-fuchsia-300 font-bold"> <div className="ml-auto px-2 py-0.5 bg-slate-900/50 rounded-full border border-fuchsia-500/10 text-[9px] text-fuchsia-300/70 font-bold uppercase">
{adsData.length.toLocaleString('de-DE')} AD RECORDS LOADED {adsData.length.toLocaleString('de-DE')} Records
</div> </div>
</div> </div>
<div className="space-y-6"> <div className={`grid gap-4 ${availableAdsYears.length > 1 ? 'grid-cols-1 lg:grid-cols-2' : 'grid-cols-1'}`}>
{availableAdsYears.map((year, idx) => { {availableAdsYears.map((year, idx) => {
const kpi = adsKPIsByYear[year]; const kpi = adsKPIsByYear[year];
const prevYear = availableAdsYears[idx + 1]; const prevYear = availableAdsYears[idx + 1];
@@ -537,54 +537,55 @@ const Dashboard: React.FC<DashboardProps> = ({ data, contextData, adsData = [] }
: (isPositive ? 'text-emerald-400' : 'text-red-400'); : (isPositive ? 'text-emerald-400' : 'text-red-400');
return ( return (
<span className={`text-[10px] font-black ml-1.5 ${colorClass}`}> <span className={`text-[9px] font-black ml-1 ${colorClass} whitespace-nowrap`}>
{isPositive ? '▲' : '▼'}{Math.abs(pct).toFixed(1)}% {isPositive ? '▲' : '▼'}{Math.abs(pct).toFixed(0)}%
</span> </span>
); );
}; };
return ( return (
<div key={year} className="relative"> <div key={year} className="relative bg-slate-950/40 rounded-xl p-3 border border-white/5">
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-2 mb-2">
<span className="text-xs font-black text-slate-500 font-mono tracking-widest">{year}</span> <span className="text-[10px] font-black text-slate-400 font-mono bg-slate-900 px-1.5 py-0.5 rounded">{year}</span>
<div className="h-[1px] flex-1 bg-gradient-to-r from-slate-800 to-transparent"></div> <div className="h-[1px] flex-1 bg-gradient-to-r from-slate-800 to-transparent"></div>
</div> </div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{/* Ad Spend */} {/* Ad Spend */}
<div className="bg-slate-900/40 rounded-xl p-4 border border-white/5 transition-all hover:border-fuchsia-500/20"> <div className="group">
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Ad Spend</span> <span className="text-[9px] font-bold text-slate-500 uppercase tracking-tighter block mb-0.5">Spend</span>
<div className="flex items-baseline"> <div className="flex items-baseline overflow-hidden">
<span className="text-xl font-black text-fuchsia-400"> <span className="text-sm font-black text-fuchsia-400 truncate">
€{kpi.totalSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })} €{kpi.totalSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
</span> </span>
{renderGrowth(kpi.totalSpend, prevKpi?.totalSpend)} {renderGrowth(kpi.totalSpend, prevKpi?.totalSpend)}
</div> </div>
</div> </div>
{/* Attributed Sales */} {/* Attributed Sales */}
<div className="bg-slate-900/40 rounded-xl p-4 border border-white/5 transition-all hover:border-emerald-500/20"> <div className="group">
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">Attr. Sales</span> <span className="text-[9px] font-bold text-slate-500 uppercase tracking-tighter block mb-0.5">Sales</span>
<div className="flex items-baseline"> <div className="flex items-baseline overflow-hidden">
<span className="text-xl font-black text-emerald-400"> <span className="text-sm font-black text-emerald-400 truncate">
€{kpi.attributedSales.toLocaleString('de-DE', { maximumFractionDigits: 0 })} €{kpi.attributedSales.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
</span> </span>
{renderGrowth(kpi.attributedSales, prevKpi?.attributedSales)} {renderGrowth(kpi.attributedSales, prevKpi?.attributedSales)}
</div> </div>
</div> </div>
{/* ACOS */} {/* ACOS */}
<div className="bg-slate-900/40 rounded-xl p-4 border border-white/5 transition-all hover:border-amber-500/20"> <div className="group">
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">ACOS</span> <span className="text-[9px] font-bold text-slate-500 uppercase tracking-tighter block mb-0.5">ACOS</span>
<div className="flex items-baseline"> <div className="flex items-baseline overflow-hidden">
<span className={`text-xl font-black ${kpi.acos <= 30 ? 'text-emerald-400' : kpi.acos <= 50 ? 'text-amber-400' : 'text-red-400'}`}> <span className={`text-sm font-black truncate ${kpi.acos <= 30 ? 'text-emerald-400' : kpi.acos <= 50 ? 'text-amber-400' : 'text-red-400'}`}>
{kpi.acos.toFixed(1)}% {kpi.acos.toFixed(1)}%
</span> </span>
{renderGrowth(kpi.acos, prevKpi?.acos, true)} {renderGrowth(kpi.acos, prevKpi?.acos, true)}
</div> </div>
</div> </div>
{/* ROAS */} {/* ROAS */}
<div className="bg-slate-900/40 rounded-xl p-4 border border-white/5 transition-all hover:border-indigo-500/20"> <div className="group">
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1">ROAS</span> <span className="text-[9px] font-bold text-slate-500 uppercase tracking-tighter block mb-0.5">ROAS</span>
<div className="flex items-baseline"> <div className="flex items-baseline overflow-hidden">
<span className={`text-xl font-black ${kpi.roas >= 3 ? 'text-emerald-400' : kpi.roas >= 2 ? 'text-amber-400' : 'text-red-400'}`}> <span className={`text-sm font-black truncate ${kpi.roas >= 3 ? 'text-emerald-400' : kpi.roas >= 2 ? 'text-amber-400' : 'text-red-400'}`}>
{kpi.roas.toFixed(2)}x {kpi.roas.toFixed(2)}x
</span> </span>
{renderGrowth(kpi.roas, prevKpi?.roas)} {renderGrowth(kpi.roas, prevKpi?.roas)}