Voeg Module 1 Projecten toe met project plan, Rikx calculatie en Rikx rondes

- Projectenpagina met pipeline (standaard) en tabelweergave, filters op status, Rikx Ronde en zoeken - Projectpagina in stappen: Project plan (velden uit de Rikx-aanvraag) en Rikx calculatie achter een schuif, live berekend volgens de rekenmethode - Rikx rondes beheren (label, Rikx waarde, Rikx prijs) en koppelen aan projecten - Oranje Rikx-menubalk met menu per module, gedeeld door alle pagina's - Oude offerte-tabellen opgeruimd: leeg wordt verwijderd, met data hernoemd naar legacy_* - CLAUDE.md bijgewerkt naar de huidige stand Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-08 10:26:30 +02:00
parent 46eecc31a4
commit 9f0bd87c40
25 changed files with 2161 additions and 55 deletions
@@ -0,0 +1,90 @@
+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>
+  );
+}