refactor: simplified data loading with direct fetch endpoint

components/FileUpload.tsx

@@ -1,25 +1,25 @@
 
 import React, { ChangeEvent, useState } from 'react';
-import { UploadIcon, MegaphoneIcon } from './Icons'; 
+import { UploadIcon, MegaphoneIcon } from './Icons';
 
 interface FileUploadProps {
-  onSalesUpload: (file: File) => void; // Renamed from onFileUpload
-  onAdsUpload: (file: File) => void;   // New Prop
-  onUrlSubmit: (url: string) => void;
+  onSalesUpload: (file: File) => void;
+  onAdsUpload: (file: File) => void;
+  onUrlSubmit: () => void;  // Changed: no longer takes URL parameter
   isLoading: boolean;
   activeUrl?: string | null;
   onDisconnect?: () => void;
   lastUpdated?: string | null;
 }
 
-const FileUpload: React.FC<FileUploadProps> = ({ 
-  onSalesUpload, 
+const FileUpload: React.FC<FileUploadProps> = ({
+  onSalesUpload,
   onAdsUpload,
-  onUrlSubmit, 
-  isLoading, 
-  activeUrl, 
-  onDisconnect, 
-  lastUpdated 
+  onUrlSubmit,
+  isLoading,
+  activeUrl,
+  onDisconnect,
+  lastUpdated
 }) => {
   const [url, setUrl] = useState('');
 
@@ -30,37 +30,37 @@ const FileUpload: React.FC<FileUploadProps> = ({
   };
 
   const handleAdsChange = (e: ChangeEvent<HTMLInputElement>) => {
-      if (e.target.files && e.target.files.length > 0) {
-          onAdsUpload(e.target.files[0]);
-      }
+    if (e.target.files && e.target.files.length > 0) {
+      onAdsUpload(e.target.files[0]);
+    }
   };
 
   const handleUrlSubmit = (e: React.FormEvent) => {
-      e.preventDefault();
-      if (url.trim()) {
-          onUrlSubmit(url.trim());
-      }
+    e.preventDefault();
+    if (url.trim()) {
+      onUrlSubmit(url.trim());
+    }
   };
 
   const handleSyncNow = () => {
-    if (activeUrl) onUrlSubmit(activeUrl);
+    onUrlSubmit();
   };
 
   return (
     <div className="flex flex-col gap-6 p-2">
-      
+
       {/* Active Connection Status */}
       {activeUrl && (
         <div className="bg-emerald-900/20 border border-emerald-500/30 rounded-xl p-6 text-center animate-fade-in">
           <div className="flex items-center justify-center gap-2 mb-2 text-emerald-400">
-             <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
-             <span className="font-bold text-sm uppercase tracking-wide">Cloud Sync Active</span>
+            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
+            <span className="font-bold text-sm uppercase tracking-wide">Cloud Sync Active</span>
           </div>
           <p className="text-slate-300 text-sm mb-1 truncate max-w-sm mx-auto opacity-80">{activeUrl}</p>
           {lastUpdated && <p className="text-xs text-slate-500 mb-4">Last updated: {new Date(lastUpdated).toLocaleString()}</p>}
-          
+
           <div className="flex gap-3 justify-center">
-            <button 
+            <button
               onClick={handleSyncNow}
               disabled={isLoading}
               className="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2 disabled:opacity-50"
@@ -77,7 +77,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
                 </>
               )}
             </button>
-            <button 
+            <button
               onClick={onDisconnect}
               className="px-4 py-2 bg-slate-800 hover:bg-red-900/30 text-slate-300 hover:text-red-400 border border-slate-700 hover:border-red-800 rounded-lg text-sm font-medium transition-colors"
             >
@@ -89,82 +89,46 @@ const FileUpload: React.FC<FileUploadProps> = ({
 
       {/* Manual File Uploads */}
       <div className="grid grid-cols-2 gap-4">
-          <div className="rounded-xl border border-dashed border-slate-700 bg-slate-900/50 hover:bg-slate-900 transition-colors group h-full">
-            <label htmlFor="sales-upload" className="cursor-pointer flex flex-col items-center justify-center gap-3 p-6 h-full">
-              <div className="p-3 bg-indigo-500/10 rounded-full text-indigo-400 group-hover:scale-110 transition-transform">
-                <UploadIcon />
-              </div>
-              <div className="text-center">
-                <h3 className="font-semibold text-slate-200">Upload Sales CSV</h3>
-                <p className="text-[10px] text-slate-500 mt-1">Standard Sales Data</p>
-              </div>
-              <input
-                id="sales-upload"
-                type="file"
-                accept=".csv,.xlsx"
-                onChange={handleSalesChange}
-                disabled={isLoading}
-                className="hidden"
-              />
-            </label>
-          </div>
-
-          <div className="rounded-xl border border-dashed border-slate-700 bg-slate-900/50 hover:bg-slate-900 transition-colors group h-full">
-            <label htmlFor="ads-upload" className="cursor-pointer flex flex-col items-center justify-center gap-3 p-6 h-full">
-              <div className="p-3 bg-fuchsia-500/10 rounded-full text-fuchsia-400 group-hover:scale-110 transition-transform">
-                <MegaphoneIcon />
-              </div>
-              <div className="text-center">
-                <h3 className="font-semibold text-slate-200">Upload Ads CSV</h3>
-                <p className="text-[10px] text-slate-500 mt-1">Advertising Expenses</p>
-              </div>
-              <input
-                id="ads-upload"
-                type="file"
-                accept=".csv,.xlsx"
-                onChange={handleAdsChange}
-                disabled={isLoading}
-                className="hidden"
-              />
-            </label>
-          </div>
-      </div>
-
-      <div className="flex items-center gap-4">
-          <div className="h-px bg-slate-800 flex-1"></div>
-          <span className="text-slate-600 text-xs font-bold uppercase">OR</span>
-          <div className="h-px bg-slate-800 flex-1"></div>
-      </div>
-
-      {/* URL Connection */}
-      <div className="bg-slate-900 border border-slate-800 rounded-xl p-5">
-          <h3 className="text-sm font-bold text-slate-200 mb-1">{activeUrl ? 'Change Source URL' : 'Connect Cloud CSV'}</h3>
-          <p className="text-xs text-slate-500 mb-3">Direct link to CSV (e.g. Dropbox dl=1). Auto-refreshes daily at 7 AM.</p>
-          <form onSubmit={handleUrlSubmit} className="flex gap-2">
-              <input 
-                  type="url" 
-                  placeholder="https://..." 
-                  value={url}
-                  onChange={(e) => setUrl(e.target.value)}
-                  className="flex-1 bg-slate-950 border border-slate-700 text-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500 text-sm"
-                  required
-              />
-              <button 
-                type="submit" 
-                disabled={isLoading || !url.trim()}
-                className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-lg text-sm transition-colors disabled:opacity-50 whitespace-nowrap"
-              >
-                  Connect
-              </button>
-          </form>
-      </div>
-
-      {isLoading && !activeUrl && (
-        <div className="flex items-center justify-center gap-2 text-indigo-400 py-2">
-          <div className="w-4 h-4 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin"></div>
-          <span className="text-sm font-medium">Processing data...</span>
+        <div className="rounded-xl border border-dashed border-slate-700 bg-slate-900/50 hover:bg-slate-900 transition-colors group h-full">
+          <label htmlFor="sales-upload" className="cursor-pointer flex flex-col items-center justify-center gap-3 p-6 h-full">
+            <div className="p-3 bg-indigo-500/10 rounded-full text-indigo-400 group-hover:scale-110 transition-transform">
+              <UploadIcon />
+            </div>
+            <div className="text-center">
+              <h3 className="font-semibold text-slate-200">Upload Sales CSV</h3>
+              <p className="text-[10px] text-slate-500 mt-1">Standard Sales Data</p>
+            </div>
+            <input
+              id="sales-upload"
+              type="file"
+              accept=".csv,.xlsx"
+              onChange={handleSalesChange}
+              disabled={isLoading}
+              className="hidden"
+            />
+          </label>
         </div>
-      )}
+
+        <div className="rounded-xl border border-dashed border-slate-700 bg-slate-900/50 hover:bg-slate-900 transition-colors group h-full">
+          <label htmlFor="ads-upload" className="cursor-pointer flex flex-col items-center justify-center gap-3 p-6 h-full">
+            <div className="p-3 bg-fuchsia-500/10 rounded-full text-fuchsia-400 group-hover:scale-110 transition-transform">
+              <MegaphoneIcon />
+            </div>
+            <div className="text-center">
+              <h3 className="font-semibold text-slate-200">Upload Ads CSV</h3>
+              <p className="text-[10px] text-slate-500 mt-1">Advertising Expenses</p>
+            </div>
+            <input
+              id="ads-upload"
+              type="file"
+              accept=".csv,.xlsx"
+              onChange={handleAdsChange}
+              disabled={isLoading}
+              className="hidden"
+            />
+          </label>
+        </div>
+      </div>
     </div>
   );
 };