Epicnabbo-Catalogus-Updated-Daily/src/app/admin/users/page.tsx

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";

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 } } : {};

  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="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <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="mt-6">
        <h2>Accounts ({total})</h2>
        {users.length === 0 ? (
          <p className="muted">No users match this search.</p>
        ) : (
          <div style={{ overflowX: "auto" }}>
            <table className="w-full">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Username</th>
                  <th>Rank</th>
                  <th>Credits</th>
                  <th>Status</th>
                  <th style={{ width: "200px" }}>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={`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" ? "online" : "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" }}>Edit</Link>
                        <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>
                ))}
              </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>
  );
}