@burdenoff/microfe-movethewheels 2026.1017.12 → 2026.1017.14

package/src/movethewheels/components/pallet-preview/PalletPreviewResults.tsx

@@ -0,0 +1,220 @@
+import type { MtwPalletGeometryPreviewInput } from '../../../generated/pallet-preview-operations';
+import { FormSection } from '@burdenoff/fe-libs/form';
+import { Badge } from '../ui';
+import { useTr } from '../../hooks';
+import {
+  PALLET_BOUND_KEYS,
+  PALLET_UNKNOWN_KEYS,
+  type PalletPreview,
+} from '../../utils/palletPreviewResponse';
+
+const boundLabels = {
+  placedContainment: 'Placed subset containment',
+  placedNonOverlap: 'Placed subset non-overlap',
+  permittedUprightYaw: 'Permitted upright yaw',
+  reportedSingleLayerHeight: 'Reported single-layer height',
+  palletPayloadMass: 'Pallet payload mass',
+  palletFootprintWithinLoadEnvelope: 'Pallet footprint within load envelope',
+  loadedPalletGrossMass: 'Loaded pallet gross mass',
+};
+const unknownLabels = {
+  additionalPackingGeometry: 'Additional packing geometry',
+  handling: 'Handling',
+  securing: 'Securing',
+  centreOfGravityAndStability: 'Centre of gravity and stability',
+  supportAndFloorContactLoads: 'Support and floor contact loads',
+  loadingAndUnloadingPath: 'Loading and unloading path',
+  segregationAndCargoCompatibility: 'Cargo segregation and compatibility',
+};
+export function PalletPreviewResults({
+  result,
+  input,
+}: {
+  result: PalletPreview;
+  input: MtwPalletGeometryPreviewInput;
+}) {
+  const tr = useTr();
+  const unknown = tr('movethewheels.palletPreview.unknown', 'Unknown');
+  const status =
+    result.layoutStatus === 'PLACED_BY_METHOD'
+      ? tr('movethewheels.palletPreview.placed', 'Placed by this method')
+      : result.layoutStatus === 'NO_LAYOUT_FOUND_BY_METHOD'
+        ? tr('movethewheels.palletPreview.noLayout', 'No layout found by this method')
+        : tr('movethewheels.palletPreview.unknownFacts', 'Unknown from supplied facts');
+  const sourceText = (source: { reference: string; version: string } | null) =>
+    source ? `${source.reference} · ${source.version}` : unknown;
+  return (
+    <section
+      aria-label={tr('movethewheels.palletPreview.result', 'Preview result')}
+      className="space-y-5 min-w-0"
+    >
+      <h2 className="text-xl font-semibold" tabIndex={-1}>
+        {status}
+      </h2>
+      <p className="text-sm text-text-secondary">
+        {tr(
+          'movethewheels.palletPreview.method',
+          'Geometric proposal only · Deterministic single-layer shelf method · mm / g'
+        )}
+      </p>
+      <dl className="grid gap-3 sm:grid-cols-2">
+        <div>
+          <dt>{tr('movethewheels.palletPreview.counts', 'Placed / requested units')}</dt>
+          <dd className="font-semibold">
+            {result.placedQuantity} / {result.requestedQuantity}
+          </dd>
+        </div>
+        <div>
+          <dt>{tr('movethewheels.palletPreview.payload', 'Whole-request payload mass')}</dt>
+          <dd className="font-semibold">
+            {result.requestedPayloadMassG === null ? unknown : `${result.requestedPayloadMassG} g`}
+          </dd>
+        </div>
+        <div>
+          <dt>{tr('movethewheels.palletPreview.gross', 'Whole-request gross mass')}</dt>
+          <dd className="font-semibold">
+            {result.requestedGrossMassG === null ? unknown : `${result.requestedGrossMassG} g`}
+          </dd>
+        </div>
+      </dl>
+      <p className="text-sm">
+        {tr(
+          'movethewheels.palletPreview.allUnitsMass',
+          'Requested mass covers all requested units, including unplaced units.'
+        )}
+      </p>
+      {result.unplaced.length > 0 && (
+        <div>
+          <h3 className="font-medium">
+            {tr('movethewheels.palletPreview.unplaced', 'Unplaced units')}
+          </h3>
+          <ul className="list-disc pl-5">
+            {result.unplaced.map((p) => (
+              <li key={p.packageId} className="break-words">
+                {p.packageId}: {p.quantity}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <FormSection
+        title={tr('movethewheels.palletPreview.diagram', 'Placed subset — top view (mm)')}
+      >
+        <p className="text-sm mb-3">
+          {tr(
+            'movethewheels.palletPreview.subset',
+            'Containment and non-overlap concern only the placed subset. This diagram is not a handling or loading-path simulation.'
+          )}
+        </p>
+        {input.pallet.widthMm != null &&
+        input.pallet.lengthMm != null &&
+        result.placements.length > 0 ? (
+          <figure className="min-w-0">
+            <svg
+              role="img"
+              aria-label={tr(
+                'movethewheels.palletPreview.diagramLabel',
+                'Proposed placed rectangles on the supplied pallet footprint'
+              )}
+              viewBox={`0 0 ${input.pallet.widthMm} ${input.pallet.lengthMm}`}
+              width="100%"
+              height="320"
+              style={{ height: 320, maxHeight: 320 }}
+              className="max-w-full text-text-primary border border-border rounded-lg"
+              preserveAspectRatio="xMidYMid meet"
+            >
+              <rect
+                width={input.pallet.widthMm}
+                height={input.pallet.lengthMm}
+                className="fill-transparent stroke-current"
+                vectorEffect="non-scaling-stroke"
+              />
+              {result.placements.map((p) => (
+                <rect
+                  key={`${p.packageId}:${p.unit}`}
+                  x={p.xMm}
+                  y={p.yMm}
+                  width={p.widthMm}
+                  height={p.lengthMm}
+                  className="fill-primary/15 stroke-primary"
+                  vectorEffect="non-scaling-stroke"
+                >
+                  <title>{`${p.packageId} #${p.unit}: ${p.xMm}, ${p.yMm} mm; ${p.widthMm} × ${p.lengthMm} mm; ${p.yawDegrees}°`}</title>
+                </rect>
+              ))}
+            </svg>
+            <figcaption className="text-sm text-text-secondary mt-2">
+              {input.pallet.widthMm} × {input.pallet.lengthMm} mm
+            </figcaption>
+          </figure>
+        ) : (
+          <p>
+            {tr('movethewheels.palletPreview.noDiagram', 'No placed subset is available to draw.')}
+          </p>
+        )}
+      </FormSection>
+      <FormSection title={tr('movethewheels.palletPreview.bounds', 'Seven reported bounds')}>
+        <ul className="grid gap-3 md:grid-cols-2">
+          {PALLET_BOUND_KEYS.map((key) => (
+            <li key={key} className="rounded-lg border border-border p-3 min-w-0">
+              <h3 className="font-medium">
+                {tr(`movethewheels.palletPreview.bounds.${key}`, boundLabels[key])}
+              </h3>
+              <Badge variant="outline">
+                {tr(
+                  `movethewheels.palletPreview.status.${result.bounds[key].status}`,
+                  result.bounds[key].status
+                )}
+              </Badge>
+              <p className="text-sm mt-1 break-words">{result.bounds[key].reason}</p>
+            </li>
+          ))}
+        </ul>
+      </FormSection>
+      <FormSection
+        title={tr('movethewheels.palletPreview.unsupported', 'Seven concerns remain unknown')}
+      >
+        <ul className="grid gap-2 md:grid-cols-2">
+          {PALLET_UNKNOWN_KEYS.map((key) => (
+            <li key={key} className="rounded border border-border p-3">
+              {tr(`movethewheels.palletPreview.unsupported.${key}`, unknownLabels[key])}:{' '}
+              <strong>{unknown}</strong>
+            </li>
+          ))}
+        </ul>
+      </FormSection>
+      <FormSection
+        title={tr('movethewheels.palletPreview.sourceSnapshot', 'Submitted source snapshot')}
+        description={tr(
+          'movethewheels.palletPreview.sourceBoundary',
+          'Your declared measurement sources; not independent verification.'
+        )}
+      >
+        <dl className="space-y-2 break-words">
+          {result.sources.packages.map((p) => (
+            <div key={p.packageId}>
+              <dt className="font-medium">{p.packageId}</dt>
+              <dd>{sourceText(p.source)}</dd>
+            </div>
+          ))}
+          {(['pallet', 'loadEnvelope', 'additionalPacking', 'clearance'] as const).map((key) => (
+            <div key={key}>
+              <dt className="font-medium">
+                {tr(
+                  `movethewheels.palletPreview.source.${key}`,
+                  {
+                    pallet: 'Pallet',
+                    loadEnvelope: 'Load envelope',
+                    additionalPacking: 'Additional packing',
+                    clearance: 'Clearance',
+                  }[key]
+                )}
+              </dt>
+              <dd>{sourceText(result.sources[key])}</dd>
+            </div>
+          ))}
+        </dl>
+      </FormSection>
+    </section>
+  );
+}

package/src/movethewheels/hooks/usePalletPreview.ts

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { print } from 'graphql';
+import {
+  MtwPalletGeometryPreviewDocument,
+  type MtwPalletGeometryPreviewInput,
+} from '../../generated/pallet-preview-operations';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+import {
+  parsePalletPreview,
+  validatePalletPreviewEnvelope,
+  type PalletPreview,
+} from '../utils/palletPreviewResponse';
+
+const query = print(MtwPalletGeometryPreviewDocument);
+export function usePalletPreview() {
+  const { workspaceId, tenantId, currentUser, apiGatewayUrl, authToken, workspaceToken } =
+    useMoveTheWheels();
+  const context = useMemo(
+    () => ({
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+    }),
+    [workspaceId, tenantId, currentUser?.id, apiGatewayUrl, authToken, workspaceToken]
+  );
+  const active = useRef(context);
+  useLayoutEffect(() => {
+    active.current = context;
+  }, [context]);
+  const generation = useRef(0);
+  const pending = useRef<AbortController | null>(null);
+  const [state, setState] = useState<{
+    context: typeof context;
+    generation: number;
+    loading: boolean;
+    result: PalletPreview | null;
+    input: MtwPalletGeometryPreviewInput | null;
+    failed: boolean;
+  } | null>(null);
+  const invalidate = useCallback(() => {
+    generation.current++;
+    pending.current?.abort();
+    pending.current = null;
+    setState(null);
+  }, []);
+  useEffect(() => {
+    invalidate();
+    return () => {
+      generation.current++;
+      pending.current?.abort();
+      pending.current = null;
+    };
+  }, [context, invalidate]);
+  const run = useCallback(
+    async (input: MtwPalletGeometryPreviewInput) => {
+      if (active.current !== context || pending.current || !context.workspaceId || !context.actorId)
+        return;
+      input = structuredClone(input);
+      const controller = new AbortController();
+      pending.current = controller;
+      const ticket = ++generation.current;
+      setState({ context, generation: ticket, loading: true, result: null, input, failed: false });
+      try {
+        const data = await executeGraphQL<unknown>(
+          {
+            ...context,
+            signal: controller.signal,
+            validateResponse: validatePalletPreviewEnvelope,
+          },
+          query,
+          { input }
+        );
+        const result = parsePalletPreview(data, input);
+        if (
+          !controller.signal.aborted &&
+          active.current === context &&
+          generation.current === ticket
+        )
+          setState({ context, generation: ticket, loading: false, result, input, failed: false });
+      } catch {
+        if (
+          !controller.signal.aborted &&
+          active.current === context &&
+          generation.current === ticket
+        )
+          setState({
+            context,
+            generation: ticket,
+            loading: false,
+            result: null,
+            input,
+            failed: true,
+          });
+      } finally {
+        if (pending.current === controller) pending.current = null;
+      }
+    },
+    [context]
+  );
+  const current = state?.context === context;
+  return {
+    run,
+    invalidate,
+    ready: !!context.workspaceId && !!context.actorId,
+    loading: current ? state.loading : false,
+    result: current ? state.result : null,
+    input: current ? state.input : null,
+    failed: current ? state.failed : false,
+  };
+}