remco-vermeer
9f0bd87c40
- 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>
51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
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>
|
|
);
|
|
}
|