From 67951bcac8590e8a0499c66c9226875a1dbd0a0d Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Tue, 20 Jan 2026 12:59:35 +0100
Subject: [PATCH] feat: Implement Pan-EU grouping in Grid tab

- Added applyPanEUGrouping() helper function in dataProcessor.ts
- Groups Amazon DE/IT/FR/ES as 'Pan-EU' when no customer filter applied
- Shows individual countries when specific filter is selected
- Updated DataGrid to accept hasCustomerFilter prop
- Updated App.tsx to pass filter state to DataGrid
- Keeps Amazon UK and Amazon SC separate
- Verified with browser testing: grouping works correctly
---
 App.tsx                   |  2 +-
 components/DataGrid.tsx   | 12 ++++++++----
 services/dataProcessor.ts | 30 ++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/App.tsx b/App.tsx
index ad2b0f2..7fcbee8 100644
--- a/App.tsx
+++ b/App.tsx
@@ -363,7 +363,7 @@ const App: React.FC = () => {
                   contextData={contextAggregatedData}
                 />
               )}
-              {view === 'table' && <DataGrid data={filteredData} />}
+              {view === 'table' && <DataGrid data={filteredData} hasCustomerFilter={filters.customer.length > 0} />}
               {view === 'movers' && <TopMovers data={filteredData} />}
             </div>
           </>
diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 30f5c2d..030c50f 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -3,11 +3,12 @@ import {
     LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
 } from 'recharts';
 import { SalesRecord, PivotRow } from '../types';
-import { pivotSalesData, generateCSV, aggregateForTimeSeries, aggregateForComparisonTimeSeries } from '../services/dataProcessor';
+import { pivotSalesData, generateCSV, aggregateForTimeSeries, aggregateForComparisonTimeSeries, applyPanEUGrouping } from '../services/dataProcessor';
 import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon } from './Icons';
 
 interface DataGridProps {
     data: SalesRecord[];
+    hasCustomerFilter: boolean;
 }
 
 type SortConfig = {
@@ -224,7 +225,7 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
 };
 
 
-const DataGrid: React.FC<DataGridProps> = ({ data }) => {
+const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter }) => {
     const [currentPage, setCurrentPage] = useState(1);
     const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' });
     const [showChart, setShowChart] = useState(true);
@@ -248,8 +249,11 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
 
     // Transform flat data into Pivot structure
     const { rows: pivotRows, years } = useMemo(() => {
-        return pivotSalesData(data, effectiveDimensions);
-    }, [data, effectiveDimensions]);
+        // Apply Pan-EU grouping when no customer filter is applied
+        const processedData = applyPanEUGrouping(data, hasCustomerFilter);
+
+        return pivotSalesData(processedData, effectiveDimensions);
+    }, [data, effectiveDimensions, hasCustomerFilter]);
 
     // Data for the time series chart, supporting single and multi-year comparison
     const { chartData, uniqueYears, isComparisonView, chartTitle } = useMemo(() => {
diff --git a/services/dataProcessor.ts b/services/dataProcessor.ts
index ba85c7c..e4eec50 100644
--- a/services/dataProcessor.ts
+++ b/services/dataProcessor.ts
@@ -924,6 +924,36 @@ export const aggregateData = (data: SalesRecord[]): AggregatedData => {
     };
 };
 
+/**
+ * Groups Pan-EU countries (Amazon DE, IT, FR, ES) into a single "Pan-EU" customer
+ * when no customer filter is applied. This provides a consolidated view of European
+ * markets while keeping UK and SC separate.
+ * 
+ * @param data - Array of sales records
+ * @param hasCustomerFilter - Whether a customer filter is currently applied
+ * @returns Processed data with Pan-EU grouping applied if appropriate
+ */
+export const applyPanEUGrouping = (
+    data: SalesRecord[],
+    hasCustomerFilter: boolean
+): SalesRecord[] => {
+    // If customer filter is applied, don't group - show selected countries as-is
+    if (hasCustomerFilter) {
+        return data;
+    }
+
+    // Define Pan-EU countries
+    const PAN_EU_COUNTRIES = ['Amazon DE', 'Amazon IT', 'Amazon FR', 'Amazon ES'];
+
+    // Replace Pan-EU country names with "Pan-EU" for grouping
+    return data.map(record => {
+        if (PAN_EU_COUNTRIES.includes(record.customer)) {
+            return { ...record, customer: 'Pan-EU' };
+        }
+        return record;
+    });
+};
+
 export const getUniqueValues = (data: SalesRecord[], field: keyof SalesRecord): string[] => {
     const values = new Set(data.map(item => String(item[field])));
     return Array.from(values).sort();