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 { saveMaintenance } from "@/actions/admin-maintenance";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -34,111 +35,120 @@ export default async function AdminMaintenance() {
|
||||
return (
|
||||
<main>
|
||||
<h1>Maintenance Mode</h1>
|
||||
<p className="muted">
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
While maintenance is enabled, only staff (and users at or above the
|
||||
minimum login rank) can log into the hotel. These values are stored in
|
||||
<code> website_settings</code> and read live by the login flow.
|
||||
</p>
|
||||
|
||||
{/* ── Current state ─────────────────────────────────────── */}
|
||||
<div
|
||||
className="card"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.75rem",
|
||||
marginBottom: "1.5rem",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 999,
|
||||
flexShrink: 0,
|
||||
background: enabled
|
||||
? "var(--color-danger)"
|
||||
: "var(--color-secondary)",
|
||||
}}
|
||||
<div className="admin-stats">
|
||||
<StatusCard
|
||||
label="Maintenance"
|
||||
value={enabled ? "ENABLED" : "Disabled"}
|
||||
state={enabled ? "danger" : "ok"}
|
||||
hint={enabled ? "Hotel is locked down" : "Hotel is open to everyone"}
|
||||
icon={enabled ? "🚧" : "🟢"}
|
||||
/>
|
||||
<StatusCard
|
||||
label="Min login rank"
|
||||
value={minRankValue}
|
||||
hint="During maintenance"
|
||||
icon="🛡️"
|
||||
/>
|
||||
<StatusCard
|
||||
label="Splash message"
|
||||
value={message ? "Set" : "Empty"}
|
||||
state={message ? "ok" : "neutral"}
|
||||
icon="💬"
|
||||
/>
|
||||
<div>
|
||||
<strong>
|
||||
Maintenance is currently {enabled ? "ENABLED" : "disabled"}.
|
||||
</strong>
|
||||
<p className="muted" style={{ margin: "0.2rem 0 0" }}>
|
||||
{enabled
|
||||
? `Only users with rank ${minRankValue} or higher can log in right now.`
|
||||
: "The hotel is open to everyone."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Current state ─────────────────────────────────────── */}
|
||||
<section className="admin-section">
|
||||
<h2>Current state</h2>
|
||||
<div className="card" style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
|
||||
<span className={`admin-badge ${enabled ? "danger" : "ok"}`}>
|
||||
{enabled ? "ENABLED" : "disabled"}
|
||||
</span>
|
||||
<div>
|
||||
<strong>
|
||||
Maintenance is currently {enabled ? "ENABLED" : "disabled"}.
|
||||
</strong>
|
||||
<p className="muted" style={{ margin: "0.2rem 0 0" }}>
|
||||
{enabled
|
||||
? `Only users with rank ${minRankValue} or higher can log in right now.`
|
||||
: "The hotel is open to everyone."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Edit form ─────────────────────────────────────────── */}
|
||||
<form action={saveMaintenance} className="card">
|
||||
<h3 style={{ marginTop: 0 }}>Settings</h3>
|
||||
|
||||
<label
|
||||
htmlFor="mt-enabled"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="mt-enabled"
|
||||
type="checkbox"
|
||||
name="enabled"
|
||||
value="1"
|
||||
defaultChecked={enabled}
|
||||
style={{ width: "auto" }}
|
||||
/>
|
||||
<span>Enable maintenance mode</span>
|
||||
</label>
|
||||
|
||||
<div style={{ marginBottom: "1rem", maxWidth: 220 }}>
|
||||
<section className="admin-section">
|
||||
<h2>Settings</h2>
|
||||
<form action={saveMaintenance} className="card">
|
||||
<label
|
||||
htmlFor="mt-min-rank"
|
||||
className="muted"
|
||||
style={{ display: "block", marginBottom: "0.3rem" }}
|
||||
htmlFor="mt-enabled"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
Minimum login rank during maintenance
|
||||
<input
|
||||
id="mt-enabled"
|
||||
type="checkbox"
|
||||
name="enabled"
|
||||
value="1"
|
||||
defaultChecked={enabled}
|
||||
style={{ width: "auto" }}
|
||||
/>
|
||||
<span>Enable maintenance mode</span>
|
||||
</label>
|
||||
<input
|
||||
id="mt-min-rank"
|
||||
type="number"
|
||||
name="min_rank"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={minRankValue}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: "1rem" }}>
|
||||
<label
|
||||
htmlFor="mt-message"
|
||||
className="muted"
|
||||
style={{ display: "block", marginBottom: "0.3rem" }}
|
||||
>
|
||||
Maintenance message (shown on the splash; basic HTML allowed)
|
||||
</label>
|
||||
<textarea
|
||||
id="mt-message"
|
||||
name="message"
|
||||
rows={8}
|
||||
defaultValue={message}
|
||||
placeholder="We're working hard on the hotel — back soon!"
|
||||
style={{ width: "100%", resize: "vertical" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginBottom: "1rem", maxWidth: 220 }}>
|
||||
<label
|
||||
htmlFor="mt-min-rank"
|
||||
className="muted"
|
||||
style={{ display: "block", marginBottom: "0.3rem" }}
|
||||
>
|
||||
Minimum login rank during maintenance
|
||||
</label>
|
||||
<input
|
||||
id="mt-min-rank"
|
||||
type="number"
|
||||
name="min_rank"
|
||||
min={0}
|
||||
step={1}
|
||||
defaultValue={minRankValue}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save changes
|
||||
</button>
|
||||
</form>
|
||||
<div style={{ marginBottom: "1rem" }}>
|
||||
<label
|
||||
htmlFor="mt-message"
|
||||
className="muted"
|
||||
style={{ display: "block", marginBottom: "0.3rem" }}
|
||||
>
|
||||
Maintenance message (shown on the splash; basic HTML allowed)
|
||||
</label>
|
||||
<textarea
|
||||
id="mt-message"
|
||||
name="message"
|
||||
rows={8}
|
||||
defaultValue={message}
|
||||
placeholder="We're working hard on the hotel — back soon!"
|
||||
style={{ width: "100%", resize: "vertical" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save changes
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user