feat: redesign admin panel with Lucide icons and modern styling
- Add lucide-react for SVG icons throughout the admin - Redesign sidebar with gradient background, icons per nav item, and sticky layout - Redesign topbar with cleaner user info display - Redesign dashboard with icon-backed stat cards, gradient progress bars, activity feed - Update AdminNavLink with icon support and new active state styling - Improve table styling in admin-page CSS (rounded corners, hover, spacing) - Clean up unused admin CSS
This commit is contained in:
remco committed
1 parent
bd299be55d
commit
cf287dbc8b
9 files changed
+278
-261
No files matched your search
@@ -23,6 +23,7 @@
|
||||
"bcryptjs": "^3.0.2",
|
||||
"croner": "^10.0.1",
|
||||
"hash-wasm": "^4.12.0",
|
||||
"lucide-react": "^1.23.0",
|
||||
"next": "^16.2.9",
|
||||
"next-auth": "5.0.0-beta.31",
|
||||
"next-intl": "^4.13.0",
|
||||
|
||||
Generated
+12
@@ -23,6 +23,9 @@ importers:
|
||||
hash-wasm:
|
||||
specifier: ^4.12.0
|
||||
version: 4.12.0
|
||||
lucide-react:
|
||||
specifier: ^1.23.0
|
||||
version: 1.23.0([email protected])
|
||||
next:
|
||||
specifier: ^16.2.9
|
||||
version: 16.2.9([email protected]([email protected]))([email protected])
|
||||
@@ -2125,6 +2128,11 @@ packages:
|
||||
resolution: {integrity: sha512-DqC6n3QQ77zdFpCMASA1a3Jlb64Hv2N2DciFGkO/4L9+q/IpIAuRlKOvCXabtRW6cQf8usbmM6BE/TOPysCdIA==}
|
||||
engines: {bun: '>=1.0.0', deno: '>=1.30.0', node: '>=8.0.0'}
|
||||
|
||||
[email protected]:
|
||||
resolution: {integrity: sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw==}
|
||||
peerDependencies:
|
||||
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
[email protected]:
|
||||
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
|
||||
|
||||
@@ -4012,6 +4020,10 @@ snapshots:
|
||||
|
||||
[email protected]: {}
|
||||
|
||||
[email protected]([email protected]):
|
||||
dependencies:
|
||||
react: 19.2.7
|
||||
|
||||
[email protected]:
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
||||
+126
-89
@@ -4,76 +4,82 @@ import { AdminNavLink } from "@/components/admin/admin-nav-link";
|
||||
import { requireStaff } from "@/lib/admin/guard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { siteSettings } from "@/lib/services/site-settings";
|
||||
import {
|
||||
LayoutDashboard, Newspaper, Tags, Compass, HelpCircle, Megaphone, SquarePen, Image,
|
||||
Users, Ban, Globe, Shield, ClipboardList, Group, Key,
|
||||
Store, ShoppingCart, Receipt, Ticket, CreditCard, Gem, Award, Trophy, Calendar,
|
||||
Radio, History,
|
||||
Terminal, Monitor, Bell, FileText, Filter, Wrench, Settings, DoorOpen, Mail, Palette, Cog,
|
||||
ChevronDown, LogOut,
|
||||
} from "lucide-react";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
// Sidebar layout grouped like the original AtomCMS Filament panel (Content,
|
||||
// Users & access, Economy, Radio, System) instead of one flat list.
|
||||
const NAV_GROUPS: { label: string; items: { href: string; label: string }[] }[] = [
|
||||
const NAV_GROUPS: { label: string; icon: ReactNode; items: { href: string; label: string; icon: ReactNode }[] }[] = [
|
||||
{
|
||||
label: "Overview",
|
||||
items: [{ href: "/admin", label: "Dashboard" }],
|
||||
label: "Overview", icon: <LayoutDashboard size={14} />,
|
||||
items: [{ href: "/admin", label: "Dashboard", icon: <LayoutDashboard size={16} /> }],
|
||||
},
|
||||
{
|
||||
label: "Content",
|
||||
label: "Content", icon: <Newspaper size={14} />,
|
||||
items: [
|
||||
{ href: "/admin/articles", label: "Articles" },
|
||||
{ href: "/admin/tags", label: "Tags" },
|
||||
{ href: "/admin/navigation", label: "Navigator" },
|
||||
{ href: "/admin/help-questions", label: "Help center" },
|
||||
{ href: "/admin/ads", label: "Advertisements" },
|
||||
{ href: "/admin/writeable-boxes", label: "Writeable boxes" },
|
||||
{ href: "/admin/photos", label: "Photos" },
|
||||
{ href: "/admin/articles", label: "Articles", icon: <Newspaper size={16} /> },
|
||||
{ href: "/admin/tags", label: "Tags", icon: <Tags size={16} /> },
|
||||
{ href: "/admin/navigation", label: "Navigator", icon: <Compass size={16} /> },
|
||||
{ href: "/admin/help-questions", label: "Help center", icon: <HelpCircle size={16} /> },
|
||||
{ href: "/admin/ads", label: "Advertisements", icon: <Megaphone size={16} /> },
|
||||
{ href: "/admin/writeable-boxes", label: "Writeable boxes", icon: <SquarePen size={16} /> },
|
||||
{ href: "/admin/photos", label: "Photos", icon: <Image size={16} /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Users & access",
|
||||
label: "Users & access", icon: <Shield size={14} />,
|
||||
items: [
|
||||
{ href: "/admin/users", label: "Users" },
|
||||
{ href: "/admin/bans", label: "Bans" },
|
||||
{ href: "/admin/ip", label: "IP management" },
|
||||
{ href: "/admin/vpn", label: "VPN" },
|
||||
{ href: "/admin/applications", label: "Applications" },
|
||||
{ href: "/admin/teams", label: "Teams" },
|
||||
{ href: "/admin/permissions", label: "Permissions" },
|
||||
{ href: "/admin/users", label: "Users", icon: <Users size={16} /> },
|
||||
{ href: "/admin/bans", label: "Bans", icon: <Ban size={16} /> },
|
||||
{ href: "/admin/ip", label: "IP management", icon: <Globe size={16} /> },
|
||||
{ href: "/admin/vpn", label: "VPN", icon: <Shield size={16} /> },
|
||||
{ href: "/admin/applications", label: "Applications", icon: <ClipboardList size={16} /> },
|
||||
{ href: "/admin/teams", label: "Teams", icon: <Group size={16} /> },
|
||||
{ href: "/admin/permissions", label: "Permissions", icon: <Key size={16} /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Economy",
|
||||
label: "Economy", icon: <ShoppingCart size={14} />,
|
||||
items: [
|
||||
{ href: "/admin/catalog", label: "Catalog" },
|
||||
{ href: "/admin/shop", label: "Shop" },
|
||||
{ href: "/admin/transactions", label: "Transactions" },
|
||||
{ href: "/admin/vouchers", label: "Vouchers" },
|
||||
{ href: "/admin/subscriptions", label: "Subscriptions" },
|
||||
{ href: "/admin/rare-values", label: "Rare values" },
|
||||
{ href: "/admin/badges", label: "Badges" },
|
||||
{ href: "/admin/achievements", label: "Achievements" },
|
||||
{ href: "/admin/calendar", label: "Calendar" },
|
||||
{ href: "/admin/catalog", label: "Catalog", icon: <Store size={16} /> },
|
||||
{ href: "/admin/shop", label: "Shop", icon: <ShoppingCart size={16} /> },
|
||||
{ href: "/admin/transactions", label: "Transactions", icon: <Receipt size={16} /> },
|
||||
{ href: "/admin/vouchers", label: "Vouchers", icon: <Ticket size={16} /> },
|
||||
{ href: "/admin/subscriptions", label: "Subscriptions", icon: <CreditCard size={16} /> },
|
||||
{ href: "/admin/rare-values", label: "Rare values", icon: <Gem size={16} /> },
|
||||
{ href: "/admin/badges", label: "Badges", icon: <Award size={16} /> },
|
||||
{ href: "/admin/achievements", label: "Achievements", icon: <Trophy size={16} /> },
|
||||
{ href: "/admin/calendar", label: "Calendar", icon: <Calendar size={16} /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Radio",
|
||||
label: "Radio", icon: <Radio size={14} />,
|
||||
items: [
|
||||
{ href: "/admin/radio", label: "Radio" },
|
||||
{ href: "/admin/radio/history", label: "Radio history" },
|
||||
{ href: "/admin/radio", label: "Radio", icon: <Radio size={16} /> },
|
||||
{ href: "/admin/radio/history", label: "Radio history", icon: <History size={16} /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "System",
|
||||
label: "System", icon: <Settings size={14} />,
|
||||
items: [
|
||||
{ href: "/admin/commandocentrum", label: "Commandocentrum" },
|
||||
{ href: "/admin/emulator", label: "Emulator" },
|
||||
{ href: "/admin/alerts", label: "Alerts" },
|
||||
{ href: "/admin/logs", label: "Logs" },
|
||||
{ href: "/admin/wordfilter", label: "Word filter" },
|
||||
{ href: "/admin/maintenance", label: "Maintenance" },
|
||||
{ href: "/admin/housekeeping", label: "Housekeeping" },
|
||||
{ href: "/admin/rooms", label: "Rooms" },
|
||||
{ href: "/admin/email-templates", label: "Email templates" },
|
||||
{ href: "/admin/theme", label: "Theme" },
|
||||
{ href: "/admin/media", label: "Media" },
|
||||
{ href: "/admin/settings", label: "Settings" },
|
||||
{ href: "/admin/commandocentrum", label: "Commandocentrum", icon: <Terminal size={16} /> },
|
||||
{ href: "/admin/emulator", label: "Emulator", icon: <Monitor size={16} /> },
|
||||
{ href: "/admin/alerts", label: "Alerts", icon: <Bell size={16} /> },
|
||||
{ href: "/admin/logs", label: "Logs", icon: <FileText size={16} /> },
|
||||
{ href: "/admin/wordfilter", label: "Word filter", icon: <Filter size={16} /> },
|
||||
{ href: "/admin/maintenance", label: "Maintenance", icon: <Wrench size={16} /> },
|
||||
{ href: "/admin/housekeeping", label: "Housekeeping", icon: <Settings size={16} /> },
|
||||
{ href: "/admin/rooms", label: "Rooms", icon: <DoorOpen size={16} /> },
|
||||
{ href: "/admin/email-templates", label: "Email templates", icon: <Mail size={16} /> },
|
||||
{ href: "/admin/theme", label: "Theme", icon: <Palette size={16} /> },
|
||||
{ href: "/admin/media", label: "Media", icon: <Image size={16} /> },
|
||||
{ href: "/admin/settings", label: "Settings", icon: <Cog size={16} /> },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -81,7 +87,6 @@ const NAV_GROUPS: { label: string; items: { href: string; label: string }[] }[]
|
||||
export default async function AdminLayout({ children }: { children: ReactNode }) {
|
||||
const staff = await requireStaff();
|
||||
|
||||
// Force staff 2FA before the admin panel (AtomCMS ForceStaffTwoFactorMiddleware).
|
||||
if (await siteSettings.getBool("force_staff_2fa", false)) {
|
||||
const u = await prisma.user
|
||||
.findUnique({ where: { id: staff.id }, select: { twoFactorConfirmedAt: true } })
|
||||
@@ -89,49 +94,81 @@ export default async function AdminLayout({ children }: { children: ReactNode })
|
||||
if (!u?.twoFactorConfirmedAt) redirect("/settings/2fa?error=staffrequired");
|
||||
}
|
||||
|
||||
const initial = staff.username.charAt(0).toUpperCase();
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[232px_minmax(0,1fr)] gap-5 items-start">
|
||||
<aside className="sticky top-4 self-start bg-[#2d2d44] text-[#e7e9f3] rounded-xl p-3.5 shadow-card max-h-[calc(100vh-2rem)] overflow-y-auto">
|
||||
<div className="flex items-center gap-2.5 px-1.5 pb-3.5 border-b border-white/10 mb-2">
|
||||
<span
|
||||
className="flex-none w-[38px] h-[38px] rounded-lg grid place-items-center font-extrabold text-[#1a1a2e] bg-[var(--color-primary)]"
|
||||
aria-hidden
|
||||
>
|
||||
{initial}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<div className="font-bold text-sm leading-tight text-white truncate">{staff.username}</div>
|
||||
<span className="inline-block mt-0.5 text-[0.66rem] font-bold uppercase tracking-wider text-[#1a1a2e] bg-[var(--color-primary)] rounded-full px-2 py-0.5">
|
||||
rank {staff.rank}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex flex-col gap-0.5">
|
||||
{NAV_GROUPS.map((group) => (
|
||||
<div key={group.label} className="mt-2">
|
||||
<span className="block text-[0.64rem] font-bold uppercase tracking-widest text-[rgba(231,233,243,0.42)] px-2.5 pb-1">
|
||||
{group.label}
|
||||
</span>
|
||||
{group.items.map((item) => (
|
||||
<AdminNavLink key={item.href} href={item.href} label={item.label} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div className="min-w-0">
|
||||
<header className="flex items-center justify-between gap-4 bg-[var(--color-surface)] border border-[var(--border)] rounded-xl px-4 py-3 mb-4 shadow-card">
|
||||
<h2 className="m-0 text-base font-extrabold">Housekeeping</h2>
|
||||
<span className="muted text-[0.8rem]">
|
||||
Signed in as <strong>{staff.username}</strong>
|
||||
</span>
|
||||
</header>
|
||||
<section className="admin-page">{children}</section>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] min-h-screen bg-[var(--color-background)]">
|
||||
<Sidebar staff={staff} />
|
||||
<div className="flex flex-col min-w-0 p-5 lg:p-6">
|
||||
<Topbar staff={staff} />
|
||||
<section className="admin-page flex-1">{children}</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Sidebar({ staff }: { staff: { id: number; username: string; rank: number } }) {
|
||||
const initial = staff.username.charAt(0).toUpperCase();
|
||||
|
||||
return (
|
||||
<aside className="sticky top-0 self-start h-screen bg-gradient-to-b from-[#1e1b2e] to-[#151226] text-[#c8cbe0] shadow-xl flex flex-col">
|
||||
<div className="flex items-center gap-3 px-4 py-5 border-b border-white/[0.06]">
|
||||
<span className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[#1a1a2e] bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-hover)] shadow-lg shadow-[var(--color-primary)]/20" aria-hidden>
|
||||
{initial}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-semibold text-sm text-white truncate">{staff.username}</div>
|
||||
<span className="inline-block mt-0.5 text-[0.6rem] font-bold uppercase tracking-widest text-[rgba(200,203,224,0.5)]">rank {staff.rank}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
|
||||
{NAV_GROUPS.map((group) => (
|
||||
<div key={group.label}>
|
||||
<div className="flex items-center gap-1.5 px-2 py-2 text-[0.6rem] font-bold uppercase tracking-[0.12em] text-[rgba(200,203,224,0.3)]">
|
||||
{group.icon}
|
||||
<span>{group.label}</span>
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
{group.items.map((item) => (
|
||||
<AdminNavLink key={item.href} href={item.href} icon={item.icon}>
|
||||
{item.label}
|
||||
</AdminNavLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="px-3 py-3 border-t border-white/[0.06]">
|
||||
<a
|
||||
href="/"
|
||||
className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[#c8cbe0]/60 text-xs font-medium hover:text-white hover:bg-white/5 transition-all duration-150 no-underline"
|
||||
>
|
||||
<LogOut size={14} />
|
||||
<span>Back to site</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function Topbar({ staff }: { staff: { id: number; username: string; rank: number } }) {
|
||||
return (
|
||||
<header className="flex items-center justify-between gap-4 bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl px-5 py-3 mb-5 shadow-card">
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="m-0 text-base font-extrabold text-[var(--color-text)]">Housekeeping</h2>
|
||||
<span className="hidden sm:inline-block w-px h-5 bg-[var(--border)]" />
|
||||
<span className="hidden sm:inline text-xs text-[var(--color-text-muted)]">
|
||||
Hotel management panel
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-[var(--color-text-muted)]">
|
||||
<strong className="text-[var(--color-text)]">{staff.username}</strong>
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-wider text-[#1a1a2e] bg-[var(--color-primary)] rounded-full px-2.5 py-1">
|
||||
rank {staff.rank}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
+67
-102
@@ -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 (
|
||||
<main>
|
||||
<h1>Dashboard</h1>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label="Players online"
|
||||
value={online}
|
||||
hint={dbOk ? `${users} accounts` : "DB unavailable"}
|
||||
state={dbOk ? "neutral" : "danger"}
|
||||
icon="👤"
|
||||
/>
|
||||
<StatusCard label="Articles" value={dbOk ? articles : "—"} icon="📰" />
|
||||
<StatusCard
|
||||
label="Active bans"
|
||||
value={dbOk ? bans : "—"}
|
||||
state={bans > 0 ? "warn" : "neutral"}
|
||||
icon="🔧"
|
||||
/>
|
||||
<StatusCard
|
||||
label="Database"
|
||||
value={dbOk ? "Connected" : "Down"}
|
||||
state={dbOk ? "ok" : "danger"}
|
||||
icon="🗄️"
|
||||
/>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Activity size={20} className="text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Dashboard</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Hotel overview & live status</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="m-0 text-lg">Users by rank</h2>
|
||||
{rankCounts.length === 0 ? (
|
||||
<p className="muted mt-3">
|
||||
{dbOk ? "No accounts to break down yet." : "DB unavailable."}
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid gap-2 mt-3">
|
||||
{rankCounts.map((r) => {
|
||||
const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
|
||||
return (
|
||||
<div
|
||||
key={r.rank}
|
||||
className="grid items-center gap-2.5"
|
||||
style={{ gridTemplateColumns: "5.5rem 1fr 3rem" }}
|
||||
>
|
||||
<span className="text-[var(--color-text-muted)] text-[0.82rem] whitespace-nowrap">
|
||||
Rank {r.rank}
|
||||
</span>
|
||||
<div
|
||||
className="h-3.5 rounded-[var(--radius-sm)] overflow-hidden"
|
||||
style={{ background: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}
|
||||
role="img"
|
||||
aria-label={`Rank ${r.rank}: ${r.count} accounts`}
|
||||
>
|
||||
<div
|
||||
className="h-full rounded-[var(--radius-sm)]"
|
||||
style={{
|
||||
width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%`,
|
||||
background: "var(--color-primary, #eeb425)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<strong className="text-[0.85rem] text-right">{r.count}</strong>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||
<StatusCard label="Players online" value={online} hint={dbOk ? `${users} total accounts` : "DB unavailable"} state={dbOk ? "neutral" : "danger"} icon={<Users size={18} />} />
|
||||
<StatusCard label="Articles" value={dbOk ? articles : "—"} state="neutral" icon={<Newspaper size={18} />} />
|
||||
<StatusCard label="Active bans" value={dbOk ? bans : "—"} state={bans > 0 ? "warn" : "neutral"} icon={<Ban size={18} />} />
|
||||
<StatusCard label="Database" value={dbOk ? "Connected" : "Down"} state={dbOk ? "ok" : "danger"} icon={<Database size={18} />} />
|
||||
</div>
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-baseline gap-3">
|
||||
<h2 className="m-0 text-lg">Recent staff activity</h2>
|
||||
<Link href="/admin/commandocentrum" className="muted text-[0.82rem]">
|
||||
View all →
|
||||
</Link>
|
||||
</div>
|
||||
{activity.length === 0 ? (
|
||||
<p className="muted mt-3">No staff activity logged yet.</p>
|
||||
) : (
|
||||
<table className="mt-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>When</th>
|
||||
<th>Staff</th>
|
||||
<th>Action</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{activity.map((a) => (
|
||||
<tr key={String(a.id)}>
|
||||
<td className="muted whitespace-nowrap">
|
||||
{fromDate(a.createdAt)}
|
||||
</td>
|
||||
<td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
|
||||
<td>
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">
|
||||
{a.action}
|
||||
</span>
|
||||
</td>
|
||||
<td>{a.description}</td>
|
||||
</tr>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<section className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card">
|
||||
<h2 className="m-0 text-sm font-bold text-[var(--color-text)] mb-4">Users by rank</h2>
|
||||
{rankCounts.length === 0 ? (
|
||||
<p className="text-xs text-[var(--color-text-muted)]">{dbOk ? "No accounts to break down yet." : "DB unavailable."}</p>
|
||||
) : (
|
||||
<div className="space-y-2.5">
|
||||
{rankCounts.map((r) => {
|
||||
const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
|
||||
return (
|
||||
<div key={r.rank} className="grid items-center gap-3" style={{ gridTemplateColumns: "5rem 1fr 2.5rem" }}>
|
||||
<span className="text-xs font-medium text-[var(--color-text-muted)]">Rank {r.rank}</span>
|
||||
<div className="h-3 rounded-[var(--radius-sm)] overflow-hidden bg-[var(--color-primary)]/10" role="img" aria-label={`Rank ${r.rank}: ${r.count} accounts`}>
|
||||
<div className="h-full rounded-[var(--radius-sm)] bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] transition-all duration-500" style={{ width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%` }} />
|
||||
</div>
|
||||
<strong className="text-xs text-right text-[var(--color-text-muted)]">{r.count}</strong>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="m-0 text-sm font-bold text-[var(--color-text)]">Recent staff activity</h2>
|
||||
<Link href="/admin/commandocentrum" className="text-xs font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] flex items-center gap-1 no-underline">
|
||||
View all <ArrowRight size={12} />
|
||||
</Link>
|
||||
</div>
|
||||
{activity.length === 0 ? (
|
||||
<p className="text-xs text-[var(--color-text-muted)]">No staff activity logged yet.</p>
|
||||
) : (
|
||||
<div className="space-y-0">
|
||||
{activity.map((a, i) => (
|
||||
<div key={String(a.id)} className={`flex items-center gap-3 py-2.5 ${i > 0 ? "border-t border-[var(--border)]" : ""}`}>
|
||||
<div className="w-7 h-7 rounded-full bg-[var(--color-primary)]/10 grid place-items-center flex-none">
|
||||
<Activity size={12} className="text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-[var(--color-text)] truncate">{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</div>
|
||||
<div className="text-xs text-[var(--color-text-muted)] truncate">{a.description}</div>
|
||||
</div>
|
||||
<div className="text-right flex-none">
|
||||
<span className="inline-block text-[0.6rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{a.action}</span>
|
||||
<div className="text-[0.6rem] text-[var(--color-text-muted)] mt-0.5">{fromDate(a.createdAt)}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -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({
|
||||
<td>
|
||||
<div style={{ display: "flex", gap: "0.25rem", flexWrap: "wrap", justifyContent: "flex-start" }}>
|
||||
<Link href={`/admin/users/${u.id}/edit`} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Edit</Link>
|
||||
<form style={{ display: "inline-block" }} action="/api/admin/users/actions" method="post">
|
||||
<input type="hidden" name="userId" value={u.id} />
|
||||
<input type="hidden" name="username" value={u.username} />
|
||||
<button
|
||||
type="submit"
|
||||
name="action"
|
||||
value="set_rank"
|
||||
className="btn btn-outline"
|
||||
style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
|
||||
onClick={(e) => {
|
||||
if (!confirm(`Set rank for ${u.username}?`)) e.preventDefault();
|
||||
}}
|
||||
>Set Rank</button>
|
||||
</form>
|
||||
<form style={{ display: "inline-block" }} action="/api/admin/users/actions" method="post">
|
||||
<input type="hidden" name="userId" value={u.id} />
|
||||
<input type="hidden" name="username" value={u.username} />
|
||||
<button
|
||||
type="submit"
|
||||
name="action"
|
||||
value="disconnect"
|
||||
className="btn btn-danger"
|
||||
style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
|
||||
onClick={(e) => {
|
||||
if (!confirm(`Disconnect ${u.username}?`)) e.preventDefault();
|
||||
}}
|
||||
>Disconnect</button>
|
||||
</form>
|
||||
<form style={{ display: "inline-block" }} action="/api/admin/users/actions" method="post">
|
||||
<input type="hidden" name="userId" value={u.id} />
|
||||
<input type="hidden" name="username" value={u.username} />
|
||||
<button
|
||||
type="submit"
|
||||
name="action"
|
||||
value="alert"
|
||||
className="btn btn-primary"
|
||||
style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
|
||||
onClick={(e) => {
|
||||
if (!confirm(`Send alert to ${u.username}?`)) e.preventDefault();
|
||||
}}
|
||||
>Alert</button>
|
||||
</form>
|
||||
<ConfirmAction message={`Set rank for ${u.username}?`} action="set_rank" userId={u.id} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Set Rank</ConfirmAction>
|
||||
<ConfirmAction message={`Disconnect ${u.username}?`} action="disconnect" userId={u.id} className="btn btn-danger" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Disconnect</ConfirmAction>
|
||||
<ConfirmAction message={`Send alert to ${u.username}?`} action="alert" userId={u.id} className="btn btn-primary" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Alert</ConfirmAction>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
+13
-11
@@ -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. */
|
||||
|
||||
@@ -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 (
|
||||
<Link
|
||||
href={href}
|
||||
className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-[#c8cbe0] text-sm font-semibold no-underline transition-[background,color] duration-150 hover:bg-white/7 hover:text-white hover:no-underline ${
|
||||
active ? "bg-[var(--color-primary)] text-[#1a1a2e] shadow-[0_2px_8px_rgba(238,180,37,0.35)]" : ""
|
||||
className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
|
||||
active
|
||||
? "bg-gradient-to-r from-[var(--color-primary)]/20 to-transparent text-white shadow-sm border-l-2 border-[var(--color-primary)]"
|
||||
: "text-[#8b8fa8] hover:text-white hover:bg-white/[0.04] hover:no-underline"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
{icon ? (
|
||||
<span className={`flex-none ${active ? "text-[var(--color-primary)]" : "text-[#5c5f7a]"}`}>
|
||||
{icon}
|
||||
</span>
|
||||
) : null}
|
||||
<span>{children}</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<form action="/api/admin/users/actions" method="post" style={{ display: "inline-block" }}>
|
||||
<input type="hidden" name="userId" value={userId} />
|
||||
<input type="hidden" name="action" value={action} />
|
||||
<button
|
||||
type="submit"
|
||||
className={className}
|
||||
style={style}
|
||||
onClick={(e) => {
|
||||
if (!confirm(message)) e.preventDefault();
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className={`bg-[var(--color-surface)] border border-[var(--border)] border-l-4 ${borderColor} rounded-xl p-3.5 shadow-card`}>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-[0.72rem] font-bold uppercase tracking-wider text-[var(--color-text-muted)]">{label}</span>
|
||||
<div className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
|
||||
<div className="flex items-center justify-between gap-3 mb-3">
|
||||
<span className="text-[0.65rem] font-bold uppercase tracking-widest text-[var(--color-text-muted)]">{label}</span>
|
||||
{icon ? (
|
||||
<span className="text-lg leading-none" aria-hidden>
|
||||
<span className="w-8 h-8 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/15 to-[var(--color-primary)]/5 grid place-items-center text-[var(--color-primary)] flex-none">
|
||||
{icon}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="text-[1.7rem] font-extrabold leading-tight mt-1.5">{value}</div>
|
||||
{hint ? <div className="text-[0.78rem] text-[var(--color-text-muted)] mt-1">{hint}</div> : null}
|
||||
<div className="text-2xl font-extrabold text-[var(--color-text)] leading-tight">{value}</div>
|
||||
{hint ? <div className="text-[0.7rem] text-[var(--color-text-muted)] mt-1.5 font-medium">{hint}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user