EpicNext-Cms/src/app/admin/page.tsx

import {
	Activity,
	ArrowRight,
	Ban,
	Database,
	Newspaper,
	Users,
} from "lucide-react";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

function fromDate(d: Date | null | undefined): string {
	return d ? d.toISOString().slice(0, 16).replace("T", " ") : "—";
}

type RankCount = { rank: number; count: number };

export default async function AdminDashboard() {
	const t = await getTranslations("pages.admin.dashboard");
	let users = -1;
	let online = 0;
	let articles = 0;
	let bans = 0;
	try {
		[users, online, articles, bans] = await Promise.all([
			prisma.user.count(),
			prisma.user.count({ where: { online: "1" } }),
			prisma.websiteArticles.count(),
			prisma.ban.count({
				where: { banExpire: { gt: Math.floor(Date.now() / 1000) } },
			}),
		]);
	} catch {}
	const dbOk = users >= 0;

	const rankGroups = await prisma.user
		.groupBy({
			by: ["rank"],
			_count: { _all: true },
			orderBy: { rank: "desc" },
		})
		.catch(() => [] as Array<{ rank: number; _count: { _all: number } }>);
	const rankCounts: RankCount[] = rankGroups
		.map((g) => ({ rank: g.rank, count: g._count._all }))
		.sort((a, b) => b.count - a.count);
	const maxRankCount = rankCounts.reduce((m, r) => Math.max(m, r.count), 0);

	const activity = await prisma.staffActivities
		.findMany({ orderBy: { createdAt: "desc" }, take: 8 })
		.catch(
			() => [] as Awaited<ReturnType<typeof prisma.staffActivities.findMany>>,
		);
	const staffIds = Array.from(
		new Set(activity.map((a) => Number(a.userId))),
	).filter((n) => n > 0);
	let nameById = new Map<number, string>();
	if (staffIds.length) {
		const u = await prisma.user
			.findMany({
				where: { id: { in: staffIds } },
				select: { id: true, username: true },
			})
			.catch(() => []);
		nameById = new Map(u.map((x) => [x.id, x.username]));
	}

	return (
		<main>
			<div className="flex items-center gap-3 mb-6">
				<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
					<Activity size={20} className="text-[var(--admin-accent)]" />
				</div>
				<div>
					<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
						{t("title")}
					</h1>
					<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
						{t("subtitle")}
					</p>
				</div>
			</div>

			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
				<StatusCard
					label={t("playersOnline")}
					value={online}
					hint={dbOk ? t("totalAccounts", { count: users }) : t("databaseDown")}
					state={dbOk ? "neutral" : "danger"}
					icon={<Users size={18} />}
				/>
				<StatusCard
					label={t("articles")}
					value={dbOk ? articles : "—"}
					state="neutral"
					icon={<Newspaper size={18} />}
				/>
				<StatusCard
					label={t("activeBans")}
					value={dbOk ? bans : "—"}
					state={bans > 0 ? "warn" : "neutral"}
					icon={<Ban size={18} />}
				/>
				<StatusCard
					label={t("database")}
					value={dbOk ? t("databaseConnected") : t("databaseDown")}
					state={dbOk ? "ok" : "danger"}
					icon={<Database size={18} />}
				/>
			</div>

			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
				<section className="admin-card p-5">
					<h2 className="text-sm font-bold text-[var(--admin-text)] mb-4 admin-section-title">
						{t("usersByRank")}
					</h2>
					{rankCounts.length === 0 ? (
						<p className="text-xs text-[var(--admin-text-muted)]">
							{dbOk ? t("noAccountsToBreakDown") : t("databaseDown")}
						</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(--admin-text-muted)]">
											{t("rankLabel", { rank: r.rank })}
										</span>
										<div
											className="h-3 rounded-md overflow-hidden bg-[var(--admin-accent)]/10"
											role="img"
											aria-label={t("rankWithCount", {
												rank: r.rank,
												count: r.count,
											})}
										>
											<div
												className="h-full rounded-md bg-gradient-to-r from-[var(--admin-accent)] to-[var(--admin-accent)] transition-all duration-500"
												style={{
													width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%`,
												}}
											/>
										</div>
										<strong className="text-xs text-right text-[var(--admin-text-muted)]">
											{r.count}
										</strong>
									</div>
								);
							})}
						</div>
					)}
				</section>

				<section className="admin-card p-5">
					<div className="flex items-center justify-between mb-4">
						<h2 className="text-sm font-bold text-[var(--admin-text)] admin-section-title">
							{t("recentStaffActivity")}
						</h2>
						<Link
							href="/admin/logs"
							className="text-xs font-medium text-[var(--admin-accent)] hover:text-[var(--admin-accent)] flex items-center gap-1 no-underline"
						>
							{t("viewAll")} <ArrowRight size={12} />
						</Link>
					</div>
					{activity.length === 0 ? (
						<p className="text-xs text-[var(--admin-text-muted)]">
							{t("noStaffActivityLogged")}
						</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(--admin-border)]" : ""}`}
								>
									<div className="w-7 h-7 rounded-full bg-[var(--admin-accent)]/10 grid place-items-center flex-none">
										<Activity
											size={12}
											className="text-[var(--admin-accent)]"
										/>
									</div>
									<div className="flex-1 min-w-0">
										<div className="text-sm font-medium text-[var(--admin-text)] truncate">
											{nameById.get(Number(a.userId)) ?? `#${a.userId}`}
										</div>
										<div className="text-xs text-[var(--admin-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(--admin-accent)]/18 text-[var(--admin-text)] admin-card inline-flex items-center justify-center min-w-[60px]">
											{a.action}
										</span>
										<div className="text-[0.6rem] text-[var(--admin-text-muted)] mt-0.5">
											{fromDate(a.createdAt)}
										</div>
									</div>
								</div>
							))}
						</div>
					)}
				</section>
			</div>
		</main>
	);
}