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
+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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user