Integrate stock availability data and StockBadge component across all views

This commit is contained in:
Christian Vidal Wolf
2026-01-27 16:51:38 +01:00
parent 219d050bf2
commit 0d1d2c77d4
9 changed files with 634 additions and 470 deletions
+6 -1
View File
@@ -2,6 +2,7 @@ import React, { useMemo, useState, useEffect, useCallback } from 'react';
import * as XLSX from 'xlsx';
import { CombinedKPIs } from '../types';
import { pivotWeeklySalesData, WeeklyPivotRow } from '../services/dataProcessor';
import { StockBadge } from './StockBadge';
interface WeeklyGridProps {
data: CombinedKPIs[];
@@ -10,6 +11,7 @@ interface WeeklyGridProps {
uk: Map<string, number>;
};
onDrillDown?: (sku: string) => void;
stockMap?: Map<string, number>;
}
type SortConfig = {
@@ -51,7 +53,7 @@ const Top50Badge: React.FC<{ rank: number; label?: string; theme?: 'amber' | 'bl
);
};
const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown }) => {
const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown, stockMap }) => {
// Pivot data - memoized
const { rows, weeks: allWeeks } = useMemo(() => pivotWeeklySalesData(data), [data]);
@@ -515,6 +517,9 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown
{row.sku || '-'}
</span>
<span className="text-[10px] font-bold text-slate-500 bg-slate-800 px-1.5 py-0.5 rounded border border-white/5">{row.asin}</span>
{stockMap && (
<StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />
)}
</div>
<span className="text-[11px] text-white/70 truncate w-[210px] leading-tight mb-1" title={row.title}>{row.title}</span>
<span className="text-[9px] text-fuchsia-400/80 font-bold uppercase tracking-widest">{row.line}</span>