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
@@ -7,6 +7,7 @@ import {
|
||||
setMotto,
|
||||
setRank,
|
||||
} from "@/actions/admin-users";
|
||||
import { InfoItem, StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -26,59 +27,103 @@ export default async function AdminUserDetail({
|
||||
.catch(() => null);
|
||||
if (!user) notFound();
|
||||
|
||||
const isOnline = user.online === "1";
|
||||
|
||||
return (
|
||||
<main>
|
||||
<p className="muted">
|
||||
<Link href="/admin/users">← Users</Link>
|
||||
</p>
|
||||
<h1>{user.username}</h1>
|
||||
<p className="muted">
|
||||
ID {user.id} · rank {user.rank} · {user.credits} credits ·{" "}
|
||||
{user.online === "1" ? "Online" : "Offline"}
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
{user.motto ? user.motto : "No motto set."}
|
||||
</p>
|
||||
|
||||
<div className="grid cols-2">
|
||||
<form action={giveCurrency} className="card">
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<h3 style={{ marginTop: 0 }}>Give currency</h3>
|
||||
<select name="type">
|
||||
<option value="credits">Credits</option>
|
||||
<option value="duckets">Duckets</option>
|
||||
<option value="diamonds">Diamonds</option>
|
||||
<option value="points">Points</option>
|
||||
</select>{" "}
|
||||
<input name="amount" type="number" min={1} placeholder="Amount" />{" "}
|
||||
<button type="submit">Give</button>
|
||||
</form>
|
||||
|
||||
<form action={setMotto} className="card">
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<h3 style={{ marginTop: 0 }}>Set motto</h3>
|
||||
<input name="motto" defaultValue={user.motto} maxLength={127} />{" "}
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
|
||||
<form action={setRank} className="card">
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<h3 style={{ marginTop: 0 }}>Set rank</h3>
|
||||
<input name="rank" type="number" min={1} defaultValue={user.rank} />{" "}
|
||||
<button type="submit">Set</button>
|
||||
</form>
|
||||
|
||||
<form action={alertUser} className="card">
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<h3 style={{ marginTop: 0 }}>Alert</h3>
|
||||
<input name="message" placeholder="Message" />{" "}
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
|
||||
<form action={disconnectUser} className="card">
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<input type="hidden" name="username" value={user.username} />
|
||||
<h3 style={{ marginTop: 0 }}>Disconnect</h3>
|
||||
<button type="submit">Disconnect from hotel</button>
|
||||
</form>
|
||||
<div className="admin-stats">
|
||||
<StatusCard label="User ID" value={user.id} icon="🆔" />
|
||||
<StatusCard label="Rank" value={user.rank} icon="🎖️" />
|
||||
<StatusCard label="Credits" value={user.credits} icon="💰" />
|
||||
<StatusCard
|
||||
label="Status"
|
||||
value={isOnline ? "Online" : "Offline"}
|
||||
state={isOnline ? "ok" : "neutral"}
|
||||
icon={isOnline ? "🟢" : "⚪"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className="admin-section">
|
||||
<h2>Overview</h2>
|
||||
<div className="admin-info-grid">
|
||||
<InfoItem label="Username" value={user.username} />
|
||||
<InfoItem
|
||||
label="Status"
|
||||
value={
|
||||
<span className={`admin-badge ${isOnline ? "ok" : ""}`}>
|
||||
{isOnline ? "online" : "offline"}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<InfoItem label="Rank" value={user.rank} />
|
||||
<InfoItem label="Credits" value={user.credits} />
|
||||
<InfoItem label="Look" value={<code>{user.look || "—"}</code>} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="admin-section">
|
||||
<h2>Actions</h2>
|
||||
<div className="grid cols-2">
|
||||
<form action={giveCurrency} className="card">
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<h3 style={{ marginTop: 0 }}>Give currency</h3>
|
||||
<select name="type">
|
||||
<option value="credits">Credits</option>
|
||||
<option value="duckets">Duckets</option>
|
||||
<option value="diamonds">Diamonds</option>
|
||||
<option value="points">Points</option>
|
||||
</select>{" "}
|
||||
<input name="amount" type="number" min={1} placeholder="Amount" />{" "}
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Give
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={setMotto} className="card">
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<h3 style={{ marginTop: 0 }}>Set motto</h3>
|
||||
<input name="motto" defaultValue={user.motto} maxLength={127} />{" "}
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={setRank} className="card">
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<h3 style={{ marginTop: 0 }}>Set rank</h3>
|
||||
<input name="rank" type="number" min={1} defaultValue={user.rank} />{" "}
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Set
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={alertUser} className="card">
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<h3 style={{ marginTop: 0 }}>Alert</h3>
|
||||
<input name="message" placeholder="Message" />{" "}
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={disconnectUser} className="card">
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<input type="hidden" name="username" value={user.username} />
|
||||
<h3 style={{ marginTop: 0 }}>Disconnect</h3>
|
||||
<button type="submit" className="btn btn-danger">
|
||||
Disconnect from hotel
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import Link from "next/link";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -29,38 +30,78 @@ export default async function AdminUsers({
|
||||
const total = await prisma.user.count({ where }).catch(() => 0);
|
||||
const pages = Math.max(1, Math.ceil(total / PER_PAGE));
|
||||
|
||||
const onlineOnPage = users.filter((u) => u.online === "1").length;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<h1>Users</h1>
|
||||
<form style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem" }}>
|
||||
<input name="q" defaultValue={q} placeholder="Search username" />
|
||||
<button type="submit">Search</button>
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
{q ? `Search results for “${q}”.` : "Most recent accounts first."}
|
||||
</p>
|
||||
|
||||
<div className="admin-stats">
|
||||
<StatusCard label="Total users" value={total} icon="👥" />
|
||||
<StatusCard label="On this page" value={users.length} icon="📄" />
|
||||
<StatusCard
|
||||
label="Online (page)"
|
||||
value={onlineOnPage}
|
||||
state={onlineOnPage > 0 ? "ok" : "neutral"}
|
||||
icon="🟢"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form
|
||||
className="card"
|
||||
style={{ display: "flex", gap: "0.5rem", marginBottom: "1.5rem", flexWrap: "wrap" }}
|
||||
>
|
||||
<input
|
||||
name="q"
|
||||
defaultValue={q}
|
||||
placeholder="Search username"
|
||||
style={{ flex: 1, minWidth: 200 }}
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<table style={{ width: "100%", borderCollapse: "collapse" }}>
|
||||
<thead>
|
||||
<tr style={{ textAlign: "left", color: "var(--muted)" }}>
|
||||
<th>ID</th>
|
||||
<th>Username</th>
|
||||
<th>Rank</th>
|
||||
<th>Credits</th>
|
||||
<th>Online</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id} style={{ borderTop: "1px solid var(--border)" }}>
|
||||
<td>{u.id}</td>
|
||||
<td>
|
||||
<Link href={`/admin/users/${u.id}`}>{u.username}</Link>
|
||||
</td>
|
||||
<td>{u.rank}</td>
|
||||
<td>{u.credits}</td>
|
||||
<td>{u.online === "1" ? "●" : "○"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<section className="admin-section">
|
||||
<h2>Accounts ({total})</h2>
|
||||
{users.length === 0 ? (
|
||||
<p className="muted">No users match this search.</p>
|
||||
) : (
|
||||
<div style={{ overflowX: "auto" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Username</th>
|
||||
<th>Rank</th>
|
||||
<th>Credits</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id}>
|
||||
<td className="muted">{u.id}</td>
|
||||
<td>
|
||||
<Link href={`/admin/users/${u.id}`}>{u.username}</Link>
|
||||
</td>
|
||||
<td>{u.rank}</td>
|
||||
<td>{u.credits}</td>
|
||||
<td>
|
||||
<span className={`admin-badge ${u.online === "1" ? "ok" : ""}`}>
|
||||
{u.online === "1" ? "online" : "offline"}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<p className="muted">
|
||||
Page {page} / {pages} · {total} users
|
||||
|
||||
Reference in new issue
Block a user