Feat: add hover tooltip on TOTALS row in Weekly Sales with WoW and YoY comparison

Shows previous week and same week prior year values (Units, Revenue, Ads Spend, GV) with % change indicators when hovering any week cell in the TOTALS row.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

components/VendorDataView.tsx

@@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { BSRRecord, CombinedKPIs } from '../types';
 import { BuyBoxWarningBadge } from './BuyBoxWarningBadge';
+import { StockBadge } from './StockBadge';
+import { VendorStockBadge } from './VendorStockBadge';
 import { BSRUnitsCorrelationChart } from './BSRUnitsCorrelationChart';
 
 interface VendorDataViewProps {
@@ -9,6 +11,10 @@ interface VendorDataViewProps {
   asinMetadata?: Map<string, { sku: string; title: string; line: string }>;
   buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
   combinedSalesData?: CombinedKPIs[];
+  stockMap?: Map<string, number>;
+  vendorStockMap?: Map<string, { eu: number; uk: number }>;
+  top50Mode?: 'eu' | 'uk';
+  velocityMap?: Map<string, number>;
 }
 
 interface ChartPoint {
@@ -306,7 +312,16 @@ const CATEGORY_TRANSLATIONS: Record<string, string> = {
 const translateCategory = (name: string): string =>
   CATEGORY_TRANSLATIONS[name] ?? name;
 
-const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetadata, buyBoxLostMap, combinedSalesData = [] }) => {
+const VendorDataView: React.FC<VendorDataViewProps> = ({ 
+  bsrData = [], 
+  asinMetadata, 
+  buyBoxLostMap, 
+  combinedSalesData = [],
+  stockMap,
+  vendorStockMap,
+  top50Mode = 'eu',
+  velocityMap
+}) => {
   const activeMarkets = useMemo(() => {
     const m = new Set(bsrData.map(r => r.market));
     return Array.from(m).sort();
@@ -461,8 +476,19 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
                 </div>
               </div>
             </div>
-            <div className="flex-shrink-0 pt-1">
-              <BuyBoxWarningBadge asin={productInfo.asin} buyBoxLostMap={buyBoxLostMap} />
+            <div className="flex-shrink-0 pt-1 flex flex-col items-end gap-3">
+              <div className="flex items-center gap-3">
+                {stockMap && (
+                  <StockBadge stock={stockMap.get(productInfo.sku?.replace(/(DE|EN)$/i, ''))} />
+                )}
+                <VendorStockBadge 
+                  asin={productInfo.asin} 
+                  vendorStockMap={vendorStockMap} 
+                  mode={top50Mode} 
+                  avgWeeklySales={velocityMap?.get(productInfo.asin.trim().toUpperCase())} 
+                />
+                <BuyBoxWarningBadge asin={productInfo.asin} buyBoxLostMap={buyBoxLostMap} />
+              </div>
             </div>
           </div>
         </div>