Fix: ensure Amazon stock badges are visible in Profitability and Top Movers tabs

This commit is contained in:
Christian Vidal Wolf
2026-04-27 11:25:09 +02:00
parent eadbaf3492
commit b01401272c
2 changed files with 35 additions and 6 deletions
+1 -1
View File
@@ -130,7 +130,7 @@ const MoversTable: React.FC<{
{/* Stock Badge */} {/* Stock Badge */}
<td className="px-6 py-3 text-center"> <td className="px-6 py-3 text-center">
<StockBadge stock={stockMap?.get(item.sku)} /> <StockBadge stock={stockMap?.get(item.sku?.replace(/(DE|EN)$/i, ''))} />
</td> </td>
{/* Vendor Stock Badge */} {/* Vendor Stock Badge */}
+32 -3
View File
@@ -2,17 +2,34 @@ import React, { useState, useMemo } from 'react';
import { Product } from './types'; import { Product } from './types';
import { formatCurrency, formatPercent, calculateProductMetrics, cn } from './utils'; import { formatCurrency, formatPercent, calculateProductMetrics, cn } from './utils';
import { ArrowUpDown, AlertCircle, ChevronUp, ChevronDown } from 'lucide-react'; import { ArrowUpDown, AlertCircle, ChevronUp, ChevronDown } from 'lucide-react';
import { StockBadge } from '../StockBadge';
import { VendorStockBadge } from '../VendorStockBadge';
import { BuyBoxWarningBadge } from '../BuyBoxWarningBadge';
interface MasterTableProps { interface MasterTableProps {
products: Product[]; products: Product[];
includeCOGS: boolean; includeCOGS: boolean;
onProductClick: (product: Product) => void; onProductClick: (product: Product) => void;
stockMap?: Map<string, number>;
vendorStockMap?: Map<string, { eu: number; uk: number }>;
top50Mode?: 'eu' | 'uk';
velocityMap?: Map<string, number>;
buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
} }
type SortKey = 'name' | 'grossSales' | 'ppcSpend' | 'deals' | 'promos' | 'chargebacks' | 'netMargin' | 'marginPercent'; type SortKey = 'name' | 'grossSales' | 'ppcSpend' | 'deals' | 'promos' | 'chargebacks' | 'netMargin' | 'marginPercent';
type SortOrder = 'asc' | 'desc'; type SortOrder = 'asc' | 'desc';
export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS, onProductClick }) => { export const MasterTable: React.FC<MasterTableProps> = ({
products,
includeCOGS,
onProductClick,
stockMap,
vendorStockMap,
top50Mode = 'eu',
velocityMap,
buyBoxLostMap
}) => {
const [sortKey, setSortKey] = useState<SortKey>('marginPercent'); const [sortKey, setSortKey] = useState<SortKey>('marginPercent');
const [sortOrder, setSortOrder] = useState<SortOrder>('asc'); const [sortOrder, setSortOrder] = useState<SortOrder>('asc');
@@ -172,9 +189,21 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
className="hover:bg-[#1A1E2A] transition-colors cursor-pointer group" className="hover:bg-[#1A1E2A] transition-colors cursor-pointer group"
onClick={() => onProductClick(product)} onClick={() => onProductClick(product)}
> >
<td className="px-6 py-4 whitespace-normal min-w-[250px] max-w-[300px]"> <td className="px-6 py-4 whitespace-normal min-w-[300px] max-w-[400px]">
<div className="font-medium text-slate-200 group-hover:text-indigo-400 transition-colors line-clamp-2" title={product.name}>{product.name}</div> <div className="font-medium text-slate-200 group-hover:text-indigo-400 transition-colors line-clamp-2" title={product.name}>{product.name}</div>
<div className="text-xs text-slate-500 font-mono mt-0.5">{product.sku} | {product.asin}</div> <div className="text-xs text-slate-500 font-mono mt-0.5 mb-2">{product.sku} | {product.asin}</div>
<div className="flex items-center gap-2">
{stockMap && (
<StockBadge stock={stockMap.get(product.sku?.replace(/(DE|EN)$/i, ''))} />
)}
<VendorStockBadge
asin={product.asin}
vendorStockMap={vendorStockMap}
mode={top50Mode}
avgWeeklySales={velocityMap?.get(product.asin.trim().toUpperCase())}
/>
<BuyBoxWarningBadge asin={product.asin} buyBoxLostMap={buyBoxLostMap} />
</div>
</td> </td>
<td className="px-6 py-4 text-right"> <td className="px-6 py-4 text-right">
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">