mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 11:05:23 +02:00
feat: Add ESLint configuration and enhance data fetching with timeouts and improved error handling.
This commit is contained in:
Christian Vidal Wolf
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
@@ -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 },
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
+45
-53
@@ -1,60 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SAS Analytics Dashboard</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: '#020617', // slate-950
|
||||
surface: '#0f172a', // slate-900
|
||||
border: '#1e293b', // slate-800
|
||||
primary: '#6366f1', // indigo-500
|
||||
secondary: '#64748b', // slate-500
|
||||
}
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SAS Analytics Dashboard</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: '#020617', // slate-950
|
||||
surface: '#0f172a', // slate-900
|
||||
border: '#1e293b', // slate-800
|
||||
primary: '#6366f1', // indigo-500
|
||||
secondary: '#64748b', // slate-500
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
}
|
||||
</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>
|
||||
</head>
|
||||
<body class="bg-background text-slate-200 antialiased overflow-y-auto">
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
|
||||
<body class="bg-background text-slate-200 antialiased overflow-y-auto">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/index.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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>
|
||||
<App />
|
||||
<ErrorBoundary>
|
||||
<App />
|
||||
</ErrorBoundary>
|
||||
</React.StrictMode>
|
||||
);
|
||||
Generated
+4359
File diff suppressed because it is too large
Load Diff
+17
-8
@@ -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-dom": "^19.2.0",
|
||||
"react": "^18.3.1",
|
||||
"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",
|
||||
"@vitejs/plugin-react": "^5.0.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.0"
|
||||
"@types/node": "^22.5.0",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.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"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user