From 98e8bb39045ce40d3c9af086d8a2afb2f711fb44 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 28 Jan 2026 16:43:18 +0100
Subject: [PATCH] Add Annual Forecast column to Fc 26 tab and Excel export

---
 components/ForecastView.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/components/ForecastView.tsx b/components/ForecastView.tsx
index 492f2b9..8d80b15 100644
--- a/components/ForecastView.tsx
+++ b/components/ForecastView.tsx
@@ -105,6 +105,13 @@ const ForecastRow: React.FC<{
                     </div>
                 </div>
             </td>
+            {/* Annual Forecast */}
+            <td className="px-6 py-4 text-center">
+                <span className="text-sm font-bold text-slate-400">
+                    {(item.annualForecast || 0).toLocaleString('de-DE')}
+                </span>
+            </td>
+
             {/* Forecast (Period) */}
             <td className="px-6 py-4 text-center">
                 <span className="text-sm font-bold text-slate-400">
@@ -279,6 +286,7 @@ const ForecastView: React.FC<ForecastViewProps> = ({
             ASIN: p.asin,
             Title: p.title,
             Line: p.line,
+            'Annual Forecast': p.annualForecast,
             'Forecast (Period)': p.forecastPeriod,
             'Actual Units (2026)': p.actualUnits,
             'FC 26 Achievement (%)': p.fcAchievement,
@@ -392,19 +400,22 @@ const ForecastView: React.FC<ForecastViewProps> = ({
                     <table className="w-full text-left border-collapse relative">
                         <thead className="sticky top-0 z-20 bg-slate-950 shadow-sm text-[10px] font-black text-slate-500 uppercase tracking-wider">
                             <tr>
-                                <th className="px-6 py-4 text-white w-[35%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('sku')}>
+                                <th className="px-6 py-4 text-white w-[30%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('sku')}>
                                     Product Info <SortIndicator column="sku" />
                                 </th>
+                                <th className="px-6 py-4 text-center w-[12%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('annualForecast')}>
+                                    Annual Forecast <SortIndicator column="annualForecast" />
+                                </th>
                                 <th className="px-6 py-4 text-center w-[12%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('forecastPeriod')}>
                                     Forecast (Period) <SortIndicator column="forecastPeriod" />
                                 </th>
                                 <th className="px-6 py-4 text-center w-[12%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('actualUnits')}>
                                     Actual Units 2026 <SortIndicator column="actualUnits" />
                                 </th>
-                                <th className="px-6 py-4 text-center w-[15%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('fcAchievement')}>
+                                <th className="px-6 py-4 text-center w-[12%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('fcAchievement')}>
                                     FC 26 Achievement <SortIndicator column="fcAchievement" />
                                 </th>
-                                <th className="px-6 py-4 text-center w-[26%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('ytdAchievement')}>
+                                <th className="px-6 py-4 text-center w-[22%] cursor-pointer hover:bg-white/5 transition-colors" onClick={() => handleSort('ytdAchievement')}>
                                     YTD Achievement <SortIndicator column="ytdAchievement" />
                                 </th>
                             </tr>