Integrate stock availability data and StockBadge component across all views

components/AdsPerformance.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState, useCallback } from 'react';
 import * as XLSX from 'xlsx';
 import { CombinedKPIs, FilterState } from '../types';
 import { DownloadIcon } from './Icons';
+import { StockBadge } from './StockBadge';
 
 interface AdsPerformanceProps {
     data: CombinedKPIs[];
@@ -10,6 +11,7 @@ interface AdsPerformanceProps {
         eu: Map<string, number>;
         uk: Map<string, number>;
     };
+    stockMap?: Map<string, number>;
 }
 
 type SortKey = keyof CombinedKPIs | 'acos' | 'roas' | 'tacos' | 'ctr' | 'cpc' | 'cvrUnits';
@@ -34,7 +36,7 @@ const Top50Badge: React.FC<{ rank: number; label?: string; theme?: 'amber' | 'bl
     );
 };
 
-const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters, top50Ranking }) => {
+const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters, top50Ranking, stockMap }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const [showOnlyTop50, setShowOnlyTop50] = useState(false);
     const [top50Mode, setTop50Mode] = useState<'eu' | 'uk'>('eu');
@@ -404,6 +406,9 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters, top50Ran
                                                         <Top50Badge key={i} rank={r.rank} label={r.label} theme={r.theme} />
                                                     ))}
                                                     <span className="text-white font-bold text-sm tracking-tight">{row.asin}</span>
+                                                    {stockMap && (
+                                                        <StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />
+                                                    )}
                                                 </div>
                                                 <span className="text-[10px] uppercase font-black text-indigo-400 tracking-tighter">SKU: {row.sku}</span>
                                                 <span className="text-[10px] text-slate-400 truncate max-w-[220px] leading-tight" title={row.title}>{row.title}</span>