@burdenoff/microfe-movethewheels 2026.930.5 → 2026.1010.1

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

@@ -0,0 +1,174 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  ProcedurePolicyHistoryDocument,
+  PublishProcedureDocument,
+  type ProcedurePolicyHistoryQuery,
+} from '../../../generated/logistics-procedure-operations';
+import { useConditionApi, useConditionQuery } from '../../hooks/useContainerCondition';
+import type { useProcedureAction } from '../../hooks/useProcedureAction';
+import { ProcedurePolicyForm } from './ProcedurePolicyForm';
+import { ProcedureField, ProcedureTime } from './ProcedureFields';
+import { chainMatches } from '../../utils/procedureInput';
+import { ReuseState, ReusePager, reuseCard } from '../ReuseControls';
+import { Button } from '../ui';
+type Policy = ProcedurePolicyHistoryQuery['mtwProcedureVersionPage']['items'][number];
+export function ProcedurePolicyWorkbench({
+  actions,
+}: {
+  actions: ReturnType<typeof useProcedureAction>;
+}) {
+  const active = useRef(true);
+  useEffect(() => {
+    active.current = true;
+    return () => {
+      active.current = false;
+    };
+  }, []);
+  const request = useConditionApi(),
+    [reference, setReference] = useState(''),
+    [offset, setOffset] = useState(0),
+    [draft, setDraft] = useState<{
+      reference: string;
+      previous: Policy | null;
+      generation: string;
+    } | null>(null),
+    [checking, setChecking] = useState(false),
+    [error, setError] = useState<string | null>(null);
+  const latest = useConditionQuery<ProcedurePolicyHistoryQuery>(
+    ProcedurePolicyHistoryDocument,
+    reference.trim() ? { reference: reference.trim(), pagination: { limit: 1, offset: 0 } } : null,
+    actions.revision
+  );
+  const history = useConditionQuery<ProcedurePolicyHistoryQuery>(
+    ProcedurePolicyHistoryDocument,
+    reference.trim() ? { reference: reference.trim(), pagination: { limit: 10, offset } } : null,
+    actions.revision
+  );
+  const newest = latest.data?.mtwProcedureVersionPage.items[0] ?? null,
+    paused = actions.busy || actions.uncertain || checking;
+  const changed = !!draft && !!latest.data && !chainMatches(draft.previous, newest);
+  const save = async (input: Record<string, unknown>) => {
+    if (!draft || paused) throw new Error('Review the latest recorded policy first.');
+    setChecking(true);
+    try {
+      const fresh = await request<ProcedurePolicyHistoryQuery>(ProcedurePolicyHistoryDocument, {
+        reference: draft.reference,
+        pagination: { limit: 1, offset: 0 },
+      });
+      if (!active.current) throw new Error('Context changed. Nothing was sent.');
+      if (!chainMatches(draft.previous, fresh.mtwProcedureVersionPage.items[0] ?? null))
+        throw new Error('Policy history changed. Refresh, review it and start a new form.');
+      const result = await actions.run(
+        PublishProcedureDocument,
+        input,
+        'Procedure version recorded.'
+      );
+      if (result) {
+        setDraft(null);
+        setOffset(0);
+      }
+    } finally {
+      setChecking(false);
+    }
+  };
+  return (
+    <section className={reuseCard}>
+      <h2 className="text-lg font-semibold">Sourced procedure versions</h2>
+      <p>
+        Publishing requires canonical reviewer permissions. Same-reference applicability is
+        immutable; use a new reference for a changed scope.
+      </p>
+      <ProcedureField
+        label="Procedure reference"
+        value={reference}
+        maxLength={120}
+        onChange={(value) => {
+          if (!paused) {
+            setReference(value);
+            setDraft(null);
+            setOffset(0);
+          }
+        }}
+      />
+      <ReuseState loading={latest.loading} error={latest.error} />
+      <Button
+        type="button"
+        disabled={paused || !latest.data || !reference.trim()}
+        onClick={() => {
+          setDraft({
+            reference: reference.trim(),
+            previous: newest,
+            generation: crypto.randomUUID(),
+          });
+          setError(null);
+        }}
+      >
+        Review predecessor and open form
+      </Button>
+      {draft && (
+        <>
+          <p>
+            Opening another form discards unsent fields; original uncertain requests remain
+            separately retained.
+          </p>
+          {changed && (
+            <p role="alert">Policy history changed. Review a fresh predecessor before recording.</p>
+          )}
+          <ProcedurePolicyForm
+            key={draft.generation}
+            reference={draft.reference}
+            previous={draft.previous}
+            busy={paused || changed || latest.loading || !!latest.error}
+            onSave={async (input) => {
+              try {
+                await save(input);
+              } catch (f) {
+                setError(f instanceof Error ? f.message : 'Unable to record policy.');
+                throw f;
+              }
+            }}
+          />
+        </>
+      )}
+      {error && <p role="alert">{error}</p>}
+      <ReuseState loading={history.loading} error={history.error} />
+      {history.data?.mtwProcedureVersionPage.items.map((row) => (
+        <article className="rounded-lg border p-3" key={row.id}>
+          <h3>
+            {row.title} · v{row.version} · {row.kind.toLowerCase()}
+          </h3>
+          <p>
+            From <ProcedureTime value={row.effectiveAt} /> until{' '}
+            <ProcedureTime value={row.validUntil} />
+          </p>
+          <p>
+            {row.scope.declaredLaneReference} · {row.scope.declaredJurisdictions.join(', ')}
+          </p>
+          <details>
+            <summary>Scope, source and exact reference</summary>
+            <dl className="break-all">
+              {Object.entries(row.scope)
+                .filter(([key]) => key !== '__typename')
+                .map(([key, value]) => (
+                  <div key={key}>
+                    <dt>{key}</dt>
+                    <dd>{Array.isArray(value) ? value.join(', ') : String(value)}</dd>
+                  </div>
+                ))}
+            </dl>
+            <p className="break-all">
+              {row.id}; predecessor {row.previousVersionId ?? 'None'}
+            </p>
+            <p>{row.reason}</p>
+          </details>
+        </article>
+      ))}
+      <ReusePager
+        offset={offset}
+        page={history.data?.mtwProcedureVersionPage}
+        onChange={setOffset}
+        busy={paused || history.loading}
+      />
+    </section>
+  );
+}

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

@@ -0,0 +1,278 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  ProcedureApplicableDocument,
+  ProcedureCyclesDocument,
+  ProcedureProposalsDocument,
+  ProcedureRunsDocument,
+  StartProcedureDocument,
+  type ProcedureApplicableQuery,
+  type ProcedureCyclesQuery,
+  type ProcedureProposalsQuery,
+  type ProcedureRunsQuery,
+} from '../../../generated/logistics-procedure-operations';
+import { useConditionApi, useConditionQuery } from '../../hooks/useContainerCondition';
+import { useProcedureSelection } from '../../hooks/useProcedureSelection';
+import type { useProcedureAction } from '../../hooks/useProcedureAction';
+import { object } from '../../utils/procedureInput';
+import { ProcedureSubjectPicker } from './ProcedureSubjectPicker';
+import { ProcedureRunWorkbench } from './ProcedureRunWorkbench';
+import { ProcedureField } from './ProcedureFields';
+import { ReuseState, ReusePager, reuseCard, reuseSelect } from '../ReuseControls';
+import { Button } from '../ui';
+interface StartPin {
+  containerId: string;
+  cycleId: string;
+  proposalId: string;
+  procedureVersionId: string;
+  expectedCycleVersion: number;
+  expectedProposalRevision: number;
+  cycleOffset: number;
+  proposalOffset: number;
+}
+export function ProcedureReviewWorkbench({
+  actions,
+}: {
+  actions: ReturnType<typeof useProcedureAction>;
+}) {
+  const selection = useProcedureSelection(actions.revision),
+    request = useConditionApi(),
+    [policyId, setPolicy] = useState(''),
+    [draft, setDraft] = useState<StartPin | null>(null),
+    [checking, setChecking] = useState(false),
+    [error, setError] = useState<string | null>(null),
+    [runId, setRun] = useState(''),
+    [runOffset, setRunOffset] = useState(0);
+  const active = useRef(true);
+  useEffect(() => {
+    active.current = true;
+    return () => {
+      active.current = false;
+    };
+  }, []);
+  const applicability = useConditionQuery<ProcedureApplicableQuery>(
+    ProcedureApplicableDocument,
+    selection.proposalId ? { proposalId: selection.proposalId } : null,
+    actions.revision
+  );
+  const runs = useConditionQuery<ProcedureRunsQuery>(
+    ProcedureRunsDocument,
+    selection.proposalId
+      ? { proposalId: selection.proposalId, pagination: { limit: 10, offset: runOffset } }
+      : null,
+    actions.revision
+  );
+  const paused = actions.busy || actions.uncertain || checking;
+  const policy = applicability.data?.mtwApplicableProcedures.policies.find(
+    (row) => row.version.id === policyId
+  );
+  const changed =
+    !!draft &&
+    (draft.proposalId !== selection.proposal?.id ||
+      draft.expectedProposalRevision !== selection.proposal.revision ||
+      draft.cycleId !== selection.cycle?.id ||
+      draft.expectedCycleVersion !== selection.cycle.version ||
+      !applicability.data?.mtwApplicableProcedures.policies.some(
+        (row) =>
+          row.version.id === draft.procedureVersionId && row.status === 'APPLICABLE_RECORDED_POLICY'
+      ));
+  const reset = () => {
+    setDraft(null);
+    setRun('');
+    setRunOffset(0);
+    setPolicy('');
+    setError(null);
+  };
+  const start = async () => {
+    if (!draft || paused) return;
+    setChecking(true);
+    setError(null);
+    const pin = draft;
+    try {
+      const [freshCycles, freshProposals, freshPolicy] = await Promise.all([
+        request<ProcedureCyclesQuery>(ProcedureCyclesDocument, {
+          containerId: pin.containerId,
+          pagination: { limit: 25, offset: pin.cycleOffset },
+        }),
+        request<ProcedureProposalsQuery>(ProcedureProposalsDocument, {
+          cycleId: pin.cycleId,
+          pagination: { limit: 25, offset: pin.proposalOffset },
+        }),
+        request<ProcedureApplicableQuery>(ProcedureApplicableDocument, {
+          proposalId: pin.proposalId,
+        }),
+      ]);
+      if (!active.current) throw new Error('Workspace context changed. Nothing was sent.');
+      if (
+        freshCycles.mtwContainerCyclePage.items.find((row) => row.id === pin.cycleId)?.version !==
+          pin.expectedCycleVersion ||
+        freshProposals.mtwReuseProposalPage.items.find((row) => row.id === pin.proposalId)
+          ?.revision !== pin.expectedProposalRevision ||
+        !freshPolicy.mtwApplicableProcedures.policies.some(
+          (row) =>
+            row.version.id === pin.procedureVersionId && row.status === 'APPLICABLE_RECORDED_POLICY'
+        )
+      )
+        throw new Error('Proposal, cycle or policy changed. Refresh and review again.');
+      const result = await actions.run(
+        StartProcedureDocument,
+        {
+          proposalId: pin.proposalId,
+          procedureVersionId: pin.procedureVersionId,
+          expectedCycleVersion: pin.expectedCycleVersion,
+          expectedProposalRevision: pin.expectedProposalRevision,
+        },
+        'Checklist run recorded. No reservation was authorized.'
+      );
+      if (
+        result &&
+        active.current &&
+        object(result.startMtwProcedureExecution) &&
+        typeof result.startMtwProcedureExecution.id === 'string'
+      ) {
+        setRun(result.startMtwProcedureExecution.id);
+        setDraft(null);
+        setRunOffset(0);
+      }
+    } catch (failure) {
+      if (active.current)
+        setError(failure instanceof Error ? failure.message : 'Unable to record checklist run.');
+    } finally {
+      if (active.current) setChecking(false);
+    }
+  };
+  return (
+    <div className="space-y-5">
+      <section className={reuseCard}>
+        <ProcedureSubjectPicker selection={selection} busy={paused} onChange={reset} />
+        <ReuseState loading={applicability.loading} error={applicability.error} />
+        {selection.proposal && (
+          <>
+            <p>
+              {selection.proposal.exportBookingReference} · exporter{' '}
+              {selection.proposal.exporterReference} · {selection.proposal.handoffLocationReference}
+            </p>
+            <p>
+              Displayed proposal revision {selection.proposal.revision}; cycle version{' '}
+              {selection.cycle?.version ?? 'Unknown'}.
+            </p>
+            <label className="block">
+              Applicable recorded procedure
+              <select
+                className={reuseSelect}
+                disabled={paused}
+                value={policyId}
+                onChange={(event) => {
+                  setPolicy(event.target.value);
+                  setDraft(null);
+                }}
+              >
+                <option value="">Choose a sourced procedure</option>
+                {applicability.data?.mtwApplicableProcedures.policies.map((row) => (
+                  <option
+                    key={row.version.id}
+                    value={row.version.id}
+                    disabled={row.status !== 'APPLICABLE_RECORDED_POLICY'}
+                  >
+                    {row.version.title} · v{row.version.version} ·{' '}
+                    {row.status === 'APPLICABLE_RECORDED_POLICY'
+                      ? 'Applicable record'
+                      : row.status.toLowerCase()}
+                  </option>
+                ))}
+              </select>
+            </label>
+            {applicability.data &&
+              applicability.data.mtwApplicableProcedures.policies.length === 0 && (
+                <p>No exact-scope procedure is recorded. This does not establish an exemption.</p>
+              )}
+            <Button
+              type="button"
+              disabled={
+                paused ||
+                !policy ||
+                policy.status !== 'APPLICABLE_RECORDED_POLICY' ||
+                !selection.cycle ||
+                selection.cycle.status !== 'OPEN' ||
+                selection.cycles.loading ||
+                selection.proposals.loading ||
+                applicability.loading
+              }
+              onClick={() => {
+                if (selection.cycle && selection.proposal && policy)
+                  setDraft({
+                    containerId: selection.containerId,
+                    cycleId: selection.cycle.id,
+                    proposalId: selection.proposal.id,
+                    procedureVersionId: policy.version.id,
+                    expectedCycleVersion: selection.cycle.version,
+                    expectedProposalRevision: selection.proposal.revision,
+                    cycleOffset: selection.cycleOffset,
+                    proposalOffset: selection.proposalOffset,
+                  });
+              }}
+            >
+              Review exact proposal and policy
+            </Button>
+            {draft && (
+              <>
+                <p>
+                  Captured revisions: proposal {draft.expectedProposalRevision}, cycle{' '}
+                  {draft.expectedCycleVersion}. The server rechecks these when recording.
+                </p>
+                {changed && <p role="alert">Displayed facts changed. Review them again.</p>}
+                <Button
+                  type="button"
+                  disabled={
+                    paused ||
+                    changed ||
+                    selection.cycles.loading ||
+                    selection.proposals.loading ||
+                    applicability.loading
+                  }
+                  onClick={() => void start()}
+                >
+                  Record checklist run
+                </Button>
+              </>
+            )}
+          </>
+        )}
+        {error && <p role="alert">{error}</p>}
+      </section>
+      <section className={reuseCard}>
+        <h2 className="text-lg font-semibold">Recorded runs</h2>
+        <ReuseState loading={runs.loading} error={runs.error} />
+        {runs.data?.mtwProcedureExecutionPage.items.map((row) => (
+          <Button
+            type="button"
+            variant="outline"
+            key={row.id}
+            disabled={paused}
+            onClick={() => setRun(row.id)}
+          >
+            Open {new Date(row.recordedAt).toLocaleString()} ·{' '}
+            <span className="break-all">{row.id}</span>
+          </Button>
+        ))}
+        <ReusePager
+          offset={runOffset}
+          page={runs.data?.mtwProcedureExecutionPage}
+          onChange={setRunOffset}
+          busy={paused || runs.loading}
+        />
+        <ProcedureField
+          label="Known run reference (exact scoped history)"
+          value={runId}
+          onChange={(value) => {
+            if (!paused) setRun(value);
+          }}
+          required={false}
+        />
+        <p className="text-sm">
+          A known reference opens captured history; this is not an archive search.
+        </p>
+      </section>
+      {runId && <ProcedureRunWorkbench key={runId} id={runId} actions={actions} />}
+    </div>
+  );
+}