From 473174f7e60d2914680d9d63461fa55b72de6d36 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 22 Jan 2026 15:40:56 +0100
Subject: [PATCH] feat: add Ad Spend and TACOS totals to Data Grid header

- DataGrid.tsx: Enhanced filteredTotalsByYear to aggregate advertising metrics
- DataGrid.tsx: Updated header row to include Ad Spend and TACOS cells per year
- DataGrid.tsx: Integrated YoY growth for Ad Spend
---
 components/DataGrid.tsx | 44 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 8ce821c..ff111d3 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -463,9 +463,14 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData =
                         acc.sellOut += data.sellOut;
                         acc.units += data.units;
                     }
+                    const ads = row.adsByYear?.[year];
+                    if (ads) {
+                        acc.adSpend += ads.adSpend;
+                        acc.attributedSales += ads.attributedSales;
+                    }
                     return acc;
                 },
-                { sellOut: 0, units: 0 }
+                { sellOut: 0, units: 0, adSpend: 0, attributedSales: 0 }
             );
 
             result[year] = totals;
@@ -480,9 +485,13 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData =
                             acc.sellOut += data.sellOut;
                             acc.units += data.units;
                         }
+                        const ads = row.adsByYear?.[prevYear];
+                        if (ads) {
+                            acc.adSpend += ads.adSpend;
+                        }
                         return acc;
                     },
-                    { sellOut: 0, units: 0 }
+                    { sellOut: 0, units: 0, adSpend: 0 }
                 );
 
                 if (prevYearTotals.sellOut > 0) {
@@ -496,6 +505,12 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData =
                 } else if (totals.units > 0) {
                     result[year].unitsGrowth = 100;
                 }
+
+                if (prevYearTotals.adSpend > 0) {
+                    (result[year] as any).adSpendGrowth = ((totals.adSpend - prevYearTotals.adSpend) / prevYearTotals.adSpend) * 100;
+                } else if (totals.adSpend > 0) {
+                    (result[year] as any).adSpendGrowth = 100;
+                }
             }
         });
 
@@ -898,7 +913,30 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData =
                                             </div>
                                         </th>
                                         {prevYear && <th colSpan={2} className="bg-indigo-900/5 border-r border-indigo-500/10"></th>}
-                                        {showAdsMetrics && adsSummary && <th colSpan={2} className="bg-fuchsia-900/5 border-r border-fuchsia-500/10"></th>}
+                                        {showAdsMetrics && adsSummary && (
+                                            <>
+                                                <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 })}
+                                                        </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>
+                                                        )}
+                                                    </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'}%
+                                                        </span>
+                                                        <span className="text-[9px] font-black text-slate-500 uppercase">TACOS</span>
+                                                    </div>
+                                                </th>
+                                            </>
+                                        )}
                                     </React.Fragment>
                                 );
                             })}