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>
43 lines
1.8 KiB
TypeScript
43 lines
1.8 KiB
TypeScript
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>
|
|
);
|
|
}
|