121 lines
5.8 KiB
PHP
121 lines
5.8 KiB
PHP
<?php
|
||
$assetVersion = defined('ASSET_VERSION') ? ASSET_VERSION : time();
|
||
$appBaseUrl = rtrim($GLOBALS['app_base_url'] ?? '', '/');
|
||
$assetBase = $appBaseUrl !== '' ? $appBaseUrl : '';
|
||
$appApiBase = rtrim($GLOBALS['app_api_base'] ?? '', '/');
|
||
$debugRedirect = isset($_GET['debug_redirect']);
|
||
?>
|
||
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||
<title>Email Template System – Dashboard</title>
|
||
<script>document.documentElement.classList.add('auth-pending');</script>
|
||
<style>html.auth-pending body{visibility:hidden;}</style>
|
||
<script>
|
||
window.APP_BASE_URL = <?= json_encode($appBaseUrl, JSON_UNESCAPED_SLASHES) ?>;
|
||
window.APP_API_BASE = <?= json_encode($appApiBase, JSON_UNESCAPED_SLASHES) ?>;
|
||
</script>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<?php if ($debugRedirect): ?>
|
||
<script src="<?= $assetBase ?>/assets/js/debug-location.js?v=<?= htmlspecialchars($assetVersion, ENT_QUOTES) ?>"></script>
|
||
<?php endif; ?>
|
||
<link rel="stylesheet" href="<?= $assetBase ?>/assets/css/admin.css?v=<?= htmlspecialchars($assetVersion, ENT_QUOTES) ?>">
|
||
<link rel="stylesheet" href="<?= $assetBase ?>/assets/css/toast.css?v=<?= htmlspecialchars($assetVersion, ENT_QUOTES) ?>">
|
||
<style>
|
||
:root { color-scheme: light; }
|
||
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:.8rem;border:1px solid #e5e7eb;background:#fff;font-size:.9rem;cursor:pointer;}
|
||
.btn:hover{background:#f8fafc}
|
||
.btn-avatar{padding:.35rem;border-radius:999px;width:42px;height:42px;justify-content:center;font-weight:600;background:#0ea5e9;color:#fff;border:none}
|
||
.btn-avatar:hover{background:#0284c7}
|
||
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem}
|
||
.stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.25rem}
|
||
.stat-card h4{margin:0;font-size:.95rem;color:#475569}
|
||
.stat-card strong{display:block;font-size:1.75rem;color:#0f172a}
|
||
.section-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.25rem;margin-bottom:1.5rem}
|
||
.usage-table{width:100%;border-collapse:collapse;font-size:.9rem}
|
||
.usage-table th,.usage-table td{padding:.5rem;border-bottom:1px solid #e2e8f0;text-align:left}
|
||
.user-menu{position:absolute;top:calc(100% + .5rem);right:0;min-width:180px;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;box-shadow:0 20px 35px rgba(15,23,42,.15);padding:.35rem;z-index:40}
|
||
.user-menu-item{display:block;width:100%;text-align:left;padding:.45rem .75rem;border-radius:.6rem;font-size:.9rem;color:#0f172a}
|
||
.user-menu-item:hover{background:#f1f5f9}
|
||
</style>
|
||
</head>
|
||
<body class="bg-slate-50 text-slate-800" data-page="dashboard">
|
||
<header class="sticky top-0 z-30 bg-white/90 border-b backdrop-blur">
|
||
<div class="max-w-5xl mx-auto px-4 py-4 flex items-center gap-3">
|
||
<a href="<?= $appBaseUrl ?>/index.php" class="btn" title="Zurück zur Übersicht">← Übersicht</a>
|
||
<h1 class="font-semibold text-lg">Dashboard</h1>
|
||
<div class="ms-auto flex gap-2 items-center">
|
||
<div class="relative" id="userMenu">
|
||
<button id="btn-user" type="button" class="btn-avatar" aria-haspopup="true" aria-expanded="false">
|
||
<span id="userAvatar">U</span>
|
||
</button>
|
||
<div id="userMenuPanel" class="user-menu hidden" role="menu">
|
||
<a href="<?= $appBaseUrl ?>/admin/profile.php" class="user-menu-item" data-menu="profile">Profil</a>
|
||
<a href="<?= $appBaseUrl ?>/admin/dashboard.php" class="user-menu-item" data-role="admin">Dashboard</a>
|
||
<a href="<?= $appBaseUrl ?>/admin/settings.php" class="user-menu-item" data-role="admin">Administration</a>
|
||
<button id="btn-logout" type="button" class="user-menu-item text-red-600">Logout</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="max-w-5xl mx-auto p-4 md:p-6">
|
||
<section class="stat-grid" id="dashboardCounts">
|
||
<div class="stat-card">
|
||
<h4>Templates</h4>
|
||
<strong id="count-templates">–</strong>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h4>Sections</h4>
|
||
<strong id="count-sections">–</strong>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h4>Blocks</h4>
|
||
<strong id="count-blocks">–</strong>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h4>Snippets</h4>
|
||
<strong id="count-snippets">–</strong>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h4>Aufrufe gesamt</h4>
|
||
<strong id="count-usage">–</strong>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-card" data-role="admin">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div>
|
||
<h4>Template-Nutzung</h4>
|
||
<p class="text-sm text-slate-600">Wie oft wurden Templates über die API geladen? Setze einzelne Zähler bei Bedarf zurück.</p>
|
||
</div>
|
||
<button type="button" class="btn" id="btn-refresh-dashboard">Aktualisieren</button>
|
||
</div>
|
||
<div class="overflow-auto">
|
||
<table class="usage-table" id="usageTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Template</th>
|
||
<th>Aufrufe</th>
|
||
<th>Zuletzt verwendet</th>
|
||
<th class="text-right">Aktionen</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td colspan="4" class="text-sm text-slate-500">Lade Daten…</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<div id="toast-root"></div>
|
||
|
||
<script src="<?= $assetBase ?>/assets/js/toast.js?v=<?= htmlspecialchars($assetVersion, ENT_QUOTES) ?>"></script>
|
||
<script type="module" src="<?= $assetBase ?>/assets/js/dashboard.js?v=<?= htmlspecialchars($assetVersion, ENT_QUOTES) ?>"></script>
|
||
</body>
|
||
</html>
|