M54: harden operations and demo resilience

frontend/src/pages/BookingCreate.tsx

@@ -6,7 +6,7 @@ import { describeApiError, type ApiErrorInfo } from "../api/errorMessages";
 import type { AvailableVehicle, Booking, CustomerOption } from "../api/types";
 import { ApiErrorNotice, PageHeader } from "../components/PageChrome";
 import { Icon } from "../components/Icons";
-import { brusselsDateTimeFromNow, brusselsLocalToIso } from "../i18n/brusselsDateTime";
+import { brusselsDateTimeFromNow, tryBrusselsLocalToIso } from "../i18n/brusselsDateTime";
 
 export function BookingCreate() {
   const { t } = useTranslation(["bookings", "errors"]);
@@ -18,16 +18,18 @@ export function BookingCreate() {
   const [endsAt, setEndsAt] = useState(() => brusselsDateTimeFromNow(26));
   const [vehicles, setVehicles] = useState<AvailableVehicle[]>([]);
   const [vehicleRef, setVehicleRef] = useState("");
-  const [requirementsComplete, setRequirementsComplete] = useState(false);
   const [vehicleQuery, setVehicleQuery] = useState("");
   const [loadingVehicles, setLoadingVehicles] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<ApiErrorInfo | null>(null);
 
-  const windowValid = useMemo(
-    () => Boolean(startsAt && endsAt && brusselsLocalToIso(endsAt) > brusselsLocalToIso(startsAt)),
-    [endsAt, startsAt],
+  const startsAtIso = useMemo(() => startsAt ? tryBrusselsLocalToIso(startsAt) : null, [startsAt]);
+  const endsAtIso = useMemo(() => endsAt ? tryBrusselsLocalToIso(endsAt) : null, [endsAt]);
+  const windowValid = Boolean(startsAtIso && endsAtIso && endsAtIso > startsAtIso);
+  const localTimeInvalid = Boolean(
+    (startsAt && !startsAtIso) || (endsAt && !endsAtIso),
   );
+  const windowOrderInvalid = Boolean(startsAtIso && endsAtIso && endsAtIso <= startsAtIso);
 
   useEffect(() => {
     if (customerQuery.trim().length < 2) {
@@ -61,8 +63,8 @@ export function BookingCreate() {
     const timeout = window.setTimeout(() => {
       setLoadingVehicles(true);
       const params = new URLSearchParams({
-        starts_at: brusselsLocalToIso(startsAt),
-        ends_at: brusselsLocalToIso(endsAt),
+        starts_at: startsAtIso as string,
+        ends_at: endsAtIso as string,
       });
       if (vehicleQuery.trim()) params.set("query", vehicleQuery.trim());
       params.set("limit", "50");
@@ -82,19 +84,19 @@ export function BookingCreate() {
       window.clearTimeout(timeout);
       controller.abort();
     };
-  }, [endsAt, startsAt, t, vehicleQuery, windowValid]);
+  }, [endsAtIso, startsAtIso, t, vehicleQuery, windowValid]);
 
   async function submit(event: FormEvent) {
     event.preventDefault();
+    if (!startsAtIso || !endsAtIso || endsAtIso <= startsAtIso) return;
     setError(null);
     setSubmitting(true);
     try {
       const booking = await api.post<Booking>("/api/v1/bookings", {
         customer_ref: customerRef,
         vehicle_ref: vehicleRef,
-        starts_at: brusselsLocalToIso(startsAt),
-        ends_at: brusselsLocalToIso(endsAt),
-        requirements_complete: requirementsComplete,
+        starts_at: startsAtIso,
+        ends_at: endsAtIso,
       });
       navigate(`/bookings/${booking.public_ref}`);
     } catch (err) {
@@ -111,14 +113,15 @@ export function BookingCreate() {
       <ApiErrorNotice error={error} />
       <form className="record-surface booking-create-form" onSubmit={submit}>
         <div className="form-grid">
-          <label>{t("create.startsAt")}<input type="datetime-local" required value={startsAt} onChange={(event) => setStartsAt(event.target.value)} /></label>
-          <label>{t("create.endsAt")}<input type="datetime-local" required min={startsAt} value={endsAt} onChange={(event) => setEndsAt(event.target.value)} /></label>
+          <label>{t("create.startsAt")}<input type="datetime-local" required aria-invalid={Boolean(startsAt && !startsAtIso)} value={startsAt} onChange={(event) => setStartsAt(event.target.value)} /></label>
+          <label>{t("create.endsAt")}<input type="datetime-local" required aria-invalid={Boolean((endsAt && !endsAtIso) || windowOrderInvalid)} min={startsAt} value={endsAt} onChange={(event) => setEndsAt(event.target.value)} /></label>
           <label>{t("create.customerSearch")}<input type="search" value={customerQuery} onChange={(event) => setCustomerQuery(event.target.value)} placeholder={t("create.customerPlaceholder")} /></label>
           <label>{t("create.customer")}<select required value={customerRef} onChange={(event) => setCustomerRef(event.target.value)} disabled={customers.length === 0}><option value="">{t(customers.length ? "create.chooseCustomer" : "create.searchFirst")}</option>{customers.map((customer) => <option key={customer.public_ref} value={customer.public_ref}>{customer.display_name} · {customer.public_ref}{customer.email ? ` · ${customer.email}` : ""}</option>)}</select></label>
           <label>{t("create.vehicleSearch")}<input type="search" value={vehicleQuery} onChange={(event) => setVehicleQuery(event.target.value)} placeholder={t("create.vehiclePlaceholder")} /></label>
           <label>{t("create.vehicle")}<select required value={vehicleRef} onChange={(event) => setVehicleRef(event.target.value)} disabled={!windowValid || loadingVehicles}><option value="">{t(loadingVehicles ? "create.loadingVehicles" : vehicles.length ? "create.chooseVehicle" : "create.noVehicles")}</option>{vehicles.map((vehicle) => <option key={vehicle.public_ref} value={vehicle.public_ref}>{vehicle.public_ref} · {vehicle.make} {vehicle.model} · {vehicle.location || t("create.locationUnknown")}</option>)}</select></label>
         </div>
-        <label className="check-card"><input type="checkbox" checked={requirementsComplete} onChange={(event) => setRequirementsComplete(event.target.checked)} /> <span>{t("create.requirementsComplete")}</span></label>
+        {localTimeInvalid && <p className="error" role="alert">{t("create.invalidLocalTime")}</p>}
+        {!localTimeInvalid && windowOrderInvalid && <p className="error" role="alert">{t("create.endAfterStart")}</p>}
         <div className="form-actions"><Link className="button button-secondary" to="/bookings">{t("create.cancel")}</Link><button className="button button-primary" type="submit" disabled={submitting || !windowValid || !customerRef || !vehicleRef}>{submitting ? t("create.saving") : t("create.save")}</button></div>
       </form>
     </div>