From 99e4b2c34bf19e065a85d3f55e9a864a6ebd1faf Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 27 Apr 2026 11:33:04 +0200
Subject: [PATCH] Fix: restore Top50 ranking badges (white/gradient) next to
 inventory badges across all views

---
 App.tsx                        |  4 ++++
 components/Dashboard.tsx       | 17 ++++++++++++++++-
 components/DataGrid.tsx        | 13 +++++++++++++
 components/TopMovers.tsx       | 32 ++++++++++++++++++++++++++++++--
 components/VendorDataView.tsx  | 18 +++++++++++++++++-
 components/WeeklyRow.tsx       | 12 ++++++++++++
 components/mkt/MasterTable.tsx | 18 +++++++++++++++++-
 components/mkt/MktDataView.tsx |  5 ++++-
 8 files changed, 113 insertions(+), 6 deletions(-)

diff --git a/App.tsx b/App.tsx
index fe4c843..0b5db49 100644
--- a/App.tsx
+++ b/App.tsx
@@ -860,6 +860,8 @@ const App: React.FC = () => {
                   buyBoxLostMap={buyBoxLostMap}
                   top50Mode={top50Mode}
                   rawData={ytdFilteredData}
+                  velocityMap={velocityMap}
+                  top50Ranking={top50Ranking2025}
                 />
               </div>
 
@@ -957,6 +959,7 @@ const App: React.FC = () => {
                     vendorStockMap={vendorStockMap}
                     top50Mode={filters.customer.includes('Amazon UK') ? 'uk' : 'eu'}
                     velocityMap={velocityMap}
+                    top50Ranking={top50Ranking2025}
                   />
                 </div>
               </Suspense>
@@ -980,6 +983,7 @@ const App: React.FC = () => {
                     top50Mode={filters.customer.includes('Amazon UK') ? 'uk' : 'eu'}
                     velocityMap={velocityMap}
                     buyBoxLostMap={buyBoxLostMap}
+                    top50Ranking={top50Ranking2025}
                   />
                 </div>
               </Suspense>
diff --git a/components/Dashboard.tsx b/components/Dashboard.tsx
index d47feb4..1160732 100644
--- a/components/Dashboard.tsx
+++ b/components/Dashboard.tsx
@@ -16,6 +16,8 @@ interface DashboardProps {
     vendorStockMap?: Map<string, { eu: number; uk: number }>;
     buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
     top50Mode?: 'eu' | 'uk';
+    top50Ranking?: { eu: Map<string, number>; uk: Map<string, number> };
+    velocityMap?: Map<string, number>;
 }
 
 const COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6', '#0ea5e9'];
@@ -463,7 +465,18 @@ const GrowthTable: React.FC<{
     );
 }
 
-const Dashboard: React.FC<DashboardProps> = ({ data, contextData, adsData = [], rawData = [], stockMap, vendorStockMap, buyBoxLostMap, top50Mode }) => {
+const Dashboard: React.FC<DashboardProps> = ({ 
+    data, 
+    contextData, 
+    adsData = [], 
+    rawData = [], 
+    stockMap, 
+    vendorStockMap, 
+    buyBoxLostMap, 
+    top50Mode = 'eu',
+    top50Ranking,
+    velocityMap
+}) => {
     const [seasonalityMetric, setSeasonalityMetric] = useState<'sellOut' | 'units'>('sellOut');
     const [top10Metric, setTop10Metric] = useState<'sellOut' | 'units'>('sellOut');
 
@@ -824,6 +837,8 @@ const Dashboard: React.FC<DashboardProps> = ({ data, contextData, adsData = [],
                         vendorStockMap={vendorStockMap}
                         buyBoxLostMap={buyBoxLostMap}
                         top50Mode={top50Mode}
+                        velocityMap={velocityMap}
+                        top50Ranking={top50Ranking}
                     />
                 </div>
             )}
diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index ecf75ed..684505d 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -1387,6 +1387,19 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
                                                 {stockMap && (
                                                     <StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />
                                                 )}
+                                                {(() => {
+                                                    const asin = (row.asin || '').trim().toUpperCase();
+                                                    if (asin && top50Ranking) {
+                                                        if (top50Mode === 'eu') {
+                                                            const rank = top50Ranking.eu.get(asin);
+                                                            if (rank) return <Top50Badge rank={rank} label="EU" theme="indigo" />;
+                                                        } else {
+                                                            const rank = top50Ranking.uk.get(asin);
+                                                            if (rank) return <Top50Badge rank={rank} label="UK" theme="blue" />;
+                                                        }
+                                                    }
+                                                    return null;
+                                                })()}
                                                 <VendorStockBadge asin={row.asin} vendorStockMap={vendorStockMap} mode={top50Mode} avgWeeklySales={velocityMap?.get(row.asin.trim().toUpperCase())} />
                                                 <BuyBoxWarningBadge asin={row.asin} buyBoxLostMap={buyBoxLostMap} />
                                             </div>
diff --git a/components/TopMovers.tsx b/components/TopMovers.tsx
index 4071921..c468060 100644
--- a/components/TopMovers.tsx
+++ b/components/TopMovers.tsx
@@ -4,6 +4,7 @@ import { SalesRecord } from '../types';
 import { DownloadIcon } from './Icons';
 import { StockBadge } from './StockBadge';
 import { VendorStockBadge } from './VendorStockBadge';
+import { Top50Badge } from './Top50Badge';
 import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
 
 interface TopMoversProps {
@@ -12,6 +13,8 @@ interface TopMoversProps {
   vendorStockMap?: Map<string, { eu: number; uk: number }>;
   buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
   top50Mode?: 'eu' | 'uk';
+  velocityMap?: Map<string, number>;
+  top50Ranking?: { eu: Map<string, number>; uk: Map<string, number> };
 }
 
 type Metric = 'sellOut' | 'units';
@@ -39,7 +42,9 @@ const MoversTable: React.FC<{
   vendorStockMap?: Map<string, { eu: number; uk: number }>;
   buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
   top50Mode?: 'eu' | 'uk';
-}> = ({ title, data, metric, previousYear, currentYear, type, stockMap, vendorStockMap, buyBoxLostMap, top50Mode = 'eu' }) => {
+  velocityMap?: Map<string, number>;
+  top50Ranking?: { eu: Map<string, number>; uk: Map<string, number> };
+}> = ({ title, data, metric, previousYear, currentYear, type, stockMap, vendorStockMap, buyBoxLostMap, top50Mode = 'eu', velocityMap, top50Ranking }) => {
 
   const formatValue = (val: number) => {
     if (metric === 'sellOut') return `€${val.toLocaleString('de-DE', { maximumFractionDigits: 0 })}`;
@@ -131,6 +136,19 @@ const MoversTable: React.FC<{
                   {/* Stock Badge */}
                   <td className="px-6 py-3 text-center">
                     <StockBadge stock={stockMap?.get(item.sku?.replace(/(DE|EN)$/i, ''))} />
+                    {(() => {
+                        const asin = item.asin.trim().toUpperCase();
+                        if (asin && top50Ranking) {
+                            if (top50Mode === 'eu') {
+                                const rank = top50Ranking.eu.get(asin);
+                                if (rank) return <Top50Badge rank={rank} label="EU" theme="indigo" />;
+                            } else {
+                                const rank = top50Ranking.uk.get(asin);
+                                if (rank) return <Top50Badge rank={rank} label="UK" theme="blue" />;
+                            }
+                        }
+                        return null;
+                    })()}
                   </td>
 
                   {/* Vendor Stock Badge */}
@@ -182,7 +200,15 @@ const MoversTable: React.FC<{
   );
 };
 
-const TopMovers: React.FC<TopMoversProps> = ({ data, stockMap, vendorStockMap, buyBoxLostMap, top50Mode = 'eu' }) => {
+const TopMovers: React.FC<TopMoversProps> = ({ 
+  data, 
+  stockMap, 
+  vendorStockMap, 
+  buyBoxLostMap, 
+  top50Mode = 'eu', 
+  velocityMap, 
+  top50Ranking 
+}) => {
   const [metric, setMetric] = useState<Metric>('sellOut');
   const [viewMode, setViewMode] = useState<'growth' | 'decline'>('growth');
 
@@ -336,6 +362,8 @@ const TopMovers: React.FC<TopMoversProps> = ({ data, stockMap, vendorStockMap, b
         vendorStockMap={vendorStockMap}
         buyBoxLostMap={buyBoxLostMap}
         top50Mode={top50Mode}
+        velocityMap={velocityMap}
+        top50Ranking={top50Ranking}
       />
 
     </div>
diff --git a/components/VendorDataView.tsx b/components/VendorDataView.tsx
index 3cb20e2..c35bfb3 100644
--- a/components/VendorDataView.tsx
+++ b/components/VendorDataView.tsx
@@ -4,6 +4,7 @@ import { BSRRecord, CombinedKPIs } from '../types';
 import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
 import { StockBadge } from './StockBadge';
 import { VendorStockBadge } from './VendorStockBadge';
+import { Top50Badge } from './Top50Badge';
 import { BSRUnitsCorrelationChart } from './BSRUnitsCorrelationChart';
 
 interface VendorDataViewProps {
@@ -15,6 +16,7 @@ interface VendorDataViewProps {
   vendorStockMap?: Map<string, { eu: number; uk: number }>;
   top50Mode?: 'eu' | 'uk';
   velocityMap?: Map<string, number>;
+  top50Ranking?: { eu: Map<string, number>; uk: Map<string, number> };
 }
 
 interface ChartPoint {
@@ -320,7 +322,8 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({
   stockMap,
   vendorStockMap,
   top50Mode = 'eu',
-  velocityMap
+  velocityMap,
+  top50Ranking
 }) => {
   const activeMarkets = useMemo(() => {
     const m = new Set(bsrData.map(r => r.market));
@@ -481,6 +484,19 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({
                 {stockMap && (
                   <StockBadge stock={stockMap.get(productInfo.sku?.replace(/(DE|EN)$/i, ''))} />
                 )}
+                {(() => {
+                  const asin = productInfo.asin.trim().toUpperCase();
+                  if (asin && top50Ranking) {
+                    if (top50Mode === 'eu') {
+                      const rank = top50Ranking.eu.get(asin);
+                      if (rank) return <Top50Badge rank={rank} label="EU" theme="indigo" />;
+                    } else {
+                      const rank = top50Ranking.uk.get(asin);
+                      if (rank) return <Top50Badge rank={rank} label="UK" theme="blue" />;
+                    }
+                  }
+                  return null;
+                })()}
                 <VendorStockBadge 
                   asin={productInfo.asin} 
                   vendorStockMap={vendorStockMap} 
diff --git a/components/WeeklyRow.tsx b/components/WeeklyRow.tsx
index 9c65524..15cc5fe 100644
--- a/components/WeeklyRow.tsx
+++ b/components/WeeklyRow.tsx
@@ -118,6 +118,18 @@ export const WeeklyRow: React.FC<WeeklyRowProps> = React.memo(({
                         {stockMap && (
                             <StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />
                         )}
+                        {(() => {
+                            if (asin && top50Ranking) {
+                                if (top50Mode === 'eu') {
+                                    const rank = top50Ranking.eu.get(asin);
+                                    if (rank) return <Top50Badge rank={rank} label="EU" theme="indigo" />;
+                                } else {
+                                    const rank = top50Ranking.uk.get(asin);
+                                    if (rank) return <Top50Badge rank={rank} label="UK" theme="blue" />;
+                                }
+                            }
+                            return null;
+                        })()}
                         <BuyBoxWarningBadge asin={asin} buyBoxLostMap={buyBoxLostMap} />
                         {experimentMap && (
                             <ExperimentBadge
diff --git a/components/mkt/MasterTable.tsx b/components/mkt/MasterTable.tsx
index a570e27..6d7a009 100644
--- a/components/mkt/MasterTable.tsx
+++ b/components/mkt/MasterTable.tsx
@@ -5,6 +5,7 @@ import { ArrowUpDown, AlertCircle, ChevronUp, ChevronDown } from 'lucide-react';
 import { StockBadge } from '../StockBadge';
 import { VendorStockBadge } from '../VendorStockBadge';
 import { BuyBoxWarningBadge } from '../BuyBoxWarningBadge';
+import { Top50Badge } from '../Top50Badge';
 
 interface MasterTableProps {
   products: Product[];
@@ -15,6 +16,7 @@ interface MasterTableProps {
   top50Mode?: 'eu' | 'uk';
   velocityMap?: Map<string, number>;
   buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
+  top50Ranking?: { eu: Map<string, number>; uk: Map<string, number> };
 }
 
 type SortKey = 'name' | 'grossSales' | 'ppcSpend' | 'deals' | 'promos' | 'chargebacks' | 'netMargin' | 'marginPercent';
@@ -28,7 +30,8 @@ export const MasterTable: React.FC<MasterTableProps> = ({
   vendorStockMap,
   top50Mode = 'eu',
   velocityMap,
-  buyBoxLostMap
+  buyBoxLostMap,
+  top50Ranking
 }) => {
   const [sortKey, setSortKey] = useState<SortKey>('marginPercent');
   const [sortOrder, setSortOrder] = useState<SortOrder>('asc');
@@ -196,6 +199,19 @@ export const MasterTable: React.FC<MasterTableProps> = ({
                         {stockMap && (
                           <StockBadge stock={stockMap.get(product.sku?.replace(/(DE|EN)$/i, ''))} />
                         )}
+                        {(() => {
+                          const asin = product.asin.trim().toUpperCase();
+                          if (asin && top50Ranking) {
+                            if (top50Mode === 'eu') {
+                              const rank = top50Ranking.eu.get(asin);
+                              if (rank) return <Top50Badge rank={rank} label="EU" theme="indigo" />;
+                            } else {
+                              const rank = top50Ranking.uk.get(asin);
+                              if (rank) return <Top50Badge rank={rank} label="UK" theme="blue" />;
+                            }
+                          }
+                          return null;
+                        })()}
                         <VendorStockBadge 
                           asin={product.asin} 
                           vendorStockMap={vendorStockMap} 
diff --git a/components/mkt/MktDataView.tsx b/components/mkt/MktDataView.tsx
index 2c23aaa..0f43040 100644
--- a/components/mkt/MktDataView.tsx
+++ b/components/mkt/MktDataView.tsx
@@ -95,6 +95,7 @@ interface MktDataViewProps {
   top50Mode?: 'eu' | 'uk';
   velocityMap?: Map<string, number>;
   buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
+  top50Ranking?: { eu: Map<string, number>; uk: Map<string, number> };
 }
 
 export default function MktDataView({ 
@@ -104,7 +105,8 @@ export default function MktDataView({
   vendorStockMap,
   top50Mode = 'eu',
   velocityMap,
-  buyBoxLostMap
+  buyBoxLostMap,
+  top50Ranking
 }: MktDataViewProps) {
   const [includeCOGS, setIncludeCOGS] = useState(true);
   const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
@@ -332,6 +334,7 @@ export default function MktDataView({
           top50Mode={top50Mode}
           velocityMap={velocityMap}
           buyBoxLostMap={buyBoxLostMap}
+          top50Ranking={top50Ranking}
         />
       </div>