From 64f2953c7033f2cdc0ad4ad274da6d53f2787565 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 17 Jun 2026 16:31:23 +0200
Subject: [PATCH] feat: move vendor stock to own column with EU/UK badges and
 add Stock header

---
 components/ForecastView.tsx | 69 ++++++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 28 deletions(-)

diff --git a/components/ForecastView.tsx b/components/ForecastView.tsx
index 33faa19..42ebc7e 100644
--- a/components/ForecastView.tsx
+++ b/components/ForecastView.tsx
@@ -135,40 +135,48 @@ const ComparisonTableRow: React.FC<{ row: ComparisonRow }> = React.memo(({ row }
   const barWidth = Math.min(100, row.pctPeriod);
   return (
     <tr className="hover:bg-indigo-500/5 transition-colors border-b border-slate-800/50 last:border-0">
-      <td className="px-4 py-3">
-        <div className="flex flex-col gap-1">
-          <span className="text-xs font-black text-indigo-400 tracking-tighter">{row.sku}</span>
-          {(row.vendorStockEU > 0 || row.vendorStockUK > 0) && (
-            <div className="flex flex-col gap-0.5">
-              {row.vendorStockEU > 0 && (
-                <div
-                  className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded border text-[10px] font-bold bg-slate-200 text-slate-800 border-slate-300 w-fit"
-                  title={`Stock Amazon Vendor EU: ${row.vendorStockEU}`}
-                >
-                  <AmazonSmileIcon className="w-3 h-3 shrink-0" />
-                  <span className="text-[7px] font-black uppercase opacity-60">EU</span>
-                  <span>{row.vendorStockEU.toLocaleString('de-DE')}</span>
-                </div>
-              )}
-              {row.vendorStockUK > 0 && (
-                <div
-                  className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded border text-[10px] font-bold bg-slate-200 text-slate-800 border-slate-300 w-fit"
-                  title={`Stock Amazon Vendor UK: ${row.vendorStockUK}`}
-                >
-                  <AmazonSmileIcon className="w-3 h-3 shrink-0" />
-                  <span className="text-[7px] font-black uppercase opacity-60">UK</span>
-                  <span>{row.vendorStockUK.toLocaleString('de-DE')}</span>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
+      <td className="px-4 py-3 whitespace-nowrap">
+        <span className="text-xs font-black text-indigo-400 tracking-tighter">{row.sku}</span>
       </td>
       <td className="px-4 py-3 max-w-[280px]">
         <span className="text-sm text-slate-200 line-clamp-1" title={row.description}>
           {row.description}
         </span>
       </td>
+      <td className="px-4 py-3 whitespace-nowrap">
+        <div className="flex flex-col gap-1">
+          {row.vendorStockEU > 0 ? (
+            <div
+              className="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-gradient-to-br from-indigo-500 to-blue-600 text-white border border-indigo-400/50 shadow-lg text-[10px] font-bold w-fit"
+              title={`Stock Amazon Vendor EU: ${row.vendorStockEU.toLocaleString('de-DE')}`}
+            >
+              <AmazonSmileIcon className="w-3 h-3 shrink-0" />
+              <span className="text-[7px] font-black uppercase opacity-80">EU</span>
+              <span>{row.vendorStockEU.toLocaleString('de-DE')}</span>
+            </div>
+          ) : (
+            <div className="inline-flex items-center gap-1.5 px-2 py-1 rounded border text-[10px] font-bold bg-slate-800/50 text-slate-500 border-slate-700/50 w-fit">
+              <span className="text-[7px] font-black uppercase">EU</span>
+              <span>—</span>
+            </div>
+          )}
+          {row.vendorStockUK > 0 ? (
+            <div
+              className="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-gradient-to-br from-rose-500 to-red-600 text-white border border-rose-400/50 shadow-lg text-[10px] font-bold w-fit"
+              title={`Stock Amazon Vendor UK: ${row.vendorStockUK.toLocaleString('de-DE')}`}
+            >
+              <AmazonSmileIcon className="w-3 h-3 shrink-0" />
+              <span className="text-[7px] font-black uppercase opacity-80">UK</span>
+              <span>{row.vendorStockUK.toLocaleString('de-DE')}</span>
+            </div>
+          ) : (
+            <div className="inline-flex items-center gap-1.5 px-2 py-1 rounded border text-[10px] font-bold bg-slate-800/50 text-slate-500 border-slate-700/50 w-fit">
+              <span className="text-[7px] font-black uppercase">UK</span>
+              <span>—</span>
+            </div>
+          )}
+        </div>
+      </td>
       <td className="px-4 py-3 text-right whitespace-nowrap">
         <span className="text-sm font-black text-emerald-400">
           {row.actualUnits.toLocaleString('de-DE')}
@@ -648,6 +656,11 @@ const ForecastView: React.FC<ForecastViewProps> = ({ asinMetadata, vendorStockMa
                       />
                     </div>
                   </th>
+                  <th className="px-4 py-3 text-left w-[12%]">
+                    <div className="flex items-center gap-0.5">
+                      <span>Stock</span>
+                    </div>
+                  </th>
                   <th className="px-4 py-3 text-right w-[11%]">
                     <div className="flex items-center justify-end gap-0.5">
                       <ExcelFilter