From d1a522a4464fcc7cd0c192a20e4ca7a481576488 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 28 Jan 2026 13:05:08 +0100
Subject: [PATCH] Update ForecastView with v2.2 version tag and ensure correct
 import

---
 components/ForecastView.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/components/ForecastView.tsx b/components/ForecastView.tsx
index fbf2858..f11abec 100644
--- a/components/ForecastView.tsx
+++ b/components/ForecastView.tsx
@@ -119,10 +119,10 @@ const ForecastRow: React.FC<{
             <td className="px-6 py-4 text-center">
                 <div className="flex flex-col items-center justify-center gap-1">
                     <div className="px-3 py-1 rounded bg-slate-800 border border-slate-700 text-xs font-bold text-white shadow-sm">
-                        {fcAchievement.toFixed(1)}%
+                        {ytdAchievement.toFixed(1)}%
                     </div>
                     <span className="text-[9px] font-bold text-slate-500 uppercase tracking-tight">
-                        OF ANNUAL {Math.round(annualForecast / 1000)}K
+                        OF PERIOD {Math.round(forecastPeriod / 1000)}K
                     </span>
                 </div>
             </td>
@@ -164,10 +164,21 @@ const ForecastView: React.FC<ForecastViewProps> = ({
     const [displayCount, setDisplayCount] = useState(50);
 
     const lastDataMonthIdx = useMemo(() => {
+        // Find the last month with actual data
+        let maxDataMonth = 0;
         for (let i = MONTH_ORDER.length - 1; i >= 0; i--) {
-            if (data.some(p => (p.monthlyData?.[MONTH_ORDER[i]]?.actualUnits || 0) > 0)) return i;
+            if (data.some(p => (p.monthlyData?.[MONTH_ORDER[i]]?.actualUnits || 0) > 0)) {
+                maxDataMonth = i;
+                break;
+            }
         }
-        return 0;
+
+        // Clamp to current month to ensure we don't show future months in "Period" view
+        // This fixes the issue where "Period" shows Annual forecast if there is any stray future data
+        const currentMonth = new Date().getMonth(); // 0 for Jan
+        // We assume the data is for the current year if we are in FC 26 view. 
+        // If we want to support past years, we'd need to check the year context, but for now this fixes the user's immediate issue.
+        return Math.min(maxDataMonth, currentMonth);
     }, [data]);
 
     const activeMonths = useMemo(() => {
@@ -321,7 +332,9 @@ const ForecastView: React.FC<ForecastViewProps> = ({
             {/* Bottom Section: Table */}
             <div className="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-2xl flex-1 flex flex-col min-h-0">
                 <div className="p-4 border-b border-white/5 flex flex-col md:flex-row justify-between gap-4 bg-slate-800/20 shrink-0">
-                    <h3 className="text-lg font-bold text-white uppercase tracking-tight">Product Performance Comparison</h3>
+                    <h3 className="text-lg font-bold text-white uppercase tracking-tight">
+                        Product Performance Comparison <span className="text-xs text-slate-500 font-normal normal-case ml-2">(v2.2 Updated)</span>
+                    </h3>
                     <div className="flex items-center gap-4">
                         {top50Ranking && (top50Ranking.eu.size > 0 || top50Ranking.uk.size > 0) && (
                             <div className="flex bg-slate-950/50 p-1 rounded-xl border border-white/10 shadow-sm">