From 1de07d334273283bb45271a84314fa7aee1b1039 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Sat, 17 Jan 2026 11:54:46 +0100
Subject: [PATCH] feat: add filtered totals summary above Grid table

---
 components/DataGrid.tsx | 42 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 1757c19..0bbc01b 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -630,6 +630,48 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
                     </div>
                 )}
 
+                {/* Filter Totals Summary */}
+                <div className="bg-gradient-to-r from-indigo-900/20 to-purple-900/20 border-y border-indigo-500/30 px-4 py-3">
+                    <div className="flex flex-wrap items-center gap-6">
+                        <div className="flex items-center gap-2">
+                            <svg className="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
+                            <span className="text-xs font-bold text-indigo-300 uppercase tracking-wide">Filtered Totals:</span>
+                        </div>
+                        {years.map((year) => {
+                            const yearTotals = processedRows.reduce(
+                                (acc, row) => {
+                                    const data = row.totalsByYear[year];
+                                    if (data) {
+                                        acc.sellOut += data.sellOut;
+                                        acc.units += data.units;
+                                    }
+                                    return acc;
+                                },
+                                { sellOut: 0, units: 0 }
+                            );
+                            return (
+                                <div key={year} className="flex items-center gap-4 px-4 py-1 bg-slate-900/50 border border-slate-700/50 rounded-lg">
+                                    <span className="text-xs font-bold text-slate-400">{year}</span>
+                                    <div className="flex items-center gap-1">
+                                        <span className="text-xs text-slate-500">S.O:</span>
+                                        <span className="text-sm font-bold text-emerald-400">
+                                            €{yearTotals.sellOut.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+                                        </span>
+                                    </div>
+                                    <div className="h-3 w-px bg-slate-700"></div>
+                                    <div className="flex items-center gap-1">
+                                        <span className="text-xs text-slate-500">Units:</span>
+                                        <span className="text-sm font-bold text-blue-400">
+                                            {yearTotals.units.toLocaleString()}
+                                        </span>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+
+
                 {/* Data Table */}
                 <div className="overflow-x-auto min-h-[400px]">
                     <table className="w-full text-left text-sm border-collapse">