From b01401272ca7bf057398e63e34e8275b7e0f8197 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 27 Apr 2026 11:25:09 +0200
Subject: [PATCH] Fix: ensure Amazon stock badges are visible in Profitability
 and Top Movers tabs

---
 components/TopMovers.tsx       |  2 +-
 components/mkt/MasterTable.tsx | 39 +++++++++++++++++++++++++++++-----
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/components/TopMovers.tsx b/components/TopMovers.tsx
index 4fa3e93..4071921 100644
--- a/components/TopMovers.tsx
+++ b/components/TopMovers.tsx
@@ -130,7 +130,7 @@ const MoversTable: React.FC<{
 
                   {/* Stock Badge */}
                   <td className="px-6 py-3 text-center">
-                    <StockBadge stock={stockMap?.get(item.sku)} />
+                    <StockBadge stock={stockMap?.get(item.sku?.replace(/(DE|EN)$/i, ''))} />
                   </td>
 
                   {/* Vendor Stock Badge */}
diff --git a/components/mkt/MasterTable.tsx b/components/mkt/MasterTable.tsx
index 47422ec..a570e27 100644
--- a/components/mkt/MasterTable.tsx
+++ b/components/mkt/MasterTable.tsx
@@ -2,17 +2,34 @@ import React, { useState, useMemo } from 'react';
 import { Product } from './types';
 import { formatCurrency, formatPercent, calculateProductMetrics, cn } from './utils';
 import { ArrowUpDown, AlertCircle, ChevronUp, ChevronDown } from 'lucide-react';
+import { StockBadge } from '../StockBadge';
+import { VendorStockBadge } from '../VendorStockBadge';
+import { BuyBoxWarningBadge } from '../BuyBoxWarningBadge';
 
 interface MasterTableProps {
   products: Product[];
   includeCOGS: boolean;
   onProductClick: (product: Product) => void;
+  stockMap?: Map<string, number>;
+  vendorStockMap?: Map<string, { eu: number; uk: number }>;
+  top50Mode?: 'eu' | 'uk';
+  velocityMap?: Map<string, number>;
+  buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
 }
 
 type SortKey = 'name' | 'grossSales' | 'ppcSpend' | 'deals' | 'promos' | 'chargebacks' | 'netMargin' | 'marginPercent';
 type SortOrder = 'asc' | 'desc';
 
-export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS, onProductClick }) => {
+export const MasterTable: React.FC<MasterTableProps> = ({ 
+  products, 
+  includeCOGS, 
+  onProductClick,
+  stockMap,
+  vendorStockMap,
+  top50Mode = 'eu',
+  velocityMap,
+  buyBoxLostMap
+}) => {
   const [sortKey, setSortKey] = useState<SortKey>('marginPercent');
   const [sortOrder, setSortOrder] = useState<SortOrder>('asc');
 
@@ -172,10 +189,22 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
                     className="hover:bg-[#1A1E2A] transition-colors cursor-pointer group"
                     onClick={() => onProductClick(product)}
                   >
-                  <td className="px-6 py-4 whitespace-normal min-w-[250px] max-w-[300px]">
-                    <div className="font-medium text-slate-200 group-hover:text-indigo-400 transition-colors line-clamp-2" title={product.name}>{product.name}</div>
-                    <div className="text-xs text-slate-500 font-mono mt-0.5">{product.sku} | {product.asin}</div>
-                  </td>
+                    <td className="px-6 py-4 whitespace-normal min-w-[300px] max-w-[400px]">
+                      <div className="font-medium text-slate-200 group-hover:text-indigo-400 transition-colors line-clamp-2" title={product.name}>{product.name}</div>
+                      <div className="text-xs text-slate-500 font-mono mt-0.5 mb-2">{product.sku} | {product.asin}</div>
+                      <div className="flex items-center gap-2">
+                        {stockMap && (
+                          <StockBadge stock={stockMap.get(product.sku?.replace(/(DE|EN)$/i, ''))} />
+                        )}
+                        <VendorStockBadge 
+                          asin={product.asin} 
+                          vendorStockMap={vendorStockMap} 
+                          mode={top50Mode} 
+                          avgWeeklySales={velocityMap?.get(product.asin.trim().toUpperCase())} 
+                        />
+                        <BuyBoxWarningBadge asin={product.asin} buyBoxLostMap={buyBoxLostMap} />
+                      </div>
+                    </td>
                   <td className="px-6 py-4 text-right">
                     <div className="flex flex-col items-end">
                       <span className="font-medium text-slate-200">{formatCurrency(product.grossSales)}</span>