Files
imf-sms-dashboard/web/admin.html
T
2026-06-08 23:35:38 +01:00

381 lines
18 KiB
HTML

<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Admin — IMFestival SMS Dashboard</title>
<link href="assets/vendor/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"
crossorigin="anonymous">
<link href="assets/css/dashboard.css" rel="stylesheet">
</head>
<body>
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
<i class="fa-solid fa-bars"></i>
</button>
<span style="font-weight:600;font-size:0.95rem;">Admin</span>
</div>
<!-- ─── Mobile offcanvas sidebar ─── -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
<div class="offcanvas-header">
<div class="brand"
style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
<span>SMS Dashboard</span>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body p-3">
<nav class="d-flex flex-column gap-1">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
</div>
</div>
<!-- ─── Desktop sidebar ─── -->
<div class="sidebar">
<div class="brand">
<span style="margin: 0 auto;">IMFestival SMS Dashboard</span>
</div>
<nav class="d-flex flex-column gap-1 mt-2">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
<div class="mt-auto pt-3" style="border-top:1px solid var(--border);">
<div class="nav-link-custom" style="cursor:default;">
<i class="fa-solid fa-circle-user fa-fw"></i>
<span class="nav-username" style="font-size:0.82rem;">User</span>
</div>
</div>
</div>
<!-- ─── Main content ─── -->
<div class="main">
<div class="main-inner">
<div id="sandboxBanner" class="alert alert-warning"
style="display:none;font-size:0.85rem;font-weight:600;text-align:center;">
<i class="fa-solid fa-flask me-1"></i> Sandbox mode is active — texts are tagged as a test and excluded
from
cost calculations.
</div>
<div class="page-header d-flex align-items-center gap-3">
<a href="index.html" class="btn btn-sm btn-secondary">
<i class="fa-solid fa-arrow-left me-1"></i> Back
</a>
<div>
<h1>Admin</h1>
<p>Sandbox mode and data management controls.</p>
</div>
</div>
<!-- Alert area -->
<div id="adminResult" class="alert mb-4" style="display:none;" role="alert"></div>
<!-- ── Sandbox Mode ─────────────────────────────────────────────────────── -->
<div class="card p-4 mb-4">
<div class="d-flex align-items-start justify-content-between mb-3 gap-3">
<div>
<h5 class="mb-1">
<i class="fa-solid fa-flask fa-fw me-1" style="color:var(--text-muted);"></i>
Sandbox Mode
</h5>
<p class="text-muted mb-0" style="font-size:0.85rem;">
When enabled, all new messages are tagged as sandbox. Sandbox messages are excluded from the
success rate and cost calculations on the dashboard.
</p>
</div>
<div class="form-check form-switch flex-shrink-0 mt-1">
<input class="form-check-input" type="checkbox" role="switch" id="sandboxToggle"
style="width:3rem;height:1.5rem;cursor:pointer;" aria-label="Toggle sandbox mode">
</div>
</div>
<!-- Stats row -->
<div class="row g-3 mb-3">
<div class="col-4">
<div class="stat-card">
<div class="stat-label">Real Sends</div>
<div class="stat-value" id="stat-real" style="color:#4ade80;"></div>
</div>
</div>
<div class="col-4">
<div class="stat-card">
<div class="stat-label">Sandbox Sends</div>
<div class="stat-value" id="stat-sandbox" style="color:var(--text-muted);"></div>
</div>
</div>
<div class="col-4">
<div class="stat-card">
<div class="stat-label">Total Logged</div>
<div class="stat-value" id="stat-total"></div>
</div>
</div>
</div>
<button class="btn btn-sm btn-secondary" onclick="markAllSandbox()">
<i class="fa-solid fa-flask me-1"></i>
Mark all existing sends as sandbox
</button>
</div>
<!-- ── Data Management ───────────────────────────────────────────────────── -->
<div class="card p-4">
<h5 class="mb-4">
<i class="fa-solid fa-database fa-fw me-1" style="color:var(--text-muted);"></i>
Data Management
</h5>
<!-- Delivery Log -->
<div class="mb-4">
<h6 class="mb-1">Delivery Log</h6>
<p class="text-muted mb-2" style="font-size:0.82rem;">
<span id="count-log"></span> entries logged.
</p>
<div class="d-flex flex-wrap align-items-center gap-2">
<button class="btn btn-sm btn-danger" onclick="purge('delivery_log')">
<i class="fa-solid fa-trash-can me-1"></i> Purge All
</button>
<span class="text-muted" style="font-size:0.82rem;">or purge before:</span>
<input type="date" id="purgeBefore" class="form-control form-control-sm"
style="width:auto;min-width:150px;">
<button class="btn btn-sm btn-warning" onclick="purge('delivery_log', true)">
<i class="fa-solid fa-calendar-xmark me-1"></i> Purge Before Date
</button>
</div>
</div>
<hr style="border-color:var(--border);">
<!-- Attendees -->
<div class="mb-4">
<h6 class="mb-1">Attendees &amp; Workshops</h6>
<p class="text-muted mb-2" style="font-size:0.82rem;">
<span id="count-attendees"></span> attendees. Removes all attendees, registrations and
workshop sessions.
</p>
<button class="btn btn-sm btn-danger" onclick="purge('attendees')">
<i class="fa-solid fa-trash-can me-1"></i> Purge All Attendees
</button>
</div>
<hr style="border-color:var(--border);">
<!-- Templates -->
<div class="mb-4">
<h6 class="mb-1">SMS Templates</h6>
<p class="text-muted mb-2" style="font-size:0.82rem;">
<span id="count-templates"></span> templates.
</p>
<button class="btn btn-sm btn-danger" onclick="purge('templates')">
<i class="fa-solid fa-trash-can me-1"></i> Purge All Templates
</button>
</div>
<hr style="border-color:var(--border);">
<!-- Schedules -->
<div>
<h6 class="mb-1">Scheduled Rules</h6>
<p class="text-muted mb-2" style="font-size:0.82rem;">
<span id="count-schedules"></span> scheduled rules.
</p>
<button class="btn btn-sm btn-danger" onclick="purge('schedules')">
<i class="fa-solid fa-trash-can me-1"></i> Purge All Schedules
</button>
</div>
</div>
</div><!-- /.main-inner -->
</div><!-- /.main -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
<script>
'use strict';
// ─── Load admin state ────────────────────────────────────────────────────────
async function loadAdmin() {
try {
const r = await fetch('/api/admin.php', { redirect: 'manual' });
if (r.type === 'opaqueredirect') { window.location.reload(); return; }
if (!r.ok) { window.location.replace('index.html'); return; }
const data = await r.json();
if (!data.is_admin) {
window.location.replace('index.html');
return;
}
document.querySelectorAll('.admin-nav-link').forEach(el => el.classList.remove('d-none'));
const name = data.name || data.username;
if (name) {
document.querySelectorAll('.nav-username').forEach(el => { el.textContent = name; });
}
document.getElementById('sandboxToggle').checked = data.sandbox_mode;
document.getElementById('sandboxBanner').style.display = data.sandbox_mode ? '' : 'none';
document.getElementById('stat-real').textContent = data.delivery_log_real_sent ?? '—';
document.getElementById('stat-sandbox').textContent = data.delivery_log_sandbox ?? '—';
document.getElementById('stat-total').textContent = data.delivery_log_total ?? '—';
document.getElementById('count-log').textContent = data.delivery_log_total ?? '—';
document.getElementById('count-attendees').textContent = data.attendees ?? '—';
document.getElementById('count-templates').textContent = data.templates ?? '—';
document.getElementById('count-schedules').textContent = data.schedules ?? '—';
} catch (e) {
showResult('Failed to load admin data: ' + e.message, 'danger');
}
}
// ─── Sandbox toggle ──────────────────────────────────────────────────────────
document.getElementById('sandboxToggle').addEventListener('change', async () => {
try {
const data = await fetch('/api/admin.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'toggle_sandbox' }),
}).then(r => r.json());
document.getElementById('sandboxToggle').checked = data.sandbox_mode;
document.getElementById('sandboxBanner').style.display = data.sandbox_mode ? '' : 'none';
showResult(`Sandbox mode ${data.sandbox_mode ? 'enabled' : 'disabled'}.`, 'success');
} catch (e) {
showResult('Failed to toggle sandbox mode: ' + e.message, 'danger');
await loadAdmin(); // revert toggle visual state
}
});
// ─── Mark all as sandbox ─────────────────────────────────────────────────────
async function markAllSandbox() {
if (!confirm('Mark ALL existing delivery log entries as sandbox?\n\nThey will be excluded from cost calculations and success rate on the dashboard.')) {
return;
}
try {
const res = await fetch('/api/admin.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'mark_all_sandbox' }),
});
if (!res.ok) throw new Error((await res.json()).error ?? 'Failed');
showResult('All sends marked as sandbox.', 'success');
loadAdmin();
} catch (e) {
showResult('Failed: ' + e.message, 'danger');
}
}
// ─── Purge ───────────────────────────────────────────────────────────────────
const PURGE_LABELS = {
delivery_log: 'all delivery log entries',
attendees: 'all attendees, registrations and workshops',
templates: 'all SMS templates',
schedules: 'all scheduled rules',
};
async function purge(target, useDateFilter = false) {
const body = { action: 'purge', target };
if (useDateFilter) {
const before = document.getElementById('purgeBefore').value;
if (!before) {
alert('Please select a date first.');
return;
}
if (!confirm(`Purge all delivery log entries before ${before}?\n\nThis cannot be undone.`)) {
return;
}
body.before = before;
} else {
if (!confirm(`This will permanently delete ${PURGE_LABELS[target]}.\n\nThis cannot be undone. Are you sure?`)) {
return;
}
}
try {
const res = await fetch('/api/admin.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
const data = await res.json();
if (!res.ok) throw new Error(data.error ?? 'Purge failed');
const n = typeof data.purged === 'number' ? ` (${data.purged} rows)` : '';
showResult(`Purge completed successfully${n}.`, 'success');
loadAdmin();
} catch (e) {
showResult('Purge failed: ' + e.message, 'danger');
}
}
// ─── Toast/alert helper ──────────────────────────────────────────────────────
function showResult(msg, type) {
const el = document.getElementById('adminResult');
el.className = `alert alert-${type}`;
el.textContent = msg;
el.style.display = '';
clearTimeout(el._timer);
el._timer = setTimeout(() => { el.style.display = 'none'; }, 6000);
}
// ─── Init ────────────────────────────────────────────────────────────────────
loadAdmin();
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') loadAdmin(); });
</script>
</body>
</html>