Add Buy Box Lost detection feature with visual warning badges

components/AdsPerformance.tsx

@@ -5,6 +5,7 @@ import { DownloadIcon, FunnelIcon, TrendingIcon, ChartIcon } from './Icons';
 import { StockBadge } from './StockBadge';
 import { Top50Badge } from './Top50Badge';
 import { VendorStockBadge } from './VendorStockBadge';
+import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
 import { InColumnStockFilter } from './InColumnStockFilter';
 import { WarehouseIcon, AmazonSmileIcon, CoverageIcon } from './Icons';
 
@@ -24,6 +25,7 @@ interface AdsPerformanceProps {
     onVendorStockFilterChange: (newFilters: string[]) => void;
     wocFilter: string[];
     onWocFilterChange: (newFilters: string[]) => void;
+    buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
 }
 
 type SortKey = keyof CombinedKPIs | 'acos' | 'roas' | 'tacos' | 'ctr' | 'cpc' | 'cvrUnits';
@@ -45,7 +47,8 @@ const AdsRow: React.FC<{
     top50Mode: 'eu' | 'uk';
     stockMap?: Map<string, number>;
     vendorStockMap?: Map<string, { eu: number; uk: number }>;
-}> = React.memo(({ item, top50Ranking, top50Mode, stockMap, vendorStockMap }) => {
+    buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
+}> = React.memo(({ item, top50Ranking, top50Mode, stockMap, vendorStockMap, buyBoxLostMap }) => {
     const asin = item.asin.trim().toUpperCase();
     const ranks: { rank: number; label: string; theme: 'amber' | 'blue' | 'indigo' }[] = [];
 
@@ -78,6 +81,7 @@ const AdsRow: React.FC<{
                             <StockBadge stock={stockMap.get(item.sku?.replace(/(DE|EN)$/i, ''))} />
                         )}
                         <VendorStockBadge asin={item.asin} vendorStockMap={vendorStockMap} mode={top50Mode} avgWeeklySales={item.avgWeeklySales} />
+                        <BuyBoxWarningBadge asin={asin} buyBoxLostMap={buyBoxLostMap} />
                     </div>
                 </div>
             </td>
@@ -111,7 +115,8 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
     onVendorStockFilterChange,
     wocFilter,
     onWocFilterChange,
-    top50Mode
+    top50Mode,
+    buyBoxLostMap
 }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const [showOnlyTop50, setShowOnlyTop50] = useState(false);
@@ -475,7 +480,7 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
                         </thead>
                         <tbody className="divide-y divide-white/[0.03]">
                             {filteredAndSorted.map((p) => (
-                                <AdsRow key={p.id} item={p} top50Ranking={top50Ranking} top50Mode={top50Mode} stockMap={stockMap} vendorStockMap={vendorStockMap} />
+                                <AdsRow key={p.id} item={p} top50Ranking={top50Ranking} top50Mode={top50Mode} stockMap={stockMap} vendorStockMap={vendorStockMap} buyBoxLostMap={buyBoxLostMap} />
                             ))}
                         </tbody>
                     </table>