feat: add Top 50 Only filter toggle button

- New toggle button in Weekly Sales toolbar to show only Top 50 products
- Button displays with trophy icon and golden gradient when active
- Resets pagination when toggled
- Works in combination with other filters (search, growth)
This commit is contained in:
Christian Vidal Wolf
2026-01-22 12:17:19 +01:00
parent 1c8ec7b835
commit 2d1f3703c2
+28 -3
View File
@@ -49,6 +49,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [growthFilterMode, setGrowthFilterMode] = useState<'all' | 'up' | 'down' | 'stable'>('all'); const [growthFilterMode, setGrowthFilterMode] = useState<'all' | 'up' | 'down' | 'stable'>('all');
const [growthThreshold, setGrowthThreshold] = useState(10); const [growthThreshold, setGrowthThreshold] = useState(10);
const [showOnlyTop50, setShowOnlyTop50] = useState(false);
// Default sort: most recent week, descending, units // Default sort: most recent week, descending, units
const [sortConfig, setSortConfig] = useState<SortConfig>(() => { const [sortConfig, setSortConfig] = useState<SortConfig>(() => {
@@ -61,7 +62,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
// Reset pagination when search changes // Reset pagination when search changes
useEffect(() => { useEffect(() => {
setCurrentPage(1); setCurrentPage(1);
}, [debouncedSearch]); }, [debouncedSearch, showOnlyTop50]);
const handleSort = useCallback((weekKey: string, metric: 'units' | 'spend') => { const handleSort = useCallback((weekKey: string, metric: 'units' | 'spend') => {
setSortConfig(prev => { setSortConfig(prev => {
@@ -89,10 +90,15 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
return totals; return totals;
}, [rows, weeks]); }, [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(() => { const filteredRows = useMemo(() => {
let result = rows; let result = rows;
// Top 50 Filter
if (showOnlyTop50 && top50Ranking) {
result = result.filter(r => top50Ranking.has(r.asin.trim().toUpperCase()));
}
// Search Filter // Search Filter
if (debouncedSearch) { if (debouncedSearch) {
const lowSearch = debouncedSearch.toLowerCase(); const lowSearch = debouncedSearch.toLowerCase();
@@ -131,7 +137,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
} }
return result; return result;
}, [rows, debouncedSearch, growthFilterMode, growthThreshold, sortConfig, weeks]); }, [rows, debouncedSearch, showOnlyTop50, top50Ranking, growthFilterMode, growthThreshold, sortConfig, weeks]);
// 2. Sort results // 2. Sort results
const sortedRows = useMemo(() => { const sortedRows = useMemo(() => {
@@ -239,6 +245,25 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
)} )}
</div> </div>
{/* Top 50 Filter Toggle */}
{top50Ranking && top50Ranking.size > 0 && (
<button
onClick={() => setShowOnlyTop50(!showOnlyTop50)}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold transition-all border ${showOnlyTop50
? 'bg-gradient-to-r from-amber-500 to-orange-500 text-white border-amber-400 shadow-lg shadow-amber-500/20'
: 'bg-slate-950/50 text-slate-400 border-white/10 hover:border-amber-500/50 hover:text-amber-400'
}`}
>
<span className="text-sm">🏆</span>
Top 50 Only
{showOnlyTop50 && (
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg>
)}
</button>
)}
{/* Export Button */} {/* Export Button */}
<button <button
onClick={handleExportExcel} onClick={handleExportExcel}