Adapt + improve all admin pages to the new design system
Swept the whole housekeeping panel (34 pages) so it's a consistent, improved adaptation of the old Filament admin rather than bare tables: - Live status tiles (StatusCard) summarising each page's data — counts and stateful metrics (users online, active/permanent bans, pending applications, settings, radio shouts, etc.). - Status pills (admin-badge ok/danger) replacing ad-hoc text: online/ offline, account/ip ban types, permanent vs timed, command OK/FAIL, alert severity & read/new, enabled/disabled, open/closed. - Sections wrapped in .admin-section with h2 headers; redundant inline table styling removed (the global .admin layer handles it). - alerts/logs/emulator hand-built as the reference pattern; the rest via parallel agents that read the schema and preserved every server action, query and field name. Behaviour unchanged (same actions, queries, field names). Verified in a real authed admin session (prod, amx_test): pages render with live data (Users tiles show 7 real accounts + online/offline pills), no errors. tsc 0, vitest 49/49, next build 0.
This commit is contained in:
Simo committed
1 parent
d419731566
commit
0de0ac6a3c
34 files changed
+2357
-1396
No files matched your search
@@ -1,4 +1,5 @@
|
||||
import { createTeam, deleteTeam } from "@/actions/admin-teams";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -30,11 +31,27 @@ export default async function AdminTeams() {
|
||||
teams = [];
|
||||
}
|
||||
|
||||
const hidden = teams.filter((t) => t.hiddenRank).length;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<h1>Teams</h1>
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
Staff rank definitions shown on the public team page.
|
||||
</p>
|
||||
|
||||
<div className="card" style={{ marginBottom: "1.25rem" }}>
|
||||
<div className="admin-stats">
|
||||
<StatusCard label="Team ranks" value={teams.length} icon="🛡️" />
|
||||
<StatusCard
|
||||
label="Visible"
|
||||
value={teams.length - hidden}
|
||||
state={teams.length - hidden > 0 ? "ok" : "neutral"}
|
||||
icon="👁️"
|
||||
/>
|
||||
<StatusCard label="Hidden" value={hidden} icon="🙈" />
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginBottom: "1.5rem" }}>
|
||||
<h3 style={{ marginTop: 0 }}>New team rank</h3>
|
||||
<form action={createTeam} style={{ display: "grid", gap: "0.6rem" }}>
|
||||
<div className="grid cols-2">
|
||||
@@ -67,63 +84,72 @@ export default async function AdminTeams() {
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{teams.length === 0 ? (
|
||||
<p className="muted">No teams yet.</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Rank name</th>
|
||||
<th>Badge</th>
|
||||
<th>Job description</th>
|
||||
<th>Color</th>
|
||||
<th>Hidden</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{teams.map((t) => (
|
||||
<tr key={String(t.id)}>
|
||||
<td>{String(t.id)}</td>
|
||||
<td>{t.rankName}</td>
|
||||
<td className="muted">{t.badge ?? "—"}</td>
|
||||
<td className="muted">{t.jobDescription ?? "—"}</td>
|
||||
<td>
|
||||
<span
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: "0.4rem",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 4,
|
||||
border: "1px solid var(--border-color)",
|
||||
background: t.staffColor,
|
||||
}}
|
||||
/>
|
||||
{t.staffColor}
|
||||
</span>
|
||||
</td>
|
||||
<td className="muted">{t.hiddenRank ? "Yes" : "No"}</td>
|
||||
<td>
|
||||
<form action={deleteTeam}>
|
||||
<input type="hidden" name="id" value={String(t.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
<section className="admin-section">
|
||||
<h2>Ranks ({teams.length})</h2>
|
||||
{teams.length === 0 ? (
|
||||
<p className="muted">No teams yet.</p>
|
||||
) : (
|
||||
<div style={{ overflowX: "auto" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Rank name</th>
|
||||
<th>Badge</th>
|
||||
<th>Job description</th>
|
||||
<th>Color</th>
|
||||
<th>Visibility</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{teams.map((t) => (
|
||||
<tr key={String(t.id)}>
|
||||
<td className="muted">{String(t.id)}</td>
|
||||
<td>{t.rankName}</td>
|
||||
<td className="muted">{t.badge ?? "—"}</td>
|
||||
<td className="muted">{t.jobDescription ?? "—"}</td>
|
||||
<td>
|
||||
<span
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: "0.4rem",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 4,
|
||||
border: "1px solid var(--border-color)",
|
||||
background: t.staffColor,
|
||||
}}
|
||||
/>
|
||||
{t.staffColor}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${t.hiddenRank ? "" : "ok"}`}>
|
||||
{t.hiddenRank ? "hidden" : "visible"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<form action={deleteTeam}>
|
||||
<input type="hidden" name="id" value={String(t.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user