M11: implement operational booking lifecycle

frontend/src/pages/BookingDetail.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { FormEvent, useCallback, useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { api } from "../api/client";
@@ -10,9 +10,11 @@ import { ReturnForm, ReturnResultPanel } from "../components/ReturnForm";
 import { Icon } from "../components/Icons";
 import { ErrorState, LoadingState, PageHeader } from "../components/PageChrome";
 import { PRODUCT_NAME } from "../product";
+import { describeApiError, type ApiErrorInfo } from "../api/errorMessages";
+import { ApiErrorNotice } from "../components/PageChrome";
 
 export function BookingDetail() {
-  const { t } = useTranslation(["bookings", "returns"]);
+  const { t } = useTranslation(["bookings", "returns", "errors"]);
   const { formatDateTime, formatNumber } = useLocaleFormat();
   const { publicRef } = useParams<{ publicRef: string }>();
   const { manifest } = useDemoManifest();
@@ -20,6 +22,9 @@ export function BookingDetail() {
   const [error, setError] = useState<string | null>(null);
   const [returnResult, setReturnResult] = useState<RegisterReturnResult | null>(null);
   const [canonicalOdometerKm, setCanonicalOdometerKm] = useState<number | null>(null);
+  const [cancelReason, setCancelReason] = useState("");
+  const [cancelling, setCancelling] = useState(false);
+  const [actionError, setActionError] = useState<ApiErrorInfo | null>(null);
 
   const load = useCallback(() => {
     if (!publicRef) return;
@@ -56,6 +61,22 @@ export function BookingDetail() {
     load();
   }
 
+  async function cancelBooking(event: FormEvent) {
+    event.preventDefault();
+    if (!publicRef) return;
+    setCancelling(true);
+    setActionError(null);
+    try {
+      const updated = await api.post<Booking>(`/api/v1/bookings/${publicRef}/cancel`, { reason: cancelReason });
+      setBooking(updated);
+      setCancelReason("");
+    } catch (err) {
+      setActionError(describeApiError(t, err, "bookings:detail.cancelFailed"));
+    } finally {
+      setCancelling(false);
+    }
+  }
+
   if (error) return <ErrorState message={error} />;
   if (!booking) return <LoadingState label={t("detail.loading")} />;
 
@@ -73,6 +94,13 @@ export function BookingDetail() {
         <div><dt>{t("detail.requirementsComplete")}</dt><dd>{booking.requirements_complete ? t("detail.yes") : t("detail.no")}</dd></div>
       </dl></section>
 
+      {booking.status === "reserved" && <form className="record-surface booking-cancel-form" onSubmit={cancelBooking}>
+        <h2>{t("detail.cancelAction")}</h2>
+        <ApiErrorNotice error={actionError} />
+        <label>{t("detail.cancelReason")}<textarea required minLength={3} maxLength={500} value={cancelReason} onChange={(event) => setCancelReason(event.target.value)} placeholder={t("detail.cancelReasonPlaceholder")} /></label>
+        <div className="form-actions"><button className="button button-danger" type="submit" disabled={cancelling || cancelReason.trim().length < 3}>{cancelling ? t("detail.cancelling") : t("detail.confirmCancel")}</button></div>
+      </form>}
+
       {isReturnAnomalyScenario && !returnResult && canonicalOdometerKm !== null && (
         <section className="record-surface scenario-callout" aria-label={t("returns:scenario.ariaLabel")}>
           <Icon name="spark" />