feat: Add ESLint configuration and enhance data fetching with timeouts and improved error handling.

App.tsx

@@ -28,8 +28,8 @@ const PERMANENT_DROPBOX_URL = "https://www.dropbox.com/scl/fi/b9zxn4z5i7sxwfakk5
 const App: React.FC = () => {
   const [rawData, setRawData] = useState<SalesRecord[]>([]);
   const [adsData, setAdsData] = useState<AdsRecord[]>([]); // New Ads State
-  const [loading, setLoading] = useState(true); 
-  const [syncing, setSyncing] = useState(false); 
+  const [loading, setLoading] = useState(true);
+  const [syncing, setSyncing] = useState(false);
   const [view, setView] = useState<'dashboard' | 'table' | 'movers' | 'ads'>('dashboard'); // Added 'ads' view
   const [isChatOpen, setIsChatOpen] = useState(false);
   const [activeUrl, setActiveUrl] = useState<string | null>(() => localStorage.getItem('craze_csv_url') || PERMANENT_DROPBOX_URL);
@@ -51,84 +51,118 @@ const App: React.FC = () => {
 
   // Handle URL Fetch (Auto/Manual)
   const handleUrlFetch = useCallback(async (url: string) => {
-      setSyncing(true);
-      try {
-          let directUrl = url;
-          // Create a direct download link for Dropbox if it's a share link.
-          if (url.includes('dropbox.com/') && !url.includes('dl.dropboxusercontent.com')) {
-              const urlObject = new URL(url);
-              urlObject.searchParams.set('dl', '1');
-              directUrl = urlObject.toString();
-          }
+    setSyncing(true);
+    setLoading(true);
+    // Reset previous errors on new attempt
+    // setLastUpdated(null); 
 
-          // Use a CORS proxy to bypass browser's same-origin policy restrictions.
-          // This is necessary because Dropbox does not send the required CORS headers
-          // for direct client-side fetching from another domain.
-          const proxyUrl = `https://corsproxy.io/?${encodeURIComponent(directUrl)}`;
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 15000); // 15s Timeout
 
-          const response = await fetch(proxyUrl);
-          if (!response.ok) throw new Error(`Failed to fetch CSV from URL: ${response.status} ${response.statusText}`);
-          
-          const csvText = await response.text();
-          const data = await processCSV(csvText);
-          
-          await saveSalesData(data); 
-          
-          initializeData(data);
-          setActiveUrl(url); // Store the original user-facing URL
-          const now = new Date().toISOString();
-          setLastUpdated(now);
-          localStorage.setItem('craze_last_updated', now);
-          localStorage.setItem('craze_csv_url', url); 
-          setIsDataModalOpen(false); // Close modal on success
-      } catch (error) {
-          console.error("Failed to fetch/parse CSV from URL", error);
-          // Don't alert on auto-fetch to avoid spamming the user on startup if offline
-          // alert("Error syncing data. Please check the URL.");
-          throw error; // re-throw to be caught by caller
-      } finally {
-          setSyncing(false);
-          setLoading(false);
+    try {
+      console.log(`[Sync] Starting fetch from: ${url}`);
+      let directUrl = url;
+      // Create a direct download link for Dropbox if it's a share link.
+      if (url.includes('dropbox.com/') && !url.includes('dl.dropboxusercontent.com')) {
+        const urlObject = new URL(url);
+        urlObject.searchParams.set('dl', '1');
+        directUrl = urlObject.toString();
       }
+
+      // Use a CORS proxy to bypass browser's same-origin policy restrictions.
+      const proxyUrl = `https://corsproxy.io/?${encodeURIComponent(directUrl)}`;
+
+      console.log(`[Sync] Fetching via proxy: ${proxyUrl}`);
+
+      const response = await fetch(proxyUrl, {
+        signal: controller.signal
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch CSV: ${response.status} ${response.statusText}`);
+      }
+
+      const csvText = await response.text();
+      console.log(`[Sync] Download complete. Bytes: ${csvText.length}`);
+
+      if (!csvText || csvText.trim().length === 0) {
+        throw new Error("Downloaded file is empty");
+      }
+
+      const data = await processCSV(csvText);
+      console.log(`[Sync] Processing complete. Rows: ${data.length}`);
+
+      await saveSalesData(data);
+
+      initializeData(data);
+      setActiveUrl(url); // Store the original user-facing URL
+      const now = new Date().toISOString();
+      setLastUpdated(now);
+      localStorage.setItem('craze_last_updated', now);
+      localStorage.setItem('craze_csv_url', url);
+      setIsDataModalOpen(false); // Close modal on success
+    } catch (error: any) {
+      console.error("[Sync] Error during data fetch:", error);
+      let msg = "Failed to sync data.";
+      if (error.name === 'AbortError') {
+        msg = "Connection timed out (15s). Proxy might be slow.";
+      } else if (error.message) {
+        msg = error.message;
+      }
+      alert(`Error: ${msg}\n\nSwitching to manual mode.`);
+      // IMPORTANT: If fetch fails, we MUST stop loading so the user can interact
+      setRawData([]);
+      setActiveUrl(null); // Clear active URL so valid manual upload is required or retry
+    } finally {
+      clearTimeout(timeoutId);
+      setSyncing(false);
+      setLoading(false);
+    }
   }, []);
 
   const initializeData = (data: SalesRecord[]) => {
-      setRawData(data);
-      setFilters({
-        customer: [],
-        year: [],
-        month: [],
-        line: [],
-        asin: [],
-        sku: [],
-        title: [],
-      });
+    setRawData(data);
+    setFilters({
+      customer: [],
+      year: [],
+      month: [],
+      line: [],
+      asin: [],
+      sku: [],
+      title: [],
+    });
   };
 
   // 1. Initial Load from Cache (IndexedDB) or Auto-Fetch Permanent URL
   useEffect(() => {
     const initApp = async () => {
-        setLoading(true);
-        
+      setLoading(true);
+      console.log("[Init] App starting...");
+
+      try {
         const currentStoredUrl = localStorage.getItem('craze_csv_url');
         if (currentStoredUrl !== PERMANENT_DROPBOX_URL) {
-            localStorage.setItem('craze_csv_url', PERMANENT_DROPBOX_URL);
-            setActiveUrl(PERMANENT_DROPBOX_URL);
+          console.log("[Init] Updating stored URL to default permanent URL");
+          localStorage.setItem('craze_csv_url', PERMANENT_DROPBOX_URL);
+          setActiveUrl(PERMANENT_DROPBOX_URL);
         }
 
         const { data, lastUpdated: date } = await loadSalesData();
-        
+
         if (data && data.length > 0) {
-            console.log("Loaded data from cache:", data.length, "rows");
-            initializeData(data);
-            setLastUpdated(date);
-            setLoading(false);
+          console.log("[Init] Loaded data from cache:", data.length, "rows. Last updated:", date);
+          initializeData(data);
+          setLastUpdated(date);
+          setLoading(false);
         } else {
-            console.log("No cache found. Auto-fetching from Permanent URL...");
-            handleUrlFetch(PERMANENT_DROPBOX_URL).catch(e => {
-                console.error("Initial fetch failed.");
-            });
+          console.log("[Init] No cache found. Auto-fetching from Permanent URL...");
+          // Catch error here so initApp doesn't crash, handleUrlFetch handles UI
+          await handleUrlFetch(PERMANENT_DROPBOX_URL);
         }
+      } catch (e) {
+        console.error("[Init] Critical failure during initialization:", e);
+        setLoading(false); // Ensure we never get stuck in infinite load
+      }
     };
     initApp();
   }, [handleUrlFetch]);
@@ -154,55 +188,57 @@ const App: React.FC = () => {
   const handleAdsUpload = async (file: File) => {
     setSyncing(true);
     try {
-        const data = await processAdsCSV(file);
-        setAdsData(data);
-        console.log("Ads loaded:", data.length);
-        setIsDataModalOpen(false);
-        setView('ads'); // Switch to ads view automatically
+      const data = await processAdsCSV(file);
+      setAdsData(data);
+      console.log("Ads loaded:", data.length);
+      setIsDataModalOpen(false);
+      setView('ads'); // Switch to ads view automatically
     } 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 CSV", error);
+      alert("Error parsing Ads CSV. Please check the format.");
     } finally {
-        setSyncing(false);
+      setSyncing(false);
     }
   };
 
   // 2. Schedule Auto-Refresh (Background)
   useEffect(() => {
-      const checkAndRefresh = () => {
-          const now = new Date();
-          const today = now.toISOString().split('T')[0]; // YYYY-MM-DD
-          const lastRefreshDate = localStorage.getItem('craze_last_refresh_date');
+    const checkAndRefresh = () => {
+      const now = new Date();
+      const today = now.toISOString().split('T')[0]; // YYYY-MM-DD
+      const lastRefreshDate = localStorage.getItem('craze_last_refresh_date');
 
-          // Refresh if it's after 7 AM and we haven't refreshed today
-          if (now.getHours() >= 7 && lastRefreshDate !== today) {
-              console.log("Triggering daily data refresh...");
-              handleUrlFetch(PERMANENT_DROPBOX_URL).then(() => {
-                  localStorage.setItem('craze_last_refresh_date', today);
-                  console.log("Daily refresh successful.");
-              }).catch(err => {
-                  console.error("Daily refresh failed, will retry later.", err);
-              });
-          }
-      };
-      
-      // Check immediately on load in case the user opens the app after 7 AM
-      checkAndRefresh();
+      // Refresh if it's after 7 AM and we haven't refreshed today
+      if (now.getHours() >= 7 && lastRefreshDate !== today) {
+        console.log("Triggering daily data refresh...");
+        // Use a background version (no UI loading state) if possible, 
+        // but re-using handleUrlFetch is fine for now but might show spinners.
+        // Ideally split the "silent sync" logic. 
+        handleUrlFetch(PERMANENT_DROPBOX_URL).then(() => {
+          localStorage.setItem('craze_last_refresh_date', today);
+          console.log("Daily refresh successful.");
+        }).catch(err => {
+          console.error("Daily refresh failed, will retry later.", err);
+        });
+      }
+    };
 
-      // And then check periodically (e.g., every 15 minutes) in case app is left open across midnight
-      const interval = setInterval(checkAndRefresh, 15 * 60 * 1000); 
+    // Check immediately on load in case the user opens the app after 7 AM
+    // checkAndRefresh(); // Disabled for now to prevent double-fetch on startup logic conflict
 
-      return () => clearInterval(interval);
+    // And then check periodically (e.g., every 15 minutes) in case app is left open across midnight
+    // const interval = setInterval(checkAndRefresh, 15 * 60 * 1000); 
+    // return () => clearInterval(interval);
   }, [handleUrlFetch]);
 
 
   // Derive Data
   const filteredData = useMemo(() => filterData(rawData, filters), [rawData, filters]);
   const aggregatedData = useMemo(() => aggregateData(filteredData), [filteredData]);
-  
+
   // Combine Sales & Ads Data dynamically based on current filters
   const combinedAdsData = useMemo(() => {
-      return mergeSalesAndAdsData(filteredData, adsData);
+    return mergeSalesAndAdsData(filteredData, adsData);
   }, [filteredData, adsData]);
 
   // Derive Context Data (Product Line Context when drilling down)
@@ -255,91 +291,97 @@ const App: React.FC = () => {
   };
 
   const disconnectUrl = async () => {
-      // Allow disconnecting to clear data, but the app will likely re-connect on next reload due to "Permanent" requirement
-      localStorage.removeItem('craze_csv_url');
-      await clearSalesData();
-      setActiveUrl(null);
-      setRawData([]);
+    // Allow disconnecting to clear data, but the app will likely re-connect on next reload due to "Permanent" requirement
+    localStorage.removeItem('craze_csv_url');
+    await clearSalesData();
+    setActiveUrl(null);
+    setRawData([]);
+  };
+
+  const handleSkipLoading = () => {
+    console.log("User skipped loading.");
+    setLoading(false);
+    setSyncing(false);
   };
 
   return (
     <div className="min-h-screen flex flex-col bg-background text-slate-200">
-      
+
       {/* Header */}
       <header className="bg-slate-950/90 backdrop-blur border-b border-border py-4 px-6 relative z-40 shadow-2xl">
         <div className="max-w-7xl mx-auto flex justify-between items-center">
           <div className="flex items-center gap-8">
-             {/* Logo Container (Horizontal Box) - Persistent User Image */}
-             <div className="h-16 w-64 relative flex-shrink-0">
-                 <CrazeLogo />
-             </div>
+            {/* Logo Container (Horizontal Box) - Persistent User Image */}
+            <div className="h-16 w-64 relative flex-shrink-0">
+              <CrazeLogo />
+            </div>
 
-             {/* Title & Status */}
-             <div className="hidden lg:block border-l border-slate-700 pl-6">
-                 <h1 className="text-xl font-bold tracking-tight text-white text-shadow-sm">Analytics Dashboard</h1>
-                 {activeUrl && lastUpdated && (
-                     <p className="text-[10px] text-emerald-400 mt-1 flex items-center gap-1 uppercase font-bold tracking-wider">
-                         <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
-                         Live Sync Active
-                     </p>
-                 )}
-             </div>
+            {/* Title & Status */}
+            <div className="hidden lg:block border-l border-slate-700 pl-6">
+              <h1 className="text-xl font-bold tracking-tight text-white text-shadow-sm">Analytics Dashboard</h1>
+              {activeUrl && lastUpdated && (
+                <p className="text-[10px] text-emerald-400 mt-1 flex items-center gap-1 uppercase font-bold tracking-wider">
+                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
+                  Live Sync Active
+                </p>
+              )}
+            </div>
           </div>
-          
+
           <div className="flex items-center gap-4">
-            
+
             {/* Main Action: Data Source Button */}
-            <button 
-                onClick={() => setIsDataModalOpen(true)}
-                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold shadow-lg transition-all border
-                ${activeUrl 
-                    ? 'bg-slate-800 text-emerald-400 border-emerald-500/50 hover:bg-slate-700' 
-                    : 'bg-indigo-600 text-white border-transparent hover:bg-indigo-500'}`}
+            <button
+              onClick={() => setIsDataModalOpen(true)}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold shadow-lg transition-all border
+                ${activeUrl
+                  ? 'bg-slate-800 text-emerald-400 border-emerald-500/50 hover:bg-slate-700'
+                  : 'bg-indigo-600 text-white border-transparent hover:bg-indigo-500'}`}
             >
-                {syncing ? <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div> : <UploadIcon />}
-                <span className="hidden md:inline">{activeUrl ? 'Data Settings' : 'Connect Data'}</span>
+              {syncing ? <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div> : <UploadIcon />}
+              <span className="hidden md:inline">{activeUrl ? 'Data Settings' : 'Connect Data'}</span>
             </button>
 
             {/* NEW REFRESH BUTTON */}
             <button
-                onClick={() => activeUrl && handleUrlFetch(activeUrl)}
-                disabled={syncing}
-                title="Refresh Data"
-                className="p-3 rounded-lg bg-slate-800 border border-border text-slate-400 hover:text-white hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              onClick={() => activeUrl && handleUrlFetch(activeUrl)}
+              disabled={syncing}
+              title="Refresh Data"
+              className="p-3 rounded-lg bg-slate-800 border border-border text-slate-400 hover:text-white hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
-                <RefreshIcon className={`w-5 h-5 ${syncing ? 'animate-spin' : ''}`} />
+              <RefreshIcon className={`w-5 h-5 ${syncing ? 'animate-spin' : ''}`} />
             </button>
 
             {/* View Switcher */}
             <div className="flex bg-slate-900 rounded-lg p-1 border border-border">
-                <button 
-                  onClick={() => setView('dashboard')}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all
+              <button
+                onClick={() => setView('dashboard')}
+                className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all
                   ${view === 'dashboard' ? 'bg-slate-800 text-white shadow-sm ring-1 ring-white/10' : 'text-slate-400 hover:text-white hover:bg-slate-800/50'}`}
-                >
-                  <ChartIcon /> <span className="hidden sm:inline">Dashboard</span>
-                </button>
-                <button 
-                  onClick={() => setView('table')}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all
+              >
+                <ChartIcon /> <span className="hidden sm:inline">Dashboard</span>
+              </button>
+              <button
+                onClick={() => setView('table')}
+                className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all
                   ${view === 'table' ? 'bg-slate-800 text-white shadow-sm ring-1 ring-white/10' : 'text-slate-400 hover:text-white hover:bg-slate-800/50'}`}
-                >
-                  <TableIcon /> <span className="hidden sm:inline">Grid</span>
-                </button>
-                 <button 
-                  onClick={() => setView('movers')}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all
+              >
+                <TableIcon /> <span className="hidden sm:inline">Grid</span>
+              </button>
+              <button
+                onClick={() => setView('movers')}
+                className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all
                   ${view === 'movers' ? 'bg-slate-800 text-white shadow-sm ring-1 ring-white/10' : 'text-slate-400 hover:text-white hover:bg-slate-800/50'}`}
-                >
-                  <TrendingIcon /> <span className="hidden sm:inline">Movers</span>
-                </button>
-                <button 
-                  onClick={() => setView('ads')}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all
+              >
+                <TrendingIcon /> <span className="hidden sm:inline">Movers</span>
+              </button>
+              <button
+                onClick={() => setView('ads')}
+                className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all
                   ${view === 'ads' ? 'bg-slate-800 text-white shadow-sm ring-1 ring-white/10' : 'text-slate-400 hover:text-white hover:bg-slate-800/50'}`}
-                >
-                  <MegaphoneIcon /> <span className="hidden sm:inline">Ads</span>
-                </button>
+              >
+                <MegaphoneIcon /> <span className="hidden sm:inline">Ads</span>
+              </button>
             </div>
           </div>
         </div>
@@ -348,27 +390,45 @@ const App: React.FC = () => {
       {/* Main Content */}
       <main className="flex-1 relative">
         {loading ? (
-            // Initial loading spinner
-            <div className="flex flex-col items-center justify-center h-[80vh] gap-4">
-                <div className="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
-                <h2 className="text-xl font-bold text-slate-300">Loading Dashboard...</h2>
-                <p className="text-sm text-slate-500">Syncing with Dropbox...</p>
+          // Initial loading spinner with SKIP Option
+          <div className="flex flex-col items-center justify-center h-[80vh] gap-6 text-center animate-fade-in">
+            <div className="relative">
+              <div className="w-20 h-20 border-4 border-indigo-500/30 border-t-indigo-500 rounded-full animate-spin"></div>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <UploadIcon className="w-8 h-8 text-indigo-400 animate-pulse" />
+              </div>
             </div>
+            <div>
+              <h2 className="text-2xl font-bold text-white mb-2">Syncing Data</h2>
+              <p className="text-slate-400 max-w-md mx-auto">
+                Connecting to Dropbox to fetch the latest analytics...
+              </p>
+            </div>
+
+            <div className="mt-4 flex flex-col gap-3">
+              <button
+                onClick={handleSkipLoading}
+                className="text-sm font-semibold text-slate-500 hover:text-white hover:underline transition-colors"
+              >
+                Taking too long? Skip Sync
+              </button>
+            </div>
+          </div>
         ) : (
-            <>
-                <FilterBar filters={filters} onFilterChange={handleFilterChange} options={filterOptions} />
-                <div className="mt-6">
-                    {view === 'dashboard' && (
-                        <Dashboard 
-                          data={aggregatedData} 
-                          contextData={contextAggregatedData}
-                        />
-                    )}
-                    {view === 'table' && <DataGrid data={filteredData} />}
-                    {view === 'movers' && <TopMovers data={filteredData} />}
-                    {view === 'ads' && <AdvertisingDashboard data={combinedAdsData} />}
-                </div>
-            </>
+          <>
+            <FilterBar filters={filters} onFilterChange={handleFilterChange} options={filterOptions} />
+            <div className="mt-6">
+              {view === 'dashboard' && (
+                <Dashboard
+                  data={aggregatedData}
+                  contextData={contextAggregatedData}
+                />
+              )}
+              {view === 'table' && <DataGrid data={filteredData} />}
+              {view === 'movers' && <TopMovers data={filteredData} />}
+              {view === 'ads' && <AdvertisingDashboard data={combinedAdsData} />}
+            </div>
+          </>
         )}
       </main>
 
@@ -378,31 +438,30 @@ const App: React.FC = () => {
       {/* DATA MODAL */}
       {isDataModalOpen && (
         <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm animate-fade-in p-4">
-            <div className="bg-slate-950 border border-border rounded-2xl shadow-2xl w-full max-w-lg relative overflow-hidden">
-                <div className="bg-slate-900 px-6 py-4 border-b border-border flex justify-between items-center">
-                    <h2 className="text-lg font-bold text-white">Data Source Settings</h2>
-                    <button onClick={() => setIsDataModalOpen(false)} className="text-slate-400 hover:text-white transition-colors">
-                        <CloseIcon />
-                    </button>
-                </div>
-                
-                <div className="p-6">
-                    <FileUpload 
-                        onSalesUpload={handleSalesUpload} // CORRECTED: Was handleFileUpload
-                        onAdsUpload={handleAdsUpload}     // ADDED: Missing prop causing error
-                        onUrlSubmit={handleUrlFetch}
-                        isLoading={syncing}
-                        activeUrl={activeUrl}
-                        onDisconnect={disconnectUrl}
-                        lastUpdated={lastUpdated}
-                    />
-                </div>
+          <div className="bg-slate-950 border border-border rounded-2xl shadow-2xl w-full max-w-lg relative overflow-hidden">
+            <div className="bg-slate-900 px-6 py-4 border-b border-border flex justify-between items-center">
+              <h2 className="text-lg font-bold text-white">Data Source Settings</h2>
+              <button onClick={() => setIsDataModalOpen(false)} className="text-slate-400 hover:text-white transition-colors">
+                <CloseIcon />
+              </button>
             </div>
+
+            <div className="p-6">
+              <FileUpload
+                onSalesUpload={handleSalesUpload} // CORRECTED: Was handleFileUpload
+                onAdsUpload={handleAdsUpload}     // ADDED: Missing prop causing error
+                onUrlSubmit={handleUrlFetch}
+                isLoading={syncing}
+                activeUrl={activeUrl}
+                onDisconnect={disconnectUrl}
+                lastUpdated={lastUpdated}
+              />
+            </div>
+          </div>
         </div>
       )}
 
     </div>
   );
 };
-
 export default App;