@burdenoff/microfe-movethewheels 2026.1031.3 → 2026.1031.4

package/dist/pages/SettingsPage.js

@@ -0,0 +1,459 @@
+import { Bell as e } from "../node_modules/lucide-react/dist/esm/icons/bell.js";
+import { Building2 as t } from "../node_modules/lucide-react/dist/esm/icons/building-2.js";
+import { ExternalLink as n } from "../node_modules/lucide-react/dist/esm/icons/external-link.js";
+import { KeyRound as r } from "../node_modules/lucide-react/dist/esm/icons/key-round.js";
+import { LoaderCircle as ee } from "../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import { Plug as i } from "../node_modules/lucide-react/dist/esm/icons/plug.js";
+import { RotateCcw as a } from "../node_modules/lucide-react/dist/esm/icons/rotate-ccw.js";
+import { Save as te } from "../node_modules/lucide-react/dist/esm/icons/save.js";
+import { Settings as o } from "../node_modules/lucide-react/dist/esm/icons/settings.js";
+import { useMoveTheWheels as s } from "../providers/MoveTheWheelsProvider.js";
+import { formatCurrency as c, formatDateTime as l, formatDistance as ne, formatWeight as re } from "../utils/formatters.js";
+import { DISTANCE_UNIT_OPTIONS as u, ORDER_PRIORITY_OPTIONS as d, WEIGHT_UNIT_OPTIONS as f, browserTimeZone as p, changedSettings as m, currencyLabel as h, currencyOptions as ie, deliveryWindowError as ae, timeZoneOptions as oe } from "../utils/moduleSettings.js";
+import { useModuleSettings as se } from "../providers/ModuleSettingsProvider.js";
+import { Badge as ce, Button as g, Card as _, CardContent as v, CardDescription as y, CardHeader as b, CardTitle as x, Input as le, Label as S, Select as C, SelectContent as w, SelectItem as T, SelectTrigger as E, SelectValue as D, Skeleton as O } from "../components/ui.js";
+import { PageLayout as ue } from "../components/PageLayout.js";
+import { FormError as k } from "../components/FormError.js";
+import { Notice as de, useNotice as fe } from "../components/Notice.js";
+import { useEffect as pe, useMemo as A, useState as j } from "react";
+import { jsx as M, jsxs as N } from "react/jsx-runtime";
+import { EmphasisPanel as P, PagePurpose as F } from "@burdenoff/fe-libs/ui";
+import { PermissionProvider as I, usePermissions as L } from "@burdenoff/fe-libs/shared/providers/shell";
+//#region src/movethewheels/pages/SettingsPage.tsx
+var R = "__viewer_local__";
+function z(e) {
+	return {
+		defaultCurrency: e.defaultCurrency,
+		distanceUnit: e.distanceUnit,
+		weightUnit: e.weightUnit,
+		timezone: e.timezone ?? R,
+		defaultOrderPriority: e.defaultOrderPriority,
+		defaultDeliveryWindowHours: String(e.defaultDeliveryWindowHours)
+	};
+}
+var me = [
+	{
+		id: "company",
+		title: "Company profile",
+		description: "Organization name, address and workspace details",
+		path: "/organizations",
+		icon: t
+	},
+	{
+		id: "notifications",
+		title: "Notification preferences",
+		description: "Which alerts you receive and where",
+		path: "/notifications/preferences",
+		icon: e
+	},
+	{
+		id: "mfa",
+		title: "Two-factor authentication",
+		description: "Protect your sign-in with a second factor",
+		path: "/auth/mfa",
+		icon: r
+	},
+	{
+		id: "integrations",
+		title: "Integrations",
+		description: "Carrier, ERP and telematics connections",
+		path: "/integrations/overview",
+		icon: i
+	}
+];
+function B() {
+	let { workspaceId: e } = s();
+	return /* @__PURE__ */ M(I, {
+		scopeId: e ?? null,
+		gateway: "workspace",
+		children: /* @__PURE__ */ M(V, {})
+	});
+}
+function V() {
+	let { navigate: e, workspaceId: t, currentUser: r } = s(), { settings: i, isLoaded: I, error: B, save: V, reload: he } = se(), H = L(), [U, W] = j(() => z(i)), [G, K] = j(!1), [ge, q] = j(null), { message: _e, notify: ve } = fe();
+	pe(() => {
+		W(z(i));
+	}, [i]);
+	let J = !!(t && r?.id && H.scopeId === t && !H.isLoading && !H.error) && !H.isSuperAdmin && !H.hasPermission("mtw-settings:update"), Y = ae(U.defaultDeliveryWindowHours), X = A(() => m(i, {
+		defaultCurrency: U.defaultCurrency,
+		distanceUnit: U.distanceUnit,
+		weightUnit: U.weightUnit,
+		timezone: U.timezone === R ? null : U.timezone,
+		defaultOrderPriority: U.defaultOrderPriority,
+		defaultDeliveryWindowHours: Y ? void 0 : Number(U.defaultDeliveryWindowHours)
+	}), [
+		i,
+		U,
+		Y
+	]), Z = Object.keys(X).length > 0, Q = I && !J && !G && Z && !Y, ye = A(() => ie(U.defaultCurrency), [U.defaultCurrency]), be = A(() => oe(i.timezone), [i.timezone]), xe = A(() => p(), []), $ = (e, t) => {
+		q(null), W((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, Se = async (e) => {
+		if (e.preventDefault(), Q) {
+			K(!0), q(null);
+			try {
+				await V(X), ve("Settings saved. MoveTheWheels now uses these defaults everywhere.");
+			} catch (e) {
+				q(e instanceof Error ? e.message : "Could not save the settings");
+			} finally {
+				K(!1);
+			}
+		}
+	}, Ce = /* @__PURE__ */ new Date("2026-03-14T15:30:00Z");
+	return /* @__PURE__ */ N(ue, {
+		title: "Settings",
+		subtitle: "Workspace defaults for currency, units, time zone and new orders",
+		icon: /* @__PURE__ */ M(o, { size: 24 }),
+		maxWidth: "xl",
+		children: [
+			/* @__PURE__ */ M(F, {
+				icon: /* @__PURE__ */ M(o, { size: 18 }),
+				children: "Set how MoveTheWheels shows money, distances, weights and times for everyone in this workspace, and what new orders start with. Changes apply to every MoveTheWheels screen as soon as you save."
+			}),
+			B && /* @__PURE__ */ M(k, { message: `Could not load this workspace's settings (${B.message}). Showing the platform defaults.` }),
+			/* @__PURE__ */ M(de, { message: _e }),
+			/* @__PURE__ */ N("div", {
+				className: "grid grid-cols-1 gap-6 xl:grid-cols-3",
+				children: [/* @__PURE__ */ N(P, {
+					className: "space-y-6 xl:col-span-2",
+					children: [/* @__PURE__ */ N("div", {
+						className: "flex flex-wrap items-center justify-between gap-3",
+						children: [/* @__PURE__ */ M("h2", {
+							className: "text-base font-semibold text-text-primary",
+							children: "Operational defaults"
+						}), I && /* @__PURE__ */ M(ce, {
+							variant: i.isCustomized ? "default" : "outline",
+							children: i.isCustomized ? "Customized for this workspace" : "Platform defaults"
+						})]
+					}), I ? /* @__PURE__ */ N("form", {
+						className: "space-y-6",
+						onSubmit: (e) => void Se(e),
+						"aria-label": "MoveTheWheels settings",
+						children: [
+							J && /* @__PURE__ */ M("p", {
+								className: "rounded-lg border border-border-default bg-surface-secondary px-4 py-3 text-sm text-text-secondary",
+								children: "You can view these settings. Ask a workspace admin or the Logistics Director to change them."
+							}),
+							/* @__PURE__ */ N("fieldset", {
+								className: "space-y-4",
+								disabled: J || G,
+								children: [/* @__PURE__ */ M("legend", {
+									className: "text-sm font-semibold text-text-primary",
+									children: "Display"
+								}), /* @__PURE__ */ N("div", {
+									className: "grid grid-cols-1 gap-4 md:grid-cols-2",
+									children: [
+										/* @__PURE__ */ N("div", {
+											className: "min-w-0 space-y-2",
+											children: [
+												/* @__PURE__ */ M(S, {
+													htmlFor: "mtw-settings-currency",
+													children: "Default currency"
+												}),
+												/* @__PURE__ */ N(C, {
+													value: U.defaultCurrency,
+													onValueChange: (e) => $("defaultCurrency", e),
+													disabled: J || G,
+													children: [/* @__PURE__ */ M(E, {
+														id: "mtw-settings-currency",
+														"aria-label": "Default currency",
+														children: /* @__PURE__ */ M(D, {})
+													}), /* @__PURE__ */ M(w, {
+														className: "max-h-72",
+														children: ye.map((e) => /* @__PURE__ */ M(T, {
+															value: e,
+															children: h(e)
+														}, e))
+													})]
+												}),
+												/* @__PURE__ */ M("p", {
+													className: "text-xs text-text-secondary",
+													children: "Used for order totals, revenue and costs that have no currency of their own."
+												})
+											]
+										}),
+										/* @__PURE__ */ N("div", {
+											className: "min-w-0 space-y-2",
+											children: [
+												/* @__PURE__ */ M(S, {
+													htmlFor: "mtw-settings-timezone",
+													children: "Time zone"
+												}),
+												/* @__PURE__ */ N(C, {
+													value: U.timezone,
+													onValueChange: (e) => $("timezone", e),
+													disabled: J || G,
+													children: [/* @__PURE__ */ M(E, {
+														id: "mtw-settings-timezone",
+														"aria-label": "Time zone",
+														children: /* @__PURE__ */ M(D, {})
+													}), /* @__PURE__ */ N(w, {
+														className: "max-h-72",
+														children: [/* @__PURE__ */ M(T, {
+															value: R,
+															children: `Each viewer's local time (yours: ${xe})`
+														}), be.map((e) => /* @__PURE__ */ M(T, {
+															value: e,
+															children: e.replace(/_/g, " ")
+														}, e))]
+													})]
+												}),
+												/* @__PURE__ */ M("p", {
+													className: "text-xs text-text-secondary",
+													children: "Dates and times on every MoveTheWheels screen are shown in this zone."
+												})
+											]
+										}),
+										/* @__PURE__ */ N("div", {
+											className: "min-w-0 space-y-2",
+											children: [/* @__PURE__ */ M(S, {
+												htmlFor: "mtw-settings-distance",
+												children: "Distance unit"
+											}), /* @__PURE__ */ N(C, {
+												value: U.distanceUnit,
+												onValueChange: (e) => {
+													let t = u.find((t) => t.value === e);
+													t && $("distanceUnit", t.value);
+												},
+												disabled: J || G,
+												children: [/* @__PURE__ */ M(E, {
+													id: "mtw-settings-distance",
+													"aria-label": "Distance unit",
+													children: /* @__PURE__ */ M(D, {})
+												}), /* @__PURE__ */ M(w, { children: u.map((e) => /* @__PURE__ */ M(T, {
+													value: e.value,
+													children: e.label
+												}, e.value)) })]
+											})]
+										}),
+										/* @__PURE__ */ N("div", {
+											className: "min-w-0 space-y-2",
+											children: [/* @__PURE__ */ M(S, {
+												htmlFor: "mtw-settings-weight",
+												children: "Weight unit"
+											}), /* @__PURE__ */ N(C, {
+												value: U.weightUnit,
+												onValueChange: (e) => {
+													let t = f.find((t) => t.value === e);
+													t && $("weightUnit", t.value);
+												},
+												disabled: J || G,
+												children: [/* @__PURE__ */ M(E, {
+													id: "mtw-settings-weight",
+													"aria-label": "Weight unit",
+													children: /* @__PURE__ */ M(D, {})
+												}), /* @__PURE__ */ M(w, { children: f.map((e) => /* @__PURE__ */ M(T, {
+													value: e.value,
+													children: e.label
+												}, e.value)) })]
+											})]
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ N("fieldset", {
+								className: "space-y-4",
+								disabled: J || G,
+								children: [/* @__PURE__ */ M("legend", {
+									className: "text-sm font-semibold text-text-primary",
+									children: "New orders"
+								}), /* @__PURE__ */ N("div", {
+									className: "grid grid-cols-1 gap-4 md:grid-cols-2",
+									children: [/* @__PURE__ */ N("div", {
+										className: "min-w-0 space-y-2",
+										children: [
+											/* @__PURE__ */ M(S, {
+												htmlFor: "mtw-settings-priority",
+												children: "Default priority"
+											}),
+											/* @__PURE__ */ N(C, {
+												value: U.defaultOrderPriority,
+												onValueChange: (e) => {
+													let t = d.find((t) => t.value === e);
+													t && $("defaultOrderPriority", t.value);
+												},
+												disabled: J || G,
+												children: [/* @__PURE__ */ M(E, {
+													id: "mtw-settings-priority",
+													"aria-label": "Default priority",
+													children: /* @__PURE__ */ M(D, {})
+												}), /* @__PURE__ */ M(w, { children: d.map((e) => /* @__PURE__ */ M(T, {
+													value: e.value,
+													children: e.label
+												}, e.value)) })]
+											}),
+											/* @__PURE__ */ M("p", {
+												className: "text-xs text-text-secondary",
+												children: "New orders start with this priority."
+											})
+										]
+									}), /* @__PURE__ */ N("div", {
+										className: "min-w-0 space-y-2",
+										children: [
+											/* @__PURE__ */ M(S, {
+												htmlFor: "mtw-settings-window",
+												children: "Default delivery window (hours)"
+											}),
+											/* @__PURE__ */ M(le, {
+												id: "mtw-settings-window",
+												type: "number",
+												inputMode: "numeric",
+												min: 1,
+												max: 720,
+												step: 1,
+												value: U.defaultDeliveryWindowHours,
+												"aria-invalid": Y ? !0 : void 0,
+												"aria-describedby": "mtw-settings-window-help",
+												onChange: (e) => $("defaultDeliveryWindowHours", e.target.value)
+											}),
+											/* @__PURE__ */ M("p", {
+												id: "mtw-settings-window-help",
+												className: Y ? "text-xs text-status-error-text" : "text-xs text-text-secondary",
+												children: Y ?? "The order form suggests a scheduled delivery this many hours ahead."
+											})
+										]
+									})]
+								})]
+							}),
+							/* @__PURE__ */ M(k, { message: ge }),
+							/* @__PURE__ */ N("div", {
+								className: "flex flex-wrap items-center justify-end gap-3",
+								children: [/* @__PURE__ */ N(g, {
+									type: "button",
+									variant: "outline",
+									disabled: !Z || G,
+									onClick: () => {
+										q(null), W(z(i));
+									},
+									children: [/* @__PURE__ */ M(a, {
+										size: 16,
+										className: "mr-2"
+									}), " Discard changes"]
+								}), /* @__PURE__ */ N(g, {
+									type: "submit",
+									disabled: !Q,
+									children: [G ? /* @__PURE__ */ M(ee, {
+										size: 16,
+										className: "mr-2 animate-spin"
+									}) : /* @__PURE__ */ M(te, {
+										size: 16,
+										className: "mr-2"
+									}), "Save settings"]
+								})]
+							})
+						]
+					}) : /* @__PURE__ */ N("div", {
+						className: "space-y-4",
+						"aria-busy": "true",
+						children: [
+							/* @__PURE__ */ M(O, { className: "h-10 w-full" }),
+							/* @__PURE__ */ M(O, { className: "h-10 w-full" }),
+							/* @__PURE__ */ M(O, { className: "h-10 w-full" })
+						]
+					})]
+				}), /* @__PURE__ */ N("div", {
+					className: "space-y-6",
+					children: [/* @__PURE__ */ N(_, { children: [/* @__PURE__ */ N(b, { children: [/* @__PURE__ */ M(x, {
+						className: "text-base",
+						children: "How it looks now"
+					}), /* @__PURE__ */ M(y, { children: "Examples using the saved settings." })] }), /* @__PURE__ */ N(v, { children: [
+						/* @__PURE__ */ N("dl", {
+							className: "space-y-2 text-sm",
+							"data-testid": "mtw-settings-preview",
+							children: [
+								/* @__PURE__ */ N("div", {
+									className: "flex justify-between gap-4",
+									children: [/* @__PURE__ */ M("dt", {
+										className: "text-text-secondary",
+										children: "Amount"
+									}), /* @__PURE__ */ M("dd", {
+										className: "font-medium text-text-primary",
+										children: c(1234.5)
+									})]
+								}),
+								/* @__PURE__ */ N("div", {
+									className: "flex justify-between gap-4",
+									children: [/* @__PURE__ */ M("dt", {
+										className: "text-text-secondary",
+										children: "Distance"
+									}), /* @__PURE__ */ M("dd", {
+										className: "font-medium text-text-primary",
+										children: ne(42.2)
+									})]
+								}),
+								/* @__PURE__ */ N("div", {
+									className: "flex justify-between gap-4",
+									children: [/* @__PURE__ */ M("dt", {
+										className: "text-text-secondary",
+										children: "Weight"
+									}), /* @__PURE__ */ M("dd", {
+										className: "font-medium text-text-primary",
+										children: re(750)
+									})]
+								}),
+								/* @__PURE__ */ N("div", {
+									className: "flex justify-between gap-4",
+									children: [/* @__PURE__ */ M("dt", {
+										className: "text-text-secondary",
+										children: "Date and time"
+									}), /* @__PURE__ */ M("dd", {
+										className: "text-right font-medium text-text-primary",
+										children: l(Ce)
+									})]
+								})
+							]
+						}),
+						i.updatedAt && /* @__PURE__ */ N("p", {
+							className: "mt-4 text-xs text-text-secondary",
+							children: ["Last saved ", l(i.updatedAt)]
+						}),
+						B && /* @__PURE__ */ M(g, {
+							variant: "outline",
+							size: "sm",
+							className: "mt-4",
+							onClick: he,
+							children: "Try loading again"
+						})
+					] })] }), /* @__PURE__ */ N(_, { children: [/* @__PURE__ */ N(b, { children: [/* @__PURE__ */ M(x, {
+						className: "text-base",
+						children: "Other settings"
+					}), /* @__PURE__ */ M(y, { children: "These are managed by the platform for every product." })] }), /* @__PURE__ */ M(v, {
+						className: "space-y-2",
+						children: me.map((t) => {
+							let r = t.icon;
+							return /* @__PURE__ */ N("button", {
+								type: "button",
+								className: "flex w-full items-start gap-3 rounded-lg border border-border-default px-3 py-2 text-left transition-colors hover:bg-surface-secondary",
+								onClick: () => e(t.path),
+								children: [
+									/* @__PURE__ */ M(r, {
+										size: 18,
+										className: "mt-0.5 shrink-0 text-text-secondary"
+									}),
+									/* @__PURE__ */ N("span", {
+										className: "min-w-0 flex-1",
+										children: [/* @__PURE__ */ M("span", {
+											className: "block text-sm font-medium text-text-primary",
+											children: t.title
+										}), /* @__PURE__ */ M("span", {
+											className: "block text-xs text-text-secondary",
+											children: t.description
+										})]
+									}),
+									/* @__PURE__ */ M(n, {
+										size: 14,
+										className: "mt-1 shrink-0 text-text-tertiary"
+									})
+								]
+							}, t.id);
+						})
+					})] })]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { B as default };