From 2d1f3703c27dc1a42fd94236ff66c9ac98e69bb3 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 22 Jan 2026 12:17:19 +0100
Subject: [PATCH] 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)
---
 components/WeeklyGrid.tsx | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

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<WeeklyGridProps> = ({ 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<SortConfig>(() => {
@@ -61,7 +62,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ 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<WeeklyGridProps> = ({ 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<WeeklyGridProps> = ({ 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<WeeklyGridProps> = ({ data, top50Ranking }) => {
                         )}
                     </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 */}
                     <button
                         onClick={handleExportExcel}