feat: Add Amazon Ads Weekly integration with Dashboard KPIs, Grid summary, and chart lines

- Update AdsRecord interface to support weekly data (year, week, cpc, ctr, acos, conversions) - Rewrite processAdsExcel to parse multiple sheets (2025, 2026) with 12-column format - Update mergeSalesAndAdsData to match by ASIN+Country+Year+Week - Add Advertising Performance section to Dashboard with Ad Spend, Attributed Sales, ACOS, ROAS - Add Ads toggle button and summary bar to DataGrid - Add Ad Spend lines (fuchsia dashed) to weekly comparison chart - Fix import paths in Dashboard.tsx and AdvertisingDashboard.tsx
2026-08-03 13:55:23 +02:00 · 2026-01-21 09:45:50 +01:00
parent 67951bcac8
commit 1c826c2487
6 changed files with 491 additions and 298 deletions
@@ -9,7 +9,7 @@ import FilterBar from './components/FilterBar';
 import AIChat from './components/AIChat';
 import CrazeLogo from './components/CrazeLogo';
 import { SalesRecord, FilterState, AggregatedData, AdsRecord } from './types'; // Imported AdsRecord
-import { processCSV, filterData, aggregateData, getUniqueValues, processAdsCSV, mergeSalesAndAdsData } from './services/dataProcessor'; // Imported new processors
+import { processCSV, filterData, aggregateData, getUniqueValues, processAdsCSV, processAdsExcel, mergeSalesAndAdsData } from './services/dataProcessor'; // Imported new processors
 import { queryGemini } from './services/geminiService';
 import { ChartIcon, TableIcon, UploadIcon, DownloadIcon, CloseIcon, TrendingIcon } from './components/Icons';
 import { loadSalesData, saveSalesData, clearSalesData } from './services/storage';
@@ -155,18 +155,18 @@ const App: React.FC = () => {
    }
  };

-  // Handle uploaded Ads file (Manual)
+  // Handle uploaded Ads file (Manual) - Supports both CSV and Excel
  const handleAdsUpload = async (file: File) => {
    setSyncing(true);
    try {
-      const data = await processAdsCSV(file);
+      const isExcel = file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
+      const data = isExcel ? await processAdsExcel(file) : await processAdsCSV(file);
      setAdsData(data);
-      console.log("Ads loaded:", data.length);
+      console.log("Ads loaded:", data.length, "records from", file.name);
      setIsDataModalOpen(false);
-      // setView('ads'); // Removed switching to ads view
    } catch (error) {
-      console.error("Failed to parse Ads CSV", error);
-      alert("Error parsing Ads CSV. Please check the format.");
+      console.error("Failed to parse Ads file", error);
+      alert("Error parsing Ads file. Please check the format.");
    } finally {
      setSyncing(false);
    }
@@ -361,9 +361,10 @@ const App: React.FC = () => {
                <Dashboard
                  data={aggregatedData}
                  contextData={contextAggregatedData}
+                  adsData={adsData}
                />
              )}
-              {view === 'table' && <DataGrid data={filteredData} hasCustomerFilter={filters.customer.length > 0} />}
+              {view === 'table' && <DataGrid data={filteredData} hasCustomerFilter={filters.customer.length > 0} adsData={adsData} />}
              {view === 'movers' && <TopMovers data={filteredData} />}
            </div>
          </>
@@ -44,7 +44,7 @@ const aggregateByMonth = (data: CombinedKPIs[]) => {
    });

    const result = Array.from(map.values()).map(r => ({
-        ..r,
+        ...r,
        acos: r.salesAds > 0 ? (r.cost / r.salesAds) * 100 : 0,
        tacos: r.salesTotal > 0 ? (r.cost / r.salesTotal) * 100 : 0,
        ctr: r.impressions > 0 ? (r.clicks / r.impressions) * 100 : 0,
@@ -1,6 +1,6 @@

 import React, { useState, useMemo, useEffect } from 'react';
-import { AggregatedData, GrowthMetric } from './types';
+import { AggregatedData, GrowthMetric, AdsRecord } from '../types';
 import {
    BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
    LineChart, Line, Legend
@@ -9,6 +9,7 @@ import {
 interface DashboardProps {
    data: AggregatedData;
    contextData?: AggregatedData | null;
+    adsData?: AdsRecord[];
 }

 const COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6', '#0ea5e9'];
@@ -454,10 +455,31 @@ const GrowthTable: React.FC<{
    );
 }

-const Dashboard: React.FC<DashboardProps> = ({ data, contextData }) => {
+const Dashboard: React.FC<DashboardProps> = ({ data, contextData, adsData = [] }) => {
    const [seasonalityMetric, setSeasonalityMetric] = useState<'sellOut' | 'units'>('sellOut');
    const [top10Metric, setTop10Metric] = useState<'sellOut' | 'units'>('sellOut');

+    // Calculate Ads KPIs
+    const adsKPIs = useMemo(() => {
+        if (!adsData || adsData.length === 0) return null;
+
+        const totals = adsData.reduce((acc, ad) => ({
+            cost: acc.cost + ad.cost,
+            attributedSales: acc.attributedSales + ad.attributedSales30d,
+            clicks: acc.clicks + ad.clicks,
+            impressions: acc.impressions + ad.impressions,
+        }), { cost: 0, attributedSales: 0, clicks: 0, impressions: 0 });
+
+        return {
+            totalSpend: totals.cost,
+            attributedSales: totals.attributedSales,
+            acos: totals.attributedSales > 0 ? (totals.cost / totals.attributedSales) * 100 : 0,
+            roas: totals.cost > 0 ? totals.attributedSales / totals.cost : 0,
+            cpc: totals.clicks > 0 ? totals.cost / totals.clicks : 0,
+            ctr: totals.impressions > 0 ? (totals.clicks / totals.impressions) * 100 : 0,
+        };
+    }, [adsData]);
+
    // Decide which data source to use for Product Line charts
    // If contextData is provided (drill down), we use that to show the "Total Line" view.
    // Otherwise we use the standard filtered data.
@@ -470,6 +492,39 @@ const Dashboard: React.FC<DashboardProps> = ({ data, contextData }) => {
    return (
        <div className="p-6 space-y-6 max-w-7xl mx-auto animate-fade-in pb-24">

+            {/* Ads Performance Section - Only shown when ads data is loaded */}
+            {adsKPIs && (
+                <div className="bg-gradient-to-r from-fuchsia-900/20 to-indigo-900/20 border border-fuchsia-500/30 rounded-xl p-6 animate-fade-in">
+                    <div className="flex items-center gap-2 mb-4">
+                        <span className="w-2 h-2 rounded-full bg-fuchsia-400 animate-pulse"></span>
+                        <h3 className="text-sm font-bold text-fuchsia-400 uppercase tracking-wider">Advertising Performance</h3>
+                        <span className="text-xs text-slate-500 ml-auto">{adsData.length.toLocaleString('de-DE')} ad records loaded</span>
+                    </div>
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                        <div className="bg-slate-900/50 rounded-lg p-4">
+                            <span className="text-xs text-slate-400 block mb-1">Total Ad Spend</span>
+                            <span className="text-2xl font-bold text-fuchsia-400">€{adsKPIs.totalSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</span>
+                        </div>
+                        <div className="bg-slate-900/50 rounded-lg p-4">
+                            <span className="text-xs text-slate-400 block mb-1">Attributed Sales</span>
+                            <span className="text-2xl font-bold text-emerald-400">€{adsKPIs.attributedSales.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</span>
+                        </div>
+                        <div className="bg-slate-900/50 rounded-lg p-4">
+                            <span className="text-xs text-slate-400 block mb-1">ACOS</span>
+                            <span className={`text-2xl font-bold ${adsKPIs.acos <= 30 ? 'text-emerald-400' : adsKPIs.acos <= 50 ? 'text-amber-400' : 'text-red-400'}`}>
+                                {adsKPIs.acos.toFixed(1)}%
+                            </span>
+                        </div>
+                        <div className="bg-slate-900/50 rounded-lg p-4">
+                            <span className="text-xs text-slate-400 block mb-1">ROAS</span>
+                            <span className={`text-2xl font-bold ${adsKPIs.roas >= 3 ? 'text-emerald-400' : adsKPIs.roas >= 2 ? 'text-amber-400' : 'text-red-400'}`}>
+                                {adsKPIs.roas.toFixed(2)}x
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            )}
+
            {/* KPI Section - Pass both specific data and context data */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <MultiYearKPICard
@@ -2,13 +2,14 @@ import React, { useState, useMemo, useEffect } from 'react';
 import {
    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
 } from 'recharts';
-import { SalesRecord, PivotRow } from '../types';
+import { SalesRecord, PivotRow, AdsRecord } from '../types';
 import { pivotSalesData, generateCSV, aggregateForTimeSeries, aggregateForComparisonTimeSeries, applyPanEUGrouping } from '../services/dataProcessor';
 import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon } from './Icons';

 interface DataGridProps {
    data: SalesRecord[];
    hasCustomerFilter: boolean;
+    adsData?: AdsRecord[];
 }

 type SortConfig = {
@@ -225,11 +226,32 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
 };


-const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter }) => {
+const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData = [] }) => {
    const [currentPage, setCurrentPage] = useState(1);
    const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' });
    const [showChart, setShowChart] = useState(true);
    const [visibleMetrics, setVisibleMetrics] = useState<('sellOut' | 'units')[]>(['sellOut', 'units']);
+    const [showAdsMetrics, setShowAdsMetrics] = useState(true);
+
+    // Calculate Ads Summary for the Grid
+    const adsSummary = useMemo(() => {
+        if (!adsData || adsData.length === 0) return null;
+
+        const totals = adsData.reduce((acc, ad) => ({
+            cost: acc.cost + ad.cost,
+            attributedSales: acc.attributedSales + ad.attributedSales30d,
+            clicks: acc.clicks + ad.clicks,
+            impressions: acc.impressions + ad.impressions,
+        }), { cost: 0, attributedSales: 0, clicks: 0, impressions: 0 });
+
+        return {
+            totalSpend: totals.cost,
+            attributedSales: totals.attributedSales,
+            acos: totals.attributedSales > 0 ? (totals.cost / totals.attributedSales) * 100 : 0,
+            roas: totals.cost > 0 ? totals.attributedSales / totals.cost : 0,
+            recordCount: adsData.length,
+        };
+    }, [adsData]);

    // State for dynamic grouping
    const [selectedDimensions, setSelectedDimensions] = useState<string[]>(['line', 'customer', 'sku', 'title']);
@@ -260,22 +282,42 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter }) => {
        const yearsInView = Array.from(new Set(data.map(d => d.year.toString()))).sort((a: string, b: string) => parseInt(b) - parseInt(a));
        const isMultiYear = yearsInView.length > 1;

-        if (isMultiYear) {
-            return {
-                chartData: aggregateForComparisonTimeSeries(data),
-                uniqueYears: yearsInView,
-                isComparisonView: true,
-                chartTitle: `Weekly Sales Comparison: ${yearsInView.join(' vs ')}`
-            };
-        } else {
-            return {
-                chartData: aggregateForTimeSeries(data),
-                uniqueYears: yearsInView,
-                isComparisonView: false,
-                chartTitle: `Weekly Sales Evolution ${yearsInView[0] || ''}`
-            };
+        // Get base sales data
+        let salesChartData = isMultiYear
+            ? aggregateForComparisonTimeSeries(data)
+            : aggregateForTimeSeries(data);
+
+        // Aggregate ads data by week/year and merge into chartData
+        if (adsData && adsData.length > 0) {
+            const adsMap = new Map<number, { [key: string]: number }>();
+
+            adsData.forEach(ad => {
+                if (ad.week >= 1 && ad.week <= 53) {
+                    if (!adsMap.has(ad.week)) {
+                        adsMap.set(ad.week, {});
                    }
-    }, [data]);
+                    const weekData = adsMap.get(ad.week)!;
+                    const adSpendKey = `${ad.year}_adSpend`;
+                    weekData[adSpendKey] = (weekData[adSpendKey] || 0) + ad.cost;
+                }
+            });
+
+            // Merge ads data into sales chart data
+            salesChartData = salesChartData.map(point => {
+                const adsWeekData = adsMap.get(point.week) || {};
+                return { ...point, ...adsWeekData };
+            });
+        }
+
+        return {
+            chartData: salesChartData,
+            uniqueYears: yearsInView,
+            isComparisonView: isMultiYear,
+            chartTitle: isMultiYear
+                ? `Weekly Sales Comparison: ${yearsInView.join(' vs ')}`
+                : `Weekly Sales Evolution ${yearsInView[0] || ''}`
+        };
+    }, [data, adsData]);

    // Filter Options based on available data
    const metricOptions = useMemo(() => {
@@ -484,6 +526,19 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter }) => {
                                                strokeDasharray="5 5"
                                                dot={false}
                                            />
+                                        ),
+                                        // Ad Spend line (only when ads data exists and showAdsMetrics is on)
+                                        showAdsMetrics && adsSummary && (
+                                            <Line
+                                                key={`${year}_adSpend`}
+                                                type="monotone"
+                                                dataKey={`${year}_adSpend`}
+                                                name={`Ad Spend ${year}`}
+                                                stroke="#d946ef"
+                                                strokeWidth={2}
+                                                strokeDasharray="3 3"
+                                                dot={false}
+                                            />
                                        )
                                    ])
                                ) : (
@@ -571,6 +626,19 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter }) => {
                            <ChartIcon />
                            <span className="hidden sm:inline">{showChart ? 'Hide Chart' : 'Show Chart'}</span>
                        </button>
+
+                        {/* Ads Toggle - Only show when ads data is loaded */}
+                        {adsSummary && (
+                            <button
+                                onClick={() => setShowAdsMetrics(!showAdsMetrics)}
+                                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${showAdsMetrics ? 'bg-fuchsia-600/20 text-fuchsia-400 border-fuchsia-500/50' : 'bg-slate-800 text-slate-300 border-slate-700 hover:bg-slate-700'}`}
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
+                                </svg>
+                                <span className="hidden sm:inline">{showAdsMetrics ? 'Hide Ads' : 'Show Ads'}</span>
+                            </button>
+                        )}
                    </div>

                    <div className="flex items-center gap-3 w-full lg:w-auto justify-between lg:justify-end">
@@ -738,6 +806,41 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter }) => {
                </div>


+                {/* Ads Performance Summary - Shows when ads data is loaded */}
+                {adsSummary && showAdsMetrics && (
+                    <div className="bg-gradient-to-r from-fuchsia-900/20 to-indigo-900/20 border-y border-fuchsia-500/30 px-4 py-3">
+                        <div className="flex flex-wrap items-center gap-4">
+                            <div className="flex items-center gap-2">
+                                <span className="w-2 h-2 rounded-full bg-fuchsia-400 animate-pulse"></span>
+                                <span className="text-xs font-bold text-fuchsia-300 uppercase tracking-wide">Advertising Data:</span>
+                                <span className="text-xs text-slate-400">{adsSummary.recordCount.toLocaleString('de-DE')} records</span>
+                            </div>
+                            <div className="flex items-center gap-4 flex-wrap">
+                                <div className="px-3 py-1 bg-slate-900/50 rounded-lg">
+                                    <span className="text-xs text-slate-400 mr-2">Ad Spend:</span>
+                                    <span className="text-sm font-bold text-fuchsia-400">€{adsSummary.totalSpend.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</span>
+                                </div>
+                                <div className="px-3 py-1 bg-slate-900/50 rounded-lg">
+                                    <span className="text-xs text-slate-400 mr-2">Attr. Sales:</span>
+                                    <span className="text-sm font-bold text-emerald-400">€{adsSummary.attributedSales.toLocaleString('de-DE', { maximumFractionDigits: 0 })}</span>
+                                </div>
+                                <div className="px-3 py-1 bg-slate-900/50 rounded-lg">
+                                    <span className="text-xs text-slate-400 mr-2">ACOS:</span>
+                                    <span className={`text-sm font-bold ${adsSummary.acos <= 30 ? 'text-emerald-400' : adsSummary.acos <= 50 ? 'text-amber-400' : 'text-red-400'}`}>
+                                        {adsSummary.acos.toFixed(1)}%
+                                    </span>
+                                </div>
+                                <div className="px-3 py-1 bg-slate-900/50 rounded-lg">
+                                    <span className="text-xs text-slate-400 mr-2">ROAS:</span>
+                                    <span className={`text-sm font-bold ${adsSummary.roas >= 3 ? 'text-emerald-400' : adsSummary.roas >= 2 ? 'text-amber-400' : 'text-red-400'}`}>
+                                        {adsSummary.roas.toFixed(2)}x
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
                {/* Data Table */}
                <div className="overflow-x-auto min-h-[400px]">
                    <table className="w-full text-left text-sm border-collapse">
@@ -285,58 +285,61 @@ export const processAdsCSV = (file: File): Promise<AdsRecord[]> => {

                    for (let i = 0; i < len; i++) {
                        const row = rows[i];
-                        if (!Array.isArray(row) || row.length < 13) continue;
+                        if (!Array.isArray(row) || row.length < 12) continue;

                        // Check header row (Column A: Customer or Country)
                        const c0 = String(row[0]).trim().toLowerCase();
                        if (c0.includes('customer') || c0.includes('country') || c0.includes('marketplace')) continue;

-                        // A (0): Customer/Marketplace
-                        // B (1): Month (Can be "may", "01", or Excel serial "45544")
-                        // C (2): Year
-                        // D (3): ASIN
-                        // E (4): Ad Spend
-                        // F (5): Clicks
-                        // G (6): Impressions
-                        // ...
-                        // L (11): Units (Attributed)
-                        // M (12): Sales (Sell Out)
+                        // Column mapping for CSV (same as Excel):
+                        // A (0): Country
+                        // B (1): Week
+                        // C (2): ASIN
+                        // D (3): Cost
+                        // E (4): Clicks
+                        // F (5): Impressions
+                        // G (6): CPC
+                        // H (7): CTR %
+                        // I (8): ACOS %
+                        // J (9): Conversions (30d)
+                        // K (10): Units (30d)
+                        // L (11): Sales (30d)

                        const countryRaw = row[0];
-                        const monthRaw = row[1];
-                        const yearRaw = row[2];
-                        const asin = row[3];
-                        const costRaw = row[4];
-                        const clicksRaw = row[5];
-                        const impressionsRaw = row[6];
+                        const weekRaw = row[1];
+                        const asin = row[2];
+                        const costRaw = row[3];
+                        const clicksRaw = row[4];
+                        const impressionsRaw = row[5];
+                        const cpcRaw = row[6];
+                        const ctrRaw = row[7];
+                        const acosRaw = row[8];
+                        const conversionsRaw = row[9];
+                        const unitsRaw = row[10];
+                        const salesRaw = row[11];

-                        const unitsRaw = row[11]; // L
-                        const salesRaw = row[12]; // M
+                        if (!asin || !countryRaw || weekRaw === undefined) continue;

-                        if (!asin || !countryRaw) continue;
+                        const weekNum = parseInt(String(weekRaw));
+                        if (isNaN(weekNum) || weekNum < 1 || weekNum > 53) continue;

-                        // Construct Normalized Month-Year String (e.g., "May-24")
-                        const pureMonth = normalizeMonth(String(monthRaw)); // Returns "May"
-                        let yearShort = '';
-                        if (yearRaw) {
-                            yearShort = String(yearRaw).trim().replace(/[,.]/g, '').slice(-2); // "2024" -> "24", handle "2,024"
-                        }
-
-                        // Avoid double year if normalizeMonth already extracted it (rare for serial numbers but possible for strings)
-                        let finalMonthStr = pureMonth;
-                        if (!finalMonthStr.includes('-') && yearShort) {
-                            finalMonthStr = `${pureMonth}-${yearShort}`;
-                        }
+                        // For CSV without sheet names, assume current year
+                        const currentYear = new Date().getFullYear();

                        data.push({
                            country: mapCountryToMarketplace(String(countryRaw)),
-                            month: finalMonthStr,
+                            year: currentYear,
+                            week: weekNum,
                            asin: String(asin).trim(),
                            cost: parseCurrency(String(costRaw)),
                            clicks: parseUnits(String(clicksRaw)),
                            impressions: parseUnits(String(impressionsRaw)),
-                            attributedSales30d: parseCurrency(String(salesRaw)),
+                            cpc: parseCurrency(String(cpcRaw)),
+                            ctr: parseCurrency(String(ctrRaw)),
+                            acos: parseCurrency(String(acosRaw)),
+                            conversions: parseUnits(String(conversionsRaw)),
                            attributedUnits30d: parseUnits(String(unitsRaw)),
+                            attributedSales30d: parseCurrency(String(salesRaw)),
                        });
                    }
                    resolve(data);
@@ -353,61 +356,80 @@ export const processAdsExcel = async (file: File): Promise<AdsRecord[]> => {
    try {
        const arrayBuffer = await file.arrayBuffer();
        const workbook = XLSX.read(arrayBuffer);
-        const firstSheetName = workbook.SheetNames[0];
-        const worksheet = workbook.Sheets[firstSheetName];
+        const allData: AdsRecord[] = [];

-        // Use header: 'A' to strictly map columns by index letter
-        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: "A", defval: "" });
-
-        const data: AdsRecord[] = jsonData.map((row: any) => {
-            // Check if it's a header row
-            if (row['A'] === 'Customer' || row['A'] === 'Country') return null;
-
-            // Updated Mapping for Excel Column Letters
-            // A: Country
-            // B: Month
-            // C: Year
-            // D: ASIN
-            // E: Cost
-            // F: Clicks
-            // G: Impressions
-            // ...
-            // L: Units
-            // M: Sales
-
-            const countryRaw = row['A'];
-            const monthRaw = row['B'];
-            const yearRaw = row['C'];
-            const asin = row['D'];
-            const costRaw = row['E'];
-            const clicksRaw = row['F'];
-            const impressionsRaw = row['G'];
-            const unitsRaw = row['L'];
-            const salesRaw = row['M'];
-
-            if (!asin || !countryRaw) return null;
-
-            // Construct Normalized Month-Year String
-            const pureMonth = normalizeMonth(String(monthRaw));
-            let yearShort = '';
-            if (yearRaw) {
-                yearShort = String(yearRaw).trim().slice(-2);
+        // Process ALL sheets (e.g., "2025", "2026")
+        for (const sheetName of workbook.SheetNames) {
+            const year = parseInt(sheetName);
+            if (isNaN(year) || year < 2020 || year > 2100) {
+                console.warn(`Skipping sheet "${sheetName}" - not a valid year`);
+                continue;
            }
-            const finalMonthStr = yearShort ? `${pureMonth}-${yearShort}` : pureMonth;

-            return {
+            const worksheet = workbook.Sheets[sheetName];
+            // Use header: 1 to get array of arrays (row-based)
+            const jsonData: any[][] = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: "" });
+
+            console.log(`Processing sheet ${sheetName}: ${jsonData.length} rows`);
+
+            // Skip header row (index 0), process data rows
+            for (let i = 1; i < jsonData.length; i++) {
+                const row = jsonData[i];
+                if (!row || row.length < 12) continue;
+
+                // Column mapping for Ads Weekly.xlsx:
+                // A (0): Country
+                // B (1): Week
+                // C (2): ASIN
+                // D (3): Cost
+                // E (4): Clicks
+                // F (5): Impressions
+                // G (6): CPC
+                // H (7): CTR %
+                // I (8): ACOS %
+                // J (9): Conversions (30d)
+                // K (10): Units (30d)
+                // L (11): Sales (30d)
+
+                const countryRaw = row[0];
+                const weekRaw = row[1];
+                const asin = row[2];
+                const costRaw = row[3];
+                const clicksRaw = row[4];
+                const impressionsRaw = row[5];
+                const cpcRaw = row[6];
+                const ctrRaw = row[7];
+                const acosRaw = row[8];
+                const conversionsRaw = row[9];
+                const unitsRaw = row[10];
+                const salesRaw = row[11];
+
+                // Skip if missing essential data
+                if (!asin || !countryRaw || weekRaw === undefined || weekRaw === '') continue;
+
+                const weekNum = parseInt(String(weekRaw));
+                if (isNaN(weekNum) || weekNum < 1 || weekNum > 53) continue;
+
+                allData.push({
                    country: mapCountryToMarketplace(String(countryRaw)),
-                month: finalMonthStr,
+                    year,
+                    week: weekNum,
                    asin: String(asin).trim(),
                    cost: parseCurrency(String(costRaw)),
                    clicks: parseUnits(String(clicksRaw)),
                    impressions: parseUnits(String(impressionsRaw)),
-                attributedSales30d: parseCurrency(String(salesRaw)),
+                    cpc: parseCurrency(String(cpcRaw)),
+                    ctr: parseCurrency(String(ctrRaw)),
+                    acos: parseCurrency(String(acosRaw)),
+                    conversions: parseUnits(String(conversionsRaw)),
                    attributedUnits30d: parseUnits(String(unitsRaw)),
-            };
-        }).filter((r): r is AdsRecord => r !== null);
+                    attributedSales30d: parseCurrency(String(salesRaw)),
+                });
+            }
+        }

-        return data;
+        console.log(`Total Ads records loaded: ${allData.length}`);
+        return allData;
    } catch (error) {
        console.error("Error processing Ads Excel:", error);
        throw error;
@@ -417,13 +439,12 @@ export const processAdsExcel = async (file: File): Promise<AdsRecord[]> => {
 // --- DATA MERGING ---

 export const mergeSalesAndAdsData = (salesData: SalesRecord[], adsData: AdsRecord[]): CombinedKPIs[] => {
-    // 1. Index Ads Data for fast lookup: Key = ASIN + Marketplace + Month
+    // 1. Index Ads Data for fast lookup: Key = ASIN + Marketplace + Year + Week
    const adsMap = new Map<string, AdsRecord>();

    adsData.forEach(ad => {
-        // Ensure month format matches sales data (e.g. "May-24" vs "May-24")
-        // Case-insensitive key
-        const key = `${ad.asin.trim().toUpperCase()}|${ad.country.trim().toUpperCase()}|${ad.month.trim()}`;
+        // Case-insensitive key using ASIN + Country + Year + Week
+        const key = `${ad.asin.trim().toUpperCase()}|${ad.country.trim().toUpperCase()}|${ad.year}|${ad.week}`;

        // If duplicates exist (e.g. multiple campaigns for same ASIN), sum them up
        if (adsMap.has(key)) {
@@ -433,6 +454,7 @@ export const mergeSalesAndAdsData = (salesData: SalesRecord[], adsData: AdsRecor
            existing.impressions += ad.impressions;
            existing.attributedSales30d += ad.attributedSales30d;
            existing.attributedUnits30d += ad.attributedUnits30d;
+            existing.conversions += ad.conversions;
        } else {
            adsMap.set(key, { ...ad });
        }
@@ -440,14 +462,21 @@ export const mergeSalesAndAdsData = (salesData: SalesRecord[], adsData: AdsRecor

    // 2. Iterate Sales Data and merge
    const mergedData: CombinedKPIs[] = salesData.map(sale => {
-        const key = `${sale.asin.trim().toUpperCase()}|${sale.customer.trim().toUpperCase()}|${sale.month.trim()}`;
+        // Use week from sales record if available
+        const weekNum = sale.week || 0;
+        const key = `${sale.asin.trim().toUpperCase()}|${sale.customer.trim().toUpperCase()}|${sale.year}|${weekNum}`;
        const adData = adsMap.get(key) || {
            country: sale.customer,
-            month: sale.month,
+            year: sale.year,
+            week: weekNum,
            asin: sale.asin,
            cost: 0,
            clicks: 0,
            impressions: 0,
+            cpc: 0,
+            ctr: 0,
+            acos: 0,
+            conversions: 0,
            attributedSales30d: 0,
            attributedUnits30d: 0
        };
@@ -127,14 +127,19 @@ export interface ComparisonTimeSeriesPoint {
 }

 export interface AdsRecord {
-  country: string;
-  month: string;
+  country: string;       // Marketplace (Amazon DE, IT, ES, FR, UK)
+  year: number;          // Year extracted from sheet name
+  week: number;          // Week number (1-52)
  asin: string;
-  cost: number;
+  cost: number;          // Ad spend €
  clicks: number;
  impressions: number;
-  attributedSales30d: number;
+  cpc: number;           // Cost per click €
+  ctr: number;           // Click-through rate %
+  acos: number;          // Advertising cost of sale %
+  conversions: number;   // Attributed conversions (30d)
  attributedUnits30d: number;
+  attributedSales30d: number;
 }

 export interface CombinedKPIs {