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,42 @@
+import Link from "next/link";
+import type { ProjectListItem } from "../../lib/db";
+import { PROJECT_STATUSES } from "../../lib/projectStatus";
+
+// Kanban met één kolom per status, zoals de pipeline in het oude Rikx-portaal.
+export function ProjectPipeline({ projects, status }: { projects: ProjectListItem[]; status: string }) {
+  const columns = status ? PROJECT_STATUSES.filter((s) => s.id === status) : PROJECT_STATUSES;
+
+  return (
+    <div className="flex gap-4 overflow-x-auto pb-4 -mx-4 px-4 sm:mx-0 sm:px-0">
+      {columns.map((column) => {
+        const items = projects.filter((p) => p.status === column.id);
+        return (
+          <section
+            key={column.id}
+            className={`${column.columnClass} rounded-xl p-3 w-72 shrink-0 flex flex-col gap-3 min-h-96`}
+          >
+            <h2 className="flex items-center justify-between px-1 text-sm font-semibold text-zinc-800">
+              {column.label}
+              <span className="font-normal text-zinc-600">{items.length}</span>
+            </h2>
+            {items.map((p) => (
+              <Link
+                key={p.id}
+                href={`/projecten/${p.id}`}
+                className="block rounded-lg bg-white dark:bg-zinc-900 p-3 shadow-sm ring-1 ring-black/5 hover:ring-rikx-orange transition-shadow"
+              >
+                <p className="font-medium text-sm text-zinc-900 dark:text-zinc-100 break-words">{p.name}</p>
+                {p.ronde_label && (
+                  <p className="mt-1 text-xs font-medium text-rikx-orange-dark">{p.ronde_label}</p>
+                )}
+                <p className="mt-1 text-xs text-zinc-500">
+                  Aangemaakt {new Date(p.created_at).toLocaleDateString("nl-NL")}
+                </p>
+              </Link>
+            ))}
+          </section>
+        );
+      })}
+    </div>
+  );
+}