Initial Release v1.0 🚀

2026-08-23 18:50:09 +02:00
commit 12a93301f5
15 changed files with 1619 additions and 0 deletions
@@ -0,0 +1,35 @@
+# /home/docker/pve_dashboard/Dockerfile
+FROM php:8.2-apache
+
+# Benötigte Pakete installieren (SQLite + OpenSSL für Zertifikate + Cron für den Scheduler)
+RUN apt-get update && apt-get install -y \
+    libsqlite3-dev \
+    openssl \
+    cron \
+    && docker-php-ext-install pdo_sqlite
+
+# Apache Rewrite-Modul (für schöne URLs) und SSL-Modul aktivieren
+RUN a2enmod rewrite ssl
+
+# Generiere ein Self-Signed Zertifikat (Gültig für 10 Jahre)
+RUN openssl req -x509 -nodes -days 3650 -newkey rsa:2048 \
+    -keyout /etc/ssl/private/apache-selfsigned.key \
+    -out /etc/ssl/certs/apache-selfsigned.crt \
+    -subj "/C=DE/ST=Brandenburg/L=Gruenheide/O=PUC/OU=IT/CN=localhost"
+
+# Passe die Default SSL Konfiguration an
+RUN sed -i 's/ssl-cert-snakeoil.pem/apache-selfsigned.crt/g' /etc/apache2/sites-available/default-ssl.conf \
+    && sed -i 's/ssl-cert-snakeoil.key/apache-selfsigned.key/g' /etc/apache2/sites-available/default-ssl.conf
+
+# SSL Site in Apache aktivieren
+RUN a2ensite default-ssl.conf
+
+# Cronjob einrichten (Ruft die cron.php minütlich auf und leitet Output ins Docker-Log um)
+RUN echo "* * * * * root /usr/local/bin/php /var/www/html/cron.php > /proc/1/fd/1 2>/proc/1/fd/2\n" >> /etc/crontab
+
+# Beide Ports freigeben
+EXPOSE 80
+EXPOSE 443
+
+# Startbefehl: Startet erst den Cron-Daemon im Hintergrund und dann Apache im Vordergrund
+CMD cron && apache2-foreground
@@ -0,0 +1,39 @@
+# Proxmox Unified Console (PUC) 🚀
+
+A lightning-fast, unified web dashboard to manage your Proxmox Virtual Environment (PVE), Proxmox Backup Server (PBS), and Proxmox Mail Gateway (PMG) from a single, clean interface. 
+
+Built entirely with native APIs—no slow iframes, no CORS issues.
+
+## ✨ Features
+
+* **Unified Multi-Node Management:** Connect multiple PVE, PBS, and PMG instances via API tokens.
+* **Proxmox VE (PVE):** 
+  * Live CPU/RAM/Net metrics using Chart.js.
+  * Start, Stop, Reboot, Delete, and Create VMs & LXC containers.
+  * Smart NoVNC-Console integration (Popout).
+  * Hardware & Network config (Resize Disks, add NICs).
+  * Backup & Snapshot management.
+* **Proxmox Backup Server (PBS):**
+  * Live Datastore capacity monitoring.
+  * Snapshot explorer with namespace support.
+  * System jobs overview (Garbage Collection, Prune, Verify).
+  * Task Log Viewer.
+* **Proxmox Mail Gateway (PMG):**
+  * Unified Spam Quarantine management (Deliver/Delete).
+  * Cross-node Mail Queue tracking (Active, Deferred, Hold).
+  * Advanced Syslog Tracking Center.
+  * Configuration Editor (Relay, Ports, TLS, Trusted Networks, Relay Domains).
+  * 1-Click SSL Certificate Upload & Management.
+* **Task Scheduler:** Built-in cron system to automate VM and Node reboots overnight.
+* **Security First:** 
+  * Granular User Roles (Admin, VM-Manager, Viewer).
+  * Restrict specific VMs to specific users.
+  * Comprehensive Audit Log tracking all actions.
+  * Auto-generated Self-Signed SSL out of the box (Port 443).
+
+## 📦 Quickstart (Docker)
+
+1. **Clone the repository:**
+   ```bash
+   git clone [https://github.com/DEIN_GITHUB_NAME/proxmox-unified-console.git](https://github.com/DEIN_GITHUB_NAME/proxmox-unified-console.git)
+   cd proxmox-unified-console
@@ -0,0 +1,20 @@
+# /home/docker/pve_dashboard/docker-compose.yml
+version: '3.8'
+
+services:
+  pve-dashboard:
+    build: .
+    container_name: pve_unified_console
+    restart: unless-stopped
+    ports:
+      # Port 80 bleibt fürs Testing / HAProxy
+      - "8080:80"
+      # NEU: Port 443 für sicheres NoVNC! (Wir mappen es nach außen z.B. auf 8443)
+      - "8443:443"
+    volumes:
+      # Dein Source-Code
+      - ./src:/var/www/html
+      # Deine Datenbank, sicher ausgelagert
+      - ./data:/var/www/data
+    environment:
+      - TZ=Europe/Berlin
@@ -0,0 +1,4 @@
+# /home/docker/pve_dashboard/.gitignore
+data/*
+!data/.gitkeep
+.DS_Store
@@ -0,0 +1,153 @@
+<?php
+// /home/docker/pve_dashboard/src/api.php
+require_once 'db.php';
+header('Content-Type: application/json');
+$action = $_GET['action'] ?? '';
+
+// === ZENTRALE AUDIT LOG FUNKTION ===
+function logAudit($actionName, $target = '') {
+    global $pdo;
+    @session_start();
+    $userId = $_SESSION['user_id'] ?? 0;
+    $username = $_SESSION['username'] ?? 'System';
+    session_write_close();
+    
+    $stmt = $pdo->prepare("INSERT INTO audit_logs (user_id, username, action, target) VALUES (?, ?, ?, ?)");
+    $stmt->execute([$userId, $username, $actionName, $target]);
+}
+
+if ($action === 'login') {
+    $username = trim($_POST['username'] ?? ''); $password = $_POST['password'] ?? '';
+    $stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?"); $stmt->execute([$username]); $user = $stmt->fetch(PDO::FETCH_ASSOC);
+    if ($user && password_verify($password, $user['password_hash'])) {
+        $_SESSION['user_id'] = $user['id']; $_SESSION['username'] = $user['username']; $_SESSION['role'] = $user['role'];
+        logAudit('User Login', 'IP: ' . $_SERVER['REMOTE_ADDR']);
+        echo json_encode(['success' => true]);
+    } else echo json_encode(['success' => false, 'error' => 'Login fehlgeschlagen.']);
+    exit;
+}
+if ($action === 'logout') { 
+    logAudit('User Logout', '');
+    session_destroy(); echo json_encode(['success' => true]); exit; 
+}
+
+if (!isset($_SESSION['user_id'])) { echo json_encode(['success' => false, 'error' => 'Zugriff verweigert.']); exit; }
+
+$isAdmin = ($_SESSION['role'] ?? '') === 'admin';
+session_write_close(); 
+
+function getProxmoxData($ip, $tokenId, $tokenSecret, $endpoint, $type = 'pve', $method = "GET", $postData = null, $timeout = 4) {
+    $port = ($type === 'pbs') ? 8007 : 8006;
+    if ($type === 'pmg' || $type === 'pbs') {
+        $chAuth = curl_init("https://{$ip}:{$port}/api2/json/access/ticket");
+        curl_setopt_array($chAuth, [CURLOPT_RETURNTRANSFER => true, CURLOPT_SSL_VERIFYPEER => false, CURLOPT_SSL_VERIFYHOST => false, CURLOPT_TIMEOUT => 2, CURLOPT_POST => true, CURLOPT_POSTFIELDS => http_build_query(['username' => $tokenId, 'password' => $tokenSecret])]);
+        $authRes = json_decode(curl_exec($chAuth), true); curl_close($chAuth);
+        if(!isset($authRes['data']['ticket'])) return ['data' => []];
+        $cookieName = ($type === 'pbs') ? 'PBSAuthCookie' : 'PMGAuthCookie';
+        $headers = ["Cookie: {$cookieName}=" . $authRes['data']['ticket'], "CSRFPreventionToken: " . $authRes['data']['CSRFPreventionToken']];
+    } else {
+        $headers = ["Authorization: PVEAPIToken={$tokenId}={$tokenSecret}"];
+    }
+
+    $ch = curl_init("https://{$ip}:{$port}{$endpoint}");
+    $options = [CURLOPT_RETURNTRANSFER => true, CURLOPT_SSL_VERIFYPEER => false, CURLOPT_SSL_VERIFYHOST => false, CURLOPT_TIMEOUT => $timeout, CURLOPT_HTTPHEADER => $headers];
+    if ($method !== "GET") { $options[CURLOPT_CUSTOMREQUEST] = $method; if ($postData) $options[CURLOPT_POSTFIELDS] = is_array($postData) ? http_build_query($postData) : $postData; }
+    curl_setopt_array($ch, $options);
+    $res = curl_exec($ch); curl_close($ch); return json_decode($res, true);
+}
+
+function checkVmPermission($pdo, $vmid) {
+    global $isAdmin; if ($isAdmin) return true; 
+    @session_start(); $userId = $_SESSION['user_id'] ?? 0; session_write_close();
+    $stmt = $pdo->prepare("SELECT permissions FROM users WHERE id = ?"); $stmt->execute([$userId]); return in_array($vmid, json_decode($stmt->fetchColumn(), true)['allowed_vms'] ?? []);
+}
+
+// === AUDIT LOG ENDPUNKT ===
+if ($action === 'get_audit_logs') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->query("SELECT * FROM audit_logs ORDER BY id DESC LIMIT 200");
+    echo json_encode(['success' => true, 'data' => $stmt->fetchAll(PDO::FETCH_ASSOC)]); exit;
+}
+
+if ($action === 'get_users' || $action === 'create_user' || $action === 'delete_user' || $action === 'get_nodes' || $action === 'delete_node' || $action === 'add_node') {
+    require_once 'api_pve.php'; exit;
+}
+
+if ($action === 'get_recent_jobs') { 
+    $stmt = $pdo->query("SELECT * FROM nodes"); $allTasks = []; 
+    foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $node) { 
+        if ($node['type'] === 'pbs') {
+            $tasks = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/localhost/tasks?limit=10", 'pbs');
+            if (isset($tasks['data'])) { foreach ($tasks['data'] as $t) { $t['node_name'] = $node['name']; $allTasks[] = $t; } }
+        } elseif ($node['type'] === 'pmg') {
+            $nData = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes", 'pmg');
+            if (isset($nData['data'][0]['node'])) { $tasks = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$nData['data'][0]['node']}/tasks?limit=10", 'pmg'); if (isset($tasks['data'])) { foreach ($tasks['data'] as $t) { $t['node_name'] = $node['name']; $allTasks[] = $t; } } }
+        } else {
+            $nData = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes", 'pve'); 
+            if (isset($nData['data'])) { foreach ($nData['data'] as $nInfo) { $tasks = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$nInfo['node']}/tasks?limit=10", 'pve'); if (isset($tasks['data'])) { foreach ($tasks['data'] as $t) { $t['node_name'] = $node['name']; $allTasks[] = $t; } } } } 
+        }
+    } 
+    usort($allTasks, function($a, $b) { return ($b['starttime'] ?? 0) <=> ($a['starttime'] ?? 0); }); echo json_encode(['success' => true, 'data' => array_slice($allTasks, 0, 15)]); exit; 
+}
+
+if ($action === 'get_updates') { 
+    $stmt = $pdo->query("SELECT * FROM nodes WHERE type != 'pmg'"); $total = 0; $nodesNeed = []; 
+    foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $node) { 
+        if ($node['type'] === 'pbs') {
+            $apt = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/localhost/apt/update", 'pbs');
+            if (isset($apt['data'])) { $c = count($apt['data']); $total += $c; if ($c > 0) $nodesNeed[] = $node['name'] . " (" . $c . ")"; }
+        } else {
+            $nData = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes", 'pve'); 
+            if (isset($nData['data'])) { foreach ($nData['data'] as $nInfo) { $apt = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$nInfo['node']}/apt/update", 'pve'); if (isset($apt['data'])) { $c = count($apt['data']); $total += $c; if ($c > 0) $nodesNeed[] = $nInfo['node'] . " (" . $c . ")"; } } }
+        } 
+    } 
+    echo json_encode(['success' => true, 'total' => $total, 'details' => implode(', ', $nodesNeed)]); exit; 
+}
+
+if ($action === 'get_task_log') { 
+    if (!$isAdmin) exit; 
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC); 
+    $upid = $_GET['upid']; $host = $_GET['host'] ?? 'localhost'; 
+    $log = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$host}/tasks/{$upid}/log", $node['type']); 
+    echo json_encode(['success' => true, 'data' => $log['data'] ?? []]); exit; 
+}
+
+if ($action === 'get_cron_jobs') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->query("SELECT s.*, n.name as node_name FROM scheduled_tasks s LEFT JOIN nodes n ON s.node_id = n.id ORDER BY s.id DESC");
+    echo json_encode(['success' => true, 'data' => $stmt->fetchAll(PDO::FETCH_ASSOC)]); exit;
+}
+if ($action === 'add_cron_job') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("INSERT INTO scheduled_tasks (name, node_id, action_type, target_vmid, cron_schedule) VALUES (?, ?, ?, ?, ?)");
+    $stmt->execute([$_POST['name'], $_POST['node_id'], $_POST['action_type'], $_POST['target_vmid'] ?? '', $_POST['cron_schedule']]);
+    logAudit('Cronjob erstellt', $_POST['name']);
+    echo json_encode(['success' => true]); exit;
+}
+if ($action === 'delete_cron_job') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("DELETE FROM scheduled_tasks WHERE id = ?");
+    $stmt->execute([$_POST['id']]);
+    logAudit('Cronjob gelöscht', 'ID: ' . $_POST['id']);
+    echo json_encode(['success' => true]); exit;
+}
+if ($action === 'toggle_cron_job') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("UPDATE scheduled_tasks SET is_active = ? WHERE id = ?");
+    $stmt->execute([$_POST['is_active'], $_POST['id']]);
+    logAudit('Cronjob Status geändert', 'ID: ' . $_POST['id'] . ' -> ' . ($_POST['is_active'] ? 'Aktiv' : 'Pausiert'));
+    echo json_encode(['success' => true]); exit;
+}
+
+$pbsActions = ['get_pbs_stats', 'pbs_get_datastore_content', 'pbs_delete_snapshot', 'pbs_get_jobs', 'pbs_get_sync_jobs'];
+$pmgActions = [
+    'get_pmg_stats', 'pmg_get_spam_queue', 'pmg_quarantine_action', 'pmg_get_queues', 'pmg_get_tracking', 
+    'pmg_get_config', 'pmg_set_config', 'pmg_get_ssl', 'pmg_upload_ssl',
+    'pmg_get_domains', 'pmg_add_domain', 'pmg_delete_domain',
+    'pmg_get_networks', 'pmg_add_network', 'pmg_delete_network'
+]; 
+
+if (in_array($action, $pbsActions)) { require_once 'api_pbs.php'; } 
+elseif (in_array($action, $pmgActions)) { require_once 'api_pmg.php'; } 
+else { require_once 'api_pve.php'; }
+?>
@@ -0,0 +1,80 @@
+<?php
+// /home/docker/pve_dashboard/src/api_pbs.php
+if (!defined('PDO::ATTR_DRIVER_NAME')) exit; // Schutz vor direktem Aufruf
+
+if ($action === 'get_pbs_stats') { 
+    $stmt = $pdo->query("SELECT * FROM nodes WHERE type = 'pbs'"); $datastores = []; 
+    foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $node) { 
+        $dsData = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/status/datastore-usage", 'pbs'); 
+        if (isset($dsData['data'])) { 
+            foreach ($dsData['data'] as $ds) { 
+                $ds['host'] = $node['name']; 
+                $ds['node_id'] = $node['id'];
+                $datastores[] = $ds; 
+            } 
+        } 
+    } 
+    echo json_encode(['success' => true, 'data' => $datastores]); exit; 
+}
+
+if ($action === 'pbs_get_datastore_content') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pbs'"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $store = $_GET['store'];
+    
+    // 1. Hole alle Namespaces (Hetzner, Zaccaria, Zuhause etc.)
+    $nsData = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/admin/datastore/{$store}/namespace", 'pbs');
+    $namespaces = ['']; // Root Namespace immer mitnehmen
+    if (isset($nsData['data'])) {
+        foreach ($nsData['data'] as $nsItem) {
+            if (!empty($nsItem['ns'])) $namespaces[] = $nsItem['ns'];
+        }
+    }
+    
+    $result = [];
+    // 2. Iteriere durch JEDEN Namespace und hole die Backups
+    foreach ($namespaces as $ns) {
+        $nsParam = empty($ns) ? "" : "?ns=" . urlencode($ns);
+        $snaps = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/admin/datastore/{$store}/snapshots{$nsParam}", 'pbs', 'GET', null, 15);
+        
+        if (isset($snaps['data'])) {
+            foreach ($snaps['data'] as $snap) {
+                if (!isset($snap['size']) && isset($snap['files'])) {
+                    $size = 0; foreach ($snap['files'] as $f) { $size += $f['size'] ?? 0; }
+                    $snap['size'] = $size;
+                }
+                $snap['ns'] = $ns; // Merken, in welchem Namespace das Backup liegt (wichtig fürs Löschen!)
+                $result[] = $snap;
+            }
+        }
+    }
+    
+    echo json_encode(['success' => true, 'data' => $result]); exit;
+}
+
+if ($action === 'pbs_delete_snapshot') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pbs'"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $store = $_POST['store']; $btype = $_POST['btype']; $bid = $_POST['bid']; $btime = $_POST['btime']; $ns = $_POST['ns'] ?? '';
+    
+    $nsParam = empty($ns) ? "" : "&ns=" . urlencode($ns);
+    $url = "/api2/json/admin/datastore/{$store}/snapshots?backup-type={$btype}&backup-id={$bid}&backup-time={$btime}{$nsParam}";
+    
+    getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], $url, 'pbs', 'DELETE');
+    echo json_encode(['success' => true]); exit;
+}
+
+if ($action === 'pbs_get_jobs') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pbs'"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $tasks = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/localhost/tasks?limit=100", 'pbs');
+    echo json_encode(['success' => true, 'data' => $tasks['data'] ?? []]); exit;
+}
+
+if ($action === 'pbs_get_sync_jobs') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pbs'"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $syncs = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/config/sync", 'pbs');
+    echo json_encode(['success' => true, 'data' => $syncs['data'] ?? []]); exit;
+}
+?>
@@ -0,0 +1,144 @@
+<?php
+// /home/docker/pve_dashboard/src/api_pmg.php
+if (!defined('PDO::ATTR_DRIVER_NAME')) exit; // Schutz vor direktem Aufruf
+
+if ($action === 'get_pmg_stats') { 
+    $stmt = $pdo->query("SELECT * FROM nodes WHERE type = 'pmg'"); $pmgNodes = []; 
+    foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $node) { 
+        $nData = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes", 'pmg'); 
+        if (isset($nData['data'][0]['node'])) { 
+            $nName = $nData['data'][0]['node']; 
+            $status = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$nName}/status", 'pmg'); 
+            if(isset($status['data'])) { 
+                $status['data']['host'] = $node['name']; 
+                $status['data']['node_id'] = $node['id'];
+                $status['data']['internal_name'] = $nName;
+                $pmgNodes[] = $status['data']; 
+            } 
+        } 
+    } 
+    echo json_encode(['success' => true, 'data' => $pmgNodes]); exit; 
+}
+
+if ($action === 'pmg_get_spam_queue') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/quarantine/spam", 'pmg', 'GET', null, 8);
+    echo json_encode(['success' => true, 'data' => $res['data'] ?? []]); exit;
+}
+
+if ($action === 'pmg_quarantine_action') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/quarantine/content", 'pmg', "POST", ['action' => $_POST['pmg_action'], 'id' => $_POST['mailid']]);
+    echo json_encode(['success' => true, 'res' => $res]); exit;
+}
+
+if ($action === 'pmg_get_queues') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $internalName = $_GET['internal_name'] ?? ''; if (!$internalName) exit;
+    $allMails = []; $queues = ['deferred', 'active', 'incoming', 'hold'];
+    foreach ($queues as $qName) {
+        $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$internalName}/postfix/queue/{$qName}", 'pmg');
+        if (isset($res['data'])) { foreach ($res['data'] as $mail) { $mail['queue_name'] = $qName; $allMails[] = $mail; } }
+    }
+    echo json_encode(['success' => true, 'data' => $allMails]); exit;
+}
+
+if ($action === 'pmg_get_tracking') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $internalName = $_GET['internal_name'] ?? ''; $filter = $_GET['filter'] ?? ''; if (!$internalName) exit;
+    $startTime = time() - 86400; $endTime = time(); $filterStr = !empty($filter) ? "&pmail=" . urlencode($filter) : "";
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$internalName}/tracker?starttime={$startTime}&endtime={$endTime}{$filterStr}", 'pmg', 'GET', null, 10);
+    echo json_encode(['success' => true, 'data' => $res['data'] ?? []]); exit;
+}
+
+// === CONFIG ROUTEN ===
+if ($action === 'pmg_get_config') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/config/mail", 'pmg');
+    echo json_encode(['success' => true, 'data' => $res['data'] ?? []]); exit;
+}
+
+if ($action === 'pmg_set_config') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $params = [];
+    if (isset($_POST['relay'])) $params['relay'] = $_POST['relay'];
+    if (isset($_POST['ext_port'])) $params['ext_port'] = $_POST['ext_port'];
+    if (isset($_POST['int_port'])) $params['int_port'] = $_POST['int_port'];
+    if (isset($_POST['tls'])) $params['tls'] = $_POST['tls'];
+    if (isset($_POST['tlslog'])) $params['tlslog'] = $_POST['tlslog'];
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/config/mail", 'pmg', 'PUT', $params);
+    echo json_encode(['success' => true, 'res' => $res]); exit;
+}
+
+// === RELAY DOMAINS ===
+if ($action === 'pmg_get_domains') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/config/domains", 'pmg');
+    echo json_encode(['success' => true, 'data' => $res['data'] ?? []]); exit;
+}
+if ($action === 'pmg_add_domain') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/config/domains", 'pmg', 'POST', ['domain' => $_POST['domain']]);
+    echo json_encode(['success' => true, 'res' => $res]); exit;
+}
+if ($action === 'pmg_delete_domain') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $domain = urlencode($_POST['domain']);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/config/domains/{$domain}", 'pmg', 'DELETE');
+    echo json_encode(['success' => true, 'res' => $res]); exit;
+}
+
+// === TRUSTED NETWORKS ===
+if ($action === 'pmg_get_networks') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/config/mynetworks", 'pmg');
+    echo json_encode(['success' => true, 'data' => $res['data'] ?? []]); exit;
+}
+if ($action === 'pmg_add_network') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/config/mynetworks", 'pmg', 'POST', ['cidr' => $_POST['cidr']]);
+    echo json_encode(['success' => true, 'res' => $res]); exit;
+}
+if ($action === 'pmg_delete_network') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $cidr = urlencode($_POST['cidr']); // Verhindert Router-Crashes wegen Slashes in der IP (z.B. /24)
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/config/mynetworks/{$cidr}", 'pmg', 'DELETE');
+    echo json_encode(['success' => true, 'res' => $res]); exit;
+}
+
+// === SSL ZERTIFIKATE ===
+if ($action === 'pmg_get_ssl') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $internalName = $_GET['internal_name'] ?? ''; if (!$internalName) exit;
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$internalName}/certificates/info", 'pmg');
+    echo json_encode(['success' => true, 'data' => $res['data'] ?? []]); exit;
+}
+if ($action === 'pmg_upload_ssl') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pmg'"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $internalName = $_POST['internal_name'] ?? ''; if (!$internalName) exit;
+    
+    // Proxmox erlaubt Upload von Zertifikaten. PMG lädt diese unter /nodes/{node}/certificates/custom hoch.
+    $params = [
+        'certificates' => $_POST['certificate'], 
+        'key' => $_POST['private_key'], 
+        'force' => 1, 
+        'restart' => 1
+    ];
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$internalName}/certificates/custom", 'pmg', 'POST', $params);
+    echo json_encode(['success' => true, 'res' => $res]); exit;
+}
+?>
@@ -0,0 +1,207 @@
+<?php
+// /home/docker/pve_dashboard/src/api_pve.php
+if (!defined('PDO::ATTR_DRIVER_NAME')) exit; // Schutz
+
+if ($action === 'get_stats') {
+    $stmt = $pdo->query("SELECT * FROM nodes WHERE type = 'pve'"); $nodes = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    $data = ['cpu_cores' => 0, 'cpu_used' => 0, 'ram_total' => 0, 'ram_used' => 0, 'disk_total' => 0, 'disk_used' => 0, 'cpu_percent' => 0];
+    foreach ($nodes as $node) {
+        $nData = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes");
+        if (isset($nData['data'])) {
+            foreach ($nData['data'] as $nInfo) {
+                if ($nInfo['status'] === 'online') {
+                    $data['cpu_cores'] += $nInfo['maxcpu'] ?? 0; $data['cpu_used'] += ($nInfo['cpu'] ?? 0) * ($nInfo['maxcpu'] ?? 0);
+                    $data['ram_total'] += $nInfo['maxmem'] ?? 0; $data['ram_used'] += $nInfo['mem'] ?? 0;
+                    $data['disk_total'] += $nInfo['maxdisk'] ?? 0; $data['disk_used'] += $nInfo['disk'] ?? 0;
+                }
+            }
+        }
+    }
+    if ($data['cpu_cores'] > 0) $data['cpu_percent'] = round(($data['cpu_used'] / $data['cpu_cores']) * 100, 1);
+    echo json_encode(['success' => true, 'data' => $data]); exit;
+}
+
+if ($action === 'get_top_vms') {
+    $stmt = $pdo->query("SELECT * FROM nodes WHERE type = 'pve'"); $nodes = $stmt->fetchAll(PDO::FETCH_ASSOC); $allVms = [];
+    foreach ($nodes as $node) {
+        $vms = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/cluster/resources?type=vm");
+        if (isset($vms['data'])) { foreach ($vms['data'] as $vm) { if (checkVmPermission($pdo, $vm['vmid'])) { $vm['node_id'] = $node['id']; $vm['node_ip'] = $node['ip_address']; $allVms[] = $vm; } } }
+    }
+    usort($allVms, function($a, $b) { return ($b['cpu'] ?? 0) <=> ($a['cpu'] ?? 0); });
+    echo json_encode(['success' => true, 'data' => array_slice($allVms, 0, 5)]); exit;
+}
+
+if ($action === 'get_all_vms') {
+    $stmt = $pdo->query("SELECT * FROM nodes WHERE type = 'pve'"); $nodes = $stmt->fetchAll(PDO::FETCH_ASSOC); $allVms = [];
+    foreach ($nodes as $node) {
+        $vms = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/cluster/resources?type=vm");
+        if (isset($vms['data'])) { foreach ($vms['data'] as $vm) { if (checkVmPermission($pdo, $vm['vmid'])) { $vm['node_id'] = $node['id']; $vm['node_ip'] = $node['ip_address']; $allVms[] = $vm; } } }
+    }
+    usort($allVms, function($a, $b) { if ($a['status'] === 'running' && $b['status'] !== 'running') return -1; if ($a['status'] !== 'running' && $b['status'] === 'running') return 1; return $a['vmid'] <=> $b['vmid']; });
+    echo json_encode(['success' => true, 'data' => $allVms]); exit;
+}
+
+if ($action === 'vm_action') {
+    if (!checkVmPermission($pdo, $_POST['vmid'])) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}/{$_POST['vmid']}/status/{$_POST['cmd']}", "POST");
+    
+    // AUDIT LOG
+    logAudit("VM {$_POST['cmd']}", "VMID: {$_POST['vmid']} auf Host: {$_POST['host']}");
+    echo json_encode(['success' => isset($res['data']), 'error' => $res['errors'] ?? 'Fehler']); exit;
+}
+
+if ($action === 'get_nodes') { if (!$isAdmin) exit; $stmt = $pdo->query("SELECT id, name, ip_address, type FROM nodes"); echo json_encode(['success' => true, 'data' => $stmt->fetchAll(PDO::FETCH_ASSOC)]); exit; }
+if ($action === 'delete_node') { if (!$isAdmin) exit; $stmt = $pdo->prepare("DELETE FROM nodes WHERE id = ?"); $stmt->execute([$_POST['id']]); logAudit('Server gelöscht', "Node ID: {$_POST['id']}"); echo json_encode(['success' => true]); exit; }
+if ($action === 'add_node') { 
+    if (!$isAdmin) exit; 
+    $stmt = $pdo->prepare("INSERT INTO nodes (name, ip_address, token_id, token_secret, type) VALUES (?, ?, ?, ?, ?)"); 
+    $stmt->execute([$_POST['name'], $_POST['ip'], $_POST['user'], $_POST['pass'], $_POST['type'] ?? 'pve']); 
+    logAudit('Server hinzugefügt', "Node: {$_POST['name']} ({$_POST['ip']})");
+    echo json_encode(['success' => true]); exit; 
+}
+if ($action === 'get_users') { if (!$isAdmin) exit; $stmt = $pdo->query("SELECT id, username, role FROM users"); echo json_encode(['success' => true, 'data' => $stmt->fetchAll(PDO::FETCH_ASSOC)]); exit; }
+if ($action === 'delete_user') { if (!$isAdmin) exit; $stmt = $pdo->prepare("DELETE FROM users WHERE id = ?"); $stmt->execute([$_POST['id']]); logAudit('User gelöscht', "User ID: {$_POST['id']}"); echo json_encode(['success' => true]); exit; }
+if ($action === 'create_user') { 
+    if (!$isAdmin) exit; 
+    $stmt = $pdo->prepare("INSERT INTO users (username, password_hash, role, permissions) VALUES (?, ?, ?, ?)"); 
+    $stmt->execute([$_POST['username'], password_hash($_POST['password'], PASSWORD_DEFAULT), $_POST['role'], $_POST['permissions']]); 
+    logAudit('User angelegt', "Username: {$_POST['username']} Rolle: {$_POST['role']}");
+    echo json_encode(['success' => true]); exit; 
+}
+
+if ($action === 'get_pve_nodes') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->query("SELECT * FROM nodes WHERE type = 'pve'"); $resList = [];
+    foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $node) {
+        $nData = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes");
+        if(isset($nData['data'])) { foreach($nData['data'] as $n) { if($n['status'] === 'online') { $resList[] = ['node_id' => $node['id'], 'host' => $n['node'], 'display' => $node['name'] . ' -> ' . $n['node']]; } } }
+    }
+    echo json_encode(['success' => true, 'data' => $resList]); exit;
+}
+
+if ($action === 'create_vm') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ? AND type = 'pve'"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $nextIdRes = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/cluster/nextid");
+    if(!isset($nextIdRes['data'])) { echo json_encode(['success' => false, 'error' => 'Konnte keine freie VMID finden.']); exit; }
+    $vmid = $nextIdRes['data'];
+    $params = ['vmid' => $vmid, 'name' => $_POST['name'], 'memory' => $_POST['memory'], 'cores' => $_POST['cores'], 'net0' => 'virtio,bridge=vmbr0'];
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/qemu", "POST", $params);
+    logAudit('VM Erstellt', "VMID: {$vmid} Name: {$_POST['name']}");
+    echo json_encode(['success' => isset($res['data']), 'vmid' => $vmid]); exit;
+}
+
+if ($action === 'get_vm_config') {
+    if (!checkVmPermission($pdo, $_GET['vmid'])) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_GET['host']}/{$_GET['type']}/{$_GET['vmid']}/config");
+    echo json_encode(['success' => true, 'data' => $res['data'] ?? []]); exit;
+}
+
+if ($action === 'update_vm_config') {
+    if (!checkVmPermission($pdo, $_POST['vmid'])) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $params = [];
+    if(isset($_POST['memory'])) $params['memory'] = $_POST['memory'];
+    if(isset($_POST['cores'])) $params['cores'] = $_POST['cores'];
+    if(isset($_POST['net0'])) $params['net0'] = $_POST['net0'];
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}/{$_POST['vmid']}/config", "POST", $params);
+    logAudit('VM Config geändert', "VMID: {$_POST['vmid']}");
+    echo json_encode(['success' => isset($res['data'])]); exit;
+}
+
+if ($action === 'add_vm_nic') {
+    if (!checkVmPermission($pdo, $_POST['vmid'])) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $cfg = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}/{$_POST['vmid']}/config");
+    $nextNic = 0; for ($i=0; $i<10; $i++) { if (!isset($cfg['data']["net{$i}"])) { $nextNic = $i; break; } }
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}/{$_POST['vmid']}/config", "POST", ["net{$nextNic}" => "virtio,bridge={$_POST['bridge']}"]);
+    logAudit('VM NIC hinzugefügt', "VMID: {$_POST['vmid']} Bridge: {$_POST['bridge']}");
+    echo json_encode(['success' => isset($res['data']), 'slot' => "net{$nextNic}"]); exit;
+}
+
+if ($action === 'resize_vm_disk') {
+    if (!checkVmPermission($pdo, $_POST['vmid'])) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}/{$_POST['vmid']}/resize", "PUT", ['disk' => $_POST['disk'], 'size' => $_POST['size']]);
+    logAudit('VM Disk erweitert', "VMID: {$_POST['vmid']} Disk: {$_POST['disk']} Size: {$_POST['size']}");
+    echo json_encode(['success' => isset($res['data'])]); exit;
+}
+
+if ($action === 'delete_vm') {
+    if (!$isAdmin) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}/{$_POST['vmid']}", "DELETE");
+    logAudit('VM Gelöscht', "VMID: {$_POST['vmid']}");
+    echo json_encode(['success' => isset($res['data'])]); exit;
+}
+
+if ($action === 'get_vm_snapshots') {
+    if (!checkVmPermission($pdo, $_GET['vmid'])) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_GET['host']}/{$_GET['type']}/{$_GET['vmid']}/snapshot");
+    echo json_encode(['success' => true, 'data' => $res['data'] ?? []]); exit;
+}
+
+if ($action === 'vm_snapshot_action') {
+    if (!checkVmPermission($pdo, $_POST['vmid'])) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $cmd = $_POST['cmd']; $snapname = $_POST['snapname'];
+    if ($cmd === 'create') { $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}/{$_POST['vmid']}/snapshot", "POST", ['snapname' => $snapname]); } 
+    elseif ($cmd === 'delete') { $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}/{$_POST['vmid']}/snapshot/{$snapname}", "DELETE"); } 
+    elseif ($cmd === 'rollback') { $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}/{$_POST['vmid']}/snapshot/{$snapname}/rollback", "POST"); }
+    logAudit('Snapshot ' . $cmd, "VMID: {$_POST['vmid']} Snap: {$snapname}");
+    echo json_encode(['success' => isset($res['data'])]); exit;
+}
+
+if ($action === 'get_backup_storages') {
+    if (!checkVmPermission($pdo, $_GET['vmid'] ?? 0)) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $stRes = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_GET['host']}/storage");
+    $storages = []; if (isset($stRes['data'])) { foreach ($stRes['data'] as $st) { if (strpos($st['content'], 'backup') !== false) { $storages[] = $st['storage']; } } }
+    echo json_encode(['success' => true, 'data' => $storages]); exit;
+}
+
+if ($action === 'get_vm_backups') {
+    if (!checkVmPermission($pdo, $_GET['vmid'])) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $stRes = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_GET['host']}/storage");
+    $backups = [];
+    if (isset($stRes['data'])) {
+        foreach ($stRes['data'] as $st) {
+            if (strpos($st['content'], 'backup') !== false) {
+                $bRes = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_GET['host']}/storage/{$st['storage']}/content?vmid={$_GET['vmid']}");
+                if (isset($bRes['data'])) { foreach ($bRes['data'] as $b) { $b['storage'] = $st['storage']; $backups[] = $b; } }
+            }
+        }
+    }
+    usort($backups, function($a, $b) { return $b['ctime'] <=> $a['ctime']; });
+    echo json_encode(['success' => true, 'data' => $backups]); exit;
+}
+
+if ($action === 'create_backup') {
+    if (!checkVmPermission($pdo, $_POST['vmid'])) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/vzdump", "POST", ['vmid' => $_POST['vmid'], 'storage' => $_POST['storage'], 'mode' => 'snapshot']);
+    logAudit('Manuelles Backup', "VMID: {$_POST['vmid']} Storage: {$_POST['storage']}");
+    echo json_encode(['success' => isset($res['data'])]); exit;
+}
+
+if ($action === 'restore_backup') {
+    if (!checkVmPermission($pdo, $_POST['vmid'])) exit;
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_POST['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}/{$_POST['vmid']}/status/current");
+    if (isset($res['data']) && $res['data']['status'] === 'running') { echo json_encode(['success' => false, 'error' => 'VM muss gestoppt sein!']); exit; }
+    $resRestore = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$_POST['host']}/{$_POST['type']}", "POST", ['vmid' => $_POST['vmid'], 'archive' => $_POST['archive'], 'force' => 1]);
+    logAudit('Backup Restore', "VMID: {$_POST['vmid']} Archive: {$_POST['archive']}");
+    echo json_encode(['success' => isset($resRestore['data'])]); exit;
+}
+
+if ($action === 'get_node_status' || $action === 'get_vm_status') {
+    $stmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?"); $stmt->execute([$_GET['node_id']]); $node = $stmt->fetch(PDO::FETCH_ASSOC);
+    $endpoint = $action === 'get_node_status' ? "/api2/json/nodes/{$_GET['host']}/status" : "/api2/json/nodes/{$_GET['host']}/{$_GET['type']}/{$_GET['vmid']}/status/current";
+    $res = getProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], $endpoint);
+    echo json_encode(['success' => true, 'data' => $res['data'] ?? []]); exit;
+}
+?>
@@ -0,0 +1,569 @@
+// /home/docker/pve_dashboard/src/app.js
+
+function formatBytes(bytes) { if (!bytes || bytes === 0) return '0 GB'; const k = 1024, sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; }
+function formatDate(timestamp) { if (!timestamp || timestamp === 0) return 'Nie'; const d = new Date(timestamp * 1000); return d.toLocaleDateString('de-DE') + ' ' + d.toLocaleTimeString('de-DE'); }
+
+if (!window.APP.isLoggedIn) {
+    const loginForm = document.getElementById('loginForm');
+    if(loginForm) { loginForm.addEventListener('submit', async function(e) { e.preventDefault(); const btn = this.querySelector('button[type="submit"]'); const oTxt = btn.innerText; btn.innerText = 'Prüfe...'; const fd = new FormData(); fd.append('username', document.getElementById('loginUser').value); fd.append('password', document.getElementById('loginPass').value); try { const res = await (await fetch('api.php?action=login', { method: 'POST', body: fd })).json(); if(res.success) window.location.reload(); else { alert(res.error); btn.innerText = oTxt; } } catch (e) { alert('Netzwerkfehler.'); btn.innerText = oTxt; } }); }
+} else if (window.APP.nodeCount === 0) {
+    const setupForm = document.getElementById('setupForm');
+    if(setupForm) { setupForm.addEventListener('submit', async function(e) { e.preventDefault(); const btn = this.querySelector('button[type="submit"]'); const oTxt = btn.innerText; btn.innerText = 'Verbinde...'; const fd = new FormData(); fd.append('name', document.getElementById('nodeName').value); fd.append('ip', document.getElementById('nodeIp').value); fd.append('user', document.getElementById('nodeUser').value); fd.append('pass', document.getElementById('nodePass').value); fd.append('type', 'pve'); try { const res = await (await fetch('api.php?action=add_node', { method: 'POST', body: fd })).json(); if(res.success) { btn.innerText = 'Erfolgreich!'; setTimeout(() => window.location.reload(), 1000); } else { alert(res.error); btn.innerText = oTxt; } } catch (e) { alert('Netzwerkfehler.'); btn.innerText = oTxt; } }); }
+}
+
+async function logout() { await fetch('api.php?action=logout'); window.location.reload(); }
+
+if (window.APP.isLoggedIn && window.APP.nodeCount > 0) {
+    
+    // Inject Audit Log Button automatically into Sidebar for Admins
+    if (window.APP.username === 'admin' || document.querySelector('a[onclick="openUserManager()"]')) {
+        const userBtn = document.querySelector('a[onclick="openUserManager()"]');
+        if (userBtn && !document.getElementById('btnAuditLog')) {
+            const auditBtnHTML = `<a href="#" id="btnAuditLog" onclick="openAuditLog()" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-white/5 px-3 py-2 rounded-lg transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg> Audit Log</a>`;
+            userBtn.insertAdjacentHTML('afterend', auditBtnHTML);
+        }
+    }
+
+    window.switchTab = function(tab) {
+        ['pve', 'pbs', 'pmg'].forEach(t => { const el = document.getElementById('tab-' + t); const nav = document.getElementById('nav-tab-' + t); if (t === tab) { el.classList.remove('hidden'); setTimeout(() => el.classList.remove('opacity-0'), 50); nav.classList.add('tab-active' + (t === 'pve' ? '' : '-' + t)); } else { el.classList.add('hidden', 'opacity-0'); nav.classList.remove('tab-active', 'tab-active-pbs', 'tab-active-pmg'); } });
+        if(tab === 'pbs') fetchPbsStats(); if(tab === 'pmg') fetchPmgStats();
+    }
+
+    const ctx = document.getElementById('liveChart')?.getContext('2d'); let liveChart;
+    if(ctx) { liveChart = new Chart(ctx, { type: 'line', data: { labels: [], datasets: [{ label: 'CPU (%)', borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', borderWidth: 2, tension: 0.4, fill: true, data: [] }, { label: 'RAM (%)', borderColor: '#E57000', backgroundColor: 'rgba(229, 112, 0, 0.1)', borderWidth: 2, tension: 0.4, fill: true, data: [] }] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 500 }, scales: { x: { ticks: { color: '#9ca3af' }, grid: { color: '#33334d' } }, y: { min: 0, max: 100, ticks: { color: '#9ca3af', callback: v => v + '%' }, grid: { color: '#33334d' } } }, plugins: { legend: { labels: { color: '#e2e8f0', usePointStyle: true } } } } }); }
+
+    async function fetchGlobalStats() { if(!document.getElementById('stat-cpu-text')) return; try { const res = await (await fetch('api.php?action=get_stats')).json(); if(res.success && res.data) { const d = res.data; document.getElementById('stat-cpu-text').innerText = `${d.cpu_percent}% (${d.cpu_cores} Cores)`; document.getElementById('stat-cpu-bar').style.width = `${d.cpu_percent}%`; let ramPercent = (d.ram_used / d.ram_total) * 100 || 0; document.getElementById('stat-ram-text').innerText = `${formatBytes(d.ram_used)} / ${formatBytes(d.ram_total)}`; document.getElementById('stat-ram-bar').style.width = `${ramPercent}%`; let diskPercent = (d.disk_used / d.disk_total) * 100 || 0; document.getElementById('stat-disk-text').innerText = `${formatBytes(d.disk_used)} / ${formatBytes(d.disk_total)}`; document.getElementById('stat-disk-bar').style.width = `${diskPercent}%`; if(liveChart) { const now = new Date(); const timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0') + ':' + now.getSeconds().toString().padStart(2, '0'); liveChart.data.labels.push(timeStr); liveChart.data.datasets[0].data.push(d.cpu_percent); liveChart.data.datasets[1].data.push(ramPercent.toFixed(1)); if (liveChart.data.labels.length > 15) { liveChart.data.labels.shift(); liveChart.data.datasets[0].data.shift(); liveChart.data.datasets[1].data.shift(); } liveChart.update(); } } } catch (err) {} }
+    async function fetchTopVms() { if(!document.getElementById('top-vms-container')) return; try { const res = await (await fetch('api.php?action=get_top_vms')).json(); if(res.success && res.data) { const container = document.getElementById('top-vms-container'); container.innerHTML = ''; if(res.data.length === 0) { container.innerHTML = '<p class="text-gray-400 text-sm">Keine aktiven VMs.</p>'; return; } res.data.forEach((vm, i) => { const cpuPercent = ((vm.cpu || 0) * 100).toFixed(1); const ramUsed = formatBytes(vm.mem || 0); const icon = vm.type === 'lxc' ? '📦' : '🖥️'; const numberColor = i === 0 ? 'text-red-500' : (i === 1 ? 'text-orange-400' : (i === 2 ? 'text-yellow-400' : 'text-gray-400')); container.innerHTML += `<div class="bg-darkbg border border-darkborder rounded-lg p-3 flex justify-between items-center transition-transform hover:scale-[1.02] cursor-default"><div class="flex items-center gap-3"><span class="font-bold text-xl ${numberColor}">#${i + 1}</span><div><h4 class="text-white font-semibold text-sm truncate w-32">${icon} ${vm.name}</h4><p class="text-xs text-gray-500">Host: ${vm.host}</p></div></div><div class="text-right"><p class="text-proxmox font-bold text-sm">${cpuPercent}% CPU</p><p class="text-xs text-gray-400">${ramUsed} RAM</p></div></div>`; }); } } catch (err) {} }
+    async function fetchRecentJobs() { if(!document.getElementById('recent-jobs-container')) return; try { const res = await (await fetch('api.php?action=get_recent_jobs')).json(); if(res.success && res.data) { const container = document.getElementById('recent-jobs-container'); container.innerHTML = ''; if(res.data.length === 0) { container.innerHTML = '<p class="text-gray-400 text-sm">Keine aktuellen Jobs.</p>'; return; } res.data.forEach(job => { const jobTypeStr = job.type || job.worker_type || 'unknown'; let statusColor = 'text-gray-400', statusIcon = '⏳', statusText = job.status || 'running...'; if(statusText.toLowerCase() === 'ok') { statusColor = 'text-green-500'; statusIcon = '✅'; } else if(statusText !== 'running...') { statusColor = 'text-red-500'; statusIcon = '❌'; } else { statusColor = 'text-blue-400'; statusIcon = '🔄'; } const date = new Date(job.starttime * 1000); const timeStr = date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }), dateStr = date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' }); const isBackup = jobTypeStr.includes('sync') || jobTypeStr.includes('prune') || jobTypeStr.includes('garbage_collection') || jobTypeStr.includes('vzdump') || jobTypeStr.includes('verify'); const jobTypeColor = isBackup ? 'text-purple-400' : 'text-white'; container.innerHTML += `<div class="bg-darkbg border border-darkborder rounded-lg p-3 flex justify-between items-center transition-colors hover:bg-darkborder/50"><div class="flex items-center gap-3"><div class="text-lg">${statusIcon}</div><div class="max-w-[120px]"><p class="${jobTypeColor} font-medium text-sm capitalize truncate" title="${jobTypeStr}">${jobTypeStr}</p><p class="text-xs text-gray-500 truncate" title="${job.node_name}">Host: <span class="text-proxmox">${job.node_name}</span></p></div></div><div class="text-right"><p class="${statusColor} font-bold text-sm uppercase">${statusText}</p><p class="text-xs text-gray-500">${dateStr} - ${timeStr}</p></div></div>`; }); } } catch (err) { console.error(err); } }
+    async function fetchUpdates() { if(!document.getElementById('stat-updates-text')) return; try { const res = await (await fetch('api.php?action=get_updates')).json(); if(res.success) { const el = document.getElementById('stat-updates-text'), subEl = document.getElementById('stat-updates-sub'); if(res.total === 0) { el.innerText = '0 Updates'; el.className = 'text-2xl font-bold text-green-500 mt-1'; subEl.innerText = 'Alle Systeme sind aktuell.'; } else { el.innerText = res.total + ' Updates'; el.className = 'text-2xl font-bold text-red-500 mt-1'; subEl.innerText = 'Auf: ' + res.details; } } } catch (err) {} }
+    async function fetchPbsStats() { if(document.getElementById('tab-pbs').classList.contains('hidden')) return; try { const res = await (await fetch('api.php?action=get_pbs_stats')).json(); if(res.success) { const container = document.getElementById('pbs-datastores-container'); if(res.data.length === 0) { container.innerHTML = '<div class="col-span-full text-center text-gray-500 p-10 bg-darkcard rounded-lg border border-darkborder">Keine PBS Server gefunden.</div>'; return; } container.innerHTML = ''; res.data.forEach(ds => { const total = ds.total || 0; const used = ds.used || 0; const percent = total > 0 ? ((used / total) * 100).toFixed(1) : 0; const colorClass = percent > 85 ? 'bg-red-500' : (percent > 70 ? 'bg-orange-500' : 'bg-pbs'); container.innerHTML += `<div class="bg-darkcard border border-darkborder rounded-xl p-5 shadow-lg hover:border-pbs cursor-pointer transition-colors" onclick="openPbsDatastore(${ds.node_id}, '${ds.store}')"><div class="flex justify-between items-start mb-4"><div><h3 class="text-lg font-bold text-white">${ds.store}</h3><p class="text-xs text-gray-400">PBS Host: ${ds.host}</p></div><div class="p-2 bg-purple-500/10 rounded-lg"><svg class="w-6 h-6 text-pbs" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg></div></div><div class="mb-2 flex justify-between text-sm"><span class="text-gray-400">Auslastung</span><span class="text-white font-bold">${percent}%</span></div><div class="w-full bg-darkbg rounded-full h-2 mb-3"><div class="${colorClass} h-2 rounded-full transition-all duration-1000" style="width: ${percent}%"></div></div><div class="flex justify-between text-xs text-gray-500"><span>Used: ${formatBytes(used)}</span><span>Total: ${formatBytes(total)}</span></div><div class="mt-4 border-t border-darkborder pt-3 text-center"><span class="text-pbs font-bold text-sm">⚙️ Verwaltung öffnen</span></div></div>`; }); } } catch(e) {} }
+    async function fetchPmgStats() { if(document.getElementById('tab-pmg').classList.contains('hidden')) return; try { const res = await (await fetch('api.php?action=get_pmg_stats')).json(); if(res.success) { const container = document.getElementById('pmg-nodes-container'); if(res.data.length === 0) { container.innerHTML = '<div class="col-span-full text-center text-gray-500 p-10 bg-darkcard rounded-lg border border-darkborder">Keine Mail Gateways angebunden.</div>'; return; } container.innerHTML = ''; res.data.forEach(pmg => { const cpuPercent = ((pmg.cpu || 0) * 100).toFixed(1); const ramPercent = pmg.memory && pmg.memory.total ? ((pmg.memory.used / pmg.memory.total) * 100).toFixed(1) : 0; const diskPercent = pmg.rootfs && pmg.rootfs.total ? ((pmg.rootfs.used / pmg.rootfs.total) * 100).toFixed(1) : 0; container.innerHTML += `<div class="bg-darkcard border border-darkborder rounded-xl p-5 shadow-lg hover:border-pmg cursor-pointer transition-colors" onclick="openPmgManager(${pmg.node_id}, '${pmg.host}', '${pmg.internal_name}')"><div class="flex justify-between items-start mb-4"><div><h3 class="text-lg font-bold text-white">${pmg.host}</h3><p class="text-xs text-green-400">Online</p></div><div class="p-2 bg-blue-500/10 rounded-lg"><svg class="w-6 h-6 text-pmg" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></div></div><div class="mb-1 flex justify-between text-xs"><span class="text-gray-400">CPU</span><span class="text-white font-bold">${cpuPercent}%</span></div><div class="w-full bg-darkbg rounded-full h-1.5 mb-3"><div class="bg-blue-500 h-1.5 rounded-full" style="width: ${cpuPercent}%"></div></div><div class="mb-1 flex justify-between text-xs"><span class="text-gray-400">RAM</span><span class="text-white font-bold">${ramPercent}%</span></div><div class="w-full bg-darkbg rounded-full h-1.5 mb-3"><div class="bg-proxmox h-1.5 rounded-full" style="width: ${ramPercent}%"></div></div><div class="mb-1 flex justify-between text-xs"><span class="text-gray-400">System Disk</span><span class="text-white font-bold">${diskPercent}%</span></div><div class="w-full bg-darkbg rounded-full h-1.5"><div class="bg-emerald-500 h-1.5 rounded-full" style="width: ${diskPercent}%"></div></div><div class="mt-4 border-t border-darkborder pt-3 text-center"><span class="text-pmg font-bold text-sm">🛡️ Gateway öffnen</span></div></div>`; }); } } catch(e) {} }
+
+    fetchGlobalStats(); setInterval(fetchGlobalStats, 10000); fetchTopVms(); setInterval(fetchTopVms, 10000); fetchRecentJobs(); setInterval(fetchRecentJobs, 15000); fetchUpdates(); setInterval(fetchUpdates, 60000); setInterval(fetchPbsStats, 10000); setInterval(fetchPmgStats, 10000);
+
+    const nodeModal = document.getElementById('nodeManagerModal');
+    window.openNodeManager = function() { nodeModal.classList.remove('hidden'); loadNodesIntoTable(); }
+    window.closeNodeManager = function() { nodeModal.classList.add('hidden'); document.getElementById('addNodeFormContainer').classList.add('hidden'); }
+    window.toggleAddNodeForm = function() { document.getElementById('addNodeFormContainer').classList.toggle('hidden'); }
+    async function loadNodesIntoTable() { try { const res = await (await fetch('api.php?action=get_nodes')).json(); if(res.success) { const tbody = document.getElementById('nodeTableBody'); tbody.innerHTML = ''; if(res.data.length === 0) { tbody.innerHTML = '<tr><td colspan="4" class="px-4 py-4 text-center">Keine Server.</td></tr>'; return; } res.data.forEach(node => { let typeBadge = node.type === 'pbs' ? '<span class="bg-purple-500/20 text-pbs px-2 py-0.5 rounded text-xs font-bold">PBS Backup</span>' : (node.type === 'pmg' ? '<span class="bg-blue-500/20 text-pmg px-2 py-0.5 rounded text-xs font-bold">PMG Mail</span>' : '<span class="bg-proxmox/20 text-proxmox px-2 py-0.5 rounded text-xs font-bold">PVE Node</span>'); tbody.innerHTML += `<tr class="hover:bg-darkcard/50 transition-colors"><td class="px-4 py-3 font-medium text-white">${node.name}</td><td class="px-4 py-3">${typeBadge}</td><td class="px-4 py-3">${node.ip_address}</td><td class="px-4 py-3 text-right"><button onclick="deleteNode(${node.id}, '${node.name}')" class="text-red-500 hover:text-red-400 text-sm font-medium">Löschen</button></td></tr>`; }); } } catch (err) {} }
+    window.deleteNode = async function(id, name) { if(!confirm(`Server '${name}' löschen?`)) return; const fd = new FormData(); fd.append('id', id); await fetch('api.php?action=delete_node', { method: 'POST', body: fd }); loadNodesIntoTable(); }
+    
+    const addNewNodeForm = document.getElementById('addNewNodeForm');
+    if(addNewNodeForm) { addNewNodeForm.addEventListener('submit', async function(e) { e.preventDefault(); const btn = this.querySelector('button[type="submit"]'); const oTxt = btn.innerText; btn.innerText = 'Verbinde...'; const fd = new FormData(); fd.append('name', document.getElementById('newNodeName').value); fd.append('ip', document.getElementById('newNodeIp').value); fd.append('user', document.getElementById('newNodeUser').value); fd.append('pass', document.getElementById('newNodePass').value); fd.append('type', document.getElementById('newNodeType').value); try { const res = await (await fetch('api.php?action=add_node', { method: 'POST', body: fd })).json(); if(res.success) { addNewNodeForm.reset(); toggleAddNodeForm(); loadNodesIntoTable(); alert('Erfolgreich angebunden!'); } else alert(res.error); } catch(err) {} btn.innerText = oTxt; }); }
+
+    const userModal = document.getElementById('userManagerModal');
+    window.openUserManager = function() { userModal.classList.remove('hidden'); loadUsersIntoTable(); }
+    window.closeUserManager = function() { userModal.classList.add('hidden'); }
+    async function loadUsersIntoTable() { try { const res = await (await fetch('api.php?action=get_users')).json(); if(res.success) { const tbody = document.getElementById('userTableBody'); tbody.innerHTML = ''; res.data.forEach(user => { const isMe = user.username === window.APP.username; const deleteBtn = isMe ? `<span class="text-xs text-gray-500">Das bist du</span>` : `<button onclick="deleteUser(${user.id}, '${user.username}')" class="text-red-500 hover:text-red-400 text-sm font-medium">Löschen</button>`; let roleBadge = user.role === 'admin' ? '<span class="bg-red-500/20 text-red-400 px-2 py-0.5 rounded text-xs">Admin</span>' : (user.role === 'vm_manager' ? '<span class="bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded text-xs">VM Manager</span>' : '<span class="bg-gray-500/20 text-gray-400 px-2 py-0.5 rounded text-xs">Viewer</span>'); tbody.innerHTML += `<tr class="hover:bg-darkcard/50 transition-colors"><td class="px-4 py-3 font-medium text-white">${user.username}</td><td class="px-4 py-3">${roleBadge}</td><td class="px-4 py-3 text-right">${deleteBtn}</td></tr>`; }); } } catch (err) {} }
+    window.handleRoleChange = async function() { const role = document.getElementById('newUserRole').value; const vmBlock = document.getElementById('vmPermissionsBlock'); if (role === 'vm_manager') { vmBlock.classList.remove('hidden'); try { const res = await (await fetch('api.php?action=get_top_vms')).json(); if (res.success && res.data) { const list = document.getElementById('vmCheckboxList'); list.innerHTML = ''; res.data.forEach(vm => { list.innerHTML += `<label class="flex items-center gap-2 hover:bg-darkbg p-1 rounded cursor-pointer"><input type="checkbox" name="allowed_vms[]" value="${vm.vmid}" class="accent-proxmox"><span>${vm.name} <span class="text-xs text-gray-500">(${vm.host})</span></span></label>`; }); } } catch(e) {} } else vmBlock.classList.add('hidden'); }
+    const addNewUserForm = document.getElementById('addNewUserForm');
+    if(addNewUserForm) { addNewUserForm.addEventListener('submit', async function(e) { e.preventDefault(); const btn = this.querySelector('button[type="submit"]'); const oTxt = btn.innerText; btn.innerText = 'Speichere...'; const fd = new FormData(); fd.append('username', document.getElementById('newUsername').value); fd.append('password', document.getElementById('newUserPass').value); const role = document.getElementById('newUserRole').value; fd.append('role', role); let permissions = {}; if (role === 'vm_manager') { let allowedVms = []; document.querySelectorAll('input[name="allowed_vms[]"]:checked').forEach(cb => allowedVms.push(cb.value)); permissions.allowed_vms = allowedVms; } fd.append('permissions', JSON.stringify(permissions)); const res = await (await fetch('api.php?action=create_user', { method: 'POST', body: fd })).json(); if(res.success) { addNewUserForm.reset(); handleRoleChange(); loadUsersIntoTable(); } else alert('Fehler.'); btn.innerText = oTxt; }); }
+    window.deleteUser = async function(id, name) { if(!confirm(`Benutzer '${name}' löschen?`)) return; const fd = new FormData(); fd.append('id', id); await fetch('api.php?action=delete_user', { method: 'POST', body: fd }); loadUsersIntoTable(); }
+
+    const vmModal = document.getElementById('vmManagerModal');
+    window.openVmManager = function() { vmModal.classList.remove('hidden'); loadVmsIntoTable(); }
+    window.closeVmManager = function() { vmModal.classList.add('hidden'); }
+    async function loadVmsIntoTable() {
+        const tbody = document.getElementById('vmTableBody'); tbody.innerHTML = '<tr><td colspan="5" class="px-4 py-4 text-center">Lade VMs...</td></tr>';
+        try {
+            const res = await (await fetch('api.php?action=get_all_vms')).json();
+            if(res.success) {
+                tbody.innerHTML = ''; if(res.data.length === 0) { tbody.innerHTML = '<tr><td colspan="5" class="px-4 py-4 text-center text-gray-500">Keine VMs.</td></tr>'; return; }
+                res.data.forEach(vm => {
+                    const isRunning = vm.status === 'running'; const typeStr = vm.type === 'lxc' ? '📦 LXC' : '🖥️ QEMU';
+                    const statusBadge = isRunning ? '<span class="bg-green-500/20 text-green-400 px-2 py-1 rounded text-xs font-bold inline-flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span> Running</span>' : '<span class="bg-red-500/20 text-red-400 px-2 py-1 rounded text-xs font-bold inline-flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-red-500"></span> Stopped</span>';
+                    let actionButtons = isRunning ? `<button onclick="sendVmCommand('${vm.vmid}', '${vm.host}', '${vm.type}', 'reboot', ${vm.node_id})" class="text-blue-400 hover:text-blue-300 px-2">🔄</button><button onclick="sendVmCommand('${vm.vmid}', '${vm.host}', '${vm.type}', 'stop', ${vm.node_id})" class="text-red-500 hover:text-red-400 px-2">⏹️</button>` : `<button onclick="sendVmCommand('${vm.vmid}', '${vm.host}', '${vm.type}', 'start', ${vm.node_id})" class="text-green-500 hover:text-green-400 px-2 text-lg">▶️</button>`;
+                    if(isRunning) { 
+                        actionButtons += `<button onclick="openLiveGraph('${vm.type}', '${vm.vmid}', '${vm.host}', ${vm.node_id}, '${vm.name}')" class="text-blue-400 hover:text-blue-300 px-2 border-l border-darkborder ml-2 pl-4" title="Live Performance (CPU/RAM/Net)">📈</button>`; 
+                        actionButtons += `<button onclick="openVncConsole('${vm.node_ip}', '${vm.host}', '${vm.type}', '${vm.vmid}', '${vm.name}')" class="text-emerald-400 hover:text-emerald-300 px-2 border-l border-darkborder ml-2 pl-4" title="NoVNC Console">🖥️</button>`;
+                    }
+                    actionButtons += `<button onclick="openVmSettings('${vm.vmid}', '${vm.host}', '${vm.type}', ${vm.node_id}, '${vm.name}')" class="text-gray-400 hover:text-white px-2 border-l border-darkborder ml-2 pl-4" title="Einstellungen & Backups">⚙️</button>`;
+                    tbody.innerHTML += `<tr class="hover:bg-darkcard/50 transition-colors border-b border-darkborder/50"><td class="px-4 py-3"><div class="flex items-center gap-2"><span class="text-gray-500 text-xs">${vm.vmid}</span><span class="font-medium text-white">${vm.name}</span></div></td><td class="px-4 py-3 text-xs text-gray-400 uppercase">${typeStr} - ${vm.host}</td><td class="px-4 py-3 text-xs text-gray-400">${vm.maxcpu||1} Cores / ${formatBytes(vm.maxmem||0)}</td><td class="px-4 py-3 text-center">${statusBadge}</td><td class="px-4 py-3 text-right space-x-2">${actionButtons}</td></tr>`;
+                });
+            }
+        } catch (err) {}
+    }
+    window.sendVmCommand = async function(vmid, host, type, cmd, nodeId) { if(!confirm(`Maschine '${vmid}' wirklich ${cmd}?`)) return; const fd = new FormData(); fd.append('vmid', vmid); fd.append('host', host); fd.append('type', type); fd.append('cmd', cmd); fd.append('node_id', nodeId); document.getElementById('vmTableBody').style.opacity = '0.5'; try { const res = await (await fetch('api.php?action=vm_action', { method: 'POST', body: fd })).json(); if(res.success) setTimeout(loadVmsIntoTable, 2000); else alert(res.error); } catch (err) {} finally { document.getElementById('vmTableBody').style.opacity = '1'; } }
+
+    const createVmModal = document.getElementById('createVmModal');
+    window.openCreateVm = async function() { createVmModal.classList.remove('hidden'); const select = document.getElementById('createVmHost'); select.innerHTML = '<option value="">Suche Hosts...</option>'; try { const res = await (await fetch('api.php?action=get_pve_nodes')).json(); if (res.success && res.data.length > 0) { select.innerHTML = ''; res.data.forEach(node => { select.innerHTML += `<option value='{"id":${node.node_id},"host":"${node.host}"}'>${node.display}</option>`; }); } else { select.innerHTML = '<option value="">Keine PVE-Hosts</option>'; } } catch(e) {} }
+    window.closeCreateVm = function() { createVmModal.classList.add('hidden'); }
+    const createVmForm = document.getElementById('createVmForm');
+    if(createVmForm) { createVmForm.addEventListener('submit', async function(e) { e.preventDefault(); const hostDataStr = document.getElementById('createVmHost').value; if(!hostDataStr) return; const hostData = JSON.parse(hostDataStr); const btn = this.querySelector('button[type="submit"]'); const oTxt = btn.innerText; btn.innerText = 'Richte VM ein...'; const fd = new FormData(); fd.append('node_id', hostData.id); fd.append('host', hostData.host); fd.append('name', document.getElementById('createVmName').value); fd.append('memory', document.getElementById('createVmRam').value); fd.append('cores', document.getElementById('createVmCores').value); try { const res = await (await fetch('api.php?action=create_vm', { method: 'POST', body: fd })).json(); if(res.success) { alert(`Erfolgreich! VM-ID: ${res.vmid}`); createVmForm.reset(); closeCreateVm(); loadVmsIntoTable(); } else alert(res.error); } catch(e) {} finally { btn.innerText = oTxt; } }); }
+
+    const settingsModal = document.getElementById('vmSettingsModal');
+    window.openVmSettings = async function(vmid, host, type, nodeId, name) { 
+        settingsModal.classList.remove('hidden'); document.getElementById('settingsModalTitle').innerText = 'Einstellungen: ' + name; 
+        document.getElementById('setVmid').value = vmid; document.getElementById('setHost').value = host; document.getElementById('setType').value = type; document.getElementById('setNodeId').value = nodeId; 
+        document.getElementById('snapshotListContainer').innerHTML = '<div class="text-gray-500 text-sm italic">Lade Snapshots...</div>';
+        document.getElementById('backupListContainer').innerHTML = '<div class="text-gray-500 text-sm italic">Lade Backups...</div>';
+        try { 
+            const res = await (await fetch(`api.php?action=get_vm_config&vmid=${vmid}&host=${host}&type=${type}&node_id=${nodeId}`)).json(); 
+            if (res.success && res.data) { const cfg = res.data; document.getElementById('setMemory').value = cfg.memory || ''; document.getElementById('setCores').value = cfg.cores || 1; if (cfg.net0) { document.getElementById('setRawNet0').value = cfg.net0; if (cfg.net0.includes('link_down=1')) { document.getElementById('netStatusBadge').className = 'px-2 py-1 rounded text-xs font-bold text-red-400 bg-red-500/20'; document.getElementById('netStatusBadge').innerText = 'Getrennt'; document.getElementById('btnToggleNet').innerText = 'Kabel einstecken'; document.getElementById('btnToggleNet').onclick = () => saveNetwork(false); } else { document.getElementById('netStatusBadge').className = 'px-2 py-1 rounded text-xs font-bold text-green-400 bg-green-500/20'; document.getElementById('netStatusBadge').innerText = 'Verbunden'; document.getElementById('btnToggleNet').innerText = 'Kabel ziehen'; document.getElementById('btnToggleNet').onclick = () => saveNetwork(true); } } else { document.getElementById('netStatusBadge').innerText = 'Kein net0'; document.getElementById('btnToggleNet').style.display = 'none'; } let diskName = ''; if (type === 'lxc' && cfg.rootfs) diskName = 'rootfs'; else if (cfg.scsi0) diskName = 'scsi0'; else if (cfg.virtio0) diskName = 'virtio0'; else if (cfg.ide0) diskName = 'ide0'; if (diskName) { document.getElementById('setPrimaryDisk').value = diskName; document.getElementById('diskLabelName').innerText = diskName; } else document.getElementById('diskLabelName').innerText = 'Nicht gefunden'; } 
+            loadSnapshots(vmid, host, type, nodeId);
+            const stRes = await (await fetch(`api.php?action=get_backup_storages&node_id=${nodeId}&host=${host}`)).json();
+            if (stRes.success) { const bSelect = document.getElementById('backupTargetStorage'); bSelect.innerHTML = ''; stRes.data.forEach(st => bSelect.innerHTML += `<option value="${st}">${st}</option>`); }
+            loadBackups(vmid, host, nodeId);
+        } catch (e) {} 
+    }
+    window.closeVmSettings = function() { settingsModal.classList.add('hidden'); }
+    window.saveHardwareSettings = async function() { const fd = new FormData(); fd.append('vmid', document.getElementById('setVmid').value); fd.append('host', document.getElementById('setHost').value); fd.append('type', document.getElementById('setType').value); fd.append('node_id', document.getElementById('setNodeId').value); fd.append('memory', document.getElementById('setMemory').value); fd.append('cores', document.getElementById('setCores').value); const res = await (await fetch('api.php?action=update_vm_config', { method: 'POST', body: fd })).json(); if(res.success) { alert('Gespeichert!'); loadVmsIntoTable(); } else alert(res.error); }
+    window.saveNetwork = async function(disconnect) { let net = document.getElementById('setRawNet0').value; if (!net) return; if (disconnect) { if (!net.includes('link_down=1')) net += ',link_down=1'; } else { net = net.replace(',link_down=1', ''); } const fd = new FormData(); fd.append('vmid', document.getElementById('setVmid').value); fd.append('host', document.getElementById('setHost').value); fd.append('type', document.getElementById('setType').value); fd.append('node_id', document.getElementById('setNodeId').value); fd.append('net0', net); const res = await (await fetch('api.php?action=update_vm_config', { method: 'POST', body: fd })).json(); if(res.success) { alert('Netzwerkstatus geändert!'); openVmSettings(fd.get('vmid'), fd.get('host'), fd.get('type'), fd.get('node_id'), document.getElementById('settingsModalTitle').innerText.replace('Einstellungen: ', '')); } }
+    window.addNic = async function() { const bridge = document.getElementById('addNicBridge').value.trim(); if (!bridge) return; const fd = new FormData(); fd.append('vmid', document.getElementById('setVmid').value); fd.append('host', document.getElementById('setHost').value); fd.append('type', document.getElementById('setType').value); fd.append('node_id', document.getElementById('setNodeId').value); fd.append('bridge', bridge); try { const res = await (await fetch('api.php?action=add_vm_nic', { method: 'POST', body: fd })).json(); if(res.success) { alert(`Erfolgreich in Slot: ${res.slot}`); openVmSettings(fd.get('vmid'), fd.get('host'), fd.get('type'), fd.get('node_id'), document.getElementById('settingsModalTitle').innerText.replace('Einstellungen: ', '')); } else alert(res.error); } catch(e) {} }
+    window.expandDisk = async function() { const gb = document.getElementById('addDiskGb').value; const disk = document.getElementById('setPrimaryDisk').value; if (!gb || gb <= 0 || !disk) return; if (!confirm(`Disk um +${gb}GB erweitern?`)) return; const fd = new FormData(); fd.append('vmid', document.getElementById('setVmid').value); fd.append('host', document.getElementById('setHost').value); fd.append('type', document.getElementById('setType').value); fd.append('node_id', document.getElementById('setNodeId').value); fd.append('disk', disk); fd.append('size', '+' + gb + 'G'); const res = await (await fetch('api.php?action=resize_vm_disk', { method: 'POST', body: fd })).json(); if(res.success) { alert('Erweitert.'); document.getElementById('addDiskGb').value = ''; } else alert(res.error); }
+    window.destroyVm = async function() { const vmid = document.getElementById('setVmid').value; if (prompt(`Zahl ${vmid} eingeben zum Löschen:`) !== vmid) return; const fd = new FormData(); fd.append('vmid', vmid); fd.append('host', document.getElementById('setHost').value); fd.append('type', document.getElementById('setType').value); fd.append('node_id', document.getElementById('setNodeId').value); try { const res = await (await fetch('api.php?action=delete_vm', { method: 'POST', body: fd })).json(); if(res.success) { alert('Gelöscht.'); closeVmSettings(); loadVmsIntoTable(); } else alert(res.error); } catch(e) {} }
+
+    async function loadSnapshots(vmid, host, type, nodeId) {
+        try {
+            const res = await (await fetch(`api.php?action=get_vm_snapshots&vmid=${vmid}&host=${host}&type=${type}&node_id=${nodeId}`)).json();
+            const container = document.getElementById('snapshotListContainer');
+            if (res.success && res.data) {
+                const snaps = res.data.filter(s => s.name !== 'current');
+                if(snaps.length === 0) { container.innerHTML = '<p class="text-gray-500 text-sm italic">Keine Snapshots vorhanden.</p>'; return; }
+                container.innerHTML = '';
+                snaps.forEach(s => {
+                    const timeStr = s.snaptime ? formatDate(s.snaptime) : 'Unbekannt';
+                    container.innerHTML += `<div class="flex justify-between items-center bg-darkcard p-2 border border-darkborder rounded"><div><p class="text-white text-sm font-bold">${s.name}</p><p class="text-xs text-gray-500">${timeStr}</p></div><div class="flex gap-2"><button onclick="actionSnapshot('rollback', '${s.name}')" class="text-orange-400 hover:text-orange-300 text-xs font-bold px-2 border-r border-darkborder">Rollback</button><button onclick="actionSnapshot('delete', '${s.name}')" class="text-red-500 hover:text-red-400 text-xs font-bold px-2">Löschen</button></div></div>`;
+                });
+            }
+        } catch(e) {}
+    }
+    window.createSnapshot = async function() { const snapname = document.getElementById('newSnapName').value.trim(); if(!snapname || !snapname.match(/^[a-zA-Z0-9_-]+$/)) return alert('Bitte nur Buchstaben und Zahlen!'); actionSnapshot('create', snapname); }
+    window.actionSnapshot = async function(cmd, snapname) {
+        if(cmd === 'rollback' && !confirm(`VM wird auf '${snapname}' zurückgesetzt. Fortfahren?`)) return;
+        if(cmd === 'delete' && !confirm(`Snapshot '${snapname}' löschen?`)) return;
+        const fd = new FormData(); fd.append('vmid', document.getElementById('setVmid').value); fd.append('host', document.getElementById('setHost').value); fd.append('type', document.getElementById('setType').value); fd.append('node_id', document.getElementById('setNodeId').value); fd.append('cmd', cmd); fd.append('snapname', snapname);
+        try { const res = await (await fetch('api.php?action=vm_snapshot_action', { method: 'POST', body: fd })).json(); if(res.success) { alert('Aktion erfolgreich!'); document.getElementById('newSnapName').value = ''; loadSnapshots(fd.get('vmid'), fd.get('host'), fd.get('type'), fd.get('node_id')); } else alert('Fehler.'); } catch(e) {}
+    }
+
+    async function loadBackups(vmid, host, nodeId) {
+        try {
+            const res = await (await fetch(`api.php?action=get_vm_backups&vmid=${vmid}&host=${host}&node_id=${nodeId}`)).json();
+            const container = document.getElementById('backupListContainer');
+            if (res.success && res.data) {
+                if(res.data.length === 0) { container.innerHTML = '<p class="text-gray-500 text-sm italic">Keine Backups gefunden.</p>'; return; }
+                container.innerHTML = '';
+                res.data.forEach(b => {
+                    const timeStr = b.ctime ? formatDate(b.ctime) : 'Unbekannt'; const sizeStr = formatBytes(b.size);
+                    container.innerHTML += `<div class="flex justify-between items-center bg-darkcard p-2 border border-darkborder rounded hover:border-pbs transition-colors cursor-pointer" onclick="restoreBackup('${b.volid}')"><div class="truncate pr-2"><p class="text-white text-xs font-bold truncate" title="${b.volid}">${b.volid}</p><p class="text-xs text-gray-500">${timeStr} | ${sizeStr} | Storage: ${b.storage}</p></div><span class="text-pbs text-xs font-bold whitespace-nowrap">Restore ⤵</span></div>`;
+                });
+            }
+        } catch(e) {}
+    }
+    window.createBackup = async function() { const storage = document.getElementById('backupTargetStorage').value; if(!storage) return alert('Storage auswählen!'); const fd = new FormData(); fd.append('vmid', document.getElementById('setVmid').value); fd.append('host', document.getElementById('setHost').value); fd.append('node_id', document.getElementById('setNodeId').value); fd.append('storage', storage); try { const res = await (await fetch('api.php?action=create_backup', { method: 'POST', body: fd })).json(); if(res.success) { alert('Backup gestartet! Siehe Letzte Jobs.'); } else alert('Fehler.'); } catch(e) {} }
+    window.restoreBackup = async function(archive) {
+        if(!confirm(`⚠️ GEFAHRENZONE ⚠️\nSicher, dass du das Archiv '${archive}' wiederherstellen willst?\nDie VM MUSS dafür GESTOPPT sein!`)) return;
+        const fd = new FormData(); fd.append('vmid', document.getElementById('setVmid').value); fd.append('host', document.getElementById('setHost').value); fd.append('type', document.getElementById('setType').value); fd.append('node_id', document.getElementById('setNodeId').value); fd.append('archive', archive);
+        try { const res = await (await fetch('api.php?action=restore_backup', { method: 'POST', body: fd })).json(); if(res.success) { alert('Restore-Task erfolgreich!'); closeVmSettings(); } else alert('Fehler: Ist die VM gestoppt?'); } catch(e) {}
+    }
+
+    const topologyModal = document.getElementById('nodeTopologyModal');
+    window.openNodeTopology = async function() {
+        topologyModal.classList.remove('hidden'); const container = document.getElementById('nodeTopologyContainer'); container.innerHTML = '<div class="text-center text-gray-500 py-10 animate-pulse">Lade Cluster-Daten...</div>';
+        try {
+            const [nodesRes, vmsRes] = await Promise.all([ fetch('api.php?action=get_nodes').then(r => r.json()), fetch('api.php?action=get_all_vms').then(r => r.json()) ]);
+            if(nodesRes.success && vmsRes.success) {
+                container.innerHTML = ''; const pveNodes = nodesRes.data.filter(n => n.type === 'pve'); if(pveNodes.length === 0) return;
+                pveNodes.forEach(node => {
+                    const nodeVms = vmsRes.data.filter(v => v.node_id == node.id); let vmsHtml = '';
+                    if(nodeVms.length > 0) {
+                        nodeVms.sort((a, b) => { if(a.status === 'running' && b.status !== 'running') return -1; if(a.status !== 'running' && b.status === 'running') return 1; return a.name.localeCompare(b.name); });
+                        nodeVms.forEach(vm => {
+                            const icon = vm.type === 'lxc' ? '📦' : '🖥️'; const isRunning = vm.status === 'running'; const statusColor = isRunning ? 'border-green-500/30 bg-green-500/10 text-green-400' : 'border-darkborder bg-darkcard text-gray-400'; const dot = isRunning ? '<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse shrink-0"></span>' : '<span class="w-2 h-2 rounded-full bg-gray-600 shrink-0"></span>';
+                            vmsHtml += `<div class="flex flex-col p-3 rounded-lg border ${statusColor} transition-transform hover:scale-[1.02]"><div class="flex items-center gap-2 mb-1">${dot}<span class="font-bold text-sm truncate" title="${vm.name}">${icon} ${vm.name}</span></div><div class="flex justify-between text-xs opacity-75"><span>ID: ${vm.vmid}</span><span>${vm.maxcpu || 1}C / ${formatBytes(vm.maxmem || 0)}</span></div></div>`;
+                        });
+                    }
+                    container.innerHTML += `<div class="bg-darkcard border border-darkborder rounded-xl p-5 shadow-lg"><div class="flex justify-between items-center mb-4 border-b border-darkborder pb-3"><h3 class="text-lg font-bold text-white flex items-center gap-2"><svg class="w-5 h-5 text-proxmox" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>${node.name}</h3><div class="flex gap-3"><button onclick="openLiveGraph('node', 0, '${node.name}', ${node.id}, '${node.name}')" class="text-blue-400 hover:text-white transition-colors text-sm" title="Node Performance">📈 Live Graph</button><span class="text-xs font-bold text-gray-400 bg-darkbg px-3 py-1 rounded-full border border-darkborder">${node.ip_address}</span></div></div><div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">${vmsHtml}</div></div>`;
+                });
+            }
+        } catch(e) {}
+    }
+    window.closeNodeTopology = function() { topologyModal.classList.add('hidden'); }
+
+    let perfChartObj = null; let netChartObj = null; let liveInterval = null;
+    window.openLiveGraph = function(targetMode, vmid, host, nodeId, name) {
+        document.getElementById('liveGraphModal').classList.remove('hidden'); document.getElementById('graphModalTitle').innerText = targetMode === 'node' ? `Live Performance: Node ${name}` : `Live Performance: VM ${name} (${vmid})`;
+        if(perfChartObj) perfChartObj.destroy(); if(netChartObj) netChartObj.destroy();
+        const ctxPerf = document.getElementById('perfChart').getContext('2d'); perfChartObj = new Chart(ctxPerf, { type: 'line', data: { labels: [], datasets: [ { label: 'CPU (%)', borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', borderWidth: 2, tension: 0.4, fill: true, data: [] }, { label: 'RAM (%)', borderColor: '#E57000', backgroundColor: 'rgba(229, 112, 0, 0.1)', borderWidth: 2, tension: 0.4, fill: true, data: [] }]}, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 0 }, scales: { x: { grid: { color: '#33334d' }, ticks: { color: '#9ca3af' } }, y: { min: 0, max: 100, grid: { color: '#33334d' }, ticks: { color: '#9ca3af' } } }, plugins: { legend: { labels: { color: '#e2e8f0' } } } } });
+        const ctxNet = document.getElementById('netChart').getContext('2d'); netChartObj = new Chart(ctxNet, { type: 'line', data: { labels: [], datasets: [ { label: 'RX (MB/s)', borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.1)', borderWidth: 2, tension: 0.4, fill: true, data: [] }, { label: 'TX (MB/s)', borderColor: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.1)', borderWidth: 2, tension: 0.4, fill: true, data: [] }]}, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 0 }, scales: { x: { grid: { color: '#33334d' }, ticks: { color: '#9ca3af' } }, y: { min: 0, grid: { color: '#33334d' }, ticks: { color: '#9ca3af' } } }, plugins: { legend: { labels: { color: '#e2e8f0' } } } } });
+        if(liveInterval) clearInterval(liveInterval);
+        let prevNetIn = 0; let prevNetOut = 0; let prevTime = null;
+        const fetchLiveData = async () => {
+            try {
+                const endpoint = targetMode === 'node' ? `api.php?action=get_node_status&host=${host}&node_id=${nodeId}` : `api.php?action=get_vm_status&vmid=${vmid}&host=${host}&type=${targetMode}&node_id=${nodeId}`;
+                const res = await (await fetch(endpoint)).json();
+                if(res.success && res.data) {
+                    const d = res.data; const now = Date.now();
+                    let cpuRaw = 0; if (d.cpu !== undefined) cpuRaw = d.cpu; else if (d.cpuinfo && d.cpuinfo.cpus) cpuRaw = 0; const cpu = (cpuRaw * 100).toFixed(1);
+                    let ram = 0; if (d.maxmem && d.maxmem > 0) { ram = ((d.mem / d.maxmem) * 100).toFixed(1); } else if (d.memory && d.memory.total > 0) { ram = ((d.memory.used / d.memory.total) * 100).toFixed(1); }
+                    let currentNetIn = d.netin || 0; let currentNetOut = d.netout || 0; let rxSpeed = 0; let txSpeed = 0;
+                    if(prevTime !== null) { const timeSec = (now - prevTime) / 1000; if (timeSec > 0) { rxSpeed = Math.max(0, ((currentNetIn - prevNetIn) / timeSec / (1024 * 1024))).toFixed(2); txSpeed = Math.max(0, ((currentNetOut - prevNetOut) / timeSec / (1024 * 1024))).toFixed(2); } }
+                    prevNetIn = currentNetIn; prevNetOut = currentNetOut; prevTime = now;
+                    const timeStr = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+                    perfChartObj.data.labels.push(timeStr); perfChartObj.data.datasets[0].data.push(cpu); perfChartObj.data.datasets[1].data.push(ram); if(perfChartObj.data.labels.length > 30) { perfChartObj.data.labels.shift(); perfChartObj.data.datasets[0].data.shift(); perfChartObj.data.datasets[1].data.shift(); } perfChartObj.update();
+                    if(prevTime !== null) { netChartObj.data.labels.push(timeStr); netChartObj.data.datasets[0].data.push(rxSpeed); netChartObj.data.datasets[1].data.push(txSpeed); if(netChartObj.data.labels.length > 30) { netChartObj.data.labels.shift(); netChartObj.data.datasets[0].data.shift(); netChartObj.data.datasets[1].data.shift(); } netChartObj.update(); }
+                }
+            } catch(e) {}
+        };
+        fetchLiveData(); liveInterval = setInterval(fetchLiveData, 2000);
+    }
+    window.closeLiveGraph = function() { document.getElementById('liveGraphModal').classList.add('hidden'); if(liveInterval) clearInterval(liveInterval); }
+
+    window.openVncConsole = function(ip, node, type, vmid, name) {
+        const cType = type === 'qemu' ? 'kvm' : 'lxc';
+        const url = `https://${ip}:8006/?console=${cType}&novnc=1&vmid=${vmid}&vmname=${name}&node=${node}`;
+        window.open(url, `VNC_${vmid}`, "width=1024,height=768,menubar=no,toolbar=no,location=no,status=no,resizable=yes,scrollbars=yes");
+    }
+    window.closeVncConsole = function() {} 
+
+    window.openPbsDatastore = async function(nodeId, storeName) {
+        if (!nodeId) return alert('Node ID fehlt. Bitte Seite neu laden (F5).');
+        document.getElementById('pbsDatastoreModal').classList.remove('hidden');
+        document.getElementById('pbsModalTitle').innerText = 'Datastore: ' + storeName;
+        document.getElementById('pbsNodeId').value = nodeId;
+        document.getElementById('pbsStoreName').value = storeName;
+        loadPbsBackups(nodeId, storeName);
+        loadPbsJobs(nodeId, storeName);
+        loadPbsSyncJobs(nodeId);
+    }
+    window.closePbsDatastore = function() { document.getElementById('pbsDatastoreModal').classList.add('hidden'); }
+
+    async function loadPbsBackups(nodeId, storeName) {
+        const container = document.getElementById('pbsBackupsContainer'); container.innerHTML = '<p class="text-gray-500 animate-pulse">Durchsuche Namespaces nach Backups...</p>';
+        try {
+            const res = await (await fetch(`api.php?action=pbs_get_datastore_content&node_id=${nodeId}&store=${storeName}`)).json();
+            if(res.success && res.data) {
+                if(res.data.length === 0) { container.innerHTML = '<p class="text-gray-500 text-sm">Keine Backups vorhanden.</p>'; return; }
+                container.innerHTML = '';
+                res.data.sort((a,b) => b['backup-time'] - a['backup-time']).forEach(b => {
+                    const timeStr = formatDate(b['backup-time']); const sizeStr = formatBytes(b.size);
+                    const nsLabel = b.ns ? `<span class="text-pbs font-normal ml-2">[${b.ns}]</span>` : `<span class="text-gray-500 font-normal ml-2">[Root]</span>`;
+                    container.innerHTML += `
+                        <div class="flex justify-between items-center bg-darkbg p-2 border border-darkborder rounded mb-2 hover:border-pbs transition-colors">
+                            <div><p class="text-white text-xs font-bold">${b['backup-type']} / ${b['backup-id']} ${nsLabel}</p><p class="text-xs text-gray-500">${timeStr} | ${sizeStr}</p></div>
+                            <button onclick="deletePbsSnapshot('${b['backup-type']}', '${b['backup-id']}', ${b['backup-time']}, '${b.ns || ''}')" class="text-red-500 hover:text-white text-xs font-bold px-3 py-1 bg-red-500/10 hover:bg-red-500 rounded transition-colors">Löschen</button>
+                        </div>`;
+                });
+            }
+        } catch(e) { container.innerHTML = 'Fehler beim Laden.'; }
+    }
+    window.deletePbsSnapshot = async function(btype, bid, btime, ns) {
+        if(!confirm(`Backup ${btype}/${bid} wirklich unwiderruflich löschen?`)) return;
+        const fd = new FormData(); fd.append('node_id', document.getElementById('pbsNodeId').value); fd.append('store', document.getElementById('pbsStoreName').value); fd.append('btype', btype); fd.append('bid', bid); fd.append('btime', btime); fd.append('ns', ns);
+        const res = await (await fetch('api.php?action=pbs_delete_snapshot', {method: 'POST', body: fd})).json();
+        if(res.success) { loadPbsBackups(document.getElementById('pbsNodeId').value, document.getElementById('pbsStoreName').value); } else alert('Fehler beim Löschen.');
+    }
+
+    async function loadPbsJobs(nodeId, storeName) {
+        const mixCont = document.getElementById('pbsVerifyGcContainer'); mixCont.innerHTML = '<p class="text-gray-500 animate-pulse">Lade System-Jobs...</p>';
+        const table = document.getElementById('pbsJobsTable'); table.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-gray-500">Lade Historie...</td></tr>';
+        try {
+            const res = await (await fetch(`api.php?action=pbs_get_jobs&node_id=${nodeId}`)).json();
+            if(res.success && res.data) {
+                mixCont.innerHTML = ''; table.innerHTML = ''; let mixCount = 0;
+                res.data.sort((a,b) => b.starttime - a.starttime).forEach(job => {
+                    const statusColor = job.status === 'OK' ? 'text-green-500' : (job.status ? 'text-red-500' : 'text-blue-400');
+                    const timeStr = formatDate(job.starttime);
+                    const runtime = job.endtime ? (Math.round(job.endtime - job.starttime) + 's') : 'Running...';
+                    const isSystemJob = job.worker_type === 'verify' || job.worker_type === 'garbage_collection' || job.worker_type === 'prune';
+                    if (isSystemJob && mixCount < 6) {
+                        mixCont.innerHTML += `<div class="flex justify-between items-center bg-darkbg p-2 border border-darkborder rounded mb-1"><div><p class="text-white text-xs font-bold uppercase">${job.worker_type}</p><p class="text-xs text-gray-500">${timeStr}</p></div><div class="flex items-center gap-2"><span class="${statusColor} font-bold text-xs uppercase mr-2">${job.status || 'Active'}</span><button onclick="openTaskLog('${job.upid}', ${nodeId}, 'localhost')" class="text-gray-400 hover:text-white text-xs bg-darkcard px-2 py-1 rounded border border-darkborder transition-colors">📄 Log</button></div></div>`;
+                        mixCount++;
+                    }
+                    table.innerHTML += `<tr class="hover:bg-darkbg transition-colors border-b border-darkborder/50"><td class="px-4 py-2">${timeStr}</td><td class="px-4 py-2 font-medium text-white">${job.worker_type}</td><td class="px-4 py-2 ${statusColor} font-bold uppercase">${job.status || 'Active'}</td><td class="px-4 py-2">${runtime}</td><td class="px-4 py-2 text-right"><button onclick="openTaskLog('${job.upid}', ${nodeId}, 'localhost')" class="text-pbs hover:text-white font-bold text-xs transition-colors">Ansehen</button></td></tr>`;
+                });
+                if(mixCount === 0) mixCont.innerHTML = '<p class="text-gray-500 text-xs italic">Keine System-Jobs gefunden.</p>';
+                if(res.data.length === 0) table.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-gray-500">Keine Historie gefunden.</td></tr>';
+            }
+        } catch(e) {}
+    }
+
+    async function loadPbsSyncJobs(nodeId) {
+        const container = document.getElementById('pbsSyncContainer'); container.innerHTML = '<p class="text-gray-500 animate-pulse">Lade Sync-Jobs...</p>';
+        try {
+            const res = await (await fetch(`api.php?action=pbs_get_sync_jobs&node_id=${nodeId}`)).json();
+            if(res.success && res.data) {
+                if(res.data.length === 0) { container.innerHTML = '<p class="text-gray-500 text-sm">Keine Sync-Jobs eingerichtet.</p>'; return; }
+                container.innerHTML = '';
+                res.data.forEach(sync => {
+                    container.innerHTML += `<div class="bg-darkbg p-3 border border-darkborder rounded mb-2 hover:border-blue-500 transition-colors"><h4 class="text-white text-sm font-bold truncate">${sync.id}</h4><p class="text-xs text-gray-400 mt-1">Quelle: <span class="text-blue-400">${sync.remote || 'Lokal'} -> ${sync['remote-store']}</span></p><p class="text-xs text-gray-400">Ziel: <span class="text-emerald-400">${sync.store}</span></p><div class="mt-2 text-xs text-gray-500 bg-darkcard p-1.5 rounded inline-block">Zeitplan: ${sync.schedule || 'Manuell'}</div></div>`;
+                });
+            }
+        } catch(e) { container.innerHTML = 'Fehler.'; }
+    }
+
+    window.openTaskLog = async function(upid, nodeId, host) {
+        document.getElementById('taskLogModal').classList.remove('hidden');
+        document.getElementById('taskLogContent').innerText = 'Lade Log vom Server...';
+        try {
+            const res = await (await fetch(`api.php?action=get_task_log&node_id=${nodeId}&upid=${encodeURIComponent(upid)}&host=${host}`)).json();
+            if(res.success && res.data) {
+                let logText = ''; res.data.forEach(line => logText += line.t + '\n');
+                document.getElementById('taskLogContent').innerText = logText || 'Log ist leer.';
+            } else { document.getElementById('taskLogContent').innerText = 'Fehler beim Laden des Logs.'; }
+        } catch(e) {}
+    }
+    window.closeTaskLog = function() { document.getElementById('taskLogModal').classList.add('hidden'); }
+
+    window.openPmgManager = function(nodeId, hostName, internalName) {
+        document.getElementById('pmgManagerModal').classList.remove('hidden');
+        document.getElementById('pmgModalTitle').innerText = 'Mail Gateway: ' + hostName;
+        document.getElementById('pmgNodeId').value = nodeId;
+        document.getElementById('pmgHostName').value = hostName;
+        document.getElementById('pmgInternalName').value = internalName;
+        switchPmgTab('spam');
+    }
+    window.closePmgManager = function() { document.getElementById('pmgManagerModal').classList.add('hidden'); }
+
+    window.switchPmgTab = function(tabName) {
+        ['spam', 'tracking', 'queues', 'settings'].forEach(t => {
+            const btn = document.getElementById('btn-pmg-' + t);
+            const content = document.getElementById('pmg-tab-' + t);
+            if(btn && content) {
+                if (t === tabName) {
+                    btn.classList.add('border-pmg', 'text-white'); btn.classList.remove('border-transparent', 'text-gray-400');
+                    content.classList.remove('hidden');
+                } else {
+                    btn.classList.remove('border-pmg', 'text-white'); btn.classList.add('border-transparent', 'text-gray-400');
+                    content.classList.add('hidden');
+                }
+            }
+        });
+        const nodeId = document.getElementById('pmgNodeId').value;
+        if (!nodeId) return;
+        if(tabName === 'spam') loadPmgSpamQueue(nodeId);
+        if(tabName === 'tracking') loadPmgTracking();
+        if(tabName === 'queues') loadPmgQueues();
+        if(tabName === 'settings') { loadPmgConfig(nodeId); loadPmgSsl(nodeId); loadPmgDomains(nodeId); loadPmgNetworks(nodeId); }
+    }
+
+    window.loadPmgSpamQueue = async function(nodeId) {
+        const table = document.getElementById('pmgSpamTable'); 
+        table.innerHTML = '<tr><td colspan="6" class="text-center py-6 text-gray-500 animate-pulse">Lade Spam Quarantäne...</td></tr>';
+        try {
+            const res = await (await fetch(`api.php?action=pmg_get_spam_queue&node_id=${nodeId}`)).json();
+            if(res.success && res.data) {
+                table.innerHTML = '';
+                if(res.data.length === 0) { table.innerHTML = '<tr><td colspan="6" class="text-center py-6 text-gray-500">🎉 Keine Mails in der Quarantäne.</td></tr>'; return; }
+                res.data.sort((a,b) => b.time - a.time).forEach(mail => {
+                    const timeStr = formatDate(mail.time); const subject = mail.subject || 'Kein Betreff'; const sender = mail.sender || 'Unbekannt'; const receiver = mail.receiver || 'Unbekannt'; const score = mail.spamlevel || 0;
+                    table.innerHTML += `<tr class="hover:bg-darkcard/50 transition-colors border-b border-darkborder/50"><td class="px-4 py-3 whitespace-nowrap">${timeStr}</td><td class="px-4 py-3 text-white truncate max-w-[200px]" title="${sender}">${sender}</td><td class="px-4 py-3 text-gray-300 truncate max-w-[200px]" title="${receiver}">${receiver}</td><td class="px-4 py-3 truncate max-w-[250px]" title="${subject}">${subject}</td><td class="px-4 py-3 text-red-400 font-bold text-center">${score}</td><td class="px-4 py-3 text-right whitespace-nowrap"><button onclick="pmgSpamAction('deliver', '${mail.id}')" class="text-green-500 hover:text-white px-2 py-1.5 bg-green-500/10 hover:bg-green-500 rounded text-xs font-bold transition-colors mr-2">Deliver</button><button onclick="pmgSpamAction('delete', '${mail.id}')" class="text-red-500 hover:text-white px-2 py-1.5 bg-red-500/10 hover:bg-red-500 rounded text-xs font-bold transition-colors">Delete</button></td></tr>`;
+                });
+            } else { table.innerHTML = '<tr><td colspan="6" class="text-center py-6 text-red-500">Fehler beim Laden.</td></tr>'; }
+        } catch(e) { table.innerHTML = '<tr><td colspan="6" class="text-center py-6 text-red-500">Netzwerkfehler.</td></tr>'; }
+    }
+    window.pmgSpamAction = async function(actionType, mailId) {
+        if(actionType === 'delete' && !confirm('Mail unwiderruflich löschen?')) return;
+        if(actionType === 'deliver' && !confirm('Soll diese Mail an den Empfänger zugestellt werden?')) return;
+        const fd = new FormData(); fd.append('node_id', document.getElementById('pmgNodeId').value); fd.append('pmg_action', actionType); fd.append('mailid', mailId);
+        try {
+            const res = await (await fetch('api.php?action=pmg_quarantine_action', {method: 'POST', body: fd})).json();
+            if(res.success) loadPmgSpamQueue(document.getElementById('pmgNodeId').value); else alert('Aktion fehlgeschlagen.');
+        } catch(e) { alert('Netzwerkfehler'); }
+    }
+
+    window.loadPmgTracking = async function() {
+        const nodeId = document.getElementById('pmgNodeId').value; const internalName = document.getElementById('pmgInternalName').value; const filter = document.getElementById('pmgTrackingFilter').value.trim(); const table = document.getElementById('pmgTrackingTable');
+        table.innerHTML = '<tr><td colspan="4" class="text-center py-6 text-gray-500 animate-pulse">Lese Syslog (Letzte 24h)...</td></tr>';
+        try {
+            const res = await (await fetch(`api.php?action=pmg_get_tracking&node_id=${nodeId}&internal_name=${internalName}&filter=${encodeURIComponent(filter)}`)).json();
+            if(res.success && res.data) {
+                table.innerHTML = '';
+                if(res.data.length === 0) { table.innerHTML = `<tr><td colspan="4" class="text-center py-6 text-gray-500">Keine Logs für diesen Filter gefunden.</td></tr>`; return; }
+                res.data.forEach(log => {
+                    const timestamp = log.time || log.timestamp || 0; const timeStr = timestamp ? formatDate(timestamp) : 'Unbekannt'; const sender = log.from || log.sender || '-'; const receiver = log.to || log.receiver || '-';
+                    let statusTxt = 'Unbekannt'; let statusColor = 'text-gray-400';
+                    if (log.dstatus) {
+                        if (log.dstatus === 'A') { statusTxt = 'Delivered / Accept'; statusColor = 'text-green-500'; } else if (log.dstatus === 'N') { statusTxt = 'Rejected / Blocked'; statusColor = 'text-red-500'; } else if (log.dstatus === 'Q') { statusTxt = 'Quarantined'; statusColor = 'text-orange-500'; } else if (log.dstatus === 'B') { statusTxt = 'Bounced'; statusColor = 'text-red-500'; } else { statusTxt = log.dstatus; statusColor = 'text-blue-400'; }
+                    } else if (log.relay) { statusTxt = 'Relayed (' + log.relay.split('[')[0] + ')'; statusColor = 'text-blue-400'; } else if (log.msgid) { statusTxt = 'In Processing (' + log.msgid + ')'; statusColor = 'text-gray-400'; } else if (log.client) { statusTxt = 'Connection from ' + log.client.split('[')[0]; statusColor = 'text-gray-500'; } else if (log.id && log.id.length > 5) { statusTxt = 'Queue ID: ' + log.id; statusColor = 'text-gray-400'; } else { statusTxt = JSON.stringify(log).substring(0, 30); }
+                    table.innerHTML += `<tr class="hover:bg-darkcard/50 transition-colors border-b border-darkborder/50"><td class="px-4 py-3 whitespace-nowrap text-gray-400">${timeStr}</td><td class="px-4 py-3 text-white truncate max-w-[200px]">${sender}</td><td class="px-4 py-3 text-gray-300 truncate max-w-[200px]">${receiver}</td><td class="px-4 py-3 font-bold uppercase ${statusColor} truncate max-w-[300px]" title="${statusTxt}">${statusTxt}</td></tr>`;
+                });
+            } else { table.innerHTML = '<tr><td colspan="4" class="text-center py-6 text-red-500">Syslog konnte nicht gelesen werden.</td></tr>'; }
+        } catch(e) { table.innerHTML = '<tr><td colspan="4" class="text-center py-6 text-red-500">Netzwerkfehler.</td></tr>'; }
+    }
+
+    window.loadPmgQueues = async function() {
+        const nodeId = document.getElementById('pmgNodeId').value; const internalName = document.getElementById('pmgInternalName').value; const table = document.getElementById('pmgQueueTable'); const summary = document.getElementById('pmgQueuesSummary');
+        table.innerHTML = '<tr><td colspan="5" class="text-center py-6 text-gray-500 animate-pulse">Lese Warteschlangen aus Postfix...</td></tr>'; summary.innerHTML = '<div class="col-span-3 text-center text-gray-500 animate-pulse">Lade...</div>';
+        try {
+            const res = await (await fetch(`api.php?action=pmg_get_queues&node_id=${nodeId}&internal_name=${internalName}`)).json();
+            if(res.success && res.data) {
+                let activeCount = 0, deferCount = 0, holdCount = 0;
+                res.data.forEach(q => { const queueName = q.queue_name || q.queue || ''; if(queueName === 'active') activeCount++; else if(queueName === 'deferred') deferCount++; else holdCount++; });
+                summary.innerHTML = `<div class="bg-darkcard border ${activeCount > 0 ? 'border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.1)]' : 'border-darkborder'} rounded-xl p-5 text-center transition-all"><p class="text-gray-400 text-sm font-bold uppercase mb-1">Active Queue</p><h4 class="text-3xl font-bold ${activeCount > 0 ? 'text-blue-500' : 'text-white'}">${activeCount}</h4></div><div class="bg-darkcard border ${deferCount > 0 ? 'border-orange-500/50 shadow-[0_0_15px_rgba(249,115,22,0.1)]' : 'border-darkborder'} rounded-xl p-5 text-center transition-all"><p class="text-gray-400 text-sm font-bold uppercase mb-1">Deferred (Greylisted/Wartend)</p><h4 class="text-3xl font-bold ${deferCount > 0 ? 'text-orange-500' : 'text-white'}">${deferCount}</h4></div><div class="bg-darkcard border ${holdCount > 0 ? 'border-red-500/50 shadow-[0_0_15px_rgba(239,68,68,0.1)]' : 'border-darkborder'} rounded-xl p-5 text-center"><p class="text-gray-400 text-sm font-bold uppercase mb-1">Other / Hold</p><h4 class="text-3xl font-bold ${holdCount > 0 ? 'text-red-500' : 'text-white'}">${holdCount}</h4></div>`;
+                table.innerHTML = '';
+                if(res.data.length === 0) { table.innerHTML = `<tr><td colspan="5" class="text-center py-6 text-gray-500">Alle Postfix-Queues sind komplett leer.</td></tr>`; return; }
+                res.data.forEach(q => {
+                    const queueName = q.queue_name || q.queue || 'unknown'; const timestamp = q.arrival_time || q.time || 0; const timeStr = timestamp ? formatDate(timestamp) : 'Unbekannt'; const sender = q.sender || '-'; let receiver = q.receiver || q.recipients || '-'; if (Array.isArray(receiver)) receiver = receiver[0]; const reason = q.reason || q.error || '-'; const qColor = queueName === 'deferred' ? 'text-orange-400' : (queueName === 'active' ? 'text-blue-400' : 'text-gray-400');
+                    table.innerHTML += `<tr class="hover:bg-darkcard/50 transition-colors border-b border-darkborder/50"><td class="px-4 py-3 font-bold uppercase ${qColor}">${queueName}</td><td class="px-4 py-3 whitespace-nowrap text-gray-400">${timeStr}</td><td class="px-4 py-3 text-white truncate max-w-[200px]" title="${sender}">${sender}</td><td class="px-4 py-3 text-gray-300 truncate max-w-[200px]" title="${receiver}">${receiver}</td><td class="px-4 py-3 text-xs text-gray-500 truncate max-w-[300px]" title="${reason}">${reason}</td></tr>`;
+                });
+            } else { table.innerHTML = '<tr><td colspan="5" class="text-center py-6 text-red-500">Queues konnten nicht gelesen werden.</td></tr>'; }
+        } catch(e) { table.innerHTML = '<tr><td colspan="5" class="text-center py-6 text-red-500">Netzwerkfehler.</td></tr>'; }
+    }
+
+    window.loadPmgConfig = async function(nodeId) {
+        try {
+            const res = await (await fetch(`api.php?action=pmg_get_config&node_id=${nodeId}`)).json();
+            if(res.success && res.data) {
+                document.getElementById('pmgCfgRelay').value = res.data.relay || '';
+                document.getElementById('pmgCfgExtPort').value = res.data.ext_port || 25;
+                document.getElementById('pmgCfgIntPort').value = res.data.int_port || 26;
+                document.getElementById('pmgCfgTls').value = res.data.tls || 0;
+                document.getElementById('pmgCfgTlsLog').value = res.data.tlslog || 0;
+            }
+        } catch(e) {}
+    }
+    window.savePmgConfig = async function() {
+        const btn = event.target; const oTxt = btn.innerText; btn.innerText = 'Speichere...';
+        const fd = new FormData(); fd.append('node_id', document.getElementById('pmgNodeId').value); fd.append('relay', document.getElementById('pmgCfgRelay').value); fd.append('ext_port', document.getElementById('pmgCfgExtPort').value); fd.append('int_port', document.getElementById('pmgCfgIntPort').value); fd.append('tls', document.getElementById('pmgCfgTls').value); fd.append('tlslog', document.getElementById('pmgCfgTlsLog').value);
+        try { const res = await (await fetch('api.php?action=pmg_set_config', {method: 'POST', body: fd})).json(); if(res.success) { alert('Proxy Einstellungen gespeichert!'); } else { alert('Fehler beim Speichern.'); } } catch(e) { alert('Netzwerkfehler.'); } finally { btn.innerText = oTxt; }
+    }
+
+    window.loadPmgDomains = async function(nodeId) {
+        const container = document.getElementById('pmgDomainsContainer'); container.innerHTML = '<p class="text-gray-500 text-sm animate-pulse">Lade...</p>';
+        try {
+            const res = await (await fetch(`api.php?action=pmg_get_domains&node_id=${nodeId}`)).json();
+            if(res.success && res.data) {
+                if(res.data.length === 0) { container.innerHTML = '<p class="text-gray-500 text-sm">Keine Domains.</p>'; return; }
+                container.innerHTML = '';
+                res.data.forEach(d => { container.innerHTML += `<div class="flex justify-between items-center bg-darkbg p-2 border border-darkborder rounded mb-1"><span class="text-white text-sm font-bold">${d.domain}</span><button onclick="deletePmgDomain('${d.domain}')" class="text-red-500 hover:text-red-400 text-xs font-bold">Löschen</button></div>`; });
+            } else { container.innerHTML = '<p class="text-red-500 text-sm">Fehler.</p>'; }
+        } catch(e) {}
+    }
+    window.addPmgDomain = async function() {
+        const domain = document.getElementById('pmgNewDomain').value.trim(); if(!domain) return;
+        const fd = new FormData(); fd.append('node_id', document.getElementById('pmgNodeId').value); fd.append('domain', domain);
+        const res = await (await fetch('api.php?action=pmg_add_domain', {method: 'POST', body: fd})).json();
+        if(res.success) { document.getElementById('pmgNewDomain').value = ''; loadPmgDomains(document.getElementById('pmgNodeId').value); } else alert('Fehler.');
+    }
+    window.deletePmgDomain = async function(domain) {
+        if(!confirm(`Domain ${domain} löschen?`)) return;
+        const fd = new FormData(); fd.append('node_id', document.getElementById('pmgNodeId').value); fd.append('domain', domain);
+        const res = await (await fetch('api.php?action=pmg_delete_domain', {method: 'POST', body: fd})).json();
+        if(res.success) loadPmgDomains(document.getElementById('pmgNodeId').value); else alert('Fehler.');
+    }
+
+    window.loadPmgNetworks = async function(nodeId) {
+        const container = document.getElementById('pmgNetworksContainer'); container.innerHTML = '<p class="text-gray-500 text-sm animate-pulse">Lade...</p>';
+        try {
+            const res = await (await fetch(`api.php?action=pmg_get_networks&node_id=${nodeId}`)).json();
+            if(res.success && res.data) {
+                if(res.data.length === 0) { container.innerHTML = '<p class="text-gray-500 text-sm">Keine Netzwerke.</p>'; return; }
+                container.innerHTML = '';
+                res.data.forEach(n => { container.innerHTML += `<div class="flex justify-between items-center bg-darkbg p-2 border border-darkborder rounded mb-1"><span class="text-white text-sm font-bold">${n.cidr}</span><button onclick="deletePmgNetwork('${n.cidr}')" class="text-red-500 hover:text-red-400 text-xs font-bold">Löschen</button></div>`; });
+            } else { container.innerHTML = '<p class="text-red-500 text-sm">Fehler.</p>'; }
+        } catch(e) {}
+    }
+    window.addPmgNetwork = async function() {
+        const cidr = document.getElementById('pmgNewNetwork').value.trim(); if(!cidr) return;
+        const fd = new FormData(); fd.append('node_id', document.getElementById('pmgNodeId').value); fd.append('cidr', cidr);
+        const res = await (await fetch('api.php?action=pmg_add_network', {method: 'POST', body: fd})).json();
+        if(res.success) { document.getElementById('pmgNewNetwork').value = ''; loadPmgNetworks(document.getElementById('pmgNodeId').value); } else alert('Fehler.');
+    }
+    window.deletePmgNetwork = async function(cidr) {
+        if(!confirm(`Netzwerk ${cidr} löschen?`)) return;
+        const fd = new FormData(); fd.append('node_id', document.getElementById('pmgNodeId').value); fd.append('cidr', cidr);
+        const res = await (await fetch('api.php?action=pmg_delete_network', {method: 'POST', body: fd})).json();
+        if(res.success) loadPmgNetworks(document.getElementById('pmgNodeId').value); else alert('Fehler.');
+    }
+
+    window.loadPmgSsl = async function(nodeId) {
+        const internalName = document.getElementById('pmgInternalName').value; const container = document.getElementById('pmgSslContainer'); container.innerHTML = '<p class="text-gray-500 animate-pulse text-sm">Lade Zertifikate...</p>';
+        try {
+            const res = await (await fetch(`api.php?action=pmg_get_ssl&node_id=${nodeId}&internal_name=${internalName}`)).json();
+            if(res.success && res.data) {
+                container.innerHTML = '';
+                res.data.forEach(cert => {
+                    const validUntil = cert.notafter ? formatDate(cert.notafter) : 'Unbekannt'; const isExpired = cert.notafter && cert.notafter < (Date.now() / 1000); const statusDot = isExpired ? '<span class="w-2 h-2 rounded-full bg-red-500 shrink-0"></span>' : '<span class="w-2 h-2 rounded-full bg-green-500 shrink-0"></span>';
+                    container.innerHTML += `<div class="bg-darkbg border border-darkborder rounded p-3 text-sm flex gap-3"><div class="mt-1">${statusDot}</div><div class="flex-1 overflow-hidden"><h4 class="text-white font-bold mb-1 break-all">${cert.filename || cert.subject || 'Zertifikat'}</h4><p class="text-gray-400 text-xs mb-1"><span class="font-bold text-gray-500">Aussteller:</span> ${cert.issuer || '-'}</p><p class="text-gray-400 text-xs truncate" title="${cert.subject}"><span class="font-bold text-gray-500">Subject:</span> ${cert.subject || '-'}</p><div class="mt-2 text-xs font-bold ${isExpired ? 'text-red-400' : 'text-emerald-400'} bg-darkcard inline-block px-2 py-1 rounded border border-darkborder">Ablaufdatum: ${validUntil}</div></div></div>`;
+                });
+            } else { container.innerHTML = '<p class="text-red-500 text-sm">Fehler beim Laden.</p>'; }
+        } catch(e) { container.innerHTML = '<p class="text-red-500 text-sm">Netzwerkfehler.</p>'; }
+    }
+    window.uploadPmgSsl = async function() {
+        const cert = document.getElementById('pmgSslCert').value.trim(); const key = document.getElementById('pmgSslKey').value.trim();
+        if(!cert || !key) return alert('Bitte Key und Zertifikat (PEM) einfügen!');
+        const btn = event.target; const oTxt = btn.innerText; btn.innerText = 'Lade hoch...';
+        const fd = new FormData(); fd.append('node_id', document.getElementById('pmgNodeId').value); fd.append('internal_name', document.getElementById('pmgInternalName').value); fd.append('certificate', cert); fd.append('private_key', key);
+        try { const res = await (await fetch('api.php?action=pmg_upload_ssl', {method: 'POST', body: fd})).json(); if(res.success) { alert('Zertifikat hochgeladen! Dienste werden neu gestartet.'); document.getElementById('pmgSslCert').value = ''; document.getElementById('pmgSslKey').value = ''; loadPmgSsl(document.getElementById('pmgNodeId').value); } else { alert('Fehler beim Upload. (Format prüfen)'); } } catch(e) { alert('Netzwerkfehler.'); } finally { btn.innerText = oTxt; }
+    }
+
+    // === SCHEDULER ===
+    const cronModal = document.getElementById('cronManagerModal');
+    window.openCronManager = async function() {
+        cronModal.classList.remove('hidden');
+        const select = document.getElementById('cronNodeId'); select.innerHTML = '<option value="">Lade Hosts...</option>';
+        try {
+            const res = await (await fetch('api.php?action=get_nodes')).json();
+            if (res.success) {
+                select.innerHTML = '<option value="">-- PVE Node auswählen --</option>';
+                res.data.filter(n => n.type === 'pve').forEach(node => { select.innerHTML += `<option value="${node.id}">${node.name} (${node.ip_address})</option>`; });
+            }
+        } catch(e) {}
+        loadCronJobs();
+    }
+    window.closeCronManager = function() { cronModal.classList.add('hidden'); }
+    
+    window.checkCronAction = function() { const action = document.getElementById('cronAction').value; const vmBlock = document.getElementById('cronVmBlock'); if (action.includes('_vm')) vmBlock.classList.remove('hidden'); else vmBlock.classList.add('hidden'); }
+
+    async function loadCronJobs() {
+        const tbody = document.getElementById('cronTableBody'); tbody.innerHTML = '<tr><td colspan="6" class="text-center text-gray-500 py-4 animate-pulse">Lade Jobs...</td></tr>';
+        try {
+            const res = await (await fetch('api.php?action=get_cron_jobs')).json();
+            if (res.success) {
+                tbody.innerHTML = '';
+                if(res.data.length === 0) { tbody.innerHTML = '<tr><td colspan="6" class="text-center text-gray-500 py-4">Keine geplanten Jobs.</td></tr>'; return; }
+                res.data.forEach(job => {
+                    const lastRun = formatDate(job.last_run); const isActive = parseInt(job.is_active) === 1;
+                    const statusDot = isActive ? '<span class="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_5px_#22c55e]"></span> Aktiv' : '<span class="w-2 h-2 rounded-full bg-gray-600"></span> Pausiert';
+                    const targetStr = job.action_type.includes('_vm') ? `VM ${job.target_vmid}` : 'Gesamter Host';
+                    let actionStr = job.action_type;
+                    if(actionStr === 'reboot_node') actionStr = 'Host Reboot'; if(actionStr === 'start_vm') actionStr = 'VM Start'; if(actionStr === 'stop_vm') actionStr = 'VM Stop'; if(actionStr === 'reboot_vm') actionStr = 'VM Reboot';
+                    tbody.innerHTML += `<tr class="hover:bg-darkcard/50 transition-colors border-b border-darkborder/50"><td class="px-4 py-3 whitespace-nowrap cursor-pointer" onclick="toggleCronJob(${job.id}, ${isActive ? 0 : 1})"><div class="flex items-center gap-2 text-xs font-bold text-gray-300 hover:text-white">${statusDot}</div></td><td class="px-4 py-3"><p class="text-white font-bold">${job.name}</p><p class="text-xs text-proxmox font-bold">${actionStr}</p></td><td class="px-4 py-3"><p class="text-gray-300">${job.node_name}</p><p class="text-xs text-gray-500">Ziel: ${targetStr}</p></td><td class="px-4 py-3 font-mono text-blue-400 font-bold tracking-widest">${job.cron_schedule}</td><td class="px-4 py-3 text-gray-400 whitespace-nowrap">${lastRun}</td><td class="px-4 py-3 text-right"><button onclick="deleteCronJob(${job.id})" class="text-red-500 hover:text-white px-2 py-1 bg-red-500/10 hover:bg-red-500 rounded text-xs font-bold transition-colors">Löschen</button></td></tr>`;
+                });
+            }
+        } catch(e) {}
+    }
+
+    const addCronForm = document.getElementById('addCronJobForm');
+    if(addCronForm) {
+        addCronForm.addEventListener('submit', async function(e) {
+            e.preventDefault(); const btn = this.querySelector('button[type="submit"]'); const oTxt = btn.innerText; btn.innerText = 'Speichere...';
+            const fd = new FormData(); fd.append('name', document.getElementById('cronName').value); fd.append('node_id', document.getElementById('cronNodeId').value); fd.append('action_type', document.getElementById('cronAction').value); fd.append('target_vmid', document.getElementById('cronTargetVmid').value); fd.append('cron_schedule', document.getElementById('cronSchedule').value);
+            try { const res = await (await fetch('api.php?action=add_cron_job', {method: 'POST', body: fd})).json(); if(res.success) { addCronForm.reset(); document.getElementById('cronSchedule').value = '0 3 * * *'; checkCronAction(); loadCronJobs(); } else alert('Fehler.'); } catch(e) {} finally { btn.innerText = oTxt; }
+        });
+    }
+
+    window.toggleCronJob = async function(id, newState) { const fd = new FormData(); fd.append('id', id); fd.append('is_active', newState); await fetch('api.php?action=toggle_cron_job', {method: 'POST', body: fd}); loadCronJobs(); }
+    window.deleteCronJob = async function(id) { if(!confirm('Diesen geplanten Job wirklich löschen?')) return; const fd = new FormData(); fd.append('id', id); await fetch('api.php?action=delete_cron_job', {method: 'POST', body: fd}); loadCronJobs(); }
+
+    // === NEU: AUDIT LOG ===
+    const auditModal = document.getElementById('auditLogModal');
+    window.openAuditLog = async function() {
+        auditModal.classList.remove('hidden');
+        const tbody = document.getElementById('auditLogTableBody');
+        tbody.innerHTML = '<tr><td colspan="4" class="text-center text-gray-500 py-4 animate-pulse">Lade Protokoll...</td></tr>';
+        try {
+            const res = await (await fetch('api.php?action=get_audit_logs')).json();
+            if (res.success) {
+                tbody.innerHTML = '';
+                if(res.data.length === 0) { tbody.innerHTML = '<tr><td colspan="4" class="text-center text-gray-500 py-4">Noch keine Einträge.</td></tr>'; return; }
+                res.data.forEach(log => {
+                    // Konvertiere SQLite DATETIME in lokales deutsches Format
+                    const d = new Date(log.timestamp + 'Z'); 
+                    const timeStr = d.toLocaleDateString('de-DE') + ' ' + d.toLocaleTimeString('de-DE');
+                    const isSystem = log.username === 'System';
+                    
+                    tbody.innerHTML += `
+                        <tr class="hover:bg-darkcard/50 transition-colors border-b border-darkborder/50">
+                            <td class="px-4 py-3 text-gray-400 whitespace-nowrap text-xs">${timeStr}</td>
+                            <td class="px-4 py-3"><span class="${isSystem ? 'text-gray-500' : 'text-blue-400 font-bold'}">${log.username}</span></td>
+                            <td class="px-4 py-3 font-bold text-white">${log.action}</td>
+                            <td class="px-4 py-3 text-gray-300 text-xs">${log.target || '-'}</td>
+                        </tr>`;
+                });
+            }
+        } catch(e) { tbody.innerHTML = '<tr><td colspan="4" class="text-center text-red-500 py-4">Fehler beim Laden.</td></tr>'; }
+    }
+    window.closeAuditLog = function() { auditModal.classList.add('hidden'); }
+}
@@ -0,0 +1,100 @@
+<?php
+// /home/docker/pve_dashboard/src/cron.php
+require_once __DIR__ . '/db.php';
+
+// Hilfsfunktion: Prüft, ob ein Cron-Ausdruck (z.B. "0 3 * * *") zur aktuellen Zeit passt
+function isCronMatch($cron, $time = null) {
+    if ($time === null) $time = time();
+    $cronParts = explode(' ', trim($cron));
+    if (count($cronParts) !== 5) return false;
+    
+    list($min, $hour, $day, $month, $weekday) = $cronParts;
+    
+    return matchCronPart($min, date('i', $time)) &&
+           matchCronPart($hour, date('H', $time)) &&
+           matchCronPart($day, date('d', $time)) &&
+           matchCronPart($month, date('m', $time)) &&
+           matchCronPart($weekday, date('w', $time));
+}
+
+function matchCronPart($part, $current) {
+    if ($part === '*') return true;
+    if ($part === (string)(int)$current) return true;
+    if (strpos($part, '*/') === 0) { // Unterstützt z.B. */5 für "alle 5 Minuten"
+        $step = (int)substr($part, 2);
+        return $step > 0 && ((int)$current % $step) === 0;
+    }
+    return false;
+}
+
+// Mini-Proxmox-Fetcher für das Cron-Skript
+function cronProxmoxData($ip, $tokenId, $tokenSecret, $endpoint, $method = "POST", $postData = null) {
+    $headers = ["Authorization: PVEAPIToken={$tokenId}={$tokenSecret}"];
+    $ch = curl_init("https://{$ip}:8006{$endpoint}");
+    $options = [
+        CURLOPT_RETURNTRANSFER => true, CURLOPT_SSL_VERIFYPEER => false, 
+        CURLOPT_SSL_VERIFYHOST => false, CURLOPT_TIMEOUT => 15, 
+        CURLOPT_HTTPHEADER => $headers, CURLOPT_CUSTOMREQUEST => $method
+    ];
+    if ($postData) $options[CURLOPT_POSTFIELDS] = http_build_query($postData);
+    curl_setopt_array($ch, $options);
+    $res = curl_exec($ch); curl_close($ch); 
+    return json_decode($res, true);
+}
+
+echo "[" . date('Y-m-d H:i:s') . "] Starte Scheduler-Check...\n";
+
+// Hole alle aktiven Tasks
+$stmt = $pdo->query("SELECT * FROM scheduled_tasks WHERE is_active = 1");
+$tasks = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+foreach ($tasks as $task) {
+    if (isCronMatch($task['cron_schedule'])) {
+        echo "-> Führe Task ID {$task['id']} ('{$task['name']}') aus...\n";
+        
+        $nStmt = $pdo->prepare("SELECT * FROM nodes WHERE id = ?");
+        $nStmt->execute([$task['node_id']]);
+        $node = $nStmt->fetch(PDO::FETCH_ASSOC);
+        
+        if ($node) {
+            $success = false;
+            
+            // AKTION: PVE NODE NEUSTART
+            if ($task['action_type'] === 'reboot_node') {
+                $nData = cronProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes", 'GET');
+                if (isset($nData['data'][0]['node'])) {
+                    $nName = $nData['data'][0]['node'];
+                    cronProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$nName}/status", 'POST', ['command' => 'reboot']);
+                    $success = true;
+                }
+            } 
+            // AKTION: VM START / STOP / REBOOT
+            elseif (in_array($task['action_type'], ['start_vm', 'stop_vm', 'reboot_vm'])) {
+                // Suche Host und Typ der VM
+                $vmsRes = cronProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/cluster/resources?type=vm", 'GET');
+                if (isset($vmsRes['data'])) {
+                    foreach ($vmsRes['data'] as $vm) {
+                        if ((string)$vm['vmid'] === (string)$task['target_vmid']) {
+                            $cmd = str_replace('_vm', '', $task['action_type']);
+                            $type = $vm['type'] === 'lxc' ? 'lxc' : 'qemu';
+                            cronProxmoxData($node['ip_address'], $node['token_id'], $node['token_secret'], "/api2/json/nodes/{$vm['node']}/{$type}/{$vm['vmid']}/status/{$cmd}", 'POST');
+                            $success = true;
+                            break;
+                        }
+                    }
+                }
+            }
+            
+            // Setze den Zeitstempel für den letzten Durchlauf
+            if ($success) {
+                $uStmt = $pdo->prepare("UPDATE scheduled_tasks SET last_run = ? WHERE id = ?");
+                $uStmt->execute([time(), $task['id']]);
+                echo "   Erfolgreich an API gesendet.\n";
+            } else {
+                echo "   Fehler beim Ausführen!\n";
+            }
+        }
+    }
+}
+echo "[" . date('Y-m-d H:i:s') . "] Scheduler-Check beendet.\n";
+?>
@@ -0,0 +1,41 @@
+<?php
+session_start();
+try {
+    // Hier ist der Fix: Der Pfad zeigt wieder auf das ausgelagerte /data Verzeichnis!
+    $pdo = new PDO('sqlite:' . __DIR__ . '/../data/dashboard.sqlite');
+    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+    $pdo->exec("CREATE TABLE IF NOT EXISTS users (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        username TEXT NOT NULL UNIQUE,
+        password_hash TEXT NOT NULL,
+        role TEXT DEFAULT 'viewer',
+        permissions TEXT DEFAULT '{}',
+        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )");
+
+    $pdo->exec("CREATE TABLE IF NOT EXISTS nodes (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        name TEXT NOT NULL,
+        ip_address TEXT NOT NULL,
+        token_id TEXT NOT NULL,
+        token_secret TEXT NOT NULL,
+        type TEXT DEFAULT 'pve'
+    )");
+
+    // Automatisches Datenbank-Upgrade für den PBS! (Fügt Spalte 'type' hinzu, falls sie fehlt)
+    try {
+        $pdo->exec("ALTER TABLE nodes ADD COLUMN type TEXT DEFAULT 'pve'");
+    } catch (PDOException $e) {
+        // Ignorieren, wenn die Spalte bereits existiert
+    }
+
+    $stmt = $pdo->query("SELECT COUNT(*) FROM users");
+    if ($stmt->fetchColumn() == 0) {
+        $hash = password_hash('admin', PASSWORD_DEFAULT);
+        $pdo->exec("INSERT INTO users (username, password_hash, role) VALUES ('admin', '$hash', 'admin')");
+    }
+} catch (PDOException $e) {
+    die("Datenbank-Fehler: " . $e->getMessage());
+}
+?>
@@ -0,0 +1,130 @@
+<?php
+require_once 'db.php';
+$isLoggedIn = isset($_SESSION['user_id']);
+$stmt = $pdo->query("SELECT COUNT(*) FROM nodes");
+$nodeCount = $stmt->fetchColumn();
+?>
+<!DOCTYPE html>
+<html lang="de" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Proxmox Unified Console</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        tailwind.config = { darkMode: 'class', theme: { extend: { colors: { proxmox: '#E57000', darkbg: '#1a1a24', darkcard: '#232333', darkborder: '#33334d', pbs: '#8b5cf6', pmg: '#3b82f6' } } } }
+    </script>
+    <style>
+        body { background-color: #1a1a24; color: #e2e8f0; }
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #1a1a24; }
+        ::-webkit-scrollbar-thumb { background: #33334d; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #E57000; }
+        .tab-active { background-color: rgba(255,255,255,0.05); color: white; border-left: 3px solid #E57000; padding-left: 0.5rem; }
+        .tab-active-pbs { background-color: rgba(139,92,246,0.1); color: white; border-left: 3px solid #8b5cf6; padding-left: 0.5rem; }
+        .tab-active-pmg { background-color: rgba(59,130,246,0.1); color: white; border-left: 3px solid #3b82f6; padding-left: 0.5rem; }
+    </style>
+</head>
+<body class="antialiased min-h-screen flex flex-col">
+
+    <header class="bg-darkcard border-b border-darkborder p-4 shadow-md">
+        <div class="max-w-[1600px] w-full mx-auto flex justify-between items-center">
+            <div class="flex items-center gap-3">
+                <div class="w-8 h-8 rounded bg-gradient-to-br from-proxmox to-orange-500 flex items-center justify-center font-bold text-white shadow-lg">PX</div>
+                <h1 class="text-xl font-bold text-white tracking-wide">Proxmox Unified Console</h1>
+            </div>
+            <?php if ($isLoggedIn): ?>
+                <div class="flex items-center gap-4 text-sm">
+                    <span class="text-gray-400">Hallo, <span class="text-white font-bold"><?= htmlspecialchars($_SESSION['username']) ?></span></span>
+                    <button onclick="logout()" class="text-red-400 hover:text-red-300 font-medium transition-colors">Abmelden</button>
+                </div>
+            <?php else: ?>
+                <div class="text-sm text-gray-400">System Status: <span class="text-green-500 font-bold">Sicher</span></div>
+            <?php endif; ?>
+        </div>
+    </header>
+
+    <main class="flex-grow p-6 flex items-center justify-center max-w-[1600px] w-full mx-auto">
+        <?php if (!$isLoggedIn): ?>
+            <div class="bg-darkcard border border-darkborder rounded-xl shadow-2xl p-8 max-w-sm w-full"><div class="flex justify-center mb-6"><div class="w-12 h-12 rounded bg-proxmox/10 flex items-center justify-center text-proxmox shadow-lg"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg></div></div><h2 class="text-2xl font-bold mb-2 text-center text-white">Login</h2><form id="loginForm" class="space-y-4"><div><label class="block text-sm font-medium text-gray-400 mb-1">Benutzername</label><input type="text" id="loginUser" class="w-full bg-darkbg border border-darkborder rounded p-2.5 text-white focus:outline-none focus:border-proxmox" required></div><div><label class="block text-sm font-medium text-gray-400 mb-1">Passwort</label><input type="password" id="loginPass" class="w-full bg-darkbg border border-darkborder rounded p-2.5 text-white focus:outline-none focus:border-proxmox" required></div><button type="submit" class="w-full bg-proxmox hover:bg-orange-600 text-white font-bold py-3 px-4 rounded-lg transition-colors mt-4 shadow-lg shadow-orange-900/50">Einloggen</button></form></div>
+        <?php elseif ($nodeCount == 0): ?>
+            <div class="bg-darkcard border border-darkborder rounded-xl shadow-2xl p-8 max-w-md w-full"><h2 class="text-2xl font-bold mb-2 text-white">Willkommen! 👋</h2><p class="text-gray-400 text-sm mb-6">Verbinde deinen ersten Host, um zu starten.</p><form id="setupForm" class="space-y-4"><div><label class="block text-sm font-medium text-gray-400 mb-1">Anzeigename</label><input type="text" id="nodeName" class="w-full bg-darkbg border border-darkborder rounded p-2.5 text-white focus:outline-none focus:border-proxmox" required></div><div><label class="block text-sm font-medium text-gray-400 mb-1">IP-Adresse</label><input type="text" id="nodeIp" class="w-full bg-darkbg border border-darkborder rounded p-2.5 text-white focus:outline-none focus:border-proxmox" required></div><div><label class="block text-sm font-medium text-gray-400 mb-1">Benutzername</label><input type="text" id="nodeUser" value="root@pam" class="w-full bg-darkbg border border-darkborder rounded p-2.5 text-white focus:outline-none focus:border-proxmox" required></div><div><label class="block text-sm font-medium text-gray-400 mb-1">Passwort</label><input type="password" id="nodePass" class="w-full bg-darkbg border border-darkborder rounded p-2.5 text-white focus:outline-none focus:border-proxmox" required></div><button type="submit" class="w-full bg-proxmox hover:bg-orange-600 text-white font-bold py-3 px-4 rounded-lg transition-colors mt-6 shadow-lg shadow-orange-900/50">Node verbinden</button></form></div>
+        <?php else: ?>
+            <div class="w-full h-[85vh] flex bg-darkbg overflow-hidden rounded-xl border border-darkborder shadow-2xl">
+                <!-- SIDEBAR -->
+                <aside class="w-64 bg-darkcard border-r border-darkborder flex flex-col">
+                    <div class="p-4 border-b border-darkborder"><span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Dashboards</span></div>
+                    <nav class="flex-1 overflow-y-auto p-4 space-y-2">
+                        <a href="#" id="nav-tab-pve" onclick="switchTab('pve')" class="tab-active flex items-center gap-3 text-gray-400 hover:text-white px-3 py-2 rounded-r-lg transition-colors"><svg class="w-5 h-5 text-proxmox" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg> PVE Cluster</a>
+                        <a href="#" id="nav-tab-pbs" onclick="switchTab('pbs')" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-white/5 px-3 py-2 rounded-r-lg transition-colors"><svg class="w-5 h-5 text-pbs" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path></svg> Backup Server (PBS)</a>
+                        <a href="#" id="nav-tab-pmg" onclick="switchTab('pmg')" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-white/5 px-3 py-2 rounded-r-lg transition-colors"><svg class="w-5 h-5 text-pmg" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg> Mail Gateway (PMG)</a>
+
+                        <div class="pt-4 mt-4 border-t border-darkborder space-y-2">
+                            <a href="#" onclick="openNodeTopology()" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-white/5 px-3 py-2 rounded-lg transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg> Cluster Topologie</a>
+                            <a href="#" onclick="openVmManager()" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-white/5 px-3 py-2 rounded-lg transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path></svg> VMs verwalten</a>
+                            <a href="#" onclick="openNodeManager()" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-white/5 px-3 py-2 rounded-lg transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> Server & API</a>
+                            
+                            <?php if(($_SESSION['role'] ?? '') === 'admin'): ?>
+                            <a href="#" onclick="openCronManager()" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-white/5 px-3 py-2 rounded-lg transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3"></path></svg> Task Scheduler</a>
+                            <a href="#" onclick="openUserManager()" class="flex items-center gap-3 text-gray-400 hover:text-white hover:bg-white/5 px-3 py-2 rounded-lg transition-colors"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg> Benutzerverwaltung</a>
+                            <?php endif; ?>
+                        </div>
+                    </nav>
+                </aside>
+
+                <div class="flex-1 flex flex-col overflow-hidden relative">
+                    <main class="absolute inset-0 overflow-x-hidden overflow-y-auto bg-darkbg p-6 flex gap-6 w-full">
+                        
+                        <!-- TAB 1: PVE -->
+                        <div id="tab-pve" class="flex-1 flex flex-col min-w-0 transition-opacity duration-300">
+                            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
+                                <div class="bg-darkcard border border-darkborder rounded-xl p-5 shadow-lg"><div class="flex justify-between items-start mb-4"><div><p class="text-gray-400 text-sm font-medium">Cluster CPU Cores</p><h3 id="stat-cpu-text" class="text-2xl font-bold text-white mt-1">Lade...</h3></div><div class="p-2 bg-blue-500/10 rounded-lg"><svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg></div></div><div class="w-full bg-darkbg rounded-full h-2"><div id="stat-cpu-bar" class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div></div></div>
+                                <div class="bg-darkcard border border-darkborder rounded-xl p-5 shadow-lg"><div class="flex justify-between items-start mb-4"><div><p class="text-gray-400 text-sm font-medium">Globaler RAM</p><h3 id="stat-ram-text" class="text-2xl font-bold text-white mt-1">Lade...</h3></div><div class="p-2 bg-proxmox/10 rounded-lg"><svg class="w-6 h-6 text-proxmox" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg></div></div><div class="w-full bg-darkbg rounded-full h-2"><div id="stat-ram-bar" class="bg-proxmox h-2 rounded-full" style="width: 0%"></div></div></div>
+                                <div class="bg-darkcard border border-darkborder rounded-xl p-5 shadow-lg"><div class="flex justify-between items-start mb-4"><div><p class="text-gray-400 text-sm font-medium">Datacenter Storage</p><h3 id="stat-disk-text" class="text-2xl font-bold text-white mt-1">Lade...</h3></div><div class="p-2 bg-emerald-500/10 rounded-lg"><svg class="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg></div></div><div class="w-full bg-darkbg rounded-full h-2"><div id="stat-disk-bar" class="bg-emerald-500 h-2 rounded-full" style="width: 0%"></div></div></div>
+                                <div class="bg-darkcard border border-darkborder rounded-xl p-5 shadow-lg flex flex-col justify-center"><div class="flex justify-between items-start mb-1"><div><p class="text-gray-400 text-sm font-medium">System Updates (APT)</p><h3 id="stat-updates-text" class="text-2xl font-bold text-white mt-1">Lade...</h3></div><div class="p-2 bg-purple-500/10 rounded-lg"><svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg></div></div><div id="stat-updates-sub" class="text-xs text-gray-500 mt-1 truncate">Prüfe Updates...</div></div>
+                            </div>
+                            <div class="bg-darkcard border border-darkborder rounded-xl p-5 shadow-lg min-h-[300px] flex flex-col justify-center mb-6"><div class="flex justify-between items-center mb-4"><h3 class="text-white font-bold">Live Cluster Auslastung</h3><span class="text-xs text-gray-500 flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> Live Sync</span></div><div class="relative h-full w-full min-h-[220px]"><canvas id="liveChart"></canvas></div></div>
+                            <div class="bg-darkcard border border-darkborder rounded-xl p-5 shadow-lg"><h3 class="text-white font-bold mb-4">🔥 Top 5 Ressourcen-Fresser</h3><div id="top-vms-container" class="space-y-3"><p class="text-gray-400 text-sm">Lädt Live-Daten von Proxmox API...</p></div></div>
+                        </div>
+
+                        <!-- TAB 2: PBS -->
+                        <div id="tab-pbs" class="flex-1 flex flex-col min-w-0 hidden opacity-0 transition-opacity duration-300">
+                            <div class="mb-6 border-b border-darkborder pb-4"><h2 class="text-2xl font-bold text-white">Backup Datastores</h2><p class="text-sm text-gray-400">Live-Kapazitätsüberwachung deiner PBS Server.</p></div>
+                            <div id="pbs-datastores-container" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6"><div class="text-gray-500 animate-pulse">Lade PBS Daten...</div></div>
+                        </div>
+
+                        <!-- TAB 3: PMG -->
+                        <div id="tab-pmg" class="flex-1 flex flex-col min-w-0 hidden opacity-0 transition-opacity duration-300">
+                            <div class="mb-6 border-b border-darkborder pb-4"><h2 class="text-2xl font-bold text-white">Mail Gateway Status</h2><p class="text-sm text-gray-400">Live-Metriken deiner PMG Instanzen.</p></div>
+                            <div id="pmg-nodes-container" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6"><div class="text-gray-500 animate-pulse">Lade PMG Daten...</div></div>
+                        </div>
+
+                        <!-- RECHTS: JOBS -->
+                        <div class="w-80 shrink-0 flex flex-col"><div class="bg-darkcard border border-darkborder rounded-xl p-5 shadow-lg flex-1 overflow-y-auto"><h3 class="text-white font-bold mb-4 sticky top-0 bg-darkcard pb-2 border-b border-darkborder">Letzte Jobs</h3><div id="recent-jobs-container" class="space-y-3"><p class="text-gray-400 text-sm">Lädt Job-Historie...</p></div></div></div>
+                    </main>
+                </div>
+            </div>
+            <?php include 'modals.php'; ?>
+        <?php endif; ?>
+    </main>
+
+    <!-- FOOTER MIT TESSMANN.DEV -->
+    <footer class="bg-darkcard border-t border-darkborder py-4 mt-auto z-10 w-full">
+        <div class="max-w-[1600px] w-full mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-2 text-xs text-gray-500">
+            <div>
+                Proxmox Unified Console (PUC) &copy; <?= date('Y') ?> — Ein Open-Source Projekt.
+            </div>
+            <div>
+                Weitere private Projekte und Infos zur PUC findest du auf 
+                <a href="https://tessmann.dev" target="_blank" rel="noopener noreferrer" class="text-proxmox hover:text-orange-400 font-bold transition-colors">
+                    tessmann.dev
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <script> window.APP = { isLoggedIn: <?= $isLoggedIn ? 'true' : 'false' ?>, nodeCount: <?= $nodeCount ?>, username: '<?= htmlspecialchars($_SESSION['username'] ?? '') ?>' }; </script>
+    <script src="app.js"></script>
+</body>
+</html>