diff --git a/Screenshot 2026-03-09 183616.png b/Screenshot 2026-03-09 183616.png
deleted file mode 100644
index b53e22a..0000000
Binary files a/Screenshot 2026-03-09 183616.png and /dev/null differ
diff --git a/Screenshot 2026-03-09 183733.png b/Screenshot 2026-03-09 183733.png
deleted file mode 100644
index 40069ed..0000000
Binary files a/Screenshot 2026-03-09 183733.png and /dev/null differ
diff --git a/Screenshot 2026-03-09 183739.png b/Screenshot 2026-03-09 183739.png
deleted file mode 100644
index 759480a..0000000
Binary files a/Screenshot 2026-03-09 183739.png and /dev/null differ
diff --git a/Screenshot 2026-03-09 183750.png b/Screenshot 2026-03-09 183750.png
deleted file mode 100644
index 4a14c28..0000000
Binary files a/Screenshot 2026-03-09 183750.png and /dev/null differ
diff --git a/Screenshot 2026-03-09 183756.png b/Screenshot 2026-03-09 183756.png
deleted file mode 100644
index 92eeec6..0000000
Binary files a/Screenshot 2026-03-09 183756.png and /dev/null differ
diff --git a/frontend/index.html b/frontend/index.html
deleted file mode 100644
index 2246a3c..0000000
--- a/frontend/index.html
+++ /dev/null
@@ -1,1398 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OneAlert</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <style>
-        * {
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
-            background: linear-gradient(135deg, #0f0f1e 0%, #1a1a3e 50%, #0f1a2e 100%);
-            min-height: 100vh;
-            margin: 0;
-            color: #e0e0e0;
-        }
-        
-        .centered {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            min-height: 100vh;
-            padding: 20px;
-        }
-        
-        .card {
-            background: rgba(20, 20, 40, 0.8);
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(102, 126, 234, 0.2);
-            border-radius: 20px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-            padding: 3rem 2.5rem;
-            min-width: 360px;
-            max-width: 95vw;
-            animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
-        }
-        
-        @keyframes slideUp {
-            from { opacity: 0; transform: translateY(30px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        
-        .logo {
-            text-align: center;
-            margin-bottom: 2.5rem;
-        }
-        
-        .logo-icon {
-            font-size: 3.5rem;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 1rem;
-            display: block;
-        }
-        
-        .logo-text {
-            font-size: 2rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 0.5rem;
-            letter-spacing: -0.5px;
-        }
-        
-        .logo-subtitle {
-            font-size: 0.95rem;
-            color: #a0a0c0;
-            font-weight: 400;
-        }
-        
-        .input-group {
-            margin-bottom: 1.3rem;
-        }
-        
-        input[type="email"], input[type="password"], input[type="text"], select {
-            width: 100%;
-            padding: 0.95rem 1.2rem;
-            border: 1.5px solid rgba(102, 126, 234, 0.2);
-            border-radius: 12px;
-            font-size: 1rem;
-            background: rgba(255, 255, 255, 0.05);
-            margin-bottom: 0.2rem;
-            color: #e0e0e0;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(10px);
-        }
-        
-        input::placeholder, select { color: #727294; }
-        
-        input:focus, select:focus {
-            outline: none;
-            border-color: #667eea;
-            background: rgba(102, 126, 234, 0.1);
-            box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
-        }
-        
-        button, .btn {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 0.95rem 1.8rem;
-            border: none;
-            border-radius: 12px;
-            cursor: pointer;
-            font-size: 1rem;
-            font-weight: 600;
-            margin-top: 0.5rem;
-            margin-bottom: 0.5rem;
-            width: 100%;
-            box-sizing: border-box;
-            transition: all 0.3s ease;
-            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            font-size: 0.95rem;
-        }
-        
-        button:hover, .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
-            background: linear-gradient(135deg, #5a6fd8 0%, #6d3fa2 100%);
-        }
-        
-        button:active, .btn:active {
-            transform: translateY(0);
-        }
-        
-        .github-btn {
-            background: rgba(36, 41, 46, 0.6);
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.8rem;
-            margin-top: 1rem;
-            margin-bottom: 1rem;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        
-        .github-btn:hover {
-            background: rgba(36, 41, 46, 0.9);
-            border-color: rgba(255, 255, 255, 0.2);
-        }
-        
-        .divider {
-            text-align: center;
-            margin: 1.5rem 0;
-            position: relative;
-        }
-        
-        .divider::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 0;
-            right: 0;
-            height: 1px;
-            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
-        }
-        
-        .divider span {
-            background: rgba(20, 20, 40, 0.8);
-            padding: 0 1rem;
-            color: #a0a0c0;
-            font-size: 0.9rem;
-            position: relative;
-        }
-        
-        .logout-btn {
-            position: absolute;
-            top: 24px;
-            right: 32px;
-            background: rgba(220, 53, 69, 0.8);
-            color: #fff;
-            border-radius: 10px;
-            padding: 0.6rem 1.4rem;
-            font-weight: 600;
-            font-size: 0.9rem;
-            border: 1px solid rgba(220, 53, 69, 0.3);
-            cursor: pointer;
-            width: auto;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(10px);
-        }
-        
-        .logout-btn:hover {
-            background: rgba(220, 53, 69, 1);
-            transform: translateY(-2px);
-            box-shadow: 0 10px 25px rgba(220, 53, 69, 0.3);
-        }
-        
-        .dashboard-container {
-            max-width: 1300px;
-            margin: 40px auto;
-            background: rgba(20, 20, 40, 0.7);
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(102, 126, 234, 0.15);
-            border-radius: 24px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-            padding: 3rem;
-            position: relative;
-            animation: fadeIn 0.6s ease;
-        }
-        
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        
-        .dashboard-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 3rem;
-            padding-bottom: 2rem;
-            border-bottom: 1px solid rgba(102, 126, 234, 0.1);
-        }
-        
-        .dashboard-header h2 {
-            margin: 0;
-            font-size: 2rem;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        
-        .dashboard-header > div:last-child {
-            text-align: right;
-            color: #a0a0c0;
-            font-size: 0.95rem;
-        }
-        
-        .alert {
-            padding: 1.2rem 1.5rem;
-            border-radius: 12px;
-            margin-bottom: 1.5rem;
-            font-weight: 500;
-            background: rgba(200, 50, 50, 0.15);
-            color: #ff6b6b;
-            border: 1px solid rgba(200, 50, 50, 0.2);
-            backdrop-filter: blur(10px);
-            animation: slideDown 0.4s ease;
-        }
-        
-        @keyframes slideDown {
-            from { opacity: 0; transform: translateY(-10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        
-        .alert.success {
-            background: rgba(50, 200, 50, 0.15);
-            color: #51cf66;
-            border-color: rgba(50, 200, 50, 0.2);
-        }
-        
-        .stats {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 3rem;
-        }
-        
-        .stat-card {
-            background: rgba(102, 126, 234, 0.08);
-            border: 1px solid rgba(102, 126, 234, 0.2);
-            border-radius: 16px;
-            padding: 1.8rem;
-            text-align: center;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-            transition: all 0.3s ease;
-            backdrop-filter: blur(10px);
-        }
-        
-        .stat-card:hover {
-            border-color: rgba(102, 126, 234, 0.4);
-            transform: translateY(-4px);
-            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.2);
-            background: rgba(102, 126, 234, 0.12);
-        }
-        
-        .stat-title {
-            font-size: 1rem;
-            color: #a0a0c0;
-            margin-bottom: 0.8rem;
-            font-weight: 500;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-        
-        .stat-value {
-            font-size: 2.5rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        
-        .section {
-            margin-bottom: 3rem;
-        }
-        
-        .section h3 {
-            font-size: 1.3rem;
-            color: #e0e0e0;
-            margin: 0 0 1.5rem 0;
-            font-weight: 700;
-            display: flex;
-            align-items: center;
-            gap: 0.8rem;
-        }
-        
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-bottom: 1.5rem;
-            background: rgba(255, 255, 255, 0.02);
-            border-radius: 12px;
-            overflow: hidden;
-            border: 1px solid rgba(102, 126, 234, 0.1);
-        }
-        
-        th, td {
-            padding: 1.2rem;
-            text-align: left;
-            color: #e0e0e0;
-            border-bottom: 1px solid rgba(102, 126, 234, 0.08);
-        }
-        
-        th {
-            background: rgba(102, 126, 234, 0.1);
-            color: #a0a0c0;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            font-size: 0.85rem;
-        }
-        
-        tr:hover {
-            background: rgba(102, 126, 234, 0.05);
-        }
-        
-        .btn-small {
-            padding: 0.6rem 1.2rem;
-            font-size: 0.85rem;
-            margin: 0.3rem;
-            width: auto;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 8px;
-            transition: all 0.2s ease;
-            font-weight: 600;
-        }
-        
-        .btn-small:hover {
-            transform: scale(1.05);
-        }
-        
-        .loading {
-            text-align: center;
-            padding: 3rem;
-            color: #667eea;
-            font-size: 1.1rem;
-            animation: pulse 2s infinite;
-        }
-        
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.6; }
-        }
-        
-        .tabs {
-            display: flex;
-            gap: 1rem;
-            border-bottom: 2px solid rgba(102, 126, 234, 0.1);
-            margin-bottom: 2.5rem;
-            overflow-x: auto;
-            padding-bottom: 1rem;
-        }
-        
-        .tab-btn {
-            background: none;
-            border: none;
-            padding: 0.8rem 1.2rem;
-            cursor: pointer;
-            font-size: 0.95rem;
-            color: #a0a0c0;
-            border-bottom: 3px solid transparent;
-            margin-bottom: -1rem;
-            font-weight: 600;
-            width: auto;
-            transition: all 0.3s ease;
-            white-space: nowrap;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            font-size: 0.85rem;
-        }
-        
-        .tab-btn:hover {
-            color: #667eea;
-            transform: translateY(-2px);
-        }
-        
-        .tab-btn.active {
-            border-bottom-color: #667eea;
-            color: #667eea;
-        }
-        
-        .tab-content {
-            display: none;
-            animation: fadeIn 0.4s ease;
-        }
-        
-        .tab-content.active {
-            display: block;
-        }
-        
-        .network-zone-label {
-            display: inline-block;
-            padding: 0.5rem 0.9rem;
-            border-radius: 8px;
-            font-size: 0.8rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-            background: rgba(102, 126, 234, 0.15);
-            color: #667eea;
-        }
-        
-        .zone-field { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
-        .zone-control { background: rgba(66, 165, 245, 0.15); color: #42a5f5; }
-        .zone-supervisory { background: rgba(102, 187, 106, 0.15); color: #66bb6a; }
-        .zone-safety { background: rgba(239, 83, 80, 0.15); color: #ef5350; }
-        
-        .risk-low { color: #66bb6a; font-weight: bold; }
-        .risk-medium { color: #ffc107; font-weight: bold; }
-        .risk-high { color: #ef5350; font-weight: bold; }
-        
-        .device-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 2rem;
-        }
-        
-        .device-card {
-            background: rgba(102, 126, 234, 0.05);
-            border: 1px solid rgba(102, 126, 234, 0.2);
-            border-radius: 14px;
-            padding: 1.5rem;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-            border-left: 4px solid #667eea;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(10px);
-        }
-        
-        .device-card:hover {
-            transform: translateY(-4px);
-            border-color: rgba(102, 126, 234, 0.4);
-            box-shadow: 0 12px 36px rgba(102, 126, 234, 0.2);
-        }
-        
-        .device-card.risk-high { border-left-color: #ef5350; }
-        .device-card.risk-medium { border-left-color: #ffc107; }
-        .device-card.risk-low { border-left-color: #66bb6a; }
-        
-        .device-card-title {
-            font-weight: 700;
-            margin-bottom: 1rem;
-            font-size: 1.1rem;
-            color: #e0e0e0;
-            word-break: break-word;
-        }
-        
-        .device-card-detail {
-            font-size: 0.9rem;
-            color: #a0a0c0;
-            margin: 0.6rem 0;
-            line-height: 1.5;
-        }
-        
-        .device-card-detail b {
-            color: #e0e0e0;
-            font-weight: 600;
-        }
-        
-        form {
-            display: flex;
-            gap: 1rem;
-            flex-wrap: wrap;
-            align-items: end;
-            margin-bottom: 1.5rem;
-            padding: 1.5rem;
-            background: rgba(102, 126, 234, 0.05);
-            border: 1px solid rgba(102, 126, 234, 0.1);
-            border-radius: 12px;
-        }
-        
-        form input, form select {
-            min-width: 140px;
-            flex: 1;
-            min-width: 120px;
-        }
-        
-        form button {
-            flex-shrink: 0;
-            min-width: 120px;
-            margin: 0 !important;
-        }
-        
-        @media (max-width: 768px) {
-            .dashboard-container { 
-                padding: 1.5rem; 
-                margin: 20px;
-            }
-            
-            .dashboard-header { 
-                flex-direction: column; 
-                gap: 1rem; 
-                align-items: flex-start;
-            }
-            
-            .dashboard-header > div:last-child {
-                text-align: left;
-            }
-            
-            .stats { 
-                grid-template-columns: 1fr;
-            }
-            
-            .tabs { 
-                gap: 0.5rem; 
-            }
-            
-            .tab-btn {
-                padding: 0.6rem 0.8rem;
-                font-size: 0.75rem;
-            }
-            
-            .device-grid { 
-                grid-template-columns: 1fr;
-            }
-            
-            .card {
-                min-width: unset;
-                padding: 2rem 1.5rem;
-            }
-            
-            form {
-                flex-direction: column;
-            }
-            
-            form input, form select, form button {
-                width: 100%;
-            }
-            
-            table {
-                font-size: 0.85rem;
-            }
-            
-            th, td {
-                padding: 0.8rem;
-            }
-        }
-    </style>
-</head>
-<body>
-<div id="app"></div>
-<script>
-const API_BASE = '/api/v1';
-let authToken = localStorage.getItem('authToken');
-
-function showAlert(message, type = '') {
-    const app = document.getElementById('app');
-    let alertDiv = document.createElement('div');
-    alertDiv.className = 'alert' + (type ? ' ' + type : '');
-    alertDiv.textContent = message;
-    app.prepend(alertDiv);
-    setTimeout(() => alertDiv.remove(), 4000);
-}
-
-function renderLogin(showRegister = false) {
-    document.getElementById('app').innerHTML = `
-    <div class="centered">
-      <div class="card">
-        <div class="logo">
-          <div class="logo-icon">
-            <i class="fas fa-shield-alt"></i>
-          </div>
-          <div class="logo-text">OneAlert</div>
-          <div class="logo-subtitle">Enterprise Security Monitoring</div>
-        </div>
-        <div id="login-register-toggle" style="text-align:center; margin-bottom:1rem;">
-          <button id="show-login-btn" style="width:auto; margin-right:0.5rem; ${showRegister ? 'background: rgba(102, 126, 234, 0.3); border: 1px solid rgba(102, 126, 234, 0.3);' : 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);'}">Login</button>
-          <button id="show-register-btn" style="width:auto; margin-left:0.5rem; ${showRegister ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);' : 'background: rgba(102, 126, 234, 0.3); border: 1px solid rgba(102, 126, 234, 0.3);'}">Register</button>
-        </div>
-        <form id="login-form" style="display:${showRegister ? 'none' : 'block'};">
-          <div class="input-group">
-            <input type="email" id="login-email" placeholder="Email" required autocomplete="username">
-          </div>
-          <div class="input-group">
-            <input type="password" id="login-password" placeholder="Password" required autocomplete="current-password">
-          </div>
-          <button type="submit">Sign In</button>
-          <div class="divider">
-            <span>or</span>
-          </div>
-          <button type="button" class="github-btn" onclick="githubLogin()">
-            <i class="fab fa-github"></i>
-            Continue with GitHub
-          </button>
-        </form>
-        <form id="register-form" style="display:${showRegister ? 'block' : 'none'};">
-          <div class="input-group">
-            <input type="email" id="register-email" placeholder="Email" required autocomplete="username">
-          </div>
-          <div class="input-group">
-            <input type="password" id="register-password" placeholder="Password" required autocomplete="new-password">
-          </div>
-          <div class="input-group">
-            <input type="text" id="register-fullname" placeholder="Full Name" autocomplete="name">
-          </div>
-          <div class="input-group">
-            <input type="text" id="register-company" placeholder="Company" autocomplete="organization">
-          </div>
-          <button type="submit">Create Account</button>
-          <div class="divider">
-            <span>or</span>
-          </div>
-          <button type="button" class="github-btn" onclick="githubLogin()">
-            <i class="fab fa-github"></i>
-            Sign up with GitHub
-          </button>
-        </form>
-      </div>
-    </div>
-    `;
-    
-    document.getElementById('show-login-btn').onclick = () => renderLogin(false);
-    document.getElementById('show-register-btn').onclick = () => renderLogin(true);
-    
-    document.getElementById('login-form').onsubmit = async (e) => {
-        e.preventDefault();
-        const email = document.getElementById('login-email').value;
-        const password = document.getElementById('login-password').value;
-        try {
-            const formData = new FormData();
-            formData.append('username', email);
-            formData.append('password', password);
-            const response = await axios.post(`${API_BASE}/auth/login`, formData, {
-                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
-            });
-            authToken = response.data.access_token;
-            localStorage.setItem('authToken', authToken);
-            axios.defaults.headers.common['Authorization'] = `Bearer ${authToken}`;
-            showAlert('Login successful!', 'success');
-            renderDashboard();
-        } catch (error) {
-            showAlert('Login failed: ' + (error.response?.data?.detail || 'Unknown error'));
-        }
-    };
-    
-    document.getElementById('register-form').onsubmit = async (e) => {
-        e.preventDefault();
-        const email = document.getElementById('register-email').value;
-        const password = document.getElementById('register-password').value;
-        const fullName = document.getElementById('register-fullname').value;
-        const company = document.getElementById('register-company').value;
-        try {
-            const regData = {
-                email: email,
-                password: password,
-                full_name: fullName,
-                company: company
-            };
-            await axios.post(`${API_BASE}/auth/register`, regData);
-            showAlert('Registration successful! Please log in.', 'success');
-            renderLogin(false);
-        } catch (error) {
-            showAlert('Registration failed: ' + (error.response?.data?.detail || 'Unknown error'));
-        }
-    };
-}
-
-async function githubLogin() {
-    try {
-        // Get the GitHub auth URL from the backend.
-        // The backend stores the state in a secure HttpOnly cookie for CSRF protection.
-        const response = await axios.get(`${API_BASE}/auth/github/login`);
-        // Redirect to GitHub
-        window.location.href = response.data.auth_url;
-    } catch (error) {
-        showAlert('GitHub login failed: ' + (error.response?.data?.detail || 'Unknown error'));
-    }
-}
-
-// Check for GitHub OAuth callback
-function checkGitHubCallback() {
-    // Check for token in URL fragment (after redirect)
-    const hash = window.location.hash;
-    if (hash && hash.startsWith('#github_token=')) {
-        const token = hash.replace('#github_token=', '');
-        if (token) {
-            authToken = token;
-            localStorage.setItem('authToken', authToken);
-            axios.defaults.headers.common['Authorization'] = `Bearer ${authToken}`;
-            // Clean up URL
-            window.history.replaceState({}, document.title, window.location.pathname);
-            showAlert('GitHub login successful!', 'success');
-            renderDashboard();
-            return;
-        }
-    }
-    // Fallback: legacy code path
-    const urlParams = new URLSearchParams(window.location.search);
-    const code = urlParams.get('code');
-    const state = urlParams.get('state');
-    if (code) {
-        handleGitHubCallback(code, state);
-    }
-}
-
-async function handleGitHubCallback(code, state) {
-    try {
-        const response = await axios.get(`${API_BASE}/auth/github/callback?code=${code}&state=${state || ''}`);
-        authToken = response.data.access_token;
-        localStorage.setItem('authToken', authToken);
-        axios.defaults.headers.common['Authorization'] = `Bearer ${authToken}`;
-        
-        // Clean up URL
-        window.history.replaceState({}, document.title, window.location.pathname);
-        
-        showAlert('GitHub login successful!', 'success');
-        renderDashboard();
-    } catch (error) {
-        showAlert('GitHub authentication failed: ' + (error.response?.data?.detail || 'Unknown error'));
-        renderLogin();
-    }
-}
-
-async function fetchProfile() {
-    try {
-        const response = await axios.get(`${API_BASE}/auth/me`);
-        return response.data;
-    } catch (error) {
-        logout();
-        throw error;
-    }
-}
-
-async function fetchStats() {
-    try {
-        const response = await axios.get(`${API_BASE}/alerts/stats/overview`);
-        return response.data;
-    } catch (error) { 
-        console.error('Failed to fetch stats:', error);
-        return {}; 
-    }
-}
-
-async function fetchAssets() {
-    try {
-        const response = await axios.get(`${API_BASE}/assets/?page=1&size=10`);
-        return response.data.assets || [];
-    } catch (error) { 
-        console.error('Failed to fetch assets:', error);
-        return []; 
-    }
-}
-
-async function fetchAlerts() {
-    try {
-        const response = await axios.get(`${API_BASE}/alerts/?page=1&size=10`);
-        return response.data.alerts || [];
-    } catch (error) { 
-        console.error('Failed to fetch alerts:', error);
-        return []; 
-    }
-}
-
-async function fetchAuditLogs() {
-    try {
-        const response = await axios.get(`${API_BASE}/auth/audit-logs`);
-        return response.data;
-    } catch (error) {
-        return [];
-    }
-}
-
-// OT API Functions
-async function fetchOTSummary() {
-    try {
-        const response = await axios.get(`${API_BASE}/ot/summary`);
-        return response.data;
-    } catch (error) {
-        console.error('Failed to fetch OT summary:', error);
-        return {};
-    }
-}
-
-async function fetchNetworkSensors() {
-    try {
-        const response = await axios.get(`${API_BASE}/ot/sensors`);
-        return response.data || [];
-    } catch (error) {
-        console.error('Failed to fetch sensors:', error);
-        return [];
-    }
-}
-
-async function fetchDiscoveredDevices() {
-    try {
-        const response = await axios.get(`${API_BASE}/ot/discovered-devices?size=50`);
-        return response.data.devices || [];
-    } catch (error) {
-        console.error('Failed to fetch discovered devices:', error);
-        return [];
-    }
-}
-
-async function fetchDevicesByZone() {
-    try {
-        const response = await axios.get(`${API_BASE}/ot/devices-by-zone`);
-        return response.data || {};
-    } catch (error) {
-        console.error('Failed to fetch devices by zone:', error);
-        return {};
-    }
-}
-
-async function fetchDevicesByProtocol() {
-    try {
-        const response = await axios.get(`${API_BASE}/ot/devices-by-protocol`);
-        return response.data || {};
-    } catch (error) {
-        console.error('Failed to fetch devices by protocol:', error);
-        return {};
-    }
-}
-
-async function createNetworkSensor(sensorData) {
-    try {
-        const response = await axios.post(`${API_BASE}/ot/sensors`, sensorData);
-        return response.data;
-    } catch (error) {
-        throw new Error(error.response?.data?.detail || 'Failed to create sensor');
-    }
-}
-
-async function deleteNetworkSensor(sensorId) {
-    try {
-        await axios.delete(`${API_BASE}/ot/sensors/${sensorId}`);
-    } catch (error) {
-        throw new Error(error.response?.data?.detail || 'Failed to delete sensor');
-    }
-}
-
-// Update integration settings
-async function updateIntegrations(slack, webhook) {
-    await axios.patch(`${API_BASE}/auth/me/integrations`, null, {
-        params: { slack_webhook_url: slack, webhook_url: webhook }
-    });
-}
-
-// MFA setup/verify
-async function setupMFA() {
-    const res = await axios.post(`${API_BASE}/auth/me/mfa/setup`);
-    return res.data;
-}
-async function verifyMFA(code) {
-    const res = await axios.post(`${API_BASE}/auth/me/mfa/verify`, null, { params: { code } });
-    return res.data;
-}
-
-function logout() {
-    localStorage.removeItem('authToken');
-    delete axios.defaults.headers.common['Authorization'];
-    authToken = null;
-    renderLogin();
-}
-
-async function renderDashboard(editAssetId = null, editAlertId = null, createAlertMode = false, activeTab = 'dashboard') {
-    if (!authToken) { 
-        renderLogin(); 
-        return; 
-    }
-    
-    axios.defaults.headers.common['Authorization'] = `Bearer ${authToken}`;
-    
-    // Show loading state
-    document.getElementById('app').innerHTML = '<div class="loading">Loading dashboard...</div>';
-    
-    let user, stats, assets, alerts, otSummary, sensors, discoveredDevices, devicesByZone, devicesByProtocol;
-    try {
-        [user, stats, assets, alerts] = await Promise.all([
-            fetchProfile(),
-            fetchStats(),
-            fetchAssets(),
-            fetchAlerts()
-        ]);
-        
-        // Load OT data in parallel
-        [otSummary, sensors, discoveredDevices, devicesByZone, devicesByProtocol] = await Promise.all([
-            fetchOTSummary(),
-            fetchNetworkSensors(),
-            fetchDiscoveredDevices(),
-            fetchDevicesByZone(),
-            fetchDevicesByProtocol()
-        ]);
-    } catch (error) {
-        console.error('Failed to load dashboard data:', error);
-        showAlert('Failed to load dashboard data');
-        return;
-    }
-    
-    let auditLogs = [];
-    if (user.role === 'admin') {
-        auditLogs = await fetchAuditLogs();
-    }
-    
-    const getRiskClass = (score) => {
-        if (score >= 70) return 'risk-high';
-        if (score >= 40) return 'risk-medium';
-        return 'risk-low';
-    };
-    
-    const getRiskLabel = (score) => {
-        if (score >= 70) return `<span class="risk-high">${score.toFixed(0)}</span>`;
-        if (score >= 40) return `<span class="risk-medium">${score.toFixed(0)}</span>`;
-        return `<span class="risk-low">${score.toFixed(0)}</span>`;
-    };
-    
-    document.getElementById('app').innerHTML = `
-    <div class="dashboard-container">
-      <button class="logout-btn" onclick="logout()">Logout</button>
-      <div class="dashboard-header">
-        <div>
-          <h2>Welcome, ${user.full_name || user.email}</h2>
-          <div style="color: #a0a0c0; font-size:1rem;">${user.company || ''}</div>
-        </div>
-        <div style="text-align:right;">
-          <div><b style="color: #e0e0e0;">Email:</b> <span style="color: #a0a0c0;">${user.email}</span></div>
-        </div>
-      </div>
-      
-      <!-- Tab Navigation -->
-      <div class="tabs">
-        <button class="tab-btn ${activeTab === 'dashboard' ? 'active' : ''}" onclick="switchTab('dashboard')">
-          <i class="fas fa-tachometer-alt"></i> Dashboard
-        </button>
-        <button class="tab-btn ${activeTab === 'ot' ? 'active' : ''}" onclick="switchTab('ot')">
-          <i class="fas fa-industry"></i> OT / ICS
-        </button>
-        <button class="tab-btn ${activeTab === 'assets' ? 'active' : ''}" onclick="switchTab('assets')">
-          <i class="fas fa-boxes"></i> All Assets
-        </button>
-        <button class="tab-btn ${activeTab === 'alerts' ? 'active' : ''}" onclick="switchTab('alerts')">
-          <i class="fas fa-bell"></i> Alerts
-        </button>
-        ${user.role === 'admin' ? `<button class="tab-btn ${activeTab === 'admin' ? 'active' : ''}" onclick="switchTab('admin')">
-          <i class="fas fa-cog"></i> Admin
-        </button>` : ''}
-      </div>
-      
-      <!-- Dashboard Tab -->
-      <div id="tab-dashboard" class="tab-content ${activeTab === 'dashboard' ? 'active' : ''}">
-        <div class="stats">
-          <div class="stat-card">
-            <div class="stat-title">Total Alerts</div>
-            <div class="stat-value">${stats.total_alerts || 0}</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-title">Open Alerts</div>
-            <div class="stat-value">${stats.open_alerts || 0}</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-title">Assets</div>
-            <div class="stat-value">${assets.length || 0}</div>
-          </div>
-        </div>
-        
-        <div class="section">
-          <div style="display:flex;justify-content:space-between;align-items:center;">
-            <h3>Recent Alerts</h3>
-          </div>
-          <table><thead><tr><th>Title</th><th>Severity</th><th>Asset</th><th>CVE</th><th>CVSS</th><th>Exploitability</th><th>Remediation</th><th>Status</th><th>Action</th></tr></thead><tbody>
-          ${alerts.map(al => `
-            <tr><td>${al.title}</td><td>${al.severity}</td><td>${al.asset_name||''}</td><td>${al.cve_id||''}</td><td>${al.cvss_score||''}</td><td>${al.exploitability||''}</td><td>${al.remediation?`<a href='${al.remediation}' target='_blank'>Link</a>`:''}</td><td>${al.status}</td><td>
-              <button class='btn btn-small' style='background:linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);' onclick='ackAlert(${al.id})'>Acknowledge</button>
-            </td></tr>
-          `).join('') || '<tr><td colspan="9">No alerts found.</td></tr>'}
-          </tbody></table>
-        </div>
-        
-        <div class="section">
-          <div style="display:flex;justify-content:space-between;align-items:center;">
-            <h3>Your Assets / Services</h3>
-          </div>
-          <form id="add-asset-form" style="display:flex;gap:1rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem;">
-            <input type="text" id="asset-name" placeholder="Name" required style="min-width:120px;">
-            <input type="text" id="asset-type" placeholder="Type (e.g. server, SaaS, app)" required style="min-width:120px;">
-            <input type="text" id="asset-vendor" placeholder="Vendor" style="min-width:120px;">
-            <input type="text" id="asset-product" placeholder="Product" style="min-width:120px;">
-            <input type="text" id="asset-version" placeholder="Version" style="min-width:100px;">
-            <input type="text" id="asset-description" placeholder="Description" style="min-width:180px;">
-            <button type="submit">Add Asset</button>
-          </form>
-          <table><thead><tr><th>Name</th><th>Type</th><th>Vendor</th><th>Product</th><th>Version</th><th>Description</th><th>Action</th></tr></thead><tbody>
-          ${assets.map(asset => editAssetId === asset.id ? `
-            <tr><td colspan="7">
-              <form id="edit-asset-form-${asset.id}" style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:end;">
-                <input type="text" id="edit-asset-name" value="${asset.name}" required style="min-width:120px;">
-                <input type="text" id="edit-asset-type" value="${asset.asset_type}" required style="min-width:120px;">
-                <input type="text" id="edit-asset-vendor" value="${asset.vendor||''}" style="min-width:120px;">
-                <input type="text" id="edit-asset-product" value="${asset.product||''}" style="min-width:120px;">
-                <input type="text" id="edit-asset-version" value="${asset.version||''}" style="min-width:100px;">
-                <input type="text" id="edit-asset-description" value="${asset.description||''}" style="min-width:180px;">
-                <button type="submit">Save</button>
-                <button type="button" id="cancel-edit-btn">Cancel</button>
-              </form>
-            </td></tr>
-          ` : `
-            <tr><td>${asset.name}</td><td>${asset.asset_type}</td><td>${asset.vendor||''}</td><td>${asset.product||''}</td><td>${asset.version||''}</td><td>${asset.description||''}</td><td>
-              <button class='btn btn-small' style='background:linear-gradient(135deg, #ffc107 0%, #ffb300 100%);color:#000;' onclick='editAsset(${asset.id})'>Edit</button>
-              <button class='btn btn-small' style='background:linear-gradient(135deg, #ef5350 0%, #e53935 100%);' onclick='deleteAsset(${asset.id})'>Delete</button>
-            </td></tr>
-          `).join('') || '<tr><td colspan="7">No assets found.</td></tr>'}
-          </tbody></table>
-        </div>
-        
-        <div class="section">
-          <h3>Notification Integrations</h3>
-          <form id="integration-form" style="display:flex;gap:1rem;flex-wrap:wrap;align-items:end;">
-            <div><input type="text" id="slack-webhook" placeholder="Slack Webhook URL" value="${user.slack_webhook_url||''}" style="min-width:220px;"></div>
-            <div><input type="text" id="generic-webhook" placeholder="Generic Webhook URL" value="${user.webhook_url||''}" style="min-width:220px;"></div>
-            <div><button type="submit">Update</button></div>
-          </form>
-        </div>
-        
-        <div class="section">
-          <h3>Multi-Factor Authentication (MFA)</h3>
-          <div id="mfa-status">${user.mfa_enabled ? 'Enabled' : 'Disabled'}</div>
-          <button id="setup-mfa-btn">${user.mfa_enabled ? 'Reset MFA' : 'Enable MFA'}</button>
-          <div id="mfa-setup-area"></div>
-        </div>
-      </div>
-      
-      <!-- OT/ICS Dashboard Tab -->
-      <div id="tab-ot" class="tab-content ${activeTab === 'ot' ? 'active' : ''}">
-        <h3>Industrial Control Systems (OT/ICS) Dashboard</h3>
-        
-        <div class="stats">
-          <div class="stat-card">
-            <div class="stat-title">Managed OT Assets</div>
-            <div class="stat-value">${otSummary.managed_ot_assets || 0}</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-title">Discovered Devices</div>
-            <div class="stat-value">${otSummary.discovered_ot_devices || 0}</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-title">High-Risk Devices</div>
-            <div class="stat-value" style="color:#ef5350;">${otSummary.high_risk_devices || 0}</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-title">Uncorrelated</div>
-            <div class="stat-value">${otSummary.uncorrelated_devices || 0}</div>
-          </div>
-        </div>
-        
-        <!-- Network Sensors Section -->
-        <div class="section">
-          <h3>Network Sensors</h3>
-          <form id="add-sensor-form" style="display:flex;gap:1rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem;">
-            <input type="text" id="sensor-name" placeholder="Sensor Name" required style="min-width:150px;">
-            <select id="sensor-type" required style="min-width:120px;">
-              <option value="">Select Type</option>
-              <option value="snmp">SNMP</option>
-              <option value="zeek">Zeek</option>
-              <option value="shodan">Shodan</option>
-              <option value="nessus">Nessus</option>
-              <option value="custom">Custom</option>
-            </select>
-            <input type="text" id="sensor-location" placeholder="Location" style="min-width:120px;">
-            <input type="text" id="sensor-segment" placeholder="Network Segment" style="min-width:140px;">
-            <button type="submit">Register Sensor</button>
-          </form>
-          
-          <table><thead><tr><th>Sensor Name</th><th>Type</th><th>Location</th><th>Network Segment</th><th>Status</th><th>Last Heartbeat</th><th>Devices Found</th><th>Action</th></tr></thead><tbody>
-          ${sensors.map(s => `
-            <tr>
-              <td>${s.name}</td>
-              <td>${s.sensor_type}</td>
-              <td>${s.location || '-'}</td>
-              <td>${s.network_segment || '-'}</td>
-              <td>${s.enabled ? '<span style="color:green">✓ Active</span>' : '<span style="color:red">✗ Inactive</span>'}</td>
-              <td>${s.last_heartbeat ? new Date(s.last_heartbeat).toLocaleString() : 'Never'}</td>
-              <td>${s.last_discovery_count || 0}</td>
-              <td><button class='btn btn-small' style='background:linear-gradient(135deg, #ef5350 0%, #e53935 100%);' onclick='deleteSensor(${s.id})'>Delete</button></td>
-            </tr>
-          `).join('') || '<tr><td colspan="8">No sensors registered. Add one above.</td></tr>'}
-          </tbody></table>
-        </div>
-        
-        <!-- Discovered OT Devices -->
-        <div class="section">
-          <h3>Discovered OT Devices</h3>
-          <div style="margin-bottom:1rem;">
-            <label>Filter by Risk: 
-              <select id="risk-filter" onchange="applyRiskFilter()">
-                <option value="">All</option>
-                <option value="high">High Only</option>
-                <option value="medium">Medium Only</option>
-              </select>
-            </label>
-          </div>
-          
-          <div class="device-grid" id="device-grid">
-            ${discoveredDevices.length === 0 ? '<div style="grid-column:1/-1;">No discovered devices yet</div>' : discoveredDevices.map(d => `
-              <div class="device-card ${getRiskClass(d.risk_score || 0)}">
-                <div class="device-card-title">${d.hostname || d.ip_address}</div>
-                <div class="device-card-detail"><b>IP:</b> ${d.ip_address}</div>
-                <div class="device-card-detail"><b>MAC:</b> ${d.mac_address || '-'}</div>
-                <div class="device-card-detail"><b>Manufacturer:</b> ${d.manufacturer || '-'}</div>
-                <div class="device-card-detail"><b>Model:</b> ${d.model || '-'}</div>
-                <div class="device-card-detail"><b>Firmware:</b> ${d.firmware_version || '-'}</div>
-                <div class="device-card-detail"><b>Device Class:</b> ${d.device_class || '-'}</div>
-                <div class="device-card-detail"><b>Protocols:</b> ${(d.protocols || []).join(', ') || '-'}</div>
-                <div class="device-card-detail"><b>OT Type:</b> ${d.ot_device_type || '-'}</div>
-                <div class="device-card-detail"><b>Risk Score:</b> ${getRiskLabel(d.risk_score || 0)} / 100</div>
-                <div class="device-card-detail"><b>Confidence:</b> ${d.confidence || '-'}</div>
-                ${d.risk_factors ? `<div class="device-card-detail"><b>Risk Factors:</b> ${(d.risk_factors || []).join(', ')}</div>` : ''}
-                <div class="device-card-detail"><b>First Seen:</b> ${new Date(d.first_seen).toLocaleString()}</div>
-              </div>
-            `).join('')}
-          </div>
-        </div>
-        
-        <!-- Devices by Network Zone -->
-        <div class="section">
-          <h3>Devices by Purdue Network Zone</h3>
-          <table><thead><tr><th>Zone</th><th>Device Count</th><th>High-Risk</th></tr></thead><tbody>
-          ${Object.entries(devicesByZone).map(([zone, data]) => `
-            <tr>
-              <td><span class="network-zone-label zone-${data.zone_lower || 'unknown'}">${zone}</span></td>
-              <td>${data.count || 0}</td>
-              <td>${data.high_risk_count || 0}</td>
-            </tr>
-          `).join('') || '<tr><td colspan="3">No zone data available</td></tr>'}
-          </tbody></table>
-        </div>
-        
-        <!-- Devices by Protocol -->
-        <div class="section">
-          <h3>Devices by Communication Protocol</h3>
-          <table><thead><tr><th>Protocol</th><th>Device Count</th><th>Risk Level</th></tr></thead><tbody>
-          ${Object.entries(devicesByProtocol).map(([protocol, data]) => `
-            <tr>
-              <td>${protocol}</td>
-              <td>${data.count || 0}</td>
-              <td>${data.security_level || 'Unknown'}</td>
-            </tr>
-          `).join('') || '<tr><td colspan="3">No protocol data available</td></tr>'}
-          </tbody></table>
-        </div>
-      </div>
-      
-      <!-- Assets Tab -->
-      <div id="tab-assets" class="tab-content ${activeTab === 'assets' ? 'active' : ''}">
-        <h3>All Assets</h3>
-        <div class="section">
-          <form id="add-asset-form-2" style="display:flex;gap:1rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem;">
-            <input type="text" id="asset-name-2" placeholder="Name" required style="min-width:120px;">
-            <input type="text" id="asset-type-2" placeholder="Type" required style="min-width:120px;">
-            <input type="text" id="asset-vendor-2" placeholder="Vendor" style="min-width:120px;">
-            <input type="text" id="asset-product-2" placeholder="Product" style="min-width:120px;">
-            <input type="text" id="asset-version-2" placeholder="Version" style="min-width:100px;">
-            <input type="text" id="asset-description-2" placeholder="Description" style="min-width:180px;">
-            <button type="submit">Add Asset</button>
-          </form>
-          <table><thead><tr><th>Name</th><th>Type</th><th>Vendor</th><th>Product</th><th>Version</th><th>Description</th><th>Action</th></tr></thead><tbody>
-          ${assets.map(asset => `
-            <tr><td>${asset.name}</td><td>${asset.asset_type}</td><td>${asset.vendor||''}</td><td>${asset.product||''}</td><td>${asset.version||''}</td><td>${asset.description||''}</td><td>
-              <button class='btn btn-small' style='background:linear-gradient(135deg, #ffc107 0%, #ffb300 100%);color:#000;' onclick='editAsset(${asset.id})'>Edit</button>
-              <button class='btn btn-small' style='background:linear-gradient(135deg, #ef5350 0%, #e53935 100%);' onclick='deleteAsset(${asset.id})'>Delete</button>
-            </td></tr>
-          `).join('') || '<tr><td colspan="7">No assets found.</td></tr>'}
-          </tbody></table>
-        </div>
-      </div>
-      
-      <!-- Alerts Tab -->
-      <div id="tab-alerts" class="tab-content ${activeTab === 'alerts' ? 'active' : ''}">
-        <h3>All Alerts</h3>
-        <div class="section">
-          <table><thead><tr><th>Title</th><th>Severity</th><th>Asset</th><th>CVE</th><th>CVSS</th><th>Status</th><th>Action</th></tr></thead><tbody>
-          ${alerts.map(al => `
-            <tr><td>${al.title}</td><td>${al.severity}</td><td>${al.asset_name||''}</td><td>${al.cve_id||''}</td><td>${al.cvss_score||''}</td><td>${al.status}</td><td>
-              <button class='btn btn-small' style='background:linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);' onclick='ackAlert(${al.id})'>Acknowledge</button>
-            </td></tr>
-          `).join('') || '<tr><td colspan="7">No alerts found.</td></tr>'}
-          </tbody></table>
-        </div>
-      </div>
-      
-      <!-- Admin Tab -->
-      ${user.role === 'admin' ? `
-      <div id="tab-admin" class="tab-content ${activeTab === 'admin' ? 'active' : ''}">
-        <h3>Administration</h3>
-        <div class="section">
-          <h4>Audit Logs</h4>
-          <table><thead><tr><th>ID</th><th>User</th><th>Action</th><th>Target</th><th>Detail</th><th>Time</th></tr></thead><tbody>
-          ${auditLogs.map(log => `
-            <tr><td>${log.id}</td><td>${log.user_id}</td><td>${log.action}</td><td>${log.target_type||''} ${log.target_id||''}</td><td>${log.detail||''}</td><td>${log.timestamp||''}</td></tr>
-          `).join('') || '<tr><td colspan="6">No logs found.</td></tr>'}
-          </tbody></table>
-        </div>
-      </div>
-      ` : ''}
-    </div>
-    `;
-    
-    // Tab switching function
-    window.switchTab = (tabName) => renderDashboard(null, null, false, tabName);
-    
-    // Form handlers
-    document.getElementById('integration-form').onsubmit = async (e) => {
-        e.preventDefault();
-        const slack = document.getElementById('slack-webhook').value;
-        const webhook = document.getElementById('generic-webhook').value;
-        try {
-            await updateIntegrations(slack, webhook);
-            showAlert('Integration settings updated!', 'success');
-            renderDashboard(null, null, false, activeTab);
-        } catch (error) {
-            showAlert('Failed to update integrations');
-        }
-    };
-    
-    document.getElementById('setup-mfa-btn').onclick = async () => {
-        const mfaArea = document.getElementById('mfa-setup-area');
-        mfaArea.innerHTML = 'Generating MFA secret...';
-        try {
-            const mfaUser = await setupMFA();
-            mfaArea.innerHTML = `<div>Scan this secret in your authenticator app: <b>${mfaUser.mfa_secret}</b></div>
-            <input type='text' id='mfa-code' placeholder='Enter TOTP code'>
-            <button id='verify-mfa-btn'>Verify</button>`;
-            document.getElementById('verify-mfa-btn').onclick = async () => {
-                const code = document.getElementById('mfa-code').value;
-                const ok = await verifyMFA(code);
-                if (ok) {
-                    showAlert('MFA enabled!', 'success');
-                    renderDashboard(null, null, false, activeTab);
-                }
-            };
-        } catch (error) {
-            showAlert('Failed to setup MFA');
-        }
-    };
-    
-    // Asset forms
-    document.getElementById('add-asset-form').onsubmit = async (e) => {
-        e.preventDefault();
-        const assetData = {
-            name: document.getElementById('asset-name').value,
-            asset_type: document.getElementById('asset-type').value,
-            vendor: document.getElementById('asset-vendor').value,
-            product: document.getElementById('asset-product').value,
-            version: document.getElementById('asset-version').value,
-            description: document.getElementById('asset-description').value
-        };
-        try {
-            await axios.post(`${API_BASE}/assets/`, assetData);
-            showAlert('Asset added!', 'success');
-            renderDashboard(null, null, false, activeTab);
-        } catch (error) {
-            showAlert('Failed to add asset');
-        }
-    };
-    
-    const addAssetForm2 = document.getElementById('add-asset-form-2');
-    if (addAssetForm2) {
-        addAssetForm2.onsubmit = async (e) => {
-            e.preventDefault();
-            const assetData = {
-                name: document.getElementById('asset-name-2').value,
-                asset_type: document.getElementById('asset-type-2').value,
-                vendor: document.getElementById('asset-vendor-2').value,
-                product: document.getElementById('asset-product-2').value,
-                version: document.getElementById('asset-version-2').value,
-                description: document.getElementById('asset-description-2').value
-            };
-            try {
-                await axios.post(`${API_BASE}/assets/`, assetData);
-                showAlert('Asset added!', 'success');
-                renderDashboard(null, null, false, activeTab);
-            } catch (error) {
-                showAlert('Failed to add asset');
-            }
-        };
-    }
-    
-    // Sensor form
-    document.getElementById('add-sensor-form').onsubmit = async (e) => {
-        e.preventDefault();
-        const sensorData = {
-            name: document.getElementById('sensor-name').value,
-            sensor_type: document.getElementById('sensor-type').value,
-            location: document.getElementById('sensor-location').value || null,
-            network_segment: document.getElementById('sensor-segment').value || null
-        };
-        try {
-            await createNetworkSensor(sensorData);
-            showAlert('Sensor registered!', 'success');
-            renderDashboard(null, null, false, activeTab);
-        } catch (error) {
-            showAlert('Failed to register sensor: ' + error.message);
-        }
-    };
-}
-
-// Edit asset function
-function editAsset(assetId) {
-    renderDashboard(assetId, null, false, 'dashboard');
-}
-
-// Delete asset function
-async function deleteAsset(assetId) {
-    if (!confirm('Are you sure you want to delete this asset?')) return;
-    try {
-        await axios.delete(`${API_BASE}/assets/${assetId}`);
-        showAlert('Asset deleted!', 'success');
-        renderDashboard(null, null, false, 'assets');
-    } catch (error) {
-        showAlert('Failed to delete asset');
-    }
-}
-
-// Alert actions
-async function ackAlert(alertId) {
-    try {
-        await axios.post(`${API_BASE}/alerts/${alertId}/acknowledge`);
-        showAlert('Alert acknowledged!', 'success');
-        renderDashboard();
-    } catch (error) {
-        showAlert('Failed to acknowledge alert');
-    }
-}
-
-// OT specific functions
-async function deleteSensor(sensorId) {
-    if (!confirm('Are you sure you want to delete this sensor?')) return;
-    try {
-        await deleteNetworkSensor(sensorId);
-        showAlert('Sensor deleted!', 'success');
-        renderDashboard(null, null, false, 'ot');
-    } catch (error) {
-        showAlert('Failed to delete sensor: ' + error.message);
-    }
-}
-
-function applyRiskFilter() {
-    const filterVal = document.getElementById('risk-filter').value;
-    const cards = document.querySelectorAll('.device-card');
-    cards.forEach(card => {
-        if (!filterVal) {
-            card.style.display = 'block';
-        } else if (filterVal === 'high' && card.classList.contains('risk-high')) {
-            card.style.display = 'block';
-        } else if (filterVal === 'medium' && card.classList.contains('risk-medium')) {
-            card.style.display = 'block';
-        } else {
-            card.style.display = 'none';
-        }
-    });
-}
-
-// Initial render
-if (authToken) {
-    renderDashboard();
-} else {
-    // Check for GitHub OAuth callback first
-    checkGitHubCallback();
-    if (!authToken) {
-        renderLogin();
-    }
-}
-</script>
-</body>
-</html>
