From 1fc494fc3f8837ca19d7a08efebf8f86610c94a6 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 27 Apr 2026 11:40:36 +0200
Subject: [PATCH] Fix: consolidate stock badges and update WOC calculation to
 include internal warehouse stock

---
 components/AdsPerformance.tsx   |  8 +++++++-
 components/DataGrid.tsx         |  8 +++++++-
 components/TopMovers.tsx        |  2 ++
 components/VendorDataView.tsx   |  1 +
 components/VendorStockBadge.tsx | 16 +++++++++-------
 components/WeeklyGrid.tsx       |  9 ---------
 components/WeeklyRow.tsx        | 18 +++++++-----------
 components/mkt/MasterTable.tsx  |  1 +
 8 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/components/AdsPerformance.tsx b/components/AdsPerformance.tsx
index 23609af..489389e 100644
--- a/components/AdsPerformance.tsx
+++ b/components/AdsPerformance.tsx
@@ -82,7 +82,13 @@ const AdsRow: React.FC<{
                         {stockMap && (
                             <StockBadge stock={stockMap.get(item.sku?.replace(/(DE|EN)$/i, ''))} />
                         )}
-                        <VendorStockBadge asin={item.asin} vendorStockMap={vendorStockMap} mode={top50Mode} avgWeeklySales={velocityMap?.get(asin)} />
+                        <VendorStockBadge 
+                            asin={item.asin} 
+                            vendorStockMap={vendorStockMap} 
+                            mode={top50Mode} 
+                            avgWeeklySales={velocityMap?.get(asin)} 
+                            internalStock={stockMap?.get(item.sku?.replace(/(DE|EN)$/i, ''))}
+                        />
                         <BuyBoxWarningBadge asin={asin} buyBoxLostMap={buyBoxLostMap} />
                     </div>
                 </div>
diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 684505d..34f7f0e 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -1400,7 +1400,13 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
                                                     }
                                                     return null;
                                                 })()}
-                                                <VendorStockBadge asin={row.asin} vendorStockMap={vendorStockMap} mode={top50Mode} avgWeeklySales={velocityMap?.get(row.asin.trim().toUpperCase())} />
+                                                <VendorStockBadge 
+                                                    asin={row.asin} 
+                                                    vendorStockMap={vendorStockMap} 
+                                                    mode={top50Mode} 
+                                                    avgWeeklySales={velocityMap?.get(row.asin.trim().toUpperCase())} 
+                                                    internalStock={stockMap?.get(row.sku?.replace(/(DE|EN)$/i, ''))}
+                                                />
                                                 <BuyBoxWarningBadge asin={row.asin} buyBoxLostMap={buyBoxLostMap} />
                                             </div>
                                             : dim === 'asin' || dim === 'sku'
diff --git a/components/TopMovers.tsx b/components/TopMovers.tsx
index c468060..90782fc 100644
--- a/components/TopMovers.tsx
+++ b/components/TopMovers.tsx
@@ -157,6 +157,8 @@ const MoversTable: React.FC<{
                       asin={item.asin}
                       vendorStockMap={vendorStockMap}
                       mode={top50Mode}
+                      avgWeeklySales={velocityMap?.get(item.asin.trim().toUpperCase())}
+                      internalStock={stockMap?.get(item.sku?.replace(/(DE|EN)$/i, ''))}
                     />
                   </td>
 
diff --git a/components/VendorDataView.tsx b/components/VendorDataView.tsx
index c35bfb3..ad7f1f9 100644
--- a/components/VendorDataView.tsx
+++ b/components/VendorDataView.tsx
@@ -502,6 +502,7 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({
                   vendorStockMap={vendorStockMap} 
                   mode={top50Mode} 
                   avgWeeklySales={velocityMap?.get(productInfo.asin.trim().toUpperCase())} 
+                  internalStock={stockMap?.get(productInfo.sku?.replace(/(DE|EN)$/i, ''))}
                 />
                 <BuyBoxWarningBadge asin={productInfo.asin} buyBoxLostMap={buyBoxLostMap} />
               </div>
diff --git a/components/VendorStockBadge.tsx b/components/VendorStockBadge.tsx
index 3988b51..4a351b3 100644
--- a/components/VendorStockBadge.tsx
+++ b/components/VendorStockBadge.tsx
@@ -6,9 +6,10 @@ interface VendorStockBadgeProps {
     vendorStockMap?: Map<string, { eu: number; uk: number }>;
     mode: 'eu' | 'uk';
     avgWeeklySales?: number;
+    internalStock?: number;
 }
 
-export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendorStockMap, mode, avgWeeklySales }) => {
+export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendorStockMap, mode, avgWeeklySales, internalStock }) => {
     if (!asin) return null;
 
     const normalizedAsin = asin.trim().toUpperCase();
@@ -27,7 +28,8 @@ export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendor
         );
     }
 
-    const stock = mode === 'uk' ? stockData.uk : stockData.eu;
+    const amazonStock = mode === 'uk' ? stockData.uk : stockData.eu;
+    const totalStock = amazonStock + (internalStock || 0);
 
     // Calculate Weeks of Coverage (WOC)
     // If sales are 0 but store has stock -> Infinite coverage (>52 weeks) -> Green
@@ -37,8 +39,8 @@ export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendor
     const velocity = avgWeeklySales || 0;
 
     if (velocity > 0) {
-        woc = stock / velocity;
-    } else if (stock > 0) {
+        woc = totalStock / velocity;
+    } else if (totalStock > 0) {
         woc = 999;
     } else {
         woc = 0;
@@ -53,17 +55,17 @@ export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendor
         <div className="flex flex-col items-center gap-0.5 justify-center min-w-[70px]">
             <div
                 className={`inline-flex items-center gap-1.5 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}`}
+                title={`Stock en Amazon Warehouse (${mode.toUpperCase()}): ${amazonStock}${internalStock ? ` | Almacén GMBH: ${internalStock}` : ''} | TOTAL: ${totalStock}`}
             >
                 <AmazonSmileIcon className="w-3.5 h-3.5" />
                 <div className="flex flex-col leading-[0.8]">
                     <span className="text-[7px] font-black uppercase opacity-60">Vendor</span>
-                    <span>{stock.toLocaleString('de-DE')}</span>
+                    <span>{amazonStock.toLocaleString('de-DE')}</span>
                 </div>
             </div>
             <div 
                 className={`px-1.5 py-0.5 rounded-sm bg-slate-900/40 border border-white/5 shadow-inner`}
-                title={`Avg Sales (4wk): ${velocity.toFixed(2)} | Stock: ${stock}`}
+                title={`Avg Sales (4wk): ${velocity.toFixed(2)} | Total Stock (Amz+Gmbh): ${totalStock}`}
             >
                 <span className={`text-[10px] font-black uppercase tracking-tighter whitespace-nowrap block ${wocColor}`}>
                     {wocText}
diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index d56a1b3..86e148c 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -692,15 +692,6 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
                                         </div>
                                     </div>
                                 </th>
-                                {/* COVERAGE Header Column */}
-                                <th
-                                    className="p-3 text-[11px] font-black text-emerald-400 uppercase tracking-widest sticky left-[240px] z-40 bg-slate-900 border-r border-white/10 min-w-[100px]"
-                                >
-                                    <div className="flex flex-col items-center gap-1">
-                                        <span>Coverage</span>
-                                        <span className="text-[8px] text-slate-500">(WOC)</span>
-                                    </div>
-                                </th>
                                 {weeks.map(week => (
                                     <th
                                         key={week}
diff --git a/components/WeeklyRow.tsx b/components/WeeklyRow.tsx
index 15cc5fe..f76af74 100644
--- a/components/WeeklyRow.tsx
+++ b/components/WeeklyRow.tsx
@@ -118,6 +118,13 @@ export const WeeklyRow: React.FC<WeeklyRowProps> = React.memo(({
                         {stockMap && (
                             <StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />
                         )}
+                        <VendorStockBadge
+                            asin={asin}
+                            vendorStockMap={vendorStockMap}
+                            mode={top50Mode}
+                            avgWeeklySales={velocityMap?.get(asin)}
+                            internalStock={stockMap?.get(row.sku?.replace(/(DE|EN)$/i, ''))}
+                        />
                         {(() => {
                             if (asin && top50Ranking) {
                                 if (top50Mode === 'eu') {
@@ -141,17 +148,6 @@ export const WeeklyRow: React.FC<WeeklyRowProps> = React.memo(({
                     <span className="text-[9px] text-fuchsia-400/80 font-bold uppercase tracking-widest">{row.line}</span>
                 </div>
             </td>
-            {/* Coverage Column */}
-            <td className="p-3 py-2 sticky left-[240px] z-10 bg-slate-900 group-hover:bg-slate-800 border-r border-white/10 min-w-[100px]">
-                <div className="flex justify-center">
-                    <VendorStockBadge
-                        asin={asin}
-                        vendorStockMap={vendorStockMap}
-                        mode={top50Mode}
-                        avgWeeklySales={velocityMap?.get(asin)}
-                    />
-                </div>
-            </td>
             {weeks.map((week, idx) => {
                 const val = row.unitsByWeek[week] || 0;
                 const prevVal = row.unitsByWeek[weeks[idx + 1]] || 0;
diff --git a/components/mkt/MasterTable.tsx b/components/mkt/MasterTable.tsx
index 6d7a009..0af933d 100644
--- a/components/mkt/MasterTable.tsx
+++ b/components/mkt/MasterTable.tsx
@@ -217,6 +217,7 @@ export const MasterTable: React.FC<MasterTableProps> = ({
                           vendorStockMap={vendorStockMap} 
                           mode={top50Mode} 
                           avgWeeklySales={velocityMap?.get(product.asin.trim().toUpperCase())} 
+                          internalStock={stockMap?.get(product.sku?.replace(/(DE|EN)$/i, ''))}
                         />
                         <BuyBoxWarningBadge asin={product.asin} buyBoxLostMap={buyBoxLostMap} />
                       </div>