From be44d8d00f8616e698f4304ee0842cf75e849a75 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 17 Jun 2026 15:33:14 +0200
Subject: [PATCH] feat: display metrics labels above values in Grid view
 Filtered Totals

---
 components/DataGrid.tsx | 37 +++++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 1a37e00..3635b4e 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -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)}