diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx index 3a15ce5..9851e9f 100644 --- a/components/WeeklyGrid.tsx +++ b/components/WeeklyGrid.tsx @@ -19,7 +19,6 @@ const WeeklyGrid: React.FC = ({ data }) => { const [searchTerm, setSearchTerm] = useState(''); const [currentPage, setCurrentPage] = useState(1); - const [activeMetric, setActiveMetric] = useState<'units' | 'spend'>('units'); // Default sort: most recent week, descending, units const [sortConfig, setSortConfig] = useState(() => { @@ -34,14 +33,14 @@ const WeeklyGrid: React.FC = ({ data }) => { setCurrentPage(1); }, [searchTerm]); - const handleSort = (weekKey: string) => { + const handleSort = (weekKey: string, metric: 'units' | 'spend') => { setSortConfig(prev => { - if (prev?.key === weekKey && prev.metric === activeMetric) { - // Just toggle direction if already sorting by this week and metric - return { key: weekKey, direction: prev.direction === 'asc' ? 'desc' : 'asc', metric: activeMetric }; + if (prev?.key === weekKey && prev.metric === metric) { + // Toggle direction if same week & same metric + return { key: weekKey, direction: prev.direction === 'asc' ? 'desc' : 'asc', metric }; } - // Start fresh with DESC for the current active metric - return { key: weekKey, direction: 'desc', metric: activeMetric }; + // Switch to new week/metric with default DESC + return { key: weekKey, direction: 'desc', metric }; }); }; @@ -81,7 +80,7 @@ const WeeklyGrid: React.FC = ({ data }) => { const totalPages = Math.ceil(sortedRows.length / ROWS_PER_PAGE); - // Calculate totals per week (always based on full filtered dataset, not just page) + // Calculate totals per week const weekTotals = useMemo(() => { const totals: { [weekKey: string]: { units: number, spend: number } } = {}; weeks.forEach(week => { @@ -108,36 +107,19 @@ const WeeklyGrid: React.FC = ({ data }) => { return (
- {/* Toolbar: Search & Metric Toggle & Pagination */} + {/* Toolbar: Search & Pagination */}
-
-
- setSearchTerm(e.target.value)} - className="w-full bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-base text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10" - /> - - - -
- -
- - -
+
+ setSearchTerm(e.target.value)} + className="w-full bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-base text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10" + /> + + +
@@ -175,18 +157,35 @@ const WeeklyGrid: React.FC = ({ data }) => { {weeks.map(week => ( handleSort(week)} + className={`p-0 text-[10px] font-black uppercase tracking-widest text-center border-r border-white/10 min-w-[130px] transition-colors select-none ${sortConfig?.key === week ? 'bg-white/[0.02]' : ''}`} > -
- {week.split('-')[1]}/{week.split('-')[0].slice(-2)} - {sortConfig?.key === week && ( -
- {sortConfig.direction === 'asc' ? '↑' : '↓'} - {sortConfig.metric} -
- )} -
Units / Spend
+
+ {/* Week Label */} +
+ {week.split('-')[1]}/{week.split('-')[0].slice(-2)} +
+ + {/* Units Sort Trigger */} +
handleSort(week, 'units')} + className={`flex-1 p-1.5 cursor-pointer hover:bg-indigo-500/10 transition-colors flex items-center justify-center gap-1 border-b border-white/5 ${sortConfig?.key === week && sortConfig.metric === 'units' ? 'bg-indigo-500/5 text-indigo-400' : 'text-slate-500 hover:text-slate-300'}`} + > + Units + {sortConfig?.key === week && sortConfig.metric === 'units' && ( + {sortConfig.direction === 'asc' ? '↑' : '↓'} + )} +
+ + {/* Spend Sort Trigger */} +
handleSort(week, 'spend')} + className={`flex-1 p-1.5 cursor-pointer hover:bg-amber-500/10 transition-colors flex items-center justify-center gap-1 ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'bg-amber-500/5 text-amber-400' : 'text-slate-500 hover:text-slate-300'}`} + > + Spend + {sortConfig?.key === week && sortConfig.metric === 'spend' && ( + {sortConfig.direction === 'asc' ? '↑' : '↓'} + )} +
))} @@ -200,7 +199,7 @@ const WeeklyGrid: React.FC = ({ data }) => { {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 })}
@@ -233,7 +232,7 @@ const WeeklyGrid: React.FC = ({ data }) => { {val > 0 && renderGrowth(val, prevVal)}
{spend > 0 && ( - + €{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} )}