@burdenoff/microfe-movethewheels 2026.930.5 → 2026.1010.2

package/src/movethewheels/pages/FreightEstimatePage.tsx

@@ -0,0 +1,353 @@
+import { useEffect, useRef, useState } from 'react';
+import { DollarSign } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { Button } from '../components/ui';
+import { PinnedSelect, ReusePager, ReuseState, reuseCard } from '../components/ReuseControls';
+import { FreightDraftForm } from '../components/freight-cost/FreightDraftForm';
+import { FreightHistory } from '../components/freight-cost/FreightHistory';
+import { FreightText } from '../components/freight-cost/FreightFields';
+import { useConditionApi, useConditionQuery } from '../hooks/useContainerCondition';
+import { useFreightRecoveryAction } from '../hooks/useFreightRecoveryAction';
+import { freightPinMatches, freightSaveInput, type FreightDraftPin } from '../utils/freightDraft';
+import {
+  FreightShipmentsDocument,
+  FreightShipmentDocument,
+  FreightHistoryDocument,
+  FreightVersionDocument,
+  PreviewFreightCostsDocument,
+  SaveFreightCostsDocument,
+  type FreightShipmentsQuery,
+  type FreightShipmentQuery,
+  type FreightHistoryQuery,
+  type FreightVersionQuery,
+  type MtwFreightFactsInput,
+  type PreviewFreightCostsQuery,
+} from '../../generated/freight-cost-operations';
+import type { SelectedEvidence } from '../components/ContainerEvidencePicker';
+export default function FreightEstimatePage() {
+  const actions = useFreightRecoveryAction();
+  return (
+    <PageLayout
+      title="Freight cost estimates"
+      subtitle="Dated source costs, visible unknowns and immutable versions."
+      icon={<DollarSign aria-hidden="true" />}
+    >
+      <FreightWorkbench key={actions.contextKey} actions={actions} />
+    </PageLayout>
+  );
+}
+function FreightWorkbench({ actions }: { actions: ReturnType<typeof useFreightRecoveryAction> }) {
+  const request = useConditionApi();
+  const [shipmentOffset, setShipmentOffset] = useState(0);
+  const [historyOffset, setHistoryOffset] = useState(0);
+  const [shipment, setShipment] = useState<{ id: string; label: string } | null>(null);
+  const [reference, setReference] = useState('');
+  const [selected, setSelected] = useState<string | null>(null);
+  const [draft, setDraft] = useState<(FreightDraftPin & { generation: string }) | null>(null);
+  const [checking, setChecking] = useState(false);
+  const [mismatch, setMismatch] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const active = useRef(true),
+    preflight = useRef(false);
+  useEffect(() => {
+    active.current = true;
+    return () => {
+      active.current = false;
+    };
+  }, []);
+  const shipments = useConditionQuery<FreightShipmentsQuery>(
+    FreightShipmentsDocument,
+    { pagination: { limit: 25, offset: shipmentOffset } },
+    actions.revision
+  );
+  const current = useConditionQuery<FreightShipmentQuery>(
+    FreightShipmentDocument,
+    shipment ? { id: shipment.id } : null,
+    actions.revision
+  );
+  const latest = useConditionQuery<FreightHistoryQuery>(
+    FreightHistoryDocument,
+    shipment && reference.trim()
+      ? {
+          shipmentId: shipment.id,
+          estimateReference: reference.trim(),
+          pagination: { limit: 1, offset: 0 },
+        }
+      : null,
+    actions.revision
+  );
+  // Reloading clears unsent draft selection; unresolved history stays bound to its original input.
+  const historyTarget = actions.uncertain
+    ? actions.originalHistoryTarget
+    : shipment
+      ? { shipmentId: shipment.id, estimateReference: undefined }
+      : null;
+  const history = useConditionQuery<FreightHistoryQuery>(
+    FreightHistoryDocument,
+    historyTarget
+      ? {
+          shipmentId: historyTarget.shipmentId,
+          estimateReference: historyTarget.estimateReference,
+          pagination: { limit: 10, offset: historyOffset },
+        }
+      : null,
+    actions.revision
+  );
+  const exact = useConditionQuery<FreightVersionQuery>(
+    FreightVersionDocument,
+    historyTarget && selected ? { shipmentId: historyTarget.shipmentId, id: selected } : null,
+    actions.revision
+  );
+  const newest = latest.data?.mtwFreightEstimatePage.items[0] ?? null;
+  const changed =
+    !!draft &&
+    !!current.data &&
+    !!latest.data &&
+    !freightPinMatches(draft, current.data.shipment, newest);
+  const paused = actions.busy || checking || actions.uncertain;
+  const options =
+    shipments.data?.shipments.map((row) => ({
+      id: row.id,
+      label: `${row.shipmentNumber} — ${row.primaryMode} — ${row.status}`,
+    })) ?? [];
+  if (shipment && !options.some((row) => row.id === shipment.id))
+    options.unshift({ id: shipment.id, label: `${shipment.label} — selected outside this page` });
+  const save = async (facts: MtwFreightFactsInput, evidence: SelectedEvidence[]) => {
+    if (preflight.current || paused) return;
+    if (!draft) throw new Error('Review the shipment and current cost history first.');
+    preflight.current = true;
+    setChecking(true);
+    setError(null);
+    const pin = draft;
+    try {
+      const freshShipment = await request<FreightShipmentQuery>(FreightShipmentDocument, {
+        id: pin.shipmentId,
+      });
+      const freshHistory = await request<FreightHistoryQuery>(FreightHistoryDocument, {
+        shipmentId: pin.shipmentId,
+        estimateReference: pin.estimateReference,
+        pagination: { limit: 1, offset: 0 },
+      });
+      if (!active.current) throw new Error('The current workspace changed. Nothing was sent.');
+      const fresh = freshHistory.mtwFreightEstimatePage.items[0] ?? null;
+      if (!freightPinMatches(pin, freshShipment.shipment, fresh)) setMismatch(true);
+      const input = freightSaveInput(
+        pin,
+        freshShipment.shipment,
+        fresh,
+        facts,
+        evidence.map(({ fileId, versionId }) => ({ fileId, versionId }))
+      );
+      const result = await actions.run(
+        SaveFreightCostsDocument,
+        input,
+        'Sourced cost version recorded.'
+      );
+      if (result && active.current) {
+        setSelected(result.saveMtwFreightEstimate.id);
+        setDraft(null);
+        setHistoryOffset(0);
+      }
+    } finally {
+      if (active.current) setChecking(false);
+      preflight.current = false;
+    }
+  };
+  const shipmentPage = shipments.data
+    ? {
+        total: shipments.data.shipmentsCount,
+        limit: 25,
+        offset: shipmentOffset,
+        hasMore: shipmentOffset + shipments.data.shipments.length < shipments.data.shipmentsCount,
+        nextOffset: shipmentOffset + 25,
+      }
+    : undefined;
+  return (
+    <div className="min-w-0 space-y-6 break-words">
+      <p className="rounded border p-4 text-sm">
+        Record the costs stated by your source. Missing facts are not zero. Saving does not book
+        freight, accept a quote or settle an invoice.
+      </p>
+      <section className={reuseCard}>
+        <h2 className="text-lg font-semibold">Shipment and cost sheet</h2>
+        <PinnedSelect
+          label="Shipment"
+          value={shipment?.id ?? ''}
+          options={options}
+          disabled={paused}
+          onChange={(id) => {
+            const row = options.find((item) => item.id === id);
+            setShipment(row ? { id: row.id, label: row.label } : null);
+            setDraft(null);
+            setSelected(null);
+            setHistoryOffset(0);
+            setMismatch(false);
+          }}
+        />
+        <ReuseState loading={shipments.loading} error={shipments.error} />
+        <ReusePager
+          page={shipmentPage}
+          busy={shipments.loading || paused}
+          offset={shipmentOffset}
+          onChange={setShipmentOffset}
+        />
+        <FreightText
+          label="Cost sheet reference"
+          value={reference}
+          disabled={paused || draft !== null}
+          onChange={setReference}
+        />
+        <ReuseState loading={current.loading} error={current.error} />
+        <ReuseState loading={latest.loading} error={latest.error} />
+        {current.data?.shipment && (
+          <p>
+            {current.data.shipment.shipmentNumber} — {current.data.shipment.primaryMode};{' '}
+            {newest ? `latest sheet version ${newest.version}` : 'no version in the loaded sheet'}.
+          </p>
+        )}
+        <div className="flex flex-wrap gap-3">
+          <Button type="button" variant="outline" disabled={paused} onClick={actions.refresh}>
+            Refresh current records
+          </Button>
+          <Button
+            type="button"
+            disabled={
+              paused ||
+              current.loading ||
+              latest.loading ||
+              !!current.error ||
+              !!latest.error ||
+              !current.data?.shipment ||
+              !latest.data ||
+              !reference.trim()
+            }
+            onClick={() => {
+              const row = current.data?.shipment;
+              if (row && latest.data) {
+                setDraft({
+                  shipmentId: row.id,
+                  shipmentUpdatedAt: row.updatedAt,
+                  estimateReference: reference.trim(),
+                  previousId: newest?.id ?? null,
+                  version: newest?.version ?? 0,
+                  generation: crypto.randomUUID(),
+                });
+                setMismatch(false);
+                setError(null);
+              }
+            }}
+          >
+            Review and start a new draft
+          </Button>
+        </div>
+      </section>
+      {(changed || mismatch) && (
+        <p role="alert">
+          The shipment or cost history changed. Review the current records and explicitly start a
+          new draft; entered facts were not rebound.
+        </p>
+      )}
+      {draft && !changed && !mismatch && (
+        <FreightDraftForm
+          key={draft.generation}
+          disabled={
+            paused || current.loading || latest.loading || !!current.error || !!latest.error
+          }
+          onPreview={async (facts) =>
+            (await request<PreviewFreightCostsQuery>(PreviewFreightCostsDocument, { input: facts }))
+              .previewMtwFreightTotal
+          }
+          onSave={save}
+        />
+      )}
+      {error && <p role="alert">{error}</p>}
+      {actions.error && <p role="alert">{actions.error}</p>}
+      {actions.notice && <p role="status">{actions.notice}</p>}
+      {actions.uncertain && (
+        <section className={reuseCard}>
+          <h2 className="font-semibold">Resolve the original save</h2>
+          <p>
+            The server may already have recorded it. Check history first. Return to the original
+            account, organization, workspace and project before retrying.
+          </p>
+          <Button
+            type="button"
+            disabled={!actions.canRetry || actions.busy}
+            onClick={() => void actions.retryOriginal()}
+          >
+            Retry original request
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={actions.busy}
+            onClick={() => {
+              if (
+                window.confirm(
+                  'The server may have saved this request. Check history before abandoning its original request key. Abandon it?'
+                )
+              )
+                actions.discardAttempt();
+            }}
+          >
+            Abandon after checking history
+          </Button>
+        </section>
+      )}
+      {actions.uncertain && !actions.originalHistoryTarget && (
+        <p role="status">
+          Original history is unavailable in this context. Return to the original account,
+          organization, workspace and project. A malformed saved request cannot supply a history
+          target.
+        </p>
+      )}
+      {historyTarget && (
+        <section className={reuseCard}>
+          <h2 className="text-lg font-semibold">
+            {actions.uncertain ? 'Original request cost history' : 'Immutable cost history'}
+          </h2>
+          {actions.uncertain && (
+            <>
+              <p>
+                Shipment {historyTarget.shipmentId}; sheet {historyTarget.estimateReference}.
+                Reading these records does not confirm the original request key or clear recovery.
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={actions.busy}
+                onClick={actions.refresh}
+              >
+                Refresh original history
+              </Button>
+            </>
+          )}
+          <ReuseState loading={history.loading} error={history.error} />
+          {history.data?.mtwFreightEstimatePage.items.map((row) => (
+            <Button
+              key={row.id}
+              type="button"
+              variant="outline"
+              onClick={() => setSelected(row.id)}
+            >
+              {row.facts.title} / {row.estimateReference} / version {row.version} —{' '}
+              {new Date(row.recordedAt).toLocaleString()}
+            </Button>
+          ))}
+          <ReusePager
+            page={history.data?.mtwFreightEstimatePage}
+            busy={history.loading}
+            offset={historyOffset}
+            onChange={setHistoryOffset}
+          />
+        </section>
+      )}
+      {historyTarget && selected && (
+        <>
+          <ReuseState loading={exact.loading} error={exact.error} />
+          {exact.data && <FreightHistory record={exact.data.mtwFreightEstimateVersion} />}
+        </>
+      )}
+    </div>
+  );
+}

package/src/movethewheels/pages/LogisticsProceduresPage.tsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { ClipboardList } from 'lucide-react';
+import { Link } from 'react-router';
+import { PageLayout } from '../components/PageLayout';
+import { Button } from '../components/ui';
+import { useProcedureAction } from '../hooks/useProcedureAction';
+import { ProcedureReviewWorkbench } from '../components/logistics-procedure/ProcedureReviewWorkbench';
+import { ProcedurePolicyWorkbench } from '../components/logistics-procedure/ProcedurePolicyWorkbench';
+export default function LogisticsProceduresPage() {
+  const actions = useProcedureAction(),
+    [tab, setTab] = useState<'review' | 'policy'>('review');
+  return (
+    <PageLayout
+      title="Logistics procedures"
+      subtitle="Sourced checklist records and internal review history."
+      icon={<ClipboardList aria-hidden="true" />}
+    >
+      <div className="space-y-5">
+        <p className="rounded-lg border p-4">
+          Recording only: these checklists do not enforce reuse reservations, authorize movement or
+          certify condition or lane-specific compliance.
+        </p>
+        <p>
+          Shared{' '}
+          <Link to="/workflows" className="underline">
+            Workflows
+          </Link>{' '}
+          remain advisory. Published procedures and independent deviation notes require canonical
+          reviewer permissions.
+        </p>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            variant={tab === 'review' ? 'default' : 'outline'}
+            disabled={actions.busy || actions.uncertain}
+            onClick={() => setTab('review')}
+          >
+            Checklist and history
+          </Button>
+          <Button
+            variant={tab === 'policy' ? 'default' : 'outline'}
+            disabled={actions.busy || actions.uncertain}
+            onClick={() => setTab('policy')}
+          >
+            Procedure versions
+          </Button>
+          <Button variant="outline" disabled={actions.busy} onClick={actions.refresh}>
+            Refresh history
+          </Button>
+        </div>
+        {actions.error && <p role="alert">{actions.error}</p>}
+        {actions.notice && <p role="status">{actions.notice}</p>}
+        {actions.uncertain && (
+          <section className="space-y-3 rounded-lg border p-4">
+            <h2 className="font-semibold">Original request remains unresolved</h2>
+            <p>
+              Check history first. A manual retry sends the exact original body, revisions and key;
+              refresh does not retag it. New records and selection changes are blocked.
+            </p>
+            {actions.originalContext && (
+              <p className="break-all">Original workspace: {actions.originalContext.workspaceId}</p>
+            )}
+            {actions.recoveryInvalid && (
+              <p>The retained request cannot be read safely. Nothing will be sent automatically.</p>
+            )}
+            <div className="flex flex-wrap gap-2">
+              <Button
+                disabled={!actions.canRetry || actions.busy}
+                onClick={() => void actions.retryOriginal()}
+              >
+                Retry original request
+              </Button>
+              <Button variant="outline" disabled={actions.busy} onClick={actions.discardAttempt}>
+                Abandon after checking history
+              </Button>
+            </div>
+          </section>
+        )}
+        {tab === 'review' ? (
+          <ProcedureReviewWorkbench key={actions.contextKey} actions={actions} />
+        ) : (
+          <ProcedurePolicyWorkbench key={actions.contextKey} actions={actions} />
+        )}
+      </div>
+    </PageLayout>
+  );
+}

package/src/movethewheels/pages/PendingPickPage.tsx

@@ -0,0 +1,226 @@
+import { useEffect, useRef, useState } from 'react';
+import { ClipboardList } from 'lucide-react';
+import {
+  PickInventoryDocument,
+  PickPreparationDocument,
+  RecordPendingPickDocument,
+  type PickInventoryQuery,
+  type PickPreparationQuery,
+  type RecordPendingPickMutation,
+} from '../../generated/pending-pick-operations';
+import { PageLayout } from '../components/PageLayout';
+import { Button } from '../components/ui';
+import { ReuseState, reuseCard } from '../components/ReuseControls';
+import { PickLineSelection } from '../components/pending-pick/PickLineSelection';
+import { PendingPickDraft } from '../components/pending-pick/PendingPickDraft';
+import { PendingPickHistory } from '../components/pending-pick/PendingPickHistory';
+import { useConditionApi, useConditionQuery } from '../hooks/useContainerCondition';
+import { useEmptyReuseAction } from '../hooks/useEmptyReuseAction';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import {
+  pendingContextSignature,
+  pendingPickInput,
+  pendingPickMatches,
+  type PendingPickInput,
+} from '../utils/pendingPickDraft';
+export default function PendingPickPage() {
+  const { workspaceId, tenantId, currentUser, apiGatewayUrl } = useMoveTheWheels();
+  return (
+    <PageLayout
+      title="Plan a pick"
+      subtitle="Record a pending pick-to-staging intent."
+      icon={<ClipboardList aria-hidden="true" />}
+    >
+      <p className="mb-4 text-sm">
+        Changing workspace or user clears this draft. Check recorded history before starting again.
+      </p>
+      <PickWorkbench
+        key={JSON.stringify([workspaceId, tenantId, currentUser?.id, apiGatewayUrl])}
+      />
+    </PageLayout>
+  );
+}
+function PickWorkbench() {
+  const actions = useEmptyReuseAction(),
+    request = useConditionApi(),
+    checkingRef = useRef(false),
+    active = useRef(true);
+  useEffect(() => {
+    active.current = true;
+    return () => {
+      active.current = false;
+    };
+  }, []);
+  const [offset, setOffset] = useState(0),
+    [sourceId, setSourceId] = useState(''),
+    [destinationId, setDestinationId] = useState('');
+  const [count, setCount] = useState(''),
+    [reason, setReason] = useState(''),
+    [draft, setDraft] = useState<{ input: PendingPickInput; signature: string } | null>(null),
+    [message, setMessage] = useState<string | null>(null),
+    [checking, setChecking] = useState(false);
+  const inventory = useConditionQuery<PickInventoryQuery>(
+    PickInventoryDocument,
+    { pagination: { limit: 25, offset } },
+    actions.revision
+  );
+  const preparation = useConditionQuery<PickPreparationQuery>(
+    PickPreparationDocument,
+    sourceId && destinationId
+      ? { sourceInventoryItemId: sourceId, destinationInventoryItemId: destinationId }
+      : null,
+    actions.revision
+  );
+  const context = preparation.data?.mtwPickPreparation;
+  const locked = actions.busy || actions.uncertain || checking;
+  const select = (side: 'source' | 'destination', id: string) => {
+    if (locked) return;
+    setDraft(null);
+    setMessage(null);
+    setCount('');
+    setReason('');
+    if (side === 'source') {
+      setSourceId(id);
+      setDestinationId('');
+    } else setDestinationId(id);
+  };
+  const review = () => {
+    if (!context || locked) return;
+    try {
+      setDraft({
+        input: pendingPickInput(context, count, reason),
+        signature: pendingContextSignature(context),
+      });
+      setMessage(null);
+    } catch {
+      setMessage(
+        'Enter a positive whole count, a reason, and two distinct bins in the same cargo and warehouse.'
+      );
+    }
+  };
+  const save = async () => {
+    if (
+      !draft ||
+      !context ||
+      locked ||
+      checkingRef.current ||
+      !pendingPickMatches(draft.signature, context)
+    )
+      return;
+    checkingRef.current = true;
+    setChecking(true);
+    setMessage(null);
+    try {
+      const fresh = await request<PickPreparationQuery>(PickPreparationDocument, {
+        sourceInventoryItemId: sourceId,
+        destinationInventoryItemId: destinationId,
+      });
+      if (!active.current) return;
+      if (!pendingPickMatches(draft.signature, fresh.mtwPickPreparation)) {
+        setDraft(null);
+        setMessage('Current source facts changed. Refresh and review this plan again.');
+        actions.refresh();
+        return;
+      }
+      const result = await actions.run<RecordPendingPickMutation>(
+        RecordPendingPickDocument,
+        draft.input,
+        'Pending plan recorded. No stock was reserved or moved.'
+      );
+      if (result) {
+        setDraft(null);
+        setCount('');
+        setReason('');
+      }
+    } catch {
+      setMessage(
+        'Unable to recheck current source facts. Refresh before reviewing this plan again.'
+      );
+      setDraft(null);
+    } finally {
+      checkingRef.current = false;
+      if (active.current) setChecking(false);
+    }
+  };
+  const retry = async () => {
+    if (!draft || actions.busy) return;
+    // run retains the exact uncertain original body/key and returns success so this draft is consumed once.
+    const result = await actions.run<RecordPendingPickMutation>(
+      RecordPendingPickDocument,
+      draft.input,
+      'Pending plan recorded. No stock was reserved or moved.'
+    );
+    if (result) {
+      setDraft(null);
+      setCount('');
+      setReason('');
+    }
+  };
+  const stale = !!draft && !!context && !pendingPickMatches(draft.signature, context);
+  return (
+    <div className="space-y-5">
+      <PickLineSelection
+        inventory={inventory}
+        sourceId={sourceId}
+        destinationId={destinationId}
+        locked={locked}
+        offset={offset}
+        onOffset={setOffset}
+        onSelect={select}
+        onRefresh={actions.refresh}
+        refreshBusy={checking || actions.busy}
+      />
+      <ReuseState loading={preparation.loading} error={preparation.error} />
+      <PendingPickDraft
+        context={context}
+        locked={locked}
+        loading={preparation.loading}
+        count={count}
+        reason={reason}
+        draft={draft?.input ?? null}
+        stale={stale}
+        onCount={(value) => {
+          setCount(value);
+          setDraft(null);
+        }}
+        onReason={(value) => {
+          setReason(value);
+          setDraft(null);
+        }}
+        onReview={review}
+        onSave={() => void save()}
+      />
+      {message && <p role="alert">{message}</p>}
+      {actions.error && <p role="alert">{actions.error}</p>}
+      {actions.notice && <p role="status">{actions.notice}</p>}
+      {actions.uncertain && (
+        <section className={reuseCard}>
+          <p>
+            The outcome is uncertain. Check history first. Retry keeps the exact original body,
+            versions and key.
+          </p>
+          <Button type="button" disabled={actions.busy} onClick={() => void retry()}>
+            Retry original request
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={actions.busy}
+            onClick={() => {
+              actions.discardAttempt();
+              setDraft(null);
+            }}
+          >
+            Abandon after checking history
+          </Button>
+        </section>
+      )}
+      <PendingPickHistory
+        key={JSON.stringify([sourceId, destinationId])}
+        revision={actions.revision}
+        sourceId={sourceId}
+        destinationId={destinationId}
+      />
+    </div>
+  );
+}