From d496073e889878e2dfd08f1d1455e50d7a9f0b69 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Tue, 27 Jan 2026 09:43:28 +0100
Subject: [PATCH] Forecast View: Period-aware banners and labels

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

diff --git a/components/ForecastView.tsx b/components/ForecastView.tsx
index 413eba1..c015a8d 100644
--- a/components/ForecastView.tsx
+++ b/components/ForecastView.tsx
@@ -85,14 +85,16 @@ const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking
         let totalForecast = 0;
         let totalActual = 0;
         data.forEach(p => {
-            totalForecast += p.annualForecast;
             p.monthlyData.forEach(md => {
-                totalActual += md.actualUnits;
+                if (activeMonths.includes(md.month)) {
+                    totalForecast += md.forecastUnits;
+                    totalActual += md.actualUnits;
+                }
             });
         });
         const fulfillment = totalForecast > 0 ? (totalActual / totalForecast) * 100 : 0;
         return { totalForecast, totalActual, fulfillment };
-    }, [data]);
+    }, [data, activeMonths]);
 
     const filteredProducts = useMemo(() => {
         let result = data;
@@ -138,7 +140,7 @@ const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                 <div className="bg-slate-900 border border-border rounded-2xl p-4 shadow-xl relative overflow-hidden group">
                     <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 rounded-full -mr-16 -mt-16 blur-3xl group-hover:bg-indigo-500/20 transition-all"></div>
-                    <h3 className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1">Total Forecast 2026</h3>
+                    <h3 className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1">Total Forecast (Period)</h3>
                     <div className="text-2xl font-black text-white">
                         {globalSummary.totalForecast.toLocaleString('de-DE')} <span className="text-xs font-medium text-slate-500">Units</span>
                     </div>
@@ -146,7 +148,7 @@ const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking
 
                 <div className="bg-slate-900 border border-border rounded-2xl p-4 shadow-xl relative overflow-hidden group">
                     <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 rounded-full -mr-16 -mt-16 blur-3xl group-hover:bg-emerald-500/20 transition-all"></div>
-                    <h3 className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1">Total Actual Sales 2026</h3>
+                    <h3 className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1">Total Actual Sales (Period)</h3>
                     <div className="text-2xl font-black text-emerald-400">
                         {globalSummary.totalActual.toLocaleString('de-DE')} <span className="text-xs font-medium text-slate-500">Units</span>
                     </div>
@@ -154,7 +156,7 @@ const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking
 
                 <div className="bg-slate-900 border border-indigo-500/30 rounded-2xl p-4 shadow-xl relative overflow-hidden group">
                     <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/20 rounded-full -mr-16 -mt-16 blur-3xl"></div>
-                    <h3 className="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">Global Fulfillment</h3>
+                    <h3 className="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">Fulfillment (Period)</h3>
                     <div className="flex items-baseline gap-2">
                         <div className={`text-2xl font-black ${globalSummary.fulfillment >= 100 ? 'text-emerald-400' : 'text-indigo-400'}`}>
                             {globalSummary.fulfillment.toFixed(1)}%