The Commandocentrum (AtomCMS's verification/diagnostics hub) was just RCON buttons + an error table. Rebuilt it as a real status dashboard, and gave the admin home the same treatment, with reusable StatusCard / DiagnosticRow / InfoItem components and a scoped CSS layer: Commandocentrum now shows: - Live status tiles: players online, emulator (RCON ping), database, emulator error count — colour-accented by state. - Server info: Node version, platform, app/host uptime, heap/RSS, load, CPUs (from node:os / process). - System diagnostics: DB, emulator RCON, RCON config, APP_KEY (2FA), SMTP, maintenance mode — each with an ok/warn/error dot + pill. - Existing RCON controls + hotel alert, a recent staff-activity feed (staff_activities, now a real table), and the emulator error log. Admin home: four status tiles (online/articles/active bans/database) + recent staff activity, replacing the three plain count cards. Verified in a real authed admin session (prod, amx_test): both pages render the tiles/diagnostics with live data (Node v22, real memory/uptime, APP_KEY/SMTP correctly flagged WARN). tsc 0, vitest 49/49, next build 0.
106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import Link from "next/link";
|
|
import { StatusCard } from "@/components/admin/dashboard";
|
|
import { prisma } from "@/lib/prisma";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
function fromDate(d: Date | null | undefined): string {
|
|
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "—";
|
|
}
|
|
|
|
export default async function AdminDashboard() {
|
|
let users = -1;
|
|
let online = 0;
|
|
let articles = 0;
|
|
let bans = 0;
|
|
try {
|
|
[users, online, articles, bans] = await Promise.all([
|
|
prisma.user.count(),
|
|
prisma.user.count({ where: { online: "1" } }),
|
|
prisma.websiteArticles.count(),
|
|
prisma.ban.count({ where: { banExpire: { gt: Math.floor(Date.now() / 1000) } } }),
|
|
]);
|
|
} catch {
|
|
// DB unavailable — show zeroed stats instead of a 500.
|
|
}
|
|
const dbOk = users >= 0;
|
|
|
|
const activity = await prisma.staffActivities
|
|
.findMany({ orderBy: { createdAt: "desc" }, take: 8 })
|
|
.catch(() => [] as Awaited<ReturnType<typeof prisma.staffActivities.findMany>>);
|
|
const staffIds = Array.from(new Set(activity.map((a) => Number(a.userId)))).filter((n) => n > 0);
|
|
let nameById = new Map<number, string>();
|
|
if (staffIds.length) {
|
|
const u = await prisma.user
|
|
.findMany({ where: { id: { in: staffIds } }, select: { id: true, username: true } })
|
|
.catch(() => []);
|
|
nameById = new Map(u.map((x) => [x.id, x.username]));
|
|
}
|
|
|
|
return (
|
|
<main>
|
|
<h1>Dashboard</h1>
|
|
|
|
<div className="admin-stats">
|
|
<StatusCard
|
|
label="Players online"
|
|
value={online}
|
|
hint={dbOk ? `${users} accounts` : "DB unavailable"}
|
|
state={dbOk ? "neutral" : "danger"}
|
|
icon="👤"
|
|
/>
|
|
<StatusCard label="Articles" value={dbOk ? articles : "—"} icon="📰" />
|
|
<StatusCard
|
|
label="Active bans"
|
|
value={dbOk ? bans : "—"}
|
|
state={bans > 0 ? "warn" : "neutral"}
|
|
icon="🔨"
|
|
/>
|
|
<StatusCard
|
|
label="Database"
|
|
value={dbOk ? "Connected" : "Down"}
|
|
state={dbOk ? "ok" : "danger"}
|
|
icon="🗄️"
|
|
/>
|
|
</div>
|
|
|
|
<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" }}>
|
|
View all →
|
|
</Link>
|
|
</div>
|
|
{activity.length === 0 ? (
|
|
<p className="muted">No staff activity logged yet.</p>
|
|
) : (
|
|
<table style={{ marginTop: "0.7rem" }}>
|
|
<thead>
|
|
<tr>
|
|
<th>When</th>
|
|
<th>Staff</th>
|
|
<th>Action</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{activity.map((a) => (
|
|
<tr key={String(a.id)}>
|
|
<td className="muted" style={{ whiteSpace: "nowrap" }}>
|
|
{fromDate(a.createdAt)}
|
|
</td>
|
|
<td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
|
|
<td>
|
|
<span className="admin-badge">{a.action}</span>
|
|
</td>
|
|
<td>{a.description}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|