christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 13:05:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Forecast View: Period-aware banners and labels

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-27 09:43:28 +01:00
parent 4e8b84bcd3
commit d496073e88
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ForecastView.tsx
+8 -6
View File
@@ -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)}%