File size: 2,192 Bytes
683d9cb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { motion, AnimatePresence } from 'framer-motion';
import { FaHome, FaChartLine, FaFolderOpen, FaCog, FaFeatherAlt, FaFileUpload } from 'react-icons/fa';
import { BsThreeDots } from 'react-icons/bs';
import Dashboard from './components/Dashboard';
import Sidebar from './components/Sidebar';
import RightBar from './components/RightBar';
import UploadModal from './components/UploadModal';
const App = () => {
const [reports, setReports] = useState([]);
const [activeReport, setActiveReport] = useState(null);
const [isUploadOpen, setIsUploadOpen] = useState(false);
useEffect(() => {
fetchReports();
}, []);
const fetchReports = async () => {
const res = await axios.get('http://localhost:5000/api/reports');
setReports(res.data);
};
return (
<div className="flex min-h-screen bg-black text-white font-sans overflow-hidden">
{/* Left Sidebar (Nav) */}
<Sidebar onOpenUpload={() => setIsUploadOpen(true)} />
{/* Main Content Area */}
<main className="flex-1 border-x border-gray-800 relative overflow-y-auto">
<header className="sticky top-0 z-10 bg-black/80 backdrop-blur-md p-4 border-b border-gray-800">
<h2 className="text-xl font-bold">Home</h2>
</header>
<div className="p-4">
{activeReport ? (
<Dashboard report={activeReport} onClose={() => setActiveReport(null)} />
) : (
<div className="text-center mt-20 text-gray-500">
<p>Select a report from the right sidebar or upload a new one.</p>
</div>
)}
</div>
</main>
{/* Right Sidebar (Stored Files) */}
<RightBar
reports={reports}
onSelect={(r) => setActiveReport(r)}
/>
{/* Upload Modal */}
<AnimatePresence>
{isUploadOpen && (
<UploadModal
close={() => setIsUploadOpen(false)}
refresh={fetchReports}
/>
)}
</AnimatePresence>
</div>
);
};
export default App; |