Added functionality

added securitytools functions

frontend/package.json

@@ -14,9 +14,13 @@
         "@mui/material": "^6.4.8",
         "@tailwindcss/vite": "^4.1.7",
         "axios": "^1.10.0",
+        "csv-parser": "^3.2.0",
+        "express": "^5.1.0",
         "lucide-react": "^0.515.0",
+        "multer": "^2.0.1",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
+        "react-dropzone": "^14.3.8",
         "react-router": "^7.6.0"
     },
     "devDependencies": {
@@ -27,4 +31,4 @@
         "tailwindcss": "^4.1.10",
         "vite": "^6.3.5"
     }
-}
+}

frontend/src/App.jsx

@@ -1,10 +1,11 @@
-import React, { Suspense, useMemo } from "react";
+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 Sidebar from "./components/Sidebar";
-import Baseline from "./components/Baseline";
+const Baseline = lazy(() => import("./components/Baseline"));
+const SecurityTools = lazy(() => import("./components/securitytools"));
 
 function App() {
 
@@ -28,6 +29,7 @@ function App() {
             <Suspense fallback={<div>Loading...</div>}>
               <Routes>
                 <Route path="/baseline" element={<Baseline />} />
+                <Route path="/securitytools" element={<SecurityTools />} />
               </Routes>
             </Suspense>
           </BrowserRouter>

frontend/src/components/Applications.js

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

frontend/src/components/Baseline.jsx

@@ -33,10 +33,10 @@ const Baseline = () => {
             {/* Summary Cards */}
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                 {[
-                    { label: "Windows", color: "bg-blue-600", pattern: "windows" },
-                    { label: "Linux", color: "bg-green-600", pattern: "ubuntu" },
-                    { label: "Servers", color: "bg-red-600", pattern: "server" },
-                    { label: "Workstations", color: "bg-yellow-500", pattern: "workstation" },
+                    { label: "Windows", color: "bg-blue-700", pattern: "windows" },
+                    { label: "Linux", color: "bg-green-700", pattern: "ubuntu" },
+                    { label: "Servers", color: "bg-red-800", pattern: "server" },
+                    { label: "Workstations", color: "bg-yellow-400", pattern: "workstation" },
                 ].map(({ label, color, pattern }) => (
                     <div
                         key={label}

frontend/src/components/CSVProcessing.js

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

frontend/src/components/HomePage.js

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

frontend/src/components/Networking.js

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

frontend/src/components/SettingsConfig.js

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

frontend/src/components/Sidebar.jsx

@@ -4,6 +4,9 @@ import {
   ChevronDown, ChevronRight, Folder
 } from 'lucide-react';
 import AddIcon from '@mui/icons-material/Add';
+import BugReportIcon from '@mui/icons-material/BugReport';
+import EngineeringIcon from '@mui/icons-material/Engineering';
+
 
 const SidebarItem = ({ icon: Icon, label, children }) => {
   const [open, setOpen] = useState(false);
@@ -34,7 +37,7 @@ 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">Velo Dashboard</h2>
+    <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" />
@@ -45,8 +48,8 @@ const Sidebar = () => (
       <div>Endpoint Detection & Response</div>
       <div>Virtual Private Networks</div>
     </SidebarItem>
-    <SidebarItem icon={Globe} label="Virus Totals" />
-    <SidebarItem icon={Globe} label="Configuration & Settings" />
+    <SidebarItem icon={BugReportIcon} label="Virus Totals" />   
+    <SidebarItem icon={EngineeringIcon} label="Settings & Config" />  
   </div>
 );
 

frontend/src/components/VirusTotal.js

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

frontend/src/components/securitytools.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+
+const SecurityTools = () => {
+  const [uploadStatus, setUploadStatus] = useState(null);
+  const [analysisResult, setAnalysisResult] = useState(null);
+
+  const onDrop = useCallback(async (acceptedFiles) => {
+    const formData = new FormData();
+    acceptedFiles.forEach((file) => formData.append("file", file));
+
+    setUploadStatus("Uploading...");
+    try {
+      const res = await fetch("/upload", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!res.ok) throw new Error("Upload failed");
+
+      const data = await res.json();
+      setAnalysisResult(data);
+      setUploadStatus("Upload and analysis complete");
+    } catch (err) {
+      console.error(err);
+      setUploadStatus("Upload failed");
+    }
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  return (
+    <div className="p-6 text-white">
+      <h1 className="text-3xl font-bold mb-6">Security Tools: File Analysis</h1>
+
+      <div
+        {...getRootProps()}
+        className={`border-dashed border-4 rounded-lg p-10 text-center transition-colors duration-300 ${
+          isDragActive ? "border-cyan-400 bg-zinc-800" : "border-zinc-600 bg-zinc-900"
+        }`}
+      >
+        <input {...getInputProps()} />
+        {isDragActive ? (
+          <p>Drop the files here...</p>
+        ) : (
+          <p>Drag and drop files here, or click to browse.</p>
+        )}
+      </div>
+
+      {uploadStatus && <p className="mt-4 text-cyan-400">{uploadStatus}</p>}
+
+      {analysisResult && (
+        <div className="mt-6 bg-zinc-800 p-4 rounded-lg overflow-auto">
+          <h2 className="text-xl font-semibold mb-2">Analysis Result:</h2>
+          <pre className="whitespace-pre-wrap text-sm text-zinc-300">
+            {JSON.stringify(analysisResult, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SecurityTools;