Initial commit: AegisSight-Monitor-Verwaltung
Dieser Commit ist enthalten in:
claude-dev
313
src/static/dashboard.html
Normale Datei
313
src/static/dashboard.html
Normale Datei
@@ -0,0 +1,313 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IntelSight Verwaltung</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="app-header">
|
||||
<div class="logo">IntelSight <span>Verwaltung</span></div>
|
||||
<div class="header-right">
|
||||
<span class="header-user" id="headerUser"></span>
|
||||
<button class="btn btn-secondary btn-small" id="logoutBtn">Abmelden</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="app-content">
|
||||
<!-- Navigation -->
|
||||
<nav class="nav-tabs">
|
||||
<button class="nav-tab active" data-section="dashboard">Dashboard</button>
|
||||
<button class="nav-tab" data-section="orgs">Organisationen</button>
|
||||
<button class="nav-tab" data-section="licenses">Lizenzen</button>
|
||||
</nav>
|
||||
|
||||
<!-- Dashboard Section -->
|
||||
<div class="section active" id="sec-dashboard">
|
||||
<div class="stats-grid" id="statsGrid"></div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>Bald ablaufende Lizenzen</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="expiring-list" id="expiringList">
|
||||
<li class="text-muted" style="padding: 8px 0;">Laden...</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>Letzte Aktivitaet</h2>
|
||||
</div>
|
||||
<div class="card-body" id="recentActivity">
|
||||
<div class="text-muted">Laden...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Organizations Section -->
|
||||
<div class="section" id="sec-orgs">
|
||||
<!-- Org List -->
|
||||
<div id="orgListView">
|
||||
<div class="action-bar">
|
||||
<input type="text" class="search-input" id="orgSearch" placeholder="Organisation suchen...">
|
||||
<button class="btn btn-primary" id="newOrgBtn">+ Neue Organisation</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Slug</th>
|
||||
<th>Nutzer</th>
|
||||
<th>Lizenz</th>
|
||||
<th>Status</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="orgTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Org Detail -->
|
||||
<div class="detail-panel" id="orgDetail">
|
||||
<button class="detail-back" id="orgBackBtn">← Zurueck</button>
|
||||
<div id="orgDetailHeader"></div>
|
||||
|
||||
<div class="nav-tabs mt-16" id="orgDetailTabs">
|
||||
<button class="nav-tab active" data-subtab="users">Nutzer</button>
|
||||
<button class="nav-tab" data-subtab="org-licenses">Lizenzen</button>
|
||||
<button class="nav-tab" data-subtab="settings">Einstellungen</button>
|
||||
</div>
|
||||
|
||||
<!-- Users Sub-Tab -->
|
||||
<div class="section active" id="sub-users">
|
||||
<div class="action-bar">
|
||||
<span class="text-secondary" id="userLimitInfo"></span>
|
||||
<button class="btn btn-primary" id="newUserBtn">+ Nutzer anlegen</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>E-Mail</th>
|
||||
<th>Name</th>
|
||||
<th>Rolle</th>
|
||||
<th>Status</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="userTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Licenses Sub-Tab -->
|
||||
<div class="section" id="sub-org-licenses">
|
||||
<div class="action-bar">
|
||||
<span></span>
|
||||
<button class="btn btn-primary" id="newLicenseBtn">+ Neue Lizenz</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Typ</th>
|
||||
<th>Max Nutzer</th>
|
||||
<th>Gueltig ab</th>
|
||||
<th>Gueltig bis</th>
|
||||
<th>Status</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="licenseTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Sub-Tab -->
|
||||
<div class="section" id="sub-settings">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form id="orgEditForm">
|
||||
<div class="form-group">
|
||||
<label for="editOrgName">Name</label>
|
||||
<input type="text" id="editOrgName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="editOrgActive">
|
||||
<option value="true">Aktiv</option>
|
||||
<option value="false">Deaktiviert</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; margin-top: 16px;">
|
||||
<button type="submit" class="btn btn-primary">Speichern</button>
|
||||
<button type="button" class="btn btn-danger" id="deleteOrgBtn">Organisation loeschen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Licenses Section (global overview) -->
|
||||
<div class="section" id="sec-licenses">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>Bald ablaufende Lizenzen</h2>
|
||||
<select id="expiringDays" style="background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 4px 8px; font-size: 13px;">
|
||||
<option value="14">14 Tage</option>
|
||||
<option value="30" selected>30 Tage</option>
|
||||
<option value="90">90 Tage</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Organisation</th>
|
||||
<th>Typ</th>
|
||||
<th>Max Nutzer</th>
|
||||
<th>Laeuft ab</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="expiringTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Modal: New Organization -->
|
||||
<div class="modal-overlay" id="modalNewOrg">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>Neue Organisation</h3>
|
||||
<button class="modal-close" onclick="closeModal('modalNewOrg')">×</button>
|
||||
</div>
|
||||
<form id="newOrgForm">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="newOrgName">Name</label>
|
||||
<input type="text" id="newOrgName" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newOrgSlug">Slug (URL-freundlich)</label>
|
||||
<input type="text" id="newOrgSlug" required pattern="[a-z0-9-]+" placeholder="z.B. bundespolizei">
|
||||
</div>
|
||||
<div id="newOrgError" class="error-msg" style="display:none"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal('modalNewOrg')">Abbrechen</button>
|
||||
<button type="submit" class="btn btn-primary">Anlegen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal: New User -->
|
||||
<div class="modal-overlay" id="modalNewUser">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>Neuen Nutzer anlegen</h3>
|
||||
<button class="modal-close" onclick="closeModal('modalNewUser')">×</button>
|
||||
</div>
|
||||
<form id="newUserForm">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="newUserEmail">E-Mail</label>
|
||||
<input type="email" id="newUserEmail" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newUserName">Anzeigename</label>
|
||||
<input type="text" id="newUserName" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newUserRole">Rolle</label>
|
||||
<select id="newUserRole">
|
||||
<option value="member">Mitglied</option>
|
||||
<option value="org_admin">Org-Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="newUserError" class="error-msg" style="display:none"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal('modalNewUser')">Abbrechen</button>
|
||||
<button type="submit" class="btn btn-primary">Anlegen & Einladung senden</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal: New License -->
|
||||
<div class="modal-overlay" id="modalNewLicense">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>Neue Lizenz</h3>
|
||||
<button class="modal-close" onclick="closeModal('modalNewLicense')">×</button>
|
||||
</div>
|
||||
<form id="newLicenseForm">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="newLicType">Lizenztyp</label>
|
||||
<select id="newLicType">
|
||||
<option value="trial">Trial</option>
|
||||
<option value="annual">Jahreslizenz</option>
|
||||
<option value="permanent">Permanent</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newLicMaxUsers">Maximale Nutzer</label>
|
||||
<input type="number" id="newLicMaxUsers" value="5" min="1" max="1000">
|
||||
</div>
|
||||
<div class="form-group" id="durationGroup">
|
||||
<label for="newLicDuration">Laufzeit (Tage)</label>
|
||||
<input type="number" id="newLicDuration" value="14" min="1" max="3650">
|
||||
<div class="text-muted mt-8" style="font-size: 12px;">Trial: Standard 14 Tage, Jahreslizenz: Standard 365 Tage</div>
|
||||
</div>
|
||||
<div id="newLicError" class="error-msg" style="display:none"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal('modalNewLicense')">Abbrechen</button>
|
||||
<button type="submit" class="btn btn-primary">Lizenz erstellen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal: Confirm -->
|
||||
<div class="modal-overlay" id="modalConfirm">
|
||||
<div class="modal" style="max-width: 400px;">
|
||||
<div class="modal-header">
|
||||
<h3 id="confirmTitle">Bestaetigung</h3>
|
||||
<button class="modal-close" onclick="closeModal('modalConfirm')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="confirm-text" id="confirmText"></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" onclick="closeModal('modalConfirm')">Abbrechen</button>
|
||||
<button class="btn btn-danger" id="confirmOkBtn">Bestaetigen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren