@burdenoff/microfe-movethewheels 2026.1101.1 → 2026.1101.2

package/dist/components/EpodCaptureForm.js

@@ -0,0 +1,256 @@
+import { CircleCheck as e } from "../node_modules/lucide-react/dist/esm/icons/circle-check.js";
+import { LoaderCircle as t } from "../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import { MapPin as n } from "../node_modules/lucide-react/dist/esm/icons/map-pin.js";
+import { PenLine as r } from "../node_modules/lucide-react/dist/esm/icons/pen-line.js";
+import { Truck as i } from "../node_modules/lucide-react/dist/esm/icons/truck.js";
+import { Type as a } from "../node_modules/lucide-react/dist/esm/icons/type.js";
+import { Upload as o } from "../node_modules/lucide-react/dist/esm/icons/upload.js";
+import { formatAddress as ee } from "../utils/formatters.js";
+import { useShipmentStatusQuery as te } from "../hooks/useShipmentStatusAuthority.js";
+import { useCaptureEpod as ne, useEpodPhotoUpload as s } from "../hooks/useEpod.js";
+import { Button as c, Card as l, CardContent as re, CardHeader as ie, CardTitle as ae, Input as u, Label as d, Textarea as f } from "./ui.js";
+import { FormError as p } from "./FormError.js";
+import { SignaturePad as m } from "./SignaturePad.js";
+import { StatusAuthorityOwnedDeliveryDocument as h } from "../src/generated/shipment-status-authority-operations.js";
+import { useEffect as oe, useRef as g, useState as _ } from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/movethewheels/components/EpodCaptureForm.tsx
+function x() {
+	return new Promise((e) => {
+		if (!navigator.geolocation) {
+			e(null);
+			return;
+		}
+		navigator.geolocation.getCurrentPosition((t) => e(t), () => e(null), {
+			enableHighAccuracy: !0,
+			timeout: 8e3,
+			maximumAge: 3e4
+		});
+	});
+}
+function S({ job: S, onCaptured: C, onCancel: w, offline: T = !1 }) {
+	let { captureEpod: E, isSubmitting: D, error: O, captureFeedback: k } = ne(), [A, se] = _(0), j = te(h, { deliveryJobId: S.id }, A), [M, N] = _(!1), P = g(null), F = g(!1), I = g(!0);
+	oe(() => (I.current = !0, () => {
+		I.current = !1;
+	}), []);
+	let [L, R] = _(!1), [z, B] = _(0), { upload: V, isUploading: H, error: U } = s(), W = g(null), [G, ce] = _(""), [K, q] = _("drawn"), [J, le] = _(""), [Y, ue] = _(null), [X, de] = _(""), [Z, Q] = _(null), fe = async () => {
+		if (F.current) return;
+		if (Q(null), T) {
+			Q("You are offline. Reconnect to confirm this delivery.");
+			return;
+		}
+		if (j.loading || j.error || !j.data || A < z || !M || k?.kind === "UNKNOWN") {
+			Q("Review the current linked shipment status and confirm completion before capture. Do not resend an uncertain capture.");
+			return;
+		}
+		let e = G.trim();
+		if (!e) {
+			Q("Recipient name is required.");
+			return;
+		}
+		let t = K === "typed" ? J.trim() : W.current?.toDataUrl() ?? null;
+		if (!t) {
+			Q(K === "typed" ? "Type the recipient full name as their signature." : "A signature is required.");
+			return;
+		}
+		F.current = !0, R(!0);
+		try {
+			let n;
+			if (Y) if (P.current?.file === Y) n = [P.current.id];
+			else {
+				let e = await V(Y);
+				P.current = {
+					file: Y,
+					id: e.fileId
+				}, n = [e.fileId];
+			}
+			if (!I.current) return;
+			let r = await x();
+			if (!I.current) return;
+			let i = await E({
+				expectedShipmentId: j.data.myEpodShipmentStatus?.id ?? null,
+				expectedShipmentStatusRevision: j.data.myEpodShipmentStatus?.statusRevision,
+				completionAttestation: M,
+				deliveryJobId: S.id,
+				recipientName: e,
+				signatureType: K,
+				signatureData: t,
+				photoFileIds: n,
+				latitude: r?.coords.latitude,
+				longitude: r?.coords.longitude,
+				locationAccuracy: r?.coords.accuracy,
+				notes: X.trim() || void 0
+			});
+			if (!I.current) return;
+			C(i.deliveryJobId);
+		} catch {
+			N(!1), B(A + 1);
+		} finally {
+			F.current = !1, R(!1);
+		}
+	}, $ = D || H || L;
+	return /* @__PURE__ */ b(l, { children: [/* @__PURE__ */ y(ie, { children: /* @__PURE__ */ b(ae, {
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ y(i, { size: 18 }),
+			" Capture delivery for ",
+			S.deliveryJobNumber
+		]
+	}) }), /* @__PURE__ */ b(re, {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ b("div", {
+				className: "text-sm text-text-secondary space-y-1",
+				children: [S.customerName && /* @__PURE__ */ b("p", { children: ["Recipient on file: ", S.customerName] }), S.deliveryAddress && /* @__PURE__ */ y("p", { children: ee(S.deliveryAddress) })]
+			}),
+			/* @__PURE__ */ b("section", {
+				"aria-label": "Linked shipment status",
+				className: "space-y-2",
+				children: [
+					/* @__PURE__ */ b("p", { children: [
+						"Recorded shipment:",
+						" ",
+						j.data?.myEpodShipmentStatus ? `${j.data.myEpodShipmentStatus.status.toLowerCase().replaceAll("_", " ")} · revision ${j.data.myEpodShipmentStatus.statusRevision}` : j.data ? "No linked shipment" : "Loading current record"
+					] }),
+					j.error && /* @__PURE__ */ y("p", {
+						role: "alert",
+						children: j.error
+					}),
+					/* @__PURE__ */ y(c, {
+						variant: "outline",
+						disabled: j.loading || $,
+						onClick: () => {
+							N(!1), se((e) => e + 1);
+						},
+						children: "Refresh linked status"
+					}),
+					/* @__PURE__ */ b("label", {
+						className: "flex items-start gap-2",
+						children: [/* @__PURE__ */ y("input", {
+							type: "checkbox",
+							checked: M,
+							disabled: j.loading || !!j.error || $ || A < z || k?.kind === "UNKNOWN",
+							onChange: (e) => N(e.target.checked)
+						}), "I reviewed the recorded linked status and attest to this delivery completion."]
+					}),
+					/* @__PURE__ */ y("p", { children: "This records an assigned driver's attestation; it does not independently verify physical freight movement." }),
+					k && /* @__PURE__ */ y("p", {
+						role: "status",
+						children: k.message
+					})
+				]
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "space-y-1.5",
+				children: [/* @__PURE__ */ y(d, {
+					htmlFor: "epod-recipient-name",
+					children: "Recipient name"
+				}), /* @__PURE__ */ y(u, {
+					id: "epod-recipient-name",
+					value: G,
+					onChange: (e) => ce(e.target.value),
+					placeholder: "Who received the delivery?"
+				})]
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "space-y-1.5",
+				children: [
+					/* @__PURE__ */ y(d, { children: "Signature" }),
+					/* @__PURE__ */ b("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ b(c, {
+							type: "button",
+							variant: K === "drawn" ? "default" : "outline",
+							size: "sm",
+							onClick: () => q("drawn"),
+							children: [/* @__PURE__ */ y(r, { size: 14 }), " Draw"]
+						}), /* @__PURE__ */ b(c, {
+							type: "button",
+							variant: K === "typed" ? "default" : "outline",
+							size: "sm",
+							onClick: () => q("typed"),
+							children: [/* @__PURE__ */ y(a, { size: 14 }), " Type name instead"]
+						})]
+					}),
+					K === "drawn" ? /* @__PURE__ */ y(m, { ref: W }) : /* @__PURE__ */ y(u, {
+						value: J,
+						onChange: (e) => le(e.target.value),
+						placeholder: "Type full name as signature"
+					})
+				]
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "space-y-1.5",
+				children: [
+					/* @__PURE__ */ y(d, {
+						htmlFor: "epod-photo",
+						children: "Delivery photo (optional)"
+					}),
+					/* @__PURE__ */ b("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ y("input", {
+							id: "epod-photo",
+							type: "file",
+							accept: "image/*",
+							capture: "environment",
+							onChange: (e) => ue(e.target.files?.[0] ?? null),
+							className: "text-sm"
+						}), Y && /* @__PURE__ */ y(o, {
+							size: 14,
+							className: "text-text-secondary"
+						})]
+					}),
+					Y && /* @__PURE__ */ y("p", {
+						className: "text-xs text-text-secondary",
+						children: Y.name
+					})
+				]
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "space-y-1.5",
+				children: [/* @__PURE__ */ y(d, {
+					htmlFor: "epod-notes",
+					children: "Notes (optional)"
+				}), /* @__PURE__ */ y(f, {
+					id: "epod-notes",
+					value: X,
+					onChange: (e) => de(e.target.value),
+					placeholder: "e.g. Left with front desk, gate code used, etc.",
+					rows: 2
+				})]
+			}),
+			/* @__PURE__ */ b("p", {
+				className: "flex items-center gap-1.5 text-xs text-text-secondary",
+				children: [/* @__PURE__ */ y(n, { size: 12 }), " Device GPS is captured automatically when permitted by the browser."]
+			}),
+			T && /* @__PURE__ */ y("p", {
+				role: "alert",
+				className: "text-sm text-text-secondary",
+				children: "You are offline. Your entries stay on this screen; reconnect to confirm the delivery."
+			}),
+			Z && /* @__PURE__ */ y(p, { message: Z }),
+			O && /* @__PURE__ */ y(p, { message: O.message }),
+			U && /* @__PURE__ */ y(p, { message: U.message }),
+			/* @__PURE__ */ b("div", {
+				className: "flex gap-2 justify-end",
+				children: [/* @__PURE__ */ y(c, {
+					type: "button",
+					variant: "outline",
+					onClick: w,
+					disabled: $,
+					children: "Cancel"
+				}), /* @__PURE__ */ y(c, {
+					type: "button",
+					onClick: () => void fe(),
+					disabled: $ || T || j.loading || !!j.error || !j.data || A < z || !M || k?.kind === "UNKNOWN",
+					children: $ ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(t, {
+						size: 14,
+						className: "animate-spin"
+					}), " Submitting…"] }) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(e, { size: 14 }), " Confirm delivery"] })
+				})]
+			})
+		]
+	})] });
+}
+//#endregion
+export { S as EpodCaptureForm };