@burdenoff/microfe-movethewheels 2026.1017.11 → 2026.1017.13

package/src/movethewheels/pages/PalletPreviewPage.tsx

@@ -0,0 +1,588 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import { Boxes } from 'lucide-react';
+import { FormSection } from '@burdenoff/fe-libs/form';
+import { OptionalFields } from '@burdenoff/fe-libs/ui';
+import {
+  Button,
+  Checkbox,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui';
+import { PageLayout } from '../components/PageLayout';
+import { PalletPreviewResults } from '../components/pallet-preview/PalletPreviewResults';
+import { useTr } from '../hooks';
+import { usePalletPreview } from '../hooks/usePalletPreview';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import {
+  newPalletPreviewDraft,
+  newPalletPackage,
+  palletPreviewInput,
+  PalletInputError,
+  type PalletPreviewDraft,
+  type SourceDraft,
+} from '../utils/palletPreviewInput';
+
+const fieldLabels = {
+  widthMm: 'Width (mm)',
+  lengthMm: 'Length (mm)',
+  heightMm: 'Height (mm)',
+  grossMassG: 'Gross mass per package (g)',
+  tareMassG: 'Pallet tare mass (g)',
+  maxPayloadMassG: 'Pallet payload rating (g)',
+  maxHeightMm: 'Reported maximum height (mm)',
+  maxGrossMassG: 'Gross mass rating (g)',
+  massG: 'Additional packing mass (g)',
+  perimeterMm: 'Perimeter clearance (mm)',
+  betweenPackagesMm: 'Between-package clearance (mm)',
+  topMm: 'Top clearance (mm)',
+};
+type Measurement = keyof typeof fieldLabels;
+function FactField({
+  id,
+  label,
+  value,
+  onChange,
+  required = false,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+}) {
+  return (
+    <div className="min-w-0 space-y-1">
+      <Label htmlFor={id}>{label}</Label>
+      <Input
+        id={id}
+        type="text"
+        inputMode="numeric"
+        autoComplete="off"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        required={required}
+        className="min-h-11"
+      />
+    </div>
+  );
+}
+function SourceFields({
+  id,
+  value,
+  onChange,
+}: {
+  id: string;
+  value: SourceDraft;
+  onChange: (source: SourceDraft) => void;
+}) {
+  const tr = useTr();
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      <div>
+        <Label htmlFor={`${id}-reference`}>
+          {tr('movethewheels.palletPreview.sourceReference', 'Source reference')}
+        </Label>
+        <Input
+          id={`${id}-reference`}
+          value={value.reference}
+          maxLength={255}
+          onChange={(e) => onChange({ ...value, reference: e.target.value })}
+          className="min-h-11"
+        />
+      </div>
+      <div>
+        <Label htmlFor={`${id}-version`}>
+          {tr('movethewheels.palletPreview.sourceVersion', 'Source version')}
+        </Label>
+        <Input
+          id={`${id}-version`}
+          value={value.version}
+          maxLength={120}
+          onChange={(e) => onChange({ ...value, version: e.target.value })}
+          className="min-h-11"
+        />
+      </div>
+    </div>
+  );
+}
+function Choice({
+  id,
+  label,
+  value,
+  choices,
+  onChange,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  choices: readonly { value: string; label: string }[];
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="min-w-0 space-y-1">
+      <Label htmlFor={id}>{label}</Label>
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger id={id} className="min-h-11">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {choices.map((choice) => (
+            <SelectItem key={choice.value} value={choice.value}>
+              {choice.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+export default function PalletPreviewPage() {
+  const { workspaceId, tenantId, currentUser, apiGatewayUrl } = useMoveTheWheels();
+  return (
+    <PalletPreviewWorkbench
+      key={JSON.stringify([workspaceId, tenantId, currentUser?.id, apiGatewayUrl])}
+    />
+  );
+}
+function PalletPreviewWorkbench() {
+  const tr = useTr(),
+    prefix = useId();
+  const [draft, setDraft] = useState(newPalletPreviewDraft);
+  const [edited, setEdited] = useState(false);
+  const [error, setError] = useState<PalletInputError | null>(null);
+  const errorRef = useRef<HTMLDivElement>(null),
+    nextKey = useRef(2);
+  const preview = usePalletPreview();
+  useEffect(() => {
+    if (error) {
+      const field =
+        document.getElementById(`${prefix}-${error.field}`) ??
+        document.getElementById(`${prefix}-${error.field}-reference`);
+      if (field instanceof HTMLElement) field.focus();
+      else errorRef.current?.focus();
+    }
+  }, [error, prefix]);
+  const edit = (update: (old: PalletPreviewDraft) => PalletPreviewDraft) => {
+    preview.invalidate();
+    setEdited(true);
+    setError(null);
+    setDraft(update);
+  };
+  const measurement = (
+    group: string,
+    key: Measurement,
+    value: string,
+    onChange: (value: string) => void
+  ) => (
+    <FactField
+      key={key}
+      id={`${prefix}-${group}-${key}`}
+      label={tr(`movethewheels.palletPreview.fields.${key}`, fieldLabels[key])}
+      value={value}
+      onChange={onChange}
+    />
+  );
+  const unknown = tr('movethewheels.palletPreview.unknown', 'Unknown');
+  const errorCopy =
+    error?.kind === 'MASS'
+      ? tr(
+          'movethewheels.palletPreview.massError',
+          'Use whole grams, without separators or a decimal point (0–1000000000000 g).'
+        )
+      : error?.kind === 'SOURCE'
+        ? tr(
+            'movethewheels.palletPreview.sourceError',
+            'Provide both a source reference and version, or leave both blank.'
+          )
+        : error?.kind === 'IDENTITY'
+          ? tr(
+              'movethewheels.palletPreview.identityError',
+              'Use a distinct, nonblank package identifier without surrounding whitespace.'
+            )
+          : error?.kind === 'COUNT'
+            ? tr(
+                'movethewheels.palletPreview.countError',
+                'Use 1–100 package lines and at most 1000 total units.'
+              )
+            : tr(
+                'movethewheels.palletPreview.wholeError',
+                'Use bounded whole millimetres or counts without separators, leading zeros or a decimal point. Dimensions must be positive; clearances may be zero.'
+              );
+  return (
+    <PageLayout
+      title={tr('movethewheels.palletPreview.title', 'Pallet preview')}
+      subtitle={tr(
+        'movethewheels.palletPreview.purpose',
+        'Inspect an arrangement against supplied measurements.'
+      )}
+      icon={<Boxes aria-hidden="true" />}
+      headerActions={
+        <Button
+          type="submit"
+          form={`${prefix}-form`}
+          disabled={preview.loading || !preview.ready}
+          className="min-h-11"
+        >
+          {preview.loading
+            ? tr('movethewheels.palletPreview.loading', 'Previewing…')
+            : tr('movethewheels.palletPreview.submit', 'Preview arrangement')}
+        </Button>
+      }
+    >
+      <p className="mb-4 text-sm">
+        {tr(
+          'movethewheels.palletPreview.boundary',
+          'Geometric proposal only. Not a packing approval, reservation or handling instruction.'
+        )}
+      </p>
+      {!preview.ready && (
+        <p role="status" className="mb-4">
+          {tr(
+            'movethewheels.palletPreview.contextRequired',
+            'A current workspace and signed-in profile are required.'
+          )}
+        </p>
+      )}
+      <div aria-live="polite" className="mb-4">
+        {edited && tr('movethewheels.palletPreview.stale', 'Inputs changed; preview again.')}
+        {preview.loading && tr('movethewheels.palletPreview.loading', 'Previewing…')}
+      </div>
+      {error && (
+        <div
+          role="alert"
+          ref={errorRef}
+          tabIndex={-1}
+          className="mb-4 border border-border rounded-lg p-3"
+        >
+          {errorCopy}
+        </div>
+      )}
+      {preview.failed && (
+        <p role="alert" className="mb-4">
+          {tr(
+            'movethewheels.palletPreview.readError',
+            'Preview could not be verified. Review the current context and try Preview arrangement again.'
+          )}
+        </p>
+      )}
+      <form
+        id={`${prefix}-form`}
+        noValidate
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (preview.loading || !preview.ready) return;
+          try {
+            const input = palletPreviewInput(draft);
+            setError(null);
+            setEdited(false);
+            void preview.run(input);
+          } catch (failure) {
+            preview.invalidate();
+            setError(
+              failure instanceof PalletInputError
+                ? failure
+                : new PalletInputError('packages', 'COUNT')
+            );
+          }
+        }}
+      >
+        <fieldset disabled={!preview.ready} className="space-y-5 min-w-0">
+          <legend className="sr-only">
+            {tr('movethewheels.palletPreview.facts', 'Supplied pallet preview facts')}
+          </legend>
+          <FormSection
+            title={tr('movethewheels.palletPreview.packages', 'Packages')}
+            description={tr(
+              'movethewheels.palletPreview.blankMeaning',
+              'Leave unavailable measurements blank. Blank is unknown, not zero.'
+            )}
+            actions={
+              <Button
+                type="button"
+                variant="outline"
+                disabled={draft.packages.length >= 100}
+                onClick={() => {
+                  const key = nextKey.current++;
+                  edit((d) => ({ ...d, packages: [...d.packages, newPalletPackage(key)] }));
+                }}
+                className="min-h-11"
+              >
+                {tr('movethewheels.palletPreview.addPackage', 'Add package line')}
+              </Button>
+            }
+          >
+            <div className="space-y-5">
+              {draft.packages.map((p, index) => (
+                <section
+                  key={p.key}
+                  className="rounded-lg border border-border p-4 space-y-4"
+                  aria-label={tr(
+                    'movethewheels.palletPreview.packageNumber',
+                    'Package {{number}}',
+                    { number: index + 1 }
+                  )}
+                >
+                  <div className="flex flex-wrap gap-3 items-center justify-between">
+                    <h2 className="font-semibold">
+                      {tr('movethewheels.palletPreview.packageNumber', 'Package {{number}}', {
+                        number: index + 1,
+                      })}
+                    </h2>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      disabled={draft.packages.length === 1}
+                      onClick={() =>
+                        edit((d) => ({
+                          ...d,
+                          packages: d.packages.filter((row) => row.key !== p.key),
+                        }))
+                      }
+                    >
+                      {tr('movethewheels.palletPreview.remove', 'Remove line')}
+                    </Button>
+                  </div>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <div>
+                      <Label htmlFor={`${prefix}-package-${p.key}-id`}>
+                        {tr('movethewheels.palletPreview.packageId', 'Package identifier')}
+                      </Label>
+                      <Input
+                        id={`${prefix}-package-${p.key}-id`}
+                        value={p.id}
+                        required
+                        maxLength={255}
+                        onChange={(e) =>
+                          edit((d) => ({
+                            ...d,
+                            packages: d.packages.map((row) =>
+                              row.key === p.key ? { ...row, id: e.target.value } : row
+                            ),
+                          }))
+                        }
+                        className="min-h-11"
+                      />
+                    </div>
+                    <FactField
+                      id={`${prefix}-package-${p.key}-quantity`}
+                      label={tr('movethewheels.palletPreview.quantity', 'Required quantity')}
+                      value={p.quantity}
+                      required
+                      onChange={(value) =>
+                        edit((d) => ({
+                          ...d,
+                          packages: d.packages.map((row) =>
+                            row.key === p.key ? { ...row, quantity: value } : row
+                          ),
+                        }))
+                      }
+                    />
+                  </div>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {(['widthMm', 'lengthMm', 'heightMm', 'grossMassG'] as const).map((key) =>
+                      measurement(`package-${p.key}`, key, p[key], (value) =>
+                        edit((d) => ({
+                          ...d,
+                          packages: d.packages.map((row) =>
+                            row.key === p.key ? { ...row, [key]: value } : row
+                          ),
+                        }))
+                      )
+                    )}
+                  </div>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <Choice
+                      id={`${prefix}-package-${p.key}-upright`}
+                      label={tr(
+                        'movethewheels.palletPreview.upright',
+                        'Upright handling permission'
+                      )}
+                      value={p.upright}
+                      choices={[
+                        { value: 'UNKNOWN', label: unknown },
+                        {
+                          value: 'YES',
+                          label: tr('movethewheels.palletPreview.permitted', 'Permitted'),
+                        },
+                        {
+                          value: 'NO',
+                          label: tr('movethewheels.palletPreview.denied', 'Not permitted'),
+                        },
+                      ]}
+                      onChange={(value) => {
+                        if (value === 'UNKNOWN' || value === 'YES' || value === 'NO')
+                          edit((d) => ({
+                            ...d,
+                            packages: d.packages.map((row) =>
+                              row.key === p.key ? { ...row, upright: value } : row
+                            ),
+                          }));
+                      }}
+                    />
+                    <Choice
+                      id={`${prefix}-package-${p.key}-yaw`}
+                      label={tr('movethewheels.palletPreview.yaw', 'Allowed upright yaw')}
+                      value={p.yaw}
+                      choices={[
+                        { value: 'UNKNOWN', label: unknown },
+                        {
+                          value: 'NONE',
+                          label: tr('movethewheels.palletPreview.noYaw', 'None permitted'),
+                        },
+                        { value: '0', label: '0°' },
+                        { value: '90', label: '90°' },
+                        { value: 'BOTH', label: '0° / 90°' },
+                      ]}
+                      onChange={(value) => {
+                        if (
+                          value === 'UNKNOWN' ||
+                          value === 'NONE' ||
+                          value === '0' ||
+                          value === '90' ||
+                          value === 'BOTH'
+                        )
+                          edit((d) => ({
+                            ...d,
+                            packages: d.packages.map((row) =>
+                              row.key === p.key ? { ...row, yaw: value } : row
+                            ),
+                          }));
+                      }}
+                    />
+                  </div>
+                  <SourceFields
+                    id={`${prefix}-package-${p.key}-source`}
+                    value={p.source}
+                    onChange={(source) =>
+                      edit((d) => ({
+                        ...d,
+                        packages: d.packages.map((row) =>
+                          row.key === p.key ? { ...row, source } : row
+                        ),
+                      }))
+                    }
+                  />
+                </section>
+              ))}
+            </div>
+          </FormSection>
+          <p className="text-sm text-text-secondary">
+            {tr(
+              'movethewheels.palletPreview.sourceBoundary',
+              'Your declared measurement sources; not independent verification.'
+            )}
+          </p>
+          <FormSection
+            title={tr('movethewheels.palletPreview.pallet', 'Pallet — dimensions and ratings')}
+          >
+            <div className="grid gap-3 sm:grid-cols-2">
+              {(['widthMm', 'lengthMm', 'heightMm', 'tareMassG', 'maxPayloadMassG'] as const).map(
+                (key) =>
+                  measurement('pallet', key, draft.pallet[key], (value) =>
+                    edit((d) => ({ ...d, pallet: { ...d.pallet, [key]: value } }))
+                  )
+              )}
+            </div>
+            <SourceFields
+              id={`${prefix}-pallet-source`}
+              value={draft.pallet.source}
+              onChange={(source) => edit((d) => ({ ...d, pallet: { ...d.pallet, source } }))}
+            />
+          </FormSection>
+          <FormSection title={tr('movethewheels.palletPreview.clearance', 'Clearance')}>
+            <div className="grid gap-3 sm:grid-cols-3">
+              {(['perimeterMm', 'betweenPackagesMm', 'topMm'] as const).map((key) =>
+                measurement('clearance', key, draft.clearance[key], (value) =>
+                  edit((d) => ({ ...d, clearance: { ...d.clearance, [key]: value } }))
+                )
+              )}
+            </div>
+            <SourceFields
+              id={`${prefix}-clearance-source`}
+              value={draft.clearance.source}
+              onChange={(source) => edit((d) => ({ ...d, clearance: { ...d.clearance, source } }))}
+            />
+          </FormSection>
+          <FormSection
+            title={tr(
+              'movethewheels.palletPreview.additionalPacking',
+              'Additional packing — mass only'
+            )}
+          >
+            <p className="text-sm mb-2">
+              {tr(
+                'movethewheels.palletPreview.packingUnknown',
+                'Packing geometry remains unknown, even when its mass is supplied.'
+              )}
+            </p>
+            {measurement('packing', 'massG', draft.additionalPacking.massG, (value) =>
+              edit((d) => ({ ...d, additionalPacking: { ...d.additionalPacking, massG: value } }))
+            )}
+            <SourceFields
+              id={`${prefix}-packing-source`}
+              value={draft.additionalPacking.source}
+              onChange={(source) =>
+                edit((d) => ({ ...d, additionalPacking: { ...d.additionalPacking, source } }))
+              }
+            />
+          </FormSection>
+          <OptionalFields
+            title={tr(
+              'movethewheels.palletPreview.envelope',
+              'Optional supplied load envelope and rating'
+            )}
+            description={tr(
+              'movethewheels.palletPreview.envelopeBoundary',
+              'An inner envelope does not prove door passage.'
+            )}
+          >
+            <div className="flex items-center gap-3 mb-3">
+              <Checkbox
+                id={`${prefix}-include-envelope`}
+                checked={draft.includeEnvelope}
+                onCheckedChange={(value) =>
+                  edit((d) => ({ ...d, includeEnvelope: value === true }))
+                }
+              />
+              <Label htmlFor={`${prefix}-include-envelope`}>
+                {tr(
+                  'movethewheels.palletPreview.includeEnvelope',
+                  'Include supplied load envelope'
+                )}
+              </Label>
+            </div>
+            <fieldset disabled={!draft.includeEnvelope} className="space-y-3">
+              <legend className="sr-only">
+                {tr('movethewheels.palletPreview.envelopeFacts', 'Load envelope facts')}
+              </legend>
+              <div className="grid gap-3 sm:grid-cols-2">
+                {(['widthMm', 'lengthMm', 'maxHeightMm', 'maxGrossMassG'] as const).map((key) =>
+                  measurement('envelope', key, draft.loadEnvelope[key], (value) =>
+                    edit((d) => ({ ...d, loadEnvelope: { ...d.loadEnvelope, [key]: value } }))
+                  )
+                )}
+              </div>
+              <SourceFields
+                id={`${prefix}-envelope-source`}
+                value={draft.loadEnvelope.source}
+                onChange={(source) =>
+                  edit((d) => ({ ...d, loadEnvelope: { ...d.loadEnvelope, source } }))
+                }
+              />
+            </fieldset>
+          </OptionalFields>
+        </fieldset>
+      </form>
+      <div className="mt-8">
+        {preview.result && preview.input && (
+          <PalletPreviewResults result={preview.result} input={preview.input} />
+        )}
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/WarehousesPage.tsx

@@ -3,6 +3,7 @@
  */
 
 import { useState } from 'react';
+import { useTr } from '../hooks';
 import { Warehouse, Plus, RefreshCw, CircleCheck, Gauge, Filter } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
 import { MetricCard, MetricGrid } from '../components/MetricCard';
@@ -33,6 +34,7 @@ const STATUS_OPTIONS = [
 ];
 
 export default function WarehousesPage() {
+  const tr = useTr();
   const { basePath, navigate } = useMoveTheWheels();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
@@ -146,7 +148,13 @@ export default function WarehousesPage() {
             icon: <Plus size={16} />,
             onSelect: () => goTo('inventory/warehouses/new'),
           }}
-          actions={[{ label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() }]}
+          actions={[
+            {
+              label: tr('movethewheels.palletPreview.title', 'Pallet preview'),
+              onSelect: () => goTo('inventory/warehouses/pallet-preview'),
+            },
+            { label: 'Refresh', icon: <RefreshCw size={16} />, onSelect: () => refetch() },
+          ]}
         />
       }
     >

package/src/movethewheels/utils/graphqlClient.ts

@@ -10,6 +10,10 @@ interface GraphQLRequestOptions {
   workspaceId?: string;
   tenantId?: string;
   actorId?: string;
+  /** Optional caller-owned cancellation; omitted preserves legacy retry behavior. */
+  signal?: AbortSignal;
+  /** Optional owning read-envelope guard; no effect on existing callers. */
+  validateResponse?: (value: unknown) => void;
 }
 
 export function resolveGraphqlUrl(apiGatewayUrl?: string): string {
@@ -119,8 +123,10 @@ export async function executeGraphQL<TData>(
   const request = { ...options };
   const body = JSON.stringify({ query, variables });
   const url = resolveGraphqlUrl(request.apiGatewayUrl);
+  if (request.signal?.aborted) throw new DOMException('Request cancelled', 'AbortError');
   await acquireSlot();
   try {
+    if (request.signal?.aborted) throw new DOMException('Request cancelled', 'AbortError');
     // Server-side callers retain explicit-token behavior; active browser requests
     // use the shared owning profile/context lifecycle before product dispatch.
     const authority =
@@ -155,7 +161,9 @@ export async function executeGraphQL<TData>(
       body,
       attemptPolicy === 'SINGLE_ATTEMPT' ? 0 : MAX_RETRIES,
       authority?.assertCurrent ?? (() => {}),
-      attemptPolicy === 'SINGLE_ATTEMPT' ? holdRefusalField : undefined
+      attemptPolicy === 'SINGLE_ATTEMPT' ? holdRefusalField : undefined,
+      request.signal,
+      request.validateResponse
     );
   } finally {
     releaseSlot();
@@ -201,7 +209,9 @@ async function runWithRetries<TData>(
   body: string,
   retries: number,
   assertCurrent: () => void,
-  holdRefusalField?: VehicleHoldMutation
+  holdRefusalField?: VehicleHoldMutation,
+  signal?: AbortSignal,
+  validateResponse?: (value: unknown) => void
 ): Promise<TData> {
   let lastError: Error = new Error('GraphQL request failed');
 
@@ -211,10 +221,14 @@ async function runWithRetries<TData>(
     if (attempt > 0)
       await sleep(Math.min(250 * 2 ** (attempt - 1), 2000) + Math.floor(Math.random() * 150));
 
+    if (signal?.aborted) throw new DOMException('Request cancelled', 'AbortError');
     assertCurrent();
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+    const abort = () => controller.abort();
+    signal?.addEventListener('abort', abort, { once: true });
     try {
+      if (signal?.aborted) throw new DOMException('Request cancelled', 'AbortError');
       const response = await fetch(url, {
         method: 'POST',
         headers,
@@ -239,6 +253,7 @@ async function runWithRetries<TData>(
         errors?: Array<{ message?: string }>;
       };
 
+      validateResponse?.(payload);
       const refusal = vehicleHoldRefusal(payload, response.status, holdRefusalField);
       if (refusal) throw refusal;
       if (holdRefusalField && !validWriteEnvelope(payload, holdRefusalField))
@@ -263,6 +278,7 @@ async function runWithRetries<TData>(
 
       return payload.data;
     } catch (error) {
+      if (signal?.aborted) throw new DOMException('Request cancelled', 'AbortError');
       const aborted = isAbortError(error);
       // A thrown fetch is a network error (TypeError "Failed to fetch") or our
       // own timeout abort — both transient and safe to retry on a fresh
@@ -279,6 +295,7 @@ async function runWithRetries<TData>(
       throw lastError;
     } finally {
       clearTimeout(timeoutId);
+      signal?.removeEventListener('abort', abort);
     }
   }