From b23b2fba960d43be4fc712bdff0fdf5d716018b2 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 22 Jan 2026 14:06:53 +0100
Subject: [PATCH] feat: allow drill-down from Weekly Sales to Ads tab via SKU

- WeeklyGrid.tsx: Add onDrillDown prop and make SKU identifiers clickable
- App.tsx: Implement handleSkuDrillDown to switch view and filter by SKU
---
 App.tsx                   | 11 ++++++++++-
 components/WeeklyGrid.tsx |  3 ++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/App.tsx b/App.tsx
index cce56a0..e4a6891 100644
--- a/App.tsx
+++ b/App.tsx
@@ -132,6 +132,15 @@ const App: React.FC = () => {
     });
   };
 
+  const handleSkuDrillDown = useCallback((sku: string) => {
+    if (!sku) return;
+    setFilters(prev => ({
+      ...prev,
+      sku: [sku]
+    }));
+    setView('ads');
+  }, []);
+
   // 1. Initial Load from Cache (IndexedDB) or Auto-Fetch Permanent URL
   useEffect(() => {
     const initApp = async () => {
@@ -491,7 +500,7 @@ const App: React.FC = () => {
               )}
               <Suspense fallback={<LoadingSpinner />}>
                 {view === 'table' && <DataGrid data={combinedAdsData} hasCustomerFilter={filters.customer.length > 0} adsData={filteredAdsData} />}
-                {view === 'weekly' && <WeeklyGrid data={combinedAdsData} top50Ranking={top50Ranking2025} />}
+                {view === 'weekly' && <WeeklyGrid data={combinedAdsData} top50Ranking={top50Ranking2025} onDrillDown={handleSkuDrillDown} />}
                 {view === 'movers' && <TopMovers data={filteredData} />}
                 {view === 'ads' && <AdsPerformance data={combinedAdsData} filters={filters} />}
               </Suspense>
diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index bea9dd9..ed63ccd 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -11,6 +11,7 @@ interface WeeklyGridProps {
         eu?: Map<string, number>;
         uk?: Map<string, number>;
     };
+    onDrillDown?: (sku: string) => void;
 }
 
 type SortConfig = {
@@ -52,7 +53,7 @@ const Top50Badge: React.FC<{ rank: number; label?: string; theme?: 'amber' | 'bl
     );
 };
 
-const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking }) => {
+const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown }) => {
     // Pivot data - memoized
     const { rows, weeks: allWeeks } = useMemo(() => pivotWeeklySalesData(data), [data]);