From 11ddcb16c5ce35775a864c9c77b4ebb12f359e56 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Fri, 17 Apr 2026 12:48:18 +0200
Subject: [PATCH] fix: add fallback UI to VendorStockBadge to prevent empty WOC
 lines when data is missing

---
 components/VendorStockBadge.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/VendorStockBadge.tsx b/components/VendorStockBadge.tsx
index a853db0..1a34486 100644
--- a/components/VendorStockBadge.tsx
+++ b/components/VendorStockBadge.tsx
@@ -9,10 +9,22 @@ interface VendorStockBadgeProps {
 }
 
 export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendorStockMap, mode, avgWeeklySales }) => {
-    if (!vendorStockMap || !asin) return null;
+    if (!asin) return null;
 
-    const stockData = vendorStockMap.get(asin.toUpperCase());
-    if (!stockData) return null;
+    const stockData = vendorStockMap?.get(asin.toUpperCase());
+    
+    if (!stockData) {
+        return (
+            <div className="flex flex-col items-center gap-0.5 justify-center min-w-[70px] opacity-40 group-hover:opacity-100 transition-opacity" title={`Inventory data missing for ASIN: ${asin}`}>
+                <div className="text-[10px] font-bold text-slate-500 bg-slate-800/50 px-2 py-0.5 rounded border border-white/5">
+                   No Data
+                </div>
+                <div className="px-1.5 py-0.5 rounded-sm bg-slate-900/20 border border-white/5">
+                    <span className="text-[10px] font-black text-slate-600">-</span>
+                </div>
+            </div>
+        );
+    }
 
     const stock = mode === 'uk' ? stockData.uk : stockData.eu;