feat: auto-load data from Dropbox URL

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import * as XLSX from 'xlsx';
 import { AppState, ExcelRow, COLUMNS } from './types';
 import { Sidebar } from './components/Sidebar';
@@ -19,6 +19,49 @@ export default function App() {
   });
   const [activeModule, setActiveModule] = useState<'descriptions' | 'completeness' | 'matrix' | 'upload'>('descriptions');
   const [editingRowIndex, setEditingRowIndex] = useState<number | null>(null);
+  const [isLoadingDefault, setIsLoadingDefault] = useState(true);
+  const [defaultLoadError, setDefaultLoadError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadDefaultData = async () => {
+      try {
+        setIsLoadingDefault(true);
+        setDefaultLoadError(null);
+        // Using corsproxy.io to avoid Dropbox CORS issues
+        const dropboxUrl = 'https://dl.dropboxusercontent.com/scl/fi/nkyabkq2jdwfudof2ovrl/Data-Matrix.xlsx?rlkey=1cz5fuabwipqqivihii7sybw0&st=io0g4wvb&dl=1';
+        const proxyUrl = `https://corsproxy.io/?${encodeURIComponent(dropboxUrl)}`;
+        
+        const response = await fetch(proxyUrl);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch file: ${response.statusText}`);
+        }
+        
+        const arrayBuffer = await response.arrayBuffer();
+        const wb = XLSX.read(arrayBuffer, { type: 'array' });
+        const wsname = wb.SheetNames[0];
+        const ws = wb.Sheets[wsname];
+        const data = XLSX.utils.sheet_to_json<any[]>(ws, { header: 1 });
+        
+        if (data.length > 0) {
+          setAppState({
+            headers: data[0],
+            data: data.slice(1),
+            fileName: 'Data-Matrix.xlsx (Auto-loaded Google Drive/Dropbox)',
+            fileDate: new Date(),
+            hasUnsavedChanges: false
+          });
+          setActiveModule('descriptions');
+        }
+      } catch (err) {
+        console.error('Error loading default data:', err);
+        setDefaultLoadError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setIsLoadingDefault(false);
+      }
+    };
+
+    loadDefaultData();
+  }, []);
 
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -123,7 +166,20 @@ export default function App() {
       <div className="flex flex-1 overflow-hidden">
         <Sidebar activeModule={activeModule} setActiveModule={setActiveModule} />
         <main className="flex-1 overflow-auto relative p-6 bg-slate-950">
-          {appState.data.length === 0 && activeModule !== 'upload' ? (
+          {isLoadingDefault ? (
+            <div className="flex flex-col items-center justify-center h-full text-slate-400">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
+              <p className="text-lg">Loading latest data...</p>
+            </div>
+          ) : defaultLoadError && appState.data.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-red-400">
+              <p className="mb-4 text-lg">Failed to auto-load data: {defaultLoadError}</p>
+              <label className="cursor-pointer bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-lg transition-colors">
+                Load Excel File Manually
+                <input type="file" accept=".xlsx, .xls" className="hidden" onChange={handleFileUpload} />
+              </label>
+            </div>
+          ) : appState.data.length === 0 && activeModule !== 'upload' ? (
             <div className="flex flex-col items-center justify-center h-full text-slate-400">
               <p className="mb-4 text-lg">No data loaded.</p>
               <label className="cursor-pointer bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-lg transition-colors">