Fix: restore Top50 ranking badges (white/gradient) next to inventory badges across all views

This commit is contained in:
Christian Vidal Wolf
2026-04-27 11:33:07 +02:00
parent 9f8e51e2f3
commit 99e4b2c34b
8 changed files with 113 additions and 6 deletions
+17 -1
View File
@@ -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}