From ab79f2ca6e31aecf27413b54be3f371a9270230e Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 19 Feb 2026 16:36:05 +0100
Subject: [PATCH] feat: implement 1-to-1 metric swap (Units vs Revenue) in
 Weekly Sales

---
 components/WeeklyGrid.tsx | 71 +++++----------------------------------
 1 file changed, 8 insertions(+), 63 deletions(-)

diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index 5caefc7..b08cb15 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -267,51 +267,8 @@ const WeeklyRow: React.FC<{
                         )}
 
                         <div className="flex flex-col items-center gap-0.5">
-                            {/* Secondary Metrics & Ads Spend */}
-                            <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0.5">
-                                {primaryMetric === 'units' ? (
-                                    revenue > 0 && (
-                                        <MetricDetailTooltip
-                                            currentValue={revenue}
-                                            previousValue={prevRevenue}
-                                            yoyValue={yoyRevenue}
-                                            currentWeekLabel={`Week ${weekNum} (${year})`}
-                                            previousWeekLabel={`Week ${prevWeekNum} (${year})`}
-                                            yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
-                                            metricName="Revenue"
-                                            metricColor="text-indigo-400/80"
-                                            formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
-                                        >
-                                            <div className="flex items-center gap-1 text-[10px]">
-                                                <span className={`font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}>
-                                                    €{revenue.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
-                                                </span>
-                                                {renderGrowth(revenue, prevRevenue)}
-                                            </div>
-                                        </MetricDetailTooltip>
-                                    )
-                                ) : (
-                                    val > 0 && (
-                                        <MetricDetailTooltip
-                                            currentValue={val}
-                                            previousValue={prevVal}
-                                            yoyValue={yoyUnits}
-                                            currentWeekLabel={`Week ${weekNum} (${year})`}
-                                            previousWeekLabel={`Week ${prevWeekNum} (${year})`}
-                                            yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
-                                            metricName="Units"
-                                            metricColor="text-indigo-400/80"
-                                        >
-                                            <div className="flex items-center gap-1 text-[10px]">
-                                                <span className={`font-medium ${sortConfig?.key === week && sortConfig.metric === 'units' ? 'text-indigo-300' : 'text-indigo-400/80'}`}>
-                                                    {val.toLocaleString('de-DE')}
-                                                </span>
-                                                {renderGrowth(val, prevVal)}
-                                            </div>
-                                        </MetricDetailTooltip>
-                                    )
-                                )}
-
+                            {/* Ads Spend & GV */}
+                            <div className="flex flex-col items-center gap-0.5">
                                 {/* Always show Ads Spend (if > 0) */}
                                 {spend > 0 && (
                                     <MetricDetailTooltip
@@ -1008,15 +965,9 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
                                                         <span>{weekTotals[week]?.units.toLocaleString('de-DE') || 0}</span>
                                                         {renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)}
                                                     </div>
-                                                    <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0 text-[10px]">
-                                                        <div className="flex items-center gap-0.5 text-indigo-300 font-bold">
-                                                            <span>€{(weekTotals[week]?.revenue || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
-                                                            {renderGrowth(weekTotals[week]?.revenue || 0, weekTotals[weeks[idx + 1]]?.revenue || 0)}
-                                                        </div>
-                                                        <div className="flex items-center gap-0.5 text-rose-400/80 italic font-bold">
-                                                            <span>Ads: €{(weekTotals[week]?.spend || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
-                                                            {renderGrowth(weekTotals[week]?.spend || 0, weekTotals[weeks[idx + 1]]?.spend || 0)}
-                                                        </div>
+                                                    <div className="flex items-center gap-0.5 text-rose-400/80 italic font-bold text-[10px]">
+                                                        <span>Ads: €{(weekTotals[week]?.spend || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
+                                                        {renderGrowth(weekTotals[week]?.spend || 0, weekTotals[weeks[idx + 1]]?.spend || 0)}
                                                     </div>
                                                 </>
                                             ) : (
@@ -1025,15 +976,9 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
                                                         <span>€{(weekTotals[week]?.revenue || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
                                                         {renderGrowth(weekTotals[week]?.revenue || 0, weekTotals[weeks[idx + 1]]?.revenue || 0)}
                                                     </div>
-                                                    <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0 text-[10px]">
-                                                        <div className="flex items-center gap-0.5 text-indigo-300 font-bold">
-                                                            <span>{(weekTotals[week]?.units || 0).toLocaleString('de-DE')} Units</span>
-                                                            {renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)}
-                                                        </div>
-                                                        <div className="flex items-center gap-0.5 text-rose-400/80 italic font-bold">
-                                                            <span>Ads: €{(weekTotals[week]?.spend || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
-                                                            {renderGrowth(weekTotals[week]?.spend || 0, weekTotals[weeks[idx + 1]]?.spend || 0)}
-                                                        </div>
+                                                    <div className="flex items-center gap-0.5 text-rose-400/80 italic font-bold text-[10px]">
+                                                        <span>Ads: €{(weekTotals[week]?.spend || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
+                                                        {renderGrowth(weekTotals[week]?.spend || 0, weekTotals[weeks[idx + 1]]?.spend || 0)}
                                                     </div>
                                                 </>
                                             )}