@burdenoff/microfe-movethewheels 2026.1101.4 → 2026.1102.2

package/src/movethewheels/pages/FreightInvoicePage.tsx

@@ -8,6 +8,9 @@ import { PinnedSelect, ReusePager, ReuseState, reuseCard } from '../components/R
 import { FreightText } from '../components/freight-cost/FreightFields';
 import { InvoiceForm } from '../components/freight-invoice/InvoiceForm';
 import { InvoiceHistoryRecord } from '../components/freight-invoice/InvoiceResults';
+import { InvoiceReviewPanel } from '../components/freight-invoice/InvoiceReviewPanel';
+import { InvoiceReviewQueue } from '../components/freight-invoice/InvoiceReviewQueue';
+import { useInvoiceReviewPermissions } from '../hooks/useInvoiceReviewPermissions';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 import { useShipmentPermissions } from '../hooks/useShipmentPermissions';
 import { useConditionApi, useConditionQuery } from '../hooks/useContainerCondition';
@@ -29,6 +32,7 @@ import {
   type InvoiceComparisonExactQuery,
   type InvoiceReceiptFragment,
   type InvoiceStructuralPreviewQuery,
+  type InvoiceReviewFragment,
 } from '../../generated/freight-invoice-operations';
 import {
   sameInvoiceScope,
@@ -83,6 +87,8 @@ function InvoiceWorkbench({
   actions: ReturnType<typeof useInvoiceComparisonRecovery>;
 }) {
   const request = useConditionApi(),
+    reviewAccess = useInvoiceReviewPermissions(),
+    [reviewRevision, setReviewRevision] = useState(0),
     [params, setParams] = useSearchParams();
   const [shipment, setShipment] = useState(
       () => params.get('invoiceShipment')?.slice(0, 255) ?? ''
@@ -155,6 +161,27 @@ function InvoiceWorkbench({
       { replace: true }
     );
   };
+  const openReview = (row: InvoiceReviewFragment) => {
+    setShipment(row.shipmentId);
+    setEstimateId('');
+    setEstimateOffset(0);
+    setKnown(null);
+    setSelectedId(row.comparisonId);
+    setIdentity(row.invoiceIdentityId);
+    setIdentityEntry(row.invoiceIdentityId);
+    setHistoryOffset(0);
+    setStarted(false);
+    setCorrection(null);
+    setParams(
+      (previous) => {
+        const next = new URLSearchParams(previous);
+        next.set('invoiceShipment', row.shipmentId);
+        next.set('invoiceIdentity', row.invoiceIdentityId);
+        return next;
+      },
+      { replace: true }
+    );
+  };
   const options =
     shipments.data?.shipments.map((s) => ({
       id: s.id,
@@ -175,9 +202,10 @@ function InvoiceWorkbench({
   return (
     <div className="min-w-0 space-y-6 break-words">
       <p className="rounded border p-4 text-sm">
-        Record only what the supplier source reports. Unknown is not zero. This comparison
-        establishes no quote acceptance, liability, invoice approval or payment. Corrections append
-        a new immutable revision.
+        Record only what the supplier source reports. Unknown is not zero. Recording a comparison
+        does not approve it: someone other than its author accepts or disputes each revision, and
+        only an accepted invoice is handed to Billing for settlement. Corrections append a new
+        immutable revision.
       </p>
       {actions.uncertain && (
         <InvoiceRequestRecovery
@@ -197,6 +225,13 @@ function InvoiceWorkbench({
       )}
       {enabled && (
         <>
+          {reviewAccess.canRead && (
+            <InvoiceReviewQueue
+              revision={reviewRevision + actions.revision}
+              onOpen={openReview}
+              locked={paused || started}
+            />
+          )}
           <section className={reuseCard}>
             <h2 className="text-lg font-semibold">Choose the exact recorded estimate</h2>
             <PinnedSelect
@@ -401,6 +436,12 @@ function InvoiceWorkbench({
           {record && record.shipmentId === shipment && (
             <>
               <InvoiceHistoryRecord record={record} />
+              <InvoiceReviewPanel
+                key={`${record.id}:${actions.revision}`}
+                record={record}
+                permissions={reviewAccess}
+                onChanged={() => setReviewRevision((n) => n + 1)}
+              />
               <Button
                 type="button"
                 disabled={

package/src/movethewheels/pages/SettingsPage.tsx

@@ -6,8 +6,12 @@
  * 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.
+ * It also holds the customer delivery notification settings (BOFF-4402): whether
+ * and how the workspace tells its customers about their shipments.
+ *
+ * Company profile, your own notification preferences, 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 {
@@ -23,6 +27,7 @@ import {
 } from 'lucide-react';
 import { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';
 import { PermissionProvider, usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';
+import { CustomerNotificationSettingsCard } from '../components/CustomerNotificationSettingsCard';
 import { PageLayout } from '../components/PageLayout';
 import { FormError } from '../components/FormError';
 import { Notice, useNotice } from '../components/Notice';
@@ -204,7 +209,7 @@ function SettingsWorkbench() {
   return (
     <PageLayout
       title="Settings"
-      subtitle="Workspace defaults for currency, units, time zone and new orders"
+      subtitle="Workspace defaults, new-order defaults and customer delivery notifications"
       icon={<Settings size={24} />}
       maxWidth="xl"
     >
@@ -222,223 +227,231 @@ function SettingsWorkbench() {
       <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>
+        <div className="min-w-0 space-y-6 xl:col-span-2">
+          <EmphasisPanel className="space-y-6">
+            <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>
 
-              <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>
+            {!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>
+                )}
 
-                  <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>
+                <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-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}
+                    <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>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
+                          {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-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>
+                    <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>
 
-              <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 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 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>
-                </div>
-              </fieldset>
+                </fieldset>
 
-              <FormError message={formError} />
+                <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="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>
+
+          {/* Keyed by workspace: a workspace switch remounts the card, so no
+              settings, draft or log from the previous workspace survive it. */}
+          <CustomerNotificationSettingsCard key={workspaceId ?? 'none'} readOnly={readOnly} />
+        </div>
 
         <div className="space-y-6">
           <Card>

package/src/movethewheels/types/index.ts

@@ -180,6 +180,10 @@ export interface Customer {
   businessLicense?: string;
   taxId?: string;
   rating?: number;
+  /** Delivery notifications by email (BOFF-4402). */
+  notifyByEmail: boolean;
+  /** Delivery notifications by SMS; needs a phone number with its country code. */
+  notifyBySms: boolean;
   createdAt: Date;
   updatedAt: Date;
 }