Add Buy Box Lost detection feature with visual warning badges

This commit is contained in:
Christian Vidal Wolf
2026-01-29 09:42:39 +01:00
parent e4fbdb60b1
commit 04b208969d
7 changed files with 138 additions and 8 deletions
+9 -2
View File
@@ -6,6 +6,7 @@ import { StockBadge } from './StockBadge';
import { InColumnStockFilter } from './InColumnStockFilter';
import { Top50Badge } from './Top50Badge';
import { VendorStockBadge } from './VendorStockBadge';
import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
import { WarehouseIcon, AmazonSmileIcon, CoverageIcon } from './Icons';
interface WeeklyGridProps {
@@ -25,6 +26,8 @@ interface WeeklyGridProps {
wocFilter: string[];
onWocFilterChange: (newFilters: string[]) => void;
velocityMap?: Map<string, number>;
buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
top50Mode?: 'eu' | 'uk';
}
type SortConfig = {
@@ -58,7 +61,8 @@ const WeeklyRow: React.FC<{
customerFilters: string[];
vendorStockMap?: Map<string, { eu: number; uk: number }>;
velocityMap?: Map<string, number>;
}> = React.memo(({ row, weeks, onDrillDown, stockMap, top50Ranking, top50Mode, sortConfig, renderGrowth, customerFilters, vendorStockMap, velocityMap }) => {
buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
}> = React.memo(({ row, weeks, onDrillDown, stockMap, top50Ranking, top50Mode, sortConfig, renderGrowth, customerFilters, vendorStockMap, velocityMap, buyBoxLostMap }) => {
const ranks: { rank: number; label: string; theme: 'amber' | 'blue' | 'indigo' }[] = [];
const asin = row.asin.trim().toUpperCase();
@@ -101,6 +105,7 @@ const WeeklyRow: React.FC<{
mode={top50Mode}
avgWeeklySales={velocityMap?.get(asin)}
/>
<BuyBoxWarningBadge asin={asin} buyBoxLostMap={buyBoxLostMap} />
</div>
<span className="text-[9px] text-fuchsia-400/80 font-bold uppercase tracking-widest">{row.line}</span>
</div>
@@ -159,7 +164,8 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
onWocFilterChange,
customerFilters,
top50Mode,
velocityMap
velocityMap,
buyBoxLostMap
}) => {
// Pivot data - memoized
const { rows, weeks: allWeeks } = useMemo(() => pivotWeeklySalesData(data), [data]);
@@ -638,6 +644,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
renderGrowth={renderGrowth}
customerFilters={customerFilters}
velocityMap={velocityMap}
buyBoxLostMap={buyBoxLostMap}
/>
))}
{displayCount < sortedRows.length && (