Refine Top 50 badge visibility based on customer filters

App.tsx

@@ -615,6 +615,7 @@ const App: React.FC = () => {
                     stockMap={stockMap}
                     stockFilter={filters.stock}
                     onStockFilterChange={(s) => setFilters(prev => ({ ...prev, stock: s }))}
+                    customerFilters={filters.customer}
                   />
                 </Suspense>
               )}

components/WeeklyGrid.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import * as XLSX from 'xlsx';
 import { CombinedKPIs } from '../types';
-import { pivotWeeklySalesData, WeeklyPivotRow } from '../services/dataProcessor';
+import { pivotWeeklySalesData, WeeklyPivotRow, PAN_EU_COUNTRIES } from '../services/dataProcessor';
 import { StockBadge } from './StockBadge';
 import { InColumnStockFilter } from './InColumnStockFilter';
 
@@ -15,6 +15,7 @@ interface WeeklyGridProps {
     stockMap?: Map<string, number>;
     stockFilter: string[];
     onStockFilterChange: (newFilters: string[]) => void;
+    customerFilters: string[];
 }
 
 type SortConfig = {
@@ -65,17 +66,28 @@ const WeeklyRow: React.FC<{
     top50Mode: 'eu' | 'uk';
     sortConfig: SortConfig;
     renderGrowth: (current: number, previous: number) => React.ReactNode;
-}> = React.memo(({ row, weeks, onDrillDown, stockMap, top50Ranking, top50Mode, sortConfig, renderGrowth }) => {
+    customerFilters: string[];
+}> = React.memo(({ row, weeks, onDrillDown, stockMap, top50Ranking, top50Mode, sortConfig, renderGrowth, customerFilters }) => {
     const ranks: { rank: number; label: string; theme: 'amber' | 'blue' | 'indigo' }[] = [];
     const asin = row.asin.trim().toUpperCase();
+
+    const isUKSelected = customerFilters.some(c => c.toLowerCase().includes('uk'));
+    const isEUPartialSelected = customerFilters.some(c => PAN_EU_COUNTRIES.includes(c));
+    const hasNoCustomerFilter = customerFilters.length === 0;
+
     if (top50Ranking) {
-        if (top50Mode === 'eu') {
+        // Only show UK rank if UK is explicitly selected
-            const rank = top50Ranking.eu.get(asin);
+        if (top50Mode === 'uk' && isUKSelected) {
-            if (rank) ranks.push({ rank, label: 'EU', theme: 'indigo' });
-        } else {
             const rank = top50Ranking.uk.get(asin);
             if (rank) ranks.push({ rank, label: 'UK', theme: 'blue' });
         }
+        // Only show EU rank if at least one Pan-EU country is selected
+        // OR if no filters are selected (User might want to see them all then, but user said "only when... is selected")
+        // Actually the prompt says: "only appear when in the filters... is selected"
+        else if (top50Mode === 'eu' && isEUPartialSelected) {
+            const rank = top50Ranking.eu.get(asin);
+            if (rank) ranks.push({ rank, label: 'EU', theme: 'indigo' });
+        }
     }
 
     return (
@@ -145,7 +157,7 @@ const WeeklyRow: React.FC<{
     );
 });
 
-const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown, stockMap, stockFilter, onStockFilterChange }) => {
+const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown, stockMap, stockFilter, onStockFilterChange, customerFilters }) => {
     // Pivot data - memoized
     const { rows, weeks: allWeeks } = useMemo(() => pivotWeeklySalesData(data), [data]);
 
@@ -599,6 +611,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown
                                                     top50Mode={top50Mode}
                                                     sortConfig={sortConfig}
                                                     renderGrowth={renderGrowth}
+                                                    customerFilters={customerFilters}
                                                 />
                                             ))}
                                             {displayCount < sortedRows.length && (