feat(registration): add birthdate & postcode

apps/web/src/components/registration/GuestList.tsx

@@ -245,6 +245,169 @@ export function GuestList({
 									</span>
 								)}
 							</div>
+
+							{/* Birthdate */}
+							<div className="flex flex-col gap-2 md:col-span-2">
+								<p className="text-white/80">
+									Geboortedatum <span className="text-red-300">*</span>
+								</p>
+								<fieldset className="m-0 flex gap-2 border-0 p-0">
+									<legend className="sr-only">
+										Geboortedatum medebezoeker {idx + 1}
+									</legend>
+									<div className="flex flex-1 flex-col gap-1">
+										<label
+											htmlFor={`guest-${idx}-birthdateDay`}
+											className="sr-only"
+										>
+											Dag
+										</label>
+										<select
+											id={`guest-${idx}-birthdateDay`}
+											value={guest.birthdate?.split("-")[2] ?? ""}
+											onChange={(e) => {
+												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"}`}
+										>
+											<option value="" className="bg-[#214e51]">
+												DD
+											</option>
+											{Array.from({ length: 31 }, (_, i) => i + 1).map((d) => (
+												<option
+													key={d}
+													value={String(d).padStart(2, "0")}
+													className="bg-[#214e51]"
+												>
+													{String(d).padStart(2, "0")}
+												</option>
+											))}
+										</select>
+									</div>
+									<div className="flex flex-1 flex-col gap-1">
+										<label
+											htmlFor={`guest-${idx}-birthdateMonth`}
+											className="sr-only"
+										>
+											Maand
+										</label>
+										<select
+											id={`guest-${idx}-birthdateMonth`}
+											value={guest.birthdate?.split("-")[1] ?? ""}
+											onChange={(e) => {
+												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"}`}
+										>
+											<option value="" className="bg-[#214e51]">
+												MM
+											</option>
+											{[
+												"Jan",
+												"Feb",
+												"Mrt",
+												"Apr",
+												"Mei",
+												"Jun",
+												"Jul",
+												"Aug",
+												"Sep",
+												"Okt",
+												"Nov",
+												"Dec",
+											].map((m, i) => (
+												<option
+													key={m}
+													value={String(i + 1).padStart(2, "0")}
+													className="bg-[#214e51]"
+												>
+													{m}
+												</option>
+											))}
+										</select>
+									</div>
+									<div className="flex flex-1 flex-col gap-1">
+										<label
+											htmlFor={`guest-${idx}-birthdateYear`}
+											className="sr-only"
+										>
+											Jaar
+										</label>
+										<select
+											id={`guest-${idx}-birthdateYear`}
+											value={guest.birthdate?.split("-")[0] ?? ""}
+											onChange={(e) => {
+												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"}`}
+										>
+											<option value="" className="bg-[#214e51]">
+												JJJJ
+											</option>
+											{Array.from(
+												{ length: 100 },
+												(_, i) => new Date().getFullYear() - i,
+											).map((y) => (
+												<option
+													key={y}
+													value={String(y)}
+													className="bg-[#214e51]"
+												>
+													{y}
+												</option>
+											))}
+										</select>
+									</div>
+								</fieldset>
+								{errors[idx]?.birthdate && (
+									<span className="text-red-300 text-sm" role="alert">
+										{errors[idx].birthdate}
+									</span>
+								)}
+							</div>
+
+							{/* Postcode */}
+							<div className="flex flex-col gap-2">
+								<label
+									htmlFor={`guest-${idx}-postcode`}
+									className="text-white/80"
+								>
+									Postcode <span className="text-red-300">*</span>
+								</label>
+								<input
+									type="text"
+									id={`guest-${idx}-postcode`}
+									value={guest.postcode}
+									onChange={(e) => onChange(idx, "postcode", e.target.value)}
+									placeholder="bv. 9000"
+									autoComplete="off"
+									inputMode="numeric"
+									className={inputCls(!!errors[idx]?.postcode)}
+								/>
+								{errors[idx]?.postcode && (
+									<span className="text-red-300 text-sm" role="alert">
+										{errors[idx].postcode}
+									</span>
+								)}
+							</div>
 						</div>
 					</div>
 				))}