@burdenoff/microfe-movethewheels 2026.1031.1 → 2026.1031.3

package/dist/components/TrackingAlertList.js

@@ -0,0 +1,149 @@
+import { CircleCheck as e } from "../node_modules/lucide-react/dist/esm/icons/circle-check.js";
+import { Clock as t } from "../node_modules/lucide-react/dist/esm/icons/clock.js";
+import { Gauge as n } from "../node_modules/lucide-react/dist/esm/icons/gauge.js";
+import { formatSlip as r, predictedSlipMinutes as i, riskSignalLabel as a } from "../utils/trackingAlerts.js";
+import { Badge as o, Button as s } from "./ui.js";
+import { formatDateTime as c } from "../utils/formatters.js";
+import { ShipmentRiskDialog as l } from "./ShipmentRiskDialog.js";
+import { useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/movethewheels/components/TrackingAlertList.tsx
+var m = {
+	critical: "bg-status-error-bg-subtle border-status-error-border",
+	high: "bg-status-error-bg-subtle border-status-error-border",
+	medium: "bg-status-warning-bg-subtle border-status-warning-border",
+	low: "bg-surface-secondary border-border-primary"
+};
+function h({ alert: e, t }) {
+	let n = e.severity === "high" || e.severity === "critical", r = e.kind === "AT_RISK" ? t("movethewheels.alerts.kind.atRisk", "At risk") : t("movethewheels.alerts.kind.delayed", "Delayed");
+	return /* @__PURE__ */ p(o, {
+		variant: n ? "destructive" : "secondary",
+		className: "shrink-0",
+		children: [r, e.kind === "AT_RISK" && typeof e.riskScore == "number" ? ` · ${e.riskScore}` : ""]
+	});
+}
+function g({ alert: e, t: a }) {
+	let o = i(e);
+	return !e.promisedDelivery && !e.predictedDelivery ? null : /* @__PURE__ */ p("dl", {
+		className: "mt-2 grid grid-cols-1 gap-x-4 gap-y-1 text-xs text-text-secondary sm:grid-cols-2",
+		children: [e.promisedDelivery && /* @__PURE__ */ p("div", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ f(t, {
+					size: 12,
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ p("dt", { children: [a("movethewheels.alerts.promised", "Promised"), ":"] }),
+				/* @__PURE__ */ f("dd", {
+					className: "text-text-primary",
+					children: c(e.promisedDelivery)
+				})
+			]
+		}), e.predictedDelivery && /* @__PURE__ */ p("div", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ f(n, {
+					size: 12,
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ p("dt", { children: [a("movethewheels.alerts.predicted", "Predicted"), ":"] }),
+				/* @__PURE__ */ p("dd", {
+					className: "text-text-primary",
+					children: [c(e.predictedDelivery), o !== null && /* @__PURE__ */ p("span", {
+						className: "ml-1 text-status-error-text",
+						children: [
+							"(+",
+							r(o),
+							")"
+						]
+					})]
+				})
+			]
+		})]
+	});
+}
+function _({ alerts: t, limit: n, t: r, onAcknowledge: i, onOpenOrder: o, onChanged: c }) {
+	let [_, v] = u(null), [y, b] = u(null), [x, S] = u(null), C = async (e) => {
+		v(e), b(null);
+		try {
+			await i(e);
+		} catch (e) {
+			b(e instanceof Error ? e.message : r("movethewheels.alerts.ackFailed", "Could not acknowledge the alert"));
+		} finally {
+			v(null);
+		}
+	};
+	return /* @__PURE__ */ p(d, { children: [
+		y && /* @__PURE__ */ f("p", {
+			role: "alert",
+			className: "mb-2 text-xs text-status-error-text",
+			children: y
+		}),
+		/* @__PURE__ */ f("ul", {
+			className: "space-y-3",
+			"aria-label": r("movethewheels.alerts.listLabel", "Shipment alerts"),
+			children: t.slice(0, n).map((t) => /* @__PURE__ */ p("li", {
+				"data-testid": "tracking-alert",
+				"data-alert-kind": t.kind,
+				className: `rounded-lg border p-3 text-sm ${m[t.severity]}`,
+				children: [
+					/* @__PURE__ */ p("div", {
+						className: "flex items-start justify-between gap-2",
+						children: [/* @__PURE__ */ p("p", {
+							className: "font-medium",
+							children: [t.shipmentNumber ? `${t.shipmentNumber}: ` : "", t.message]
+						}), /* @__PURE__ */ f(h, {
+							alert: t,
+							t: r
+						})]
+					}),
+					/* @__PURE__ */ f(g, {
+						alert: t,
+						t: r
+					}),
+					t.signals && t.signals.length > 0 && /* @__PURE__ */ f("ul", {
+						className: "mt-2 flex flex-wrap gap-1",
+						"aria-label": r("movethewheels.alerts.signals", "Risk signals"),
+						children: t.signals.map((e) => /* @__PURE__ */ f("li", {
+							className: "rounded-full border border-border-primary bg-surface-primary px-2 py-0.5 text-xs text-text-secondary",
+							children: a(e, r)
+						}, e))
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "mt-3 flex flex-wrap gap-2",
+						children: [t.shipmentId && /* @__PURE__ */ f(s, {
+							size: "sm",
+							variant: "outline",
+							onClick: () => S(t),
+							children: r("movethewheels.alerts.viewRisk", "View risk")
+						}), t.shipmentId && t.kind && /* @__PURE__ */ p(s, {
+							size: "sm",
+							variant: "ghost",
+							disabled: _ === t.id,
+							onClick: () => void C(t.id),
+							children: [/* @__PURE__ */ f(e, {
+								size: 14,
+								"aria-hidden": "true"
+							}), _ === t.id ? r("movethewheels.alerts.acknowledging", "Acknowledging…") : r("movethewheels.alerts.acknowledge", "Acknowledge")]
+						})]
+					})
+				]
+			}, t.id))
+		}),
+		/* @__PURE__ */ f(l, {
+			shipmentId: x?.shipmentId,
+			shipmentNumber: x?.shipmentNumber,
+			open: x !== null,
+			onOpenChange: (e) => {
+				e || S(null);
+			},
+			t: r,
+			onOpenOrder: (e) => {
+				S(null), o(e);
+			},
+			onChanged: c
+		})
+	] });
+}
+//#endregion
+export { _ as TrackingAlertList };