-
- Housekeeping
-
- Signed in as {staff.username}
-
-
-
+
);
}
+
+function Sidebar({ staff }: { staff: { id: number; username: string; rank: number } }) {
+ const initial = staff.username.charAt(0).toUpperCase();
+
+ return (
+
+ );
+}
+
+function Topbar({ staff }: { staff: { id: number; username: string; rank: number } }) {
+ return (
+
+ );
+}
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 5faabcaf..003fb3b8 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,6 +1,7 @@
import Link from "next/link";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
+import { Users, Newspaper, Ban, Database, Activity, ArrowRight } from "lucide-react";
export const dynamic = "force-dynamic";
@@ -23,11 +24,9 @@ export default async function AdminDashboard() {
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;
- // Users-by-rank breakdown (small inline bar chart, no chart library).
const rankGroups = await prisma.user
.groupBy({ by: ["rank"], _count: { _all: true }, orderBy: { rank: "desc" } })
.catch(() => [] as Array<{ rank: number; _count: { _all: number } }>);
@@ -50,110 +49,76 @@ export default async function AdminDashboard() {
return (
- Dashboard
-
-
-
-
-
0 ? "warn" : "neutral"}
- icon="🔧"
- />
-
+
+
+
+
Dashboard
+
Hotel overview & live status
+
Users by rank
- {rankCounts.length === 0 ? (
-
- {dbOk ? "No accounts to break down yet." : "DB unavailable."}
-
- ) : (
-
- {rankCounts.map((r) => {
- const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
- return (
-
-
- Rank {r.rank}
-
-
-
0 ? 4 : 0)}%`,
- background: "var(--color-primary, #eeb425)",
- }}
- />
-
-
{r.count}
-
- );
- })}
-
- )}
-
+
+ } />
+ } />
+ 0 ? "warn" : "neutral"} icon={} />
+ } />
+
-
-
-
Recent staff activity
-
- View all →
-
-
- {activity.length === 0 ? (
- No staff activity logged yet.
- ) : (
-
-
-
- | When |
- Staff |
- Action |
- Description |
-
-
-
- {activity.map((a) => (
-
- |
- {fromDate(a.createdAt)}
- |
- {nameById.get(Number(a.userId)) ?? `#${a.userId}`} |
-
-
- {a.action}
-
- |
- {a.description} |
-
+
+
+ Users by rank
+ {rankCounts.length === 0 ? (
+ {dbOk ? "No accounts to break down yet." : "DB unavailable."}
+ ) : (
+
+ {rankCounts.map((r) => {
+ const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
+ return (
+
+
Rank {r.rank}
+
+
0 ? 4 : 0)}%` }} />
+
+
{r.count}
+
+ );
+ })}
+
+ )}
+
+
+
+
+
Recent staff activity
+
+ View all
+
+
No staff activity logged yet.
+ ) : (
+
+ {activity.map((a, i) => (
+
0 ? "border-t border-[var(--border)]" : ""}`}>
+
+
+
{nameById.get(Number(a.userId)) ?? `#${a.userId}`}
+
{a.description}
+
+
+
{a.action}
+
{fromDate(a.createdAt)}
+
+
))}
-
- )}
-
+
);
}
diff --git a/src/app/admin/users/page.tsx b/src/app/admin/users/page.tsx
index 91dbe9a7..0d75ee2a 100644
--- a/src/app/admin/users/page.tsx
+++ b/src/app/admin/users/page.tsx
@@ -1,5 +1,6 @@
import Link from "next/link";
import { StatusCard } from "@/components/admin/dashboard";
+import { ConfirmAction } from "@/components/admin/confirm-action";
import { prisma } from "@/lib/prisma";
export const dynamic = "force-dynamic";
@@ -97,48 +98,9 @@ export default async function AdminUsers({
Edit
-
-
-
+ Set Rank
+ Disconnect
+ Alert
|
diff --git a/src/app/globals.css b/src/app/globals.css
index 90c666fe..bf26281d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -436,7 +436,7 @@ tbody tr:hover {
}
/* ── Admin panel (Housekeeping) ─────────────────────────────────
- Page content wrapper — table card styling and h1 formatting. */
+ Page content wrapper — card-style tables and consistent spacing. */
.admin-page main > h1:first-child,
.admin-page > h1:first-child {
margin-top: 0;
@@ -447,33 +447,35 @@ tbody tr:hover {
border-bottom: 2px solid var(--border);
margin-bottom: 0.85rem;
}
-/* Carded tables — give the bare admin tables a surface + frame. */
.admin-page table {
background: var(--color-surface);
- box-shadow: var(--shadow-card);
border: 1px solid var(--border);
- border-radius: 12px;
+ border-radius: 16px;
overflow: hidden;
+ box-shadow: var(--shadow-card);
}
.admin-page thead th {
- background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
+ background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
color: var(--color-text-muted);
border-bottom: 1px solid var(--border);
white-space: nowrap;
+ font-size: 0.7rem;
+ letter-spacing: 0.04em;
+ padding: 0.7rem 0.9rem;
}
-.admin-page th,
.admin-page td {
- padding: 0.6rem 0.8rem;
+ padding: 0.7rem 0.9rem;
+ border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);
+ font-size: 0.88rem;
}
.admin-page tbody tr {
transition: background 0.12s ease;
}
.admin-page tbody tr:hover {
- background: color-mix(in srgb, var(--color-primary) 7%, transparent);
-}
-.admin-page tbody td {
- border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+ background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
+.admin-page thead tr:first-child th:first-child { border-radius: 16px 0 0 0; }
+.admin-page thead tr:first-child th:last-child { border-radius: 0 16px 0 0; }
/* ── Public design system (faithful to the atom theme) ──────────
content-card = surface card with a primary-tinted header (icon +
title + subtitle) and a padded body — the signature atom block. */
diff --git a/src/components/admin/admin-nav-link.tsx b/src/components/admin/admin-nav-link.tsx
index c4514eeb..9d4a476c 100644
--- a/src/components/admin/admin-nav-link.tsx
+++ b/src/components/admin/admin-nav-link.tsx
@@ -1,6 +1,7 @@
"use client";
import Link from "next/link";
+import type { ReactNode } from "react";
import { usePathname } from "next/navigation";
/**
@@ -8,7 +9,7 @@ import { usePathname } from "next/navigation";
* exactly; every other entry also matches its sub-routes (e.g. /admin/radio is
* active on /admin/radio/history) so the current section stays lit.
*/
-export function AdminNavLink({ href, label }: { href: string; label: string }) {
+export function AdminNavLink({ href, icon, children }: { href: string; icon?: ReactNode; children: ReactNode }) {
const pathname = usePathname() ?? "";
const active =
href === "/admin" ? pathname === "/admin" : pathname === href || pathname.startsWith(`${href}/`);
@@ -16,11 +17,18 @@ export function AdminNavLink({ href, label }: { href: string; label: string }) {
return (
- {label}
+ {icon ? (
+
+ {icon}
+
+ ) : null}
+
{children}
);
}
diff --git a/src/components/admin/confirm-action.tsx b/src/components/admin/confirm-action.tsx
new file mode 100644
index 00000000..27a3eb53
--- /dev/null
+++ b/src/components/admin/confirm-action.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+export function ConfirmAction({
+ message,
+ action,
+ userId,
+ className,
+ style,
+ children,
+}: {
+ message: string;
+ action: string;
+ userId: number;
+ className?: string;
+ style?: React.CSSProperties;
+ children: ReactNode;
+}) {
+ return (
+
+ );
+}
diff --git a/src/components/admin/dashboard.tsx b/src/components/admin/dashboard.tsx
index 24113c68..cdf02571 100644
--- a/src/components/admin/dashboard.tsx
+++ b/src/components/admin/dashboard.tsx
@@ -25,26 +25,20 @@ export function StatusCard({
value: ReactNode;
hint?: string;
state?: State;
- icon?: string;
+ icon?: ReactNode;
}) {
- const borderColor =
- state === "ok" ? "border-l-green-600" :
- state === "warn" ? "border-l-[var(--color-primary)]" :
- state === "danger" ? "border-l-red-500" :
- "border-l-[var(--color-text-muted)]";
-
return (
-
-
-
{label}
+
+
+ {label}
{icon ? (
-
+
{icon}
) : null}
-
{value}
- {hint ?
{hint}
: null}
+
{value}
+ {hint ?
{hint}
: null}
);
}