30 ? 2 : 6, height: 120 }}>
{rows.map((r, i) => (
{(rows.length <= 30 || i % stride === 0) && (
{r[valueKey]}
)}
0 ? 3 : 1,
opacity: r[valueKey] > 0 ? 1 : 0.25,
transition: "height .3s",
}} />
{(rows.length <= 30 || i % stride === 0 || i === rows.length - 1) && (
{labelFn(r[labelKey])}
)}
))}
);
}
function UsageTab({ theme }) {
const [data, setData] = useStateAdmin(null);
const [dauMau, setDauMau] = useStateAdmin(null);
const [error, setError] = useStateAdmin(null);
useEffectAdmin(() => {
window.kwistApi.get("/api/admin/usage-stats").then(setData).catch((e) => setError(e.message));
window.kwistApi.get("/api/admin/dau-mau").then(setDauMau).catch(() => { /* niet-fataal */ });
}, []);
if (error) return
;
if (!data) return
;
const maxSessions = Math.max(...(data.sessionsPerMonth.map((r) => r.count)), 1);
const maxRegs = Math.max(...(data.registrationsPerMonth.map((r) => r.count)), 1);
const monthLabel = (ym) => {
const [, m] = ym.split("-");
return ["jan","feb","mrt","apr","mei","jun","jul","aug","sep","okt","nov","dec"][parseInt(m, 10) - 1] || m;
};
const statusMap = {};
for (const r of data.sessionsByStatus) statusMap[r.status] = r.count;
return (
Gebruik
── STATISTIEKEN OVER HET PLATFORMGEBRUIK
{/* KPI tiles */}
{[
["Actieve hosts (7d)", data.activeUsers7d],
["Actieve hosts (30d)", data.activeUsers30d],
["Gem. spelers / sessie", data.avgPlayersPerSession || "—"],
["Sessies actief", (statusMap.lobby || 0) + (statusMap.running || 0)],
].map(([k, v], i) => (
{k}
{v}
))}
{/* DAU/MAU (ADM-20) */}
{dauMau && (
<>
── DAU · DAGELIJKS ACTIEVE HOSTS (LAATSTE 60 DAGEN)
s.slice(8, 10)}
barColor={theme.accent} />
── MAU · MAANDELIJKS ACTIEVE HOSTS (LAATSTE 12 MAANDEN)
monthLabel(ym)}
barColor={theme.fg} />
)}
{/* Sessions per month */}
── SESSIES PER MAAND (LAATSTE 12 MAANDEN)
{data.sessionsPerMonth.length === 0 ? (
NOG GEEN DATA
) : (
{data.sessionsPerMonth.map((r) => (
{r.count}
{monthLabel(r.month)}
))}
)}
{/* Registrations per month */}
── REGISTRATIES PER MAAND
{data.registrationsPerMonth.length === 0 ? (
NOG GEEN DATA
) : (
{data.registrationsPerMonth.map((r) => (
{r.count}
{monthLabel(r.month)}
))}
)}
{/* Session status breakdown */}
── SESSIES NAAR STATUS
{[
["Lobby", statusMap.lobby || 0],
["Actief", statusMap.running || 0],
["Afgelopen", statusMap.finished || 0],
].map(([k, v], i) => (
{k}
{v}
))}
{/* Top quizzes */}
── MEEST GESPEELDE QUIZZES
{data.topQuizzes.length === 0 ? (
NOG GEEN QUIZZES
) : (
{data.topQuizzes.map((q, i) => (
{("0" + (i + 1)).slice(-2)}
{q.glyph || "♣"}
{q.title}
))}
)}
);
}
function BackupTab({ theme }) {
const [exporting, setExporting] = useStateAdmin(false);
const [importing, setImporting] = useStateAdmin(false);
const [pendingFile, setPendingFile] = useStateAdmin(null);
const [pendingMeta, setPendingMeta] = useStateAdmin(null);
const [pendingBackup, setPendingBackup] = useStateAdmin(null);
const [result, setResult] = useStateAdmin(null);
const [error, setError] = useStateAdmin(null);
const fileRef = React.useRef(null);
const downloadBackup = async () => {
setExporting(true); setError(null);
try {
const tok = window.kwistApi.getToken();
const res = await fetch("/api/admin/backup/export", {
headers: tok ? { authorization: `Bearer ${tok}` } : {},
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
const stamp = new Date().toISOString().slice(0, 10);
a.download = `kwisthet-backup-${stamp}.json`;
document.body.appendChild(a); a.click(); a.remove();
setTimeout(() => URL.revokeObjectURL(url), 1000);
} catch (e) {
setError(e.message);
} finally {
setExporting(false);
}
};
const handleFile = async (file) => {
if (!file) return;
setError(null); setResult(null);
try {
const text = await file.text();
const data = JSON.parse(text);
if (data.kind !== "kwisthet-backup") {
throw new Error("Dit is geen geldig KwistHet backup-bestand.");
}
setPendingFile(file);
setPendingBackup(data);
setPendingMeta({
exportedAt: data.exportedAt,
users: data.counts?.users ?? data.users?.length ?? 0,
features: data.counts?.features ?? data.features?.length ?? 0,
siteSettings: data.counts?.siteSettings ?? data.siteSettings?.length ?? 0,
quizzes: data.counts?.quizzes ?? data.quizzes?.length ?? 0,
questions: data.counts?.questions ?? 0,
});
} catch (e) {
setError("Kon bestand niet lezen: " + e.message);
}
};
const cancelImport = () => {
setPendingFile(null); setPendingMeta(null); setPendingBackup(null);
if (fileRef.current) fileRef.current.value = "";
};
const confirmImport = async () => {
if (!pendingBackup) return;
setImporting(true); setError(null); setResult(null);
try {
const r = await window.kwistApi.post("/api/admin/backup/import", pendingBackup);
setResult(r.stats);
cancelImport();
} catch (e) {
setError(e.message);
} finally {
setImporting(false);
}
};
return (
Backup
── EXPORTEER OF HERSTEL EEN VOLLEDIGE KOPIE
{/* Export */}
── EXPORTEREN
Download een JSON-bestand met alle gebruikers (incl. wachtwoord-hashes en MFA-instellingen),
feature flags, site-teksten en quizzes met al hun vragen. Sessies, spelers en antwoorden
worden niet meegenomen — die zijn vluchtig.
{exporting ? "Bezig…" : "↧ Download backup-bestand"}
{/* Import */}
── IMPORTEREN
Upload een eerder geëxporteerd bestand. Bestaande data wordt samengevoegd :
gebruikers worden gematcht op e-mail, quizzes op id, feature flags en teksten op key.
Vragen van bestaande quizzes worden vervangen door de versie uit het bestand.
{error && (
{error}
)}
{!pendingMeta && (
<>
fileRef.current?.click()}>
Kies backup-bestand…
)}
{pendingMeta && (
── KLAAR OM TE IMPORTEREN
Bestand: {pendingFile?.name}
Geëxporteerd: {pendingMeta.exportedAt ? new Date(pendingMeta.exportedAt).toLocaleString("nl-NL") : "onbekend"}
{[
["Gebruikers", pendingMeta.users],
["Features", pendingMeta.features],
["Site-teksten", pendingMeta.siteSettings],
["Quizzes", pendingMeta.quizzes],
["Vragen", pendingMeta.questions],
].map(([k, v], i) => (
{k}
{v}
))}
{importing ? "Bezig met importeren…" : "↥ Bevestig import"}
Annuleren
)}
{result && (
── ✓ IMPORT VOLTOOID
Gebruikers: {result.users.inserted} nieuw, {result.users.updated} bijgewerkt
Features: {result.features} verwerkt
Site-teksten: {result.siteSettings} verwerkt
Quizzes: {result.quizzes.inserted} nieuw, {result.quizzes.updated} bijgewerkt, {result.quizzes.skipped} overgeslagen
Vragen: {result.questions} ingelezen
)}
);
}
function BrandingTab({ theme, onBrandingChange }) {
const current = theme.branding || "brut";
const brandings = window.BRANDINGS || {};
const keys = Object.keys(brandings);
return (
Branding
── WISSEL TUSSEN VISUELE STIJLEN OM TE TESTEN
{keys.map((key) => {
const b = brandings[key];
const active = current === key;
const previewFonts = window.FONT_PAIRINGS?.[b.fontPairing] || {};
return (
!active && onBrandingChange?.(key)} style={{
border: active ? `3px solid ${theme.accent}` : `1px solid ${theme.rule}`,
borderRadius: b.radius,
padding: 0,
cursor: active ? "default" : "pointer",
overflow: "hidden",
transition: "border-color .15s",
}}>
{/* Preview card */}
Kwist het!
{b.radius ? "Start quiz" : "start quiz"}
PREVIEW
{/* Info */}
{b.label}
{b.description}
FONT: {previewFonts.label || b.fontPairing} · RADIUS: {b.radius}px · ACCENT: {b.accent}
{active ? (
ACTIEF
) : (
ACTIVEREN
)}
);
})}
Branding wordt direct toegepast op het hele platform. Ververs de pagina om het volledig effect te zien.
);
}
// =================== HELPERS ===================
function Loading({ theme }) {
return
BEZIG MET LADEN…
;
}
function ErrorBox({ theme, message }) {
return (
{message}
);
}
function Table({ theme, cols, widths, children }) {
const grid = widths.join(" ");
// Forward the grid template down to every Row child via cloneElement.
const rows = React.Children.map(children, (child) =>
child && child.type === Row ? React.cloneElement(child, { gridTemplate: grid }) : child
);
return (
{cols.map((c, i) => (
{c}
))}
{rows}
);
}
function Row({ theme, gridTemplate, children }) {
return (
{children}
);
}
function Cell({ children }) {
return
{children}
;
}
function dangerBtnStyle(theme) {
return {
background: "transparent",
color: theme.accent,
border: `1px solid ${theme.accent}`,
padding: "4px 10px", cursor: "pointer",
fontFamily: theme.fonts.mono, fontSize: 11, letterSpacing: "0.1em",
};
}
function formatDate(s) {
if (!s) return "—";
const d = new Date(s);
return d.toLocaleString("nl-NL", { day: "2-digit", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit" });
}
window.AdminScreen = AdminScreen;