From ba94890cc70947abd080a02ad1d33c0b1a655e38 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 28 Jan 2026 11:07:04 +0100
Subject: [PATCH] Fix styling: Ensure Weeks of Coverage is visible even with 0
 sales

---
 components/VendorStockBadge.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/VendorStockBadge.tsx b/components/VendorStockBadge.tsx
index cbbbab8..0f3d20f 100644
--- a/components/VendorStockBadge.tsx
+++ b/components/VendorStockBadge.tsx
@@ -17,8 +17,22 @@ export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendor
     const stock = mode === 'uk' ? stockData.uk : stockData.eu;
 
     // Calculate Weeks of Coverage (WOC)
-    const woc = (avgWeeklySales && avgWeeklySales > 0) ? stock / avgWeeklySales : null;
-    const wocColor = woc !== null ? (woc < 4 ? 'text-rose-500' : 'text-emerald-500') : 'text-slate-400';
+    // If we have sales velocity, calculate coverage.
+    // If sales are 0 but we have stock, coverage is effectively infinite (> 4 weeks) -> Green.
+    // If sales are 0 and stock is 0, coverage is 0 -> Red.
+    let woc: number | null = null;
+    const velocity = avgWeeklySales || 0;
+
+    if (velocity > 0) {
+        woc = stock / velocity;
+    } else if (stock > 0) {
+        woc = 999; // Infinite/Safe
+    } else {
+        woc = 0; // No stock, no sales -> Empty/Red
+    }
+
+    const wocColor = woc < 4 ? 'text-rose-500' : 'text-emerald-500';
+    const wocText = woc === 999 ? '> 52 Weeks' : `${woc.toFixed(1)} Weeks Cover`;
 
     const themeClasses = "bg-slate-200 text-slate-800 border-slate-300 shadow-sm";
 
@@ -62,11 +76,9 @@ export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendor
                     <span>{stock.toLocaleString('de-DE')}</span>
                 </div>
             </div>
-            {woc !== null && (
-                <div className={`text-[9px] font-black uppercase tracking-tighter ${wocColor}`}>
-                    {woc.toFixed(1)} Weeks Cover
-                </div>
-            )}
+            <div className={`text-[9px] font-black uppercase tracking-tighter ${wocColor}`}>
+                {wocText}
+            </div>
         </div>
     );
 };