diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx index 4e4a6d3..6f7123f 100644 --- a/components/WeeklyGrid.tsx +++ b/components/WeeklyGrid.tsx @@ -49,6 +49,7 @@ const WeeklyGrid: React.FC = ({ data, top50Ranking }) => { const [currentPage, setCurrentPage] = useState(1); const [growthFilterMode, setGrowthFilterMode] = useState<'all' | 'up' | 'down' | 'stable'>('all'); const [growthThreshold, setGrowthThreshold] = useState(10); + const [showOnlyTop50, setShowOnlyTop50] = useState(false); // Default sort: most recent week, descending, units const [sortConfig, setSortConfig] = useState(() => { @@ -61,7 +62,7 @@ const WeeklyGrid: React.FC = ({ data, top50Ranking }) => { // Reset pagination when search changes useEffect(() => { setCurrentPage(1); - }, [debouncedSearch]); + }, [debouncedSearch, showOnlyTop50]); const handleSort = useCallback((weekKey: string, metric: 'units' | 'spend') => { setSortConfig(prev => { @@ -89,10 +90,15 @@ const WeeklyGrid: React.FC = ({ data, top50Ranking }) => { return totals; }, [rows, weeks]); - // 1. Filter by search term (using debounced value) + // 1. Filter by search term, Top 50, and growth (using debounced value) const filteredRows = useMemo(() => { let result = rows; + // Top 50 Filter + if (showOnlyTop50 && top50Ranking) { + result = result.filter(r => top50Ranking.has(r.asin.trim().toUpperCase())); + } + // Search Filter if (debouncedSearch) { const lowSearch = debouncedSearch.toLowerCase(); @@ -131,7 +137,7 @@ const WeeklyGrid: React.FC = ({ data, top50Ranking }) => { } return result; - }, [rows, debouncedSearch, growthFilterMode, growthThreshold, sortConfig, weeks]); + }, [rows, debouncedSearch, showOnlyTop50, top50Ranking, growthFilterMode, growthThreshold, sortConfig, weeks]); // 2. Sort results const sortedRows = useMemo(() => { @@ -239,6 +245,25 @@ const WeeklyGrid: React.FC = ({ data, top50Ranking }) => { )} + {/* Top 50 Filter Toggle */} + {top50Ranking && top50Ranking.size > 0 && ( + + )} + {/* Export Button */}