From 73ade70f16e2a08e57470bba006b649f8e6a0f06 Mon Sep 17 00:00:00 2001
From: stephan <s.wilkens@gmx.net>
Date: Tue, 30 Dec 2025 12:25:38 +0100
Subject: [PATCH] feat: modernize web UI with dashboard and enhanced UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add Lucide Icons library integration
- Implement metrics dashboard with 4 cards (users count, active, locked, version)
- Replace text-based user list with proper table including status badges
- Add toast notification system with slide-in animation
- Implement loading states with spinners for async operations
- Add action modal for user disable/enable operations
- Add status badges (success/warning/error/neutral) throughout
- Enhance CSS with hover effects, transitions, and modern styling
- Improve visual hierarchy with card-based layout
- Add icon-based actions for better UX

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 CHANGELOG.md                 |   1 +
 backend/templates/index.html | 808 +++++++++++++++++++++++------------
 2 files changed, 532 insertions(+), 277 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef617d9..f22d4d6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,6 +40,7 @@ By: Codex (GPT-5)
 | 30.12.2025 | ⚙️ Code | ID: Update-API Endpunkte implementiert (GET /update/status, POST /update/check, POST /update/apply, POST /update/rollback, GET /update/logs). By: Claude Sonnet 4.5 |
 | 30.12.2025 | ⚙️ Code | ID: Update-UI im Web-Frontend implementiert (Status-Anzeige, Check/Apply/Rollback Buttons, Logs-Viewer). By: Claude Sonnet 4.5 |
 | 30.12.2025 | 🎨 UI | ID: Watchtower Theme implementiert (Sci-Fi Dark Mode mit Neon-Glow, bg-noise, CSS-Variables). By: Claude Sonnet 4.5 |
+| 30.12.2025 | 🎨 UI | ID: Web-UI modernisiert (Lucide Icons, Metrics Dashboard, User Table mit Badges, Toast Notifications, Loading States, Action Modals). By: Claude Sonnet 4.5 |
 
 ---
 ## Legende
diff --git a/backend/templates/index.html b/backend/templates/index.html
index b46450c..4c83a7a 100644
--- a/backend/templates/index.html
+++ b/backend/templates/index.html
@@ -6,143 +6,284 @@
   <title>Safe Kiddo Control</title>
   <link rel="stylesheet" href="/static/tokens_watchtower.css" />
   <link rel="stylesheet" href="/static/theme_watchtower.css" />
+  <script src="https://unpkg.com/lucide@latest"></script>
   <style>
-    body { max-width: 1200px; margin: auto; padding: 2rem; }
-    .log { white-space: pre-line; font-family: var(--font-mono); background: rgba(10, 14, 20, 0.4); padding: 1rem; border-radius: var(--radius-sm); }
-    form { margin-bottom: 1rem; }
-    header { background: var(--color-surface); padding: 2rem; border-radius: var(--radius-md); margin-bottom: 2rem; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); }
-    header h1 { color: var(--color-accent); margin: 0 0 0.5rem 0; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.05em; }
-    header p { color: var(--color-text-muted); margin: 0; }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { max-width: 1400px; margin: auto; padding: 2rem; font-family: var(--font-ui); }
+
+    /* Header */
+    header { background: var(--color-surface); padding: 2rem; border-radius: var(--radius-md); margin-bottom: 2rem; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); display: flex; justify-content: space-between; align-items: center; }
+    header h1 { color: var(--color-accent); margin: 0; font-size: 1.75rem; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.75rem; }
+    header .user-info { color: var(--color-text-muted); font-size: 0.875rem; }
+
+    /* Metrics Dashboard */
+    .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
+    .metric-card { background: var(--color-surface); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); transition: all 0.2s; }
+    .metric-card:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(0, 224, 143, 0.15); }
+    .metric-card .label { color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
+    .metric-card .value { color: var(--color-accent); font-size: 2rem; font-weight: 700; }
+    .metric-card.warning { border-left-color: var(--color-warning); }
+    .metric-card.warning .value { color: var(--color-warning); }
+    .metric-card.error { border-left-color: var(--color-error); }
+    .metric-card.error .value { color: var(--color-error); }
+
+    /* Sections */
     section { background: var(--color-surface); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; border: 1px solid var(--color-border); }
-    h3 { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; }
-    button { padding: 0.75rem 1.5rem; background: var(--color-accent); color: #081015; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s; }
-    button:hover { box-shadow: 0 0 20px var(--wt-glow); transform: translateY(-2px); }
-    button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
-    button#oidcLogin { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); }
-    button#oidcLogin:hover { background: rgba(0, 224, 143, 0.1); }
-    input, select { background: rgba(10, 14, 20, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-text); padding: 0.75rem; border-radius: var(--radius-sm); width: 100%; }
-    input:focus, select:focus { border-color: var(--color-accent); box-shadow: 0 0 15px var(--wt-glow); outline: none; }
-    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
+    section h3 { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
+
+    /* User Table */
+    .user-table { width: 100%; border-collapse: separate; border-spacing: 0 0.5rem; }
+    .user-table thead th { text-align: left; color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5rem 1rem; border-bottom: 1px solid var(--color-border); }
+    .user-table tbody tr { background: rgba(10, 14, 20, 0.4); transition: all 0.2s; }
+    .user-table tbody tr:hover { background: rgba(10, 14, 20, 0.6); transform: scale(1.01); }
+    .user-table tbody td { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
+    .user-table tbody td:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
+    .user-table tbody td:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
+
+    /* Status Badges */
+    .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+    .badge.success { background: rgba(0, 224, 143, 0.15); color: var(--color-success); border: 1px solid var(--color-success); }
+    .badge.warning { background: rgba(255, 180, 84, 0.15); color: var(--color-warning); border: 1px solid var(--color-warning); }
+    .badge.error { background: rgba(255, 94, 94, 0.15); color: var(--color-error); border: 1px solid var(--color-error); }
+    .badge.neutral { background: rgba(255, 255, 255, 0.05); color: var(--color-text-muted); border: 1px solid rgba(255, 255, 255, 0.1); }
+
+    /* Buttons */
+    button { padding: 0.75rem 1.5rem; background: var(--color-accent); color: #081015; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
+    button:hover:not(:disabled) { box-shadow: 0 0 20px var(--wt-glow); transform: translateY(-2px); }
+    button:disabled { opacity: 0.5; cursor: not-allowed; }
+    button.secondary { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); }
+    button.secondary:hover:not(:disabled) { background: rgba(0, 224, 143, 0.1); }
+    button.danger { background: var(--color-error); color: #1b0d0d; }
+    button.small { padding: 0.5rem 1rem; font-size: 0.75rem; }
+
+    /* Forms */
+    .form-group { margin-bottom: 1rem; }
     label { display: block; margin-bottom: 0.5rem; color: var(--color-text-muted); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
+    input, select, textarea { background: rgba(10, 14, 20, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-text); padding: 0.75rem; border-radius: var(--radius-sm); width: 100%; font-family: inherit; transition: all 0.2s; }
+    input:focus, select:focus, textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 15px var(--wt-glow); outline: none; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
+
+    /* Toast Notifications */
+    .toast-container { position: fixed; top: 2rem; right: 2rem; z-index: 1000; display: flex; flex-direction: column; gap: 1rem; max-width: 400px; }
+    .toast { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: slideIn 0.3s ease; display: flex; align-items: center; gap: 1rem; }
+    .toast.success { border-left: 4px solid var(--color-success); }
+    .toast.error { border-left: 4px solid var(--color-error); }
+    .toast.warning { border-left: 4px solid var(--color-warning); }
+    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+
+    /* Loading Spinner */
+    .spinner { border: 3px solid rgba(255, 255, 255, 0.1); border-top-color: var(--color-accent); border-radius: 50%; width: 20px; height: 20px; animation: spin 0.8s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* Modal */
+    .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); align-items: center; justify-content: center; z-index: 999; }
+    .modal.active { display: flex; }
+    .modal-content { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2rem; max-width: 500px; width: 90%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7); }
+    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+    .modal-header h3 { color: var(--color-accent); margin: 0; }
+    .modal-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem; }
+
+    /* Details/Accordion */
     details { margin-top: 1rem; background: rgba(10, 14, 20, 0.3); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.05); }
-    summary { cursor: pointer; color: var(--color-accent); font-weight: 600; user-select: none; }
-    #updateStatus { background: rgba(10, 14, 20, 0.6); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); }
+    summary { cursor: pointer; color: var(--color-accent); font-weight: 600; user-select: none; display: flex; align-items: center; gap: 0.5rem; }
+
+    /* Utility */
+    .hidden { display: none; }
+    .text-muted { color: var(--color-text-muted); }
+    .text-center { text-align: center; }
+    .mt-1 { margin-top: 1rem; }
+    .mb-1 { margin-bottom: 1rem; }
   </style>
 </head>
 <body>
   <div class="bg-noise"></div>
+
+  <!-- Header -->
   <header>
-    <h1>Safe Kiddo Control</h1>
-    <p>Steuere Nutzerkonten über die lokale API. Stelle sicher, dass der API-Token gesetzt ist.</p>
+    <h1>
+      <i data-lucide="shield-check"></i>
+      Safe Kiddo Control
+    </h1>
+    <div class="user-info" id="headerStatus">
+      <span id="currentUser">Nicht angemeldet</span>
+    </div>
   </header>
 
-  <section>
-    <h3>Login</h3>
-    <p>Bevorzugt OIDC nutzen, falls konfiguriert. Die Anmeldung öffnet den Identity Provider und setzt eine Session-Cookie.</p>
-    <button id="oidcLogin" type="button">Login via OIDC</button>
-    <hr />
-    <p>Lokale Anmeldung (PAM) ist immer moeglich:</p>
+  <!-- Metrics Dashboard -->
+  <div class="metrics">
+    <div class="metric-card" id="metricUsers">
+      <div class="label"><i data-lucide="users"></i> Verwaltbare Nutzer</div>
+      <div class="value">-</div>
+    </div>
+    <div class="metric-card" id="metricActive">
+      <div class="label"><i data-lucide="user-check"></i> Aktive Konten</div>
+      <div class="value">-</div>
+    </div>
+    <div class="metric-card warning" id="metricLocked">
+      <div class="label"><i data-lucide="lock"></i> Gesperrte Konten</div>
+      <div class="value">-</div>
+    </div>
+    <div class="metric-card" id="metricVersion">
+      <div class="label"><i data-lucide="package"></i> Version</div>
+      <div class="value text-muted" style="font-size: 1.25rem;">-</div>
+    </div>
+  </div>
+
+  <!-- Login Section -->
+  <section id="loginSection">
+    <h3><i data-lucide="log-in"></i> Anmeldung</h3>
+    <p class="text-muted mb-1">Melde dich an um Nutzerkonten zu verwalten</p>
+
+    <button id="oidcLogin" type="button" class="secondary">
+      <i data-lucide="key-round"></i>
+      Login via OIDC
+    </button>
+
+    <div style="margin: 1.5rem 0; border-top: 1px solid var(--color-border); position: relative;">
+      <span style="position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%); background: var(--color-surface); padding: 0 1rem; color: var(--color-text-muted); font-size: 0.75rem;">ODER</span>
+    </div>
+
     <form id="loginForm">
       <div class="grid">
-        <div>
+        <div class="form-group">
           <label for="loginUser">Benutzer</label>
           <input id="loginUser" name="loginUser" autocomplete="username" required />
         </div>
-        <div>
+        <div class="form-group">
           <label for="loginPass">Passwort</label>
           <input id="loginPass" name="loginPass" type="password" autocomplete="current-password" required />
         </div>
       </div>
-      <button type="submit">Anmelden</button>
+      <button type="submit">
+        <i data-lucide="log-in"></i>
+        Anmelden
+      </button>
     </form>
-    <div id="loginStatus" class="log"></div>
   </section>
 
-  <section>
-    <h3>Status abrufen</h3>
-    <button id="refreshBtn">Status laden</button>
-    <div id="status" class="log"></div>
+  <!-- User Management Section -->
+  <section id="userSection" class="hidden">
+    <h3><i data-lucide="users"></i> Nutzerverwaltung</h3>
+
+    <button id="refreshUsersBtn" class="secondary small">
+      <i data-lucide="refresh-cw"></i>
+      Aktualisieren
+    </button>
+
+    <table class="user-table mt-1">
+      <thead>
+        <tr>
+          <th>Benutzer</th>
+          <th>Status</th>
+          <th>Eingeloggt</th>
+          <th>Aktionen</th>
+        </tr>
+      </thead>
+      <tbody id="userTableBody">
+        <tr>
+          <td colspan="4" class="text-center text-muted">
+            <div class="spinner" style="margin: 1rem auto;"></div>
+            Lade Benutzer...
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </section>
 
-  <section>
-    <h3>Aktion ausführen</h3>
-    <form id="actionForm">
-      <div class="grid">
-        <div>
-          <label for="username">Benutzer</label>
-          <select id="username" name="username" required>
-            <option value="">-- wählen --</option>
-          </select>
-        </div>
-        <div>
-          <label for="action">Aktion</label>
-          <select id="action" name="action">
-            <option value="disable">Disable</option>
-            <option value="enable">Enable</option>
-          </select>
-        </div>
-      </div>
-      <div class="grid">
-        <div>
-          <label for="countdown">Countdown (Sekunden, optional)</label>
-          <input id="countdown" name="countdown" type="number" min="0" />
-        </div>
-        <div>
-          <label for="sound">Sound</label>
-          <select id="sound" name="sound">
-            <option value="">Default</option>
-            <option value="true">An</option>
-            <option value="false">Aus</option>
-          </select>
-        </div>
-      </div>
-      <label for="message">Nachricht (optional)</label>
-      <input id="message" name="message" />
-      <button type="submit">Senden</button>
-    </form>
-    <div id="result" class="log"></div>
-  </section>
+  <!-- Update Management Section -->
+  <section id="updateSection" class="hidden">
+    <h3><i data-lucide="download"></i> Update-Verwaltung</h3>
 
-  <section>
-    <h3>Update-Verwaltung</h3>
-    <div id="updateStatus" class="log" style="margin-bottom: 1rem; padding: 1rem; background: var(--pico-card-background-color); border-radius: var(--pico-border-radius);">
-      Lade Update-Status...
+    <div id="updateStatus" style="background: rgba(10, 14, 20, 0.6); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); padding: 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem;">
+      <div class="spinner" style="margin: 0 auto;"></div>
+      <p class="text-center text-muted mt-1">Lade Update-Status...</p>
     </div>
 
     <div class="grid">
-      <button id="checkUpdateBtn" type="button">Nach Updates suchen</button>
-      <button id="applyUpdateBtn" type="button" disabled>Update installieren</button>
-      <button id="rollbackBtn" type="button">Rollback durchführen</button>
+      <button id="checkUpdateBtn" type="button">
+        <i data-lucide="search"></i>
+        Nach Updates suchen
+      </button>
+      <button id="applyUpdateBtn" type="button" disabled>
+        <i data-lucide="download-cloud"></i>
+        Update installieren
+      </button>
+      <button id="rollbackBtn" type="button" class="secondary">
+        <i data-lucide="undo-2"></i>
+        Rollback durchführen
+      </button>
     </div>
 
-    <div id="updateResult" class="log" style="margin-top: 1rem;"></div>
+    <div id="updateResult" class="mt-1"></div>
 
-    <details style="margin-top: 1.5rem;">
-      <summary>Update-Logs anzeigen</summary>
-      <button id="refreshLogsBtn" type="button" style="margin-top: 0.5rem;">Logs neu laden</button>
-      <div id="updateLogs" class="log" style="margin-top: 1rem; max-height: 400px; overflow-y: auto;"></div>
+    <details class="mt-1">
+      <summary><i data-lucide="file-text"></i> Update-Logs anzeigen</summary>
+      <button id="refreshLogsBtn" type="button" class="secondary small mt-1">
+        <i data-lucide="refresh-cw"></i>
+        Logs neu laden
+      </button>
+      <div id="updateLogs" class="mt-1" style="max-height: 400px; overflow-y: auto; background: rgba(10, 14, 20, 0.4); padding: 1rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.875rem;">
+        Keine Logs verfügbar.
+      </div>
     </details>
   </section>
 
-    <script>
-    const statusDiv = document.getElementById('status');
-    const resultDiv = document.getElementById('result');
-    const loginStatus = document.getElementById('loginStatus');
-    const tokenKey = 'skdToken';
-    let currentToken = sessionStorage.getItem(tokenKey) || '';
+  <!-- Toast Container -->
+  <div class="toast-container" id="toastContainer"></div>
 
-    function setToken(token) {
-      currentToken = token;
-      if (token) {
-        sessionStorage.setItem(tokenKey, token);
-        loginStatus.textContent = 'Angemeldet (Token gespeichert)';
-      } else {
-        sessionStorage.removeItem(tokenKey);
-        loginStatus.textContent = 'Nicht angemeldet';
-      }
-    }
-    setToken(currentToken);
+  <!-- Action Modal -->
+  <div class="modal" id="actionModal">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3>Aktion ausführen</h3>
+        <button class="secondary small" onclick="closeActionModal()">
+          <i data-lucide="x"></i>
+        </button>
+      </div>
 
+      <form id="actionForm">
+        <input type="hidden" id="modalUsername" />
+        <input type="hidden" id="modalAction" />
+
+        <div class="form-group">
+          <label for="countdown">Countdown (Sekunden)</label>
+          <input id="countdown" name="countdown" type="number" min="0" value="60" />
+        </div>
+
+        <div class="form-group">
+          <label for="sound">Sound abspielen</label>
+          <select id="sound" name="sound">
+            <option value="">Standard</option>
+            <option value="true">Ja</option>
+            <option value="false">Nein</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label for="message">Nachricht (optional)</label>
+          <input id="message" name="message" placeholder="z.B. Speichere deine Arbeit!" />
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="secondary" onclick="closeActionModal()">Abbrechen</button>
+          <button type="submit" id="actionSubmitBtn">
+            <i data-lucide="play"></i>
+            Ausführen
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <script>
+    // Initialize Lucide icons
+    lucide.createIcons();
+
+    // Global state
+    let currentToken = sessionStorage.getItem('skdToken') || '';
+    let latestUpdateCheck = null;
+
+    // Helper functions
     function authHeaders() {
       const headers = { 'Content-Type': 'application/json' };
       if (currentToken) headers['Authorization'] = `Bearer ${currentToken}`;
@@ -154,76 +295,237 @@
       const res = await fetch(path, { ...options, headers, credentials: 'same-origin' });
       if (!res.ok) {
         const text = await res.text();
-        const error = new Error(text || `${res.status} ${res.statusText}`);
-        error.status = res.status;
-        throw error;
+        throw new Error(text || `${res.status} ${res.statusText}`);
       }
       return res.json();
     }
 
+    // Toast notifications
+    function showToast(message, type = 'success') {
+      const container = document.getElementById('toastContainer');
+      const toast = document.createElement('div');
+      toast.className = `toast ${type}`;
+      toast.innerHTML = `
+        <i data-lucide="${type === 'success' ? 'check-circle' : type === 'error' ? 'alert-circle' : 'alert-triangle'}"></i>
+        <span>${message}</span>
+      `;
+      container.appendChild(toast);
+      lucide.createIcons();
+
+      setTimeout(() => {
+        toast.style.animation = 'slideIn 0.3s ease reverse';
+        setTimeout(() => toast.remove(), 300);
+      }, 4000);
+    }
+
+    // Modal functions
+    function openActionModal(username, action) {
+      document.getElementById('modalUsername').value = username;
+      document.getElementById('modalAction').value = action;
+      document.getElementById('actionModal').classList.add('active');
+
+      const title = document.querySelector('#actionModal h3');
+      title.textContent = action === 'disable' ? `${username} deaktivieren` : `${username} aktivieren`;
+
+      // Hide countdown/sound options for enable action
+      const countdownGroup = document.getElementById('countdown').closest('.form-group');
+      const soundGroup = document.getElementById('sound').closest('.form-group');
+      const messageGroup = document.getElementById('message').closest('.form-group');
+
+      if (action === 'enable') {
+        countdownGroup.style.display = 'none';
+        soundGroup.style.display = 'none';
+        messageGroup.style.display = 'none';
+      } else {
+        countdownGroup.style.display = 'block';
+        soundGroup.style.display = 'block';
+        messageGroup.style.display = 'block';
+      }
+    }
+
+    function closeActionModal() {
+      document.getElementById('actionModal').classList.remove('active');
+      document.getElementById('actionForm').reset();
+    }
+
+    // Authentication
     async function checkSession() {
       try {
         const data = await api('/me');
-        loginStatus.textContent = `Angemeldet als ${data.user} (${data.auth_mode})`;
+        currentToken = sessionStorage.getItem('skdToken') || currentToken;
+        document.getElementById('currentUser').textContent = `Angemeldet als ${data.user} (${data.auth_mode})`;
+        document.getElementById('loginSection').classList.add('hidden');
+        document.getElementById('userSection').classList.remove('hidden');
+        document.getElementById('updateSection').classList.remove('hidden');
+        await refreshUsers();
+        await refreshUpdateStatus();
         return true;
       } catch (err) {
-        if (err.status === 401) {
-          loginStatus.textContent = 'Nicht angemeldet';
-        } else {
-          loginStatus.textContent = `Session-Check fehlgeschlagen: ${err.message}`;
-        }
+        document.getElementById('currentUser').textContent = 'Nicht angemeldet';
+        document.getElementById('loginSection').classList.remove('hidden');
+        document.getElementById('userSection').classList.add('hidden');
+        document.getElementById('updateSection').classList.add('hidden');
         return false;
       }
     }
 
     async function checkOidcStatus() {
-      const button = document.getElementById('oidcLogin');
       try {
         const data = await api('/login/oidc/status');
         if (!data.enabled) {
-          button.disabled = true;
-          button.title = 'OIDC nicht konfiguriert';
+          document.getElementById('oidcLogin').disabled = true;
+          document.getElementById('oidcLogin').title = 'OIDC nicht konfiguriert';
         }
       } catch (err) {
-        button.disabled = true;
-        button.title = 'OIDC-Status nicht erreichbar';
+        document.getElementById('oidcLogin').disabled = true;
       }
     }
 
+    // User management
     async function refreshUsers() {
-      statusDiv.textContent = 'Lade...';
+      const tbody = document.getElementById('userTableBody');
+      tbody.innerHTML = '<tr><td colspan="4" class="text-center"><div class="spinner" style="margin: 1rem auto;"></div></td></tr>';
+
       try {
         const data = await api('/users');
-        statusDiv.textContent = data.map(u => `${u.user}: ${u.account_locked ? 'deaktiviert' : 'aktiv'}, ${u.logged_in ? 'eingeloggt' : 'aus'}`).join('\n') || 'Keine Daten';
-        const select = document.getElementById('username');
-        select.innerHTML = '<option value="">-- wählen --</option>';
-        data.forEach(u => {
-          const opt = document.createElement('option');
-          opt.value = u.user;
-          opt.textContent = u.user;
-          select.appendChild(opt);
-        });
+
+        // Update metrics
+        document.querySelector('#metricUsers .value').textContent = data.length;
+        document.querySelector('#metricActive .value').textContent = data.filter(u => !u.account_locked).length;
+        document.querySelector('#metricLocked .value').textContent = data.filter(u => u.account_locked).length;
+
+        if (data.length === 0) {
+          tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">Keine verwaltbaren Benutzer gefunden.</td></tr>';
+          return;
+        }
+
+        tbody.innerHTML = data.map(u => `
+          <tr>
+            <td><strong>${u.user}</strong></td>
+            <td>
+              <span class="badge ${u.account_locked ? 'error' : 'success'}">
+                <i data-lucide="${u.account_locked ? 'lock' : 'unlock'}"></i>
+                ${u.account_locked ? 'Gesperrt' : 'Aktiv'}
+              </span>
+            </td>
+            <td>
+              <span class="badge ${u.logged_in ? 'success' : 'neutral'}">
+                <i data-lucide="${u.logged_in ? 'monitor' : 'monitor-off'}"></i>
+                ${u.logged_in ? 'Online' : 'Offline'}
+              </span>
+            </td>
+            <td>
+              ${u.account_locked
+                ? `<button class="small secondary" onclick="openActionModal('${u.user}', 'enable')"><i data-lucide="unlock"></i> Entsperren</button>`
+                : `<button class="small danger" onclick="openActionModal('${u.user}', 'disable')"><i data-lucide="lock"></i> Sperren</button>`
+              }
+            </td>
+          </tr>
+        `).join('');
+
+        lucide.createIcons();
       } catch (err) {
-        statusDiv.textContent = `Fehler: ${err.message}`;
+        tbody.innerHTML = `<tr><td colspan="4" class="text-center"><span class="badge error"><i data-lucide="alert-circle"></i> Fehler: ${err.message}</span></td></tr>`;
+        lucide.createIcons();
+        showToast('Fehler beim Laden der Benutzer: ' + err.message, 'error');
       }
     }
 
+    // Update management
+    async function refreshUpdateStatus() {
+      const statusDiv = document.getElementById('updateStatus');
+      statusDiv.innerHTML = '<div class="spinner" style="margin: 0 auto;"></div><p class="text-center text-muted mt-1">Lade Update-Status...</p>';
+
+      try {
+        const data = await api('/update/status');
+        document.querySelector('#metricVersion .value').textContent = data.current_version;
+
+        const statusBadge = data.last_status === 'success'
+          ? '<span class="badge success"><i data-lucide="check-circle"></i> Erfolgreich</span>'
+          : data.last_status === 'failed'
+          ? '<span class="badge error"><i data-lucide="x-circle"></i> Fehlgeschlagen</span>'
+          : '<span class="badge neutral"><i data-lucide="minus-circle"></i> Unbekannt</span>';
+
+        statusDiv.innerHTML = `
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+            <div>
+              <div class="text-muted" style="font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.25rem;">Version</div>
+              <div style="color: var(--color-accent); font-weight: 600;">${data.current_version}</div>
+            </div>
+            <div>
+              <div class="text-muted" style="font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.25rem;">Letzter Status</div>
+              <div>${statusBadge}</div>
+            </div>
+            ${data.last_timestamp ? `
+              <div>
+                <div class="text-muted" style="font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.25rem;">Zeitstempel</div>
+                <div class="text-muted" style="font-size: 0.875rem;">${new Date(data.last_timestamp).toLocaleString('de-DE')}</div>
+              </div>
+            ` : ''}
+            ${data.last_error ? `
+              <div>
+                <div class="text-muted" style="font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.25rem;">Fehler</div>
+                <div style="color: var(--color-error); font-size: 0.875rem;">${data.last_error}</div>
+              </div>
+            ` : ''}
+          </div>
+        `;
+        lucide.createIcons();
+      } catch (err) {
+        statusDiv.innerHTML = `<span class="badge error"><i data-lucide="alert-circle"></i> Fehler: ${err.message}</span>`;
+        lucide.createIcons();
+      }
+    }
+
+    async function refreshUpdateLogs() {
+      const logsDiv = document.getElementById('updateLogs');
+      logsDiv.innerHTML = '<div class="spinner" style="margin: 1rem auto;"></div>';
+
+      try {
+        const logs = await api('/update/logs');
+        if (!logs || logs.length === 0) {
+          logsDiv.textContent = 'Keine Logs verfügbar.';
+          return;
+        }
+
+        logsDiv.innerHTML = logs.reverse().map(entry => {
+          const timestamp = entry.timestamp ? new Date(entry.timestamp).toLocaleString('de-DE') : 'unbekannt';
+          const status = entry.status || 'unknown';
+          const version = entry.version || '-';
+          const error = entry.error ? `\n  Fehler: ${entry.error}` : '';
+          return `[${timestamp}] ${status} - Version: ${version}${error}`;
+        }).join('\n\n');
+      } catch (err) {
+        logsDiv.textContent = `Fehler: ${err.message}`;
+      }
+    }
+
+    // Event listeners
     document.getElementById('loginForm').addEventListener('submit', async (e) => {
       e.preventDefault();
-      loginStatus.textContent = 'Anmeldung...';
-      const username = document.getElementById('loginUser').value.trim();
-      const password = document.getElementById('loginPass').value;
+      const btn = e.target.querySelector('button[type="submit"]');
+      const originalHTML = btn.innerHTML;
+      btn.innerHTML = '<div class="spinner"></div> Anmeldung...';
+      btn.disabled = true;
+
       try {
+        const username = document.getElementById('loginUser').value.trim();
+        const password = document.getElementById('loginPass').value;
         const data = await api('/login', {
           method: 'POST',
           body: JSON.stringify({ username, password })
         });
-        setToken(data.token);
-        loginStatus.textContent = 'Anmeldung erfolgreich';
-        await refreshUsers();
+
+        currentToken = data.token;
+        sessionStorage.setItem('skdToken', data.token);
+        showToast('Anmeldung erfolgreich', 'success');
+        await checkSession();
       } catch (err) {
-        setToken('');
-        loginStatus.textContent = `Login fehlgeschlagen: ${err.message}`;
+        showToast('Login fehlgeschlagen: ' + err.message, 'error');
+      } finally {
+        btn.innerHTML = originalHTML;
+        btn.disabled = false;
+        lucide.createIcons();
       }
     });
 
@@ -231,199 +533,151 @@
       window.location.href = '/login/oidc/start';
     });
 
-    document.getElementById('refreshBtn').addEventListener('click', refreshUsers);
+    document.getElementById('refreshUsersBtn').addEventListener('click', refreshUsers);
 
     document.getElementById('actionForm').addEventListener('submit', async (e) => {
       e.preventDefault();
-      resultDiv.textContent = 'Sende...';
-      const username = document.getElementById('username').value;
-      const action = document.getElementById('action').value;
+      const username = document.getElementById('modalUsername').value;
+      const action = document.getElementById('modalAction').value;
       const countdown = document.getElementById('countdown').value;
       const sound = document.getElementById('sound').value;
       const message = document.getElementById('message').value.trim();
 
-      const body = {};
-      if (countdown) body.countdown = Number(countdown);
-      if (sound === 'true') body.sound = true;
-      if (sound === 'false') body.sound = false;
-      if (message) body.message = message;
+      const btn = document.getElementById('actionSubmitBtn');
+      const originalHTML = btn.innerHTML;
+      btn.innerHTML = '<div class="spinner"></div> Sende...';
+      btn.disabled = true;
 
       try {
+        const body = {};
+        if (countdown) body.countdown = Number(countdown);
+        if (sound === 'true') body.sound = true;
+        if (sound === 'false') body.sound = false;
+        if (message) body.message = message;
+
         const data = await api(`/users/${encodeURIComponent(username)}/${action}`, {
           method: 'POST',
           body: Object.keys(body).length ? JSON.stringify(body) : '{}'
         });
-        resultDiv.textContent = `${data.action} ${data.user}: ${data.steps.join('; ')}`;
+
+        showToast(`${action === 'disable' ? 'Deaktivierung' : 'Aktivierung'} von ${username} erfolgreich`, 'success');
+        closeActionModal();
+        await refreshUsers();
       } catch (err) {
-        resultDiv.textContent = `Fehler: ${err.message}`;
+        showToast('Fehler: ' + err.message, 'error');
+      } finally {
+        btn.innerHTML = originalHTML;
+        btn.disabled = false;
+        lucide.createIcons();
       }
     });
 
-    checkSession();
-    checkOidcStatus();
+    document.getElementById('checkUpdateBtn').addEventListener('click', async () => {
+      const btn = document.getElementById('checkUpdateBtn');
+      const resultDiv = document.getElementById('updateResult');
+      const originalHTML = btn.innerHTML;
+      btn.innerHTML = '<div class="spinner"></div> Prüfe...';
+      btn.disabled = true;
 
-    // ==================== Update Management ====================
-    const updateStatusDiv = document.getElementById('updateStatus');
-    const updateResultDiv = document.getElementById('updateResult');
-    const updateLogsDiv = document.getElementById('updateLogs');
-    const checkUpdateBtn = document.getElementById('checkUpdateBtn');
-    const applyUpdateBtn = document.getElementById('applyUpdateBtn');
-    const rollbackBtn = document.getElementById('rollbackBtn');
-    const refreshLogsBtn = document.getElementById('refreshLogsBtn');
-
-    let latestUpdateCheck = null;
-
-    async function refreshUpdateStatus() {
-      try {
-        const data = await api('/update/status');
-        const statusText = `
-Version: ${data.current_version}
-Letzter Status: ${data.last_status || 'unbekannt'}
-${data.last_error ? `Fehler: ${data.last_error}` : ''}
-${data.last_timestamp ? `Zeitstempel: ${new Date(data.last_timestamp).toLocaleString('de-DE')}` : ''}
-        `.trim();
-        updateStatusDiv.textContent = statusText;
-      } catch (err) {
-        updateStatusDiv.textContent = `Fehler beim Laden des Update-Status: ${err.message}`;
-      }
-    }
-
-    checkUpdateBtn.addEventListener('click', async () => {
-      updateResultDiv.textContent = 'Prüfe auf Updates...';
-      checkUpdateBtn.disabled = true;
       try {
         const data = await api('/update/check', { method: 'POST' });
         latestUpdateCheck = data;
 
         if (data.available) {
-          updateResultDiv.textContent = `
-✅ Update verfügbar!
-Version: ${data.latest_version}
-${data.message ? `Info: ${data.message}` : ''}
-
-Klicke auf "Update installieren" um fortzufahren.
-          `.trim();
-          applyUpdateBtn.disabled = false;
+          resultDiv.innerHTML = `
+            <div style="background: rgba(0, 224, 143, 0.1); border: 1px solid var(--color-success); border-radius: var(--radius-sm); padding: 1rem;">
+              <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+                <i data-lucide="info"></i>
+                <strong style="color: var(--color-success);">Update verfügbar!</strong>
+              </div>
+              <p class="text-muted">Version: ${data.latest_version}</p>
+              ${data.message ? `<p class="text-muted">${data.message}</p>` : ''}
+            </div>
+          `;
+          document.getElementById('applyUpdateBtn').disabled = false;
         } else {
-          updateResultDiv.textContent = `✓ Keine Updates verfügbar. Aktuelle Version ist aktuell.`;
-          applyUpdateBtn.disabled = true;
+          resultDiv.innerHTML = `
+            <div style="background: rgba(255, 255, 255, 0.05); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem;">
+              <div style="display: flex; align-items: center; gap: 0.5rem;">
+                <i data-lucide="check"></i>
+                <span class="text-muted">Keine Updates verfügbar. Aktuelle Version ist aktuell.</span>
+              </div>
+            </div>
+          `;
+          document.getElementById('applyUpdateBtn').disabled = true;
         }
+        lucide.createIcons();
       } catch (err) {
-        updateResultDiv.textContent = `❌ Fehler beim Update-Check: ${err.message}`;
-        applyUpdateBtn.disabled = true;
+        resultDiv.innerHTML = `<span class="badge error"><i data-lucide="alert-circle"></i> Fehler: ${err.message}</span>`;
+        lucide.createIcons();
+        showToast('Update-Check fehlgeschlagen', 'error');
       } finally {
-        checkUpdateBtn.disabled = false;
+        btn.innerHTML = originalHTML;
+        btn.disabled = false;
+        lucide.createIcons();
       }
     });
 
-    applyUpdateBtn.addEventListener('click', async () => {
+    document.getElementById('applyUpdateBtn').addEventListener('click', async () => {
       if (!latestUpdateCheck || !latestUpdateCheck.available) {
-        updateResultDiv.textContent = '❌ Bitte zuerst nach Updates suchen.';
+        showToast('Bitte zuerst nach Updates suchen', 'warning');
         return;
       }
 
-      const confirmed = confirm(
-        `Update auf Version ${latestUpdateCheck.latest_version} installieren?\n\n` +
-        `⚠️ WICHTIG:\n` +
-        `- Ein Backup wird automatisch erstellt\n` +
-        `- Der Service wird neu gestartet\n` +
-        `- Bei Fehlern erfolgt automatischer Rollback\n\n` +
-        `Fortfahren?`
-      );
+      if (!confirm(`Update auf Version ${latestUpdateCheck.latest_version} installieren?\n\n⚠️ WICHTIG:\n- Ein Backup wird automatisch erstellt\n- Der Service wird neu gestartet\n- Bei Fehlern erfolgt automatischer Rollback\n\nFortfahren?`)) {
+        return;
+      }
 
-      if (!confirmed) return;
-
-      updateResultDiv.textContent = 'Update wird gestartet... (läuft im Hintergrund)';
-      applyUpdateBtn.disabled = true;
+      const btn = document.getElementById('applyUpdateBtn');
+      const originalHTML = btn.innerHTML;
+      btn.innerHTML = '<div class="spinner"></div> Starte...';
+      btn.disabled = true;
 
       try {
-        const data = await api('/update/apply', {
+        await api('/update/apply', {
           method: 'POST',
           body: JSON.stringify({ version: latestUpdateCheck.latest_version })
         });
-        updateResultDiv.textContent = `
-✓ ${data.message}
-
-Das Update läuft jetzt im Hintergrund.
-Aktualisiere den Status in wenigen Sekunden, um den Fortschritt zu sehen.
-        `.trim();
-
-        // Auto-refresh nach 5 Sekunden
-        setTimeout(() => {
-          refreshUpdateStatus();
-          applyUpdateBtn.disabled = true;
-        }, 5000);
 
+        showToast('Update gestartet (läuft im Hintergrund)', 'success');
+        setTimeout(() => refreshUpdateStatus(), 5000);
       } catch (err) {
-        updateResultDiv.textContent = `❌ Fehler beim Starten des Updates: ${err.message}`;
-        applyUpdateBtn.disabled = false;
-      }
-    });
-
-    rollbackBtn.addEventListener('click', async () => {
-      const confirmed = confirm(
-        `Rollback zum letzten Backup durchführen?\n\n` +
-        `⚠️ WICHTIG:\n` +
-        `- Dies stellt die vorherige Version wieder her\n` +
-        `- Der Service wird neu gestartet\n` +
-        `- Ein Backup muss vorhanden sein\n\n` +
-        `Fortfahren?`
-      );
-
-      if (!confirmed) return;
-
-      updateResultDiv.textContent = 'Rollback wird gestartet... (läuft im Hintergrund)';
-      rollbackBtn.disabled = true;
-
-      try {
-        const data = await api('/update/rollback', { method: 'POST' });
-        updateResultDiv.textContent = `
-✓ ${data.message}
-
-Der Rollback läuft jetzt im Hintergrund.
-Aktualisiere den Status in wenigen Sekunden.
-        `.trim();
-
-        // Auto-refresh nach 5 Sekunden
-        setTimeout(() => {
-          refreshUpdateStatus();
-        }, 5000);
-
-      } catch (err) {
-        updateResultDiv.textContent = `❌ Fehler beim Rollback: ${err.message}`;
+        showToast('Fehler beim Starten des Updates: ' + err.message, 'error');
       } finally {
-        rollbackBtn.disabled = false;
+        btn.innerHTML = originalHTML;
+        btn.disabled = false;
+        lucide.createIcons();
       }
     });
 
-    async function refreshUpdateLogs() {
-      updateLogsDiv.textContent = 'Lade Logs...';
-      try {
-        const logs = await api('/update/logs');
-        if (!logs || logs.length === 0) {
-          updateLogsDiv.textContent = 'Keine Logs vorhanden.';
-          return;
-        }
-
-        // Reverse chronological (newest first)
-        const logEntries = logs.reverse().map(entry => {
-          const timestamp = entry.timestamp ? new Date(entry.timestamp).toLocaleString('de-DE') : 'unbekannt';
-          const status = entry.status || 'unknown';
-          const version = entry.version || '-';
-          const error = entry.error ? `\n  Fehler: ${entry.error}` : '';
-          return `[${timestamp}] ${status} - Version: ${version}${error}`;
-        });
-
-        updateLogsDiv.textContent = logEntries.join('\n\n');
-      } catch (err) {
-        updateLogsDiv.textContent = `Fehler beim Laden der Logs: ${err.message}`;
+    document.getElementById('rollbackBtn').addEventListener('click', async () => {
+      if (!confirm(`Rollback zum letzten Backup durchführen?\n\n⚠️ WICHTIG:\n- Dies stellt die vorherige Version wieder her\n- Der Service wird neu gestartet\n- Ein Backup muss vorhanden sein\n\nFortfahren?`)) {
+        return;
       }
-    }
 
-    refreshLogsBtn.addEventListener('click', refreshUpdateLogs);
+      const btn = document.getElementById('rollbackBtn');
+      const originalHTML = btn.innerHTML;
+      btn.innerHTML = '<div class="spinner"></div> Starte...';
+      btn.disabled = true;
 
-    // Initial load
-    refreshUpdateStatus();
+      try {
+        await api('/update/rollback', { method: 'POST' });
+        showToast('Rollback gestartet (läuft im Hintergrund)', 'success');
+        setTimeout(() => refreshUpdateStatus(), 5000);
+      } catch (err) {
+        showToast('Fehler beim Rollback: ' + err.message, 'error');
+      } finally {
+        btn.innerHTML = originalHTML;
+        btn.disabled = false;
+        lucide.createIcons();
+      }
+    });
+
+    document.getElementById('refreshLogsBtn').addEventListener('click', refreshUpdateLogs);
+
+    // Initialize
+    checkSession();
+    checkOidcStatus();
   </script>
 </body>
 </html>