From 43a532a6f0c00e8bc7014f73a7b94d2a2ebaf5a3 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 11 May 2026 15:19:40 +0200
Subject: [PATCH] fix: use adsData directly for ad spend totals in DataGrid
 header

Previously the Filtered Totals header row summed ad spend from pivot rows,
which excluded ads-only records (ASINs with zero sales) due to isRealSale filter.
Now uses adSpendByYear memo from raw adsData, matching Dashboard calculation.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 components/DataGrid.tsx | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 91b2fa7..9b9e26a 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -293,6 +293,17 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
         };
     }, [adsData]);
 
+    // Ad spend per year from adsData directly (avoids pivot row filtering that drops ads-only records)
+    const adSpendByYear = useMemo(() => {
+        if (!adsData || adsData.length === 0) return {} as Record<number, { adSpend: number; attributedSales: number }>;
+        return adsData.reduce((acc, ad) => {
+            if (!acc[ad.year]) acc[ad.year] = { adSpend: 0, attributedSales: 0 };
+            acc[ad.year].adSpend += ad.cost;
+            acc[ad.year].attributedSales += ad.attributedSales30d;
+            return acc;
+        }, {} as Record<number, { adSpend: number; attributedSales: number }>);
+    }, [adsData]);
+
     // State for dynamic grouping
     const [selectedDimensions, setSelectedDimensions] = useState<string[]>(['sku', 'title']);
 
@@ -1193,19 +1204,24 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
                                                 <th className="px-3 py-3 text-right bg-fuchsia-950/20 border-r border-fuchsia-500/10">
                                                     <div className="flex flex-col items-end">
                                                         <span className="text-fuchsia-400 font-bold text-[13px]">
-                                                            €{totals.adSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}
+                                                            €{(adSpendByYear[year]?.adSpend ?? 0).toLocaleString('de-DE', { maximumFractionDigits: 0 })}
                                                         </span>
-                                                        {(totals as any).adSpendGrowth !== undefined && (
-                                                            <span className={`text-[9px] font-black ${(totals as any).adSpendGrowth <= 0 ? 'text-emerald-400' : 'text-amber-400'}`}>
-                                                                {(totals as any).adSpendGrowth >= 0 ? '↑' : '↓'} {Math.abs((totals as any).adSpendGrowth).toFixed(1)}%
-                                                            </span>
-                                                        )}
+                                                        {prevYear && adSpendByYear[prevYear]?.adSpend > 0 && (() => {
+                                                            const curr = adSpendByYear[year]?.adSpend ?? 0;
+                                                            const prev = adSpendByYear[prevYear]?.adSpend ?? 0;
+                                                            const growth = ((curr - prev) / prev) * 100;
+                                                            return (
+                                                                <span className={`text-[9px] font-black ${growth <= 0 ? 'text-emerald-400' : 'text-amber-400'}`}>
+                                                                    {growth >= 0 ? '↑' : '↓'} {Math.abs(growth).toFixed(1)}%
+                                                                </span>
+                                                            );
+                                                        })()}
                                                     </div>
                                                 </th>
                                                 <th className="px-3 py-3 text-right bg-fuchsia-950/20 border-r border-fuchsia-500/10">
                                                     <div className="flex flex-col items-end">
                                                         <span className="text-fuchsia-300 font-bold text-[13px]">
-                                                            {totals.sellOut > 0 ? ((totals.adSpend / totals.sellOut) * 100).toFixed(2) : '0.00'}%
+                                                            {totals.sellOut > 0 ? (((adSpendByYear[year]?.adSpend ?? 0) / totals.sellOut) * 100).toFixed(2) : '0.00'}%
                                                         </span>
                                                         <span className="text-[9px] font-black text-slate-500 uppercase">TACOS</span>
                                                     </div>