Update ForecastView with v2.2 version tag and ensure correct import

This commit is contained in:
Christian Vidal Wolf
2026-01-28 13:05:08 +01:00
parent 974684ff97
commit d1a522a446
+18 -5
View File
@@ -119,10 +119,10 @@ const ForecastRow: React.FC<{
<td className="px-6 py-4 text-center"> <td className="px-6 py-4 text-center">
<div className="flex flex-col items-center justify-center gap-1"> <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"> <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> </div>
<span className="text-[9px] font-bold text-slate-500 uppercase tracking-tight"> <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> </span>
</div> </div>
</td> </td>
@@ -164,10 +164,21 @@ const ForecastView: React.FC<ForecastViewProps> = ({
const [displayCount, setDisplayCount] = useState(50); const [displayCount, setDisplayCount] = useState(50);
const lastDataMonthIdx = useMemo(() => { const lastDataMonthIdx = useMemo(() => {
// Find the last month with actual data
let maxDataMonth = 0;
for (let i = MONTH_ORDER.length - 1; i >= 0; i--) { 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]); }, [data]);
const activeMonths = useMemo(() => { const activeMonths = useMemo(() => {
@@ -321,7 +332,9 @@ const ForecastView: React.FC<ForecastViewProps> = ({
{/* Bottom Section: Table */} {/* 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="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"> <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"> <div className="flex items-center gap-4">
{top50Ranking && (top50Ranking.eu.size > 0 || top50Ranking.uk.size > 0) && ( {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"> <div className="flex bg-slate-950/50 p-1 rounded-xl border border-white/10 shadow-sm">