🚨 NetAlert-AI Dashboard

The advanced command center for the NetAlert intelligent network monitoring platform.
Visualize threats, monitor network flows, and manage security alerts in real-time with a premium glassmorphism-inspired UI.

Repository · Report Bug · Request Feature

---

🌍 Overview

NetAlert-AI Dashboard is a modern Security Operations Center (SOC) interface designed for real-time threat monitoring and network intelligence visualization.

Unlike traditional cluttered dashboards, NetAlert-AI focuses on:

• Actionable intelligence
• Clear visual hierarchy
• High-performance rendering
• Security-first architecture

It connects to the NetAlert AI backend to display:

• Real-time network anomaly alerts
• Geographic distribution of threats
• Live packet flow visualizations
• AI-driven threat summaries and reports

---

✨ Key Features

🖥️ Premium User Experience

• Glassmorphism UI with depth and transparency
• Fully dynamic Light / Dark theme system
• Responsive design for large SOC displays and laptops

🔐 Secure Authentication

• Sign In / Sign Up flows
• Role-based dashboards (Admin / Security Tester)
• Profile management with verification badges

📊 Advanced Data Visualization

• Interactive attack world map (2D/3D ready)
• Sankey flow diagrams for network traffic
• Time-series anomaly charts
• Geo-distribution threat widgets

🛡️ Security Operations

• Real-time alert management system
• Drill-down alert inspection
• Automated PDF report generation
• AI-generated threat context summaries

---

🛠 Technology Stack

Frontend Core

• React 18
• Vite
• TypeScript

Styling & UI

• Tailwind CSS
• tailwindcss-animate
• Radix UI
• Shadcn UI
• Lucide React

Data & Visualization

• Recharts
• D3.js
• React Simple Maps

Forms & Validation

• React Hook Form
• Zod

AI Integration

• Google GenKit (Experimental)

---

🏗 System Architecture

flowchart TD
    A[User Opens NetAlert AI Dashboard] --> B[Frontend Cyber Interface]
    
    B --> C[Data Input Layer]
    C --> D[Network Logs and System Data]
    
    D --> E[Backend Server]
    E --> F[Data Preprocessing Module]
    
    F --> G[AI Analysis Engine]
    
    G --> H[Anomaly Detection Module]
    G --> I[Threat Pattern Recognition]
    G --> J[Behavior Analysis Module]
    
    H --> K[Risk Evaluation Engine]
    I --> K
    J --> K
    
    K --> L[Threat Classification Layer]
    
    L --> M[Database Storage]
    M --> N[Alert and Log Records]
    
    L --> O[Alert Generation System]
    O --> P[Real Time Notifications]
    
    P --> Q[Frontend Visualization Layer]
    Q --> R[Threat Dashboard Panels]
    Q --> S[Charts and Risk Indicators]
    Q --> T[Live Alert Monitoring]

Loading

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

---

Installation

git clone https://github.com/LoganthP/NetAlert-AI.git
cd NetAlert-AI
npm install

---

Run Development Server

npm run dev

This will start:

• Frontend → http://localhost:5173
• Data Server → http://localhost:3001

---

Build for Production

npm run build

---

📁 Project Structure

src/
├── components/
│   ├── auth/              # Authentication components
│   ├── dashboard/         # Maps, Charts, Stats
│   ├── layouts/           # Header, Sidebar
│   └── ui/                # Core Shadcn UI components
├── context/               # Global state management
├── hooks/                 # Custom React hooks
├── lib/                   # Utilities and mock generators
├── pages/
│   ├── Login.tsx
│   ├── Profile.tsx
│   └── dashboard/
│       ├── Overview.tsx
│       ├── Flows.tsx
│       └── Alerts.tsx
└── styles/

---

🧪 Testing

npm run test

---

🤝 Contributing

1. Fork the repository
2. Create a new branch
3. Commit your changes
4. Push to your branch
5. Open a Pull Request

• Share it with others
• Contribute improvements