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 */}
<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>
{/* Vendor Stock Badge */}
+34 -5
View File
@@ -2,17 +2,34 @@ import React, { useState, useMemo } from 'react';
import { Product } from './types';
import { formatCurrency, formatPercent, calculateProductMetrics, cn } from './utils';
import { ArrowUpDown, AlertCircle, ChevronUp, ChevronDown } from 'lucide-react';
import { StockBadge } from '../StockBadge';
import { VendorStockBadge } from '../VendorStockBadge';
import { BuyBoxWarningBadge } from '../BuyBoxWarningBadge';
interface MasterTableProps {
products: Product[];
includeCOGS: boolean;
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 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 [sortOrder, setSortOrder] = useState<SortOrder>('asc');
@@ -172,10 +189,22 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
className="hover:bg-[#1A1E2A] transition-colors cursor-pointer group"
onClick={() => onProductClick(product)}
>
<td className="px-6 py-4 whitespace-normal min-w-[250px] max-w-[300px]">
<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>
</td>
<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="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 className="px-6 py-4 text-right">
<div className="flex flex-col items-end">
<span className="font-medium text-slate-200">{formatCurrency(product.grossSales)}</span>