@burdenoff/microfe-movethewheels 2026.930.5 → 2026.1010.1

package/src/movethewheels/components/logistics-procedure/ProcedureRunWorkbench.tsx

@@ -0,0 +1,292 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  ProcedureRunDocument,
+  ProcedureStepsDocument,
+  ProcedureDeviationsDocument,
+  RecordProcedureStepDocument,
+  RecordProcedureDeviationDocument,
+  RevokeProcedureDeviationDocument,
+  type ProcedureRunQuery,
+  type ProcedureStepsQuery,
+  type ProcedureDeviationsQuery,
+  type MtwProcedureStep,
+} from '../../../generated/logistics-procedure-operations';
+import type { useProcedureAction } from '../../hooks/useProcedureAction';
+import { useConditionApi, useConditionQuery } from '../../hooks/useContainerCondition';
+import { useMoveTheWheels } from '../../providers/MoveTheWheelsProvider';
+import { procedureSteps, stepLabel, chainMatches } from '../../utils/procedureInput';
+import { ReuseState, ReusePager, reuseCard, reuseSelect } from '../ReuseControls';
+import { Button } from '../ui';
+import { ProcedureHistory } from './ProcedureHistory';
+import { ProcedureStepForm, ProcedureDeviationForm } from './ProcedureDecisionForm';
+type Step = ProcedureStepsQuery['mtwProcedureStepPage']['items'][number];
+type Deviation = ProcedureDeviationsQuery['mtwProcedureDeviationPage']['items'][number];
+export function ProcedureRunWorkbench({
+  id,
+  actions,
+}: {
+  id: string;
+  actions: ReturnType<typeof useProcedureAction>;
+}) {
+  const request = useConditionApi(),
+    { currentUser } = useMoveTheWheels(),
+    [stepsOffset, setStepsOffset] = useState(0),
+    [deviationOffset, setDeviationOffset] = useState(0),
+    [draft, setDraft] = useState<{
+      step: MtwProcedureStep;
+      previous: Step | null;
+      generation: string;
+    } | null>(null),
+    [review, setReview] = useState<{
+      issue: Step;
+      previous: Deviation | null;
+      generation: string;
+    } | null>(null),
+    [checking, setChecking] = useState(false),
+    [selectedStep, setSelectedStep] = useState<MtwProcedureStep>('RETURN_INSTRUCTION_REVIEW'),
+    [issueId, setIssue] = useState('');
+  const active = useRef(true);
+  useEffect(() => {
+    active.current = true;
+    return () => {
+      active.current = false;
+    };
+  }, []);
+  const run = useConditionQuery<ProcedureRunQuery>(ProcedureRunDocument, { id }, actions.revision),
+    steps = useConditionQuery<ProcedureStepsQuery>(
+      ProcedureStepsDocument,
+      { executionId: id, pagination: { limit: 100, offset: stepsOffset } },
+      actions.revision
+    ),
+    deviations = useConditionQuery<ProcedureDeviationsQuery>(
+      ProcedureDeviationsDocument,
+      { executionId: id, pagination: { limit: 100, offset: deviationOffset } },
+      actions.revision
+    );
+  const allSteps = steps.data?.mtwProcedureStepPage.items ?? [],
+    allDeviations = deviations.data?.mtwProcedureDeviationPage.items ?? [],
+    paused = actions.busy || actions.uncertain || checking;
+  const completeSteps =
+      !!steps.data && !steps.data.mtwProcedureStepPage.hasMore && stepsOffset === 0,
+    completeDeviations =
+      !!deviations.data &&
+      !deviations.data.mtwProcedureDeviationPage.hasMore &&
+      deviationOffset === 0;
+  const latestStep = (step: MtwProcedureStep) => allSteps.find((row) => row.step === step) ?? null;
+  const latestDeviation = (issue: string) =>
+    allDeviations.find((row) => row.stepDecisionId === issue) ?? null;
+  const changedStep =
+      !!draft && completeSteps && !chainMatches(draft.previous, latestStep(draft.step)),
+    changedReview =
+      !!review &&
+      completeDeviations &&
+      !chainMatches(review.previous, latestDeviation(review.issue.id));
+  const saveStep = async (input: Record<string, unknown>) => {
+    if (!draft || paused) throw new Error('Review the current step predecessor first.');
+    setChecking(true);
+    try {
+      const fresh = await request<ProcedureStepsQuery>(ProcedureStepsDocument, {
+        executionId: id,
+        pagination: { limit: 100, offset: 0 },
+      });
+      if (!active.current) throw new Error('Context changed. Nothing was sent.');
+      if (
+        fresh.mtwProcedureStepPage.hasMore ||
+        !chainMatches(
+          draft.previous,
+          fresh.mtwProcedureStepPage.items.find((row) => row.step === draft.step) ?? null
+        )
+      )
+        throw new Error(
+          'Step history changed or exceeds this bounded review. Refresh and review again.'
+        );
+      const result = await actions.run(
+        RecordProcedureStepDocument,
+        input,
+        'Checklist decision recorded.'
+      );
+      if (result && active.current) setDraft(null);
+    } finally {
+      if (active.current) setChecking(false);
+    }
+  };
+  const saveReview = async (input: Record<string, unknown>, revoke: boolean) => {
+    if (!review || paused)
+      throw new Error('Review the exact issue and deviation predecessor first.');
+    setChecking(true);
+    try {
+      const fresh = await request<ProcedureDeviationsQuery>(ProcedureDeviationsDocument, {
+        executionId: id,
+        pagination: { limit: 100, offset: 0 },
+      });
+      if (!active.current) throw new Error('Context changed. Nothing was sent.');
+      if (
+        fresh.mtwProcedureDeviationPage.hasMore ||
+        !chainMatches(
+          review.previous,
+          fresh.mtwProcedureDeviationPage.items.find(
+            (row) => row.stepDecisionId === review.issue.id
+          ) ?? null
+        )
+      )
+        throw new Error('Deviation history changed or exceeds this bounded review.');
+      const result = await actions.run(
+        revoke ? RevokeProcedureDeviationDocument : RecordProcedureDeviationDocument,
+        input,
+        'Internal deviation review recorded.'
+      );
+      if (result && active.current) setReview(null);
+    } finally {
+      if (active.current) setChecking(false);
+    }
+  };
+  return (
+    <section className={reuseCard}>
+      <ReuseState loading={run.loading} error={run.error} />
+      <ReuseState loading={steps.loading} error={steps.error} />
+      <ReuseState loading={deviations.loading} error={deviations.error} />
+      {run.data && (
+        <>
+          <ProcedureHistory
+            run={run.data.mtwProcedureExecution}
+            steps={allSteps}
+            deviations={allDeviations}
+          />
+          <ReusePager
+            offset={stepsOffset}
+            page={steps.data?.mtwProcedureStepPage}
+            onChange={setStepsOffset}
+            busy={paused || steps.loading}
+          />
+          <ReusePager
+            offset={deviationOffset}
+            page={deviations.data?.mtwProcedureDeviationPage}
+            onChange={setDeviationOffset}
+            busy={paused || deviations.loading}
+          />
+          {(!completeSteps || !completeDeviations) && (
+            <p>
+              History is paged or exceeds 100 records. Recording is blocked here to avoid guessing a
+              chain predecessor.
+            </p>
+          )}
+          {currentUser?.id === run.data.mtwProcedureExecution.executorActorId && (
+            <>
+              <label className="block">
+                Checklist step
+                <select
+                  className={reuseSelect}
+                  disabled={paused}
+                  value={selectedStep}
+                  onChange={(event) => {
+                    const step = procedureSteps.find((row) => row === event.target.value);
+                    if (step) {
+                      setSelectedStep(step);
+                      setDraft(null);
+                    }
+                  }}
+                >
+                  {procedureSteps.map((row) => (
+                    <option key={row} value={row}>
+                      {stepLabel[row]}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <Button
+                type="button"
+                disabled={paused || !completeSteps || steps.loading}
+                onClick={() =>
+                  setDraft({
+                    step: selectedStep,
+                    previous: latestStep(selectedStep),
+                    generation: crypto.randomUUID(),
+                  })
+                }
+              >
+                Review predecessor and open check
+              </Button>
+            </>
+          )}
+          {draft && (
+            <>
+              <p>
+                Opening another form discards unsent fields; refresh never replaces a retained
+                original request.
+              </p>
+              {changedStep && <p role="alert">Step history changed. Review a fresh predecessor.</p>}
+              <ProcedureStepForm
+                key={draft.generation}
+                executionId={id}
+                step={draft.step}
+                previous={draft.previous}
+                busy={paused || changedStep || !completeSteps || steps.loading}
+                onSave={saveStep}
+              />
+            </>
+          )}
+          <label className="block">
+            Issue for an independent review
+            <select
+              className={reuseSelect}
+              disabled={paused}
+              value={issueId}
+              onChange={(event) => {
+                setIssue(event.target.value);
+                setReview(null);
+              }}
+            >
+              <option value="">Choose a reported issue</option>
+              {allSteps
+                .filter((row) => row.kind === 'ISSUE')
+                .map((row) => (
+                  <option key={row.id} value={row.id}>
+                    {stepLabel[row.step]} · version {row.version} · {row.id}
+                  </option>
+                ))}
+            </select>
+          </label>
+          <Button
+            type="button"
+            disabled={
+              paused ||
+              !issueId ||
+              !completeSteps ||
+              !completeDeviations ||
+              steps.loading ||
+              deviations.loading ||
+              currentUser?.id === run.data.mtwProcedureExecution.executorActorId
+            }
+            onClick={() => {
+              const issue = allSteps.find((row) => row.id === issueId && row.kind === 'ISSUE');
+              if (issue)
+                setReview({
+                  issue,
+                  previous: latestDeviation(issue.id),
+                  generation: crypto.randomUUID(),
+                });
+            }}
+          >
+            Review issue and open deviation form
+          </Button>
+          {review && (
+            <>
+              {changedReview && (
+                <p role="alert">Deviation history changed. Review a fresh predecessor.</p>
+              )}
+              <ProcedureDeviationForm
+                key={review.generation}
+                executionId={id}
+                issue={review.issue}
+                previous={review.previous}
+                busy={paused || changedReview || !completeDeviations || deviations.loading}
+                onSave={(input) => saveReview(input, false)}
+                onRevoke={(input) => saveReview(input, true)}
+              />
+            </>
+          )}
+        </>
+      )}
+    </section>
+  );
+}

package/src/movethewheels/components/logistics-procedure/ProcedureSubjectPicker.tsx

@@ -0,0 +1,111 @@
+import type { useProcedureSelection } from '../../hooks/useProcedureSelection';
+import { ReusePager, ReuseState, reuseSelect } from '../ReuseControls';
+export function ProcedureSubjectPicker({
+  selection: s,
+  busy,
+  onChange,
+}: {
+  selection: ReturnType<typeof useProcedureSelection>;
+  busy: boolean;
+  onChange: () => void;
+}) {
+  return (
+    <fieldset disabled={busy} className="space-y-4">
+      <legend className="font-semibold">Choose the recorded reuse proposal</legend>
+      <label className="block">
+        Container
+        <select
+          className={reuseSelect}
+          value={s.containerId}
+          onChange={(event) => {
+            s.selectContainer(event.target.value);
+            onChange();
+          }}
+        >
+          <option value="">Select a container</option>
+          {s.containers.data?.mtwContainerPage.items.map((row) => (
+            <option key={row.id} value={row.id}>
+              {row.containerNumber} · {row.equipmentType}
+            </option>
+          ))}
+        </select>
+      </label>
+      <ReuseState loading={s.containers.loading} error={s.containers.error} />
+      <ReusePager
+        offset={s.containerOffset}
+        page={s.containers.data?.mtwContainerPage}
+        busy={busy || s.containers.loading}
+        onChange={(offset) => {
+          s.pageContainers(offset);
+          onChange();
+        }}
+      />
+      {s.containerId && (
+        <>
+          <label className="block">
+            Cycle
+            <select
+              className={reuseSelect}
+              value={s.cycleId}
+              onChange={(event) => {
+                s.selectCycle(event.target.value);
+                onChange();
+              }}
+            >
+              <option value="">Select a cycle</option>
+              {s.cycles.data?.mtwContainerCyclePage.items.map((row) => (
+                <option key={row.id} value={row.id}>
+                  {row.bookingReference ?? 'No booking reference'} ·{' '}
+                  {new Date(row.openedAt).toLocaleString()} · {row.status} · {row.id}
+                </option>
+              ))}
+            </select>
+          </label>
+          <ReuseState loading={s.cycles.loading} error={s.cycles.error} />
+          <ReusePager
+            offset={s.cycleOffset}
+            page={s.cycles.data?.mtwContainerCyclePage}
+            busy={busy || s.cycles.loading}
+            onChange={(offset) => {
+              s.pageCycles(offset);
+              onChange();
+            }}
+          />
+        </>
+      )}
+      {s.cycleId && (
+        <>
+          <label className="block">
+            Proposal
+            <select
+              className={reuseSelect}
+              value={s.proposalId}
+              onChange={(event) => {
+                s.selectProposal(event.target.value);
+                onChange();
+              }}
+            >
+              <option value="">Select a proposal</option>
+              {s.proposals.data?.mtwReuseProposalPage.items.map((row) => (
+                <option key={row.id} value={row.id}>
+                  {row.proposalReference} · revision {row.revision} · {row.exportBookingReference} ·{' '}
+                  {row.handoffLocationReference}
+                </option>
+              ))}
+            </select>
+          </label>
+          <ReuseState loading={s.proposals.loading} error={s.proposals.error} />
+          <ReusePager
+            offset={s.proposalOffset}
+            page={s.proposals.data?.mtwReuseProposalPage}
+            busy={busy || s.proposals.loading}
+            onChange={(offset) => {
+              s.pageProposals(offset);
+              onChange();
+            }}
+          />
+        </>
+      )}
+    </fieldset>
+  );
+}

package/src/movethewheels/components/pending-pick/PendingPickDraft.tsx

@@ -0,0 +1,82 @@
+import type { PickPreparationQuery } from '../../../generated/pending-pick-operations';
+import type { PendingPickInput } from '../../utils/pendingPickDraft';
+import { Button, Input } from '../ui';
+import { reuseCard } from '../ReuseControls';
+import { PickCapture } from './PickCapture';
+export function PendingPickDraft({
+  context,
+  locked,
+  loading,
+  count,
+  reason,
+  draft,
+  stale,
+  onCount,
+  onReason,
+  onReview,
+  onSave,
+}: {
+  context: PickPreparationQuery['mtwPickPreparation'] | undefined;
+  locked: boolean;
+  loading: boolean;
+  count: string;
+  reason: string;
+  draft: PendingPickInput | null;
+  stale: boolean;
+  onCount: (value: string) => void;
+  onReason: (value: string) => void;
+  onReview: () => void;
+  onSave: () => void;
+}) {
+  if (!context) return null;
+  return (
+    <>
+      <p className="text-sm">
+        Server review time {context.evaluatedAt}. Applicability is reported by the server.
+      </p>
+      <div className="grid gap-3 lg:grid-cols-2">
+        <PickCapture title="Source" line={context.source} />
+        <PickCapture title="Staging" line={context.destination} />
+      </div>
+      <section className={`${reuseCard} min-w-0 break-words`}>
+        <h2 className="font-semibold">Review a pending plan</h2>
+        <p>Count units remain as reported above. Missing or mismatched facts remain review gaps.</p>
+        <label className="block">
+          Requested whole count
+          <Input
+            value={count}
+            inputMode="numeric"
+            disabled={locked}
+            onChange={(e) => {
+              onCount(e.target.value);
+            }}
+          />
+        </label>
+        <label className="block">
+          Reason
+          <Input
+            value={reason}
+            maxLength={1000}
+            disabled={locked}
+            onChange={(e) => {
+              onReason(e.target.value);
+            }}
+          />
+        </label>
+        <Button type="button" variant="outline" disabled={locked || loading} onClick={onReview}>
+          Review this plan
+        </Button>
+        {draft && (
+          <p>
+            {draft.requestedQuantity} count · {draft.note}. Proposed executor is the current user;
+            recording requires a verified direct-human session.
+          </p>
+        )}
+        {stale && <p role="alert">Displayed source facts changed. Review this plan again.</p>}
+        <Button type="button" disabled={locked || !draft || stale || loading} onClick={onSave}>
+          Record pending plan
+        </Button>
+      </section>
+    </>
+  );
+}

package/src/movethewheels/components/pending-pick/PendingPickHistory.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import {
+  ExactPendingPickDocument,
+  PendingPickHistoryDocument,
+  type ExactPendingPickQuery,
+  type PendingPickHistoryQuery,
+  type PendingPickTaskFragment,
+} from '../../../generated/pending-pick-operations';
+import { useConditionQuery } from '../../hooks/useContainerCondition';
+import { Button, Input } from '../ui';
+import { ReusePager, ReuseState, reuseCard } from '../ReuseControls';
+import { PickCapture } from './PickCapture';
+function TaskReceipt({ task }: { task: PendingPickTaskFragment }) {
+  return (
+    <article className={`${reuseCard} min-w-0 break-words`}>
+      <h3 className="font-semibold">Pending plan · needs review</h3>
+      <p className="break-all">Task {task.id}</p>
+      <p>
+        {task.requestedQuantity} reported count · {task.note}
+      </p>
+      <p>
+        Reserved {task.reservedQuantity}; staged {task.stagedQuantity}. No movement is recorded.
+      </p>
+      <p className="break-all">
+        Recorded {task.recordedAt}; creator and proposed executor {task.executorActorId}.
+      </p>
+      <details>
+        <summary>Captured source and staging context</summary>
+        <div className="mt-3 grid gap-3 lg:grid-cols-2">
+          <PickCapture title="Source" line={task.source} />
+          <PickCapture title="Staging" line={task.destination} />
+        </div>
+      </details>
+    </article>
+  );
+}
+export function PendingPickHistory({
+  revision,
+  sourceId,
+  destinationId,
+}: {
+  revision: number;
+  sourceId: string;
+  destinationId: string;
+}) {
+  const [offset, setOffset] = useState(0),
+    [knownId, setKnownId] = useState(''),
+    [exactId, setExactId] = useState('');
+  const history = useConditionQuery<PendingPickHistoryQuery>(
+    PendingPickHistoryDocument,
+    {
+      pagination: { limit: 10, offset },
+      sourceInventoryItemId: sourceId || null,
+      destinationInventoryItemId: destinationId || null,
+    },
+    revision
+  );
+  const exact = useConditionQuery<ExactPendingPickQuery>(
+    ExactPendingPickDocument,
+    exactId ? { id: exactId } : null,
+    revision
+  );
+  const page = history.data?.mtwPickTaskPage;
+  return (
+    <section className="space-y-3" aria-label="Pending plan history">
+      <h2 className="font-semibold">Recorded pending plans</h2>
+      <p className="text-sm">
+        History retains captured references after a line is retired. Use a known task ID; this is
+        not an archived stock-line browser.
+      </p>
+      <label className="block">
+        Known task ID
+        <Input value={knownId} maxLength={255} onChange={(e) => setKnownId(e.target.value)} />
+      </label>
+      <Button
+        type="button"
+        variant="outline"
+        disabled={!knownId.trim()}
+        onClick={() => setExactId(knownId.trim())}
+      >
+        Read exact task
+      </Button>
+      <ReuseState loading={exact.loading} error={exact.error} />
+      {exact.data && <TaskReceipt task={exact.data.mtwPickTask} />}
+      <ReuseState loading={history.loading} error={history.error} />
+      {page?.items.map((task) => (
+        <TaskReceipt key={task.id} task={task} />
+      ))}
+      {page?.total === 0 && <p>No recorded pending plans in this filter.</p>}
+      <ReusePager page={page} offset={offset} onChange={setOffset} busy={history.loading} />
+    </section>
+  );
+}

package/src/movethewheels/components/pending-pick/PickCapture.tsx

@@ -0,0 +1,70 @@
+import type { PickLineFragment } from '../../../generated/pending-pick-operations';
+import { reuseCard } from '../ReuseControls';
+export function PickCapture({ line, title }: { line: PickLineFragment; title: string }) {
+  const applicable = line.applicableProfile;
+  return (
+    <section className={`${reuseCard} min-w-0 break-words`}>
+      <h3 className="font-semibold">
+        {title}: {line.cargoLabel}
+      </h3>
+      <p>
+        {line.warehouseLabel} · {line.binLabel}
+      </p>
+      <p className="break-all text-sm">Line {line.inventoryItemId}</p>
+      <p className="text-sm">
+        Reported counters: on hand {line.stock.onHand}, available {line.stock.available}, allocated{' '}
+        {line.stock.allocated}, damaged {line.stock.damaged}.
+      </p>
+      <p className="text-sm">
+        Composition revision {line.compositionEpoch}; reported issues {line.observationSequence}.
+      </p>
+      <p className="text-sm">
+        Needs review:{' '}
+        {line.reviewGaps.map((gap) => gap.toLowerCase().replaceAll('_', ' ')).join('; ')}
+      </p>
+      <details className="space-y-2 text-sm">
+        <summary>Source facts and exact review references</summary>
+        <p className="break-all">
+          Recorded profile {line.recordedProfile?.id ?? 'Missing'}; applicable profile{' '}
+          {applicable?.id ?? 'Missing'}.
+        </p>
+        <p>
+          Recorded effective time {line.recordedProfile?.effectiveAt ?? 'Unknown'}; applicable
+          effective time {applicable?.effectiveAt ?? 'Unknown'}.
+        </p>
+        <p className="break-all">
+          Count unit reference {applicable?.facts.countUnit?.reference ?? 'Unknown'}; revision{' '}
+          {applicable?.facts.countUnit?.revision ?? 'Unknown'}.
+        </p>
+        <p className="break-all">
+          Source {applicable?.facts.source.reference ?? 'Unknown'}; revision{' '}
+          {applicable?.facts.source.revision ?? 'Unknown'}.
+        </p>
+        <p>
+          Source validity {applicable?.facts.sourceValidity.from ?? 'Unknown'} until{' '}
+          {applicable?.facts.sourceValidity.until ?? 'Unknown'} (exclusive).
+        </p>
+        <p className="break-all">
+          Lot {applicable?.facts.lot?.reference ?? 'Unknown'}; disposition{' '}
+          {applicable?.facts.lot?.declaredDisposition ?? 'Unknown'}.
+        </p>
+        <p className="break-all">
+          Reported item scan {applicable?.facts.scanMapping?.reportedItemLabel ?? 'Unknown'}; bin
+          scan {applicable?.facts.scanMapping?.reportedBinLabel ?? 'Unknown'}.
+        </p>
+        <p>
+          Line revision {line.inventoryUpdatedAt}; cargo {line.cargoUpdatedAt}; warehouse{' '}
+          {line.warehouseUpdatedAt}; bin {line.locationUpdatedAt}.
+        </p>
+        <p className="break-all">
+          Cargo {line.cargoItemId}; warehouse {line.warehouseId}; bin {line.locationId}.
+        </p>
+        {line.unresolvedObservationIds.map((id) => (
+          <p key={id} className="break-all">
+            Unresolved issue {id}
+          </p>
+        ))}
+      </details>
+    </section>
+  );
+}