diff --git a/frontend/src/App.js b/frontend/src/App.js index cb41c0e..3779751 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Search, FileText, AlertCircle, Download, Upload, Eye, Filter, CheckCircle, XCircle, Loader, Trash2, Plus, RefreshCw, Edit2, ChevronDown, Shield, Activity } from 'lucide-react'; +import { Search, FileText, AlertCircle, Download, Upload, Eye, Filter, CheckCircle, XCircle, Loader, Trash2, Plus, RefreshCw, Edit2, ChevronDown, Shield, Activity, Menu } from 'lucide-react'; import { useAuth } from './contexts/AuthContext'; import LoginForm from './components/LoginForm'; import UserMenu from './components/UserMenu'; @@ -8,6 +8,10 @@ import AuditLog from './components/AuditLog'; import NvdSyncModal from './components/NvdSyncModal'; import KnowledgeBaseModal from './components/KnowledgeBaseModal'; import KnowledgeBaseViewer from './components/KnowledgeBaseViewer'; +import NavDrawer from './components/NavDrawer'; +import ReportingPage from './components/pages/ReportingPage'; +import KnowledgeBasePage from './components/pages/KnowledgeBasePage'; +import ExportsPage from './components/pages/ExportsPage'; import './App.css'; const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api'; @@ -171,6 +175,8 @@ export default function App() { const [cveDocuments, setCveDocuments] = useState({}); const [quickCheckCVE, setQuickCheckCVE] = useState(''); const [quickCheckResult, setQuickCheckResult] = useState(null); + const [currentPage, setCurrentPage] = useState('home'); + const [navOpen, setNavOpen] = useState(false); const [showAddCVE, setShowAddCVE] = useState(false); const [showUserManagement, setShowUserManagement] = useState(false); const [showAuditLog, setShowAuditLog] = useState(false); @@ -950,6 +956,12 @@ export default function App() { return (
+ setNavOpen(false)} + currentPage={currentPage} + onNavigate={setCurrentPage} + /> {/* Scanning line effect */}
@@ -957,11 +969,22 @@ export default function App() { {/* Header */}
-
-

- STEAM Security Dashboard -

-

NTS Threat Intelligence and Metric Aggregation

+
+ +
+

+ STEAM Security Dashboard +

+

NTS Threat Intelligence and Metric Aggregation

+
{canWrite() && ( @@ -986,8 +1009,8 @@ export default function App() {
- {/* Stats Bar - Modern refined styling */} -
+ {/* Stats Bar - only shown on Home page */} + {currentPage === 'home' &&
Total CVEs
@@ -1008,9 +1031,14 @@ export default function App() {
Critical
{cves.filter(c => c.severity === 'Critical').length}
-
+
}
+ {/* Page content */} + {currentPage === 'reporting' && } + {currentPage === 'knowledge-base' && } + {currentPage === 'exports' && } + {/* User Management Modal */} {showUserManagement && ( setShowUserManagement(false)} /> @@ -1624,8 +1652,8 @@ export default function App() {
)} - {/* Three Column Layout */} -
+ {/* Three Column Layout - Home page only */} + {currentPage === 'home' &&
{/* LEFT PANEL - Wiki/Knowledge Base */}
@@ -2472,7 +2500,7 @@ export default function App() {
{/* End Right Panel */} -
+
} {/* End Three Column Layout */}
diff --git a/frontend/src/components/NavDrawer.js b/frontend/src/components/NavDrawer.js new file mode 100644 index 0000000..a22c0f9 --- /dev/null +++ b/frontend/src/components/NavDrawer.js @@ -0,0 +1,127 @@ +import React from 'react'; +import { X, Home, BarChart2, BookOpen, Download } from 'lucide-react'; + +const NAV_ITEMS = [ + { id: 'home', label: 'Home', icon: Home, color: '#0EA5E9', description: 'Main dashboard' }, + { id: 'reporting', label: 'Reporting', icon: BarChart2,color: '#F59E0B', description: 'Reports & analytics' }, + { id: 'knowledge-base', label: 'Knowledge Base', icon: BookOpen, color: '#10B981', description: 'Articles & documentation' }, + { id: 'exports', label: 'Exports', icon: Download, color: '#8B5CF6', description: 'Export data & reports' }, +]; + +export default function NavDrawer({ isOpen, onClose, currentPage, onNavigate }) { + if (!isOpen) return null; + + return ( + <> + {/* Backdrop */} +
+ + {/* Drawer */} +
+ {/* Drawer header */} +
+
+
+ STEAM +
+
+ Security Dashboard +
+
+ +
+ + {/* Nav items */} + + + {/* Footer */} +
+
+ NTS Threat Intelligence +
+
+
+ + ); +} diff --git a/frontend/src/components/pages/ExportsPage.js b/frontend/src/components/pages/ExportsPage.js new file mode 100644 index 0000000..afbf95b --- /dev/null +++ b/frontend/src/components/pages/ExportsPage.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { Download } from 'lucide-react'; + +export default function ExportsPage() { + return ( +
+
+
+ +
+

+ Exports +

+

+ Under construction — coming soon +

+
+
+ ); +} diff --git a/frontend/src/components/pages/KnowledgeBasePage.js b/frontend/src/components/pages/KnowledgeBasePage.js new file mode 100644 index 0000000..bae66ab --- /dev/null +++ b/frontend/src/components/pages/KnowledgeBasePage.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { BookOpen } from 'lucide-react'; + +export default function KnowledgeBasePage() { + return ( +
+
+
+ +
+

+ Knowledge Base +

+

+ Under construction — coming soon +

+
+
+ ); +} diff --git a/frontend/src/components/pages/ReportingPage.js b/frontend/src/components/pages/ReportingPage.js new file mode 100644 index 0000000..831c472 --- /dev/null +++ b/frontend/src/components/pages/ReportingPage.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { BarChart2 } from 'lucide-react'; + +export default function ReportingPage() { + return ( +
+
+
+ +
+

+ Reporting +

+

+ Under construction — coming soon +

+
+
+ ); +}