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,50 @@
+import Link from "next/link";
+import type { ProjectListItem } from "../../lib/db";
+import { projectStatusBadgeClass, projectStatusLabel } from "../../lib/projectStatus";
+
+export function ProjectTable({ projects, isFiltered }: { projects: ProjectListItem[]; isFiltered: boolean }) {
+  if (projects.length === 0) {
+    return (
+      <p className="text-sm text-zinc-500">
+        {isFiltered ? "Geen projecten gevonden met deze filters." : "Nog geen projecten toegevoegd."}
+      </p>
+    );
+  }
+
+  return (
+    <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">Projectnaam</th>
+            <th className="text-left px-4 py-3 font-medium">Status</th>
+            <th className="text-left px-4 py-3 font-medium">Rikx Ronde</th>
+            <th className="text-left px-4 py-3 font-medium">Aangemaakt</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
+          {projects.map((p) => (
+            <tr key={p.id} className="bg-white dark:bg-zinc-950 hover:bg-orange-50/60 dark:hover:bg-zinc-900 transition-colors">
+              <td className="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">
+                <Link href={`/projecten/${p.id}`} className="hover:text-rikx-orange-dark hover:underline">
+                  {p.name}
+                </Link>
+              </td>
+              <td className="px-4 py-3">
+                <span
+                  className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap ${projectStatusBadgeClass(p.status)}`}
+                >
+                  {projectStatusLabel(p.status)}
+                </span>
+              </td>
+              <td className="px-4 py-3 text-zinc-700 dark:text-zinc-300 whitespace-nowrap">{p.ronde_label ?? "—"}</td>
+              <td className="px-4 py-3 text-zinc-500 text-xs whitespace-nowrap">
+                {new Date(p.created_at).toLocaleDateString("nl-NL")}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}