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

Fix: Resolved crash in ForecastView and cleaned up unused props

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-28 09:06:42 +01:00
parent 6c788d335f
commit 65accfdb26
1 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ForecastView.tsx
+11 -12
View File
@@ -21,7 +21,6 @@ interface ForecastViewProps {
stockMap?: Map<string, number>; stockMap?: Map<string, number>;
stockFilter: string[]; stockFilter: string[];
onStockFilterChange: (newFilters: string[]) => void; onStockFilterChange: (newFilters: string[]) => void;
customerFilters: string[];
top50Mode: 'eu' | 'uk'; top50Mode: 'eu' | 'uk';
} }
@@ -47,9 +46,9 @@ const ForecastRow: React.FC<{
} }
} }
const monthlySales = activeMonths.map(m => item.monthlyData[m]?.units || 0); const monthlySales = activeMonths.map(m => (item.monthlyData && item.monthlyData[m]?.units) || 0);
const avgMonthly = monthlySales.reduce((a, b) => a + b, 0) / (activeMonths.length || 1); const avgMonthly = monthlySales.length > 0 ? monthlySales.reduce((a, b) => a + b, 0) / activeMonths.length : 0;
const peakMonthly = Math.max(...monthlySales, 0); const peakMonthly = monthlySales.length > 0 ? Math.max(...monthlySales) : 0;
return ( return (
<tr key={item.asin} className="hover:bg-indigo-500/5 transition-colors group"> <tr key={item.asin} className="hover:bg-indigo-500/5 transition-colors group">
@@ -76,21 +75,21 @@ const ForecastRow: React.FC<{
</div> </div>
</td> </td>
<td className="px-6 py-4 text-center"> <td className="px-6 py-4 text-center">
<span className="text-sm font-black text-white">{item.actualUnits.toLocaleString('de-DE')}</span> <span className="text-sm font-black text-white">{(item.actualUnits || 0).toLocaleString('de-DE')}</span>
</td> </td>
<td className="px-6 py-4 text-center"> <td className="px-6 py-4 text-center">
<span className="text-sm font-black text-emerald-400">{item.forecastUnits.toLocaleString('de-DE')}</span> <span className="text-sm font-black text-emerald-400">{(item.forecastUnits || 0).toLocaleString('de-DE')}</span>
</td> </td>
<td className="px-6 py-4 text-center"> <td className="px-6 py-4 text-center">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<span className="text-sm font-black text-indigo-400">{Math.round(avgMonthly).toLocaleString('de-DE')}</span> <span className="text-sm font-black text-indigo-400">{(Math.round(avgMonthly) || 0).toLocaleString('de-DE')}</span>
<span className="text-[9px] text-slate-500 font-bold uppercase tracking-tighter">Peak: {Math.round(peakMonthly).toLocaleString('de-DE')}</span> <span className="text-[9px] text-slate-500 font-bold uppercase tracking-tighter">Peak: {(Math.round(peakMonthly) || 0).toLocaleString('de-DE')}</span>
</div> </div>
</td> </td>
<td className="px-6 py-4"> <td className="px-6 py-4">
<div className="h-10 w-full min-w-[120px]"> <div className="h-10 w-full min-w-[120px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<BarChart data={activeMonths.map(m => ({ name: m, units: item.monthlyData[m]?.units || 0 }))}> <BarChart data={activeMonths.map(m => ({ name: m, units: (item.monthlyData && item.monthlyData[m]?.units) || 0 }))}>
<Bar dataKey="units" fill="#6366f1" radius={[2, 2, 0, 0]} /> <Bar dataKey="units" fill="#6366f1" radius={[2, 2, 0, 0]} />
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
@@ -113,7 +112,7 @@ const ForecastRow: React.FC<{
); );
}); });
const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking, stockMap, stockFilter, onStockFilterChange, customerFilters, top50Mode }) => { const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking, stockMap, stockFilter, onStockFilterChange, top50Mode }) => {
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [showOnlyTop50, setShowOnlyTop50] = useState(false); const [showOnlyTop50, setShowOnlyTop50] = useState(false);
const [displayCount, setDisplayCount] = useState(50); const [displayCount, setDisplayCount] = useState(50);
@@ -184,14 +183,14 @@ const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking
<div className="p-2 bg-indigo-500/20 rounded-lg"><ChartIcon /></div> <div className="p-2 bg-indigo-500/20 rounded-lg"><ChartIcon /></div>
<span className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Global Actuals</span> <span className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Global Actuals</span>
</div> </div>
<div className="text-3xl font-black text-white tabular-nums">{globalSummary.actualUnits.toLocaleString('de-DE')}</div> <div className="text-3xl font-black text-white tabular-nums">{(globalSummary.actualUnits || 0).toLocaleString('de-DE')}</div>
</div> </div>
<div className="bg-slate-900/50 backdrop-blur-xl border border-white/10 p-5 rounded-2xl shadow-xl"> <div className="bg-slate-900/50 backdrop-blur-xl border border-white/10 p-5 rounded-2xl shadow-xl">
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-emerald-500/20 rounded-lg"><TrendingIcon /></div> <div className="p-2 bg-emerald-500/20 rounded-lg"><TrendingIcon /></div>
<span className="text-[10px] font-black text-emerald-400 uppercase tracking-widest">Global Forecast</span> <span className="text-[10px] font-black text-emerald-400 uppercase tracking-widest">Global Forecast</span>
</div> </div>
<div className="text-3xl font-black text-emerald-400 tabular-nums">{globalSummary.forecastUnits.toLocaleString('de-DE')}</div> <div className="text-3xl font-black text-emerald-400 tabular-nums">{(globalSummary.forecastUnits || 0).toLocaleString('de-DE')}</div>
</div> </div>
</div> </div>