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

feat: display metrics labels above values in Grid view Filtered Totals

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-06-17 15:33:14 +02:00
parent 434b1b5103
commit be44d8d00f
1 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DataGrid.tsx
+21 -16
View File
@@ -1146,43 +1146,48 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
};
return (
<div className="bg-[#0b0f19] border border-slate-800 rounded-xl p-4 flex flex-wrap items-center justify-between gap-4 select-none shadow-2xl">
<div className="flex items-center gap-2 pr-6 border-r border-slate-800/80">
<FunnelIcon className="w-3.5 h-3.5 text-slate-500" />
<span className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Filtered Totals</span>
<div className="bg-[#0b0f19] border border-slate-800 rounded-xl p-5 select-none shadow-2xl flex flex-col gap-4">
<div className="flex items-center gap-2 border-b border-slate-800/80 pb-3">
<FunnelIcon className="w-3.5 h-3.5 text-indigo-400" />
<span className="text-xs font-black text-slate-300 uppercase tracking-widest">Filtered Totals (YTD {latestYear})</span>
</div>
<div className="flex-1 grid grid-cols-2 sm:grid-cols-5 gap-4">
<div className="grid grid-cols-2 sm:grid-cols-5 gap-6">
{/* Sell Out */}
<div className="text-center">
<span className="text-2xl font-black text-cyan-400 block tracking-tight">
<div className="flex flex-col items-center justify-between p-2 rounded bg-slate-950/40 border border-slate-900">
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-2">Sell Out Revenue</span>
<span className="text-xl font-black text-cyan-400 block tracking-tight">
€{currentTotals.sellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
</span>
{formatDiffPct(soGrowth)}
</div>
{/* Units */}
<div className="text-center">
<span className="text-2xl font-black text-slate-200 block tracking-tight">
<div className="flex flex-col items-center justify-between p-2 rounded bg-slate-950/40 border border-slate-900">
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-2">Units Sold</span>
<span className="text-xl font-black text-slate-200 block tracking-tight">
{currentTotals.units.toLocaleString('de-DE')}
</span>
{formatDiffPct(uGrowth)}
</div>
{/* Ad Spend */}
<div className="text-center">
<span className="text-2xl font-black text-fuchsia-400 block tracking-tight">
<div className="flex flex-col items-center justify-between p-2 rounded bg-slate-950/40 border border-slate-900">
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-2">Ad Spend</span>
<span className="text-xl font-black text-fuchsia-400 block tracking-tight">
€{totalAdSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
</span>
{formatDiffPct(adGrowth)}
</div>
{/* Tacos */}
<div className="text-center">
<span className="text-2xl font-black text-emerald-400 block tracking-tight">
<div className="flex flex-col items-center justify-between p-2 rounded bg-slate-950/40 border border-slate-900">
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-2">TACOS</span>
<span className="text-xl font-black text-emerald-400 block tracking-tight">
{tacosVal.toFixed(2)}%
</span>
<span className="text-[9px] font-semibold text-slate-500 uppercase tracking-wider block mt-1">TACOS</span>
<span className="text-[9px] font-bold text-emerald-500/80 uppercase block mt-1">Efficiency</span>
</div>
{/* Attributed Sales */}
<div className="text-center">
<span className="text-2xl font-black text-cyan-400 block tracking-tight">
<div className="flex flex-col items-center justify-between p-2 rounded bg-slate-950/40 border border-slate-900">
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-2">Ad Attributed Sales</span>
<span className="text-xl font-black text-cyan-400 block tracking-tight">
€{totalAttrSales.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
</span>
{formatDiffPct(attrSalesGrowth)}