rikx-beheer/app/projecten/nieuw/page.tsx

import Link from "next/link";
import { redirect } from "next/navigation";
import { getSession } from "../../../lib/auth";
import { listRikxRondes } from "../../../lib/db";
import { DEFAULT_PROJECT_STATUS, PROJECT_STATUSES } from "../../../lib/projectStatus";
import { AppHeader } from "../../AppHeader";
import { createProject } from "../actions";

export default async function NieuwProjectPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const session = await getSession();
  if (!session) redirect("/login");

  const { error } = await searchParams;
  const rondes = listRikxRondes();
  const errorMsg = error === "missing" ? "Vul een projectnaam in." : null;

  const inputClass =
    "rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-rikx-orange";

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

      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-10 flex flex-col gap-6">
        <Link
          href="/projecten"
          className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
        >
          ← Terug naar projecten
        </Link>
        <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Nieuw project</h2>
        {errorMsg && <p className="text-sm text-red-600 dark:text-red-400">{errorMsg}</p>}
        <form
          action={createProject}
          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"
        >
          <div className="flex flex-col gap-1">
            <label htmlFor="name" className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
              Projectnaam<span className="text-red-500 ml-1">*</span>
            </label>
            <input id="name" type="text" name="name" required autoFocus className={inputClass} />
          </div>
          <div className="flex flex-col gap-1">
            <label htmlFor="status" className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
              Status
            </label>
            <select id="status" name="status" defaultValue={DEFAULT_PROJECT_STATUS} className={inputClass}>
              {PROJECT_STATUSES.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.label}
                </option>
              ))}
            </select>
          </div>
          <div className="flex flex-col gap-1">
            <label htmlFor="ronde_id" className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
              Rikx Ronde
            </label>
            <select id="ronde_id" name="ronde_id" defaultValue="" className={inputClass}>
              <option value="">Geen ronde</option>
              {rondes.map((r) => (
                <option key={r.id} value={r.id}>
                  {r.label}
                </option>
              ))}
            </select>
          </div>
          <div className="sm:col-span-3 flex gap-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"
            >
              Opslaan
            </button>
            <Link
              href="/projecten"
              className="rounded-lg border border-zinc-300 dark:border-zinc-700 px-5 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
            >
              Annuleren
            </Link>
          </div>
        </form>
      </main>
    </div>
  );
}