@burdenoff/microfe-theglobalfuel 2026.801.1 → 2026.804.2

package/dist/theglobalfuel/pages/safety/IncidentsPage.js

@@ -0,0 +1,611 @@
+import { PageLayout as e } from "../../components/PageLayout.js";
+import { formatDate as t, formatEnumLabel as n, toBackendDate as r } from "../../utils/formatters.js";
+import { StatusBadge as i } from "../../components/StatusBadge.js";
+import { DataTable as a } from "../../components/DataTable.js";
+import { ErrorView as o, LoadingView as ee } from "../../components/StateViews.js";
+import { EmptyState as s } from "../../components/EmptyState.js";
+import { useTheAssets as c, useTheCorrectiveActions as l, useTheCreateCorrectiveAction as u, useTheReportSafetyIncident as d, useTheSafetyIncidents as f, useTheTransitionCorrectiveAction as p, useTheTransitionSafetyIncident as te, useTheUpdateIncidentInvestigation as m } from "../../hooks/useTheGlobalFuelApi.js";
+import { useCursorPager as h } from "../../hooks/useCursorPager.js";
+import { useNotify as ne } from "../../hooks/useNotify.js";
+import { useThePageView as g } from "../../hooks/useThePageView.js";
+import { useTheTranslation as re } from "../../hooks/useTheTranslation.js";
+import "../../hooks/index.js";
+import { FilterTabs as _ } from "../../components/FilterTabs.js";
+import { Pagination as v } from "../../components/Pagination.js";
+import { useMemo as y, useState as b } from "react";
+import { ArrowRight as x, ClipboardList as S, Plus as C, ShieldAlert as w } from "lucide-react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { Button as O, Input as k, Label as A, ResponsiveDialog as ie, ResponsiveDialogContent as j, ResponsiveDialogDescription as ae, ResponsiveDialogFooter as oe, ResponsiveDialogHeader as se, ResponsiveDialogTitle as M, Select as N, SelectContent as P, SelectItem as F, SelectTrigger as I, SelectValue as L, Textarea as ce } from "@burdenoff/fe-libs/ui";
+//#region src/theglobalfuel/pages/safety/IncidentsPage.tsx
+var le = [
+	"NEAR_MISS",
+	"INJURY",
+	"SPILL",
+	"RELEASE",
+	"EQUIPMENT_FAILURE"
+], R = [
+	"LOW",
+	"MEDIUM",
+	"HIGH",
+	"CRITICAL"
+], ue = [
+	{
+		value: "ALL",
+		label: "All statuses"
+	},
+	{
+		value: "REPORTED",
+		label: "Reported"
+	},
+	{
+		value: "INVESTIGATING",
+		label: "Investigating"
+	},
+	{
+		value: "ROOT_CAUSE_IDENTIFIED",
+		label: "Root cause found"
+	},
+	{
+		value: "CORRECTIVE_ACTION",
+		label: "Corrective action"
+	},
+	{
+		value: "CLOSED",
+		label: "Closed"
+	}
+], z = {
+	REPORTED: "INVESTIGATING",
+	INVESTIGATING: "ROOT_CAUSE_IDENTIFIED",
+	ROOT_CAUSE_IDENTIFIED: "CORRECTIVE_ACTION",
+	CORRECTIVE_ACTION: "CLOSED"
+}, B = {
+	OPEN: "IN_PROGRESS",
+	IN_PROGRESS: "VERIFIED",
+	VERIFIED: "CLOSED"
+}, V = 25, H = () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10), U = () => ({
+	title: "",
+	category: "NEAR_MISS",
+	severity: "LOW",
+	occurredAt: H(),
+	assetId: "",
+	involvedParties: "",
+	description: "",
+	notes: ""
+});
+function W() {
+	g("safety-incidents");
+	let l = re(), u = ne(), [p, m] = b("ALL"), [x, S] = b("ALL"), [B, H] = b("ALL"), W = h(), [fe, G] = b(!1), [K, q] = b(U), [pe, J] = b(null), [me, he] = b(null), [ge, _e] = b(null), Y = c({ pagination: { limit: 100 } }), ve = y(() => {
+		let e = {};
+		for (let t of Y.data?.items ?? []) e[t.id] = t.name;
+		return e;
+	}, [Y.data]), ye = Y.data?.items ?? [], { data: X, isLoading: be, isError: xe, refetch: Se } = f({
+		status: p === "ALL" ? void 0 : p,
+		category: x === "ALL" ? void 0 : x,
+		severity: B === "ALL" ? void 0 : B,
+		pagination: {
+			limit: V,
+			offset: W.page * V
+		}
+	}), Z = d(), Ce = te(), Q = y(() => X?.items ?? [], [X]), $ = y(() => Q.find((e) => e.id === me) ?? null, [Q, me]), we = [
+		{
+			key: "severity",
+			header: "Severity",
+			render: (e) => /* @__PURE__ */ E(i, { status: e.severity })
+		},
+		{
+			key: "title",
+			header: "Incident",
+			render: (e) => /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+				className: "font-medium text-text-primary",
+				children: e.title
+			}), e.description && /* @__PURE__ */ E("p", {
+				className: "line-clamp-1 text-xs text-text-tertiary",
+				children: e.description
+			})] })
+		},
+		{
+			key: "category",
+			header: "Category",
+			hideOnMobile: !0,
+			render: (e) => /* @__PURE__ */ E(i, { status: e.category })
+		},
+		{
+			key: "asset",
+			header: "Asset",
+			hideOnMobile: !0,
+			render: (e) => /* @__PURE__ */ E("span", {
+				className: "text-text-secondary",
+				children: e.assetId ? ve[e.assetId] ?? `${e.assetId.slice(0, 8)}…` : "—"
+			})
+		},
+		{
+			key: "occurred",
+			header: "Occurred",
+			hideOnMobile: !0,
+			sortValue: (e) => new Date(e.occurredAt).getTime(),
+			render: (e) => /* @__PURE__ */ E("span", {
+				className: "text-text-secondary",
+				children: t(e.occurredAt)
+			})
+		},
+		{
+			key: "status",
+			header: "Status",
+			render: (e) => /* @__PURE__ */ E(i, { status: e.status })
+		},
+		{
+			key: "manage",
+			header: "",
+			align: "right",
+			render: (e) => /* @__PURE__ */ E(O, {
+				size: "sm",
+				variant: "outline",
+				onClick: () => he(e.id),
+				children: "Manage"
+			})
+		}
+	], Te = () => {
+		q(U()), J(null), G(!0);
+	}, Ee = async () => {
+		if (!K.title.trim()) {
+			let e = "A short incident title is required.";
+			J(e), u.error(e);
+			return;
+		}
+		let e = r(K.occurredAt);
+		if (!e) {
+			J("The occurrence date is required.");
+			return;
+		}
+		J(null);
+		try {
+			await Z.mutateAsync({
+				title: K.title.trim(),
+				category: K.category,
+				severity: K.severity,
+				occurredAt: e,
+				assetId: K.assetId || null,
+				involvedParties: K.involvedParties.trim() || null,
+				description: K.description.trim() || null,
+				notes: K.notes.trim() || null
+			}), u.success("Incident reported"), G(!1), q(U());
+		} catch (e) {
+			u.fromError(e), J(e instanceof Error ? e.message : "Failed to report incident.");
+		}
+	}, De = (e) => {
+		let t = z[e.status];
+		t && (_e(e.id), Ce.mutate({
+			id: e.id,
+			status: t
+		}, {
+			onSuccess: () => u.success(`Incident moved to ${n(t)}`),
+			onError: (e) => u.fromError(e),
+			onSettled: () => _e(null)
+		}));
+	};
+	return /* @__PURE__ */ D(e, {
+		title: l("theglobalfuel.pages.incidents.title", "Safety Incidents"),
+		description: l("theglobalfuel.pages.incidents.description", "Near-miss, injury, spill, release and equipment-failure register with investigation workflow and corrective-action closure."),
+		dataTour: "theglobalfuel-incidents-page",
+		actions: /* @__PURE__ */ D(O, {
+			onClick: Te,
+			children: [/* @__PURE__ */ E(C, { className: "mr-1.5 h-4 w-4" }), " Report incident"]
+		}),
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "mb-5 flex flex-wrap items-center gap-3",
+				children: [
+					/* @__PURE__ */ E(_, {
+						options: ue,
+						value: p,
+						onChange: (e) => {
+							m(e), W.reset();
+						}
+					}),
+					/* @__PURE__ */ D(N, {
+						value: x,
+						onValueChange: (e) => {
+							S(e), W.reset();
+						},
+						children: [/* @__PURE__ */ E(I, {
+							className: "w-48",
+							"aria-label": "Filter by category",
+							children: /* @__PURE__ */ E(L, { placeholder: "All categories" })
+						}), /* @__PURE__ */ D(P, { children: [/* @__PURE__ */ E(F, {
+							value: "ALL",
+							children: "All categories"
+						}), le.map((e) => /* @__PURE__ */ E(F, {
+							value: e,
+							children: n(e)
+						}, e))] })]
+					}),
+					/* @__PURE__ */ D(N, {
+						value: B,
+						onValueChange: (e) => {
+							H(e), W.reset();
+						},
+						children: [/* @__PURE__ */ E(I, {
+							className: "w-44",
+							"aria-label": "Filter by severity",
+							children: /* @__PURE__ */ E(L, { placeholder: "All severities" })
+						}), /* @__PURE__ */ D(P, { children: [/* @__PURE__ */ E(F, {
+							value: "ALL",
+							children: "All severities"
+						}), R.map((e) => /* @__PURE__ */ E(F, {
+							value: e,
+							children: n(e)
+						}, e))] })]
+					})
+				]
+			}),
+			be ? /* @__PURE__ */ E(ee, { label: "Loading incidents…" }) : xe ? /* @__PURE__ */ E(o, {
+				message: "Couldn't load safety incidents.",
+				onRetry: () => Se()
+			}) : Q.length === 0 ? /* @__PURE__ */ E(s, {
+				illustration: "empty-data",
+				icon: /* @__PURE__ */ E(w, { className: "h-10 w-10" }),
+				title: "No incidents reported",
+				description: p === "ALL" && x === "ALL" && B === "ALL" ? "Report a near-miss, injury, spill, release or equipment failure to start the investigation workflow." : "No incidents match these filters.",
+				action: /* @__PURE__ */ D(O, {
+					onClick: Te,
+					children: [/* @__PURE__ */ E(C, { className: "mr-1.5 h-4 w-4" }), " Report incident"]
+				})
+			}) : /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(a, {
+				columns: we,
+				rows: Q,
+				rowKey: (e) => e.id,
+				defaultSort: {
+					key: "occurred",
+					dir: "desc"
+				}
+			}), /* @__PURE__ */ E(v, {
+				page: W.page,
+				pageSize: V,
+				itemCount: Q.length,
+				hasMore: X?.pageInfo?.hasMore ?? !1,
+				onPageChange: W.onPageChange
+			})] }),
+			/* @__PURE__ */ E(ie, {
+				open: fe,
+				onOpenChange: (e) => {
+					G(e), e || (q(U()), J(null));
+				},
+				children: /* @__PURE__ */ D(j, { children: [/* @__PURE__ */ D(se, { children: [/* @__PURE__ */ E(M, { children: "Report safety incident" }), /* @__PURE__ */ E(ae, { children: "Log a near-miss, injury, spill, release or equipment failure to open an investigation." })] }), /* @__PURE__ */ D("form", {
+					onSubmit: (e) => {
+						e.preventDefault(), Ee();
+					},
+					children: [/* @__PURE__ */ D("div", {
+						className: "grid gap-4 py-2",
+						children: [
+							/* @__PURE__ */ D("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ E(A, {
+									htmlFor: "incTitle",
+									children: "Title *"
+								}), /* @__PURE__ */ E(k, {
+									id: "incTitle",
+									value: K.title,
+									onChange: (e) => q({
+										...K,
+										title: e.target.value
+									}),
+									placeholder: "Valve leak on compressor C-102"
+								})]
+							}),
+							/* @__PURE__ */ D("div", {
+								className: "grid gap-2 sm:grid-cols-2",
+								children: [/* @__PURE__ */ D("div", {
+									className: "grid gap-1.5",
+									children: [/* @__PURE__ */ E(A, {
+										htmlFor: "incCategory",
+										children: "Category"
+									}), /* @__PURE__ */ D(N, {
+										value: K.category,
+										onValueChange: (e) => q({
+											...K,
+											category: e
+										}),
+										children: [/* @__PURE__ */ E(I, {
+											id: "incCategory",
+											children: /* @__PURE__ */ E(L, {})
+										}), /* @__PURE__ */ E(P, { children: le.map((e) => /* @__PURE__ */ E(F, {
+											value: e,
+											children: n(e)
+										}, e)) })]
+									})]
+								}), /* @__PURE__ */ D("div", {
+									className: "grid gap-1.5",
+									children: [/* @__PURE__ */ E(A, {
+										htmlFor: "incSeverity",
+										children: "Severity"
+									}), /* @__PURE__ */ D(N, {
+										value: K.severity,
+										onValueChange: (e) => q({
+											...K,
+											severity: e
+										}),
+										children: [/* @__PURE__ */ E(I, {
+											id: "incSeverity",
+											children: /* @__PURE__ */ E(L, {})
+										}), /* @__PURE__ */ E(P, { children: R.map((e) => /* @__PURE__ */ E(F, {
+											value: e,
+											children: n(e)
+										}, e)) })]
+									})]
+								})]
+							}),
+							/* @__PURE__ */ D("div", {
+								className: "grid gap-2 sm:grid-cols-2",
+								children: [/* @__PURE__ */ D("div", {
+									className: "grid gap-1.5",
+									children: [/* @__PURE__ */ E(A, {
+										htmlFor: "incOccurred",
+										children: "Occurred on *"
+									}), /* @__PURE__ */ E(k, {
+										id: "incOccurred",
+										type: "date",
+										value: K.occurredAt,
+										onChange: (e) => q({
+											...K,
+											occurredAt: e.target.value
+										})
+									})]
+								}), /* @__PURE__ */ D("div", {
+									className: "grid gap-1.5",
+									children: [/* @__PURE__ */ E(A, {
+										htmlFor: "incAsset",
+										children: "Asset"
+									}), /* @__PURE__ */ D(N, {
+										value: K.assetId,
+										onValueChange: (e) => q({
+											...K,
+											assetId: e
+										}),
+										children: [/* @__PURE__ */ E(I, {
+											id: "incAsset",
+											children: /* @__PURE__ */ E(L, { placeholder: "Optional — org-wide if unset" })
+										}), /* @__PURE__ */ E(P, { children: ye.map((e) => /* @__PURE__ */ E(F, {
+											value: e.id,
+											children: e.name
+										}, e.id)) })]
+									})]
+								})]
+							}),
+							/* @__PURE__ */ D("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ E(A, {
+									htmlFor: "incParties",
+									children: "Involved parties"
+								}), /* @__PURE__ */ E(k, {
+									id: "incParties",
+									value: K.involvedParties,
+									onChange: (e) => q({
+										...K,
+										involvedParties: e.target.value
+									}),
+									placeholder: "Contractor crew, operator on duty…"
+								})]
+							}),
+							/* @__PURE__ */ D("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ E(A, {
+									htmlFor: "incDescription",
+									children: "Description"
+								}), /* @__PURE__ */ E(ce, {
+									id: "incDescription",
+									rows: 3,
+									value: K.description,
+									onChange: (e) => q({
+										...K,
+										description: e.target.value
+									}),
+									placeholder: "What happened, where, and immediate response taken."
+								})]
+							}),
+							pe && /* @__PURE__ */ E("p", {
+								className: "text-sm text-status-error-text",
+								children: pe
+							})
+						]
+					}), /* @__PURE__ */ D(oe, { children: [/* @__PURE__ */ E(O, {
+						type: "button",
+						variant: "outline",
+						onClick: () => G(!1),
+						children: "Cancel"
+					}), /* @__PURE__ */ E(O, {
+						type: "submit",
+						disabled: Z.isPending,
+						children: Z.isPending ? "Reporting…" : "Report incident"
+					})] })]
+				})] })
+			}),
+			$ && /* @__PURE__ */ E(de, {
+				incident: $,
+				assetName: $.assetId ? ve[$.assetId] : void 0,
+				transitioning: ge === $.id,
+				onTransition: () => De($),
+				onClose: () => he(null)
+			})
+		]
+	});
+}
+function de({ incident: e, assetName: a, transitioning: o, onTransition: ee, onClose: s }) {
+	let c = ne(), d = z[e.status], [f, te] = b(e.investigationNotes ?? ""), [h, g] = b(!1), re = m(), _ = l(e.id), v = u(), y = p(), [w, T] = b(""), [N, P] = b(""), F = async () => {
+		g(!0);
+		try {
+			await re.mutateAsync({
+				id: e.id,
+				investigationNotes: f
+			}), c.success("Investigation notes saved");
+		} catch (e) {
+			c.fromError(e);
+		} finally {
+			g(!1);
+		}
+	}, I = async () => {
+		if (!w.trim()) {
+			c.error("Describe the corrective action first.");
+			return;
+		}
+		try {
+			await v.mutateAsync({
+				incidentId: e.id,
+				description: w.trim(),
+				dueDate: r(N) ?? null
+			}), c.success("Corrective action added"), T(""), P("");
+		} catch (e) {
+			c.fromError(e);
+		}
+	};
+	return /* @__PURE__ */ E(ie, {
+		open: !0,
+		onOpenChange: (e) => !e && s(),
+		children: /* @__PURE__ */ D(j, { children: [
+			/* @__PURE__ */ D(se, { children: [/* @__PURE__ */ E(M, { children: e.title }), /* @__PURE__ */ D(ae, { children: [
+				n(e.category),
+				" · ",
+				n(e.severity),
+				" · occurred",
+				" ",
+				t(e.occurredAt),
+				a ? ` · ${a}` : ""
+			] })] }),
+			/* @__PURE__ */ D("div", {
+				className: "grid gap-5 py-2",
+				children: [
+					/* @__PURE__ */ D("div", {
+						className: "flex items-center justify-between gap-3 rounded-lg border border-border-subtle bg-bg-sunken p-3",
+						children: [/* @__PURE__ */ D("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ E(i, { status: e.status }), e.closedAt && /* @__PURE__ */ D("span", {
+								className: "text-xs text-text-tertiary",
+								children: ["Closed ", t(e.closedAt)]
+							})]
+						}), d && /* @__PURE__ */ D(O, {
+							size: "sm",
+							variant: "outline",
+							onClick: ee,
+							disabled: o,
+							children: [
+								"Advance to ",
+								n(d),
+								/* @__PURE__ */ E(x, { className: "ml-1.5 h-3.5 w-3.5" })
+							]
+						})]
+					}),
+					e.description && /* @__PURE__ */ E("p", {
+						className: "text-sm text-text-secondary",
+						children: e.description
+					}),
+					/* @__PURE__ */ D("div", {
+						className: "grid gap-1.5",
+						children: [
+							/* @__PURE__ */ E(A, {
+								htmlFor: "incNotes",
+								children: "Investigation notes"
+							}),
+							/* @__PURE__ */ E(ce, {
+								id: "incNotes",
+								rows: 3,
+								value: f,
+								onChange: (e) => te(e.target.value),
+								placeholder: "Root-cause findings, witness statements, evidence references…"
+							}),
+							/* @__PURE__ */ E("div", {
+								className: "flex justify-end",
+								children: /* @__PURE__ */ E(O, {
+									size: "sm",
+									variant: "outline",
+									onClick: () => void F(),
+									disabled: h || f === (e.investigationNotes ?? ""),
+									children: h ? "Saving…" : "Save notes"
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ D("div", {
+						className: "grid gap-2",
+						children: [
+							/* @__PURE__ */ D("h4", {
+								className: "inline-flex items-center gap-1.5 text-sm font-semibold text-text-secondary",
+								children: [/* @__PURE__ */ E(S, { className: "h-4 w-4" }), " Corrective & preventive actions"]
+							}),
+							_.isLoading ? /* @__PURE__ */ E("p", {
+								className: "text-sm text-text-tertiary",
+								children: "Loading actions…"
+							}) : (_.data?.items ?? []).length === 0 ? /* @__PURE__ */ E("p", {
+								className: "text-sm text-text-tertiary",
+								children: "No corrective actions yet."
+							}) : /* @__PURE__ */ E("ul", {
+								className: "space-y-2",
+								children: (_.data?.items ?? []).map((e) => {
+									let r = B[e.status];
+									return /* @__PURE__ */ D("li", {
+										className: "flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border-subtle p-3",
+										children: [/* @__PURE__ */ D("div", {
+											className: "min-w-0 flex-1",
+											children: [/* @__PURE__ */ E("p", {
+												className: "truncate text-sm text-text-primary",
+												children: e.description
+											}), /* @__PURE__ */ E("p", {
+												className: "text-xs text-text-tertiary",
+												children: e.dueDate ? `Due ${t(e.dueDate)}` : "No due date"
+											})]
+										}), /* @__PURE__ */ D("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ E(i, { status: e.status }), r && /* @__PURE__ */ E(O, {
+												size: "sm",
+												variant: "outline",
+												onClick: () => y.mutate({
+													id: e.id,
+													status: r
+												}, {
+													onSuccess: () => c.success(`Action moved to ${n(r)}`),
+													onError: (e) => c.fromError(e)
+												}),
+												children: n(r)
+											})]
+										})]
+									}, e.id);
+								})
+							}),
+							/* @__PURE__ */ D("div", {
+								className: "grid gap-2 rounded-lg border border-border-subtle bg-bg-sunken p-3 sm:grid-cols-[1fr_auto_auto]",
+								children: [
+									/* @__PURE__ */ E(k, {
+										value: w,
+										onChange: (e) => T(e.target.value),
+										placeholder: "New corrective / preventive action…",
+										"aria-label": "New corrective action description"
+									}),
+									/* @__PURE__ */ E(k, {
+										type: "date",
+										value: N,
+										onChange: (e) => P(e.target.value),
+										"aria-label": "New corrective action due date"
+									}),
+									/* @__PURE__ */ D(O, {
+										size: "sm",
+										onClick: () => void I(),
+										disabled: v.isPending,
+										children: [/* @__PURE__ */ E(C, { className: "mr-1 h-4 w-4" }), " Add"]
+									})
+								]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ E(oe, { children: /* @__PURE__ */ E(O, {
+				type: "button",
+				variant: "outline",
+				onClick: s,
+				children: "Close"
+			}) })
+		] })
+	});
+}
+//#endregion
+export { W as IncidentsPage };
+
+//# sourceMappingURL=IncidentsPage.js.map