Fix: remove duplicated Top50 ranking badges, keep only leftmost instance

This commit is contained in:
Christian Vidal Wolf
2026-04-27 11:44:17 +02:00
parent 1fc494fc3f
commit e7f48af099
2 changed files with 3 additions and 15 deletions
+3 -3
View File
@@ -1374,7 +1374,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
<tbody className="divide-y divide-border text-slate-300"> <tbody className="divide-y divide-border text-slate-300">
{paginatedRows.map((row) => ( {paginatedRows.map((row) => (
<tr key={row.id} className="hover:bg-slate-800/50 transition-colors group relative hover:z-50"> <tr key={row.id} className="hover:bg-slate-800/50 transition-colors group relative hover:z-50">
{effectiveDimensions.map(dim => ( {effectiveDimensions.map((dim, dimIdx) => (
<td key={dim} className="px-2.5 py-3 font-medium text-slate-200 break-words max-w-xs"> <td key={dim} className="px-2.5 py-3 font-medium text-slate-200 break-words max-w-xs">
{dim === 'title' {dim === 'title'
? <div className="flex items-start gap-2 max-w-sm relative group/title"> ? <div className="flex items-start gap-2 max-w-sm relative group/title">
@@ -1387,7 +1387,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
{stockMap && ( {stockMap && (
<StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} /> <StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />
)} )}
{(() => { {dimIdx === 0 && (() => {
const asin = (row.asin || '').trim().toUpperCase(); const asin = (row.asin || '').trim().toUpperCase();
if (asin && top50Ranking) { if (asin && top50Ranking) {
if (top50Mode === 'eu') { if (top50Mode === 'eu') {
@@ -1411,7 +1411,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
</div> </div>
: dim === 'asin' || dim === 'sku' : dim === 'asin' || dim === 'sku'
? <div className="flex items-center gap-2 min-w-max"> ? <div className="flex items-center gap-2 min-w-max">
{(() => { {dimIdx === 0 && (() => {
const asin = (row.asin || '').trim().toUpperCase(); const asin = (row.asin || '').trim().toUpperCase();
if (asin && top50Ranking) { if (asin && top50Ranking) {
if (top50Mode === 'eu') { if (top50Mode === 'eu') {
-12
View File
@@ -125,18 +125,6 @@ export const WeeklyRow: React.FC<WeeklyRowProps> = React.memo(({
avgWeeklySales={velocityMap?.get(asin)} avgWeeklySales={velocityMap?.get(asin)}
internalStock={stockMap?.get(row.sku?.replace(/(DE|EN)$/i, ''))} internalStock={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} /> <BuyBoxWarningBadge asin={asin} buyBoxLostMap={buyBoxLostMap} />
{experimentMap && ( {experimentMap && (
<ExperimentBadge <ExperimentBadge