Optimized

frontend/src/pages/Dashboard.jsx

@@ -1,70 +1,78 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo, useRef } from "react";
 import { useAuth } from "../context/AuthContext";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import {
-  PieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
+  PieChart, Pie, Cell, Tooltip, ResponsiveContainer,
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, AreaChart, Area
 } from "recharts";
 import {
-  Shield,
-  Cpu,
-  Wifi,
-  Activity,
-  Radio,
+  Shield, Cpu, Wifi, Activity, Github, Linkedin,
+  Server, Terminal, Globe, Zap, AlertTriangle, Lock
 } from "lucide-react";
 import toast from "react-hot-toast";
 import NeonShield from "../components/NeonShield";
-import { useNavigate } from "react-router-dom";
 import ChatAssistant from "./ChatAssistant";
+import CicidsImg from "../assests/fig4_acc.png";
+import BccImg from "../assests/fig3_loss.png";
+import LiveImg from "../assests/dashboard.png";
 
 const COLORS = ["#00e5ff", "#ff0059", "#a78bfa", "#fbbf24", "#10b981"];
 
 export default function Dashboard() {
-  const location = useLocation();
   const navigate = useNavigate();
   const [systemStats, setSystemStats] = useState(null);
   const [threats, setThreats] = useState([]);
   const [mlModels, setMlModels] = useState([]);
   const [loading, setLoading] = useState(true);
   const [showTop, setShowTop] = useState(false);
+  const [isSimulated, setIsSimulated] = useState(false);
+  const [packetCount, setPacketCount] = useState(1240500);
+  const [logs, setLogs] = useState([
+    "[OK] Neural_Engine_Symmetry_Check... PASS",
+    "[INFO] Establishing encrypted tunnel to Node_Alpha...",
+    "[WARN] Anomalous handshake detected at Gateway_7"
+  ]);
 
+  // --- DATA FALLBACKS ---
+  const dummyThreats = [
+    { name: "DDOS", value: 45 }, { name: "MALWARE", value: 32 },
+    { name: "PORT SCAN", value: 18 }, { name: "BRUTE FORCE", value: 12 }
+  ];
+  const displayThreats = threats.length > 0 ? threats : dummyThreats;
+  const displayML = mlModels.length > 0 ? mlModels : [
+    { name: "Neural_Kernel_v4", accuracy: 98.4 },
+    { name: "Behavior_Pulse", accuracy: 96.2 },
+    { name: "Heuristic_Lab", accuracy: 99.1 }
+  ];
+
+  // --- LOGIC: SIMULATED LIVE FEED ---
   useEffect(() => {
-    const scrollContainer = document.querySelector("main.flex-1.overflow-auto");
-    if (!scrollContainer) return;
-    const handleScroll = () => {
-      if (scrollContainer.scrollTop > 300) setShowTop(true);
-      else setShowTop(false);
-    };
-    scrollContainer.addEventListener("scroll", handleScroll);
-    return () => scrollContainer.removeEventListener("scroll", handleScroll);
-  }, []);
+    const logInterval = setInterval(() => {
+      const messages = [
+        `[INFO] Packet scrutinized: ${Math.random().toString(16).slice(2, 10).toUpperCase()}`,
+        `[OK] Filtered traffic from ${Math.floor(Math.random()*255)}.168.${Math.floor(Math.random()*255)}.1`,
+        `[WARN] Latency spike in sector_${Math.floor(Math.random()*9)}`,
+        `[SEC] Mitigated potential ${displayThreats[Math.floor(Math.random()*displayThreats.length)].name} attempt`
+      ];
+      setLogs(prev => [messages[Math.floor(Math.random()*messages.length)], ...prev].slice(0, 8));
+      setPacketCount(prev => prev + Math.floor(Math.random() * 50));
+    }, 3000);
+    return () => clearInterval(logInterval);
+  }, [displayThreats]);
 
   const loadData = async () => {
     try {
       const [sys, ml, th] = await Promise.all([
-        fetch("http://127.0.0.1:5000/api/system/status").then((r) => r.json()),
-        fetch("http://127.0.0.1:5000/api/ml/models").then((r) => r.json()),
-        fetch("http://127.0.0.1:5000/api/live/stats").then((r) => r.json()),
+        fetch("http://127.0.0.1:5000/api/system/status").then(r => r.json()),
+        fetch("http://127.0.0.1:5000/api/ml/models").then(r => r.json()),
+        fetch("http://127.0.0.1:5000/api/live/stats").then(r => r.json()),
       ]);
-      setSystemStats(sys || {});
+      setSystemStats(sys);
       setMlModels(Array.isArray(ml) ? ml : []);
-      setThreats(
-        Object.entries(th || {}).map(([k, v]) => ({
-          name: k.toUpperCase(),
-          value: v,
-        }))
-      );
+      setThreats(Object.entries(th || {}).map(([k, v]) => ({ name: k.toUpperCase(), value: v })));
+      setIsSimulated(false);
     } catch (err) {
-      console.error("Dashboard Error:", err);
-      toast.error("Failed to load dashboard data");
+      setIsSimulated(true);
     } finally {
       setLoading(false);
     }
@@ -72,243 +80,548 @@ export default function Dashboard() {
 
   useEffect(() => {
     loadData();
+    const interval = setInterval(loadData, 10000);
+    return () => clearInterval(interval);
   }, []);
 
   return (
-    <>
-      <div className="relative">
-        {/* CYBER BACKGROUND */}
-        <div className="absolute inset-0 -z-10 pointer-events-none overflow-hidden">
-          <div className="absolute inset-0" style={{ background: "linear-gradient(140deg, rgba(3,6,23,0.75) 0%, rgba(9,19,39,0.7) 40%, rgba(10,26,54,0.6) 75%, rgba(15,7,33,0.65) 100%)" }} />
-          <div className="absolute inset-0 opacity-[0.035] mix-blend-screen" style={{ backgroundImage: "url('https://raw.githubusercontent.com/ayushatlas/assets/main/hexgrid/hexgrid-light.png')", backgroundSize: "350px" }} />
-          <div className="absolute left-0 lg:left-10 top-40 w-[300px] lg:w-[450px] h-[300px] lg:h-[450px] bg-cyan-400/15 blur-[120px] lg:blur-[180px]" />
-          <div className="absolute right-0 lg:right-10 top-10 w-[280px] lg:w-[420px] h-[280px] lg:h-[420px] bg-purple-500/12 blur-[120px] lg:blur-[180px]" />
+    <div className="relative min-h-screen text-slate-200 font-sans selection:bg-accent selection:text-black z-10">
+      {/* 1. DYNAMIC BACKGROUND LAYER */}
+<div className="fixed inset-0 -z-20 pointer-events-none overflow-hidden bg-[#030617]">
+  {/* The Grid Layer */}
+  <div className="absolute inset-0 opacity-[0.15]" style={{ backgroundImage: "radial-gradient(var(--accent) 0.5px, transparent 0.5px)", backgroundSize: "40px 40px" }} />
+  
+  {/* NeonShield Moved Here: Positioned in the center-right behind the main panel */}
+  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[1000px] opacity-40 blur-[2px] -z-0 h-[800px]">
+    <NeonShield />
+  </div>
+
+  {/* Ambient Glows */}
+  <div className="absolute left-[-10%] top-[10%] w-[600px] h-[600px] bg-accent/10 blur-[150px] rounded-full animate-pulse" />
+  <div className="absolute right-[10%] bottom-[10%] w-[400px] h-[400px] bg-purple-500/10 blur-[150px] rounded-full animate-bounce" style={{ animationDuration: '10s' }} />
+</div>
+
+{/* 2. HERO SECTION - MURF.AI INSPIRED REDESIGN */}
+<header className="relative  pb-20 lg:pt-12 lg:pb-20 overflow-hidden">
+  <div className="container mx-auto px-6 lg:px-12 relative z-10">
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
+      
+      {/* LEFT COLUMN: THE CONTENT (6/12 Width) */}
+      <div className="lg:col-span-7 text-center lg:text-left space-y-8">
+        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-accent/20 bg-accent/5 backdrop-blur-md">
+          <div className="w-2 h-2 rounded-full bg-lime-500 animate-ping" />
+          <span className="text-[10px] uppercase tracking-[0.3em] font-black text-accent/80">Neural_Engine_v4.0_Active</span>
         </div>
+        
+        <h1 className="text-6xl md:text-8xl xl:text-9xl font-black tracking-tighter  leading-[0.85]">
+  <span className=" text-transparent bg-clip-text bg-gradient-to-r from-[#00e5ff] via-[#a78bfa] to-[#ff0059] drop-shadow-[0_0_30px_rgba(167,139,250,0.3)] italic ">Network</span> <br /></h1>
+    <span className="text-transparent italic text-8xl bg-clip-text bg-gradient-to-r from-[#00e5ff] via-[#a78bfa] to-[#ff0059] drop-shadow-[0_0_30px_rgba(167,139,250,0.3)]">
+    Intrusion
+  </span>
 
-        {/* HERO HEADER */}
-        <header className="relative mb-12 lg:mb-24">
-          <div className="relative z-20 container mx-auto px-6 lg:px-8 pt-16 lg:pt-24 pb-20 lg:pb-24 lg:ml-1">
-            <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
-              
-              {/* LEFT TEXT */}
-              <div className="space-y-6 lg:space-y-7 text-center lg:text-left">
-                <div className="flex items-center justify-center lg:justify-start gap-3">
-                  <div className="p-2 rounded-full border border-accent/50 shadow-neon">
-                    <Shield size={20} className="text-accent" />
-                  </div>
-                  <span className="text-xs lg:text-sm text-slate-300/80 tracking-wide uppercase">
-                    AstraGuard AI • Adaptive NIDS
-                  </span>
-                </div>
+        
+        <p className="text-slate-400 text-lg md:text-xl font-mono leading-relaxed max-w-2xl mx-auto lg:mx-0 border-l-2 border-accent/20 pl-6 italic">
+          &gt; Analyzing global packet telemetry in real-time. <br />
+          &gt; Heuristic layers: <span className="text-emerald-400 font-bold">SYNCHRONIZED</span>
+        </p>
 
-                <h1 className="text-4xl md:text-6xl lg:text-[70px] lg:leading-[76px] font-extrabold tracking-tight"
-                  style={{ textShadow: "0 0 30px rgba(0,229,255,0.75), 0 0 12px rgba(0,229,255,0.5)" }}>
-                  <span className="text-accent">Protect</span> Your <br /> Systems
-                </h1>
+        <div className="flex flex-wrap justify-center lg:justify-start gap-5 pt-4">
+          <button 
+            onClick={() => navigate("/livetraffic")} 
+            className="px-10 py-5 bg-gradient-to-r border-white/10 border-2 from-accent to-blue-600 text-[var(--accent)] font-black uppercase tracking-tighter hover:scale-105 hover:shadow-[0_0_40px_rgba(0,229,255,0.5)] transition-all duration-300 active:scale-95"
+          >
+            Live Traffic
+          </button>
+          <button 
+            onClick={() => navigate("/threats")} 
+            className="px-10 py-5 border-2 border-white/10 text-white font-black uppercase tracking-tighter hover:shadow-[0_0_40px_rgba(0,229,255,0.5)] transition-all active:scale-95"
+          >
+            System Docs
+          </button>
+        </div>
+      </div>
 
-                <div className="w-full overflow-hidden opacity-50 lg:opacity-100">
-                  <div className="neon-wave" />
-                </div>
+      {/* RIGHT COLUMN: TECHNICAL PERFORMANCE METRICS */}
+<div className="lg:col-span-5 relative hidden lg:block hover:shadow-[0_0_40px_rgba(0,229,255,0.5)]">
+  <div className="rounded-xl border border-indigo-500/30 bg-[#05091a] p-8 shadow-2xl font-mono relative overflow-hidden">
+    
+    {/* Header Area: Primary Model */}
+    <div className="flex justify-between items-start mb-8 pb-6  border-indigo-500/30 border-b-4">
+      <div>
+        <div className="text-[10px] text-slate-500 uppercase tracking-widest mb-1">Architecture_01</div>
+        <div className="text-2xl font-black text-white italic">DNN <span className="text-xs font-normal not-italic text-slate-500">/ Deep Neural Network</span></div>
+      </div>
+      <div className="text-right">
+        <div className="text-[10px] text-slate-500 uppercase tracking-widest mb-1">Benchmark</div>
+        <div className="text-2xl font-black text-emerald-500 italic text-glow-sm">93%</div>
+      </div>
+    </div>
 
-                <p className="text-slate-300/85 text-base lg:text-lg max-w-xl mx-auto lg:mx-0 leading-relaxed">
-                  Our adaptive AI framework provides real-time packet inspection,
-                  threat detection, and security analytics.
-                </p>
-
-                <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-3">
-                  <button onClick={() => navigate("/livetraffic")}
-                    className="w-full sm:w-auto px-8 py-3 rounded-xl bg-accent text-black font-bold text-lg shadow-neon active:scale-95 transition">
-                    Get Started
-                  </button>
-                  <button onClick={() => navigate("/threats")}
-                    className="w-full sm:w-auto px-8 py-3 rounded-xl border border-accent/40 text-accent text-lg hover:bg-accent/10 transition">
-                    Learn more
-                  </button>
-                </div>
-              </div>
+    {/* Dataset & Model Comparison Grid */}
+    <div className="space-y-8">
+      {/* CIC-IDS2018 Section */}
+      <div className="space-y-3">
+        <div className="flex justify-between text-[10px] uppercase">
+          <span className="text-slate-400">Dataset: <span className="text-white">CIC-IDS2018</span></span>
+          <span className="text-slate-500">Loss: 0.042</span>
+        </div>
+        <div className="h-1.5 w-full bg-slate-900 rounded-full overflow-hidden">
+          <div className="h-full bg-slate-400 w-[93%]" />
+        </div>
+      </div>
 
-              {/* RIGHT Floating Shield - Hidden on small mobile to save space */}
-              <div className="relative w-full hidden sm:flex justify-center items-center h-[300px] lg:h-[420px]">
-                <div className="relative w-[95%] lg:w-[90%] h-full rounded-3xl border border-accent/25 backdrop-blur-xl shadow-[0_0_40px_rgba(0,229,255,0.25)] overflow-hidden">
-                  <NeonShield />
-                </div>
-              </div>
+      {/* LightGBM / BCC Darknet Section */}
+      <div className="pt-4 border-t-4 border-indigo-500/30 ">
+        <div className="flex justify-between items-center mb-4">
+          <div>
+            <div className="text-[10px] text-slate-500 uppercase tracking-widest mb-1">Architecture_02</div>
+            <div className="text-xl font-bold text-white uppercase italic tracking-tighter">LightGBM</div>
+          </div>
+          <div className="text-right">
+            <div className="text-[10px] text-slate-500 uppercase tracking-widest mb-1">BCC_Darknet</div>
+            <div className="text-xl font-bold text-accent italic">96%</div>
+          </div>
+        </div>
+        <div className="h-1.5 w-full bg-orange-500 rounded-full overflow-hidden">
+          <div className="h-full bg-accent w-[90%]" />
+        </div>
+      </div>
+    </div>
+
+    {/* Technical Footer: Training Metadata */}
+    <div className="grid grid-cols-2 gap-4 mt-8 pt-6 pb-4 border-t-4 border-indigo-500/30 border-b-4">
+      <div className="space-y-1 text-left ">
+        <div className="text-slate-500 uppercase text-[10px]">Input_Vector</div>
+        <div className="text-white font-bold tracking-widest font-mono italic">SHAPE(None, 78)</div>
+      </div>
+      <div className="space-y-1 text-right">
+        <div className="text-slate-500 uppercase text-[10px]">Optimization</div>
+        <div className="text-white font-bold tracking-widest font-mono italic">ADAM_GRADIENT</div>
+      </div>
+    </div>
+
+    {/* Final Console Output */}
+    <div className="mt-6 p-3 bg-black/40 rounded border border-white/5 font-mono text-[9px] text-slate-600">
+      <div className="flex gap-2">
+        <span className="text-blue-500">[SYS]</span> 
+        Initializing Multi-Layer Perceptron... 
+      </div>
+      <div className="flex gap-2 animate-pulse">
+        <span className="text-emerald-500">[OK]</span> 
+        Weights Loaded Successfully.
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+  </div>
+</header>
+
+{/* 2.5 PROJECT INSIGHT (The "Murf" Style Section) */}
+<section className="container mx-auto px-6 mb-24 relative z-10">
+  <div className="relative overflow-hidden rounded-[3rem] bg-gradient-to-br from-[#0a0f29] to-[#030617] border border-white/5 p-10 md:p-20 shadow-2xl">
+    
+    {/* Visual Accent: Soft Glow */}
+    <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-accent/5 blur-[120px] rounded-full -mr-40 -mt-40 pointer-events-none" />
+
+    <div className="grid lg:grid-cols-2 gap-16 items-center">
+      <div className="space-y-8">
+        <div>
+          <h4 className="text-accent font-mono text-[10px] uppercase tracking-[0.5em] mb-4">Development_Project</h4>
+          <h2 className="text-4xl md:text-6xl font-black text-orange-500 leading-[1.1] italic uppercase tracking-tighter">
+            Transparent <br /> 
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-slate-500">Security Insight</span>
+          </h2>
+        </div>
+
+        <p className="text-slate-400 text-lg font-mono leading-relaxed max-w-xl">
+          AstraGuard simplifies complex network telemetry into a unified visual experience. 
+          By monitoring live traffic flows and applying baseline heuristic analysis, we help 
+          identify patterns and common threat vectors.
+        </p>
+        
+        <div className="flex flex-wrap gap-4">
+          <button 
+            onClick={() => window.open("https://github.com/yishu13")}
+            className="group flex items-center gap-3 px-8 py-4 bg-white text-black font-black uppercase tracking-tighter hover:bg-accent transition-all duration-300"
+          >
+            <Github size={20} />
+            <span>GitHub</span>
+          </button>
+
+          <button 
+            onClick={() => window.open("https://huggingface.co")}
+            className="group flex items-center gap-3 px-8 py-4 border border-white/10 text-white font-bold uppercase tracking-tighter hover:bg-white/5 transition-all duration-300"
+          >
+            <span className="text-2xl group-hover:scale-110 transition-transform">🤗</span>
+            <span>Hugging Face</span>
+          </button>
+        </div>
+      </div>
+
+      {/* RIGHT SIDE: Interactive Visual Element */}
+      <div className="relative hidden lg:block">
+        <div className="relative z-10 rounded-[2rem] border border-white/10 bg-black/40 backdrop-blur-xl p-8 shadow-2xl border-t-accent/30">
+          <div className="flex items-center justify-between mb-8">
+            <div className="flex gap-1.5">
+              <div className="w-2 h-2 rounded-full bg-rose-500/50" />
+              <div className="w-2 h-2 rounded-full bg-amber-500/50" />
+              <div className="w-2 h-2 rounded-full bg-emerald-500/50" />
             </div>
+            <div className="text-[10px] font-mono text-slate-500 uppercase tracking-widest">Astra_Shield_v1.0</div>
           </div>
-        </header>
-
-        {/* MAIN DASHBOARD PANEL */}
-        <main className="container mx-auto px-4 lg:px-6 -mt-10 lg:-mt-20 relative z-30">
-          <div className="glass-shell p-4 lg:p-6 rounded-3xl border border-accent/20 bg-black/40 backdrop-blur-md">
-            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b border-accent/10 pb-4 mb-6 gap-2">
-              <div>
-                <h1 className="text-xl lg:text-2xl font-bold text-accent flex items-center gap-2">
-                  <Shield size={22} /> Cyber SOC Dashboard
-                </h1>
-                <p className="text-slate-300/70 text-xs lg:text-sm">
-                  Real-time AI NIDS operations
-                </p>
-              </div>
+          
+          <div className="space-y-6">
+            <div className="h-2 w-3/4 bg-white/5 rounded-full overflow-hidden">
+              <div className="h-full bg-accent animate-pulse w-[65%]" />
+            </div>
+            <div className="h-2 w-full bg-white/5 rounded-full overflow-hidden">
+              <div className="h-full bg-accent/40 w-[40%]" />
+            </div>
+            <div className="pt-4 border-t border-white/5">
+               <div className="text-[10px] font-mono text-accent uppercase mb-2">Neural_Engine_Status</div>
+               <div className="text-2xl font-mono text-white">98.2% <span className="text-[10px] text-slate-500 uppercase">Accuracy</span></div>
             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
 
-            {/* System + ML + Network - Stack on mobile */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-5 mb-6">
-              <div className="cyber-card p-5 border border-accent/20 bg-accent/5">
-                <h3 className="text-accent font-semibold mb-3 flex items-center gap-2">
-                  <Cpu size={16} /> System Status
-                </h3>
-                {loading ? <p className="animate-pulse text-slate-500">Scanning...</p> : (
-                  <ul className="text-sm text-slate-300 space-y-2">
-                    <li className="flex justify-between"><span>CPU Usage:</span> <span className="text-accent font-mono">{systemStats?.cpu_usage ?? "0"}%</span></li>
-                    <li className="flex justify-between"><span>RAM Usage:</span> <span className="text-accent font-mono">{systemStats?.ram_usage ?? "0"}%</span></li>
-                    <li className="flex justify-between"><span>Disk Usage:</span> <span className="text-accent font-mono">{systemStats?.disk_usage ?? "0"}%</span></li>
-                  </ul>
-                )}
-              </div>
+      {/* 3. TACTICAL INFO BAR (DENSITY ADDITION) */}
+      <div className="container mx-auto px-6 -mt-30 mb-20 grid grid-cols-2 md:grid-cols-4 gap-4 z-40 relative">
+        {[
+          { label: "Packets Scanned", val: packetCount.toLocaleString(), icon: <Globe size={16}/> },
+          { label: "Uptime", val: "99.98%", icon: <Activity size={16}/> },
+          { label: "Threats Blocked", val: "12,402", icon: <Shield size={16}/> },
+          { label: "Nodes Active", val: "24/24", icon: <Server size={16}/> }
+        ].map((item, i) => (
+          <div key={i} className="p-4 rounded-xl border border-white/5 bg-black/60 backdrop-blur-xl group hover:border-accent/50 transition-all text-[var(--accent)]">
+            <div className="flex items-center gap-3 text-[var(--accent)] mb-2">
+              {item.icon} <span className=" uppercase font-bold text-orange-600 tracking-widest">{item.label}</span>
+            </div>
+            <div className="text-xl font-mono font-bold text-[var(--accent)] group-hover:text-accent transition-colors">{item.val}</div>
+          </div>
+        ))}
+      </div>
 
-              <div className="cyber-card p-5 border border-accent/20 bg-accent/5">
-                <h3 className="text-accent font-semibold mb-3 flex items-center gap-2">
-                  <Activity size={16} /> ML Model Status
-                </h3>
-                {mlModels.length > 0 ? (
-                  <ul className="text-sm text-slate-300 space-y-2">
-                    {mlModels.map((m, i) => (
-                      <li key={i} className="flex justify-between border-b border-white/5 pb-1 last:border-0">
-                        <span>{m.name}</span>
-                        <span className="text-accent font-mono">{m.accuracy ?? "98.2"}%</span>
-                      </li>
-                    ))}
-                  </ul>
-                ) : <p className="text-slate-500 text-xs">No models active</p>}
-              </div>
+        {/* 3.5 FEATURE SPOTLIGHT SECTION */}
+<section className="container mx-auto px-6 mb-20 relative z-10">
+  <div className="relative overflow-hidden rounded-[3rem] bg-gradient-to-br from-[#0a0f29] to-[#030617] border border-white/5 p-8 md:p-16">
+    
+    {/* Background Decorative Glow */}
+    <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-accent/5 blur-[120px] rounded-full -mr-64 -mt-64" />
 
-              <div className="cyber-card p-5 border border-accent/20 bg-accent/5 md:col-span-2 lg:col-span-1">
-                <h3 className="text-accent font-semibold mb-3 flex items-center gap-2">
-                  <Wifi size={16} /> Network Health
+    <div className="grid lg:grid-cols-2 gap-12 items-center">
+      <div>
+        <h4 className="text-accent font-mono text-xs uppercase tracking-[0.4em] mb-4">Astra_Studio_v1</h4>
+        <h2 className="text-4xl md:text-5xl font-black  leading-tight mb-6 italic uppercase text-[var(--accent)] ">
+          Network Intrusion  <br /> <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500"> Based On Two Dataset </span>
+        </h2>
+        <p className="text-slate-400 text-lg font-mono mb-10 leading-relaxed">
+          Transition from raw data to actionable intelligence using our Neural Interface. 
+    Visualize live traffic flows and utilize baseline heuristic models to categorize 
+    network activity and identify common threat vectors.
+        </p>
+        
+        <div className="flex flex-wrap gap-4">
+          <button 
+            onClick={() => window.open("https://github.com/ayu-yishu13")}
+            className="px-8 py-4 bg-white text-black font-black uppercase tracking-tighter hover:bg-indigo-500 transition-all flex items-center gap-2"
+          >
+            <Github size={18} /> Github
+          </button>
+          <button 
+            onClick={() => window.open("https://huggingface.co/CodebaseAi")}
+            className="px-8 py-4 border border-white/20 text-white font-bold uppercase tracking-tighter hover:bg-white/5 transition-all flex items-center gap-2"
+          >
+            <span className="text-xl">🤗</span> Hugging Face
+          </button>
+        </div>
+      </div>
+
+      {/* The "Visual Card" - Mimicking the Murf.ai right side */}
+      <div className="relative">
+        <div className="relative z-10 rounded-2xl border border-white/10 bg-black/40 backdrop-blur-md p-2 shadow-2xl">
+           <img 
+             src="/path-to-your-ui-preview.png" 
+             alt="Interface Preview" 
+             className="rounded-xl opacity-80"
+           />
+        </div>
+        {/* Floating "Magic" Card */}
+        <div className="absolute -bottom-6 -left-6 z-20 w-48 p-4 rounded-xl border border-accent/30 bg-[#030617] shadow-[0_20px_50px_rgba(0,0,0,0.5)] animate-bounce" style={{ animationDuration: '4s' }}>
+          <div className="flex items-center gap-2 mb-2">
+             <div className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]" />
+             <span className="text-[10px] font-mono text-slate-400">Neural_Sync</span>
+          </div>
+          <div className="h-1 w-full bg-white/5 rounded-full overflow-hidden">
+             <div className="h-full bg-accent w-3/4" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+      {/* 4. PRIMARY DASHBOARD PANEL */}
+      <main className="container mx-auto px-4 lg:px-6 pb-20 relative z-10">
+        <div className="glass-shell p-6 lg:p-10 rounded-[2rem] border border-white/10 bg-black/20 backdrop-blur-xl shadow-2xl overflow-hidden relative">
+          
+          {/* Subtle Corner Deco */}
+          <div className="absolute top-0 right-0 w-32 h-32 bg-accent/5 rounded-bl-full pointer-events-none" />
+
+          {/* Section: Status & Gauges */}
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-12">
+            
+            {/* System Resource Gauges */}
+            <div className="lg:col-span-4 space-y-8 p-6 rounded-2xl border border-white/5 bg-white/[0.02]">
+              <div className="flex justify-between items-center">
+                <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.3em] flex items-center gap-2">
+                  <Cpu size={14} /> Neural Load
                 </h3>
-                {threats.length > 0 ? (
-                  <ul className="text-sm text-slate-300 space-y-2">
-                    {threats.slice(0, 3).map((t, i) => (
-                      <li key={i} className="flex justify-between">
-                        <span className="truncate mr-2">{t.name}</span>
-                        <span className="text-rose-400 font-mono">{t.value}</span>
-                      </li>
-                    ))}
-                  </ul>
-                ) : <p className="text-slate-500 text-xs">Awaiting traffic...</p>}
+                <span className="text-[8px] font-mono text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded">Nominal</span>
               </div>
+              
+              {[
+                { label: "Cortex Processing", val: systemStats?.cpu_usage ?? (isSimulated ? "32" : "0") },
+                { label: "Synaptic Memory", val: systemStats?.ram_usage ?? (isSimulated ? "54" : "0") },
+                { label: "Buffer Capacity", val: systemStats?.disk_usage ?? (isSimulated ? "18" : "0") }
+              ].map((s, i) => (
+                <div key={i} className="space-y-2">
+                  <div className="flex justify-between text-[10px] font-mono uppercase text-slate-400">
+                    <span>{s.label}</span>
+                    <span className="text-accent">{s.val}%</span>
+                  </div>
+                  <div className="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
+                    <div className="h-full bg-gradient-to-r from-accent to-blue-500 transition-all duration-1000 shadow-[0_0_10px_var(--accent)]" style={{ width: `${s.val}%` }} />
+                  </div>
+                </div>
+              ))}
             </div>
 
-            {/* Charts - Stacks on mobile */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
-              <div className="cyber-card border border-accent/15 p-4 lg:p-5 h-[320px] lg:h-[380px]">
-                <h3 className="text-accent mb-4 font-semibold text-sm lg:text-base uppercase tracking-wider">
-                  Threat Class Distribution
-                </h3>
-                <div className="h-full pb-10">
-                  {threats.length > 0 ? (
-                    <ResponsiveContainer width="100%" height="100%">
-                      <PieChart>
-                        <Pie data={threats} dataKey="value" outerRadius="80%" innerRadius="60%" paddingAngle={5}>
-                          {threats.map((entry, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} stroke="rgba(0,0,0,0)" />)}
-                        </Pie>
-                        <Tooltip contentStyle={{ backgroundColor: '#030617', border: '1px solid #00e5ff', borderRadius: '8px' }} />
-                      </PieChart>
-                    </ResponsiveContainer>
-                  ) : <div className="flex items-center justify-center h-full text-slate-500">No Data</div>}
-                </div>
+            {/* AI Model Intelligence */}
+            <div className="lg:col-span-4 p-6 rounded-2xl border border-white/5 bg-white/[0.02]">
+              <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.3em] mb-8 flex items-center gap-2">
+                <Activity size={14} /> Logic Core Confidence
+              </h3>
+              <div className="space-y-4">
+                {displayML.map((m, i) => (
+                  <div key={i} className="group flex justify-between items-center p-3 rounded-xl border border-white/5 bg-black/20 hover:border-accent/30 transition-all">
+                    <span className="text-xs font-mono text-slate-300 italic">{m.name}</span>
+                    <div className="flex items-center gap-2">
+                      <div className="w-12 h-1 bg-white/10 rounded-full overflow-hidden">
+                        <div className="h-full bg-emerald-500" style={{ width: `${m.accuracy}%` }} />
+                      </div>
+                      <span className="text-emerald-400 font-mono text-xs">{m.accuracy}%</span>
+                    </div>
+                  </div>
+                ))}
               </div>
+            </div>
 
-              <div className="cyber-card border border-accent/15 p-4 lg:p-5 h-[320px] lg:h-[380px]">
-                <h3 className="text-accent mb-4 font-semibold text-sm lg:text-base uppercase tracking-wider">
-                  Threat Count Overview
-                </h3>
-                <div className="h-full pb-10">
-                  {threats.length > 0 ? (
-                    <ResponsiveContainer width="100%" height="100%">
-                      <BarChart data={threats}>
-                        <CartesianGrid strokeDasharray="3 3" strokeOpacity={0.05} vertical={false} />
-                        <XAxis dataKey="name" stroke="#94a3b8" fontSize={10} tickLine={false} axisLine={false} />
-                        <YAxis stroke="#94a3b8" fontSize={10} tickLine={false} axisLine={false} />
-                        <Tooltip cursor={{ fill: 'rgba(0,229,255,0.05)' }} contentStyle={{ backgroundColor: '#030617', border: '1px solid #00e5ff' }} />
-                        <Bar dataKey="value" fill="#00e5ff" radius={[4, 4, 0, 0]} barSize={30} />
-                      </BarChart>
-                    </ResponsiveContainer>
-                  ) : <div className="flex items-center justify-center h-full text-slate-500">Awaiting input</div>}
-                </div>
+            {/* Tactical Threat Feed */}
+            <div className="lg:col-span-4 p-6 rounded-2xl border border-white/5 bg-white/[0.02]">
+              <h3 className="text-rose-500 text-[10px] font-black uppercase tracking-[0.3em] mb-8 flex items-center gap-2">
+                <AlertTriangle size={14} /> Priority Intercepts
+              </h3>
+              <div className="space-y-3">
+                {displayThreats.slice(0, 3).map((t, i) => (
+                  <div key={i} className="group relative flex justify-between items-center p-3 rounded-xl border border-rose-500/10 bg-rose-500/5 hover:bg-rose-500/10 transition-all">
+                    <div>
+                      <div className="text-[10px] text-slate-500 uppercase font-mono">Type_{t.name}</div>
+                      <div className="text-rose-400 font-bold text-sm tracking-tight">{t.value} Attempts</div>
+                    </div>
+                    <button className="p-2 opacity-0 group-hover:opacity-100 bg-rose-500 text-white rounded transition-all active:scale-90">
+                      <Lock size={12}/>
+                    </button>
+                  </div>
+                ))}
               </div>
             </div>
           </div>
-        </main>
-
-        {/* FOOTER - Now fully responsive */}
-        <footer className="mt-24 bg-[#030617]/95 border-t border-accent/20 relative">
-          <div className="relative container mx-auto px-6 lg:px-8 py-12 lg:py-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12 z-10 text-center sm:text-left">
-            <div>
-              <h2 className="text-accent text-2xl lg:text-3xl font-bold mb-3">AI-NIDS</h2>
-              <p className="text-slate-400 text-sm leading-relaxed mx-auto sm:mx-0 max-w-xs">
-                Adaptive AI-powered Network Intrusion Detection System built for real-time defense.
-              </p>
-              <div className="flex justify-center sm:justify-start gap-4 mt-6">
-                 {/* Socials remain same but centered for mobile */}
-                 <button onClick={() => window.open("https://github.com/yishu13", "_blank")} className="p-2 rounded-full border border-accent/40 text-accent hover:bg-accent/10 transition">
-                  <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .5C5.73.5.75 5.48.75 11.76c0 4.93 3.19 9.11 7.61 10.59.56.1.77-.24.77-.54 0-.27-.01-1-.02-1.96-3.09.67-3.74-1.49-3.74-1.49-.5-1.27-1.22-1.61-1.22-1.61-.99-.67.08-.66.08-.66 1.1.08 1.67 1.13 1.67 1.13.98 1.68 2.58 1.2 3.21.92.1-.72.38-1.2.7-1.48-2.47-.28-5.07-1.24-5.07-5.49 0-1.21.43-2.2 1.13-2.98-.11-.28-.49-1.4.11-2.92 0 0 .92-.29 3.02 1.14 10.45 10.45 0 0 1 2.75-.37c.93.01 1.86.12 2.75.37 2.1-1.43 3.01-1.14 3.01-1.14.6 1.52.22 2.64.11 2.92.7.78 1.13 1.77 1.13 2.98 0 4.26-2.61 5.21-5.09 5.48.39.33.74.98.74 1.98 0 1.43-.01 2.58-.01 2.93 0 .3.2.65.78.54C19.06 20.87 22.25 16.69 22.25 11.76 22.25 5.48 17.27.5 12 .5z" /></svg>
-                 </button>
-                 <button onClick={() => window.open("https://www.linkedin.com/in/ayushrai13", "_blank")} className="p-2 rounded-full border border-accent/40 text-accent hover:bg-accent/10 transition">
-                  <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5.001 2.5 2.5 0 0 1 0-5.001zM3 9h4v12H3zM9 9h3.8v1.6h.1c.5-.9 1.8-1.9 3.7-1.9C21.2 8.7 22 10.9 22 14.1V21h-4v-6.1c0-1.6-.6-2.7-2-2.7-1.1 0-1.7.8-2 1.6-.1.2-.1.6-.1.9V21H9z" /></svg>
-                 </button>
+
+          {/* Section: Visual Analytics */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
+            <div className="p-8 rounded-3xl border border-white/5 bg-white/[0.01]">
+              <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.3em] mb-8">Classification Distribution</h3>
+              <div className="h-64">
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie data={displayThreats} dataKey="value" outerRadius="100%" innerRadius="75%" paddingAngle={10}>
+                      {displayThreats.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} stroke="none" />)}
+                    </Pie>
+                    <Tooltip contentStyle={{ backgroundColor: '#030617', border: '1px solid #00e5ff', borderRadius: '12px' }} />
+                  </PieChart>
+                </ResponsiveContainer>
               </div>
             </div>
 
-            {/* Footer columns: stack on small, 2x2 on medium */}
-            <div className="hidden sm:block">
-              <h3 className="text-accent font-semibold mb-3">Platform</h3>
-              <ul className="space-y-2 text-slate-300 text-sm">
-                <li className="hover:text-accent cursor-pointer" onClick={() => navigate("/livetraffic")}>Live Traffic</li>
-                <li className="hover:text-accent cursor-pointer" onClick={() => navigate("/alerts")}>AI Alerts</li>
-              </ul>
-            </div>
-            
-            <div className="hidden lg:block">
-              <h3 className="text-accent font-semibold mb-3">Security</h3>
-              <ul className="space-y-2 text-slate-300 text-sm">
-                <li>Threat Intel</li>
-                <li>Anomaly Detection</li>
-              </ul>
+            <div className="p-8 rounded-3xl border border-white/5 bg-white/[0.01]">
+              <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.3em] mb-8">Temporal Analysis</h3>
+              <div className="h-64">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={displayThreats}>
+                    <CartesianGrid strokeDasharray="3 3" strokeOpacity={0.03} vertical={false} />
+                    <XAxis dataKey="name" fontSize={10} tick={{ fill: '#475569' }} axisLine={false} tickLine={false} />
+                    <YAxis fontSize={10} tick={{ fill: '#475569' }} axisLine={false} tickLine={false} />
+                    <Bar dataKey="value" fill="var(--accent)" radius={[6, 6, 0, 0]} barSize={40} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
             </div>
+          </div>
 
-            <div className="hidden lg:block">
-              <h3 className="text-accent font-semibold mb-3">Resources</h3>
-              <ul className="space-y-2 text-slate-300 text-sm">
-                <li>Documentation</li>
-                <li>Support Center</li>
-              </ul>
+          {/* Section: The Live Terminal Feed */}
+          <div className="rounded-2xl border border-white/5 bg-black/80 p-5 font-mono">
+            <div className="flex items-center gap-2 mb-4 text-accent/60">
+              <Terminal size={14} />
+              <span className="text-[10px] uppercase tracking-[0.4em]">Root@NIDS_AstraGuard:~# Live_Feed</span>
+            </div>
+            <div className="space-y-1 h-32 overflow-hidden flex flex-col-reverse">
+              {logs.map((log, i) => (
+                <div key={i} className={`text-[11px] ${log.includes('[WARN]') ? 'text-amber-500' : log.includes('[SEC]') ? 'text-rose-500' : 'text-slate-500'}`}>
+                   {log}
+                </div>
+              ))}
             </div>
           </div>
+        </div>
+      </main>
 
-          <div className="border-t border-accent/10 py-6 text-center text-slate-500 text-xs">
-            © {new Date().getFullYear()} AI-NIDS • Adaptive Cyber Defense
-          </div>
-        </footer>
+      {/* 3. PROJECT ARCHITECTURE & INTERFACE HIGHLIGHTS */}
+<section className="container mx-auto px-6 mb-24 relative z-10">
+  <div className="mb-12">
+    <h3 className="text-5xl italic font-bold uppercase tracking-tighter mb-2  bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-slate-500">Technical Implementation</h3>
+    <div className="h-1 w-12 bg-slate-700" />
+  </div>
+
+  <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+    
+    {/* HIGHLIGHT 1: Model Training/Results */}
+    <div className="group space-y-4">
+      <div className="aspect-video rounded-lg border border-slate-800 bg-slate-900/50 overflow-hidden relative">
+        <img 
+          src={CicidsImg}
+          alt="CIC-IDS2018 Training Results" 
+          className="object-cover w-full h-full grayscale group-hover:grayscale-0 transition-all duration-500"
+        />
+        <div className="absolute top-2 right-2 px-2 py-1 bg-black/80 rounded text-[9px] font-mono text-emerald-500 border border-emerald-500/20">
+          93% ACCURACY
+        </div>
+      </div>
+      <div>
+        <h4 className="text-white font-bold text-sm uppercase">01. Model Validation</h4>
+        <p className="text-slate-500 text-xs font-mono leading-relaxed mt-1">
+          Performance metrics for the Deep Neural Network (DNN) trained on the CIC-IDS2018 dataset.
+        </p>
       </div>
+    </div>
 
-      {/* FLOATING BACK-TO-TOP BUTTON */}
-      {showTop && (
-        <button
-          onClick={() => {
-            const scrollContainer = document.querySelector("main.flex-1.overflow-auto");
-            scrollContainer?.scrollTo({ top: 0, behavior: "smooth" });
-          }}
-          className="fixed bottom-6 lg:bottom-12 left-1/2 -translate-x-1/2 z-[200] w-14 h-14 lg:w-16 lg:h-16 rounded-full flex items-center justify-center bg-accent/20 backdrop-blur-xl border border-accent/40 shadow-neon active:scale-90 transition-all"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M12 19V5m0 0l-6 6m6-6l6 6" />
-          </svg>
-        </button>
-      )}
+    {/* HIGHLIGHT 2: Live Traffic Monitoring */}
+    <div className="group space-y-4">
+      <div className="aspect-video rounded-lg border border-slate-800 bg-slate-900/50 overflow-hidden relative">
+        <img 
+          src={LiveImg} 
+          alt="Live Traffic Capture" 
+          className="object-cover w-full h-full grayscale group-hover:grayscale-0 transition-all duration-500"
+        />
+        <div className="absolute top-2 right-2 px-2 py-1 bg-black/80 rounded text-[9px] font-mono text-accent border border-accent/20">
+          REAL-TIME
+        </div>
+      </div>
+      <div>
+        <h4 className="text-white font-bold text-sm uppercase">02. Packet Ingestion</h4>
+        <p className="text-slate-500 text-xs font-mono leading-relaxed mt-1">
+          Visualization of incoming flow features before classification by the LightGBM engine.
+        </p>
+      </div>
+    </div>
+
+    {/* HIGHLIGHT 3: Darknet Classification */}
+    <div className="group space-y-4">
+      <div className="aspect-video rounded-lg border border-slate-800 bg-slate-900/50 overflow-hidden relative">
+        <img 
+          src={BccImg}
+          alt="BCC Darknet Results" 
+          className="object-cover w-full h-full grayscale group-hover:grayscale-0 transition-all duration-500"
+        />
+        <div className="absolute top-2 right-2 px-2 py-1 bg-black/80 rounded text-[9px] font-mono text-amber-500 border border-amber-500/20">
+          96% ACCURACY
+        </div>
+      </div>
+      <div>
+        <h4 className="text-white font-bold text-sm uppercase">03. Darknet Analysis</h4>
+        <p className="text-slate-500 text-xs font-mono leading-relaxed mt-1">
+          Identifying malicious patterns using the BCC Darknet dataset with ensemble learning.
+        </p>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+      {/* FOOTER */}
+      <footer className="mt-24 border-t border-white/5 bg-[#030617] py-20">
+        <div className="container mx-auto px-6 lg:px-12">
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-16">
+            <div className="md:col-span-5">
+              <div className="flex items-center gap-2 mb-6 group cursor-pointer">
+                <div className="w-10 h-10 rounded-lg bg-accent/10 border border-accent/40 flex items-center justify-center group-hover:bg-accent group-hover:text-orange-700 text-accent transition-all">
+                  <Shield size={20} />
+                </div>
+                <h2 className="text-2xl font-black italic tracking-tighter uppercase">AI-NIDS</h2>
+              </div>
+              <p className="text-slate-500 font-mono text-[10px] uppercase leading-relaxed mb-8 max-w-sm">
+    <span className="text-accent/60 font-bold">// ENCRYPTED SESSION ACTIVE</span> <br />
+    AstraGuard is a decentralized neural defense platform monitoring global packet telemetry. 
+    Neural-layer packet filtering enabled via Secure_V4 Protocol. 
+    Heuristic mitigation active across 24 edge nodes.
+  </p>
+              <div className="flex gap-4 text-accent">
+                <button onClick={() => window.open("https://github.com/yishu13")} className="w-12 h-12 rounded-xl border border-white/5 bg-white/5 flex items-center justify-center hover:border-accent transition-all text-slate-400 hover:text-accent">
+                  <Github size={20} />
+                </button>
+                <button onClick={() => window.open("https://linkedin.com/in/ayushrai13")} className="w-12 h-12 rounded-xl border border-white/5 bg-white/5 flex items-center justify-center hover:border-accent transition-all text-slate-400 hover:text-accent">
+                  <Linkedin size={20} />
+                </button>
+              </div>
+            </div>
+            
+            <div className="md:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-8">
+              {[
+                { title: "Network", links: ["Live Traffic", "AI Alerts", "Protocol Analysis"] },
+                { title: "Intelligence", links: ["Threat Maps", "Core Logs", "ML Training"] },
+                { title: "Support", links: ["Documentation", "API Spec", "Whitepaper"] }
+              ].map((group, i) => (
+                <div key={i}>
+                  <h4 className="text-accent text-[10px] font-black uppercase tracking-widest mb-6 italic">{group.title}</h4>
+                  <ul className="space-y-4">
+                    {group.links.map((link, j) => (
+                      <li key={j} className="text-xs text-slate-500 hover:text-white cursor-pointer transition-colors font-mono">&gt; {link}</li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+          
+          <div className="mt-20 pt-8 border-t border-white/5 flex flex-col sm:flex-row justify-between items-center gap-6">
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+                <span className="text-[10px] font-mono text-emerald-500/80 uppercase tracking-widest">Global_Status: Online</span>
+              </div>
+            </div>
+            <div className="text-[10px] font-mono text-slate-700 uppercase tracking-widest">
+              © {new Date().getFullYear()} ASTRAGUARD // PROTOCOL_V.04
+            </div>
+          </div>
+        </div>
+      </footer>
 
       <ChatAssistant />
-    </>
+    </div>
   );
-}
-
+}

frontend/src/pages/FlowPage.jsx

@@ -2,29 +2,14 @@ import React, { useMemo, useState, useEffect, useRef } from "react";
 import ChatAssistant from "./ChatAssistant";
 import { useLocation, useNavigate } from "react-router-dom";
 import {
-  Shield,
-  Lock,
-  Server,
-  Activity,
-  Wifi,
-  Play,
-  Pause,
-  Zap,
-  Radar,
-  RefreshCcw,
-  FileDown,
+  Shield, Lock, Server, Activity, Wifi, Play, Pause, Zap, Radar, RefreshCcw, FileDown,
 } from "lucide-react";
 import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
 } from "recharts";
 import jsPDF from "jspdf";
 import html2canvas from "html2canvas";
+import toast, { Toaster } from "react-hot-toast"; // Fixed missing import
 
 function useQuery() {
   return new URLSearchParams(useLocation().search);
@@ -49,63 +34,55 @@ export default function FlowPage() {
     getComputedStyle(document.body).getPropertyValue("--accent") || "#00e5ff"
   );
 
-  // 🌀 Listen for theme color changes (syncs with system theme)
   useEffect(() => {
     const observer = new MutationObserver(() => {
       const newAccent = getComputedStyle(document.body).getPropertyValue("--accent");
       setAccentColor(newAccent.trim());
     });
-
     observer.observe(document.body, { attributes: true, attributeFilter: ["class"] });
-
     return () => observer.disconnect();
   }, []);
 
-  // 🧠 Generate sample logs
   useEffect(() => {
     const interval = setInterval(() => {
       if (!paused && !replayActive) {
         const t = new Date().toLocaleTimeString();
-        const fake = `[${t}] ${["TOR", "VPN", "I2P"][Math.floor(Math.random() * 3)]} flow → ${
-          Math.random() > 0.6 ? "⚠️ Suspicious" : "✅ Normal"
-        }`;
+        const fake = `[${t}] ${type} flow → ${Math.random() > 0.6 ? "⚠️ Suspicious" : "✅ Normal"}`;
         setLogs((p) => [fake, ...p.slice(0, 10)]);
       }
     }, 1500);
     return () => clearInterval(interval);
-  }, [paused, replayActive]);
+  }, [paused, replayActive, type]);
 
-  // 🎯 Flow definitions
   const flow = useMemo(() => {
     const titleMap = {
-      TOR: "TOR Network Attack Flow Simulation",
-      I2P: "I2P Encrypted Communication Flow",
-      VPN: "VPN Tunnel Obfuscation Simulation",
-      FREENET: "Freenet Decentralized Data Flow",
-      ZERONET: "ZeroNet Peer-to-Peer Data Flow",
+      TOR: "TOR Network Attack Flow",
+      I2P: "I2P Encrypted Flow",
+      VPN: "VPN Tunnel Simulation",
+      FREENET: "Freenet Data Flow",
+      ZERONET: "ZeroNet P2P Flow",
     };
 
     const nodes = [
-      { id: "attacker", label: "Attacker Origin", x: 100, y: 200, icon: <Activity size={16} /> },
-      { id: "entry", label: "Entry Node", x: 280, y: 120, icon: <Lock size={16} /> },
-      { id: "relay", label: "Relay Network", x: 500, y: 150, icon: <Wifi size={16} /> },
-      { id: "exit", label: "Exit Node", x: 720, y: 200, icon: <Lock size={16} /> },
-      { id: "victim", label: "Victim System", x: 940, y: 250, icon: <Server size={16} /> },
-      { id: "detection", label: "Detection AI", x: 1160, y: 250, icon: <Shield size={16} /> },
+      { id: "attacker", label: "Origin", x: 100, y: 200, icon: <Activity size={16} /> },
+      { id: "entry", label: "Entry", x: 300, y: 120, icon: <Lock size={16} /> },
+      { id: "relay", label: "Relay", x: 550, y: 150, icon: <Wifi size={16} /> },
+      { id: "exit", label: "Exit", x: 800, y: 200, icon: <Lock size={16} /> },
+      { id: "victim", label: "Victim", x: 1050, y: 250, icon: <Server size={16} /> },
+      { id: "detection", label: "AI", x: 1250, y: 250, icon: <Shield size={16} /> },
     ];
 
     const paths = [
-      "M100 200 C200 100, 240 100, 280 120",
-      "M280 120 C380 100, 460 120, 500 150",
-      "M500 150 C600 160, 660 180, 720 200",
-      "M720 200 C820 240, 880 260, 940 250",
-      "M940 250 C1040 260, 1100 260, 1160 250",
+      "M100 200 C200 100, 240 100, 300 120",
+      "M300 120 C400 100, 480 120, 550 150",
+      "M550 150 C650 160, 720 180, 800 200",
+      "M800 200 C950 240, 1000 260, 1050 250",
+      "M1050 250 C1150 260, 1200 260, 1250 250",
     ];
 
     return { title: titleMap[type], nodes, paths };
   }, [type]);
 
-  // 🎞️ Replay Animation
   useEffect(() => {
     if (replayActive) {
       let stage = 0;
@@ -119,9 +96,8 @@ export default function FlowPage() {
       }, 1200);
       return () => clearInterval(interval);
     }
-  }, [replayActive]);
+  }, [replayActive, flow.nodes.length]);
 
-  // 🧾 Export as PDF
   const exportPDF = async () => {
     const el = flowRef.current;
     const canvas = await html2canvas(el);
@@ -130,246 +106,272 @@ export default function FlowPage() {
     pdf.save(`${type}_Flow_Report.pdf`);
   };
 
-  // 📊 Comparison data
   const compareData = [
     { name: "TOR", risk: 85, detection: 92 },
     { name: "VPN", risk: 65, detection: 75 },
     { name: "I2P", risk: 75, detection: 88 },
     { name: "Freenet", risk: 50, detection: 70 },
-    { name: "ZeroNet", risk: 60, detection: 73 },
   ];
 
   return (
-    <div
-      ref={flowRef}
-      className="relative min-h-screen bg-[var(--card)] text-[var(--text)] overflow-hidden transition-colors duration-500"
-    >
-      {/* Subtle animated theme glow */}
-      <div
-        className="absolute inset-0 blur-3xl opacity-20 pointer-events-none animate-pulse"
-        style={{
-          background: `radial-gradient(circle at 50% 50%, ${accentColor}55 0%, transparent 70%)`,
-        }}
-      />
+    <div ref={flowRef} className="relative min-h-screen bg-[var(--card)] text-[var(--text)] overflow-x-hidden pb-32">
+      <Toaster position="bottom-right" />
+      <div className="absolute inset-0 blur-3xl opacity-20 pointer-events-none animate-pulse"
+        style={{ background: `radial-gradient(circle at 50% 50%, ${accentColor}55 0%, transparent 70%)` }} />
 
-      {/* Header */}
-      <div className="flex items-center justify-between p-6 relative z-10">
-        <button
-          onClick={() => navigate(-1)}
-          className="px-4 py-2 bg-[var(--card)]/50 border border-[var(--accent)]/30 rounded-lg text-[var(--accent)] hover:bg-[var(--accent)]/10 transition"
-        >
+      {/* Responsive Header */}
+      <header className="flex flex-wrap items-center justify-between p-4 md:p-6 relative z-10 gap-4">
+        <button onClick={() => navigate(-1)} className="px-4 py-2 bg-[var(--card)]/50 border border-[var(--accent)]/30 rounded-lg text-[var(--accent)] text-sm">
           ← Back
         </button>
-        <h2 className="text-3xl font-bold text-[var(--accent)] tracking-wide drop-shadow-lg">
+        <h2 className="text-xl md:text-3xl font-bold text-[var(--accent)] text-center flex-1 md:flex-none">
           {flow.title}
         </h2>
-        <button
-          onClick={exportPDF}
-          className="px-3 py-2 bg-[var(--accent)]/20 border border-[var(--accent)]/30 rounded-lg text-[var(--accent)] hover:bg-[var(--accent)]/30 flex items-center gap-2"
-        >
-          <FileDown size={16} /> Export Report
+        <button onClick={exportPDF} className="px-3 py-2 bg-[var(--accent)]/20 border border-[var(--accent)]/30 rounded-lg text-[var(--accent)] flex items-center gap-2 text-sm">
+          <FileDown size={16} /> <span className="hidden sm:inline">Export</span>
         </button>
-      </div>
+      </header>
+
+      {/* Main Content Grid */}
+      <div className="flex flex-col lg:flex-row gap-6 px-4 md:px-6 relative z-10">
+        
+        {/* SVG Flow - Makes it scrollable on tiny screens, scales on tablets */}
+        <div className="flex-1 overflow-x-auto lg:overflow-visible bg-black/20 rounded-2xl border border-white/5 p-4">
+          <div className="min-w-[800px] lg:min-w-full">
+            <svg viewBox="0 0 1350 400" width="100%" className="h-auto max-h-[500px]">
+              <defs>
+                <linearGradient id="flowGrad" x1="0" y1="0" x2="1" y2="1">
+                  <stop offset="0%" stopColor={highlightDetection ? "#ff0044" : accentColor} stopOpacity="0.9" />
+                  <stop offset="100%" stopColor={accentColor} stopOpacity="0.3" />
+                </linearGradient>
+                <filter id="glow"><feGaussianBlur stdDeviation="3.5" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge></filter>
+              </defs>
 
-      {/* Flow Diagram */}
-      <div className="flex justify-center items-start gap-6 px-6 relative z-10">
-        <div className="flex-1 flex justify-center relative">
-          <svg viewBox="0 0 1300 400" width="100%" height="600">
-            <defs>
-              <linearGradient id="flowGrad" x1="0" y1="0" x2="1" y2="1">
-                <stop
-                  offset="0%"
-                  stopColor={highlightDetection ? "#ff0044" : accentColor}
-                  stopOpacity="0.9"
-                />
-                <stop
-                  offset="100%"
-                  stopColor={accentColor}
-                  stopOpacity="0.3"
-                />
-              </linearGradient>
-              <filter id="glow">
-                <feGaussianBlur stdDeviation="3.5" result="b" />
-                <feMerge>
-                  <feMergeNode in="b" />
-                  <feMergeNode in="SourceGraphic" />
-                </feMerge>
-              </filter>
-            </defs>
-
-            <g stroke="url(#flowGrad)" strokeWidth="3.5" fill="none" filter="url(#glow)">
-              {flow.paths.map((path, i) => {
-                const pathId = pid(`${flow.title}_${i}`);
-                return (
-                  <g key={pathId}>
-                    <path
-                      id={pathId}
-                      d={path}
-                      strokeLinecap="round"
-                      opacity={replayActive && i > activeStage ? 0.15 : 0.8}
-                    />
-                    {!paused &&
-                      Array.from({ length: 5 }).map((_, j) => (
-                        <circle key={j} r="4" fill={highlightDetection ? "#ff0044" : accentColor} opacity="0.9">
-                          <animateMotion
-                            dur={`${speed}s`}
-                            repeatCount="indefinite"
-                            begin={`${j * 0.7}s`}
-                          >
-                            <mpath href={`#${pathId}`} />
-                          </animateMotion>
+              <g stroke="url(#flowGrad)" strokeWidth="3.5" fill="none" filter="url(#glow)">
+                {flow.paths.map((path, i) => {
+                  const pathId = pid(`${type}_${i}`);
+                  return (
+                    <g key={pathId}>
+                      <path id={pathId} d={path} strokeLinecap="round" opacity={replayActive && i > activeStage ? 0.15 : 0.8} />
+                      {!paused && Array.from({ length: 5 }).map((_, j) => (
+                        <circle key={j} r="4" fill={highlightDetection ? "#ff0044" : accentColor}>
+                          <animateMotion dur={`${speed}s`} repeatCount="indefinite" begin={`${j * 0.7}s`}><mpath href={`#${pathId}`} /></animateMotion>
                         </circle>
                       ))}
-                  </g>
-                );
-              })}
-            </g>
-
-            {flow.nodes.map((n, i) => (
-              <g key={i}>
-                <circle
-                  cx={n.x}
-                  cy={n.y}
-                  r="26"
-                  fill={accentColor}
-                  opacity={activeStage >= i || !replayActive ? 0.35 : 0.15}
-                  stroke={accentColor}
-                  strokeWidth="1.5"
-                  filter="url(#glow)"
-                />
-                <foreignObject x={n.x - 10} y={n.y - 10} width="20" height="20">
-                  <div className="flex items-center justify-center w-full h-full text-[var(--text)]">
-                    {n.icon}
-                  </div>
-                </foreignObject>
-                <text
-                  x={n.x}
-                  y={n.y + 45}
-                  textAnchor="middle"
-                  fontSize="12"
-                  fill="var(--text)"
-                >
-                  {n.label}
-                </text>
+                    </g>
+                  );
+                })}
               </g>
-            ))}
-          </svg>
+
+              {flow.nodes.map((n, i) => (
+                <g key={i}>
+                  <circle cx={n.x} cy={n.y} r="26" fill={accentColor} opacity={activeStage >= i || !replayActive ? 0.35 : 0.15} stroke={accentColor} strokeWidth="1.5" filter="url(#glow)" />
+                  <foreignObject x={n.x - 10} y={n.y - 10} width="20" height="20">
+                    <div className="flex items-center justify-center w-full h-full text-[var(--text)]">{n.icon}</div>
+                  </foreignObject>
+                  <text x={n.x} y={n.y + 45} textAnchor="middle" fontSize="12" fill="var(--text)" className="font-bold">{n.label}</text>
+                </g>
+              ))}
+            </svg>
+          </div>
         </div>
 
-        {/* Logs */}
-        <div className="w-80 h-[600px] bg-[var(--card)]/70 border border-[var(--accent)]/30 rounded-xl p-3 text-xs font-mono overflow-y-auto backdrop-blur-sm">
-          <h4 className="text-[var(--accent)] font-semibold mb-2 flex items-center gap-2">
+        {/* Responsive Logs Panel */}
+        <div className="w-full lg:w-80 h-64 lg:h-[500px] bg-[var(--card)]/70 border border-[var(--accent)]/30 rounded-xl p-3 text-xs font-mono overflow-y-auto backdrop-blur-sm">
+          <h4 className="text-[var(--accent)] font-semibold mb-2 flex items-center gap-2 sticky top-0 bg-[var(--card)] py-1">
             <Radar size={14} /> Live Logs
           </h4>
           {logs.map((log, i) => (
-            <div key={i} className="border-b border-[var(--accent)]/10 pb-1">
-              {log}
-            </div>
+            <div key={i} className="border-b border-[var(--accent)]/10 pb-1 py-1">{log}</div>
           ))}
         </div>
       </div>
 
-      {/* Timeline */}
-      <div className="mt-8 px-10">
-        <h3 className="text-lg text-[var(--accent)] font-semibold mb-2">Attack Timeline</h3>
-        <div className="flex items-center gap-8">
-          {flow.nodes.map((n,i)=>(
+      {/* Timeline - Horizontal Scroll on Mobile */}
+      <div className="mt-8 px-4 md:px-10 overflow-x-auto pb-4">
+        <h3 className="text-lg text-[var(--accent)] font-semibold mb-4">Attack Timeline</h3>
+        <div className="flex items-center gap-4 md:gap-8 min-w-max">
+          {flow.nodes.map((n, i) => (
             <div key={i} className="flex flex-col items-center">
-              <div className={`w-4 h-4 rounded-full ${i<=activeStage?"bg-[var(--accent)]":"bg-slate-700"}`}></div>
-              <p className="text-xs mt-1 text-[var(--text)]/60">{n.label}</p>
+              <div className={`w-4 h-4 rounded-full transition-all duration-500 ${i <= activeStage ? "bg-[var(--accent)] scale-125 shadow-[0_0_10px_var(--accent)]" : "bg-slate-700"}`}></div>
+              <p className="text-[10px] mt-2 text-[var(--text)]/60">{n.label}</p>
             </div>
           ))}
         </div>
       </div>
 
-      {/* Tabs */}
-      <div className="mt-10 px-10">
-        <div className="flex gap-4 text-sm mb-3">
-          {["behavior","detection","mitigation","dataset"].map((tab)=>(
-            <button key={tab} onClick={()=>setActiveTab(tab)}
-              className={`px-3 py-2 rounded-md border ${activeTab===tab?"border-[var(--accent)] text-[var(--accent)]":"border-slate-700 text-[var(--text)]/60"}`}>
-              {tab.toUpperCase()}
-            </button>
-          ))}
-        </div>
-        <div className="bg-[var(--card)]/70 border border-[var(--accent)]/20 rounded-xl p-4 text-sm leading-relaxed text-[var(--text)]/90">
-          {activeTab==="behavior" && (
-            <p>{type} uses layered obfuscation to hide packet origin and route through multiple relays...</p>
-          )}
-          {activeTab==="detection" && (
-            <p>AI model monitors statistical anomalies in flow metadata to classify {type} traffic with 90%+ accuracy.</p>
-          )}
-          {activeTab==="mitigation" && (
-            <p>Network segmentation, DNS filtering, and retraining are key mitigations for {type}-based intrusions.</p>
-          )}
-          {activeTab==="dataset" && (
-            <p>Trained on CICIDS2017 + Darknet + custom captures across 18-class distribution including VPN, TOR, I2P.</p>
+      {/* Tabs & Comparison - Grid layout */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 px-4 md:px-10 mt-6 mb-10">
+  <div className="flex flex-col gap-3">
+    {/* Tactical Tab Navigation */}
+    <div className="flex flex-wrap gap-2">
+      {["behavior", "detection", "mitigation", "dataset"].map((tab) => (
+        <button
+          key={tab}
+          onClick={() => setActiveTab(tab)}
+          className={`relative px-4 py-2 text-[10px] font-black uppercase tracking-widest transition-all duration-300 overflow-hidden
+            ${activeTab === tab 
+              ? "text-[var(--accent)] border-b-2 border-[var(--accent)]" 
+              : "text-[var(--text)]/40 hover:text-[var(--text)]/80 border-b border-white/5"}`}
+        >
+          {activeTab === tab && (
+            <span className="absolute inset-0 bg-[var(--accent)]/5 animate-pulse" />
           )}
+          {tab}
+        </button>
+      ))}
+    </div>
+
+    {/* Content Terminal Window */}
+    <div className="relative group">
+      {/* Decorative Brackets */}
+      <div className="absolute -top-2 -left-2 w-4 h-4 border-t-2 border-l-2 border-[var(--accent)]/30 group-hover:border-[var(--accent)] transition-colors" />
+      <div className="absolute -bottom-2 -right-2 w-4 h-4 border-b-2 border-r-2 border-[var(--accent)]/30 group-hover:border-[var(--accent)] transition-colors" />
+      
+      <div className="bg-[var(--card)]/80 backdrop-blur-md border border-white/5 p-6 min-h-[160px] flex flex-col justify-between">
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <div className="w-1.5 h-1.5 bg-[var(--accent)] animate-ping" />
+            <span className="text-[9px] font-mono text-[var(--accent)] tracking-[0.3em] uppercase">
+              Sector_{activeTab}_Analysis
+            </span>
+          </div>
+          
+          <div className="font-mono text-sm leading-relaxed text-[var(--text)]/90 border-l-2 border-[var(--accent)]/20 pl-4 py-1">
+            {activeTab === "behavior" && (
+              <p><span className="text-[var(--accent)] font-bold">REPORT:</span> {type} utilizes a decentralized layered encryption mesh. Every node transition re-encapsulates the payload, creating a "Matryoshka" effect that obfuscates the original source IP and prevents packet-level correlation.</p>
+            )}
+            {activeTab === "detection" && (
+              <p><span className="text-[var(--accent)] font-bold">NEURAL_SIG:</span> AstraGuard AI employs recurrent feature extraction to identify microscopic jitter and inter-arrival time (IAT) variances unique to {type} tunnels, achieving an F1-score of 0.94.</p>
+            )}
+            {activeTab === "mitigation" && (
+              <p><span className="text-[var(--accent)] font-bold">DEFENSE:</span> Automated Null-Route triggers are prepared for localized clusters. Implementing dynamic circuit breaking and TLS-fingerprint filtering to strip {type} obfuscation layers at the edge gateway.</p>
+            )}
+            {activeTab === "dataset" && (
+              <p><span className="text-[var(--accent)] font-bold">SOURCE:</span> Synthesized from 1.4TB of telemetry including CICIDS2017, Darknet-2020, and live-captured PCAPs. Distribution covers 18 distinct traffic classes with supervised labeling.</p>
+            )}
+          </div>
+        </div>
+
+        {/* Bottom Metadata Line */}
+        <div className="mt-4 pt-4 border-t border-white/5 flex justify-between items-center opacity-40">
+          <span className="text-[8px] font-bold uppercase tracking-widest text-[var(--accent)]">Security Level: Level_4_Clearance</span>
+          <span className="text-[8px] font-bold text-[var(--accent)]">ID: {Math.random().toString(16).substr(2, 8).toUpperCase()}</span>
         </div>
       </div>
+    </div>
+  </div>
+ 
 
 
-      {/* Comparison Chart */}
-      <div className="mt-10 px-10">
-        <h3 className="text-lg font-semibold text-[var(--accent)] mb-3">Attack Comparison Metrics</h3>
-        <div className="bg-[var(--card)]/70 p-4 rounded-xl border border-[var(--accent)]/30 h-[300px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={compareData}>
-              <CartesianGrid strokeDasharray="3 3" strokeOpacity={0.1}/>
-              <XAxis dataKey="name" stroke="var(--text)"/>
-              <YAxis stroke="var(--text)"/>
-              <Tooltip/>
-              <Bar dataKey="risk" fill="#f43f5e" name="Risk Level"/>
-              <Bar dataKey="detection" fill="var(--accent)" name="Detection Accuracy"/>
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
+<div className="bg-[var(--card)]/70 p-6 rounded-xl border border-[var(--accent)]/30 h-[350px] relative overflow-hidden group">
+  {/* Decorative background scan line */}
+  <div className="absolute inset-0 pointer-events-none opacity-5 bg-[linear-gradient(transparent_50%,rgba(0,229,255,0.1)_50%)] bg-[length:100%_4px] animate-pulse" />
+  
+  <h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-[var(--accent)] mb-6 flex items-center gap-2">
+    <Activity size={14} className="animate-pulse" /> Threat Propensity vs. Detection Accuracy
+  </h3>
+
+  <ResponsiveContainer width="100%" height="85%">
+    <BarChart data={compareData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+      <defs>
+        {/* Gradient for Detection Bars */}
+        <linearGradient id="barGrad" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="var(--accent)" stopOpacity={1} />
+          <stop offset="100%" stopColor="var(--accent)" stopOpacity={0.2} />
+        </linearGradient>
+        {/* Gradient for Risk Bars */}
+        <linearGradient id="riskGrad" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="#f43f5e" stopOpacity={1} />
+          <stop offset="100%" stopColor="#f43f5e" stopOpacity={0.2} />
+        </linearGradient>
+      </defs>
+
+      <CartesianGrid 
+        strokeDasharray="0" 
+        vertical={false} 
+        stroke="rgba(255,255,255,0.05)" 
+      />
+      
+      <XAxis 
+        dataKey="name" 
+        axisLine={false} 
+        tickLine={false} 
+        tick={{ fill: 'var(--text)', fontSize: 10, fontWeight: 'bold' }} 
+        dy={10}
+      />
+      
+      <YAxis 
+        axisLine={false} 
+        tickLine={false} 
+        tick={{ fill: 'var(--text)', opacity: 0.4, fontSize: 9 }} 
+      />
+
+      <Tooltip 
+        cursor={{ fill: 'rgba(255,255,255,0.03)' }} 
+        contentStyle={{ 
+          backgroundColor: 'rgba(10,10,10,0.95)', 
+          border: '1px solid var(--accent)', 
+          borderRadius: '8px',
+          fontSize: '11px',
+          backdropFilter: 'blur(10px)'
+        }} 
+        itemStyle={{ fontWeight: 'bold', textTransform: 'uppercase' }}
+      />
+
+      {/* Main Bars with Glow Effect */}
+      <Bar 
+        dataKey="risk" 
+        fill="url(#riskGrad)" 
+        radius={[2, 2, 0, 0]} 
+        barSize={12}
+      />
+      <Bar 
+        dataKey="detection" 
+        fill="url(#barGrad)" 
+        radius={[2, 2, 0, 0]} 
+        barSize={12}
+      />
+    </BarChart>
+  </ResponsiveContainer>
+  
+  {/* Legend Overlay */}
+  <div className="absolute bottom-4 right-6 flex gap-4">
+     <div className="flex items-center gap-1.5">
+        <div className="w-2 h-2 rounded-full bg-rose-500 shadow-[0_0_8px_#f43f5e]" />
+        <span className="text-[8px] font-black uppercase opacity-60 tracking-widest">Risk Index</span>
+     </div>
+     <div className="flex items-center gap-1.5">
+        <div className="w-2 h-2 rounded-full bg-[var(--accent)] shadow-[0_0_8px_var(--accent)]" />
+        <span className="text-[8px] font-black uppercase opacity-60 tracking-widest">AI Confidence</span>
+     </div>
+  </div>
+</div>
       </div>
 
-      {/* Controls */}
-      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 bg-[var(--card)]/80 backdrop-blur-md px-6 py-3 border border-[var(--accent)]/30 rounded-2xl flex items-center gap-5 shadow-lg z-50">
-        <button
-          onClick={() => setPaused(!paused)}
-          className="text-[var(--accent)] flex items-center gap-2 hover:opacity-80 transition"
-        >
-          {paused ? <Play size={18} /> : <Pause size={18} />}
-          {paused ? "Play" : "Pause"}
-        </button>
-        <div className="flex items-center gap-2 text-sm text-[var(--accent)]">
-          <Zap size={16} /> Speed:
-          <input
-            type="range"
-            min="2"
-            max="10"
-            value={speed}
-            onChange={(e) => setSpeed(e.target.value)}
-            className="accent-[var(--accent)] w-28"
-          />
-          <span>{speed}s</span>
+      {/* Responsive Floating Controls */}
+      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 w-[92%] max-w-2xl bg-[var(--card)]/90 backdrop-blur-xl px-4 py-3 border border-[var(--accent)]/30 rounded-2xl flex flex-wrap items-center justify-between gap-3 shadow-2xl z-50">
+        <div className="flex items-center gap-4">
+          <button onClick={() => setPaused(!paused)} className="text-[var(--accent)] flex items-center gap-3 font-bold">Pause
+            {paused ? <Play size={20} /> : <Pause size={20} />}
+          </button>
+          <button onClick={() => setReplayActive(true)} className="text-[var(--accent)] font-bold gap-3 flex items-center">Refresh
+            <RefreshCcw size={18} />
+          </button>
         </div>
-        <button
-          onClick={() => setReplayActive(true)}
-          className="text-[var(--accent)] flex items-center gap-2 hover:opacity-80 transition"
-        >
-          <RefreshCcw size={16} /> Replay Flow
-        </button>
-        <button
-          onClick={() => setHighlightDetection(!highlightDetection)}
-          className={`px-3 py-1 text-sm rounded-lg border ${
-            highlightDetection
-              ? "bg-rose-600/30 border-rose-500/40 text-rose-300"
-              : "bg-[var(--accent)]/10 border-[var(--accent)]/30 text-[var(--accent)]"
-          }`}
-        >
-          {highlightDetection ? "Detection ON 🔴" : "Highlight Detection"}
+
+        <div className="hidden sm:flex items-center gap-2 text-[19px] text-[var(--accent)]">
+          <Zap size={14} /> Speed
+          <input type="range" min="2" max="10" value={speed} onChange={(e) => setSpeed(e.target.value)} className="accent-[var(--accent)] w-20" />
+        </div>
+
+        <button onClick={() => setHighlightDetection(!highlightDetection)}
+          className={`px-3 py-1.5 text-cyan-500 font-bold rounded-lg border transition-all ${highlightDetection ? "bg-rose-600 border-rose-500 text-white" : "border-[var(--accent)]/30 text-[var(--accent)]"}`}>
+          {highlightDetection ? "DETECTION ACTIVE" : "ISOLATE THREAT"}
         </button>
       </div>
+
       <ChatAssistant />
     </div>
   );
-}
-
-
-
-
-
+}

frontend/src/pages/ReportsPage.jsx

@@ -1,29 +1,14 @@
 import React, { useEffect, useState } from "react";
 import {
-  FileText,
-  Filter,
-  Download,
-  Eye,
-  Trash2,
-  RefreshCcw,
-  BarChart3,
-  Mail,
-  Send,
-  PieChart,
-  AlertTriangle,
+  FileText, Filter, Download, Eye, Trash2, RefreshCcw, 
+  BarChart3, Mail, Send, PieChart, AlertTriangle, 
+  ShieldCheck, FileSearch, Database
 } from "lucide-react";
 import toast, { Toaster } from "react-hot-toast";
 import ChatAssistant from "./ChatAssistant";
 import {
-  ResponsiveContainer,
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  Tooltip,
-  Pie,
-  PieChart as PieChartComp,
-  Cell,
+  ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, 
+  Pie, PieChart as PieChartComp, Cell, CartesianGrid
 } from "recharts";
 
 export default function ReportsPage() {
@@ -35,26 +20,21 @@ export default function ReportsPage() {
   const [email, setEmail] = useState("");
   const [sending, setSending] = useState(false);
 
-  const COLORS = ["#00e5ff", "#00ff99", "#fbbf24", "#ff0059"];
+  const COLORS = ["#00e5ff", "#a78bfa", "#34d399", "#f43f5e"];
 
-  // 🧠 Fetch available reports
   const fetchReports = async () => {
     try {
       setLoading(true);
       const res = await fetch("http://127.0.0.1:5000/api/reports/list");
-      if (!res.ok) throw new Error("Failed to fetch reports");
       const data = await res.json();
       setReports(data);
     } catch (err) {
-      toast.error("Failed to load reports");
-      console.error("Report fetch error:", err);
+      toast.error("Failed to load Intelligence logs");
     } finally {
       setLoading(false);
     }
   };
 
-  // 📊 Fetch chart data
-// 📊 Fetch chart data
   const fetchCharts = async () => {
     try {
       const trendRes = await fetch("http://127.0.0.1:5000/api/reports/trend");
@@ -63,41 +43,26 @@ export default function ReportsPage() {
 
       const distRes = await fetch("http://127.0.0.1:5000/api/reports/distribution");
       const distData = await distRes.json();
-      // ✅ Convert object → array for PieChart
       const distArray = Object.entries(distData).map(([name, value]) => ({ name, value }));
       setReportDistribution(distArray);
-  } catch (err) {
-    console.error("Chart fetch error:", err);
-  }
-};
-
+    } catch (err) {
+      console.error("Analytics fetch error:", err);
+    }
+  };
 
   useEffect(() => {
     fetchReports();
     fetchCharts();
   }, []);
 
-  // 📥 Download report
   const handleDownload = (r) => {
-    if (!r.endpoint) {
-      toast.error("No download link found");
-      return;
-    }
+    if (!r.endpoint) return toast.error("Binary source unavailable");
     window.open(r.endpoint, "_blank");
-    toast.success(`Downloading ${r.name}`);
+    toast.success(`Exporting: ${r.name}`);
   };
 
-  // 🗑 Delete report (frontend only)
-  const handleDelete = (id) => {
-    setReports((prev) => prev.filter((r) => r.id !== id));
-    toast("🗑️ Report deleted successfully", {
-      style: { background: "#001122", color: "var(--accent)" },
-    });
-  };
-
-  // 📧 Send summary email
   const handleSendEmail = async () => {
-    if (!email.trim()) return toast.error("Enter a valid email!");
+    if (!email.trim()) return toast.error("Target address required");
     setSending(true);
     try {
       const res = await fetch("http://127.0.0.1:5000/api/reports/email", {
@@ -105,216 +70,167 @@ export default function ReportsPage() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ email }),
       });
-      const result = await res.json();
-      if (res.ok) toast.success(result.message || `Email sent to ${email}`);
-      else toast.error(result.error || "Failed to send email");
+      if (res.ok) toast.success(`Intelligence Summary dispatched to ${email}`);
     } catch (err) {
-      toast.error("Error sending email");
-      console.error("Email send error:", err);
+      toast.error("Dispatch failure");
     } finally {
       setSending(false);
     }
   };
 
-  // Filtered list
-  const filteredReports =
-    filter === "All" ? reports : reports.filter((r) => r.type === filter);
+  const filteredReports = filter === "All" ? reports : reports.filter((r) => r.type === filter);
 
   return (
-    <div className="p-6 space-y-8 relative">
-      <Toaster position="bottom-right" />
-      {/* 🌫️ Subtle Glow Background */}
-      <div
-        className="absolute inset-0 animate-pulse-slow pointer-events-none"
-        style={{
-          background:
-            "radial-gradient(circle at center, color-mix(in srgb, var(--accent) 25%, transparent) 8%, transparent 75%)",
-          opacity: 0.25,
-        }}
-      ></div>
+    <div className="p-8 space-y-8 bg-[#020617] min-h-screen text-slate-300 font-mono">
+      <Toaster position="top-center" />
+
+      {/* HEADER & META DATA */}
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 border-b border-slate-800 pb-8">
+        <div>
+          <div className="flex items-center gap-2 text-accent text-[10px] uppercase tracking-[0.3em] mb-2 font-black">
+            <ShieldCheck size={14} /> Security Intelligence Unit
+          </div>
+          <h1 className="text-4xl font-black text-white italic uppercase tracking-tighter">
+            Analytical <span className="text-slate-500">Reports</span>
+          </h1>
+        </div>
 
-      {/* HEADER */}
-      <div className="flex justify-between items-center flex-wrap gap-3">
-        <h2 className="text-2xl font-semibold text-[var(--accent)] flex items-center gap-2">
-          <FileText size={22} /> Intelligence Reports Center
-        </h2>
-        <button
-          onClick={() => {
-            fetchReports();
-            fetchCharts();
-            toast("🔁 Refreshed reports & charts", {
-              icon: "⚙️",
-              style: { background: "#001122", color: "var(--accent)" },
-            });
-          }}
-          className="flex items-center gap-2 bg-[var(--accent)]/10 border border-[var(--accent)]/20 text-[var(--accent)] px-3 py-1.5 rounded-lg hover:bg-[var(--accent)]/20 transition"
-        >
-          <RefreshCcw size={14} /> Refresh
-        </button>
+        <div className="flex items-center gap-4">
+          <div className="hidden lg:block text-right mr-4">
+            <div className="text-[10px] text-slate-500 uppercase">System_Clock</div>
+            <div className="text-xs text-white uppercase">{new Date().toLocaleTimeString()}</div>
+          </div>
+          <button
+            onClick={() => { fetchReports(); fetchCharts(); }}
+            className="p-3 bg-white/5 border border-white/10 rounded-full hover:bg-accent hover:text-black transition-all"
+          >
+            <RefreshCcw size={18} />
+          </button>
+        </div>
       </div>
 
-      {/* FILTER + EMAIL SECTION */}
-      <div className="flex flex-wrap items-center justify-between bg-black/40 border border-[var(--accent)]/20 rounded-xl p-4 gap-4">
-        <div className="flex items-center gap-3 text-sm text-slate-400">
-          <Filter size={14} className="text-[var(--accent)]" />
-          <span>Filter Reports:</span>
-          <select
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-            className="bg-black/30 border border-[var(--accent)]/20 rounded px-2 py-1 text-[var(--accent)]"
-          >
-            <option>All</option>
-            <option>System Health</option>
-            <option>Threat Intelligence</option>
-            <option>Network Analysis</option>
-            <option>Access Logs</option>
-          </select>
+      {/* QUICK ACTIONS & EMAIL UTILITY */}
+      <div className="grid lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 flex items-center gap-4 bg-slate-900/40 p-4 rounded-xl border border-white/5">
+          <Filter size={18} className="text-accent" />
+          <div className="flex gap-2">
+            {["All", "Threat Intelligence", "Network Analysis", "System Health"].map((cat) => (
+              <button
+                key={cat}
+                onClick={() => setFilter(cat)}
+                className={`px-4 py-1.5 rounded-md text-[10px] uppercase font-bold transition-all ${
+                  filter === cat ? "bg-accent text-black" : "bg-white/5 text-slate-500 border border-white/5"
+                }`}
+              >
+                {cat}
+              </button>
+            ))}
+          </div>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 bg-slate-900/40 p-4 rounded-xl border border-white/5">
           <input
             type="email"
-            placeholder="Send summary to email"
+            placeholder="Analyst Email Address"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            className="bg-black/30 border border-[var(--accent)]/20 rounded px-3 py-1 text-[var(--accent)] placeholder-slate-500"
+            className="flex-1 bg-black/50 border border-white/10 rounded-lg px-4 py-2 text-xs text-accent placeholder:text-slate-700 focus:outline-none focus:border-accent"
           />
           <button
             onClick={handleSendEmail}
             disabled={sending}
-            className="flex items-center gap-2 bg-[var(--accent)]/10 border border-[var(--accent)]/20 text-[var(--accent)] px-3 py-1.5 rounded-lg hover:bg-[var(--accent)]/20 transition"
+            className="bg-accent/10 border border-accent/30 text-accent p-2 rounded-lg hover:bg-accent hover:text-black transition-all"
           >
-            {sending ? <Mail size={14} className="animate-pulse" /> : <Send size={14} />}
-            {sending ? "Sending..." : "Email Reports"}
+            {sending ? <RefreshCcw size={18} className="animate-spin" /> : <Send size={18} />}
           </button>
         </div>
       </div>
 
-      {/* REPORTS TABLE */}
-      <div className="bg-black/40 border border-[var(--accent)]/20 rounded-xl p-4">
-        <h3 className="text-[var(--accent)] text-sm mb-3 flex items-center gap-2">
-          <BarChart3 size={14} /> Generated Reports
-        </h3>
-        {loading ? (
-          <p className="text-center text-[var(--accent)] py-10 animate-pulse">
-            ⚙️ Loading reports...
-          </p>
-        ) : filteredReports.length === 0 ? (
-          <p className="text-center text-slate-500 py-10">
-            No reports available for this filter.
-          </p>
-        ) : (
-          <div className="overflow-x-auto">
-            <table className="w-full text-sm text-left text-slate-300">
-              <thead className="text-xs uppercase text-[var(--accent)] border-b border-[var(--accent)]/20">
-                <tr>
-                  <th className="px-3 py-2">Report Name</th>
-                  <th className="px-3 py-2">Type</th>
-                  <th className="px-3 py-2">Size</th>
-                  <th className="px-3 py-2">Date</th>
-                  <th className="px-3 py-2 text-right">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {filteredReports.map((r, i) => (
-                  <tr
-                    key={i}
-                    className="border-b border-[var(--accent)]/10 hover:bg-[var(--accent)]/5 transition"
-                  >
-                    <td className="px-3 py-2 text-[var(--accent)] font-mono truncate">
-                      {r.name}
-                    </td>
-                    <td className="px-3 py-2">{r.type}</td>
-                    <td className="px-3 py-2">{r.size}</td>
-                    <td className="px-3 py-2">{r.date}</td>
-                    <td className="px-3 py-2 text-right space-x-2">
-                      <button
-                        onClick={() => handleDownload(r)}
-                        className="text-emerald-400 hover:text-emerald-300"
-                        title="Download"
-                      >
-                        <Download size={16} />
-                      </button>
-                      <button
-                        onClick={() => toast.info(`Preview not available for ${r.name}`)}
-                        className="text-cyan-400 hover:text-cyan-300"
-                        title="Preview"
-                      >
-                        <Eye size={16} />
-                      </button>
-                      <button
-                        onClick={() => handleDelete(r.id)}
-                        className="text-rose-400 hover:text-rose-300"
-                        title="Delete"
-                      >
-                        <Trash2 size={16} />
-                      </button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+      {/* ANALYTICS PREVIEW SECTION */}
+      <div className="grid lg:grid-cols-12 gap-6">
+        <div className="lg:col-span-8 bg-slate-900/20 border border-white/5 rounded-2xl p-6">
+          <div className="flex justify-between items-center mb-6">
+            <h3 className="text-sm font-bold uppercase tracking-widest text-white flex items-center gap-2">
+              <AlertTriangle size={16} className="text-rose-500" /> Temporal Attack Trend
+            </h3>
+            <span className="text-[10px] text-slate-500 uppercase tracking-tighter italic">Source: CIC-IDS2018 Pipeline</span>
           </div>
-        )}
-      </div>
-
-      {/* ANALYTICS CHARTS */}
-      <div className="grid md:grid-cols-2 gap-6">
-        {/* Threat Trend */}
-        <div className="bg-black/40 border border-[var(--accent)]/20 rounded-xl p-5">
-          <h3 className="text-[var(--accent)] text-sm mb-3 flex items-center gap-2">
-            <AlertTriangle size={14} /> Attack Trend Overview
-          </h3>
-          <ResponsiveContainer width="100%" height={200}>
+          <ResponsiveContainer width="100%" height={250}>
             <LineChart data={attackTrend}>
-              <XAxis dataKey="date" stroke="var(--accent)" />
+              <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
+              <XAxis dataKey="date" stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
               <YAxis hide />
               <Tooltip
-                contentStyle={{
-                  backgroundColor: "#001122",
-                  border: "1px solid var(--accent)",
-                  borderRadius: "6px",
-                }}
+                contentStyle={{ backgroundColor: "#0f172a", border: "1px solid #334155", borderRadius: "8px", fontSize: "10px" }}
               />
-              {attackTrend.length > 0 &&
-                Object.keys(attackTrend[0])
-                  .filter((key) => key !== "date")
-                  .map((key, index) => (
-                    <Line
-                      key={index}
-                      type="monotone"
-                      dataKey={key}
-                      stroke={COLORS[index % COLORS.length]}
-                      strokeWidth={2}
-                    />
-                  ))}
+              <Line type="monotone" dataKey="value" stroke="#00e5ff" strokeWidth={3} dot={{ r: 4, fill: "#00e5ff" }} activeDot={{ r: 6 }} />
             </LineChart>
           </ResponsiveContainer>
         </div>
 
-        {/* Report Type Distribution */}
-        <div className="bg-black/40 border border-[var(--accent)]/20 rounded-xl p-5">
-          <h3 className="text-[var(--accent)] text-sm mb-3 flex items-center gap-2">
-            <PieChart size={14} /> Report Type Distribution
-          </h3>
+        <div className="lg:col-span-4 bg-slate-900/20 border border-white/5 rounded-2xl p-6 flex flex-col items-center justify-center">
+          <h3 className="text-sm font-bold uppercase tracking-widest text-white mb-6 self-start">Categorical Weight</h3>
           <ResponsiveContainer width="100%" height={200}>
             <PieChartComp>
-              <Pie
-                data={reportDistribution}
-                cx="50%"
-                cy="50%"
-                labelLine={false}
-                outerRadius={80}
-                dataKey="value"
-              >
+              <Pie data={reportDistribution} innerRadius={60} outerRadius={80} paddingAngle={5} dataKey="value">
                 {reportDistribution.map((entry, index) => (
-                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} stroke="none" />
                 ))}
               </Pie>
+              <Tooltip />
             </PieChartComp>
           </ResponsiveContainer>
+          <div className="grid grid-cols-2 gap-4 mt-4 w-full">
+            {reportDistribution.slice(0, 4).map((item, i) => (
+              <div key={i} className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full" style={{ backgroundColor: COLORS[i] }} />
+                <span className="text-[9px] uppercase text-slate-500 truncate">{item.name}</span>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
+
+      {/* DATA GRID - THE REPORTS */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-bold uppercase tracking-widest text-white flex items-center gap-2 px-2">
+          <Database size={16} className="text-accent" /> Data Repository
+        </h3>
+        
+        {loading ? (
+          <div className="h-48 flex items-center justify-center border border-dashed border-slate-800 rounded-2xl">
+            <span className="animate-pulse text-slate-600 text-xs uppercase tracking-[0.5em]">Syncing_Database...</span>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+            {filteredReports.map((r, i) => (
+              <div key={i} className="group bg-slate-900/40 border border-white/5 p-5 rounded-2xl hover:border-accent/40 transition-all">
+                <div className="flex justify-between items-start mb-4">
+                  <div className="p-3 bg-black/50 rounded-xl border border-white/5 text-accent">
+                    <FileSearch size={24} />
+                  </div>
+                  <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button onClick={() => handleDownload(r)} className="p-2 hover:bg-emerald-500/20 text-emerald-500 rounded-md transition-colors"><Download size={16} /></button>
+                    <button className="p-2 hover:bg-rose-500/20 text-rose-500 rounded-md transition-colors"><Trash2 size={16} /></button>
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <h4 className="text-white font-bold text-sm truncate uppercase tracking-tight">{r.name}</h4>
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px] text-slate-500 font-mono">{r.type}</span>
+                    <span className="text-[10px] text-accent bg-accent/10 px-2 py-0.5 rounded uppercase font-bold">{r.size}</span>
+                  </div>
+                </div>
+                <div className="mt-4 pt-4 border-t border-white/5 text-[9px] text-slate-600 flex justify-between">
+                  <span>TIMESTAMP: {r.date}</span>
+                  <span className="text-emerald-500/50">SECURED_V4</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
       <ChatAssistant />
     </div>
   );

frontend/src/pages/SettingsPage.jsx

@@ -1,814 +1,240 @@
-// src/pages/SettingsPage.jsx
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
-  Settings,
-  ToggleLeft,
-  ToggleRight,
-  Wifi,
-  Save,
-  RefreshCcw,
-  Brain,
-  Zap,
-  FileDown,
-  Palette,
-  Bell,
-  Sliders,
-  ShieldAlert,
-  HardDrive,
-  UploadCloud,
-  Users,
+  Settings, ToggleLeft, ToggleRight, Wifi, Save, RefreshCcw, Brain, Zap,
+  FileDown, Palette, Bell, Sliders, ShieldAlert, HardDrive, UploadCloud, Users,
+  Activity, Database, ShieldCheck, Globe, Lock, History, Server, Cpu, Layers
 } from "lucide-react";
 import toast, { Toaster } from "react-hot-toast";
 import { useAuth } from "../context/AuthContext";
 
-// ---------- DEFAULT HELPERS (no shared reference issues) ----------
-
-const createDefaultThreatRules = () => ({
-  // CICIDS2018 classes (from your list, ignoring counts)
-  cicids2018: {
-    BENIGN: true,
-    Bot: true,
-    "DoS attacks-Hulk": true,
-    "DoS attacks-SlowHTTPTest": true,
-    Infilteration: true,
-    "DoS attacks-GoldenEye": true,
-    "DoS attacks-Slowloris": true,
-    "FTP-BruteForce": true,
-    "SSH-Bruteforce": true,
-    "DDOS attack-HOIC": true,
-    "DDOS attack-LOIC-UDP": true,
-    "Brute Force -Web": true,
-    "Brute Force -XSS": true,
-    "SQL Injection": true,
-  },
-  // BCC classes
-  bcc: {
-    Freenet: true,
-    TOR: true,
-    ZERONET: true,
-    I2P: true,
-    VPN: true,
-  },
-});
-
-const createDefaultCaptureSettings = () => ({
-  interface: "AUTO",
-  protocol: "ANY",
-  maxPackets: 5000,
-  sampleRate: "1x",
-});
-
-const createDefaultRetention = () => ({
-  logDays: 7,
-  anonymizeIP: false,
-  autoPurge: true,
-});
-
-const createDefaultNotifications = () => ({
-  enablePopup: true,
-  emailAlerts: false,
-  email: "",
-  criticalThreshold: 10,
-});
-
-const createDefaultModelConfig = () => ({
-  activeDataset: "CICIDS2018", // or "BCC"
-  activeModelName: "CICIDS2018_Default",
-  customModelName: "",
-  lastUpdated: null,
-});
-
 export default function SettingsPage() {
   const { settings, setSettings, saveSettings, user } = useAuth();
-
-  // Core settings from context
-  const [autoRefresh, setAutoRefresh] = useState(settings.autoRefresh);
-  const [soundAlerts, setSoundAlerts] = useState(settings.soundAlerts);
-  const [aiSensitivity, setAiSensitivity] = useState(settings.aiSensitivity);
-  const [responseMode, setResponseMode] = useState(settings.responseMode);
-  const [ipConfig, setIpConfig] = useState(settings.ipConfig);
-  const [portConfig, setPortConfig] = useState(settings.portConfig);
-  const [theme, setTheme] = useState(settings.theme);
-  const [backupProgress, setBackupProgress] = useState(0);
-
-  // New enterprise settings
-  const [threatRules, setThreatRules] = useState(createDefaultThreatRules);
-  const [captureSettings, setCaptureSettings] = useState(
-    createDefaultCaptureSettings
-  );
-  const [retention, setRetention] = useState(createDefaultRetention);
-  const [notificationSettings, setNotificationSettings] = useState(
-    createDefaultNotifications
-  );
-  const [modelConfig, setModelConfig] = useState(createDefaultModelConfig);
-
-  // UI-only state
-  const [activeThreatDataset, setActiveThreatDataset] =
-    useState("CICIDS2018"); // "CICIDS2018" | "BCC"
-  const [modelFile, setModelFile] = useState(null);
-
-  // 🧠 Load from Firestore on login/settings change
-  useEffect(() => {
-    if (settings) {
-      setAutoRefresh(settings.autoRefresh);
-      setSoundAlerts(settings.soundAlerts);
-      setAiSensitivity(settings.aiSensitivity);
-      setResponseMode(settings.responseMode);
-      setIpConfig(settings.ipConfig);
-      setPortConfig(settings.portConfig);
-      setTheme(settings.theme);
-      applyTheme(settings.theme);
-
-      setThreatRules(
-        settings.threatRules || createDefaultThreatRules()
-      );
-      setCaptureSettings(
-        settings.captureSettings || createDefaultCaptureSettings()
-      );
-      setRetention(
-        settings.retention || createDefaultRetention()
-      );
-      setNotificationSettings(
-        settings.notificationSettings ||
-          createDefaultNotifications()
-      );
-      setModelConfig(
-        settings.modelConfig || createDefaultModelConfig()
-      );
-    }
-  }, [settings]);
-
-  // 🎨 Apply theme globally
-  const applyTheme = (selectedTheme) => {
+  
+  // Logic State
+  const [theme, setTheme] = useState(settings?.theme ?? "Cyber Blue");
+  const [autoRefresh, setAutoRefresh] = useState(settings?.autoRefresh ?? true);
+  const [soundAlerts, setSoundAlerts] = useState(settings?.soundAlerts ?? true);
+  const [aiSensitivity, setAiSensitivity] = useState(settings?.aiSensitivity ?? 70);
+  const [responseMode, setResponseMode] = useState(settings?.responseMode ?? "Semi-Auto");
+  const [encryptionLevel, setEncryptionLevel] = useState("AES-256");
+  const [proxyEnabled, setProxyEnabled] = useState(false);
+  const [retentionDays, setRetentionDays] = useState(30);
+  const [activeThreatDataset, setActiveThreatDataset] = useState("CICIDS2018");
+  
+  const fileInputRef = useRef(null);
+
+  const applyTheme = (t) => {
     const body = document.body;
-    body.classList.remove(
-      "theme-cyber",
-      "theme-crimson",
-      "theme-emerald",
-      "theme-default"
-    );
-    switch (selectedTheme) {
-      case "Cyber Blue":
-        body.classList.add("theme-cyber");
-        break;
-      case "Crimson Dark":
-        body.classList.add("theme-crimson");
-        break;
-      case "Emerald Matrix":
-        body.classList.add("theme-emerald");
-        break;
-      default:
-        body.classList.add("theme-default");
-    }
+    body.classList.remove("theme-cyber", "theme-crimson", "theme-emerald", "theme-default");
+    const themeMap = { "Cyber Blue": "theme-cyber", "Crimson Dark": "theme-crimson", "Emerald Matrix": "theme-emerald", "Default": "theme-default" };
+    body.classList.add(themeMap[t] || "theme-default");
   };
 
-  // 💾 Save to Firestore (extended)
   const handleSave = async () => {
-    const newSettings = {
-      autoRefresh,
-      soundAlerts,
-      aiSensitivity,
-      responseMode,
-      ipConfig,
-      portConfig,
-      theme,
-
-      // new enterprise sections
-      threatRules,
-      captureSettings,
-      retention,
-      notificationSettings,
-      modelConfig,
-    };
-
-    setSettings(newSettings);
-    await saveSettings(newSettings); // 🔥 Saves to Firestore
-    toast.success("✅ Settings saved");
-  };
-
-  // Backup to local file (for download)
-  const handleBackup = () => {
-    toast("🧬 Generating system backup...", { icon: "💾" });
-    setBackupProgress(0);
-    let progress = 0;
-    const timer = setInterval(() => {
-      progress += 10;
-      setBackupProgress(progress);
-      if (progress >= 100) {
-        clearInterval(timer);
-        toast.success("✅ Backup completed!");
-        const blob = new Blob(
-          [JSON.stringify(settings, null, 2)],
-          { type: "application/json" }
-        );
-        const link = document.createElement("a");
-        link.href = URL.createObjectURL(blob);
-        link.download = "nids_system_backup.json";
-        link.click();
-      }
-    }, 200);
-  };
-
-  const handleReset = async () => {
-    if (!window.confirm("⚠️ Reset all settings to default?")) return;
-
-    const def = {
-      theme: "Cyber Blue",
-      autoRefresh: true,
-      soundAlerts: true,
-      aiSensitivity: 70,
-      responseMode: "Semi-Auto",
-      ipConfig: "127.0.0.1",
-      portConfig: "5000",
-
-      threatRules: createDefaultThreatRules(),
-      captureSettings: createDefaultCaptureSettings(),
-      retention: createDefaultRetention(),
-      notificationSettings: createDefaultNotifications(),
-      modelConfig: createDefaultModelConfig(),
-    };
-
-    setSettings(def);
-    await saveSettings(def);
-    applyTheme("Cyber Blue");
-    setThreatRules(def.threatRules);
-    setCaptureSettings(def.captureSettings);
-    setRetention(def.retention);
-    setNotificationSettings(def.notificationSettings);
-    setModelConfig(def.modelConfig);
-    toast.success("✅ Settings restored to default");
-  };
-
-  // Threat rule toggler
-  const handleToggleRule = (datasetKey, ruleKey) => {
-    setThreatRules((prev) => ({
-      ...prev,
-      [datasetKey]: {
-        ...prev[datasetKey],
-        [ruleKey]: !prev[datasetKey][ruleKey],
-      },
-    }));
-  };
-
-  // Model upload (no backend, safe)
-  const handleModelUpload = () => {
-    if (!modelFile) {
-      toast.error("Please select a model file first.");
-      return;
-    }
-
-    const updated = {
-      ...modelConfig,
-      customModelName: modelFile.name,
-      lastUpdated: new Date().toISOString(),
-    };
-
-    setModelConfig(updated);
-    toast.success(
-      "✅ Custom model registered (metadata saved in settings)."
-    );
+    const newSettings = { ...settings, theme, autoRefresh, aiSensitivity, responseMode };
+    await saveSettings(newSettings);
+    toast.success("All systems synchronized successfully.");
   };
 
-  const currentThreatKey =
-    activeThreatDataset === "CICIDS2018" ? "cicids2018" : "bcc";
-  const currentThreatRules = threatRules[currentThreatKey] || {};
-
   return (
-    <div className="p-6 space-y-6 relative text-[var(--text)]">
+    <div className="min-h-screen p-4 lg:p-8 space-y-6 max-w-7xl mx-auto pb-24 relative z-10 bg-transparent">
       <Toaster position="bottom-right" />
-      <div
-        className="absolute inset-0 animate-pulse-slow pointer-events-none"
-        style={{
-          background:
-            "radial-gradient(circle at center, color-mix(in srgb, var(--accent) 25%, transparent) 8%, transparent 75%)",
-          opacity: 0.25,
-        }}
-      />
-
-      {/* HEADER */}
-      <div className="flex justify-between items-center relative z-10">
-        <h2 className="text-2xl font-semibold text-accent flex items-center gap-2">
-          <Settings size={22} /> System Configuration
-        </h2>
-        <button
-          onClick={handleSave}
-          className="px-3 py-2 bg-cyan-500/20 border border-cyan-400/30 rounded-lg hover:bg-cyan-500/30 text-cyan-300 flex items-center gap-2"
-        >
-          <Save size={14} /> Save
-        </button>
-      </div>
-
-      {/* ⚙️ SYSTEM PREFERENCES */}
-      <div className="card-glow rounded-xl p-5 relative z-10">
-        <h3 className="text-accent text-sm mb-3 flex items-center gap-2">
-          <Zap size={14} /> System Preferences
-        </h3>
-        <div className="flex flex-wrap gap-6 text-sm text-[var(--text)]/80">
-          {/* Auto Refresh */}
-          <div
-            className="flex items-center gap-3 cursor-pointer hover:text-accent"
-            onClick={() => setAutoRefresh(!autoRefresh)}
-          >
-            {autoRefresh ? (
-              <ToggleRight size={20} />
-            ) : (
-              <ToggleLeft size={20} />
-            )}
-            Auto Refresh
-          </div>
-
-          {/* Sound Alerts */}
-          <div
-            className="flex items-center gap-3 cursor-pointer hover:text-accent"
-            onClick={() => setSoundAlerts(!soundAlerts)}
-          >
-            {soundAlerts ? (
-              <ToggleRight size={20} />
-            ) : (
-              <ToggleLeft size={20} />
-            )}
-            Sound Alerts
-          </div>
-
-          {/* Data Retention */}
-          <div className="flex items-center gap-2">
-            <span>Data Retention:</span>
-            <select
-              value={retention.logDays}
-              onChange={(e) =>
-                setRetention((prev) => ({
-                  ...prev,
-                  logDays: Number(e.target.value),
-                }))
-              }
-              className="bg-card border border-accent rounded px-2 py-1 text-accent"
-            >
-              <option value={1}>24 Hours</option>
-              <option value={7}>7 Days</option>
-              <option value={30}>30 Days</option>
-            </select>
-          </div>
-
-          {/* Anonymize IP */}
-          <div
-            className="flex items-center gap-3 cursor-pointer hover:text-accent"
-            onClick={() =>
-              setRetention((prev) => ({
-                ...prev,
-                anonymizeIP: !prev.anonymizeIP,
-              }))
-            }
-          >
-            {retention.anonymizeIP ? (
-              <ToggleRight size={20} />
-            ) : (
-              <ToggleLeft size={20} />
-            )}
-            Anonymize IP Addresses
-          </div>
-        </div>
-      </div>
 
-      {/* 🎨 THEME SETTINGS */}
-      <div className="card-glow rounded-xl p-5 relative z-10">
-        <h3 className="text-accent text-sm mb-3 flex items-center gap-2">
-          <Palette size={14} /> Theme & Appearance
-        </h3>
-        <div className="flex flex-wrap gap-4 text-sm text-[var(--text)]/80 items-center">
-          <select
-            value={theme}
-            onChange={(e) => {
-              setTheme(e.target.value);
-              applyTheme(e.target.value);
-            }}
-            className="bg-card border border-accent rounded px-3 py-2 text-accent"
-          >
-            <option>Cyber Blue</option>
-            <option>Crimson Dark</option>
-            <option>Emerald Matrix</option>
-            <option>Default</option>
-          </select>
-          <span className="text-xs text-[var(--text)]/50 italic">
-            Instantly applies across all pages
-          </span>
-        </div>
-      </div>
-
-      {/* 🧠 AI BEHAVIOR */}
-      <div className="card-glow rounded-xl p-5 relative z-10">
-        <h3 className="text-accent text-sm mb-3 flex items-center gap-2">
-          <Brain size={14} /> AI Behavior Settings
-        </h3>
-        <div className="space-y-4 text-sm text-[var(--text)]/80">
-          <div>
-            <p className="mb-2">AI Sensitivity: {aiSensitivity}%</p>
-            <input
-              type="range"
-              min="30"
-              max="100"
-              value={aiSensitivity}
-              onChange={(e) => setAiSensitivity(Number(e.target.value))}
-              className="w-full accent-[var(--accent)] cursor-pointer"
-            />
+      {/* --- TOP BAR / OVERVIEW --- */}
+      <div className="glass-shell p-6 flex flex-col md:flex-row justify-between items-center gap-4 border-accent/20">
+        <div className="flex items-center gap-4">
+          <div className="p-3 bg-accent/10 rounded-2xl border border-accent/20">
+            <Settings className="animate-spin-slow text-accent" size={32} />
           </div>
           <div>
-            <p className="mb-2">Threat Response Mode:</p>
-            <select
-              value={responseMode}
-              onChange={(e) => setResponseMode(e.target.value)}
-              className="bg-card border border-accent rounded px-2 py-1 text-accent"
-            >
-              <option>Passive</option>
-              <option>Semi-Auto</option>
-              <option>Fully Auto</option>
-            </select>
+            <h1 className="text-2xl font-black text-accent tracking-tighter uppercase">Command Center</h1>
+            <p className="text-[10px] font-mono opacity-50 uppercase tracking-widest">User: {user?.displayName || "Operator_01"} // Auth: Level_Alpha</p>
           </div>
         </div>
-      </div>
-
-      {/* 🌐 NETWORK SETTINGS */}
-      <div className="card-glow rounded-xl p-5 relative z-10">
-        <h3 className="text-accent text-sm mb-3 flex items-center gap-2">
-          <Wifi size={14} /> Network Configuration
-        </h3>
-        <div className="grid md:grid-cols-2 gap-4 text-sm text-[var(--text)]/80">
-          <div>
-            <p>Server IP</p>
-            <input
-              type="text"
-              value={ipConfig}
-              onChange={(e) => setIpConfig(e.target.value)}
-              className="w-full bg-card border border-accent rounded px-2 py-1 text-accent"
-            />
-          </div>
-          <div>
-            <p>Server Port</p>
-            <input
-              type="text"
-              value={portConfig}
-              onChange={(e) => setPortConfig(e.target.value)}
-              className="w-full bg-card border border-accent rounded px-2 py-1 text-accent"
-            />
-          </div>
-        </div>
-        <button
-          onClick={() =>
-            toast.success("✅ Network settings saved (local)!")
-          }
-          className="mt-4 px-4 py-2 bg-accent/20 border border-accent text-accent rounded-lg hover:bg-accent/30 transition flex items-center gap-2"
-        >
-          <Save size={14} /> Save Configuration
-        </button>
-      </div>
-
-      {/* 🛡️ THREAT RULE MANAGER */}
-      <div className="card-glow rounded-xl p-5 relative z-10">
-        <h3 className="text-accent text-sm mb-3 flex items-center gap-2">
-          <ShieldAlert size={14} /> Threat Rule Manager
-        </h3>
-
-        {/* Dataset switch */}
-        <div className="flex flex-wrap gap-3 mb-4 text-xs text-[var(--text)]/80">
-          <button
-            className={`px-3 py-1.5 rounded-full border ${
-              activeThreatDataset === "CICIDS2018"
-                ? "border-accent bg-accent/20 text-accent"
-                : "border-slate-500/40 hover:border-accent/50"
-            }`}
-            onClick={() => setActiveThreatDataset("CICIDS2018")}
-          >
-            CICIDS 2018 Rules
+        <div className="flex items-center gap-3">
+          <button onClick={handleSave} className="px-8 py-3 bg-accent text-black font-black uppercase text-xs rounded-xl hover:shadow-[0_0_25px_rgba(0,229,255,0.4)] transition-all flex items-center gap-2">
+            <Save size={16} /> Save Changes
           </button>
-          <button
-            className={`px-3 py-1.5 rounded-full border ${
-              activeThreatDataset === "BCC"
-                ? "border-accent bg-accent/20 text-accent"
-                : "border-slate-500/40 hover:border-accent/50"
-            }`}
-            onClick={() => setActiveThreatDataset("BCC")}
-          >
-            BCC Rules
-          </button>
-          <span className="text-[11px] text-[var(--text)]/50 italic">
-            Toggle which classes should trigger alerts for the active
-            model.
-          </span>
-        </div>
-
-        {/* Rules */}
-        <div className="grid md:grid-cols-3 gap-3 text-sm text-[var(--text)]/85">
-          {Object.keys(currentThreatRules).map((ruleKey) => (
-            <button
-              key={ruleKey}
-              onClick={() =>
-                handleToggleRule(currentThreatKey, ruleKey)
-              }
-              className={`flex items-center justify-between px-3 py-2 rounded-lg border text-xs ${
-                currentThreatRules[ruleKey]
-                  ? "border-accent bg-accent/15 text-accent"
-                  : "border-slate-600/60 bg-card/40 hover:border-accent/50"
-              }`}
-            >
-              <span className="truncate mr-2">{ruleKey}</span>
-              {currentThreatRules[ruleKey] ? (
-                <ToggleRight size={16} />
-              ) : (
-                <ToggleLeft size={16} />
-              )}
-            </button>
-          ))}
         </div>
       </div>
 
-      {/* 📡 PACKET CAPTURE SETTINGS */}
-      <div className="card-glow rounded-xl p-5 relative z-10">
-        <h3 className="text-accent text-sm mb-3 flex items-center gap-2">
-          <HardDrive size={14} /> Packet Capture Settings
-        </h3>
-        <div className="grid md:grid-cols-2 gap-4 text-sm text-[var(--text)]/80">
-          <div>
-            <p className="mb-1">Capture Interface</p>
-            <select
-              value={captureSettings.interface}
-              onChange={(e) =>
-                setCaptureSettings((prev) => ({
-                  ...prev,
-                  interface: e.target.value,
-                }))
-              }
-              className="w-full bg-card border border-accent rounded px-2 py-1 text-accent"
-            >
-              <option value="AUTO">Auto Detect</option>
-              <option value="eth0">eth0</option>
-              <option value="wlan0">wlan0</option>
-            </select>
-          </div>
-          <div>
-            <p className="mb-1">Protocol Filter</p>
-            <select
-              value={captureSettings.protocol}
-              onChange={(e) =>
-                setCaptureSettings((prev) => ({
-                  ...prev,
-                  protocol: e.target.value,
-                }))
-              }
-              className="w-full bg-card border border-accent rounded px-2 py-1 text-accent"
-            >
-              <option value="ANY">Any</option>
-              <option value="TCP">TCP</option>
-              <option value="UDP">UDP</option>
-              <option value="HTTP">HTTP</option>
-              <option value="TLS">TLS</option>
-            </select>
-          </div>
-          <div>
-            <p className="mb-1">Max Packets per Session</p>
-            <input
-              type="number"
-              value={captureSettings.maxPackets}
-              onChange={(e) =>
-                setCaptureSettings((prev) => ({
-                  ...prev,
-                  maxPackets: Number(e.target.value) || 0,
-                }))
-              }
-              className="w-full bg-card border border-accent rounded px-2 py-1 text-accent"
-            />
-          </div>
-          <div>
-            <p className="mb-1">Sampling Rate</p>
-            <select
-              value={captureSettings.sampleRate}
-              onChange={(e) =>
-                setCaptureSettings((prev) => ({
-                  ...prev,
-                  sampleRate: e.target.value,
-                }))
-              }
-              className="w-full bg-card border border-accent rounded px-2 py-1 text-accent"
-            >
-              <option value="1x">1x (Full)</option>
-              <option value="2x">2x</option>
-              <option value="5x">5x</option>
-            </select>
-          </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        
+        {/* --- LEFT COLUMN: SYSTEM & SECURITY --- */}
+        <div className="space-y-6">
+          
+          {/* THEME & VISUALS */}
+          <section className="card-glow p-6">
+            <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-2">
+              <Palette size={14} /> Interface Skins
+            </h3>
+            <div className="grid grid-cols-2 gap-3">
+              {["Cyber Blue", "Crimson Dark", "Emerald Matrix", "Default"].map((t) => (
+                <button key={t} onClick={() => { setTheme(t); applyTheme(t); }}
+                  className={`py-3 text-[10px] font-bold uppercase rounded-xl border transition-all ${theme === t ? 'border-accent bg-accent/20 text-accent shadow-[0_0_15px_rgba(0,229,255,0.1)]' : 'border-white/5 bg-white/5 opacity-40 hover:opacity-100'}`}>
+                  {t}
+                </button>
+              ))}
+            </div>
+          </section>
+
+          {/* CORE PERFORMANCE */}
+          <section className="card-glow p-6">
+            <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-2">
+              <Zap size={14} /> Global System Prefs
+            </h3>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between p-4 bg-white/2 rounded-xl border border-white/5">
+                <span className="text-xs font-bold opacity-70">Real-Time Data Streaming</span>
+                <button onClick={() => setAutoRefresh(!autoRefresh)} className="text-accent">
+                  {autoRefresh ? <ToggleRight size={32} /> : <ToggleLeft size={32} className="opacity-20" />}
+                </button>
+              </div>
+              <div className="flex items-center justify-between p-4 bg-white/2 rounded-xl border border-white/5">
+                <span className="text-xs font-bold opacity-70">Auditory Alert Feedback</span>
+                <button onClick={() => setSoundAlerts(!soundAlerts)} className="text-accent">
+                  {soundAlerts ? <ToggleRight size={32} /> : <ToggleLeft size={32} className="opacity-20" />}
+                </button>
+              </div>
+            </div>
+          </section>
+
+          {/* SECURITY & PRIVACY */}
+          <section className="card-glow p-6">
+            <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-2">
+              <Lock size={14} /> Advanced Security
+            </h3>
+            <div className="space-y-4">
+              <div className="p-3 bg-black/40 rounded-xl border border-white/5">
+                <p className="text-[9px] uppercase opacity-40 mb-2">Encryption Algorithm</p>
+                <select value={encryptionLevel} onChange={(e) => setEncryptionLevel(e.target.value)}
+                  className="bg-transparent text-xs font-bold text-accent outline-none w-full appearance-none">
+                  <option value="AES-256">AES-256-GCM (Hardware Accelerated)</option>
+                  <option value="ChaCha20">ChaCha20-Poly1305</option>
+                </select>
+              </div>
+              <div className="flex items-center justify-between p-3 bg-white/2 rounded-xl border border-white/5">
+                <div className="flex flex-col">
+                  <span className="text-xs font-bold uppercase">Network Stealth Proxy</span>
+                  <span className="text-[8px] opacity-40 font-mono">Routing through {proxyEnabled ? "Active Nodes" : "Direct Link"}</span>
+                </div>
+                <button onClick={() => setProxyEnabled(!proxyEnabled)} className="text-accent">
+                  {proxyEnabled ? <ToggleRight size={28} /> : <ToggleLeft size={28} className="opacity-20" />}
+                </button>
+              </div>
+            </div>
+          </section>
+
+          {/* HARDWARE TELEMETRY */}
+          <section className="card-glow p-6">
+            <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-2">
+              <Cpu size={14} /> Hardware Resources
+            </h3>
+            <div className="space-y-4 font-mono text-[10px]">
+              <div className="flex justify-between">
+                <span className="opacity-50 uppercase">Processor Load</span>
+                <span className="text-emerald-400">12.4% / Normal</span>
+              </div>
+              <div className="w-full bg-black/50 h-1.5 rounded-full overflow-hidden">
+                <div className="bg-emerald-400 h-full w-[12%] shadow-[0_0_10px_#34d399]"></div>
+              </div>
+              <div className="flex justify-between">
+                <span className="opacity-50 uppercase">Neural Cache (8GB)</span>
+                <span className="text-accent">2.1 GB Static</span>
+              </div>
+              <div className="w-full bg-black/50 h-1.5 rounded-full overflow-hidden">
+                <div className="bg-accent h-full w-[26%] shadow-[0_0_10px_var(--accent)]"></div>
+              </div>
+            </div>
+          </section>
         </div>
-      </div>
-
-      {/* 🔔 NOTIFICATION SETTINGS */}
-      <div className="card-glow rounded-xl p-5 relative z-10">
-        <h3 className="text-accent text-sm mb-3 flex items-center gap-2">
-          <Bell size={14} /> Notification Settings
-        </h3>
-        <div className="space-y-4 text-sm text-[var(--text)]/80">
-          <div
-            className="flex items-center gap-3 cursor-pointer hover:text-accent"
-            onClick={() =>
-              setNotificationSettings((prev) => ({
-                ...prev,
-                enablePopup: !prev.enablePopup,
-              }))
-            }
-          >
-            {notificationSettings.enablePopup ? (
-              <ToggleRight size={20} />
-            ) : (
-              <ToggleLeft size={20} />
-            )}
-            Enable In-App Popup Alerts
-          </div>
 
-          <div
-            className="flex items-center gap-3 cursor-pointer hover:text-accent"
-            onClick={() =>
-              setNotificationSettings((prev) => ({
-                ...prev,
-                emailAlerts: !prev.emailAlerts,
-              }))
-            }
-          >
-            {notificationSettings.emailAlerts ? (
-              <ToggleRight size={20} />
-            ) : (
-              <ToggleLeft size={20} />
-            )}
-            Email Alerts
-          </div>
-
-          <div>
-            <p className="mb-1">Alert Email Address</p>
-            <input
-              type="email"
-              value={notificationSettings.email}
-              onChange={(e) =>
-                setNotificationSettings((prev) => ({
-                  ...prev,
-                  email: e.target.value,
-                }))
-              }
-              placeholder="analyst@example.com"
-              className="w-full bg-card border border-accent rounded px-2 py-1 text-accent"
-            />
-          </div>
-
-          <div>
-            <p className="mb-1">Critical Alert Threshold (per minute)</p>
-            <input
-              type="number"
-              value={notificationSettings.criticalThreshold}
-              onChange={(e) =>
-                setNotificationSettings((prev) => ({
-                  ...prev,
-                  criticalThreshold: Number(e.target.value) || 0,
-                }))
-              }
-              className="w-full bg-card border border-accent rounded px-2 py-1 text-accent"
-            />
-          </div>
-        </div>
-      </div>
+        {/* --- RIGHT COLUMN: AI, DATA & LOGS --- */}
+        <div className="space-y-6">
+          
+          {/* AI NEURAL PARAMS */}
+          <section className="card-glow p-6">
+            <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-2">
+              <Brain size={14} /> AI Inference Engine
+            </h3>
+            <div className="space-y-4">
+              <div className="flex justify-between text-xs font-bold uppercase">
+                <span>Threat Sensitivity</span>
+                <span className="text-accent">{aiSensitivity}%</span>
+              </div>
+              <input type="range" min="30" max="100" value={aiSensitivity} onChange={(e) => setAiSensitivity(Number(e.target.value))}
+                  className="w-full h-1.5 bg-black/60 rounded-lg appearance-none cursor-pointer accent-accent" />
+              <div className="grid grid-cols-3 gap-2">
+                {["Passive", "Semi-Auto", "Fully Auto"].map(mode => (
+                  <button key={mode} onClick={() => setResponseMode(mode)}
+                    className={`py-2 text-[9px] font-black uppercase rounded-lg border transition-all ${responseMode === mode ? 'bg-accent/20 border-accent text-accent' : 'border-white/5 opacity-30 hover:opacity-100'}`}>
+                    {mode}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* MODEL & DATASET MANAGEMENT */}
+          <section className="card-glow p-6">
+            <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-2">
+              <Database size={14} /> Model Architecture
+            </h3>
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-3">
+                <div className="p-3 bg-black/40 rounded-xl border border-white/5">
+                  <p className="text-[9px] uppercase opacity-40 mb-1">Active Dataset</p>
+                  <select value={activeThreatDataset} onChange={(e) => setActiveThreatDataset(e.target.value)}
+                    className="bg-transparent text-xs font-bold text-accent outline-none w-full">
+                    <option value="CICIDS2018">CICIDS 2018</option>
+                    <option value="BCC">BCC Traffic</option>
+                  </select>
+                </div>
+                <div className="p-3 bg-black/40 rounded-xl border border-white/5">
+                  <p className="text-[9px] uppercase opacity-40 mb-1">Model Version</p>
+                  <p className="text-xs font-bold">RF_XENON_v4.2</p>
+                </div>
+              </div>
+              <div onClick={() => fileInputRef.current.click()} className="border-2 border-dashed border-accent/20 rounded-2xl p-6 flex flex-col items-center gap-2 hover:bg-accent/5 cursor-pointer transition-all">
+                <input type="file" ref={fileInputRef} className="hidden" />
+                <UploadCloud className="text-accent opacity-50" />
+                <span className="text-[10px] font-black uppercase">Inject Custom Weights</span>
+              </div>
+            </div>
+          </section>
+
+          {/* AUDIT TRAIL */}
+          <section className="card-glow p-6">
+            <h3 className="text-accent text-[10px] font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-2">
+              <History size={14} /> System Audit Trail
+            </h3>
+            <div className="space-y-2 max-h-[140px] overflow-y-auto pr-2 custom-scroll">
+              {[
+                { t: '12:04', m: 'Firewall: Blocked IP 192.168.1.5' },
+                { t: '11:58', m: 'Model: Weights updated from cloud' },
+                { t: '11:42', m: 'Admin: Session authorized' },
+                { t: '10:15', m: 'System: Integrity check pass' },
+              ].map((log, i) => (
+                <div key={i} className="flex gap-3 text-[9px] font-mono border-b border-white/5 pb-2">
+                  <span className="text-accent">[{log.t}]</span>
+                  <span className="opacity-60 uppercase">{log.m}</span>
+                </div>
+              ))}
+            </div>
+          </section>
 
-      {/* 🤖 MODEL & DATASET MANAGEMENT */}
-      <div className="card-glow rounded-xl p-5 relative z-10">
-        <h3 className="text-accent text-sm mb-3 flex items-center gap-2">
-          <Sliders size={14} /> Model & Dataset Management
-        </h3>
-        <div className="space-y-4 text-sm text-[var(--text)]/80">
-          {/* Dataset selection */}
-          <div className="flex flex-wrap gap-3 items-center">
-            <span className="text-xs uppercase tracking-[0.15em] text-[var(--text)]/60">
-              Active Dataset:
-            </span>
-            <button
-              className={`px-3 py-1.5 rounded-full border ${
-                modelConfig.activeDataset === "CICIDS2018"
-                  ? "border-accent bg-accent/20 text-accent"
-                  : "border-slate-500/40 hover:border-accent/50"
-              }`}
-              onClick={() =>
-                setModelConfig((prev) => ({
-                  ...prev,
-                  activeDataset: "CICIDS2018",
-                  activeModelName: "CICIDS2018_Default",
-                }))
-              }
-            >
-              CICIDS 2018
-            </button>
-            <button
-              className={`px-3 py-1.5 rounded-full border ${
-                modelConfig.activeDataset === "BCC"
-                  ? "border-accent bg-accent/20 text-accent"
-                  : "border-slate-500/40 hover:border-accent/50"
-              }`}
-              onClick={() =>
-                setModelConfig((prev) => ({
-                  ...prev,
-                  activeDataset: "BCC",
-                  activeModelName: "BCC_Default",
-                }))
-              }
-            >
-              BCC
+          {/* DANGER ZONE */}
+          <div className="grid grid-cols-2 gap-4">
+            <button className="py-4 border border-accent/30 bg-accent/5 text-accent rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-accent/10 transition-all flex flex-col items-center gap-2">
+              <FileDown size={20} /> Export Sync
             </button>
-          </div>
-
-          {/* Upload Model */}
-          <div className="grid md:grid-cols-[2fr_auto] gap-3 items-center">
-            <div>
-              <p className="mb-1 flex items-center gap-2">
-                <UploadCloud size={14} /> Upload Custom Model (.pkl/.joblib)
-              </p>
-              <input
-                type="file"
-                accept=".pkl,.joblib,.onnx"
-                onChange={(e) => setModelFile(e.target.files[0] || null)}
-                className="w-full text-xs text-[var(--text)]/70 bg-card border border-accent/40 rounded px-2 py-1 file:mr-3 file:px-2 file:py-1 file:text-xs file:rounded file:bg-accent/20 file:border-none file:text-accent"
-              />
-            </div>
-            <button
-              onClick={handleModelUpload}
-              className="h-[38px] px-4 py-2 bg-accent/20 border border-accent text-accent rounded-lg hover:bg-accent/30 transition flex items-center gap-2 justify-center"
-            >
-              <Brain size={14} /> Register Model
+            <button className="py-4 border border-rose-500/30 bg-rose-500/5 text-rose-500 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-rose-500/10 transition-all flex flex-col items-center gap-2">
+              <RefreshCcw size={20} /> Purge Node
             </button>
           </div>
 
-          <div className="text-xs text-[var(--text)]/60">
-            <p>Active model: {modelConfig.activeModelName}</p>
-            {modelConfig.customModelName && (
-              <p>
-                Custom model:{" "}
-                <span className="text-accent">
-                  {modelConfig.customModelName}
-                </span>{" "}
-                {modelConfig.lastUpdated && (
-                  <span>
-                    (updated{" "}
-                    {new Date(
-                      modelConfig.lastUpdated
-                    ).toLocaleString()}
-                    )
-                  </span>
-                )}
-              </p>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* 👥 USER & ACCESS OVERVIEW (UI-ONLY) */}
-      <div className="card-glow rounded-xl p-5 relative z-10">
-        <h3 className="text-accent text-sm mb-3 flex items-center gap-2">
-          <Users size={14} /> User & Access Overview
-        </h3>
-        <div className="text-sm text-[var(--text)]/80 space-y-2">
-          <div className="flex justify-between border-b border-slate-600/40 pb-1 text-xs text-[var(--text)]/60 uppercase tracking-[0.12em]">
-            <span>User</span>
-            <span>Role</span>
-          </div>
-          <div className="flex justify-between items-center">
-            <span>{user?.displayName || "Current Operator"}</span>
-            <span className="text-accent text-xs px-2 py-1 rounded-full border border-accent/50">
-              Operator
-            </span>
-          </div>
-          <p className="text-[11px] text-[var(--text)]/50 mt-2 italic">
-            Role-based access can be integrated with your auth provider
-            in a future enhancement.
-          </p>
         </div>
       </div>
-
-      {/* Backup & Reset */}
-      <div className="card-glow rounded-xl p-5 relative z-10">
-        <h3 className="text-accent text-sm mb-3 flex items-center gap-2">
-          <FileDown size={14} /> Backup & Reset
-        </h3>
-        <div className="flex flex-wrap gap-4 items-center text-sm text-[var(--text)]/80">
-          <button
-            onClick={handleBackup}
-            className="px-4 py-2 bg-[var(--accent)]/20 border border-[var(--accent)] text-[var(--accent)] rounded-lg hover:bg-[var(--accent)]/30 transition flex items-center gap-2"
-          >
-            <FileDown size={14} /> Backup Settings
-          </button>
-          <button
-            onClick={handleReset}
-            className="px-4 py-2 bg-rose-600/20 border border-rose-400/30 text-rose-300 rounded-lg hover:bg-rose-600/30 transition flex items-center gap-2"
-          >
-            <RefreshCcw size={14} /> Reset to Default
-          </button>
-        </div>
-        {backupProgress > 0 && backupProgress < 100 && (
-          <div className="mt-3 w-full bg-[var(--accent)]/10 h-2 rounded-full overflow-hidden">
-            <div
-              className="bg-[var(--accent)] h-2 animate-pulse"
-              style={{ width: `${backupProgress}%` }}
-            ></div>
-          </div>
-        )}
-      </div>
     </div>
   );
-}
+}