From 630941c96a648fe21941bddeebd6f1957dd10d5e Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 16 Apr 2026 12:02:49 +0200
Subject: [PATCH] fix: resolve white screen by removing stack-unfriendly spread
 operators and adding diagnostic logs

---
 App.tsx                        | 8 +++++++-
 components/DataGrid.tsx        | 4 ++--
 components/ForecastView.tsx    | 2 +-
 components/WeeklyGrid.tsx      | 4 ++--
 components/mkt/MasterTable.tsx | 2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/App.tsx b/App.tsx
index ae93ec7..5d89790 100644
--- a/App.tsx
+++ b/App.tsx
@@ -513,11 +513,14 @@ const App: React.FC = () => {
   }, [handleDataFetch]);
 
 
+  console.log('[App] Render Start. RawData count:', rawData.length, 'AdsData count:', adsData.length);
+
   // Derive Data
   const globalAsinMetadata = useMemo(() => {
     const metaMap = new Map<string, { sku: string; title: string; line: string }>();
     rawData.forEach(r => {
-      const asin = r.asin.trim().toUpperCase();
+      const asin = (r.asin || '').trim().toUpperCase();
+      if (!asin) return;
       const existing = metaMap.get(asin);
       // Keep most complete title
       if (!existing || (r.title && r.title.length > (existing.title?.length || 0))) {
@@ -527,6 +530,8 @@ const App: React.FC = () => {
     return metaMap;
   }, [rawData]);
 
+  console.log('[App] Metadata ready');
+
   const filteredData = useMemo(() => filterData(rawData, deferredFilters, stockMap, vendorStockMap, top50Mode), [rawData, deferredFilters, stockMap, vendorStockMap, top50Mode]);
   const filteredAdsData = useMemo(() => filterAdsData(adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode), [adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
 
@@ -715,6 +720,7 @@ const App: React.FC = () => {
     setAdsData([]);
   };
 
+  console.log('[App] Render Finish');
   return (
     <div className="min-h-screen flex flex-col bg-background text-slate-200">
 
diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index fa79608..24f793e 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -554,7 +554,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
         // 2. Sort
         if (sortConfig.key) {
             // Create a copy to avoid mutating the original array and ensure React detects the change
-            result = [...result].sort((a, b) => {
+            result = result.slice().sort((a, b) => {
                 let valA: number | string = '';
                 let valB: number | string = '';
 
@@ -611,7 +611,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
         } else if (showOnlyTop50 && top50Ranking) {
             // Default sort by Rank when Top 50 is active
             const rankMap = top50Mode === 'eu' ? top50Ranking.eu : top50Ranking.uk;
-            result = [...result].sort((a, b) => {
+            result = result.slice().sort((a, b) => {
                 const rankA = a.asin ? rankMap.get(a.asin.toUpperCase()) || 999 : 999;
                 const rankB = b.asin ? rankMap.get(b.asin.toUpperCase()) || 999 : 999;
                 return rankA - rankB;
diff --git a/components/ForecastView.tsx b/components/ForecastView.tsx
index 3213121..669ce9e 100644
--- a/components/ForecastView.tsx
+++ b/components/ForecastView.tsx
@@ -253,7 +253,7 @@ const ForecastView: React.FC<ForecastViewProps> = ({
     }, [baseFilteredData, activeMonths]);
 
     const processedData = useMemo(() => {
-        let result = [...calculatedData];
+        let result = calculatedData.slice();
 
         if (showOnlyTop50 && top50Ranking) {
             const currentRankMap = top50Mode === 'eu' ? top50Ranking.eu : top50Ranking.uk;
diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index 668aa87..f1780ca 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -561,7 +561,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
 
     // 1. Filter by search term, Top 50, and growth (using debounced value)
     const filteredRows = useMemo(() => {
-        let result = rows;
+        let result = rows.slice();
 
         // Top 50 Filter
         if (showOnlyTop50 && top50Ranking) {
@@ -711,7 +711,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
     const sortedRows = useMemo(() => {
         if (!sortConfig || filteredRows.length === 0) return filteredRows;
 
-        const result = [...filteredRows];
+        const result = filteredRows.slice();
         const { key: weekKey, direction, metric } = sortConfig;
 
         if (metric === 'rank') {
diff --git a/components/mkt/MasterTable.tsx b/components/mkt/MasterTable.tsx
index dc62551..47422ec 100644
--- a/components/mkt/MasterTable.tsx
+++ b/components/mkt/MasterTable.tsx
@@ -42,7 +42,7 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
   const totalAcos = totals.grossSales > 0 ? totals.ppcSpend / totals.grossSales : 0;
 
   const sortedProducts = useMemo(() => {
-    return [...products].sort((a, b) => {
+    return products.slice().sort((a, b) => {
       const metricsA = calculateProductMetrics(a, includeCOGS);
       const metricsB = calculateProductMetrics(b, includeCOGS);