remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: convert admin panel to Tailwind CSS

Browse Source 
- Convert admin layout, sidebar, and navigation to Tailwind classes
- Convert dashboard components (StatusCard, DiagnosticRow, etc.) to Tailwind
- Convert all ~48 admin page files from admin CSS classes to Tailwind
- Remove unused admin CSS from globals.css (973 → 712 lines)
- Convert developers page badges to Tailwind
- Remove <style jsx> block from OnlineUsersWidget
This commit is contained in:
remco committed 2026-07-02 15:23:07 +02:00
1 parent 64f50b2dde
commit bd299be55d
52 files changed
+277 -644
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/achievements/page.tsx
+3 -3
View File
@@ -50,7 +50,7 @@ export default async function AdminAchievements() {
Read-only · {achievements.length} rows across {groups.size} categories.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Achievement rows" value={achievements.length} icon="🏆" />
<StatusCard label="Distinct achievements" value={distinctNames} icon="🎖️" />
<StatusCard label="Categories" value={groups.size} icon="🗂️" />
@@ -60,10 +60,10 @@ export default async function AdminAchievements() {
<p className="muted">No achievements found.</p>
) : (
[...groups.entries()].map(([category, rows]) => (
<section key={category} className="admin-section">
<section key={category} className="mt-6">
<h2>
{category}{" "}
<span className="admin-badge">{rows.length}</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{rows.length}</span>
</h2>
<div className="card" style={{ padding: 0, overflowX: "auto" }}>
<table>
src/app/admin/ads/page.tsx
+2 -2
View File
@@ -32,12 +32,12 @@ export default async function AdminAds() {
across the site.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Ads" value={ads.length} icon="🖼️" />
<StatusCard label="Latest" value={latest} hint="most recent ad" icon="🕒" />
</div>
<section className="admin-section">
<section className="mt-6">
<h2>All ads</h2>
{ads.length === 0 ? (
<p className="muted">No advertisements yet.</p>
src/app/admin/alerts/page.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ export default async function AdminAlerts() {
Read-only · 100 most recent alert_logs (newest first).
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Alerts shown" value={alerts.length} icon="🔔" />
<StatusCard
label="Critical"
src/app/admin/applications/page.tsx
+3 -3
View File
@@ -50,7 +50,7 @@ export default async function AdminApplications() {
Pending applications from players requesting a staff rank.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Pending applications"
value={applications.length}
@@ -59,7 +59,7 @@ export default async function AdminApplications() {
/>
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Applications ({applications.length})</h2>
{applications.length === 0 ? (
<p className="muted">No pending applications.</p>
@@ -84,7 +84,7 @@ export default async function AdminApplications() {
<>User #{a.userId}</>
)}
</h3>
<span className="admin-badge">Rank {a.rankId}</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">Rank {a.rankId}</span>
</div>
<p className="muted" style={{ marginTop: 0 }}>
{formatDate(a.createdAt)}
src/app/admin/articles/page.tsx
+2 -2
View File
@@ -41,12 +41,12 @@ export default async function AdminArticles({
</p>
) : null}
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Articles shown" value={articles.length} icon="📰" />
<StatusCard label="Latest" value={latest} hint="most recent post" icon="🕒" />
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Recent articles</h2>
{articles.length === 0 ? (
<p className="muted">No articles yet.</p>
src/app/admin/badges/page.tsx
+6 -6
View File
@@ -25,7 +25,7 @@ export default async function AdminBadges({
return (
<main>
<section className="admin-section">
<section className="mt-6">
<h2>Badges</h2>
<p className="muted">
Website badge catalogue (<code>website_badges</code>). Granting fires the emulator
@@ -34,18 +34,18 @@ export default async function AdminBadges({
{uploaded ? (
<p>
<span className="admin-badge ok">Uploaded</span> Badge image{" "}
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Uploaded</span> Badge image{" "}
<code>{uploaded}.gif</code> saved.
</p>
) : null}
{error ? (
<p>
<span className="admin-badge danger">Error</span> {error}
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">Error</span> {error}
</p>
) : null}
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Upload badge image</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Saves a <code>.gif</code> badge image to the emulator badge directory
@@ -69,7 +69,7 @@ export default async function AdminBadges({
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Give badge to user</h2>
<form action={giveBadge} className="card">
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
@@ -96,7 +96,7 @@ export default async function AdminBadges({
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Catalogue ({badges.length})</h2>
{badges.length === 0 ? (
<p className="muted">No badges in the catalogue.</p>
src/app/admin/bans/page.tsx
+4 -4
View File
@@ -32,7 +32,7 @@ export default async function AdminBans() {
Active bans only (expiry in the future) · newest first.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Active bans"
value={bans.length}
@@ -66,7 +66,7 @@ export default async function AdminBans() {
</div>
</form>
<section className="admin-section">
<section className="mt-6">
<h2>Active bans ({bans.length})</h2>
{bans.length === 0 ? (
<p className="muted">No active bans.</p>
@@ -87,12 +87,12 @@ export default async function AdminBans() {
<tr key={b.id}>
<td>{b.userId}</td>
<td>
<span className="admin-badge">{b.type}</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{b.type}</span>
</td>
<td>{b.banReason || "—"}</td>
<td>
{b.banExpire === 0 ? (
<span className="admin-badge danger">permanent</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">permanent</span>
) : (
<span className="muted" style={{ whiteSpace: "nowrap" }}>
{fromUnix(b.banExpire)}
src/app/admin/calendar/page.tsx
+2 -2
View File
@@ -62,7 +62,7 @@ export default async function AdminCalendar() {
Read-only · {campaigns.length} campaign{campaigns.length === 1 ? "" : "s"}.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Campaigns" value={campaigns.length} icon="📅" />
<StatusCard
label="Enabled"
@@ -104,7 +104,7 @@ export default async function AdminCalendar() {
}}
>
<h3 style={{ margin: 0 }}>{c.name || `Campaign #${c.id}`}</h3>
<span className={`admin-badge ${enabled ? "ok" : "danger"}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
{enabled ? "enabled" : "disabled"}
</span>
</div>
src/app/admin/catalog/page.tsx
+3 -3
View File
@@ -53,7 +53,7 @@ export default async function AdminCatalog() {
Browse catalog pages and the items they contain. Read-only.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Pages" value={pages.length} icon="📚" />
<StatusCard label="Visible" value={visibleCount} state="ok" icon="👁️" />
<StatusCard
@@ -65,7 +65,7 @@ export default async function AdminCatalog() {
<StatusCard label="Root pages" value={rootCount} icon="🗂️" />
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Pages ({pages.length})</h2>
{pages.length === 0 ? (
<p className="muted">No catalog pages found.</p>
@@ -105,7 +105,7 @@ export default async function AdminCatalog() {
<td>{p.minRank}</td>
<td>{p.orderNum}</td>
<td>
<span className={`admin-badge ${hidden ? "danger" : "ok"}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${hidden ? "bg-red-500/22 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}>
{hidden ? "Hidden" : "Visible"}
</span>
</td>
src/app/admin/commandocentrum/page.tsx
+8 -8
View File
@@ -91,7 +91,7 @@ export default async function CommandoCentrum() {
</p>
{/* ── Live status ────────────────────────────────────────── */}
<div className="admin-stats" style={{ marginTop: "1.1rem" }}>
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6" style={{ marginTop: "1.1rem" }}>
<StatusCard
label="Players online"
value={onlineCount}
@@ -135,7 +135,7 @@ export default async function CommandoCentrum() {
<div className="grid cols-2">
<section className="card">
<h2 style={{ marginTop: 0 }}>Server info</h2>
<div className="admin-info-grid">
<div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
<InfoItem label="Node" value={process.version} />
<InfoItem label="Platform" value={`${process.platform} ${process.arch}`} />
<InfoItem label="App uptime" value={uptime(process.uptime())} />
@@ -149,7 +149,7 @@ export default async function CommandoCentrum() {
<section className="card">
<h2 style={{ marginTop: 0 }}>System diagnostics</h2>
<div className="admin-diag">
<div className="flex flex-col">
<DiagnosticRow
label="Database"
detail={dbOk ? "Connection healthy" : "Unreachable"}
@@ -185,7 +185,7 @@ export default async function CommandoCentrum() {
</div>
{/* ── RCON controls ──────────────────────────────────────── */}
<section className="admin-section">
<section className="mt-6">
<h2>Emulator controls</h2>
<div className="grid cols-3">
<form action={updateCatalog} className="card">
@@ -240,7 +240,7 @@ export default async function CommandoCentrum() {
</section>
{/* ── User RCON actions ──────────────────────────────────── */}
<section className="admin-section">
<section className="mt-6">
<h2>User actions (RCON)</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Enter a User ID to perform actions on a specific user. Username required for disconnect.
@@ -345,7 +345,7 @@ export default async function CommandoCentrum() {
</section>
{/* ── Staff activity ─────────────────────────────────────── */}
<section className="admin-section">
<section className="mt-6">
<h2>Recent staff activity</h2>
{activity.length === 0 ? (
<p className="muted">No staff activity logged yet.</p>
@@ -367,7 +367,7 @@ export default async function CommandoCentrum() {
</td>
<td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
<td>
<span className="admin-badge">{a.action}</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{a.action}</span>
</td>
<td>{a.description}</td>
</tr>
@@ -378,7 +378,7 @@ export default async function CommandoCentrum() {
</section>
{/* ── Emulator errors ────────────────────────────────────── */}
<section className="admin-section">
<section className="mt-6">
<h2>Recent emulator errors</h2>
{errors.length === 0 ? (
<p className="muted">No emulator errors logged.</p>
src/app/admin/emulator/page.tsx
+3 -3
View File
@@ -41,12 +41,12 @@ export default async function AdminEmulator() {
on the next emulator read (some keys require an emulator reload).
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Settings keys" value={settings.length} icon="⚙️" />
<StatusCard label="Text keys" value={textsCount} icon="🗒️" />
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Settings</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
{settings.length} keys.
@@ -111,7 +111,7 @@ export default async function AdminEmulator() {
) : null}
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Texts</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
{textsCount} keys{textsTruncated ? ` (showing first ${texts.length})` : ""}.
src/app/admin/help-questions/page.tsx
+3 -3
View File
@@ -33,13 +33,13 @@ export default async function AdminHelpQuestions() {
the public help page, ordered by position.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Entries" value={entries.length} icon="❓" />
<StatusCard label="With button" value={withButton} icon="🔘" />
<StatusCard label="Small boxes" value={smallBoxes} icon="🗂️" />
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Entries</h2>
{entries.length === 0 ? (
<p className="muted">No help-center entries yet.</p>
@@ -63,7 +63,7 @@ export default async function AdminHelpQuestions() {
</td>
<td className="muted">{e.buttonText || "—"}</td>
<td>
<span className={`admin-badge ${e.smallBox ? "ok" : ""}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${e.smallBox ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
{e.smallBox ? "Yes" : "No"}
</span>
</td>
src/app/admin/housekeeping/page.tsx
+6 -6
View File
@@ -49,13 +49,13 @@ export default async function AdminHousekeeping({
existing key overwrites its min rank and description.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Permissions" value={permissions.length} icon="🔑" />
<StatusCard label="Highest min rank" value={maxRank} icon="⬆️" />
<StatusCard label="Total min rank" value={totalMin} icon="∑" />
</div>
<div className="card admin-section-header" style={{ marginBottom: "1rem" }}>
<div className="card mt-6" style={{ marginBottom: "1rem" }}>
<div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
<form style={{ display: "flex", gap: "0.5rem", flex: 1 }}>
<input
@@ -97,7 +97,7 @@ export default async function AdminHousekeeping({
</div>
{mode === "manage" ? (
<section className="admin-section">
<section className="mt-6">
<h2>Add / overwrite permission</h2>
<form action={upsertPermission} className="card">
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
@@ -109,7 +109,7 @@ export default async function AdminHousekeeping({
</form>
</section>
) : (
<section className="admin-section">
<section className="mt-6">
<h2>Import Permissions</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Paste comma-separated permission IDs to import them as a selection.
@@ -123,9 +123,9 @@ export default async function AdminHousekeeping({
</section>
)}
<section className="admin-section">
<section className="mt-6">
<h2>
Permissions <span className="admin-badge">{filtered.length}</span>
Permissions <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{filtered.length}</span>
</h2>
{filtered.length === 0 ? (
<p className="muted">No housekeeping permissions match this search.</p>
src/app/admin/ip/page.tsx
+3 -3
View File
@@ -49,7 +49,7 @@ export default async function AdminIp() {
Allow or block IP addresses (and ASNs) at the website edge.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Whitelisted"
value={whitelist.length}
@@ -66,7 +66,7 @@ export default async function AdminIp() {
<div className="grid cols-2">
{/* ── Whitelist ──────────────────── */}
<section className="admin-section">
<section className="mt-6">
<h2>Whitelist</h2>
<form action={addWhitelist} className="card" style={{ marginBottom: "1rem" }}>
@@ -120,7 +120,7 @@ export default async function AdminIp() {
</section>
{/* ── Blacklist ──────────────────── */}
<section className="admin-section">
<section className="mt-6">
<h2>Blacklist</h2>
<form action={addBlacklist} className="card" style={{ marginBottom: "1rem" }}>
src/app/admin/layout.tsx
+21 -14
View File
@@ -92,22 +92,29 @@ export default async function AdminLayout({ children }: { children: ReactNode })
const initial = staff.username.charAt(0).toUpperCase();
return (
<div className="admin">
<aside className="admin-sidebar">
<div className="admin-sidebar-head">
<span className="admin-avatar" aria-hidden>
<div className="grid grid-cols-1 lg:grid-cols-[232px_minmax(0,1fr)] gap-5 items-start">
<aside className="sticky top-4 self-start bg-[#2d2d44] text-[#e7e9f3] rounded-xl p-3.5 shadow-card max-h-[calc(100vh-2rem)] overflow-y-auto">
<div className="flex items-center gap-2.5 px-1.5 pb-3.5 border-b border-white/10 mb-2">
<span
className="flex-none w-[38px] h-[38px] rounded-lg grid place-items-center font-extrabold text-[#1a1a2e] bg-[var(--color-primary)]"
aria-hidden
>
{initial}
</span>
<div style={{ minWidth: 0 }}>
<div className="admin-sidebar-name">{staff.username}</div>
<span className="admin-rank-badge">rank {staff.rank}</span>
<div className="min-w-0">
<div className="font-bold text-sm leading-tight text-white truncate">{staff.username}</div>
<span className="inline-block mt-0.5 text-[0.66rem] font-bold uppercase tracking-wider text-[#1a1a2e] bg-[var(--color-primary)] rounded-full px-2 py-0.5">
rank {staff.rank}
</span>
</div>
</div>
<nav className="admin-nav">
<nav className="flex flex-col gap-0.5">
{NAV_GROUPS.map((group) => (
<div key={group.label} className="admin-nav-group">
<span className="admin-nav-group-label">{group.label}</span>
<div key={group.label} className="mt-2">
<span className="block text-[0.64rem] font-bold uppercase tracking-widest text-[rgba(231,233,243,0.42)] px-2.5 pb-1">
{group.label}
</span>
{group.items.map((item) => (
<AdminNavLink key={item.href} href={item.href} label={item.label} />
))}
@@ -116,10 +123,10 @@ export default async function AdminLayout({ children }: { children: ReactNode })
</nav>
</aside>
<div className="admin-content">
<header className="admin-topbar">
<h2>Housekeeping</h2>
<span className="muted" style={{ fontSize: "0.8rem" }}>
<div className="min-w-0">
<header className="flex items-center justify-between gap-4 bg-[var(--color-surface)] border border-[var(--border)] rounded-xl px-4 py-3 mb-4 shadow-card">
<h2 className="m-0 text-base font-extrabold">Housekeeping</h2>
<span className="muted text-[0.8rem]">
Signed in as <strong>{staff.username}</strong>
</span>
</header>
src/app/admin/logs/page.tsx
+3 -3
View File
@@ -86,7 +86,7 @@ export default async function AdminStaffActivities({
Auditor trail of all staff actions in the hotel.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Total activities" value={total} icon="📋" />
<StatusCard label="On this page" value={activities.length} icon="📄" />
<StatusCard
@@ -130,7 +130,7 @@ export default async function AdminStaffActivities({
)}
</form>
<section className="admin-section">
<section className="mt-6">
<h2>Activities ({total})</h2>
{activities.length === 0 ? (
<p className="muted">No staff activities match this search.</p>
@@ -153,7 +153,7 @@ export default async function AdminStaffActivities({
<td className="muted" style={{ whiteSpace: "nowrap" }}>{fromDate(a.createdAt)}</td>
<td className="muted">#{Number(a.userId)} ({nameById.get(Number(a.userId)) ?? "unknown"})</td>
<td>
<span className="admin-badge">{a.action}</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{a.action}</span>
</td>
<td>{a.description}</td>
<td>
src/app/admin/maintenance/page.tsx
+4 -4
View File
@@ -41,7 +41,7 @@ export default async function AdminMaintenance() {
<code> website_settings</code> and read live by the login flow.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Maintenance"
value={enabled ? "ENABLED" : "Disabled"}
@@ -64,10 +64,10 @@ export default async function AdminMaintenance() {
</div>
{/* ── Current state ─────────────────────────────────────── */}
<section className="admin-section">
<section className="mt-6">
<h2>Current state</h2>
<div className="card" style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
<span className={`admin-badge ${enabled ? "danger" : "ok"}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-red-500/22 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}>
{enabled ? "ENABLED" : "disabled"}
</span>
<div>
@@ -84,7 +84,7 @@ export default async function AdminMaintenance() {
</section>
{/* ── Edit form ─────────────────────────────────────────── */}
<section className="admin-section">
<section className="mt-6">
<h2>Settings</h2>
<form action={saveMaintenance} className="card">
<label
src/app/admin/navigation/page.tsx
+4 -4
View File
@@ -29,7 +29,7 @@ type PublicRow = {
// Reusable yes/no pill so emulator boolean-ish "1"/"0" columns read consistently.
function YesNo({ on }: { on: boolean }) {
return (
<span className={`admin-badge ${on ? "ok" : "danger"}`}>{on ? "Yes" : "No"}</span>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${on ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>{on ? "Yes" : "No"}</span>
);
}
@@ -108,7 +108,7 @@ export default async function AdminNavigation() {
emulator tooling, not here.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Flat categories" value={flatcats.length} icon="📂" />
<StatusCard
label="Public (flatcats)"
@@ -126,7 +126,7 @@ export default async function AdminNavigation() {
</div>
{/* ── navigator_flatcats ───────────────────────────────── */}
<section className="admin-section">
<section className="mt-6">
<h2>Flat categories</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
<code>navigator_flatcats</code> · {flatcats.length} rows
@@ -174,7 +174,7 @@ export default async function AdminNavigation() {
</section>
{/* ── navigator_publics ────────────────────────────────── */}
<section className="admin-section">
<section className="mt-6">
<h2>Public rooms</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
<code>navigator_publics</code> · {publics.length} rows
src/app/admin/page.tsx
+22 -24
View File
@@ -52,7 +52,7 @@ export default async function AdminDashboard() {
<main>
<h1>Dashboard</h1>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Players online"
value={online}
@@ -75,44 +75,40 @@ export default async function AdminDashboard() {
/>
</div>
<section className="admin-section">
<h2 style={{ margin: 0 }}>Users by rank</h2>
<section className="mt-6">
<h2 className="m-0 text-lg">Users by rank</h2>
{rankCounts.length === 0 ? (
<p className="muted" style={{ marginTop: "0.7rem" }}>
<p className="muted mt-3">
{dbOk ? "No accounts to break down yet." : "DB unavailable."}
</p>
) : (
<div style={{ display: "grid", gap: "0.5rem", marginTop: "0.8rem" }}>
<div className="grid gap-2 mt-3">
{rankCounts.map((r) => {
const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
return (
<div
key={r.rank}
style={{ display: "grid", gridTemplateColumns: "5.5rem 1fr 3rem", alignItems: "center", gap: "0.6rem" }}
className="grid items-center gap-2.5"
style={{ gridTemplateColumns: "5.5rem 1fr 3rem" }}
>
<span className="muted" style={{ fontSize: "0.82rem", whiteSpace: "nowrap" }}>
<span className="text-[var(--color-text-muted)] text-[0.82rem] whitespace-nowrap">
Rank {r.rank}
</span>
<div
style={{
background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
borderRadius: "var(--radius-sm)",
height: "0.85rem",
overflow: "hidden",
}}
className="h-3.5 rounded-[var(--radius-sm)] overflow-hidden"
style={{ background: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}
role="img"
aria-label={`Rank ${r.rank}: ${r.count} accounts`}
>
<div
className="h-full rounded-[var(--radius-sm)]"
style={{
width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%`,
height: "100%",
background: "var(--color-primary, #eeb425)",
borderRadius: "var(--radius-sm)",
}}
/>
</div>
<strong style={{ fontSize: "0.85rem", textAlign: "right" }}>{r.count}</strong>
<strong className="text-[0.85rem] text-right">{r.count}</strong>
</div>
);
})}
@@ -120,17 +116,17 @@ export default async function AdminDashboard() {
)}
</section>
<section className="admin-section">
<div style={{ display: "flex", alignItems: "baseline", gap: "0.75rem" }}>
<h2 style={{ margin: 0 }}>Recent staff activity</h2>
<Link href="/admin/commandocentrum" className="muted" style={{ fontSize: "0.82rem" }}>
<section className="mt-6">
<div className="flex items-baseline gap-3">
<h2 className="m-0 text-lg">Recent staff activity</h2>
<Link href="/admin/commandocentrum" className="muted text-[0.82rem]">
View all →
</Link>
</div>
{activity.length === 0 ? (
<p className="muted">No staff activity logged yet.</p>
<p className="muted mt-3">No staff activity logged yet.</p>
) : (
<table style={{ marginTop: "0.7rem" }}>
<table className="mt-3">
<thead>
<tr>
<th>When</th>
@@ -142,12 +138,14 @@ export default async function AdminDashboard() {
<tbody>
{activity.map((a) => (
<tr key={String(a.id)}>
<td className="muted" style={{ whiteSpace: "nowrap" }}>
<td className="muted whitespace-nowrap">
{fromDate(a.createdAt)}
</td>
<td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
<td>
<span className="admin-badge">{a.action}</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">
{a.action}
</span>
</td>
<td>{a.description}</td>
</tr>
src/app/admin/permissions/page.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ export default async function AdminPermissions() {
a permission name to the minimum rank allowed to use it.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Permissions" value={permissions.length} icon="🔑" />
<StatusCard label="Highest min rank" value={highestRank} icon="🎖️" />
</div>
@@ -68,7 +68,7 @@ export default async function AdminPermissions() {
</div>
</form>
<section className="admin-section">
<section className="mt-6">
<h2>Permissions ({permissions.length})</h2>
{permissions.length === 0 ? (
<p className="muted">No permissions found.</p>
src/app/admin/photos/page.tsx
+2 -2
View File
@@ -26,13 +26,13 @@ export default async function AdminPhotos() {
<code>camera_web</code>.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Photos shown" value={photos.length} icon="📸" />
<StatusCard label="Rooms" value={uniqueRooms} hint="distinct rooms" icon="🚪" />
<StatusCard label="Users" value={uniqueUsers} hint="distinct photographers" icon="👤" />
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Recent photos</h2>
{photos.length === 0 ? (
<p className="muted">No photos found.</p>
src/app/admin/radio/api-keys/page.tsx
+5 -5
View File
@@ -74,7 +74,7 @@ export default async function AdminRadioApiKeysPage() {
<Link href="/admin/radio/monitoring">Monitoring</Link>
</nav>
<section className="admin-section">
<section className="mt-6">
<h1>Radio API Keys</h1>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
API keys for external radio integrations (<code>radio_api_keys</code>). Keys are generated
@@ -88,7 +88,7 @@ export default async function AdminRadioApiKeysPage() {
</p>
</div>
) : (
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Total keys" value={total} icon="🔑" />
<StatusCard
label="Active"
@@ -106,7 +106,7 @@ export default async function AdminRadioApiKeysPage() {
)}
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Generate key</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
The secret key is generated automatically with cryptographic randomness — you do not enter
@@ -161,7 +161,7 @@ export default async function AdminRadioApiKeysPage() {
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Existing keys ({total})</h2>
{total === 0 ? (
<p className="muted">No API keys yet — generate one above.</p>
@@ -194,7 +194,7 @@ export default async function AdminRadioApiKeysPage() {
<td className="muted">{formatDate(k.lastUsedAt)}</td>
<td className="muted">{formatDate(k.expiresAt)}</td>
<td>
<span className={`admin-badge ${k.isActive ? "ok" : "danger"}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
{k.isActive ? "active" : "inactive"}
</span>
</td>
src/app/admin/radio/autodj/page.tsx
+5 -5
View File
@@ -76,7 +76,7 @@ export default async function AdminRadioAutoDjPage() {
<Link href="/admin/radio/autodj">AutoDJ</Link>
</nav>
<section className="admin-section">
<section className="mt-6">
<h2>Radio AutoDJ</h2>
<p className="muted" style={{ marginTop: '-0.4rem' }}>
Fallback playlist (<code>radio_auto_dj_playlist</code>) the radio rotates
@@ -90,7 +90,7 @@ export default async function AdminRadioAutoDjPage() {
</p>
</div>
) : (
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Tracks" value={tracks.length} icon="🎵" />
<StatusCard
label="Active"
@@ -108,7 +108,7 @@ export default async function AdminRadioAutoDjPage() {
)}
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Add track</h2>
<form action={createTrack} className="card">
<div className="grid cols-2">
@@ -186,7 +186,7 @@ export default async function AdminRadioAutoDjPage() {
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Playlist ({tracks.length})</h2>
{tracks.length === 0 ? (
<p className="muted">No AutoDJ tracks yet — add one above.</p>
@@ -232,7 +232,7 @@ export default async function AdminRadioAutoDjPage() {
<td className="muted">{t.playCount}</td>
<td className="muted">{formatDate(t.lastPlayedAt)}</td>
<td>
<span className={`admin-badge ${t.isActive ? 'ok' : 'danger'}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${t.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
{t.isActive ? 'active' : 'inactive'}
</span>
</td>
src/app/admin/radio/banners/page.tsx
+4 -4
View File
@@ -72,7 +72,7 @@ export default async function AdminRadioBannersPage() {
</p>
</div>
) : (
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Banners" value={banners.length} icon="🖼️" />
<StatusCard
label="Active"
@@ -89,7 +89,7 @@ export default async function AdminRadioBannersPage() {
</div>
)}
<section className="admin-section">
<section className="mt-6">
<h2>Add banner</h2>
<form action={createRadioBanner} className="card">
<div className="grid cols-2">
@@ -148,7 +148,7 @@ export default async function AdminRadioBannersPage() {
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Existing banners ({banners.length})</h2>
{banners.length === 0 ? (
<p className="muted">No banners yet — add one above.</p>
@@ -170,7 +170,7 @@ export default async function AdminRadioBannersPage() {
style={{ display: 'inline-flex', gap: '0.5rem', alignItems: 'center' }}
>
by user {String(b.userId)} · {formatDate(b.createdAt)} ·{' '}
<span className={`admin-badge ${b.isActive ? 'ok' : 'danger'}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
{b.isActive ? 'active' : 'hidden'}
</span>
</span>
src/app/admin/radio/embed/embed-snippet.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export function EmbedSnippet({
const lines = snippet.split('\n').length;
return (
<section className="admin-section">
<section className="mt-6">
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<h2 style={{ flex: 1, margin: 0 }}>{title}</h2>
<button type="button" className="btn btn-primary" onClick={copy}>
src/app/admin/radio/embed/page.tsx
+4 -4
View File
@@ -53,7 +53,7 @@ export default async function AdminRadioEmbedPage() {
<Link href="/admin/radio/history">History</Link>
</nav>
<section className="admin-section">
<section className="mt-6">
<h1>Radio Embed</h1>
<p className="muted" style={{ marginTop: '-0.4rem' }}>
Copy-ready embed code for the live stream. Read-only — nothing here
@@ -62,7 +62,7 @@ export default async function AdminRadioEmbedPage() {
<code>radio_stream_url</code>).
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Stream URL"
value={hasStream ? 'Configured' : 'Missing'}
@@ -80,7 +80,7 @@ export default async function AdminRadioEmbedPage() {
</section>
{!hasStream ? (
<section className="admin-section">
<section className="mt-6">
<h2>No stream URL configured</h2>
<p className="muted">
There is no <code>radio_stream_url</code> set, so there is nothing to
@@ -98,7 +98,7 @@ export default async function AdminRadioEmbedPage() {
</section>
) : (
<>
<section className="admin-section">
<section className="mt-6">
<h2>Live preview</h2>
<p className="muted" style={{ marginTop: '-0.4rem' }}>
This is the bare <code>&lt;audio&gt;</code> player as visitors will
src/app/admin/radio/history/page.tsx
+3 -3
View File
@@ -95,7 +95,7 @@ export default async function AdminRadioHistoryPage() {
</p>
</div>
) : (
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Shows logged" value={history.length} icon="🎙️" />
<StatusCard
label="On air now"
@@ -113,7 +113,7 @@ export default async function AdminRadioHistoryPage() {
) : null}
{history.length > 0 ? (
<section className="admin-section">
<section className="mt-6">
<h2>Show log ({history.length})</h2>
<table>
<thead>
@@ -139,7 +139,7 @@ export default async function AdminRadioHistoryPage() {
{h.endedAt ? (
<span className="muted">{formatDate(h.endedAt)}</span>
) : (
<span className="admin-badge ok">on air</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">on air</span>
)}
</td>
<td className="muted">{formatDuration(h.startedAt, h.endedAt)}</td>
src/app/admin/radio/moderation/page.tsx
+2 -2
View File
@@ -51,11 +51,11 @@ export default async function AdminRadioModerationPage() {
Review and remove radio shouts (50 most recent).
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Recent shouts" value={shouts.length} icon="📣" />
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Recent Shouts ({shouts.length})</h2>
{shouts.length === 0 ? (
<p className="muted">No shouts to moderate.</p>
src/app/admin/radio/monitoring/page.tsx
+7 -7
View File
@@ -224,7 +224,7 @@ export default async function AdminRadioMonitoringPage() {
<Link href="/admin/radio/history">History</Link>
</nav>
<section className="admin-section">
<section className="mt-6">
<h2>Radio Monitoring</h2>
<p className="muted" style={{ marginTop: '-0.4rem' }}>
Read-only live probe of the configured radio endpoints
@@ -234,7 +234,7 @@ export default async function AdminRadioMonitoringPage() {
<Link href="/admin/radio/settings">Settings</Link>.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Stream"
value={
@@ -261,14 +261,14 @@ export default async function AdminRadioMonitoringPage() {
</div>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Endpoint diagnostics</h2>
<p className="muted" style={{ marginTop: '-0.4rem' }}>
<span className="admin-badge ok">OK</span> reachable ·{' '}
<span className="admin-badge">WARN</span> not configured ·{' '}
<span className="admin-badge danger">ERROR</span> fetch failed / timed out.
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">OK</span> reachable ·{' '}
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">WARN</span> not configured ·{' '}
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">ERROR</span> fetch failed / timed out.
</p>
<div className="admin-diag">
<div className="flex flex-col">
{endpoints.map((ep) => {
let state: 'ok' | 'warn' | 'danger';
let detail: string;
src/app/admin/radio/page.tsx
+6 -6
View File
@@ -121,7 +121,7 @@ export default async function AdminRadioPage() {
Latest shouts, DJ applications and on-air schedules (25 most recent of each).
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Recent shouts" value={shouts.length} icon="📣" />
<StatusCard
label="Pending applications"
@@ -138,7 +138,7 @@ export default async function AdminRadioPage() {
/>
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Recent Shouts ({shouts.length})</h2>
{shouts.length === 0 ? (
<p className="muted">No shouts to moderate.</p>
@@ -175,7 +175,7 @@ export default async function AdminRadioPage() {
)}
</section>
<section className="admin-section">
<section className="mt-6">
<h2>DJ Applications ({applications.length})</h2>
{applications.length === 0 ? (
<p className="muted">No applications submitted.</p>
@@ -203,7 +203,7 @@ export default async function AdminRadioPage() {
<td>{a.musicStyle ?? '—'}</td>
<td>{a.discordUsername ?? '—'}</td>
<td>
<span className={`admin-badge ${statusBadgeClass(a.status)}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === 'ok' ? 'bg-green-600/20 text-[var(--color-text)]' : statusBadgeClass(a.status) === 'danger' ? 'bg-red-500/22 text-[var(--color-text)]' : 'bg-[var(--color-primary)]/18 text-[var(--color-text)]'}`}>
{a.status}
</span>
</td>
@@ -215,7 +215,7 @@ export default async function AdminRadioPage() {
)}
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Schedules ({schedules.length})</h2>
{schedules.length === 0 ? (
<p className="muted">No schedules configured.</p>
@@ -242,7 +242,7 @@ export default async function AdminRadioPage() {
<td>{formatTime(sc.endTime)}</td>
<td>{sc.showName ?? '—'}</td>
<td>
<span className={`admin-badge ${sc.isActive ? 'ok' : 'danger'}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
{sc.isActive ? 'active' : 'inactive'}
</span>
</td>
src/app/admin/radio/points/page.tsx
+4 -4
View File
@@ -66,7 +66,7 @@ export default async function AdminRadioPointsPage({
<Link href="/admin/radio/history">History</Link>
</nav>
<section className="admin-section">
<section className="mt-6">
<h2>Radio Listener Points</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Reward listeners with currency for time spent on the radio. Edits write
@@ -77,11 +77,11 @@ export default async function AdminRadioPointsPage({
{saved === "1" ? (
<p>
<span className="admin-badge ok">Saved</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Saved</span>
</p>
) : null}
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Points"
value={enabled ? "Enabled" : "Disabled"}
@@ -103,7 +103,7 @@ export default async function AdminRadioPointsPage({
</div>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Settings</h2>
<form action={savePoints}>
<div className="grid cols-2">
src/app/admin/radio/ranks/page.tsx
+4 -4
View File
@@ -61,7 +61,7 @@ export default async function AdminRadioRanksPage() {
</p>
</div>
) : (
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Ranks" value={ranks.length} icon="🎖️" />
<StatusCard
label="Active"
@@ -72,7 +72,7 @@ export default async function AdminRadioRanksPage() {
</div>
)}
<section className="admin-section">
<section className="mt-6">
<h2>Add rank</h2>
<form action={createRadioRank} className="card">
<div className="grid cols-3">
@@ -108,7 +108,7 @@ export default async function AdminRadioRanksPage() {
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Existing ranks ({ranks.length})</h2>
{ranks.length === 0 ? (
<p className="muted">No ranks yet — add one above.</p>
@@ -126,7 +126,7 @@ export default async function AdminRadioRanksPage() {
}}
>
<strong>#{String(r.id)}</strong>
<span className={`admin-badge ${r.isActive ? 'ok' : 'danger'}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
{r.isActive ? 'active' : 'inactive'}
</span>
</div>
src/app/admin/radio/settings/page.tsx
+1 -1
View File
@@ -241,7 +241,7 @@ export default async function AdminRadioSettingsPage() {
</p>
</div>
) : (
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Radio"
value={radioEnabled ? 'Enabled' : 'Disabled'}
src/app/admin/rare-values/page.tsx
+4 -4
View File
@@ -46,7 +46,7 @@ export default async function AdminRareValues() {
rendered as a tab on the public rare values page.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Categories" value={categories.length} icon="🗂️" />
<StatusCard label="Rare items" value={values.length} icon="💎" />
</div>
@@ -82,8 +82,8 @@ export default async function AdminRareValues() {
>
<div style={{ display: "flex", gap: "0.6rem", alignItems: "baseline", flexWrap: "wrap" }}>
<strong>{cat.name}</strong>
<span className="admin-badge">badge {cat.badge}</span>
<span className="admin-badge">priority {cat.priority}</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">badge {cat.badge}</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">priority {cat.priority}</span>
<span className="muted">{rows.length} item{rows.length === 1 ? "" : "s"}</span>
</div>
<form action={deleteCategory}>
@@ -112,7 +112,7 @@ export default async function AdminRareValues() {
<td>{v.creditValue ?? "—"}</td>
<td>{v.currencyValue ?? "—"}</td>
<td>
<span className="admin-badge">{v.currencyType}</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{v.currencyType}</span>
</td>
<td className="muted">{v.furnitureIcon}</td>
<td>
src/app/admin/rooms/page.tsx
+2 -2
View File
@@ -73,7 +73,7 @@ export default async function AdminRooms({
{total} room{total === 1 ? "" : "s"} total.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label={q ? "Matching rooms" : "Total rooms"} value={total} icon="🏠" />
<StatusCard label="Open (this page)" value={openOnPage} state="ok" icon="🔓" />
<StatusCard label="Users in-room (this page)" value={usersOnPage} icon="👥" />
@@ -110,7 +110,7 @@ export default async function AdminRooms({
{r.users} / {r.usersMax}
</td>
<td>
<span className={`admin-badge ${r.state === "open" ? "ok" : "danger"}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.state === "open" ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
{r.state}
</span>
</td>
src/app/admin/settings/page.tsx
+4 -4
View File
@@ -21,12 +21,12 @@ export default async function AdminSettings() {
Key/value config read at runtime via <code>siteSettings.get()</code>. Saving busts the cache.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Settings" value={settings.length} icon="🗄️" />
<StatusCard label="With comment" value={documented} icon="📝" />
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Add / overwrite</h2>
<form action={createSetting} className="card">
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
@@ -40,9 +40,9 @@ export default async function AdminSettings() {
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>
Settings <span className="admin-badge">{settings.length}</span>
Settings <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{settings.length}</span>
</h2>
{settings.length === 0 ? (
<p className="muted">No settings yet.</p>
src/app/admin/shop/page.tsx
+4 -4
View File
@@ -51,7 +51,7 @@ export default async function AdminShop() {
shown in the store; credits/duckets/diamonds/badges are what the buyer receives.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Packages" value={packages.length} icon="🛍️" />
<StatusCard label="Recent orders" value={orders.length} icon="🧾" />
<StatusCard
@@ -62,7 +62,7 @@ export default async function AdminShop() {
/>
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Packages ({packages.length})</h2>
{packages.length === 0 ? (
<p className="muted">No shop packages yet.</p>
@@ -102,7 +102,7 @@ export default async function AdminShop() {
)}
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Recent orders ({orders.length})</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Read-only PayPal transaction log (<code>website_paypal_transactions</code>).
@@ -138,7 +138,7 @@ export default async function AdminShop() {
<td>
{o.status ? (
<span
className={`admin-badge ${state === "ok" ? "ok" : state === "danger" ? "danger" : ""}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : state === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
>
{o.status}
</span>
src/app/admin/subscriptions/page.tsx
+3 -3
View File
@@ -52,7 +52,7 @@ export default async function AdminSubscriptions() {
Active Habbo Club / VIP subscriptions (expiry &gt; now). Read-only.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Active subs" value={active.length} icon="⭐" />
<StatusCard label="Types" value={types} icon="🏷️" />
<StatusCard
@@ -63,7 +63,7 @@ export default async function AdminSubscriptions() {
/>
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Active subscriptions ({active.length})</h2>
<div className="card">
<table>
@@ -85,7 +85,7 @@ export default async function AdminSubscriptions() {
<td>{s.userId ?? "—"}</td>
<td>{s.subscriptionType ?? "—"}</td>
<td>
<span className={`admin-badge ${soon ? "" : "ok"}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${soon ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}>
{soon ? "Expiring" : "Active"}
</span>
</td>
src/app/admin/tags/page.tsx
+4 -4
View File
@@ -56,7 +56,7 @@ export default async function AdminTagsPage() {
</p>
</div>
) : (
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Tags" value={tags.length} icon="🏷️" />
<StatusCard
label="In use"
@@ -114,7 +114,7 @@ export default async function AdminTagsPage() {
</div>
</form>
<section className="admin-section">
<section className="mt-6">
<h2>All tags</h2>
{tags.length === 0 ? (
<p className="muted">No tags yet.</p>
@@ -152,8 +152,8 @@ export default async function AdminTagsPage() {
</td>
<td>
<span
className={`admin-badge ${
(usage.get(String(t.id)) ?? 0) > 0 ? 'ok' : ''
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${
(usage.get(String(t.id)) ?? 0) > 0 ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-[var(--color-primary)]/18 text-[var(--color-text)]'
}`}
>
{usage.get(String(t.id)) ?? 0}
src/app/admin/teams/page.tsx
+3 -3
View File
@@ -40,7 +40,7 @@ export default async function AdminTeams() {
Staff rank definitions shown on the public team page.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Team ranks" value={teams.length} icon="🛡️" />
<StatusCard
label="Visible"
@@ -84,7 +84,7 @@ export default async function AdminTeams() {
</form>
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Ranks ({teams.length})</h2>
{teams.length === 0 ? (
<p className="muted">No teams yet.</p>
@@ -131,7 +131,7 @@ export default async function AdminTeams() {
</span>
</td>
<td>
<span className={`admin-badge ${t.hiddenRank ? "" : "ok"}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${t.hiddenRank ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}>
{t.hiddenRank ? "hidden" : "visible"}
</span>
</td>
src/app/admin/theme/page.tsx
+7 -7
View File
@@ -97,17 +97,17 @@ export default async function AdminTheme({
</p>
{sp.saved ? (
<p className="admin-badge ok" style={{ display: "inline-block" }}>
<p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
Theme saved
</p>
) : null}
{sp.preset ? (
<p className="admin-badge ok" style={{ display: "inline-block" }}>
<p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
Applied preset “{sp.preset}”
</p>
) : null}
<section className="admin-section">
<section className="mt-6">
<h2>Presets</h2>
<div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
{Object.entries(PRESETS).map(([name, palette]) => (
@@ -141,17 +141,17 @@ export default async function AdminTheme({
</section>
<form action={saveTheme}>
<section className="admin-section">
<section className="mt-6">
<h2>Colours</h2>
<div className="card">{colorGrid(COLOR_FIELDS, current)}</div>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Buttons & links</h2>
<div className="card">{colorGrid(BUTTON_FIELDS, current)}</div>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Typography & layout</h2>
<div className="card">
<div style={{ display: "flex", flexWrap: "wrap", gap: "1.25rem", alignItems: "center" }}>
@@ -193,7 +193,7 @@ export default async function AdminTheme({
</div>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Custom CSS</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Injected raw into every page (after the theme variables). Use it for tweaks the controls
src/app/admin/transactions/page.tsx
+3 -3
View File
@@ -93,7 +93,7 @@ export default async function AdminTransactions({
Read-only · PayPal / top-up transactions recorded by the CMS, newest first.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Total transactions" value={total} icon="🧾" />
<StatusCard
label="Paid (this page)"
@@ -109,7 +109,7 @@ export default async function AdminTransactions({
/>
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Transactions ({total})</h2>
{transactions.length === 0 ? (
<p className="muted">No transactions.</p>
@@ -143,7 +143,7 @@ export default async function AdminTransactions({
<td>
{t.status ? (
<span
className={`admin-badge ${state === "ok" ? "ok" : state === "danger" ? "danger" : ""}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : state === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
>
{t.status}
</span>
src/app/admin/users/[id]/page.tsx
+5 -5
View File
@@ -39,7 +39,7 @@ export default async function AdminUserDetail({
{user.motto ? user.motto : "No motto set."}
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="User ID" value={user.id} icon="🆔" />
<StatusCard label="Rank" value={user.rank} icon="🎖️" />
<StatusCard label="Credits" value={user.credits} icon="💰" />
@@ -51,14 +51,14 @@ export default async function AdminUserDetail({
/>
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Overview</h2>
<div className="admin-info-grid">
<div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
<InfoItem label="Username" value={user.username} />
<InfoItem
label="Status"
value={
<span className={`admin-badge ${isOnline ? "ok" : ""}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${isOnline ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
{isOnline ? "online" : "offline"}
</span>
}
@@ -69,7 +69,7 @@ export default async function AdminUserDetail({
</div>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Actions</h2>
<div className="grid cols-2">
<form action={giveCurrency} className="card">
src/app/admin/users/page.tsx
+3 -3
View File
@@ -37,7 +37,7 @@ export default async function AdminUsers({
{q ? `Search results for “${q}”.` : "Most recent accounts first."}
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Total users" value={total} icon="👥" />
<StatusCard label="On this page" value={users.length} icon="📄" />
<StatusCard
@@ -63,7 +63,7 @@ export default async function AdminUsers({
</button>
</form>
<section className="admin-section">
<section className="mt-6">
<h2>Accounts ({total})</h2>
{users.length === 0 ? (
<p className="muted">No users match this search.</p>
@@ -90,7 +90,7 @@ export default async function AdminUsers({
<td>{u.rank}</td>
<td>{u.credits}</td>
<td>
<span className={`admin-badge ${u.online === "1" ? "ok" : ""}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${u.online === "1" ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
{u.online === "1" ? "online" : "offline"}
</span>
</td>
src/app/admin/vouchers/page.tsx
+5 -5
View File
@@ -61,7 +61,7 @@ export default async function AdminVouchers() {
use a given voucher once, up to its max uses.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Vouchers" value={vouchers.length} icon="🎟️" />
<StatusCard
label="Active"
@@ -106,7 +106,7 @@ export default async function AdminVouchers() {
<button type="submit" className="btn btn-primary">Create voucher</button>
</form>
<section className="admin-section">
<section className="mt-6">
<h2>Vouchers ({vouchers.length})</h2>
<div className="card">
<table>
@@ -136,11 +136,11 @@ export default async function AdminVouchers() {
</td>
<td>
{expired ? (
<span className="admin-badge danger">Expired</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">Expired</span>
) : usedUp ? (
<span className="admin-badge">Used up</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">Used up</span>
) : (
<span className="admin-badge ok">Active</span>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">Active</span>
)}
</td>
<td className="muted">{fmtDate(v.expiresAt)}</td>
src/app/admin/vpn/page.tsx
+5 -5
View File
@@ -31,7 +31,7 @@ export default async function AdminVpn({
return (
<main>
<section className="admin-section">
<section className="mt-6">
<h2>VPN / Proxy Detection</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Block registrations from detected VPN/proxy IPs at sign-up. Settings
@@ -41,12 +41,12 @@ export default async function AdminVpn({
</p>
{sp.saved ? (
<p className="admin-badge ok" style={{ display: "inline-block" }}>
<p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]" style={{ display: "inline-block" }}>
VPN settings saved
</p>
) : null}
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard
label="Protection"
value={enabled ? "On" : "Off"}
@@ -57,7 +57,7 @@ export default async function AdminVpn({
</div>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Settings</h2>
<form action={saveVpn} className="card">
<div style={{ marginBottom: "1rem" }}>
@@ -147,7 +147,7 @@ export default async function AdminVpn({
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Raw IP allow / deny list</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
VPN detection screens unknown IPs automatically. To explicitly allow
src/app/admin/wordfilter/page.tsx
+4 -4
View File
@@ -25,11 +25,11 @@ export default async function AdminWordFilter() {
Words added here are blocked in-game. Saving pushes the list to the emulator.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Filtered words" value={words.length} icon="🚫" />
</div>
<section className="admin-section">
<section className="mt-6">
<h2>Add word</h2>
<form action={addWord} className="card">
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
@@ -47,9 +47,9 @@ export default async function AdminWordFilter() {
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>
Words <span className="admin-badge">{words.length}</span>
Words <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{words.length}</span>
</h2>
{words.length === 0 ? (
<p className="muted">No filtered words.</p>
src/app/admin/writeable-boxes/page.tsx
+5 -5
View File
@@ -18,7 +18,7 @@ export default async function AdminWriteableBoxes() {
return (
<main>
<section className="admin-section">
<section className="mt-6">
<h2>Writeable boxes</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Content panels stored in <code>website_writeable_boxes</code> and ordered by{" "}
@@ -26,7 +26,7 @@ export default async function AdminWriteableBoxes() {
hidden ones are kept here as drafts.
</p>
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Total boxes" value={boxes.length} icon="🗂️" />
<StatusCard
label="Active"
@@ -38,7 +38,7 @@ export default async function AdminWriteableBoxes() {
</div>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>New box</h2>
<form action={createBox} className="grid cols-2">
<div>
@@ -96,7 +96,7 @@ export default async function AdminWriteableBoxes() {
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Boxes ({boxes.length})</h2>
{boxes.length === 0 ? (
<p className="muted">No writeable boxes yet.</p>
@@ -115,7 +115,7 @@ export default async function AdminWriteableBoxes() {
<span className="muted">#{String(box.id)}</span>
{box.icon ? <span aria-hidden>{box.icon}</span> : null}
<strong style={{ flex: 1 }}>{box.title}</strong>
<span className={`admin-badge ${box.isActive ? "ok" : "danger"}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${box.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
{box.isActive ? "Active" : "Hidden"}
</span>
</div>