feat(admin): items_base browser and AdminPageShell on core pages
Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed
1 parent
7138ae4445
commit
98613af875
42 files changed
+2196
-698
No files matched your search
@@ -1,6 +1,8 @@
|
||||
import os from "node:os";
|
||||
import { Terminal } from "lucide-react";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { AdminPageShell } from "@/components/admin/admin-page-shell";
|
||||
import {
|
||||
DiagnosticRow,
|
||||
InfoItem,
|
||||
@@ -87,205 +89,219 @@ export default async function CommandoCentrum() {
|
||||
const rconSet = !!process.env.RCON_HOST;
|
||||
|
||||
return (
|
||||
<main>
|
||||
{/* ── Live status ────────────────────────────────────────── */}
|
||||
<div
|
||||
className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6"
|
||||
style={{ marginTop: "1.1rem" }}
|
||||
>
|
||||
<StatusCard
|
||||
label={t("playersOnline")}
|
||||
value={onlineCount}
|
||||
hint={
|
||||
totalUsers >= 0
|
||||
? t("totalAccounts", { count: totalUsers })
|
||||
: t("dbUnavailable")
|
||||
}
|
||||
state="neutral"
|
||||
icon="👤"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("emulator")}
|
||||
value={emulatorOnline ? t("online") : t("offline")}
|
||||
hint={emulatorOnline ? t("rconReachable") : t("rconNotResponding")}
|
||||
state={emulatorOnline ? "ok" : "danger"}
|
||||
icon="🎮"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("database")}
|
||||
value={dbOk ? t("connected") : t("down")}
|
||||
hint={dbOk ? t("queriesResponding") : t("cannotReachDb")}
|
||||
state={dbOk ? "ok" : "danger"}
|
||||
icon="🗄️"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("emulatorErrors")}
|
||||
value={errors.length}
|
||||
hint={t("last50Logged")}
|
||||
state={errors.length === 0 ? "ok" : "warn"}
|
||||
icon="⚠️"
|
||||
/>
|
||||
</div>
|
||||
<AdminPageShell icon={Terminal} title={t("title")} subtitle={t("subtitle")}>
|
||||
<main>
|
||||
{/* ── Live status ────────────────────────────────────────── */}
|
||||
<div
|
||||
className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6"
|
||||
style={{ marginTop: "1.1rem" }}
|
||||
>
|
||||
<StatusCard
|
||||
label={t("playersOnline")}
|
||||
value={onlineCount}
|
||||
hint={
|
||||
totalUsers >= 0
|
||||
? t("totalAccounts", { count: totalUsers })
|
||||
: t("dbUnavailable")
|
||||
}
|
||||
state="neutral"
|
||||
icon="👤"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("emulator")}
|
||||
value={emulatorOnline ? t("online") : t("offline")}
|
||||
hint={emulatorOnline ? t("rconReachable") : t("rconNotResponding")}
|
||||
state={emulatorOnline ? "ok" : "danger"}
|
||||
icon="🎮"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("database")}
|
||||
value={dbOk ? t("connected") : t("down")}
|
||||
hint={dbOk ? t("queriesResponding") : t("cannotReachDb")}
|
||||
state={dbOk ? "ok" : "danger"}
|
||||
icon="🗄️"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("emulatorErrors")}
|
||||
value={errors.length}
|
||||
hint={t("last50Logged")}
|
||||
state={errors.length === 0 ? "ok" : "warn"}
|
||||
icon="⚠️"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ── Online users widget ───────────────────────────────── */}
|
||||
<section id="online" className="admin-card mb-6 scroll-mt-4">
|
||||
<h2 className="admin-section-title">{t("onlineUsers")}</h2>
|
||||
<OnlineUsersWidget users={onlineUsers} isLoading={false} />
|
||||
</section>
|
||||
|
||||
{/* ── Server info + diagnostics ──────────────────────────── */}
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<section className="admin-card p-5">
|
||||
<h2 className="admin-section-title">{t("serverInfo")}</h2>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
|
||||
<InfoItem label={t("node")} value={process.version} />
|
||||
<InfoItem
|
||||
label={t("platform")}
|
||||
value={`${process.platform} ${process.arch}`}
|
||||
/>
|
||||
<InfoItem label={t("appUptime")} value={uptime(process.uptime())} />
|
||||
<InfoItem
|
||||
label={t("heapUsed")}
|
||||
value={mb(process.memoryUsage().heapUsed)}
|
||||
/>
|
||||
<InfoItem label={t("rss")} value={mb(process.memoryUsage().rss)} />
|
||||
<InfoItem label={t("hostUptime")} value={uptime(os.uptime())} />
|
||||
<InfoItem
|
||||
label={t("load1m")}
|
||||
value={os.loadavg()[0]?.toFixed(2) ?? "—"}
|
||||
/>
|
||||
<InfoItem label={t("cpus")} value={os.cpus().length} />
|
||||
</div>
|
||||
{/* ── Online users widget ───────────────────────────────── */}
|
||||
<section id="online" className="admin-card mb-6 scroll-mt-4">
|
||||
<h2 className="admin-section-title">{t("onlineUsers")}</h2>
|
||||
<OnlineUsersWidget users={onlineUsers} isLoading={false} />
|
||||
</section>
|
||||
|
||||
<section className="admin-card p-5">
|
||||
<h2 className="admin-section-title">{t("systemDiagnostics")}</h2>
|
||||
<div className="flex flex-col">
|
||||
<DiagnosticRow
|
||||
label={t("database")}
|
||||
detail={dbOk ? t("connectionHealthy") : t("unreachable")}
|
||||
state={dbOk ? "ok" : "danger"}
|
||||
/>
|
||||
<DiagnosticRow
|
||||
label={t("emulatorRcon")}
|
||||
detail={emulatorOnline ? t("respondingToPing") : t("noResponse")}
|
||||
state={emulatorOnline ? "ok" : "warn"}
|
||||
/>
|
||||
<DiagnosticRow
|
||||
label={t("rconConfig")}
|
||||
detail={rconSet ? t("rconHostSet") : t("rconHostNotConfigured")}
|
||||
state={rconSet ? "ok" : "warn"}
|
||||
/>
|
||||
<DiagnosticRow
|
||||
label={t("twoFaEncryptionKey")}
|
||||
detail={appKeySet ? t("appKeyConfigured") : t("appKeyMissing")}
|
||||
state={appKeySet ? "ok" : "warn"}
|
||||
/>
|
||||
<DiagnosticRow
|
||||
label={t("emailSmtp")}
|
||||
detail={smtpSet ? t("smtpHostSet") : t("notConfigured")}
|
||||
state={smtpSet ? "ok" : "warn"}
|
||||
/>
|
||||
<DiagnosticRow
|
||||
label={t("maintenanceMode")}
|
||||
detail={maintenance ? t("siteIsInMaintenance") : t("siteIsLive")}
|
||||
state={maintenance ? "warn" : "ok"}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{/* ── Server info + diagnostics ──────────────────────────── */}
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<section className="admin-card p-5">
|
||||
<h2 className="admin-section-title">{t("serverInfo")}</h2>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
|
||||
<InfoItem label={t("node")} value={process.version} />
|
||||
<InfoItem
|
||||
label={t("platform")}
|
||||
value={`${process.platform} ${process.arch}`}
|
||||
/>
|
||||
<InfoItem
|
||||
label={t("appUptime")}
|
||||
value={uptime(process.uptime())}
|
||||
/>
|
||||
<InfoItem
|
||||
label={t("heapUsed")}
|
||||
value={mb(process.memoryUsage().heapUsed)}
|
||||
/>
|
||||
<InfoItem
|
||||
label={t("rss")}
|
||||
value={mb(process.memoryUsage().rss)}
|
||||
/>
|
||||
<InfoItem label={t("hostUptime")} value={uptime(os.uptime())} />
|
||||
<InfoItem
|
||||
label={t("load1m")}
|
||||
value={os.loadavg()[0]?.toFixed(2) ?? "—"}
|
||||
/>
|
||||
<InfoItem label={t("cpus")} value={os.cpus().length} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CommandocentrumControls />
|
||||
<section className="admin-card p-5">
|
||||
<h2 className="admin-section-title">{t("systemDiagnostics")}</h2>
|
||||
<div className="flex flex-col">
|
||||
<DiagnosticRow
|
||||
label={t("database")}
|
||||
detail={dbOk ? t("connectionHealthy") : t("unreachable")}
|
||||
state={dbOk ? "ok" : "danger"}
|
||||
/>
|
||||
<DiagnosticRow
|
||||
label={t("emulatorRcon")}
|
||||
detail={
|
||||
emulatorOnline ? t("respondingToPing") : t("noResponse")
|
||||
}
|
||||
state={emulatorOnline ? "ok" : "warn"}
|
||||
/>
|
||||
<DiagnosticRow
|
||||
label={t("rconConfig")}
|
||||
detail={rconSet ? t("rconHostSet") : t("rconHostNotConfigured")}
|
||||
state={rconSet ? "ok" : "warn"}
|
||||
/>
|
||||
<DiagnosticRow
|
||||
label={t("twoFaEncryptionKey")}
|
||||
detail={appKeySet ? t("appKeyConfigured") : t("appKeyMissing")}
|
||||
state={appKeySet ? "ok" : "warn"}
|
||||
/>
|
||||
<DiagnosticRow
|
||||
label={t("emailSmtp")}
|
||||
detail={smtpSet ? t("smtpHostSet") : t("notConfigured")}
|
||||
state={smtpSet ? "ok" : "warn"}
|
||||
/>
|
||||
<DiagnosticRow
|
||||
label={t("maintenanceMode")}
|
||||
detail={
|
||||
maintenance ? t("siteIsInMaintenance") : t("siteIsLive")
|
||||
}
|
||||
state={maintenance ? "warn" : "ok"}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ── Staff activity ─────────────────────────────────────── */}
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("recentStaffActivity")}</h2>
|
||||
{activity.length === 0 ? (
|
||||
<div className="admin-empty">{t("noStaffActivity")}</div>
|
||||
) : (
|
||||
<div className="admin-card overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("colWhen")}</th>
|
||||
<th>{t("colStaff")}</th>
|
||||
<th>{t("colAction")}</th>
|
||||
<th>{t("colDescription")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{activity.map((a) => (
|
||||
<tr key={String(a.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(a.createdAt, "datetime-seconds")}
|
||||
</td>
|
||||
<td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
|
||||
<td>
|
||||
<span className="inline-block text-[0.6rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-accent)]/18 text-[var(--admin-text)]">
|
||||
{a.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{a.description}
|
||||
</td>
|
||||
<CommandocentrumControls />
|
||||
|
||||
{/* ── Staff activity ─────────────────────────────────────── */}
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("recentStaffActivity")}</h2>
|
||||
{activity.length === 0 ? (
|
||||
<div className="admin-empty">{t("noStaffActivity")}</div>
|
||||
) : (
|
||||
<div className="admin-card overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("colWhen")}</th>
|
||||
<th>{t("colStaff")}</th>
|
||||
<th>{t("colAction")}</th>
|
||||
<th>{t("colDescription")}</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── Emulator errors ────────────────────────────────────── */}
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("recentEmulatorErrors")}</h2>
|
||||
{errors.length === 0 ? (
|
||||
<div className="admin-empty">{t("noEmulatorErrors")}</div>
|
||||
) : (
|
||||
<div className="admin-card overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("colWhen")}</th>
|
||||
<th>{t("colType")}</th>
|
||||
<th>{t("colVersion")}</th>
|
||||
<th>{t("colStacktrace")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{errors.map((e) => {
|
||||
const trace = decodeStacktrace(e.stacktrace);
|
||||
const snippet = trace
|
||||
? trace.split("\n").slice(0, 20).join("\n") +
|
||||
(trace.split("\n").length > 20
|
||||
? `\n… ${t("truncated")}`
|
||||
: "")
|
||||
: t("empty");
|
||||
return (
|
||||
<tr key={e.id}>
|
||||
</thead>
|
||||
<tbody>
|
||||
{activity.map((a) => (
|
||||
<tr key={String(a.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(
|
||||
e.timestamp ? new Date(e.timestamp * 1000) : null,
|
||||
"datetime-seconds",
|
||||
)}
|
||||
</td>
|
||||
<td>{e.type}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{e.version}
|
||||
{formatDate(a.createdAt, "datetime-seconds")}
|
||||
</td>
|
||||
<td>
|
||||
<pre className="text-xs p-2 bg-[var(--admin-canvas)] text-[var(--color-text-readable)] rounded overflow-auto max-h-[160px]">
|
||||
{snippet}
|
||||
</pre>
|
||||
{nameById.get(Number(a.userId)) ?? `#${a.userId}`}
|
||||
</td>
|
||||
<td>
|
||||
<span className="inline-block text-[0.6rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-accent)]/18 text-[var(--admin-text)]">
|
||||
{a.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{a.description}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── Emulator errors ────────────────────────────────────── */}
|
||||
<section className="mt-6">
|
||||
<h2 className="admin-section-title">{t("recentEmulatorErrors")}</h2>
|
||||
{errors.length === 0 ? (
|
||||
<div className="admin-empty">{t("noEmulatorErrors")}</div>
|
||||
) : (
|
||||
<div className="admin-card overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t("colWhen")}</th>
|
||||
<th>{t("colType")}</th>
|
||||
<th>{t("colVersion")}</th>
|
||||
<th>{t("colStacktrace")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{errors.map((e) => {
|
||||
const trace = decodeStacktrace(e.stacktrace);
|
||||
const snippet = trace
|
||||
? trace.split("\n").slice(0, 20).join("\n") +
|
||||
(trace.split("\n").length > 20
|
||||
? `\n… ${t("truncated")}`
|
||||
: "")
|
||||
: t("empty");
|
||||
return (
|
||||
<tr key={e.id}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{formatDate(
|
||||
e.timestamp ? new Date(e.timestamp * 1000) : null,
|
||||
"datetime-seconds",
|
||||
)}
|
||||
</td>
|
||||
<td>{e.type}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{e.version}
|
||||
</td>
|
||||
<td>
|
||||
<pre className="text-xs p-2 bg-[var(--admin-canvas)] text-[var(--color-text-readable)] rounded overflow-auto max-h-[160px]">
|
||||
{snippet}
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
</AdminPageShell>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user