142 lines
4.8 KiB
TypeScript
142 lines
4.8 KiB
TypeScript
import Link from "next/link";
|
|
import { StatusCard } from "@/components/admin/dashboard";
|
|
import { prisma } from "@/lib/prisma";
|
|
|
|
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 q = (sp.q ?? "").trim();
|
|
const page = Math.max(1, Number(sp.page ?? "1") || 1);
|
|
const where = q ? { username: { contains: q } } : {};
|
|
|
|
// .catch(...) keeps the precise selected-row type while falling back to an
|
|
// empty page when the DB is unavailable (instead of a 500).
|
|
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>Users</h1>
|
|
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
|
{q ? `Search results for “${q}”.` : "Most recent accounts first."}
|
|
</p>
|
|
|
|
<div className="admin-stats">
|
|
<StatusCard label="Total users" value={total} icon="👥" />
|
|
<StatusCard label="On this page" value={users.length} icon="📄" />
|
|
<StatusCard
|
|
label="Online (page)"
|
|
value={onlineOnPage}
|
|
state={onlineOnPage > 0 ? "ok" : "neutral"}
|
|
icon="🟢"
|
|
/>
|
|
</div>
|
|
|
|
<form
|
|
className="card"
|
|
style={{ display: "flex", gap: "0.5rem", marginBottom: "1.5rem", flexWrap: "wrap" }}
|
|
>
|
|
<input
|
|
name="q"
|
|
defaultValue={q}
|
|
placeholder="Search username"
|
|
style={{ flex: 1, minWidth: 200 }}
|
|
/>
|
|
<button type="submit" className="btn btn-primary">
|
|
Search
|
|
</button>
|
|
</form>
|
|
|
|
<section className="admin-section">
|
|
<h2>Accounts ({total})</h2>
|
|
{users.length === 0 ? (
|
|
<p className="muted">No users match this search.</p>
|
|
) : (
|
|
<div style={{ overflowX: "auto" }}>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Username</th>
|
|
<th>Rank</th>
|
|
<th>Credits</th>
|
|
<th>Status</th>
|
|
<th>Actions</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={`admin-badge ${u.online === "1" ? "ok" : ""}`}>
|
|
{u.online === "1" ? "online" : "offline"}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div style={{ display: "flex", gap: "0.25rem", flexWrap: "wrap" }}>
|
|
<Link href={`/admin/users/${u.id}/edit`} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Edit</Link>
|
|
<button
|
|
type="button"
|
|
className="btn btn-outline"
|
|
onClick={() => alert(`Set rank for ${u.username}`)}
|
|
style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
|
|
>Set Rank</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-danger"
|
|
onClick={() => alert(`Disconnect ${u.username}`)}
|
|
style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
|
|
>Disconnect</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary"
|
|
onClick={() => alert(`Alert ${u.username}`)}
|
|
style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
|
|
>Alert</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<p className="muted">
|
|
Page {page} / {pages} · {total} users
|
|
{page < pages ? (
|
|
<>
|
|
{" · "}
|
|
<Link href={`/admin/users?q=${encodeURIComponent(q)}&page=${page + 1}`}>Next →</Link>
|
|
</>
|
|
) : null}
|
|
</p>
|
|
</main>
|
|
);
|
|
}
|