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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user