rikx-beheer/app/rondes/page.tsx

import Link from "next/link";
import { redirect } from "next/navigation";
import { requireAdmin } from "../../lib/auth";
import { getDb, type RikxRonde } from "../../lib/db";
import { AppHeader } from "../AppHeader";
import { createRonde } from "./actions";
import { DeleteRondeButton } from "./DeleteRondeButton";
import { listExperts } from "../../lib/experts";
import { ExpertCheckboxes } from "./ExpertCheckboxes";
import { RONDE_ERRORS, RondeFields } from "./RondeFields";

const euro = new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR" });
const getal = new Intl.NumberFormat("nl-NL", { maximumFractionDigits: 2 });

export default async function RondesPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const session = await requireAdmin();

  const { error } = await searchParams;
  const experts = listExperts();
  const rondes = (
    getDb()
      .prepare(
        `SELECT r.*, COUNT(p.id) AS project_count
         FROM rikx_rondes r LEFT JOIN projects p ON p.ronde_id = r.id
         GROUP BY r.id ORDER BY r.created_at DESC, r.id DESC`
      )
      .all() as (RikxRonde & { project_count: number })[]
  ).map((r) => ({ ...r }));

  return (
    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
      <AppHeader email={session.email} active="projecten" />

      <main className="max-w-5xl mx-auto px-4 sm:px-6 py-10 flex flex-col gap-10">
        <section>
          <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
            Rikx rondes ({rondes.length})
          </h1>
          {rondes.length === 0 ? (
            <p className="text-sm text-zinc-500">Nog geen Rikx rondes aangemaakt.</p>
          ) : (
            <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="bg-zinc-50 dark:bg-zinc-900 text-zinc-500 dark:text-zinc-400">
                  <tr>
                    <th className="text-left px-4 py-3 font-medium">Ronde label</th>
                    <th className="text-right px-4 py-3 font-medium">Rikx waarde</th>
                    <th className="text-right px-4 py-3 font-medium">Rikx prijs</th>
                    <th className="text-right px-4 py-3 font-medium">Projecten</th>
                    <th className="text-left px-4 py-3 font-medium">Experts</th>
                    <th className="px-4 py-3" colSpan={2}></th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
                  {rondes.map((r) => (
                    <tr key={r.id} className="bg-white dark:bg-zinc-950">
                      <td className="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{r.label}</td>
                      <td className="px-4 py-3 text-right tabular-nums text-zinc-700 dark:text-zinc-300">
                        {r.rikx_waarde === null ? "—" : getal.format(r.rikx_waarde)}
                      </td>
                      <td className="px-4 py-3 text-right tabular-nums text-zinc-700 dark:text-zinc-300">
                        {r.rikx_prijs === null ? "—" : euro.format(r.rikx_prijs)}
                      </td>
                      <td className="px-4 py-3 text-right">
                        <Link href={`/projecten?ronde=${r.id}`} className="text-rikx-orange-dark hover:underline">
                          {r.project_count}
                        </Link>
                      </td>
                      <td className="px-4 py-3 text-zinc-700 dark:text-zinc-300">
                        {experts
                          .filter((e) => e.rondeIds.includes(r.id))
                          .map((e) => e.name)
                          .join(", ") || "—"}
                      </td>
                      <td className="px-4 py-3 text-right">
                        <Link
                          href={`/rondes/${r.id}`}
                          className="text-xs text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
                        >
                          Bewerken
                        </Link>
                      </td>
                      <td className="px-4 py-3 text-right">
                        <DeleteRondeButton id={r.id} label={r.label} projectCount={r.project_count} />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>

        <section>
          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Nieuwe Rikx Ronde</h2>
          {error && RONDE_ERRORS[error] && (
            <p className="text-sm text-red-600 dark:text-red-400 mb-4">{RONDE_ERRORS[error]}</p>
          )}
          <form
            action={createRonde}
            className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 grid grid-cols-1 sm:grid-cols-3 gap-4"
          >
            <RondeFields />
            <ExpertCheckboxes experts={experts} />
            <div className="sm:col-span-3">
              <button
                type="submit"
                className="rounded-lg bg-rikx-maroon hover:bg-rikx-maroon-light px-5 py-2 text-sm font-medium text-white transition-colors"
              >
                Ronde toevoegen
              </button>
            </div>
          </form>
        </section>
      </main>
    </div>
  );
}