From 3de971801dec0b3e4cf1b0a6e6466fdf7a9344e6 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 26 Jan 2026 10:51:30 +0100
Subject: [PATCH] feat: add Top 50 filter button and badges to Ads Performance
 tab

---
 App.tsx                       |   2 +-
 components/AdsPerformance.tsx | 149 +++++++++++++++++++++++++++-------
 2 files changed, 122 insertions(+), 29 deletions(-)

diff --git a/App.tsx b/App.tsx
index 88056bc..bbe9711 100644
--- a/App.tsx
+++ b/App.tsx
@@ -531,7 +531,7 @@ const App: React.FC = () => {
                 {view === 'table' && <DataGrid data={combinedAdsData} hasCustomerFilter={filters.customer.length > 0} adsData={filteredAdsData} />}
                 {view === 'weekly' && <WeeklyGrid data={combinedAdsData} top50Ranking={top50Ranking2025} onDrillDown={handleSkuDrillDown} />}
                 {view === 'movers' && <TopMovers data={filteredData} />}
-                {view === 'ads' && <AdsPerformance data={combinedAdsData} filters={filters} />}
+                {view === 'ads' && <AdsPerformance data={combinedAdsData} filters={filters} top50Ranking={top50Ranking2025} />}
               </Suspense>
             </div>
           </>
diff --git a/components/AdsPerformance.tsx b/components/AdsPerformance.tsx
index 9f90397..82c0fee 100644
--- a/components/AdsPerformance.tsx
+++ b/components/AdsPerformance.tsx
@@ -4,12 +4,38 @@ import { CombinedKPIs, FilterState } from '../types';
 interface AdsPerformanceProps {
     data: CombinedKPIs[];
     filters: FilterState;
+    top50Ranking?: {
+        eu: Map<string, number>;
+        uk: Map<string, number>;
+    };
 }
 
 type SortKey = keyof CombinedKPIs | 'acos' | 'roas' | 'tacos' | 'ctr' | 'cpc' | 'cvrUnits';
 
-const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters }) => {
+// Top 50 Badge Component
+const Top50Badge: React.FC<{ rank: number; label?: string; theme?: 'amber' | 'blue' | 'indigo' }> = ({ rank, label, theme = 'amber' }) => {
+    const themeClasses = {
+        amber: 'from-amber-500 to-orange-500 border-amber-400/50',
+        blue: 'from-blue-500 to-cyan-500 border-blue-400/50',
+        indigo: 'from-indigo-500 to-purple-500 border-indigo-400/50',
+    };
+
+    return (
+        <span
+            className={`inline-flex items-center justify-center px-1.5 py-0.5 rounded text-[9px] font-black bg-gradient-to-r ${themeClasses[theme]} text-white shadow-sm border`}
+            title={`Top ${rank} Best Seller 2025 ${label ? `(${label})` : ''}`}
+        >
+            <span className="mr-0.5">🏆</span>
+            {label && <span className="mr-0.5 opacity-90">{label}</span>}
+            {rank}
+        </span>
+    );
+};
+
+const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters, top50Ranking }) => {
     const [searchTerm, setSearchTerm] = useState('');
+    const [showOnlyTop50, setShowOnlyTop50] = useState(false);
+    const [top50Mode, setTop50Mode] = useState<'eu' | 'uk'>('eu');
     const [sortConfig, setSortConfig] = useState<{ key: SortKey; direction: 'asc' | 'desc' }>({
         key: 'cost',
         direction: 'desc'
@@ -137,7 +163,22 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters }) => {
 
     // 3. Filter and Sort
     const filteredAndSorted = useMemo(() => {
-        let result = aggregatedByAsin.filter(item =>
+        let result = aggregatedByAsin;
+
+        // Top 50 Filter
+        if (showOnlyTop50 && top50Ranking) {
+            result = result.filter(item => {
+                const asin = item.asin.trim().toUpperCase();
+                if (top50Mode === 'eu') {
+                    return top50Ranking.eu.has(asin);
+                } else {
+                    return top50Ranking.uk.has(asin);
+                }
+            });
+        }
+
+        // Search Filter
+        result = result.filter(item =>
             item.asin.toLowerCase().includes(searchTerm.toLowerCase()) ||
             item.sku.toLowerCase().includes(searchTerm.toLowerCase()) ||
             item.title.toLowerCase().includes(searchTerm.toLowerCase())
@@ -150,7 +191,7 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters }) => {
         });
 
         return result;
-    }, [aggregatedByAsin, searchTerm, sortConfig]);
+    }, [aggregatedByAsin, searchTerm, sortConfig, showOnlyTop50, top50Ranking, top50Mode]);
 
     const handleSort = (key: SortKey) => {
         setSortConfig(prev => ({
@@ -213,6 +254,41 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters }) => {
                         </p>
                     </div>
                     <div className="flex items-center gap-4">
+                        {/* Top 50 Filter Toggle */}
+                        {top50Ranking && (
+                            (top50Ranking.eu.size || 0) > 0 ||
+                            (top50Ranking.uk.size || 0) > 0
+                        ) && (
+                                <div className="flex bg-slate-950/50 p-1 rounded-xl border border-white/10 shadow-sm">
+                                    <button
+                                        onClick={() => setShowOnlyTop50(!showOnlyTop50)}
+                                        className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${showOnlyTop50
+                                                ? 'bg-gradient-to-r from-amber-500 to-orange-500 text-white shadow-lg shadow-amber-500/20'
+                                                : 'text-slate-400 hover:text-amber-400'
+                                            }`}
+                                    >
+                                        <span className="text-sm">🏆</span>
+                                        Top 50
+                                    </button>
+
+                                    {showOnlyTop50 && (
+                                        <div className="flex ml-1 p-0.5 bg-slate-900 rounded-lg border border-white/5">
+                                            <button
+                                                onClick={() => setTop50Mode('eu')}
+                                                className={`px-2 py-1 rounded-md text-[10px] font-black uppercase tracking-widest transition-all ${top50Mode === 'eu' ? 'bg-indigo-500 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'}`}
+                                            >
+                                                EU
+                                            </button>
+                                            <button
+                                                onClick={() => setTop50Mode('uk')}
+                                                className={`px-2 py-1 rounded-md text-[10px] font-black uppercase tracking-widest transition-all ${top50Mode === 'uk' ? 'bg-blue-500 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'}`}
+                                            >
+                                                UK
+                                            </button>
+                                        </div>
+                                    )}
+                                </div>
+                            )}
                         <input
                             type="text"
                             placeholder="Search ASIN, SKU or Title..."
@@ -245,31 +321,48 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters }) => {
                             </tr>
                         </thead>
                         <tbody className="divide-y divide-white/[0.03]">
-                            {filteredAndSorted.map((row: any) => (
-                                <tr key={row.id} className="hover:bg-white/[0.02] transition-colors group">
-                                    <td className="p-4 py-3">
-                                        <div className="flex flex-col gap-0.5">
-                                            <span className="text-white font-bold text-sm tracking-tight">{row.asin}</span>
-                                            <span className="text-[10px] uppercase font-black text-indigo-400 tracking-tighter">SKU: {row.sku}</span>
-                                            <span className="text-[10px] text-slate-400 truncate max-w-[220px] leading-tight" title={row.title}>{row.title}</span>
-                                        </div>
-                                    </td>
-                                    <TableCell value={row.salesTotal} prevValue={row.prevData?.salesTotal} format="currency" />
-                                    <TableCell value={row.salesAds} prevValue={row.prevData?.salesAds} format="currency" />
-                                    <TableCell value={row.salesOrganic} prevValue={row.prevData?.salesOrganic} format="currency" />
-                                    <TableCell value={row.cost} prevValue={row.prevData?.cost} format="currency" />
-                                    <TableCell value={row.impressions} prevValue={row.prevData?.impressions} format="number" />
-                                    <TableCell value={row.clicks} prevValue={row.prevData?.clicks} format="number" />
-                                    <TableCell value={row.conversions} prevValue={row.prevData?.conversions} format="number" />
-                                    <TableCell value={row.cpc} prevValue={row.prevData?.cpc} format="number" prefix="$" inverse />
-                                    <TableCell value={row.ctr} prevValue={row.prevData?.ctr} format="percent" />
-                                    <TableCell value={row.cvrUnits} prevValue={row.prevData?.cvrUnits} format="percent" />
-                                    <TableCell value={row.acos} prevValue={row.prevData?.acos} format="percent" inverse />
-                                    <TableCell value={row.roas} prevValue={row.prevData?.roas} format="number" highlight />
-                                    <TableCell value={row.tacos} prevValue={row.prevData?.tacos} format="percent" inverse />
-                                    <TableCell value={row.glanceViews || 0} prevValue={row.prevData?.glanceViews} format="number" />
-                                </tr>
-                            ))}
+                            {filteredAndSorted.map((row: any) => {
+                                const asin = row.asin.trim().toUpperCase();
+                                const ranks: { rank: number; label: string; theme: 'amber' | 'blue' | 'indigo' }[] = [];
+
+                                if (top50Ranking) {
+                                    const euRank = top50Ranking.eu.get(asin);
+                                    const ukRank = top50Ranking.uk.get(asin);
+                                    if (euRank) ranks.push({ rank: euRank, label: 'EU', theme: 'indigo' });
+                                    if (ukRank) ranks.push({ rank: ukRank, label: 'UK', theme: 'blue' });
+                                }
+
+                                return (
+                                    <tr key={row.id} className="hover:bg-white/[0.02] transition-colors group">
+                                        <td className="p-4 py-3">
+                                            <div className="flex flex-col gap-0.5">
+                                                <div className="flex items-center gap-2">
+                                                    {ranks.map((r, i) => (
+                                                        <Top50Badge key={i} rank={r.rank} label={r.label} theme={r.theme} />
+                                                    ))}
+                                                    <span className="text-white font-bold text-sm tracking-tight">{row.asin}</span>
+                                                </div>
+                                                <span className="text-[10px] uppercase font-black text-indigo-400 tracking-tighter">SKU: {row.sku}</span>
+                                                <span className="text-[10px] text-slate-400 truncate max-w-[220px] leading-tight" title={row.title}>{row.title}</span>
+                                            </div>
+                                        </td>
+                                        <TableCell value={row.salesTotal} prevValue={row.prevData?.salesTotal} format="currency" />
+                                        <TableCell value={row.salesAds} prevValue={row.prevData?.salesAds} format="currency" />
+                                        <TableCell value={row.salesOrganic} prevValue={row.prevData?.salesOrganic} format="currency" />
+                                        <TableCell value={row.cost} prevValue={row.prevData?.cost} format="currency" />
+                                        <TableCell value={row.impressions} prevValue={row.prevData?.impressions} format="number" />
+                                        <TableCell value={row.clicks} prevValue={row.prevData?.clicks} format="number" />
+                                        <TableCell value={row.conversions} prevValue={row.prevData?.conversions} format="number" />
+                                        <TableCell value={row.cpc} prevValue={row.prevData?.cpc} format="number" prefix="$" inverse />
+                                        <TableCell value={row.ctr} prevValue={row.prevData?.ctr} format="percent" />
+                                        <TableCell value={row.cvrUnits} prevValue={row.prevData?.cvrUnits} format="percent" />
+                                        <TableCell value={row.acos} prevValue={row.prevData?.acos} format="percent" inverse />
+                                        <TableCell value={row.roas} prevValue={row.prevData?.roas} format="number" highlight />
+                                        <TableCell value={row.tacos} prevValue={row.prevData?.tacos} format="percent" inverse />
+                                        <TableCell value={row.glanceViews || 0} prevValue={row.prevData?.glanceViews} format="number" />
+                                    </tr>
+                                );
+                            })}
                         </tbody>
                     </table>
                 </div>