diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx index 35f437e..5563730 100644 --- a/components/WeeklyGrid.tsx +++ b/components/WeeklyGrid.tsx @@ -31,14 +31,11 @@ const WeeklyGrid: React.FC = ({ data }) => { }); }; - // Group and Sort rows - const groupedRows = useMemo(() => { - const groups: { [line: string]: WeeklyPivotRow[] } = {}; - - // Clone and sort rows based on config - const sortedRows = [...rows]; + // Sort rows globally (Ungrouped) + const sortedRows = useMemo(() => { + const result = [...rows]; if (sortConfig) { - sortedRows.sort((a, b) => { + result.sort((a, b) => { const valA = a.unitsByWeek[sortConfig.key] || 0; const valB = b.unitsByWeek[sortConfig.key] || 0; if (sortConfig.direction === 'asc') { @@ -47,25 +44,18 @@ const WeeklyGrid: React.FC = ({ data }) => { return valB - valA; }); } - - sortedRows.forEach(row => { - const line = row.line || 'Uncategorized'; - if (!groups[line]) groups[line] = []; - groups[line].push(row); - }); - - // Sort lines alphabetically - return Object.keys(groups).sort().reduce((acc, line) => { - acc[line] = groups[line]; - return acc; - }, {} as { [line: string]: WeeklyPivotRow[] }); + return result; }, [rows, sortConfig]); // Calculate totals per week const weekTotals = useMemo(() => { - const totals: { [weekKey: string]: number } = {}; + const totals: { [weekKey: string]: { units: number, spend: number } } = {}; weeks.forEach(week => { - totals[week] = rows.reduce((sum, row) => sum + (row.unitsByWeek[week] || 0), 0); + totals[week] = rows.reduce((acc, row) => { + acc.units += (row.unitsByWeek[week] || 0); + acc.spend += (row.spendByWeek[week] || 0); + return acc; + }, { units: 0, spend: 0 }); }); return totals; }, [rows, weeks]); @@ -76,9 +66,9 @@ const WeeklyGrid: React.FC = ({ data }) => { const isPositive = pct >= 0; return ( -
+ {isPositive ? '▲' : '▼'}{Math.abs(pct).toFixed(0)}% -
+ ); }; @@ -92,14 +82,15 @@ const WeeklyGrid: React.FC = ({ data }) => { {weeks.map(week => ( handleSort(week)} > -
+
{week.split('-')[1]}/{week.split('-')[0].slice(-2)} {sortConfig?.key === week && ( {sortConfig.direction === 'asc' ? '↑' : '↓'} )} +
Units / Spend
))} @@ -109,47 +100,51 @@ const WeeklyGrid: React.FC = ({ data }) => { {weeks.map((week, idx) => (
- {weekTotals[week]?.toLocaleString('de-DE')} - {renderGrowth(weekTotals[week], weekTotals[weeks[idx + 1]])} +
+ {weekTotals[week].units.toLocaleString('de-DE')} + {renderGrowth(weekTotals[week].units, weekTotals[weeks[idx + 1]]?.units)} +
+
+ €{weekTotals[week].spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} +
))} - {Object.entries(groupedRows).map(([line, lineRows]) => ( - - {/* Category Header */} - - - {line} - - - {lineRows.map((row) => ( - - -
- {row.sku} - {row.title} + {sortedRows.map((row) => ( + + +
+ {row.sku} + {row.title} + {row.line} +
+ + {weeks.map((week, idx) => { + const val = row.unitsByWeek[week] || 0; + const prevVal = row.unitsByWeek[weeks[idx + 1]] || 0; + const spend = row.spendByWeek[week] || 0; + return ( + +
+
+ 0 ? (sortConfig?.key === week ? 'text-indigo-400' : 'text-white') : 'text-slate-700'}`}> + {val > 0 ? val.toLocaleString('de-DE') : '-'} + + {val > 0 && renderGrowth(val, prevVal)} +
+ {spend > 0 && ( + + €{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} + + )}
- {weeks.map((week, idx) => { - const val = row.unitsByWeek[week] || 0; - const prevVal = row.unitsByWeek[weeks[idx + 1]] || 0; - return ( - -
- 0 ? (sortConfig?.key === week ? 'text-indigo-400' : 'text-white') : 'text-slate-700'}`}> - {val > 0 ? val.toLocaleString('de-DE') : '-'} - - {val > 0 && renderGrowth(val, prevVal)} -
- - ); - })} - - ))} - + ); + })} + ))} diff --git a/services/dataProcessor.ts b/services/dataProcessor.ts index 63389af..fb64633 100644 --- a/services/dataProcessor.ts +++ b/services/dataProcessor.ts @@ -1262,11 +1262,12 @@ export interface WeeklyPivotRow { line: string; customer: string; unitsByWeek: { [weekKey: string]: number }; // Key: "YYYY-WW" + spendByWeek: { [weekKey: string]: number }; // Key: "YYYY-WW" } -export const pivotWeeklySalesData = (data: CombinedKPIs[]): { - rows: WeeklyPivotRow[], - weeks: string[] +export const pivotWeeklySalesData = (data: CombinedKPIs[]): { + rows: WeeklyPivotRow[], + weeks: string[] } => { // 1. Identify all unique weeks and sort descending (YYYY-WW) const weekKeys = new Set(); @@ -1292,7 +1293,8 @@ export const pivotWeeklySalesData = (data: CombinedKPIs[]): { asin: record.asin || '', line: record.line || '', customer: record.customer || record.marketplace || '', - unitsByWeek: {} + unitsByWeek: {}, + spendByWeek: {} }); } @@ -1300,6 +1302,7 @@ export const pivotWeeklySalesData = (data: CombinedKPIs[]): { if (record.week) { const weekKey = `${record.year}-${String(record.week).padStart(2, '0')}`; row.unitsByWeek[weekKey] = (row.unitsByWeek[weekKey] || 0) + record.unitsTotal; + row.spendByWeek[weekKey] = (row.spendByWeek[weekKey] || 0) + (record.cost || 0); } });