Implement Grid-specific YTD filtering and default sorting

App.tsx

@@ -497,10 +497,33 @@ const App: React.FC = () => {
   // Determine which dataset to use for velocity calculation based on top50Mode
 
   // Combine Sales & Ads Data dynamically based on current filters
-  const combinedAdsData = useMemo(() => {
   return mergeSalesAndAdsData(filteredData, filteredAdsData, globalAsinMetadata, trafficData, velocityMap);
 }, [filteredData, filteredAdsData, globalAsinMetadata, trafficData, velocityMap]);
 
+// Derived Data for Grid (YTD Filtered - Isolated)
+// 1. Identify "Current Year" max week
+const gridContext = useMemo(() => {
+  if (rawData.length === 0) return { minWeek: 1, maxWeek: 53, currentYear: new Date().getFullYear() };
+
+  const currentYear = Math.max(...rawData.map(r => r.year));
+  const currentYearData = rawData.filter(r => r.year === currentYear);
+  const maxWeek = Math.max(...currentYearData.map(r => r.week).filter(Boolean));
+
+  return { minWeek: 1, maxWeek: maxWeek || 53, currentYear };
+}, [rawData]);
+
+const ytdGridData = useMemo(() => {
+  // Filter combinedAdsData to only include weeks <= maxWeek
+  // This ensures we compare "Like for Like" periods across years
+  // We do strictly LESS THAN OR EQUAL to maxWeek.
+  if (!combinedAdsData) return [];
+  return combinedAdsData.filter(item => {
+    // CombinedKPIs has 'week' property
+    if (!item.week) return true; // Keep non-weekly items if any (shouldn't be)
+    return item.week <= gridContext.maxWeek;
+  });
+}, [combinedAdsData, gridContext.maxWeek]);
+
 // Derived Data for Views
 const years = useMemo(() => getUniqueValues(rawData, 'year').sort().reverse(), [rawData]);
 
@@ -683,7 +706,7 @@ const App: React.FC = () => {
             <Suspense fallback={<LoadingSpinner />}>
               <div className={view === 'table' ? '' : 'hidden'}>
                 <DataGrid
-                    data={combinedAdsData}
+                  data={ytdGridData}
                   hasCustomerFilter={filters.customer.length > 0}
                   adsData={filteredAdsData}
                   stockMap={stockMap}
@@ -692,6 +715,7 @@ const App: React.FC = () => {
                   top50Mode={filters.customer.includes('Amazon UK') ? 'uk' : 'eu'}
                   velocityMap={velocityMap}
                   buyBoxLostMap={buyBoxLostMap}
+                  defaultSort={{ key: `total_sellOut_${gridContext.currentYear}`, direction: 'desc' }}
                 />
               </div>
             </Suspense>

components/DataGrid.tsx

@@ -23,6 +23,7 @@ interface DataGridProps {
     vendorStockMap?: Map<string, { eu: number; uk: number }>;
     velocityMap?: Map<string, number>;
     buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
+    defaultSort?: SortConfig;
 }
 
 type SortConfig = {
@@ -239,9 +240,9 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
 };
 
 
-const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, stockMap, vendorStockMap, top50Ranking, top50Mode, velocityMap, buyBoxLostMap }) => {
+const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, stockMap, vendorStockMap, top50Ranking, top50Mode, velocityMap, buyBoxLostMap, defaultSort }) => {
     const [currentPage, setCurrentPage] = useState(1);
-    const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' });
+    const [sortConfig, setSortConfig] = useState<SortConfig>(defaultSort || { key: null, direction: 'desc' });
     const [showChart, setShowChart] = useState(true);
     const [visibleMetrics, setVisibleMetrics] = useState<('sellOut' | 'units')[]>(['sellOut', 'units']);
     const [showAdsMetrics, setShowAdsMetrics] = useState(true);