Refactoring pages. Added routing.

frontend/src/App.jsx

@@ -1,11 +1,18 @@
 import React, { Suspense, useMemo, lazy } from "react";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { CssBaseline } from "@mui/material";
-import { BrowserRouter, Routes, Route } from "react-router";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router";
 
 import Sidebar from "./components/Sidebar";
-const Baseline = lazy(() => import("./components/Baseline"));
-const SecurityTools = lazy(() => import("./components/securitytools"));
+
+const HomePage = lazy(() => import("./pages/HomePage"));
+const ApplicationsPage = lazy(() => import("./pages/ApplicationsPage"));
+const BaselinePage = lazy(() => import("./pages/BaselinePage"));
+const CSVProcessingPage = lazy(() => import("./pages/CSVProcessingPage"));
+const NetworkingPage = lazy(() => import("./pages/NetworkingPage"));
+const SecurityToolsPage = lazy(() => import("./pages/SecurityToolsPage"));
+const SettingsConfigPage = lazy(() => import("./pages/SettingsConfigPage"));
+const VirusTotalPage = lazy(() => import("./pages/VirusTotalPage"));
 
 function App() {
 
@@ -22,19 +29,28 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <div className="flex h-screen text-white">
-        <Sidebar />
-        <div className="flex-1 p-6 overflow-auto">
-          <BrowserRouter>
+      
+      <BrowserRouter>
+        <div className="flex h-screen text-white">
+          <Sidebar />
+          <div className="flex-1 p-6 overflow-auto">
             <Suspense fallback={<div>Loading...</div>}>
               <Routes>
-                <Route path="/baseline" element={<Baseline />} />
-                <Route path="/securitytools" element={<SecurityTools />} />
+                <Route index element={<HomePage />} />
+                <Route path="/baseline" element={<BaselinePage />} />
+                <Route path="/securitytools" element={<SecurityToolsPage />} />
+                <Route path="/applications" element={<ApplicationsPage />} />
+                <Route path="/csvprocessing" element={<CSVProcessingPage />} />
+                <Route path="/networking" element={<NetworkingPage />} />
+                <Route path="/settingsconfig" element={<SettingsConfigPage />} />
+                <Route path="/virustotal" element={<VirusTotalPage />} />
+
+                <Route path="*" element={<Navigate to="/" replace />} />
               </Routes>
             </Suspense>
-          </BrowserRouter>
+          </div>
         </div>
-      </div>
+      </BrowserRouter>
     </ThemeProvider>
   );
 }

frontend/src/components/Sidebar.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router';
 import {
   ShieldCheck, Server, Bug, Lock, Globe, Settings,
   ChevronDown, ChevronRight, Folder
@@ -8,15 +9,27 @@ import BugReportIcon from '@mui/icons-material/BugReport';
 import EngineeringIcon from '@mui/icons-material/Engineering';
 
 
-const SidebarItem = ({ icon: Icon, label, children }) => {
+const SidebarItem = ({ icon: Icon, label, href, children }) => {
   const [open, setOpen] = useState(false);
   const hasChildren = !!children;
 
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    if (hasChildren) {
+      setOpen(!open);
+    }
+
+    if (href) {
+      navigate(href);
+    }
+  };
+
   return (
     <div className="text-sm w-full">
       <div
         className="flex items-center justify-between px-4 py-2 cursor-pointer rounded hover:bg-zinc-800 text-white transition-all"
-        onClick={() => hasChildren && setOpen(!open)}
+        onClick={handleClick}
       >
         <div className="flex items-center space-x-3">
           <Icon className="w-5 h-5 text-cyan-400" />
@@ -38,18 +51,18 @@ const SidebarItem = ({ icon: Icon, label, children }) => {
 const Sidebar = () => (
   <div className="h-screen w-64 shadow-lg p-4 flex flex-col space-y-2">
     <h2 className="text-xl font-bold text-white mb-4">Threat Hunt Dashboard</h2>
-    <SidebarItem icon={ShieldCheck} label="HomePage" />
-    <SidebarItem icon={Server} label="Baseline" />
-    <SidebarItem icon={Bug} label="Networking" />
-    <SidebarItem icon={Folder} label="Applications" />
-    <SidebarItem icon={Globe} label="CSV Processing" />
+    <SidebarItem icon={ShieldCheck} label="HomePage" href="/" />
+    <SidebarItem icon={Server} label="Baseline" href="/baseline" />
+    <SidebarItem icon={Bug} label="Networking" href="/networking" />
+    <SidebarItem icon={Folder} label="Applications" href="/applications" />
+    <SidebarItem icon={Globe} label="CSV Processing" href="/csvprocessing" />
     <SidebarItem icon={Settings} label="Security Tools">
       <div>Anti Virus</div>
       <div>Endpoint Detection & Response</div>
       <div>Virtual Private Networks</div>
     </SidebarItem>
-    <SidebarItem icon={BugReportIcon} label="Virus Totals" />   
-    <SidebarItem icon={EngineeringIcon} label="Settings & Config" />  
+    <SidebarItem icon={BugReportIcon} label="Virus Totals" href="/virustotal" />   
+    <SidebarItem icon={EngineeringIcon} label="Settings & Config" href="/settingsconfig" />  
   </div>
 );
 

frontend/src/pages/ApplicationsPage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const Applications = () => {
+const ApplicationsPage = () => {
     return <div>Applications Placeholder</div>;
 };
 
-export default Applications;
+export default ApplicationsPage;

frontend/src/pages/BaselinePage.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 
-const Baseline = () => {
+const BaselinePage = () => {
     const [data, setData] = useState([]);
 
     useEffect(() => {
@@ -77,4 +77,4 @@ const Baseline = () => {
     );
 };
 
-export default Baseline;
+export default BaselinePage;

frontend/src/pages/CSVProcessingPage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const CSVProcessing = () => {
+const CSVProcessingPage = () => {
     return <div>CSV Processing Placeholder</div>;
 };
 
-export default CSVProcessing;
+export default CSVProcessingPage;

frontend/src/pages/NetworkingPage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const Networking = () => {
+const NetworkingPage = () => {
     return <div>Networking Placeholder</div>;
 };
 
-export default Networking;
+export default NetworkingPage;

frontend/src/pages/SecurityToolsPage.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 
-const SecurityTools = () => {
+const SecurityToolsPage = () => {
   const [uploadStatus, setUploadStatus] = useState(null);
   const [analysisResult, setAnalysisResult] = useState(null);
 
@@ -61,4 +61,4 @@ const SecurityTools = () => {
   );
 };
 
-export default SecurityTools;
+export default SecurityToolsPage;

frontend/src/pages/SettingsConfigPage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const SettingsConfig = () => {
+const SettingsConfigPage = () => {
     return <div>Settings & Config Placeholder</div>;
 };
 
-export default SettingsConfig;
+export default SettingsConfigPage;

frontend/src/pages/VirusTotalPage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const VirusTotal = () => {
+const VirusTotalPage = () => {
     return <div>Virus Total Placeholder</div>;
 };
 
-export default VirusTotal;
+export default VirusTotalPage;