fix:manage edit for extra bezoekers payments

apps/web/src/routes/manage.$token.tsx

@@ -82,6 +82,29 @@ function PendingBadge() {
 	);
 }
 
+function ExtraPaymentBadge({ amountCents }: { amountCents: number }) {
+	const euros = amountCents / 100;
+	return (
+		<div className="inline-flex items-center gap-2 rounded-full border border-orange-400/40 bg-orange-400/10 px-4 py-1.5 font-semibold text-orange-400 text-sm">
+			<svg
+				className="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				strokeWidth={2}
+				aria-label="Extra betaling vereist"
+			>
+				<path
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+				/>
+			</svg>
+			Extra betaling vereist — €{euros.toFixed(euros % 1 === 0 ? 0 : 2)}
+		</div>
+	);
+}
+
 // ---------------------------------------------------------------------------
 // Edit form (inline on the manage page)
 // ---------------------------------------------------------------------------
@@ -139,7 +162,9 @@ function EditForm({ token, initialData, onCancel, onSaved }: EditFormProps) {
 	const isWatcher = formData.registrationType === "watcher";
 	const totalDrinkCard = isWatcher ? calculateDrinkCard(formGuests.length) : 0;
 	const originalGuestCount = parseGuests(initialData.guests).length;
-	const isPaid = initialData.paymentStatus === "paid";
+	const isPaid =
+		initialData.paymentStatus === "paid" ||
+		initialData.paymentStatus === "extra_payment_pending";
 	const extraGuests = formGuests.length - originalGuestCount;
 
 	function handleSubmit(e: React.FormEvent) {
@@ -546,7 +571,13 @@ function ManageRegistrationPage() {
 			{/* Payment status */}
 			{!isPerformer && (
 				<div className="mb-6">
-					{data.paymentStatus === "paid" ? <PaidBadge /> : <PendingBadge />}
+					{data.paymentStatus === "paid" ? (
+						<PaidBadge />
+					) : data.paymentStatus === "extra_payment_pending" ? (
+						<ExtraPaymentBadge amountCents={data.paymentAmount ?? 0} />
+					) : (
+						<PendingBadge />
+					)}
 				</div>
 			)}
 
@@ -625,16 +656,22 @@ function ManageRegistrationPage() {
 
 			{/* Actions */}
 			<div className="mt-8 flex flex-wrap items-center gap-4">
-				{!isPerformer && data.paymentStatus !== "paid" && (
-					<button
-						type="button"
-						onClick={() => checkoutMutation.mutate({ token })}
-						disabled={checkoutMutation.isPending}
-						className="bg-teal-400 px-8 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-teal-300 disabled:opacity-50"
-					>
-						{checkoutMutation.isPending ? "Laden..." : "Nu betalen"}
-					</button>
-				)}
+				{!isPerformer &&
+					(data.paymentStatus === "pending" ||
+						data.paymentStatus === "extra_payment_pending") && (
+						<button
+							type="button"
+							onClick={() => checkoutMutation.mutate({ token })}
+							disabled={checkoutMutation.isPending}
+							className={`px-8 py-3 font-['Intro',sans-serif] text-lg transition-all hover:scale-105 disabled:opacity-50 ${data.paymentStatus === "extra_payment_pending" ? "bg-orange-400 text-white hover:bg-orange-300" : "bg-teal-400 text-[#214e51] hover:bg-teal-300"}`}
+						>
+							{checkoutMutation.isPending
+								? "Laden..."
+								: data.paymentStatus === "extra_payment_pending"
+									? `Extra betalen (€${((data.paymentAmount ?? 0) / 100).toFixed(0)})`
+									: "Nu betalen"}
+						</button>
+					)}
 				<button
 					type="button"
 					onClick={() => setIsEditing(true)}