From fcc8096b0159188a5696a4ebcaba92add34b62f2 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 29 Jan 2026 13:45:41 +0100
Subject: [PATCH] Integrate Buy Box warnings in Grid tab; fix prop regression
 in App.tsx

---
 App.tsx                 | 1 +
 components/DataGrid.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/App.tsx b/App.tsx
index f0d593d..37b34a9 100644
--- a/App.tsx
+++ b/App.tsx
@@ -690,6 +690,7 @@ const App: React.FC = () => {
                     vendorStockMap={vendorStockMap}
                     top50Ranking={top50Ranking2025}
                     top50Mode={filters.customer.includes('Amazon UK') ? 'uk' : 'eu'}
+                    buyBoxLostMap={buyBoxLostMap}
                   />
                 </div>
               </Suspense>
diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 9229e94..c8247e7 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -8,6 +8,7 @@ import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon, TrendingIcon } from './
 import { StockBadge } from './StockBadge';
 import { Top50Badge } from './Top50Badge';
 import { VendorStockBadge } from './VendorStockBadge';
+import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
 
 interface DataGridProps {
     data: SalesRecord[] | CombinedKPIs[];
@@ -20,6 +21,7 @@ interface DataGridProps {
     };
     top50Mode: 'eu' | 'uk';
     vendorStockMap?: Map<string, { eu: number; uk: number }>;
+    buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
 }
 
 type SortConfig = {
@@ -236,7 +238,7 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
 };
 
 
-const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, stockMap, vendorStockMap, top50Ranking, top50Mode }) => {
+const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, stockMap, vendorStockMap, top50Ranking, top50Mode, buyBoxLostMap }) => {
     const [currentPage, setCurrentPage] = useState(1);
     const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' });
     const [showChart, setShowChart] = useState(true);
@@ -1114,6 +1116,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
                                                         return null;
                                                     })()}
                                                     <span>{(row[dim as keyof PivotRow] as string) || '-'}</span>
+                                                    <BuyBoxWarningBadge asin={row.asin} buyBoxLostMap={buyBoxLostMap} />
                                                 </div>
                                                 : (row[dim as keyof PivotRow] as string) || '-'
                                         }