L8 Notdienst: mobile Erfassung /m/emergency in drei Schritten

Kunde suchen oder vorläufig anlegen, Einsatzort mit Ansprechpartner,
Grund mit optionaler Sprachnotiz, Beginn und Team; Start über die Sync-Op.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/app/(field)/m/emergency/page.tsx

@@ -1,5 +1,25 @@
-import { ModulePlaceholder } from "@/components/module-placeholder";
+import { getTranslations } from "next-intl/server";
+import { moduleGuard } from "@/server/action-guard";
+import { can, ctxFromGuard } from "@/server/services/context";
+import { emergencyTeamOptions } from "@/server/services/emergency/lookup";
+import { EmergencyWizard } from "@/components/emergency/emergency-wizard";
 
-export default function Page() {
-  return <ModulePlaceholder moduleKey="emergency" />;
+/** `/m/emergency` — Notdienst erfassen (spec §19.2, US-010): max. 3 steps, then straight into the call-out. */
+export default async function EmergencyPage() {
+  const ctx = ctxFromGuard(await moduleGuard("emergency")());
+  const t = await getTranslations("emergency.capture");
+  if (!can(ctx, "emergency:create") || !can(ctx, "field:execute")) {
+    return <p className="p-4 text-[15px]">{t("noAccess")}</p>;
+  }
+  const teams = await emergencyTeamOptions(ctx);
+
+  return (
+    <main className="space-y-4 p-4">
+      <div>
+        <h1 className="text-[26px]">{t("title")}</h1>
+        <p className="text-[15px] text-muted-foreground">{t("sub")}</p>
+      </div>
+      <EmergencyWizard teams={teams} userId={ctx.userId} />
+    </main>
+  );
 }

src/components/emergency/emergency-wizard.tsx

@@ -0,0 +1,618 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Building2, Check, ChevronLeft, ChevronRight, LoaderCircle, MapPin, Mic, Search, Siren, Square, TriangleAlert, UserPlus, Users } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { errorKey, isSuccess, newClientId, submitOp } from "@/lib/field/client-ops";
+import { uploadFieldFile } from "@/lib/field/upload";
+import type { EmergencyCreateInput } from "@/lib/emergency/schemas";
+import { btnPrimary, btnSecondary, card, chip, inputClass, noticeError, noticeWarn } from "@/components/field/ui";
+import { listEmergencySitesAction, searchEmergencyCustomersAction } from "@/server/actions/emergency/capture";
+import type { EmergencyCustomerHit, EmergencySiteHit, EmergencyTeamOption } from "@/server/services/emergency/lookup";
+
+type Step = 1 | 2 | 3;
+type NewCustomer = { companyName: string; firstName: string; lastName: string; phone: string; email: string; street: string; houseNumber: string; postalCode: string; city: string };
+type Address = { name: string; street: string; houseNumber: string; postalCode: string; city: string };
+
+const EMPTY_CUSTOMER: NewCustomer = { companyName: "", firstName: "", lastName: "", phone: "", email: "", street: "", houseNumber: "", postalCode: "", city: "" };
+const EMPTY_ADDRESS: Address = { name: "", street: "", houseNumber: "", postalCode: "", city: "" };
+const MAX_VOICE_SECONDS = 300;
+
+function localNow(): string {
+  const d = new Date();
+  d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
+  return d.toISOString().slice(0, 16);
+}
+
+function TextField({
+  id,
+  label,
+  value,
+  onChange,
+  type = "text",
+  required,
+  autoComplete,
+  inputMode,
+  className,
+  invalid,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  type?: string;
+  required?: boolean;
+  autoComplete?: string;
+  inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+  className?: string;
+  invalid?: boolean;
+}) {
+  return (
+    <div className={className}>
+      <label htmlFor={id} className="mb-1 block text-[14px] font-semibold">
+        {label}
+        {required && <span aria-hidden> *</span>}
+      </label>
+      <input
+        id={id}
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        required={required}
+        autoComplete={autoComplete}
+        inputMode={inputMode}
+        aria-invalid={invalid || undefined}
+        className={cn(inputClass, invalid && "border-[var(--risk)]")}
+      />
+    </div>
+  );
+}
+
+export function EmergencyWizard({ teams, userId }: { teams: EmergencyTeamOption[]; userId: string }) {
+  const t = useTranslations("emergency.capture");
+  const router = useRouter();
+  const [step, setStep] = useState<Step>(1);
+  const [showErrors, setShowErrors] = useState(false);
+
+  // step 1 — customer
+  const [customerMode, setCustomerMode] = useState<"existing" | "new">("existing");
+  const [query, setQuery] = useState("");
+  const [hits, setHits] = useState<EmergencyCustomerHit[]>([]);
+  const [searching, startSearch] = useTransition();
+  const [searchFailed, setSearchFailed] = useState(false);
+  const [selected, setSelected] = useState<EmergencyCustomerHit | null>(null);
+  const [newCustomer, setNewCustomer] = useState<NewCustomer>(EMPTY_CUSTOMER);
+
+  // step 2 — site
+  const [sites, setSites] = useState<EmergencySiteHit[] | null>(null);
+  const [siteMode, setSiteMode] = useState<"existing" | "new">("new");
+  const [siteId, setSiteId] = useState<string>("");
+  const [address, setAddress] = useState<Address>(EMPTY_ADDRESS);
+  const [contact, setContact] = useState({ name: "", phone: "" });
+
+  // step 3 — reason / start / team
+  const [reason, setReason] = useState("");
+  const [startedAt, setStartedAt] = useState("");
+  const [teamId, setTeamId] = useState<string>(teams[0]?.id ?? "");
+  const [colleagues, setColleagues] = useState<string[]>([]);
+
+  // voice note (kept locally, uploaded after the call-out exists)
+  const [recState, setRecState] = useState<"idle" | "recording" | "recorded">("idle");
+  const [recSeconds, setRecSeconds] = useState(0);
+  const [clip, setClip] = useState<{ blob: Blob; url: string } | null>(null);
+  const recorder = useRef<MediaRecorder | null>(null);
+  const timer = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // submit
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // stable client ids → a retry after a network error is idempotent (same session client id)
+  const clientIds = useRef({ workOrder: newClientId(), session: newClientId(), customer: newClientId(), site: newClientId() });
+
+  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const selectionSeq = useRef(0);
+
+  useEffect(
+    () => () => {
+      if (timer.current) clearInterval(timer.current);
+      if (searchTimer.current) clearTimeout(searchTimer.current);
+      recorder.current?.stream.getTracks().forEach((tr) => tr.stop());
+    },
+    [],
+  );
+  useEffect(() => () => (clip ? URL.revokeObjectURL(clip.url) : undefined), [clip]);
+
+  /** Debounced customer search (event-driven, no state updates inside effects). */
+  function onQueryChange(value: string) {
+    setQuery(value);
+    if (searchTimer.current) clearTimeout(searchTimer.current);
+    const q = value.trim();
+    if (q.length < 2) {
+      setHits([]);
+      setSearchFailed(false);
+      return;
+    }
+    searchTimer.current = setTimeout(() => {
+      startSearch(async () => {
+        const res = await searchEmergencyCustomersAction(q);
+        setSearchFailed(!res.ok);
+        setHits(res.ok ? res.items : []);
+      });
+    }, 300);
+  }
+
+  function resetSites() {
+    selectionSeq.current++;
+    setSites(null);
+    setSiteMode("new");
+    setSiteId("");
+  }
+
+  /** Select a customer and load its sites for step 2. */
+  function selectCustomer(hit: EmergencyCustomerHit | null) {
+    setSelected(hit);
+    resetSites();
+    if (!hit) return;
+    const seq = selectionSeq.current;
+    listEmergencySitesAction(hit.id).then((res) => {
+      if (seq !== selectionSeq.current) return;
+      const items = res.ok ? res.items : [];
+      setSites(items);
+      if (items.length) {
+        setSiteMode("existing");
+        setSiteId(items[0].id);
+      }
+    });
+  }
+
+  function switchCustomerMode(mode: "existing" | "new") {
+    setCustomerMode(mode);
+    selectCustomer(null);
+  }
+
+  const team = useMemo(() => teams.find((x) => x.id === teamId) ?? null, [teams, teamId]);
+
+  const step1Valid =
+    customerMode === "existing" ? !!selected : !!(newCustomer.companyName.trim() || newCustomer.lastName.trim()) && !!newCustomer.phone.trim();
+  const step2Valid =
+    (siteMode === "existing" ? !!siteId : !!address.street.trim() && !!address.city.trim()) && !!contact.name.trim() && !!contact.phone.trim();
+  const step3Valid = !!reason.trim() && !!startedAt;
+
+  function go(next: Step) {
+    const valid = step === 1 ? step1Valid : step === 2 ? step2Valid : step3Valid;
+    if (next > step && !valid) {
+      setShowErrors(true);
+      return;
+    }
+    setShowErrors(false);
+    setError(null);
+    if (next === 2 && customerMode === "new" && !contact.name && !contact.phone) {
+      const name = [newCustomer.firstName, newCustomer.lastName].filter((s) => s.trim()).join(" ") || newCustomer.companyName;
+      setContact({ name, phone: newCustomer.phone });
+    }
+    if (next === 3 && !startedAt) setStartedAt(localNow()); // default "now" when the step opens
+    setStep(next);
+    window.scrollTo({ top: 0 });
+  }
+
+  function useCustomerAddress() {
+    setAddress((a) => ({ ...a, street: newCustomer.street, houseNumber: newCustomer.houseNumber, postalCode: newCustomer.postalCode, city: newCustomer.city }));
+  }
+
+  async function startRecording() {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const types = ["audio/webm;codecs=opus", "audio/webm", "audio/mp4", "audio/ogg;codecs=opus"];
+      const mimeType = typeof MediaRecorder !== "undefined" ? types.find((x) => MediaRecorder.isTypeSupported(x)) : undefined;
+      const rec = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+      const chunks: BlobPart[] = [];
+      rec.ondataavailable = (e) => e.data.size > 0 && chunks.push(e.data);
+      rec.onstop = () => {
+        stream.getTracks().forEach((tr) => tr.stop());
+        const blob = new Blob(chunks, { type: rec.mimeType || mimeType || "audio/webm" });
+        setClip({ blob, url: URL.createObjectURL(blob) });
+        setRecState("recorded");
+      };
+      recorder.current = rec;
+      rec.start(1000);
+      setRecSeconds(0);
+      setRecState("recording");
+      timer.current = setInterval(() => {
+        setRecSeconds((s) => {
+          if (s + 1 >= MAX_VOICE_SECONDS) stopRecording();
+          return Math.min(s + 1, MAX_VOICE_SECONDS);
+        });
+      }, 1000);
+    } catch {
+      setError(t("reason.voiceDenied"));
+    }
+  }
+
+  function stopRecording() {
+    if (timer.current) clearInterval(timer.current);
+    timer.current = null;
+    if (recorder.current?.state === "recording") recorder.current.stop();
+  }
+
+  async function submit() {
+    if (!step3Valid) {
+      setShowErrors(true);
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    const payload: EmergencyCreateInput = {
+      clientIds: clientIds.current,
+      customer:
+        customerMode === "existing" && selected
+          ? { mode: "existing", customerId: selected.id }
+          : { mode: "new", ...newCustomer },
+      site: siteMode === "existing" ? { mode: "existing", siteId } : { mode: "new", ...address },
+      onSiteContact: contact,
+      reason,
+      startedAt: new Date(startedAt).toISOString(),
+      teamId: teamId || null,
+      assigneeIds: colleagues.filter((c) => c !== userId),
+      offline: typeof navigator !== "undefined" && !navigator.onLine,
+      deviceInfo: typeof navigator !== "undefined" ? navigator.userAgent.slice(0, 200) : undefined,
+    };
+    const result = await submitOp({ opType: "emergency.create", payload });
+    const workOrderId = result.idMap?.[clientIds.current.workOrder];
+    if (!isSuccess(result) || !workOrderId) {
+      setSubmitting(false);
+      const key = isSuccess(result) ? "queued" : errorKey(result);
+      setError(key === "queued" ? t("queued") : t(`errors.${key}`));
+      return;
+    }
+    if (clip) {
+      const type = clip.blob.type || "audio/webm";
+      const ext = type.includes("mp4") ? "m4a" : type.includes("ogg") ? "ogg" : "webm";
+      const up = await uploadFieldFile({ workOrderId, kind: "voice_note", clientId: newClientId(), file: clip.blob, fileName: `notdienst.${ext}` });
+      if (up.ok) {
+        await submitOp({
+          opType: "voice.attach",
+          payload: { workOrderId, clientId: newClientId(), documentId: up.documentId, durationSeconds: recSeconds, recordedAt: new Date().toISOString(), kind: "problem" },
+        });
+      }
+    }
+    router.push(`/m/orders/${workOrderId}`);
+  }
+
+  const stepLabels = [t("steps.customer"), t("steps.site"), t("steps.reason")];
+  const err = (cond: boolean) => showErrors && cond;
+
+  return (
+    <div className="space-y-4">
+      <ol className="grid grid-cols-3 gap-2" aria-label={t("stepOf", { step })}>
+        {stepLabels.map((label, i) => {
+          const n = (i + 1) as Step;
+          const state = n < step ? "done" : n === step ? "current" : "todo";
+          return (
+            <li key={label} aria-current={state === "current" ? "step" : undefined} className="flex flex-col items-center gap-1 text-center">
+              <span
+                className={cn(
+                  "flex size-9 items-center justify-center rounded-full border-2 font-heading text-[15px] font-semibold",
+                  state === "done" && "border-primary bg-primary text-primary-foreground",
+                  state === "current" && "border-cta text-foreground",
+                  state === "todo" && "border-border text-muted-foreground",
+                )}
+              >
+                {state === "done" ? <Check className="size-5" aria-hidden /> : n}
+              </span>
+              <span className={cn("text-[13px]", state === "current" ? "font-semibold" : "text-muted-foreground")}>{label}</span>
+            </li>
+          );
+        })}
+      </ol>
+      <p className="sr-only" aria-live="polite">
+        {t("stepOf", { step })}: {stepLabels[step - 1]}
+      </p>
+
+      {step === 1 && (
+        <section className={cn(card, "space-y-4")}>
+          <h2 className="text-[19px]">{t("steps.customer")}</h2>
+          <div className="grid grid-cols-2 gap-2" role="group" aria-label={t("steps.customer")}>
+            <button type="button" className={chip(customerMode === "existing")} aria-pressed={customerMode === "existing"} onClick={() => switchCustomerMode("existing")}>
+              <Search className="size-4.5" aria-hidden />
+              {t("customer.existing")}
+            </button>
+            <button type="button" className={chip(customerMode === "new")} aria-pressed={customerMode === "new"} onClick={() => switchCustomerMode("new")}>
+              <UserPlus className="size-4.5" aria-hidden />
+              {t("customer.new")}
+            </button>
+          </div>
+
+          {customerMode === "existing" &&
+            (selected ? (
+              <div className="space-y-2">
+                <div className="flex items-center gap-3 rounded-xl border border-primary p-3">
+                  <Check className="size-5 shrink-0 text-primary" aria-hidden />
+                  <div className="min-w-0 flex-1">
+                    <p className="font-semibold">{selected.name}</p>
+                    <p className="text-[14px] text-muted-foreground">
+                      {[selected.customerNumber, selected.city].filter(Boolean).join(" · ")}
+                      {selected.provisional && ` · ${t("customer.provisional")}`}
+                    </p>
+                  </div>
+                </div>
+                <button type="button" className={btnSecondary} onClick={() => selectCustomer(null)}>
+                  {t("customer.change")}
+                </button>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                <div>
+                  <label htmlFor="em-search" className="mb-1 block text-[14px] font-semibold">
+                    {t("customer.search")}
+                  </label>
+                  <input
+                    id="em-search"
+                    type="search"
+                    value={query}
+                    onChange={(e) => onQueryChange(e.target.value)}
+                    placeholder={t("customer.searchPlaceholder")}
+                    autoComplete="off"
+                    className={inputClass}
+                  />
+                  <p className="mt-1 text-[13px] text-muted-foreground">{t("customer.searchHint")}</p>
+                </div>
+                {searching && (
+                  <p role="status" className="flex items-center gap-2 text-[14px]">
+                    <LoaderCircle className="size-4.5 animate-spin" aria-hidden />
+                    {t("customer.searching")}
+                  </p>
+                )}
+                {searchFailed && <p className={noticeWarn}>{t("customer.offline")}</p>}
+                {!searching && query.trim().length >= 2 && hits.length === 0 && !searchFailed && (
+                  <p className="text-[14px] text-muted-foreground">{t("customer.noHits")}</p>
+                )}
+                <ul className="space-y-2">
+                  {hits.map((h) => (
+                    <li key={h.id}>
+                      <button type="button" onClick={() => selectCustomer(h)} className="flex min-h-14 w-full items-center gap-3 rounded-xl border bg-card px-3.5 py-2 text-left hover:bg-muted">
+                        <Building2 className="size-5 shrink-0 text-muted-foreground" aria-hidden />
+                        <span className="min-w-0 flex-1">
+                          <span className="block font-semibold">{h.name}</span>
+                          <span className="block text-[14px] text-muted-foreground">
+                            {[h.customerNumber, h.city].filter(Boolean).join(" · ")}
+                            {h.provisional && ` · ${t("customer.provisional")}`}
+                          </span>
+                        </span>
+                        <ChevronRight className="size-5 text-muted-foreground" aria-hidden />
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+                {err(!selected) && <p className={noticeError}>{t("customer.selectRequired")}</p>}
+              </div>
+            ))}
+
+          {customerMode === "new" && (
+            <div className="space-y-3">
+              <p className={noticeWarn}>{t("customer.newHint")}</p>
+              <TextField id="em-company" label={t("customer.companyName")} value={newCustomer.companyName} onChange={(v) => setNewCustomer({ ...newCustomer, companyName: v })} autoComplete="organization" />
+              <div className="grid grid-cols-2 gap-2">
+                <TextField id="em-first" label={t("customer.firstName")} value={newCustomer.firstName} onChange={(v) => setNewCustomer({ ...newCustomer, firstName: v })} autoComplete="given-name" />
+                <TextField
+                  id="em-last"
+                  label={t("customer.lastName")}
+                  value={newCustomer.lastName}
+                  onChange={(v) => setNewCustomer({ ...newCustomer, lastName: v })}
+                  autoComplete="family-name"
+                  invalid={err(!newCustomer.companyName.trim() && !newCustomer.lastName.trim())}
+                />
+              </div>
+              <p className="text-[13px] text-muted-foreground">{t("customer.nameHint")}</p>
+              <TextField id="em-phone" label={t("customer.phone")} type="tel" inputMode="tel" autoComplete="tel" required value={newCustomer.phone} onChange={(v) => setNewCustomer({ ...newCustomer, phone: v })} invalid={err(!newCustomer.phone.trim())} />
+              <TextField id="em-email" label={t("customer.email")} type="email" inputMode="email" autoComplete="email" value={newCustomer.email} onChange={(v) => setNewCustomer({ ...newCustomer, email: v })} />
+              <div className="grid grid-cols-[1fr_5.5rem] gap-2">
+                <TextField id="em-street" label={t("customer.street")} value={newCustomer.street} onChange={(v) => setNewCustomer({ ...newCustomer, street: v })} autoComplete="address-line1" />
+                <TextField id="em-no" label={t("customer.houseNumber")} value={newCustomer.houseNumber} onChange={(v) => setNewCustomer({ ...newCustomer, houseNumber: v })} />
+              </div>
+              <div className="grid grid-cols-[6.5rem_1fr] gap-2">
+                <TextField id="em-zip" label={t("customer.postalCode")} inputMode="numeric" autoComplete="postal-code" value={newCustomer.postalCode} onChange={(v) => setNewCustomer({ ...newCustomer, postalCode: v })} />
+                <TextField id="em-city" label={t("customer.city")} value={newCustomer.city} onChange={(v) => setNewCustomer({ ...newCustomer, city: v })} autoComplete="address-level2" />
+              </div>
+              {err(!step1Valid) && <p className={noticeError}>{t("required")}</p>}
+            </div>
+          )}
+
+          <button type="button" className={btnPrimary} onClick={() => go(2)}>
+            {t("next")}
+            <ChevronRight className="size-5" aria-hidden />
+          </button>
+        </section>
+      )}
+
+      {step === 2 && (
+        <section className={cn(card, "space-y-4")}>
+          <h2 className="text-[19px]">{t("steps.site")}</h2>
+          {customerMode === "existing" && sites === null && (
+            <p role="status" className="flex items-center gap-2 text-[14px]">
+              <LoaderCircle className="size-4.5 animate-spin" aria-hidden />
+              {t("site.loading")}
+            </p>
+          )}
+          {customerMode === "existing" && sites !== null && sites.length > 0 && (
+            <fieldset className="space-y-2">
+              <legend className="mb-1 text-[14px] font-semibold">{t("site.existing")}</legend>
+              {sites.map((s) => (
+                <label key={s.id} className={cn("flex min-h-14 cursor-pointer items-center gap-3 rounded-xl border px-3.5 py-2", siteMode === "existing" && siteId === s.id ? "border-primary" : "border-border")}>
+                  <input type="radio" name="em-site" className="size-5 accent-[var(--ui-primary)]" checked={siteMode === "existing" && siteId === s.id} onChange={() => { setSiteMode("existing"); setSiteId(s.id); }} />
+                  <span className="min-w-0 flex-1">
+                    <span className="block font-semibold">{s.name}</span>
+                    <span className="block text-[14px] text-muted-foreground">{s.address}</span>
+                  </span>
+                </label>
+              ))}
+              <label className={cn("flex min-h-14 cursor-pointer items-center gap-3 rounded-xl border px-3.5 py-2", siteMode === "new" ? "border-primary" : "border-border")}>
+                <input type="radio" name="em-site" className="size-5 accent-[var(--ui-primary)]" checked={siteMode === "new"} onChange={() => setSiteMode("new")} />
+                <MapPin className="size-5 text-muted-foreground" aria-hidden />
+                <span className="font-semibold">{t("site.newAddress")}</span>
+              </label>
+            </fieldset>
+          )}
+          {customerMode === "existing" && sites !== null && sites.length === 0 && <p className="text-[14px] text-muted-foreground">{t("site.none")}</p>}
+
+          {siteMode === "new" && (sites !== null || customerMode === "new") && (
+            <div className="space-y-3">
+              <p className="text-[13px] text-muted-foreground">{t("site.newHint")}</p>
+              {customerMode === "new" && (newCustomer.street || newCustomer.city) && (
+                <button type="button" className={btnSecondary} onClick={useCustomerAddress}>
+                  <MapPin className="size-5" aria-hidden />
+                  {t("site.useCustomerAddress")}
+                </button>
+              )}
+              <div className="grid grid-cols-[1fr_5.5rem] gap-2">
+                <TextField id="em-s-street" label={t("customer.street")} required value={address.street} onChange={(v) => setAddress({ ...address, street: v })} autoComplete="address-line1" invalid={err(!address.street.trim())} />
+                <TextField id="em-s-no" label={t("customer.houseNumber")} value={address.houseNumber} onChange={(v) => setAddress({ ...address, houseNumber: v })} />
+              </div>
+              <div className="grid grid-cols-[6.5rem_1fr] gap-2">
+                <TextField id="em-s-zip" label={t("customer.postalCode")} inputMode="numeric" autoComplete="postal-code" value={address.postalCode} onChange={(v) => setAddress({ ...address, postalCode: v })} />
+                <TextField id="em-s-city" label={t("customer.city")} required value={address.city} onChange={(v) => setAddress({ ...address, city: v })} autoComplete="address-level2" invalid={err(!address.city.trim())} />
+              </div>
+              <TextField id="em-s-name" label={t("site.name")} value={address.name} onChange={(v) => setAddress({ ...address, name: v })} />
+            </div>
+          )}
+
+          <fieldset className="space-y-3">
+            <legend className="text-[16px] font-semibold">{t("site.contactTitle")}</legend>
+            <TextField id="em-c-name" label={t("site.contactName")} required value={contact.name} onChange={(v) => setContact({ ...contact, name: v })} autoComplete="name" invalid={err(!contact.name.trim())} />
+            <TextField id="em-c-phone" label={t("site.contactPhone")} type="tel" inputMode="tel" autoComplete="tel" required value={contact.phone} onChange={(v) => setContact({ ...contact, phone: v })} invalid={err(!contact.phone.trim())} />
+          </fieldset>
+          {err(!step2Valid) && <p className={noticeError}>{t("required")}</p>}
+
+          <div className="grid grid-cols-2 gap-2">
+            <button type="button" className={btnSecondary} onClick={() => go(1)}>
+              <ChevronLeft className="size-5" aria-hidden />
+              {t("back")}
+            </button>
+            <button type="button" className={cn(btnPrimary, "min-h-12")} onClick={() => go(3)}>
+              {t("next")}
+              <ChevronRight className="size-5" aria-hidden />
+            </button>
+          </div>
+        </section>
+      )}
+
+      {step === 3 && (
+        <section className={cn(card, "space-y-4")}>
+          <h2 className="text-[19px]">{t("steps.reason")}</h2>
+          <div>
+            <label htmlFor="em-reason" className="mb-1 block text-[14px] font-semibold">
+              {t("reason.label")}
+              <span aria-hidden> *</span>
+            </label>
+            <textarea
+              id="em-reason"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              required
+              rows={4}
+              maxLength={2000}
+              placeholder={t("reason.placeholder")}
+              aria-invalid={err(!reason.trim()) || undefined}
+              className={cn(inputClass, "py-3", err(!reason.trim()) && "border-[var(--risk)]")}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-[14px] font-semibold">{t("reason.voice")}</p>
+            {recState === "idle" && (
+              <button type="button" className={btnSecondary} onClick={startRecording}>
+                <Mic className="size-5" aria-hidden />
+                {t("reason.voiceRecord")}
+              </button>
+            )}
+            {recState === "recording" && (
+              <>
+                <p role="status" aria-live="polite" className="flex items-center gap-2 text-[15px] font-semibold text-[var(--risk)]">
+                  <span className="size-3 animate-pulse rounded-full bg-[var(--risk)]" aria-hidden />
+                  {t("reason.voiceRecording", { seconds: recSeconds })}
+                </p>
+                <button type="button" className={btnSecondary} onClick={stopRecording}>
+                  <Square className="size-5" aria-hidden />
+                  {t("reason.voiceStop")}
+                </button>
+              </>
+            )}
+            {recState === "recorded" && clip && (
+              <>
+                <audio controls src={clip.url} className="w-full" />
+                <button type="button" className={btnSecondary} onClick={() => { setClip(null); setRecState("idle"); }}>
+                  {t("reason.voiceDiscard")}
+                </button>
+              </>
+            )}
+            <p className="text-[13px] text-muted-foreground">{t("reason.voiceHint")}</p>
+          </div>
+
+          <div>
+            <label htmlFor="em-start" className="mb-1 block text-[14px] font-semibold">
+              {t("reason.startedAt")}
+              <span aria-hidden> *</span>
+            </label>
+            <input id="em-start" type="datetime-local" value={startedAt} onChange={(e) => setStartedAt(e.target.value)} required className={inputClass} />
+          </div>
+
+          <div>
+            <label htmlFor="em-team" className="mb-1 block text-[14px] font-semibold">
+              {t("reason.team")}
+            </label>
+            <select id="em-team" value={teamId} onChange={(e) => { setTeamId(e.target.value); setColleagues([]); }} className={inputClass}>
+              {teams.map((x) => (
+                <option key={x.id} value={x.id}>
+                  {x.name}
+                </option>
+              ))}
+              <option value="">{t("reason.noTeam")}</option>
+            </select>
+          </div>
+
+          <fieldset className="space-y-2">
+            <legend className="mb-1 flex items-center gap-2 text-[14px] font-semibold">
+              <Users className="size-4.5" aria-hidden />
+              {t("reason.technicians")}
+            </legend>
+            <label className="flex min-h-12 items-center gap-3 text-[15px]">
+              <input type="checkbox" checked disabled className="size-5 accent-[var(--ui-primary)]" />
+              {t("reason.me")}
+            </label>
+            {team?.members
+              .filter((m) => m.id !== userId)
+              .map((m) => (
+                <label key={m.id} className="flex min-h-12 cursor-pointer items-center gap-3 text-[15px]">
+                  <input
+                    type="checkbox"
+                    className="size-5 accent-[var(--ui-primary)]"
+                    checked={colleagues.includes(m.id)}
+                    onChange={(e) => setColleagues(e.target.checked ? [...colleagues, m.id] : colleagues.filter((c) => c !== m.id))}
+                  />
+                  {m.name}
+                </label>
+              ))}
+          </fieldset>
+
+          {err(!step3Valid) && <p className={noticeError}>{t("required")}</p>}
+          {error && (
+            <p className={noticeError} role="alert">
+              <TriangleAlert className="mt-0.5 size-4.5 shrink-0" aria-hidden />
+              {error}
+            </p>
+          )}
+
+          <button type="button" className={btnPrimary} onClick={submit} disabled={submitting || recState === "recording"}>
+            {submitting ? <LoaderCircle className="size-5 animate-spin" aria-hidden /> : <Siren className="size-5" aria-hidden />}
+            {submitting ? t("starting") : t("start")}
+          </button>
+          <button type="button" className={btnSecondary} onClick={() => go(2)} disabled={submitting}>
+            <ChevronLeft className="size-5" aria-hidden />
+            {t("back")}
+          </button>
+        </section>
+      )}
+    </div>
+  );
+}

src/server/actions/emergency/capture.ts

@@ -0,0 +1,38 @@
+"use server";
+
+import { moduleGuard } from "@/server/action-guard";
+import { toActionError } from "@/server/api/action-state";
+import { ctxFromGuard } from "@/server/services/context";
+import {
+  listSitesForEmergency,
+  searchCustomersForEmergency,
+  type EmergencyCustomerHit,
+  type EmergencySiteHit,
+} from "@/server/services/emergency/lookup";
+
+/**
+ * Read lookups of the mobile emergency capture. They are server actions (not page reads) because
+ * the client wizard calls them interactively; both are audited in the service. The create itself
+ * goes through the sync op `emergency.create` (offline-capable, POST /api/v1/sync).
+ */
+const guard = moduleGuard("emergency");
+
+export type LookupResult<T> = { ok: true; items: T[] } | { ok: false; code: string };
+
+export async function searchEmergencyCustomersAction(query: string): Promise<LookupResult<EmergencyCustomerHit>> {
+  try {
+    const ctx = ctxFromGuard(await guard("emergency:create"));
+    return { ok: true, items: await searchCustomersForEmergency(ctx, String(query ?? "")) };
+  } catch (err) {
+    return { ok: false, code: toActionError(err).code };
+  }
+}
+
+export async function listEmergencySitesAction(customerId: string): Promise<LookupResult<EmergencySiteHit>> {
+  try {
+    const ctx = ctxFromGuard(await guard("emergency:create"));
+    return { ok: true, items: await listSitesForEmergency(ctx, String(customerId ?? "")) };
+  } catch (err) {
+    return { ok: false, code: toActionError(err).code };
+  }
+}

src/server/actions/emergency/review.ts

@@ -0,0 +1,125 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { moduleGuard } from "@/server/action-guard";
+import { formObject, toActionError, type ActionState } from "@/server/api/action-state";
+import { ctxFromGuard, type ServiceCtx } from "@/server/services/context";
+import {
+  assignEmergencySite,
+  assignEmergencyToCustomer,
+  completeEmergencyOrderData,
+  confirmEmergencyCustomer,
+  correctEmergencySite,
+  mergeEmergencyCustomer,
+  releaseEmergencyForBilling,
+} from "@/server/services/emergency/review";
+
+/** Backoffice review of emergency call-outs (/work-orders/emergency-review/[id]). */
+const guard = moduleGuard("emergency");
+
+function done(workOrderId: string): ActionState {
+  revalidatePath("/work-orders/emergency-review");
+  revalidatePath(`/work-orders/emergency-review/${workOrderId}`);
+  revalidatePath(`/work-orders/${workOrderId}`);
+  return { status: "ok" };
+}
+
+async function run(workOrderId: string, fn: () => Promise<unknown>): Promise<ActionState> {
+  try {
+    await fn();
+  } catch (err) {
+    return toActionError(err);
+  }
+  return done(workOrderId);
+}
+
+const version = (fd: FormData) => {
+  const v = Number(fd.get("baseVersion"));
+  return Number.isInteger(v) && v > 0 ? v : undefined;
+};
+
+export async function confirmCustomerAction(workOrderId: string): Promise<ActionState> {
+  let ctx: ServiceCtx;
+  try {
+    ctx = ctxFromGuard(await guard("emergency:review", "customer:write"));
+  } catch (err) {
+    return toActionError(err);
+  }
+  return run(workOrderId, () => confirmEmergencyCustomer(ctx, workOrderId));
+}
+
+export async function assignCustomerAction(workOrderId: string, _prev: ActionState, fd: FormData): Promise<ActionState> {
+  let ctx: ServiceCtx;
+  try {
+    ctx = ctxFromGuard(await guard("emergency:review", "customer:write", "work_order:write"));
+  } catch (err) {
+    return toActionError(err);
+  }
+  return run(workOrderId, async () => assignEmergencyToCustomer(ctx, { workOrderId, targetCustomerId: await targetCustomer(ctx, fd) }));
+}
+
+/** Target from the candidate select or, as a fallback, from an entered customer number (tenant-bound lookup). */
+async function targetCustomer(ctx: ServiceCtx, fd: FormData): Promise<string> {
+  const id = String(fd.get("targetCustomerId") ?? "").trim();
+  if (id) return id;
+  const customerNumber = String(fd.get("targetCustomerNumber") ?? "").trim();
+  if (!customerNumber) return "";
+  const c = await ctx.db.customer.findFirst({ where: { customerNumber, deletedAt: null }, select: { id: true } });
+  return c?.id ?? "__unknown__";
+}
+
+export async function mergeCustomerAction(workOrderId: string, _prev: ActionState, fd: FormData): Promise<ActionState> {
+  let ctx: ServiceCtx;
+  try {
+    ctx = ctxFromGuard(await guard("emergency:review", "customer:merge"));
+  } catch (err) {
+    return toActionError(err);
+  }
+  const confirm = fd.get("confirm") === "on" || fd.get("confirm") === "1";
+  return run(workOrderId, async () => mergeEmergencyCustomer(ctx, { workOrderId, targetCustomerId: await targetCustomer(ctx, fd), confirm }));
+}
+
+export async function correctSiteAction(workOrderId: string, _prev: ActionState, fd: FormData): Promise<ActionState> {
+  let ctx: ServiceCtx;
+  try {
+    ctx = ctxFromGuard(await guard("emergency:review", "site:write"));
+  } catch (err) {
+    return toActionError(err);
+  }
+  const values = formObject(fd, ["name", "street", "houseNumber", "postalCode", "city", "onSiteContact", "phone", "accessNotes"]);
+  const patch = { ...values, name: values.name ?? undefined };
+  const confirm = fd.get("confirm") === "on" || fd.get("confirm") === "1";
+  return run(workOrderId, () => correctEmergencySite(ctx, { workOrderId, patch, confirm }));
+}
+
+export async function assignSiteAction(workOrderId: string, _prev: ActionState, fd: FormData): Promise<ActionState> {
+  let ctx: ServiceCtx;
+  try {
+    ctx = ctxFromGuard(await guard("emergency:review", "work_order:write"));
+  } catch (err) {
+    return toActionError(err);
+  }
+  const siteId = String(fd.get("siteId") ?? "");
+  return run(workOrderId, () => assignEmergencySite(ctx, { workOrderId, siteId }));
+}
+
+export async function completeOrderAction(workOrderId: string, _prev: ActionState, fd: FormData): Promise<ActionState> {
+  let ctx: ServiceCtx;
+  try {
+    ctx = ctxFromGuard(await guard("emergency:review", "work_order:write"));
+  } catch (err) {
+    return toActionError(err);
+  }
+  const values = formObject(fd, ["title", "description", "orderTypeId", "billingType"]);
+  return run(workOrderId, () => completeEmergencyOrderData(ctx, { workOrderId, ...values, baseVersion: version(fd) }));
+}
+
+export async function releaseBillingAction(workOrderId: string, _prev: ActionState, fd: FormData): Promise<ActionState> {
+  let ctx: ServiceCtx;
+  try {
+    ctx = ctxFromGuard(await guard("emergency:review", "work_order:release_billing"));
+  } catch (err) {
+    return toActionError(err);
+  }
+  return run(workOrderId, () => releaseEmergencyForBilling(ctx, { workOrderId, baseVersion: version(fd) }));
+}