Voeg Module 4 experts, waardebepalingspagina en projectverbeteringen toe
Experts (Module 4) - Pagina Experts (CRM): experts uitnodigen per e-mail (zonder SMTP wordt de link getoond), rondes koppelen, opnieuw uitnodigen, verwijderen en "Inloggen als" (alleen lezen) om mee te kijken - Uitnodigingspagina waar een expert zijn wachtwoord instelt (token 7 dagen geldig, eenmalig, alleen als hash opgeslagen) - Expertpagina: projecten in waardebepaling uit de eigen rondes, project plan lezen en eigen beoordeling geven (3 scores, advies Bonus/Malus, toelichting) - Rollen admin/expert: alle beheerpagina's en -acties controleren de rol - Rikx calculatie gebruikt de beoordelingen van de experts in plaats van de handmatige expertkolommen; experts koppelen ook vanaf de rondepagina Waardebepaling projecten - Nieuwe pagina met projecten in waardebepaling op kosten/impact (laag naar hoog), filter op ronde, Rikx Waarde-veld dat live doorrekent en opslaat in de ronde, en een 75%-lijn bij een gekozen ronde Projecten - Rikx calculatie als tab, zichtbaar vanaf status Waardebepaling, met keuze rekenmethode (Arbeid; Jeugd nog niet beschikbaar) en beoordeling goedgekeurd/afgekeurd met reden - Impactmaker gekoppeld aan een sociaal ondernemer - Opslaan-knop bovenaan; ongeldige velden op een verborgen tab worden getoond - Project toevoegen maakt direct een project aan; aparte pagina verwijderd - Waarderingssystematiek Rikx juni 2023 toegevoegd aan _doc Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
"use client";
|
||||
|
||||
import { useActionState, useState } from "react";
|
||||
import type { RikxRonde } from "../../lib/db";
|
||||
import { createExpert, deleteExpert, resendInvite, type InviteState } from "./actions";
|
||||
|
||||
const inputClass =
|
||||
"h-10 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-rikx-orange";
|
||||
const labelClass = "text-sm font-medium text-zinc-700 dark:text-zinc-300";
|
||||
|
||||
// Melding na het aanmaken of opnieuw uitnodigen; bij een link (geen SMTP) met kopieerknop
|
||||
export function InviteResult({ state }: { state: InviteState }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
if (state.status === "idle") return null;
|
||||
if (state.status === "error") return <p className="text-sm text-red-600 dark:text-red-400">{state.message}</p>;
|
||||
if (state.status === "sent") return <p className="text-sm text-green-700 dark:text-green-400">{state.message}</p>;
|
||||
return (
|
||||
<div className="flex flex-col gap-2 rounded-lg bg-orange-50 dark:bg-zinc-800 px-4 py-3 text-sm">
|
||||
<p className="text-zinc-800 dark:text-zinc-200">{state.message}</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<input readOnly value={state.link} onFocus={(e) => e.target.select()} className={`${inputClass} flex-1 min-w-0 font-mono text-xs`} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
await navigator.clipboard.writeText(state.link);
|
||||
setCopied(true);
|
||||
}}
|
||||
className="rounded-lg border border-zinc-300 dark:border-zinc-700 px-3 h-10 text-sm hover:bg-white dark:hover:bg-zinc-700"
|
||||
>
|
||||
{copied ? "Gekopieerd" : "Kopiëren"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function RondeCheckboxes({ rondes, selected = [] }: { rondes: RikxRonde[]; selected?: number[] }) {
|
||||
if (rondes.length === 0) {
|
||||
return <p className="text-sm text-zinc-500">Er zijn nog geen Rikx rondes.</p>;
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-wrap gap-x-5 gap-y-2">
|
||||
{rondes.map((r) => (
|
||||
<label key={r.id} className="flex items-center gap-2 text-sm text-zinc-800 dark:text-zinc-200">
|
||||
<input type="checkbox" name="ronde_ids" value={r.id} defaultChecked={selected.includes(r.id)} className="accent-rikx-orange" />
|
||||
{r.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function NewExpertForm({ rondes }: { rondes: RikxRonde[] }) {
|
||||
const [state, action, pending] = useActionState(createExpert, { status: "idle" } as InviteState);
|
||||
return (
|
||||
<form
|
||||
action={action}
|
||||
// Na succes leeg beginnen voor de volgende expert
|
||||
key={state.status === "sent" || state.status === "link" ? state.message : "form"}
|
||||
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-2 gap-4"
|
||||
>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className={labelClass}>Naam</span>
|
||||
<input name="name" required className={inputClass} />
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className={labelClass}>E-mailadres</span>
|
||||
<input name="email" type="email" required className={inputClass} />
|
||||
</label>
|
||||
<fieldset className="sm:col-span-2 flex flex-col gap-2">
|
||||
<legend className={`${labelClass} mb-2`}>Rikx rondes</legend>
|
||||
<RondeCheckboxes rondes={rondes} />
|
||||
<span className="text-xs text-zinc-500">De expert ziet alleen projecten in waardebepaling uit deze rondes.</span>
|
||||
</fieldset>
|
||||
<div className="sm:col-span-2 flex flex-col gap-3">
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={pending}
|
||||
className="rounded-lg bg-rikx-maroon hover:bg-rikx-maroon-light px-5 py-2 text-sm font-medium text-white transition-colors disabled:opacity-60"
|
||||
>
|
||||
{pending ? "Bezig…" : "Expert uitnodigen"}
|
||||
</button>
|
||||
</div>
|
||||
<InviteResult state={state} />
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export function ResendInviteButton({ id, label }: { id: number; label: string }) {
|
||||
const [state, action, pending] = useActionState(resendInvite, { status: "idle" } as InviteState);
|
||||
return (
|
||||
<div className="flex flex-col items-end gap-2">
|
||||
<form action={action}>
|
||||
<input type="hidden" name="id" value={id} />
|
||||
<button type="submit" disabled={pending} className="text-xs text-rikx-orange-dark hover:underline disabled:opacity-60">
|
||||
{pending ? "Bezig…" : label}
|
||||
</button>
|
||||
</form>
|
||||
{state.status !== "idle" && (
|
||||
<div className="w-80 max-w-full text-left">
|
||||
<InviteResult state={state} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DeleteExpertButton({ id, name, aantalBeoordelingen }: { id: number; name: string; aantalBeoordelingen: number }) {
|
||||
return (
|
||||
<form
|
||||
action={deleteExpert}
|
||||
onSubmit={(e) => {
|
||||
const extra =
|
||||
aantalBeoordelingen > 0
|
||||
? ` Ook ${aantalBeoordelingen === 1 ? "de beoordeling" : `de ${aantalBeoordelingen} beoordelingen`} van deze expert ${aantalBeoordelingen === 1 ? "wordt" : "worden"} verwijderd; dat verandert de Rikx calculatie van die projecten.`
|
||||
: "";
|
||||
if (!confirm(`Weet je zeker dat je expert "${name}" wilt verwijderen?${extra}`)) e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="id" value={id} />
|
||||
<button type="submit" className="text-xs text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors">
|
||||
Verwijderen
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { requireAdmin } from "../../../lib/auth";
|
||||
import { listRikxRondes } from "../../../lib/db";
|
||||
import { getExpert } from "../../../lib/experts";
|
||||
import { AppHeader } from "../../AppHeader";
|
||||
import { updateExpert } from "../actions";
|
||||
import { RondeCheckboxes } from "../InviteForms";
|
||||
|
||||
export default async function EditExpertPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
searchParams: Promise<{ error?: string }>;
|
||||
}) {
|
||||
const session = await requireAdmin();
|
||||
const { id } = await params;
|
||||
const { error } = await searchParams;
|
||||
const expert = getExpert(Number(id));
|
||||
if (!expert) notFound();
|
||||
|
||||
const errorMsg =
|
||||
error === "email" ? "Er bestaat al een gebruiker met dit e-mailadres." : error === "missing" ? "Vul een naam en een geldig e-mailadres in." : null;
|
||||
const inputClass =
|
||||
"h-10 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 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-zinc-50 dark:bg-zinc-950">
|
||||
<AppHeader email={session.email} active="crm" />
|
||||
|
||||
<main className="max-w-5xl mx-auto px-4 sm:px-6 py-10 flex flex-col gap-6">
|
||||
<Link href="/experts" className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
|
||||
← Terug naar experts
|
||||
</Link>
|
||||
<h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Expert bewerken</h1>
|
||||
{errorMsg && <p className="text-sm text-red-600 dark:text-red-400">{errorMsg}</p>}
|
||||
<form
|
||||
action={updateExpert}
|
||||
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-2 gap-4"
|
||||
>
|
||||
<input type="hidden" name="id" value={expert.id} />
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Naam</span>
|
||||
<input name="name" required defaultValue={expert.name} className={inputClass} />
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">E-mailadres</span>
|
||||
<input name="email" type="email" required defaultValue={expert.email} className={inputClass} />
|
||||
</label>
|
||||
<fieldset className="sm:col-span-2 flex flex-col gap-2">
|
||||
<legend className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Rikx rondes</legend>
|
||||
<RondeCheckboxes rondes={listRikxRondes()} selected={expert.rondeIds} />
|
||||
</fieldset>
|
||||
<div className="sm:col-span-2 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="/experts"
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
"use server";
|
||||
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { headers } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
import { createSession, requireAdmin } from "../../lib/auth";
|
||||
import { getDb } from "../../lib/db";
|
||||
import { UITNODIGING_GELDIG_DAGEN, createInvite, getExpert, setExpertRondes } from "../../lib/experts";
|
||||
import { isMailConfigured, sendMail } from "../../lib/mail";
|
||||
|
||||
export type InviteState =
|
||||
| { status: "idle" }
|
||||
| { status: "error"; message: string }
|
||||
| { status: "sent"; message: string }
|
||||
| { status: "link"; message: string; link: string };
|
||||
|
||||
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
function readRondeIds(formData: FormData): number[] {
|
||||
const bestaand = new Set(
|
||||
(getDb().prepare("SELECT id FROM rikx_rondes").all() as { id: number }[]).map((r) => r.id)
|
||||
);
|
||||
return formData
|
||||
.getAll("ronde_ids")
|
||||
.map(Number)
|
||||
.filter((id) => bestaand.has(id));
|
||||
}
|
||||
|
||||
async function baseUrl(): Promise<string> {
|
||||
const h = await headers();
|
||||
const host = h.get("x-forwarded-host") ?? h.get("host") ?? "localhost:3000";
|
||||
const proto = h.get("x-forwarded-proto") ?? (host.startsWith("localhost") ? "http" : "https");
|
||||
return `${proto}://${host}`;
|
||||
}
|
||||
|
||||
// Maakt een uitnodiging en mailt die; zonder SMTP komt de link terug om zelf door te geven.
|
||||
async function invite(userId: number, name: string, email: string): Promise<InviteState> {
|
||||
const link = `${await baseUrl()}/uitnodiging/${createInvite(userId)}`;
|
||||
if (!isMailConfigured()) {
|
||||
return {
|
||||
status: "link",
|
||||
message: `E-mail is nog niet ingesteld (SMTP). Geef deze link zelf door aan ${name}; hij is ${UITNODIGING_GELDIG_DAGEN} dagen geldig.`,
|
||||
link,
|
||||
};
|
||||
}
|
||||
try {
|
||||
await sendMail({
|
||||
to: email,
|
||||
subject: "Uitnodiging Rikx expertteam",
|
||||
text: `Beste ${name},\n\nJe bent uitgenodigd voor het Rikx expertteam. Via onderstaande link stel je je wachtwoord in en kun je de projecten in waardebepaling beoordelen.\n\n${link}\n\nDe link is ${UITNODIGING_GELDIG_DAGEN} dagen geldig.\n\nMet vriendelijke groet,\nRikx`,
|
||||
});
|
||||
return { status: "sent", message: `Uitnodiging verstuurd naar ${email}.` };
|
||||
} catch (err) {
|
||||
console.error("Uitnodiging versturen mislukt:", err);
|
||||
return {
|
||||
status: "link",
|
||||
message: `Versturen van de e-mail is mislukt. Geef deze link zelf door aan ${name}; hij is ${UITNODIGING_GELDIG_DAGEN} dagen geldig.`,
|
||||
link,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export async function createExpert(_prev: InviteState, formData: FormData): Promise<InviteState> {
|
||||
await requireAdmin();
|
||||
|
||||
const name = ((formData.get("name") as string) ?? "").trim();
|
||||
const email = ((formData.get("email") as string) ?? "").trim().toLowerCase();
|
||||
if (!name || !EMAIL_RE.test(email)) return { status: "error", message: "Vul een naam en een geldig e-mailadres in." };
|
||||
|
||||
const db = getDb();
|
||||
if (db.prepare("SELECT id FROM users WHERE lower(email) = ?").get(email)) {
|
||||
return { status: "error", message: "Er bestaat al een gebruiker met dit e-mailadres." };
|
||||
}
|
||||
// Lege password_hash: inloggen kan pas na het instellen van een wachtwoord via de uitnodiging
|
||||
const result = db
|
||||
.prepare("INSERT INTO users (email, password_hash, name, role) VALUES (?, '', ?, 'expert')")
|
||||
.run(email, name);
|
||||
const id = Number(result.lastInsertRowid);
|
||||
setExpertRondes(id, readRondeIds(formData));
|
||||
// Lijst bovenaan de pagina bijwerken (het formulier blijft staan om de link te tonen)
|
||||
revalidatePath("/experts");
|
||||
|
||||
return invite(id, name, email);
|
||||
}
|
||||
|
||||
export async function resendInvite(_prev: InviteState, formData: FormData): Promise<InviteState> {
|
||||
await requireAdmin();
|
||||
const expert = getExpert(Number(formData.get("id")));
|
||||
if (!expert) return { status: "error", message: "Expert niet gevonden." };
|
||||
return invite(expert.id, expert.name, expert.email);
|
||||
}
|
||||
|
||||
export async function updateExpert(formData: FormData) {
|
||||
await requireAdmin();
|
||||
|
||||
const id = Number(formData.get("id"));
|
||||
const expert = getExpert(id);
|
||||
if (!expert) redirect("/experts");
|
||||
|
||||
const name = ((formData.get("name") as string) ?? "").trim();
|
||||
const email = ((formData.get("email") as string) ?? "").trim().toLowerCase();
|
||||
if (!name || !EMAIL_RE.test(email)) redirect(`/experts/${id}?error=missing`);
|
||||
|
||||
const db = getDb();
|
||||
if (db.prepare("SELECT id FROM users WHERE lower(email) = ? AND id != ?").get(email, id)) {
|
||||
redirect(`/experts/${id}?error=email`);
|
||||
}
|
||||
db.prepare("UPDATE users SET name = ?, email = ? WHERE id = ? AND role = 'expert'").run(name, email, id);
|
||||
setExpertRondes(id, readRondeIds(formData));
|
||||
|
||||
redirect("/experts");
|
||||
}
|
||||
|
||||
export async function deleteExpert(formData: FormData) {
|
||||
await requireAdmin();
|
||||
const id = Number(formData.get("id"));
|
||||
// Beoordelingen, rondes en uitnodigingen van de expert verdwijnen mee (ON DELETE CASCADE)
|
||||
if (id) getDb().prepare("DELETE FROM users WHERE id = ? AND role = 'expert'").run(id);
|
||||
redirect("/experts");
|
||||
}
|
||||
|
||||
// "Inloggen als": de admin bekijkt de expertpagina zoals deze expert hem ziet (alleen lezen).
|
||||
// Terug via "Terug naar beheer" op de expertpagina (app/expert/actions.ts).
|
||||
export async function impersonateExpert(formData: FormData) {
|
||||
const admin = await requireAdmin();
|
||||
const expert = getExpert(Number(formData.get("id")));
|
||||
if (!expert) redirect("/experts");
|
||||
await createSession({ userId: expert.id, email: expert.email, name: expert.name, impersonatorId: admin.id });
|
||||
redirect("/expert");
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import Link from "next/link";
|
||||
import { requireAdmin } from "../../lib/auth";
|
||||
import { listRikxRondes } from "../../lib/db";
|
||||
import { listExperts } from "../../lib/experts";
|
||||
import { AppHeader } from "../AppHeader";
|
||||
import { impersonateExpert } from "./actions";
|
||||
import { DeleteExpertButton, NewExpertForm, ResendInviteButton } from "./InviteForms";
|
||||
|
||||
export default async function ExpertsPage() {
|
||||
const session = await requireAdmin();
|
||||
const experts = listExperts();
|
||||
const rondes = listRikxRondes();
|
||||
const rondeLabel = new Map(rondes.map((r) => [r.id, r.label]));
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
|
||||
<AppHeader email={session.email} active="crm" />
|
||||
|
||||
<main className="max-w-5xl mx-auto px-4 sm:px-6 py-10 flex flex-col gap-10">
|
||||
<section>
|
||||
<h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-1">Experts ({experts.length})</h1>
|
||||
<p className="text-sm text-zinc-500 mb-4">
|
||||
Experts loggen in op hun eigen pagina en beoordelen daar de projecten in waardebepaling van hun rondes.
|
||||
</p>
|
||||
{experts.length === 0 ? (
|
||||
<p className="text-sm text-zinc-500">Nog geen experts uitgenodigd.</p>
|
||||
) : (
|
||||
<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">Naam</th>
|
||||
<th className="text-left px-4 py-3 font-medium">E-mailadres</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Rikx rondes</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Status</th>
|
||||
<th className="text-right px-4 py-3 font-medium">Beoordelingen</th>
|
||||
<th className="px-4 py-3" colSpan={4}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||
{experts.map((e) => (
|
||||
<tr key={e.id} className="bg-white dark:bg-zinc-950 align-top">
|
||||
<td className="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{e.name}</td>
|
||||
<td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{e.email}</td>
|
||||
<td className="px-4 py-3 text-zinc-700 dark:text-zinc-300">
|
||||
{e.rondeIds.length ? e.rondeIds.map((id) => rondeLabel.get(id)).join(", ") : "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${
|
||||
e.actief ? "bg-green-100 text-green-800" : "bg-zinc-100 text-zinc-600"
|
||||
}`}
|
||||
>
|
||||
{e.actief ? "Actief" : "Uitgenodigd"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right tabular-nums">{e.aantalBeoordelingen}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
{/* Opnieuw uitnodigen is ook de manier om een vergeten wachtwoord opnieuw in te stellen */}
|
||||
<ResendInviteButton id={e.id} label={e.actief ? "Nieuwe inloglink" : "Opnieuw uitnodigen"} />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
{/* Bekijk de expertpagina zoals deze expert hem ziet (alleen lezen) */}
|
||||
<form action={impersonateExpert}>
|
||||
<input type="hidden" name="id" value={e.id} />
|
||||
<button type="submit" className="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 whitespace-nowrap">
|
||||
Inloggen als ↗
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<Link href={`/experts/${e.id}`} className="text-xs text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100">
|
||||
Bewerken
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<DeleteExpertButton id={e.id} name={e.name} aantalBeoordelingen={e.aantalBeoordelingen} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Nieuwe expert uitnodigen</h2>
|
||||
<NewExpertForm rondes={rondes} />
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user