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

App.tsx

@@ -52,7 +52,15 @@ const App: React.FC = () => {
   // Handle URL Fetch (Auto/Manual)
   const handleUrlFetch = useCallback(async (url: string) => {
     setSyncing(true);
+    setLoading(true);
+    // Reset previous errors on new attempt
+    // setLastUpdated(null); 
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 15000); // 15s Timeout
+
     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')) {
@@ -62,15 +70,27 @@ const App: React.FC = () => {
       }
 
       // 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 response = await fetch(proxyUrl);
+      console.log(`[Sync] Fetching via proxy: ${proxyUrl}`);
-          if (!response.ok) throw new Error(`Failed to fetch CSV from URL: ${response.status} ${response.statusText}`);
+
+      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);
 
@@ -81,12 +101,20 @@ const App: React.FC = () => {
       localStorage.setItem('craze_last_updated', now);
       localStorage.setItem('craze_csv_url', url);
       setIsDataModalOpen(false); // Close modal on success
-      } catch (error) {
+    } catch (error: any) {
-          console.error("Failed to fetch/parse CSV from URL", error);
+      console.error("[Sync] Error during data fetch:", error);
-          // Don't alert on auto-fetch to avoid spamming the user on startup if offline
+      let msg = "Failed to sync data.";
-          // alert("Error syncing data. Please check the URL.");
+      if (error.name === 'AbortError') {
-          throw error; // re-throw to be caught by caller
+        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);
     }
@@ -109,9 +137,12 @@ const App: React.FC = () => {
   useEffect(() => {
     const initApp = async () => {
       setLoading(true);
+      console.log("[Init] App starting...");
 
+      try {
         const currentStoredUrl = localStorage.getItem('craze_csv_url');
         if (currentStoredUrl !== 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);
         }
@@ -119,15 +150,18 @@ const App: React.FC = () => {
         const { data, lastUpdated: date } = await loadSalesData();
 
         if (data && data.length > 0) {
-            console.log("Loaded data from cache:", data.length, "rows");
+          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...");
+          console.log("[Init] No cache found. Auto-fetching from Permanent URL...");
-            handleUrlFetch(PERMANENT_DROPBOX_URL).catch(e => {
+          // Catch error here so initApp doesn't crash, handleUrlFetch handles UI
-                console.error("Initial fetch failed.");
+          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();
@@ -177,6 +211,9 @@ const App: React.FC = () => {
       // 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.");
@@ -187,12 +224,11 @@ const App: React.FC = () => {
     };
 
     // Check immediately on load in case the user opens the app after 7 AM
-      checkAndRefresh();
+    // checkAndRefresh(); // Disabled for now to prevent double-fetch on startup logic conflict
 
     // And then check periodically (e.g., every 15 minutes) in case app is left open across midnight
-      const interval = setInterval(checkAndRefresh, 15 * 60 * 1000); 
+    // const interval = setInterval(checkAndRefresh, 15 * 60 * 1000); 
-
+    // return () => clearInterval(interval);
-      return () => clearInterval(interval);
   }, [handleUrlFetch]);
 
 
@@ -262,6 +298,12 @@ const App: React.FC = () => {
     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">
 
@@ -348,11 +390,29 @@ const App: React.FC = () => {
       {/* Main Content */}
       <main className="flex-1 relative">
         {loading ? (
-            // Initial loading spinner
+          // Initial loading spinner with SKIP Option
-            <div className="flex flex-col items-center justify-center h-[80vh] gap-4">
+          <div className="flex flex-col items-center justify-center h-[80vh] gap-6 text-center animate-fade-in">
-                <div className="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+            <div className="relative">
-                <h2 className="text-xl font-bold text-slate-300">Loading Dashboard...</h2>
+              <div className="w-20 h-20 border-4 border-indigo-500/30 border-t-indigo-500 rounded-full animate-spin"></div>
-                <p className="text-sm text-slate-500">Syncing with Dropbox...</p>
+              <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>
         ) : (
           <>
@@ -404,5 +464,4 @@ const App: React.FC = () => {
     </div>
   );
 };
-
 export default App;

components/ErrorBoundary.tsx

@@ -0,0 +1,54 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+    children: ReactNode;
+}
+
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+    public state: State = {
+        hasError: false,
+        error: null,
+    };
+
+    public static getDerivedStateFromError(error: Error): State {
+        return { hasError: true, error };
+    }
+
+    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error('Uncaught error:', error, errorInfo);
+    }
+
+    public render() {
+        if (this.state.hasError) {
+            return (
+                <div className="flex flex-col items-center justify-center min-h-screen bg-slate-950 text-slate-200 p-8">
+                    <div className="bg-red-900/20 border border-red-500/50 rounded-xl p-8 max-w-2xl w-full text-center">
+                        <h1 className="text-3xl font-bold text-red-500 mb-4">Something went wrong</h1>
+                        <p className="text-slate-300 mb-6">The application encountered a critical error during rendering.</p>
+
+                        <div className="bg-black/50 p-4 rounded-lg text-left overflow-auto max-h-64 font-mono text-sm border border-slate-800">
+                            <p className="text-red-400 font-bold mb-2">Error: {this.state.error?.message}</p>
+                            <pre className="text-slate-500 text-xs">{this.state.error?.stack}</pre>
+                        </div>
+
+                        <button
+                            onClick={() => window.location.reload()}
+                            className="mt-8 px-6 py-3 bg-red-600 hover:bg-red-500 text-white font-bold rounded-lg transition-colors"
+                        >
+                            Reload Application
+                        </button>
+                    </div>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" class="dark">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -21,40 +22,31 @@
       }
     }
   </script>
-    <!-- PapaParse for CSV parsing -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
   <style>
     /* Custom Scrollbar */
     ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
     }
+
     ::-webkit-scrollbar-track {
       background: #020617;
     }
+
     ::-webkit-scrollbar-thumb {
       background: #334155;
       border-radius: 4px;
     }
+
     ::-webkit-scrollbar-thumb:hover {
       background: #475569;
     }
   </style>
-  <script type="importmap">
-{
-  "imports": {
-    "react": "https://aistudiocdn.com/react@^19.2.0",
-    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
-    "react/": "https://aistudiocdn.com/react@^19.2.0/",
-    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
-    "recharts": "https://aistudiocdn.com/recharts@^3.5.0",
-    "xlsx": "https://esm.sh/xlsx@^0.18.5",
-    "papaparse": "https://esm.sh/papaparse@^5.5.3"
-  }
-}
-</script>
 </head>
+
 <body class="bg-background text-slate-200 antialiased overflow-y-auto">
   <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
 </body>
+
 </html>

index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import ErrorBoundary from './components/ErrorBoundary';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
@@ -10,6 +11,8 @@ if (!rootElement) {
 const root = ReactDOM.createRoot(rootElement);
 root.render(
   <React.StrictMode>
+    <ErrorBoundary>
       <App />
+    </ErrorBoundary>
   </React.StrictMode>
 );

package.json

@@ -5,21 +5,30 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.2.0",
+    "react": "^18.3.1",
-    "react-dom": "^19.2.0",
+    "react-dom": "^18.3.1",
     "@google/genai": "^1.30.0",
     "recharts": "^3.5.0",
     "xlsx": "^0.18.5",
     "papaparse": "^5.5.3"
   },
   "devDependencies": {
-    "@types/node": "^22.14.0",
+    "@types/node": "^22.5.0",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@types/react": "^18.3.3",
-    "typescript": "~5.8.2",
+    "@types/react-dom": "^18.3.0",
-    "vite": "^6.2.0"
+    "@types/papaparse": "^5.3.14",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.2",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "typescript-eslint": "^8.0.0"
   }
 }