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

- WeeklyGrid.tsx: Make SKU identifiers clickable with hover effects
- App.tsx: Implement handleSkuDrillDown to filter by SKU and switch to Ads view
---
 components/WeeklyGrid.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index ed63ccd..3db2b6e 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -446,7 +446,14 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown
                                                         {ranks.map((r, i) => (
                                                             <Top50Badge key={i} rank={r.rank} label={r.label} theme={r.theme} />
                                                         ))}
-                                                        <span className="text-xs font-black text-indigo-400 uppercase tracking-tighter truncate max-w-[120px]">{row.sku || '-'}</span>
+                                                        <span
+                                                            onClick={() => onDrillDown?.(row.sku)}
+                                                            className={`text-xs font-black uppercase tracking-tighter truncate max-w-[120px] transition-all
+                                                                ${onDrillDown ? 'text-indigo-400 cursor-pointer hover:text-indigo-300 hover:underline' : 'text-indigo-400/70'}`}
+                                                            title={onDrillDown ? `Click to see Ads detail for ${row.sku}` : ''}
+                                                        >
+                                                            {row.sku || '-'}
+                                                        </span>
                                                         <span className="text-[10px] font-bold text-slate-500 bg-slate-800 px-1.5 py-0.5 rounded border border-white/5">{row.asin}</span>
                                                     </div>
                                                     <span className="text-[11px] text-white/70 truncate w-[210px] leading-tight mb-1" title={row.title}>{row.title}</span>