@burdenoff/microfe-movethewheels 2026.1031.3 → 2026.1031.4

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -57,7 +57,7 @@ import { useRefetchOnLeaveEdit } from '../hooks/useRefetchOnLeaveEdit';
 import { AssignmentSuggestions } from '../components/AssignmentSuggestions';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { formatDate, formatAddress, formatCurrency } from '../utils/formatters';
+import { formatDate, formatAddress, formatCurrency, formatDistance } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { ROUTE_STATUS_COLORS } from '../constants';
 import { FormError } from '../components/FormError';
@@ -526,7 +526,7 @@ export default function RouteDetailsPage() {
   return (
     <PageLayout
       title={route.name}
-      subtitle={`${route.stops.length} stops - ${route.distance.toFixed(1)} km`}
+      subtitle={`${route.stops.length} stops - ${formatDistance(route.distance)}`}
       icon={<Navigation size={24} />}
       headerActions={
         <div className="flex gap-2">
@@ -720,10 +720,7 @@ export default function RouteDetailsPage() {
             <h2 className="text-base font-semibold text-text-primary">Route Info</h2>
             <div>
               <p className="text-sm text-text-secondary">Total Distance</p>
-              <p className="text-2xl font-bold">
-                {route.distance.toFixed(1)}
-                <span className="text-sm font-normal"> km</span>
-              </p>
+              <p className="text-2xl font-bold">{formatDistance(route.distance)}</p>
             </div>
             <div>
               <p className="text-sm text-text-secondary">Est. Duration</p>

package/src/movethewheels/pages/RoutesPage.tsx

@@ -22,7 +22,7 @@ import { CTAOverflowMenu, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/
 import { useRoutes, useRouteStats } from '../hooks/useRoutes';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { formatDate } from '../utils/formatters';
+import { formatDate, formatDistance } from '../utils/formatters';
 import { joinPath } from '../utils/navigation';
 import { ROUTE_STATUS_COLORS } from '../constants';
 import type { Route } from '../types';
@@ -81,7 +81,7 @@ export default function RoutesPage() {
       header: 'Distance',
       accessorKey: 'distance',
       sortable: true,
-      cell: (row) => `${row.distance.toFixed(1)} km`,
+      cell: (row) => formatDistance(row.distance),
     },
     { id: 'duration', header: 'Est. Duration', cell: (row) => `${row.estimatedDuration} min` },
     {

package/src/movethewheels/pages/SettingsPage.tsx

@@ -0,0 +1,516 @@
+/**
+ * Settings Page (BOFF-10488)
+ *
+ * The workspace's MoveTheWheels operational defaults: the currency amounts are
+ * shown in, distance and weight units, the time zone dates are shown in, and
+ * the priority and delivery window new orders start from. Saving applies them
+ * to every MoveTheWheels screen straight away.
+ *
+ * Company profile, notifications, two-factor authentication and integrations
+ * are platform settings; this page links to them instead of duplicating them.
+ */
+import { useEffect, useMemo, useState, type ChangeEvent, type FormEvent } from 'react';
+import {
+  Bell,
+  Building2,
+  ExternalLink,
+  KeyRound,
+  Loader2,
+  Plug,
+  RotateCcw,
+  Save,
+  Settings,
+} from 'lucide-react';
+import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
+import { PermissionProvider, usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';
+import { PageLayout } from '../components/PageLayout';
+import { FormError } from '../components/FormError';
+import { Notice, useNotice } from '../components/Notice';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+} from '../components/ui';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useModuleSettings } from '../providers/ModuleSettingsProvider';
+import { formatCurrency, formatDateTime, formatDistance, formatWeight } from '../utils/formatters';
+import {
+  DELIVERY_WINDOW_MAX_HOURS,
+  DELIVERY_WINDOW_MIN_HOURS,
+  DISTANCE_UNIT_OPTIONS,
+  ORDER_PRIORITY_OPTIONS,
+  WEIGHT_UNIT_OPTIONS,
+  browserTimeZone,
+  changedSettings,
+  currencyLabel,
+  currencyOptions,
+  deliveryWindowError,
+  timeZoneOptions,
+  type MtwDistanceUnit,
+  type MtwModuleSettings,
+  type MtwOrderPriority,
+  type MtwWeightUnit,
+} from '../utils/moduleSettings';
+
+/** Select value standing for "no workspace time zone". */
+const LOCAL_TIME = '__viewer_local__';
+
+interface Draft {
+  defaultCurrency: string;
+  distanceUnit: MtwDistanceUnit;
+  weightUnit: MtwWeightUnit;
+  timezone: string;
+  defaultOrderPriority: MtwOrderPriority;
+  defaultDeliveryWindowHours: string;
+}
+
+function toDraft(settings: MtwModuleSettings): Draft {
+  return {
+    defaultCurrency: settings.defaultCurrency,
+    distanceUnit: settings.distanceUnit,
+    weightUnit: settings.weightUnit,
+    timezone: settings.timezone ?? LOCAL_TIME,
+    defaultOrderPriority: settings.defaultOrderPriority,
+    defaultDeliveryWindowHours: String(settings.defaultDeliveryWindowHours),
+  };
+}
+
+const PLATFORM_LINKS = [
+  {
+    id: 'company',
+    title: 'Company profile',
+    description: 'Organization name, address and workspace details',
+    path: '/organizations',
+    icon: Building2,
+  },
+  {
+    id: 'notifications',
+    title: 'Notification preferences',
+    description: 'Which alerts you receive and where',
+    path: '/notifications/preferences',
+    icon: Bell,
+  },
+  {
+    id: 'mfa',
+    title: 'Two-factor authentication',
+    description: 'Protect your sign-in with a second factor',
+    path: '/auth/mfa',
+    icon: KeyRound,
+  },
+  {
+    id: 'integrations',
+    title: 'Integrations',
+    description: 'Carrier, ERP and telematics connections',
+    path: '/integrations/overview',
+    icon: Plug,
+  },
+] as const;
+
+export default function SettingsPage() {
+  const { workspaceId } = useMoveTheWheels();
+  return (
+    <PermissionProvider scopeId={workspaceId ?? null} gateway="workspace">
+      <SettingsWorkbench />
+    </PermissionProvider>
+  );
+}
+
+function SettingsWorkbench() {
+  const { navigate, workspaceId, currentUser } = useMoveTheWheels();
+  const { settings, isLoaded, error: loadError, save, reload } = useModuleSettings();
+  const permissions = usePermissions();
+  const [draft, setDraft] = useState<Draft>(() => toDraft(settings));
+  const [isSaving, setIsSaving] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+  const { message: notice, notify: showNotice } = useNotice();
+
+  // Re-seed the form whenever the saved settings change (first load, save).
+  useEffect(() => {
+    setDraft(toDraft(settings));
+  }, [settings]);
+
+  const permissionsReady = Boolean(
+    workspaceId &&
+    currentUser?.id &&
+    permissions.scopeId === workspaceId &&
+    !permissions.isLoading &&
+    !permissions.error
+  );
+  // Only lock the form when the effective permissions positively say no; the
+  // service enforces mtw-settings:update either way.
+  const readOnly =
+    permissionsReady &&
+    !permissions.isSuperAdmin &&
+    !permissions.hasPermission('mtw-settings:update');
+
+  const windowError = deliveryWindowError(draft.defaultDeliveryWindowHours);
+  const changes = useMemo(
+    () =>
+      changedSettings(settings, {
+        defaultCurrency: draft.defaultCurrency,
+        distanceUnit: draft.distanceUnit,
+        weightUnit: draft.weightUnit,
+        timezone: draft.timezone === LOCAL_TIME ? null : draft.timezone,
+        defaultOrderPriority: draft.defaultOrderPriority,
+        defaultDeliveryWindowHours: windowError
+          ? undefined
+          : Number(draft.defaultDeliveryWindowHours),
+      }),
+    [settings, draft, windowError]
+  );
+  const isDirty = Object.keys(changes).length > 0;
+  const canSave = isLoaded && !readOnly && !isSaving && isDirty && !windowError;
+
+  const currencies = useMemo(() => currencyOptions(draft.defaultCurrency), [draft.defaultCurrency]);
+  const zones = useMemo(() => timeZoneOptions(settings.timezone), [settings.timezone]);
+  const localZone = useMemo(() => browserTimeZone(), []);
+
+  const update = <K extends keyof Draft>(key: K, value: Draft[K]) => {
+    setFormError(null);
+    setDraft((previous) => ({ ...previous, [key]: value }));
+  };
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!canSave) return;
+    setIsSaving(true);
+    setFormError(null);
+    try {
+      await save(changes);
+      showNotice('Settings saved. MoveTheWheels now uses these defaults everywhere.');
+    } catch (caught) {
+      setFormError(caught instanceof Error ? caught.message : 'Could not save the settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Live preview of what the saved settings will look like.
+  const previewSample = new Date('2026-03-14T15:30:00Z');
+
+  return (
+    <PageLayout
+      title="Settings"
+      subtitle="Workspace defaults for currency, units, time zone and new orders"
+      icon={<Settings size={24} />}
+      maxWidth="xl"
+    >
+      <PagePurpose icon={<Settings size={18} />}>
+        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.
+      </PagePurpose>
+
+      {loadError && (
+        <FormError
+          message={`Could not load this workspace's settings (${loadError.message}). Showing the platform defaults.`}
+        />
+      )}
+      <Notice message={notice} />
+
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
+        <EmphasisPanel className="space-y-6 xl:col-span-2">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <h2 className="text-base font-semibold text-text-primary">Operational defaults</h2>
+            {isLoaded && (
+              <Badge variant={settings.isCustomized ? 'default' : 'outline'}>
+                {settings.isCustomized ? 'Customized for this workspace' : 'Platform defaults'}
+              </Badge>
+            )}
+          </div>
+
+          {!isLoaded ? (
+            <div className="space-y-4" aria-busy="true">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ) : (
+            <form
+              className="space-y-6"
+              onSubmit={(event) => void onSubmit(event)}
+              aria-label="MoveTheWheels settings"
+            >
+              {readOnly && (
+                <p className="rounded-lg border border-border-default bg-surface-secondary px-4 py-3 text-sm text-text-secondary">
+                  You can view these settings. Ask a workspace admin or the Logistics Director to
+                  change them.
+                </p>
+              )}
+
+              <fieldset className="space-y-4" disabled={readOnly || isSaving}>
+                <legend className="text-sm font-semibold text-text-primary">Display</legend>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div className="min-w-0 space-y-2">
+                    <Label htmlFor="mtw-settings-currency">Default currency</Label>
+                    <Select
+                      value={draft.defaultCurrency}
+                      onValueChange={(value: string) => update('defaultCurrency', value)}
+                      disabled={readOnly || isSaving}
+                    >
+                      <SelectTrigger id="mtw-settings-currency" aria-label="Default currency">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent className="max-h-72">
+                        {currencies.map((code) => (
+                          <SelectItem key={code} value={code}>
+                            {currencyLabel(code)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-xs text-text-secondary">
+                      Used for order totals, revenue and costs that have no currency of their own.
+                    </p>
+                  </div>
+
+                  <div className="min-w-0 space-y-2">
+                    <Label htmlFor="mtw-settings-timezone">Time zone</Label>
+                    <Select
+                      value={draft.timezone}
+                      onValueChange={(value: string) => update('timezone', value)}
+                      disabled={readOnly || isSaving}
+                    >
+                      <SelectTrigger id="mtw-settings-timezone" aria-label="Time zone">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent className="max-h-72">
+                        <SelectItem value={LOCAL_TIME}>
+                          {`Each viewer's local time (yours: ${localZone})`}
+                        </SelectItem>
+                        {zones.map((name) => (
+                          <SelectItem key={name} value={name}>
+                            {name.replace(/_/g, ' ')}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-xs text-text-secondary">
+                      Dates and times on every MoveTheWheels screen are shown in this zone.
+                    </p>
+                  </div>
+
+                  <div className="min-w-0 space-y-2">
+                    <Label htmlFor="mtw-settings-distance">Distance unit</Label>
+                    <Select
+                      value={draft.distanceUnit}
+                      onValueChange={(value: string) => {
+                        const unit = DISTANCE_UNIT_OPTIONS.find((option) => option.value === value);
+                        if (unit) update('distanceUnit', unit.value);
+                      }}
+                      disabled={readOnly || isSaving}
+                    >
+                      <SelectTrigger id="mtw-settings-distance" aria-label="Distance unit">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {DISTANCE_UNIT_OPTIONS.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="min-w-0 space-y-2">
+                    <Label htmlFor="mtw-settings-weight">Weight unit</Label>
+                    <Select
+                      value={draft.weightUnit}
+                      onValueChange={(value: string) => {
+                        const unit = WEIGHT_UNIT_OPTIONS.find((option) => option.value === value);
+                        if (unit) update('weightUnit', unit.value);
+                      }}
+                      disabled={readOnly || isSaving}
+                    >
+                      <SelectTrigger id="mtw-settings-weight" aria-label="Weight unit">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {WEIGHT_UNIT_OPTIONS.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </fieldset>
+
+              <fieldset className="space-y-4" disabled={readOnly || isSaving}>
+                <legend className="text-sm font-semibold text-text-primary">New orders</legend>
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                  <div className="min-w-0 space-y-2">
+                    <Label htmlFor="mtw-settings-priority">Default priority</Label>
+                    <Select
+                      value={draft.defaultOrderPriority}
+                      onValueChange={(value: string) => {
+                        const priority = ORDER_PRIORITY_OPTIONS.find(
+                          (option) => option.value === value
+                        );
+                        if (priority) update('defaultOrderPriority', priority.value);
+                      }}
+                      disabled={readOnly || isSaving}
+                    >
+                      <SelectTrigger id="mtw-settings-priority" aria-label="Default priority">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {ORDER_PRIORITY_OPTIONS.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-xs text-text-secondary">
+                      New orders start with this priority.
+                    </p>
+                  </div>
+
+                  <div className="min-w-0 space-y-2">
+                    <Label htmlFor="mtw-settings-window">Default delivery window (hours)</Label>
+                    <Input
+                      id="mtw-settings-window"
+                      type="number"
+                      inputMode="numeric"
+                      min={DELIVERY_WINDOW_MIN_HOURS}
+                      max={DELIVERY_WINDOW_MAX_HOURS}
+                      step={1}
+                      value={draft.defaultDeliveryWindowHours}
+                      aria-invalid={windowError ? true : undefined}
+                      aria-describedby="mtw-settings-window-help"
+                      onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                        update('defaultDeliveryWindowHours', event.target.value)
+                      }
+                    />
+                    <p
+                      id="mtw-settings-window-help"
+                      className={
+                        windowError
+                          ? 'text-xs text-status-error-text'
+                          : 'text-xs text-text-secondary'
+                      }
+                    >
+                      {windowError ??
+                        'The order form suggests a scheduled delivery this many hours ahead.'}
+                    </p>
+                  </div>
+                </div>
+              </fieldset>
+
+              <FormError message={formError} />
+
+              <div className="flex flex-wrap items-center justify-end gap-3">
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={!isDirty || isSaving}
+                  onClick={() => {
+                    setFormError(null);
+                    setDraft(toDraft(settings));
+                  }}
+                >
+                  <RotateCcw size={16} className="mr-2" /> Discard changes
+                </Button>
+                <Button type="submit" disabled={!canSave}>
+                  {isSaving ? (
+                    <Loader2 size={16} className="mr-2 animate-spin" />
+                  ) : (
+                    <Save size={16} className="mr-2" />
+                  )}
+                  Save settings
+                </Button>
+              </div>
+            </form>
+          )}
+        </EmphasisPanel>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">How it looks now</CardTitle>
+              <CardDescription>Examples using the saved settings.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <dl className="space-y-2 text-sm" data-testid="mtw-settings-preview">
+                <div className="flex justify-between gap-4">
+                  <dt className="text-text-secondary">Amount</dt>
+                  <dd className="font-medium text-text-primary">{formatCurrency(1234.5)}</dd>
+                </div>
+                <div className="flex justify-between gap-4">
+                  <dt className="text-text-secondary">Distance</dt>
+                  <dd className="font-medium text-text-primary">{formatDistance(42.2)}</dd>
+                </div>
+                <div className="flex justify-between gap-4">
+                  <dt className="text-text-secondary">Weight</dt>
+                  <dd className="font-medium text-text-primary">{formatWeight(750)}</dd>
+                </div>
+                <div className="flex justify-between gap-4">
+                  <dt className="text-text-secondary">Date and time</dt>
+                  <dd className="text-right font-medium text-text-primary">
+                    {formatDateTime(previewSample)}
+                  </dd>
+                </div>
+              </dl>
+              {settings.updatedAt && (
+                <p className="mt-4 text-xs text-text-secondary">
+                  Last saved {formatDateTime(settings.updatedAt)}
+                </p>
+              )}
+              {loadError && (
+                <Button variant="outline" size="sm" className="mt-4" onClick={reload}>
+                  Try loading again
+                </Button>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Other settings</CardTitle>
+              <CardDescription>
+                These are managed by the platform for every product.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {PLATFORM_LINKS.map((link) => {
+                const Icon = link.icon;
+                return (
+                  <button
+                    key={link.id}
+                    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={() => navigate(link.path)}
+                  >
+                    <Icon size={18} className="mt-0.5 shrink-0 text-text-secondary" />
+                    <span className="min-w-0 flex-1">
+                      <span className="block text-sm font-medium text-text-primary">
+                        {link.title}
+                      </span>
+                      <span className="block text-xs text-text-secondary">{link.description}</span>
+                    </span>
+                    <ExternalLink size={14} className="mt-1 shrink-0 text-text-tertiary" />
+                  </button>
+                );
+              })}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/VehicleDetailsPage.tsx

@@ -53,7 +53,7 @@ import { useRecordVehicleService } from '../hooks/useFleetIntelligence';
 import { useRefetchOnLeaveEdit } from '../hooks/useRefetchOnLeaveEdit';
 import { VehicleServiceCard } from '../components/VehicleServiceCard';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { formatDate, getInitials } from '../utils/formatters';
+import { formatDate, formatWeight, getInitials } from '../utils/formatters';
 import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';
 import { joinPath } from '../utils/navigation';
 import { FormError } from '../components/FormError';
@@ -614,7 +614,9 @@ export default function VehicleDetailsPage() {
                 <div>
                   <p className="text-sm text-text-secondary">Weight</p>
                   <p className="text-2xl font-bold">
-                    {vehicle.capacity.weight !== undefined ? `${vehicle.capacity.weight} kg` : '—'}
+                    {vehicle.capacity.weight !== undefined
+                      ? formatWeight(vehicle.capacity.weight)
+                      : '—'}
                   </p>
                 </div>
                 <div>

package/src/movethewheels/pages/VehiclesPage.tsx

@@ -38,6 +38,7 @@ import { useEntityExport } from '../hooks/useEntityExport';
 import { ExportStatusBanner } from '../components/ExportStatusBanner';
 import { VEHICLE_STATUS_LABELS } from '../constants';
 import type { Vehicle, VehicleStatus } from '../types';
+import { formatWeight } from '../utils/formatters';
 
 const STATUS_OPTIONS: Array<{ value: VehicleStatus | 'all'; label: string }> = [
   { value: 'all', label: 'All statuses' },
@@ -121,7 +122,7 @@ export default function VehiclesPage() {
       header: 'Capacity',
       cell: (row) => (
         <div className="text-sm">
-          <p>{row.capacity.weight !== undefined ? `${row.capacity.weight} kg` : '—'}</p>
+          <p>{row.capacity.weight !== undefined ? formatWeight(row.capacity.weight) : '—'}</p>
           <p className="text-text-secondary">
             {row.capacity.volume !== undefined ? `${row.capacity.volume} m³` : '—'}
           </p>