diff --git a/apps/web/src/components/registration/GuestList.tsx b/apps/web/src/components/registration/GuestList.tsx
index 1dd0a32..d7af695 100644
--- a/apps/web/src/components/registration/GuestList.tsx
+++ b/apps/web/src/components/registration/GuestList.tsx
@@ -245,6 +245,169 @@ export function GuestList({
)}
+
+ {/* Birthdate */}
+
+
+ Geboortedatum *
+
+
+
+ Geboortedatum medebezoeker {idx + 1}
+
+
+
+ Dag
+
+ {
+ const parts = (guest.birthdate || "--").split("-");
+ onChange(
+ idx,
+ "birthdate",
+ `${parts[0] || ""}-${parts[1] || ""}-${e.target.value.padStart(2, "0")}`,
+ );
+ }}
+ aria-label="Dag"
+ className={`border-b bg-transparent pb-2 text-sm text-white transition-colors focus:outline-none ${errors[idx]?.birthdate ? "border-red-400" : "border-white/30 focus:border-white"}`}
+ >
+
+ DD
+
+ {Array.from({ length: 31 }, (_, i) => i + 1).map((d) => (
+
+ {String(d).padStart(2, "0")}
+
+ ))}
+
+
+
+
+ Maand
+
+ {
+ const parts = (guest.birthdate || "--").split("-");
+ onChange(
+ idx,
+ "birthdate",
+ `${parts[0] || ""}-${e.target.value.padStart(2, "0")}-${parts[2] || ""}`,
+ );
+ }}
+ aria-label="Maand"
+ className={`border-b bg-transparent pb-2 text-sm text-white transition-colors focus:outline-none ${errors[idx]?.birthdate ? "border-red-400" : "border-white/30 focus:border-white"}`}
+ >
+
+ MM
+
+ {[
+ "Jan",
+ "Feb",
+ "Mrt",
+ "Apr",
+ "Mei",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Okt",
+ "Nov",
+ "Dec",
+ ].map((m, i) => (
+
+ {m}
+
+ ))}
+
+
+
+
+ Jaar
+
+ {
+ const parts = (guest.birthdate || "--").split("-");
+ onChange(
+ idx,
+ "birthdate",
+ `${e.target.value}-${parts[1] || ""}-${parts[2] || ""}`,
+ );
+ }}
+ aria-label="Jaar"
+ className={`border-b bg-transparent pb-2 text-sm text-white transition-colors focus:outline-none ${errors[idx]?.birthdate ? "border-red-400" : "border-white/30 focus:border-white"}`}
+ >
+
+ JJJJ
+
+ {Array.from(
+ { length: 100 },
+ (_, i) => new Date().getFullYear() - i,
+ ).map((y) => (
+
+ {y}
+
+ ))}
+
+
+
+ {errors[idx]?.birthdate && (
+
+ {errors[idx].birthdate}
+
+ )}
+
+
+ {/* Postcode */}
+
diff --git a/apps/web/src/components/registration/WatcherForm.tsx b/apps/web/src/components/registration/WatcherForm.tsx
index 67d757e..854346e 100644
--- a/apps/web/src/components/registration/WatcherForm.tsx
+++ b/apps/web/src/components/registration/WatcherForm.tsx
@@ -7,9 +7,11 @@ import {
type GuestEntry,
type GuestErrors,
inputCls,
+ validateBirthdate,
validateEmail,
validateGuests,
validatePhone,
+ validatePostcode,
validateTextField,
} from "@/lib/registration";
import { orpc } from "@/utils/orpc";
@@ -21,6 +23,8 @@ interface WatcherErrors {
lastName?: string;
email?: string;
phone?: string;
+ birthdate?: string;
+ postcode?: string;
}
interface Props {
@@ -39,6 +43,10 @@ export function WatcherForm({ onBack, onSuccess }: Props) {
lastName: "",
email: "",
phone: "",
+ birthdateDay: "",
+ birthdateMonth: "",
+ birthdateYear: "",
+ postcode: "",
extraQuestions: "",
});
const [errors, setErrors] = useState({});
@@ -69,12 +77,21 @@ export function WatcherForm({ onBack, onSuccess }: Props) {
},
});
+ function getBirthdate(): string {
+ const { birthdateYear, birthdateMonth, birthdateDay } = data;
+ if (!birthdateYear || !birthdateMonth || !birthdateDay) return "";
+ return `${birthdateYear}-${birthdateMonth.padStart(2, "0")}-${birthdateDay.padStart(2, "0")}`;
+ }
+
function validate(): boolean {
+ const birthdate = getBirthdate();
const fieldErrs: WatcherErrors = {
firstName: validateTextField(data.firstName, true, "Voornaam"),
lastName: validateTextField(data.lastName, true, "Achternaam"),
email: validateEmail(data.email),
phone: validatePhone(data.phone),
+ birthdate: validateBirthdate(birthdate),
+ postcode: validatePostcode(data.postcode),
};
setErrors(fieldErrs);
setTouched({
@@ -82,6 +99,8 @@ export function WatcherForm({ onBack, onSuccess }: Props) {
lastName: true,
email: true,
phone: true,
+ birthdate: true,
+ postcode: true,
});
const { errors: gErrs, valid: gValid } = validateGuests(guests);
setGuestErrors(gErrs);
@@ -134,7 +153,14 @@ export function WatcherForm({ onBack, onSuccess }: Props) {
if (guests.length >= 9) return;
setGuests((prev) => [
...prev,
- { firstName: "", lastName: "", email: "", phone: "" },
+ {
+ firstName: "",
+ lastName: "",
+ email: "",
+ phone: "",
+ birthdate: "",
+ postcode: "",
+ },
]);
setGuestErrors((prev) => [...prev, {}]);
}
@@ -155,12 +181,16 @@ export function WatcherForm({ onBack, onSuccess }: Props) {
lastName: data.lastName.trim(),
email: data.email.trim(),
phone: data.phone.trim() || undefined,
+ birthdate: getBirthdate(),
+ postcode: data.postcode.trim(),
registrationType: "watcher",
guests: guests.map((g) => ({
firstName: g.firstName.trim(),
lastName: g.lastName.trim(),
email: g.email.trim() || undefined,
phone: g.phone.trim() || undefined,
+ birthdate: g.birthdate.trim(),
+ postcode: g.postcode.trim(),
})),
extraQuestions: data.extraQuestions.trim() || undefined,
giftAmount,
@@ -341,6 +371,146 @@ export function WatcherForm({ onBack, onSuccess }: Props) {
+ {/* Birthdate + Postcode row */}
+