From 2155c9d2dedf718ee89f58d0503ff5fb0d86f26d Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 28 Jan 2026 11:29:25 +0100
Subject: [PATCH] Fix syntax in ForecastViewProps and clean rewrite of
 VendorStockBadge

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

diff --git a/components/VendorStockBadge.tsx b/components/VendorStockBadge.tsx
index 7a6cecc..65864d5 100644
--- a/components/VendorStockBadge.tsx
+++ b/components/VendorStockBadge.tsx
@@ -17,27 +17,27 @@ export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendor
     const stock = mode === 'uk' ? stockData.uk : stockData.eu;
 
     // Calculate Weeks of Coverage (WOC)
-    // 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;
+    // If sales are 0 but store has stock -> Infinite coverage (>52 weeks) -> Green
+    // If sales are 0 and NO stock -> 0 weeks -> Red
+    // If sales > 0 -> Calculate stock/sales
+    let woc: number = 0;
     const velocity = avgWeeklySales || 0;
 
     if (velocity > 0) {
         woc = stock / velocity;
     } else if (stock > 0) {
-        woc = 999; // Infinite/Safe
+        woc = 999;
     } else {
-        woc = 0; // No stock, no sales -> Empty/Red
+        woc = 0;
     }
 
-    const wocColor = woc < 4 ? 'text-rose-500' : 'text-emerald-500';
     const wocText = woc === 999 ? '> 52 Weeks' : `${woc.toFixed(1)} Weeks Cover`;
+    const wocColor = woc < 4 ? 'text-rose-500' : 'text-emerald-500';
 
     const themeClasses = "bg-slate-200 text-slate-800 border-slate-300 shadow-sm";
 
     return (
-        <div className="flex flex-col items-center gap-1.5 min-h-[30px] justify-center">
+        <div className="flex flex-col items-center gap-1 justify-center min-w-[60px]">
             <div
                 className={`inline-flex items-center gap-1 px-2 py-0.5 rounded border text-[10px] font-bold transition-all hover:scale-105 active:scale-95 cursor-default ${themeClasses}`}
                 title={`Stock en Amazon Warehouse (${mode.toUpperCase()}): ${stock}`}
@@ -76,7 +76,7 @@ export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendor
                     <span>{stock.toLocaleString('de-DE')}</span>
                 </div>
             </div>
-            <span className={`text-[10px] font-black uppercase tracking-tight whitespace-nowrap ${wocColor}`}>
+            <span className={`text-[9px] font-black uppercase tracking-tight whitespace-nowrap ${wocColor}`}>
                 {wocText}
             </span>
         </div>