feat: integrate Amazon Vendor Stock data across all views and fix local data loading

This commit is contained in:
Christian Vidal Wolf
2026-01-28 09:46:59 +01:00
parent 49decf9b9f
commit 97071c7b62
10 changed files with 226 additions and 13 deletions
+7 -3
View File
@@ -4,6 +4,7 @@ import { CombinedKPIs, FilterState } from '../types';
import { DownloadIcon, FunnelIcon, TrendingIcon, ChartIcon } from './Icons';
import { StockBadge } from './StockBadge';
import { Top50Badge } from './Top50Badge';
import { VendorStockBadge } from './VendorStockBadge';
import { InColumnStockFilter } from './InColumnStockFilter';
interface AdsPerformanceProps {
@@ -17,6 +18,7 @@ interface AdsPerformanceProps {
stockFilter: string[];
onStockFilterChange: (newFilters: string[]) => void;
top50Mode: 'eu' | 'uk';
vendorStockMap?: Map<string, { eu: number; uk: number }>;
}
type SortKey = keyof CombinedKPIs | 'acos' | 'roas' | 'tacos' | 'ctr' | 'cpc' | 'cvrUnits';
@@ -37,7 +39,8 @@ const AdsRow: React.FC<{
top50Ranking?: { eu: Map<string, number>; uk: Map<string, number> };
top50Mode: 'eu' | 'uk';
stockMap?: Map<string, number>;
}> = React.memo(({ item, top50Ranking, top50Mode, stockMap }) => {
vendorStockMap?: Map<string, { eu: number; uk: number }>;
}> = React.memo(({ item, top50Ranking, top50Mode, stockMap, vendorStockMap }) => {
const asin = item.asin.trim().toUpperCase();
const ranks: { rank: number; label: string; theme: 'amber' | 'blue' | 'indigo' }[] = [];
@@ -67,6 +70,7 @@ const AdsRow: React.FC<{
{stockMap && (
<StockBadge stock={stockMap.get(item.sku?.replace(/(DE|EN)$/i, ''))} />
)}
<VendorStockBadge asin={item.asin} vendorStockMap={vendorStockMap} mode={top50Mode} />
</div>
</div>
</td>
@@ -88,7 +92,7 @@ const AdsRow: React.FC<{
);
});
const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters, top50Ranking, stockMap, stockFilter, onStockFilterChange, top50Mode }) => {
const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters, top50Ranking, stockMap, vendorStockMap, stockFilter, onStockFilterChange, top50Mode }) => {
const [searchTerm, setSearchTerm] = useState('');
const [showOnlyTop50, setShowOnlyTop50] = useState(false);
const [sortConfig, setSortConfig] = useState<{ key: SortKey; direction: 'asc' | 'desc' }>({
@@ -393,7 +397,7 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters, top50Ran
</thead>
<tbody className="divide-y divide-white/[0.03]">
{filteredAndSorted.map((p) => (
<AdsRow key={p.id} item={p} top50Ranking={top50Ranking} top50Mode={top50Mode} stockMap={stockMap} />
<AdsRow key={p.id} item={p} top50Ranking={top50Ranking} top50Mode={top50Mode} stockMap={stockMap} vendorStockMap={vendorStockMap} />
))}
</tbody>
</table>