128 lines
5.0 KiB
TypeScript
128 lines
5.0 KiB
TypeScript
import Link from "next/link";
|
|
import { StatusCard } from "@/components/admin/dashboard";
|
|
import { ConfirmAction } from "@/components/admin/confirm-action";
|
|
import { prisma } from "@/lib/prisma";
|
|
import { getTranslations } from "next-intl/server";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
const PER_PAGE = 25;
|
|
|
|
export default async function AdminUsers({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<{ q?: string; page?: string; form?: string }>;
|
|
}) {
|
|
const sp = await searchParams;
|
|
const t = await getTranslations("pages.admin.users");
|
|
const q = (sp.q ?? "").trim();
|
|
const page = Math.max(1, Number(sp.page ?? "1") || 1);
|
|
const where = q ? { username: { contains: q } } : {};
|
|
|
|
const users = await prisma.user
|
|
.findMany({
|
|
where,
|
|
select: { id: true, username: true, rank: true, credits: true, online: true },
|
|
orderBy: { id: "desc" },
|
|
skip: (page - 1) * PER_PAGE,
|
|
take: PER_PAGE,
|
|
})
|
|
.catch(() => []);
|
|
const total = await prisma.user.count({ where }).catch(() => 0);
|
|
const pages = Math.max(1, Math.ceil(total / PER_PAGE));
|
|
|
|
const onlineOnPage = users.filter((u) => u.online === "1").length;
|
|
|
|
return (
|
|
<main>
|
|
<h1>{t("title")}</h1>
|
|
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
|
{q ? t("searchResults", { count: total, query: q }) : t("subtitle")}
|
|
</p>
|
|
|
|
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
|
<StatusCard label={t("title")} value={total} icon="👥" />
|
|
<StatusCard label={t("onThisPage")} value={users.length} icon="📄" />
|
|
<StatusCard
|
|
label={t("colOnline")}
|
|
value={onlineOnPage}
|
|
state={onlineOnPage > 0 ? "ok" : "neutral"}
|
|
icon="🟢"
|
|
/>
|
|
</div>
|
|
|
|
<form
|
|
className="admin-card mb-6"
|
|
style={{ display: "flex", gap: "0.5rem", marginBottom: "1.5rem", flexWrap: "wrap" }}
|
|
>
|
|
<input
|
|
name="q"
|
|
defaultValue={q}
|
|
placeholder={t("searchPlaceholder")}
|
|
style={{ flex: 1, minWidth: 200 }}
|
|
/>
|
|
<button type="submit" className="btn btn-primary">
|
|
{t("search")}
|
|
</button>
|
|
</form>
|
|
|
|
<section className="mt-6">
|
|
<h2>{t("title")} ({total})</h2>
|
|
{users.length === 0 ? (
|
|
<p className="muted">{t("noResults")}</p>
|
|
) : (
|
|
<div style={{ overflowX: "auto" }}>
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>{t("colId")}</th>
|
|
<th>{t("colUsername")}</th>
|
|
<th>{t("colRank")}</th>
|
|
<th>{t("detail.credits")}</th>
|
|
<th>{t("colOnline")}</th>
|
|
<th style={{ width: "200px" }}>{t("colActions")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users.map((u) => (
|
|
<tr key={u.id}>
|
|
<td className="muted">{u.id}</td>
|
|
<td>
|
|
<Link href={`/admin/users/${u.id}`}>{u.username}</Link>
|
|
</td>
|
|
<td>{u.rank}</td>
|
|
<td>{u.credits}</td>
|
|
<td>
|
|
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${u.online === "1" ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
|
|
{u.online === "1" ? t("colOnline") : t("offline")}
|
|
</span>
|
|
</td>
|
|
<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" }}>{t("edit")}</Link>
|
|
<ConfirmAction message={t("confirmSetRank", { username: u.username })} action="set_rank" userId={u.id} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("setRank")}</ConfirmAction>
|
|
<ConfirmAction message={t("confirmDisconnect", { username: u.username })} action="disconnect" userId={u.id} className="btn btn-danger" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("disconnect")}</ConfirmAction>
|
|
<ConfirmAction message={t("confirmAlert", { username: u.username })} action="alert" userId={u.id} className="btn btn-primary" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("alert")}</ConfirmAction>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<p className="muted">
|
|
{t("pagination", { page, pages, total })}
|
|
{page < pages ? (
|
|
<>
|
|
{" · "}
|
|
<Link href={`/admin/users?q=${encodeURIComponent(q)}&page=${page + 1}`}>{t("next")} →</Link>
|
|
</>
|
|
) : null}
|
|
</p>
|
|
</main>
|
|
);
|
|
}
|