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>
This commit is contained in:
Claude Opus 5
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user