@burdenoff/microfe-movethewheels 2026.930.5 → 2026.1010.1

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

@@ -0,0 +1,204 @@
+import { useState } from 'react';
+import type {
+  MtwProcedureStep,
+  ProcedureStepsQuery,
+  ProcedureDeviationsQuery,
+} from '../../../generated/logistics-procedure-operations';
+import { ContainerEvidencePicker, type SelectedEvidence } from '../ContainerEvidencePicker';
+import { Button } from '../ui';
+import { reuseSelect } from '../ReuseControls';
+import { ProcedureField } from './ProcedureFields';
+import { localProcedureInstant, stepLabel } from '../../utils/procedureInput';
+type Decision = ProcedureStepsQuery['mtwProcedureStepPage']['items'][number];
+type Deviation = ProcedureDeviationsQuery['mtwProcedureDeviationPage']['items'][number];
+export function ProcedureStepForm({
+  executionId,
+  step,
+  previous,
+  busy,
+  onSave,
+}: {
+  executionId: string;
+  step: MtwProcedureStep;
+  previous: Decision | null;
+  busy: boolean;
+  onSave: (input: Record<string, unknown>) => Promise<void>;
+}) {
+  const [kind, setKind] = useState<'DONE' | 'ISSUE'>('ISSUE'),
+    [note, setNote] = useState(''),
+    [evidence, setEvidence] = useState<SelectedEvidence[]>([]),
+    [error, setError] = useState<string | null>(null);
+  return (
+    <form
+      className="space-y-3"
+      onSubmit={(event) => {
+        event.preventDefault();
+        setError(null);
+        void onSave({
+          executionId,
+          step,
+          expectedVersion: previous?.version ?? 0,
+          expectedPreviousId: previous?.id ?? null,
+          kind,
+          note,
+          evidence:
+            kind === 'DONE' ? evidence.map(({ fileId, versionId }) => ({ fileId, versionId })) : [],
+        }).catch((f) => setError(f instanceof Error ? f.message : 'Unable to record this check.'));
+      }}
+    >
+      <fieldset disabled={busy} className="space-y-3">
+        <h3 className="font-medium">{stepLabel[step]}</h3>
+        <p>
+          Reviewed predecessor:{' '}
+          {previous ? `v${previous.version}: ${previous.kind}` : 'No decision'}.
+        </p>
+        <label className="block">
+          Reported result
+          <select
+            className={reuseSelect}
+            value={kind}
+            onChange={(event) => setKind(event.target.value === 'DONE' ? 'DONE' : 'ISSUE')}
+          >
+            <option value="ISSUE">Issue / incomplete review</option>
+            <option value="DONE">Sourced review recorded</option>
+          </select>
+        </label>
+        <ProcedureField label="Review note" value={note} onChange={setNote} maxLength={2000} />
+        {kind === 'DONE' ? (
+          <ContainerEvidencePicker
+            value={evidence}
+            onChange={setEvidence}
+            description="Exact source versions for this reported check; integrity alone does not certify condition or legal compliance."
+          />
+        ) : (
+          <p className="text-sm">
+            An issue can be reported without Files. It does not satisfy a required check.
+          </p>
+        )}
+        <Button type="submit" disabled={kind === 'DONE' && !evidence.length}>
+          Record check
+        </Button>
+      </fieldset>
+      {error && <p role="alert">{error}</p>}
+    </form>
+  );
+}
+export function ProcedureDeviationForm({
+  executionId,
+  issue,
+  previous,
+  busy,
+  onSave,
+  onRevoke,
+}: {
+  executionId: string;
+  issue: Decision;
+  previous: Deviation | null;
+  busy: boolean;
+  onSave: (input: Record<string, unknown>) => Promise<void>;
+  onRevoke: (input: Record<string, unknown>) => Promise<void>;
+}) {
+  const [kind, setKind] = useState<'APPROVED' | 'REJECTED'>('REJECTED'),
+    [from, setFrom] = useState(''),
+    [until, setUntil] = useState(''),
+    [reason, setReason] = useState(''),
+    [evidence, setEvidence] = useState<SelectedEvidence[]>([]),
+    [error, setError] = useState<string | null>(null);
+  const pins = {
+    executionId,
+    stepDecisionId: issue.id,
+    expectedVersion: previous?.version ?? 0,
+    expectedPreviousId: previous?.id ?? null,
+  };
+  const invoke = async (revoke: boolean) => {
+    setError(null);
+    try {
+      if (revoke) await onRevoke({ ...pins, reason });
+      else
+        await onSave({
+          ...pins,
+          kind,
+          validFrom: kind === 'APPROVED' ? localProcedureInstant(from) : null,
+          validUntil: kind === 'APPROVED' ? localProcedureInstant(until) : null,
+          reason,
+          evidence:
+            kind === 'APPROVED'
+              ? evidence.map(({ fileId, versionId }) => ({ fileId, versionId }))
+              : [],
+        });
+    } catch (f) {
+      setError(f instanceof Error ? f.message : 'Unable to record this review.');
+    }
+  };
+  return (
+    <form
+      className="space-y-3"
+      onSubmit={(event) => {
+        event.preventDefault();
+        void invoke(false);
+      }}
+    >
+      <fieldset disabled={busy} className="space-y-3">
+        <h3 className="font-medium">Independent internal deviation review</h3>
+        <p className="text-sm">
+          A different authorized human reviews issue {issue.id}. A note cannot waive container
+          condition or lane-specific legal obligations.
+        </p>
+        <label className="block">
+          Review result
+          <select
+            className={reuseSelect}
+            value={kind}
+            onChange={(event) =>
+              setKind(event.target.value === 'APPROVED' ? 'APPROVED' : 'REJECTED')
+            }
+          >
+            <option value="REJECTED">Reject deviation</option>
+            <option value="APPROVED">Finite internal approval note</option>
+          </select>
+        </label>
+        <ProcedureField label="Reason" value={reason} onChange={setReason} maxLength={2000} />
+        {kind === 'APPROVED' && (
+          <>
+            <p>
+              Local zone: {Intl.DateTimeFormat().resolvedOptions().timeZone}; exclusive deadline.
+            </p>
+            <ProcedureField
+              label="Valid from"
+              type="datetime-local"
+              value={from}
+              onChange={setFrom}
+            />
+            <ProcedureField
+              label="Valid until"
+              type="datetime-local"
+              value={until}
+              onChange={setUntil}
+            />
+            <ContainerEvidencePicker
+              value={evidence}
+              onChange={setEvidence}
+              description="Exact evidence for this internal review note; no physical or regulatory waiver."
+            />
+          </>
+        )}
+        <div className="flex flex-wrap gap-2">
+          <Button type="submit" disabled={kind === 'APPROVED' && !evidence.length}>
+            Record independent review
+          </Button>
+          {previous?.kind === 'APPROVED' && (
+            <Button
+              type="button"
+              variant="outline"
+              disabled={!reason.trim()}
+              onClick={() => void invoke(true)}
+            >
+              Revoke latest approval
+            </Button>
+          )}
+        </div>
+      </fieldset>
+      {error && <p role="alert">{error}</p>}
+    </form>
+  );
+}

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

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import { reuseSelect } from '../ReuseControls';
+export function ProcedureField({
+  label,
+  value,
+  onChange,
+  type = 'text',
+  maxLength = 255,
+  required = true,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  type?: string;
+  maxLength?: number;
+  required?: boolean;
+}) {
+  return (
+    <label className="block text-sm">
+      {label}
+      <input
+        className={reuseSelect}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        type={type}
+        maxLength={maxLength}
+        required={required}
+        step={type === 'datetime-local' ? '0.001' : undefined}
+      />
+    </label>
+  );
+}
+export function ProcedureGroup({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <fieldset className="space-y-3 rounded-lg border p-4">
+      <legend className="px-1 font-medium">{title}</legend>
+      {children}
+    </fieldset>
+  );
+}
+export function ProcedureTime({ value }: { value: string | null | undefined }) {
+  return <span>{value ? new Date(value).toLocaleString() : 'Unknown / not supplied'}</span>;
+}

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

@@ -0,0 +1,102 @@
+import type {
+  ProcedureRunQuery,
+  ProcedureStepsQuery,
+  ProcedureDeviationsQuery,
+} from '../../../generated/logistics-procedure-operations';
+import { ProcedureTime } from './ProcedureFields';
+import { stepLabel } from '../../utils/procedureInput';
+export function ProcedureHistory({
+  run,
+  steps,
+  deviations,
+}: {
+  run: ProcedureRunQuery['mtwProcedureExecution'];
+  steps: ProcedureStepsQuery['mtwProcedureStepPage']['items'];
+  deviations: ProcedureDeviationsQuery['mtwProcedureDeviationPage']['items'];
+}) {
+  return (
+    <section className="space-y-4">
+      <h2 className="text-lg font-semibold">Captured review and history</h2>
+      <p>
+        Run reference <span className="break-all">{run.id}</span>; recorded{' '}
+        <ProcedureTime value={run.recordedAt} /> by{' '}
+        <span className="break-all">{run.executorActorId}</span>.
+      </p>
+      <p>
+        {run.subject.handoffLocationReference} · {run.subject.equipmentType} ·{' '}
+        {run.subject.cargoCategory} · owner {run.subject.equipmentOwnerReference}
+      </p>
+      <p>
+        Captured proposal revision {run.subject.proposalRevision}, cycle version{' '}
+        {run.subject.cycleVersion}. This history does not show current authorization.
+      </p>
+      <details>
+        <summary>Exact captured references</summary>
+        <dl className="break-all">
+          {Object.entries(run.subject)
+            .filter(([key]) => key !== '__typename')
+            .map(([key, value]) => (
+              <div key={key}>
+                <dt className="font-medium">{key}</dt>
+                <dd>{String(value)}</dd>
+              </div>
+            ))}
+        </dl>
+        <p className="break-all">Stored database subject fingerprint: {run.subjectFingerprint}</p>
+      </details>
+      {steps.map((row) => (
+        <article key={row.id} className="space-y-1 rounded-lg border p-3">
+          <h3>
+            {stepLabel[row.step]} — version {row.version}:{' '}
+            {row.kind === 'DONE' ? 'Sourced review recorded' : 'Issue / incomplete'}
+          </h3>
+          <p className="break-words">{row.note}</p>
+          <p>
+            <ProcedureTime value={row.recordedAt} /> · actor{' '}
+            <span className="break-all">{row.createdBy}</span>
+          </p>
+          <details>
+            <summary>Evidence and predecessor</summary>
+            <p className="break-all">
+              Decision {row.id}; predecessor {row.previousDecisionId ?? 'None'}
+            </p>
+            {row.evidence.map((proof) => (
+              <p key={JSON.stringify([proof.fileId, proof.versionId])} className="break-all">
+                File {proof.fileId} / version {proof.versionId} · hash {proof.sha256Hash} · checked{' '}
+                <ProcedureTime value={proof.checkedAt} />
+              </p>
+            ))}
+          </details>
+        </article>
+      ))}
+      {deviations.map((row) => (
+        <article key={row.id} className="space-y-1 rounded-lg border p-3">
+          <h3>
+            Internal deviation {row.kind.toLowerCase()} — version {row.version}
+          </h3>
+          <p className="break-words">{row.reason}</p>
+          <p>
+            Validity: <ProcedureTime value={row.validFrom} /> to{' '}
+            <ProcedureTime value={row.validUntil} /> (exclusive)
+          </p>
+          <p>
+            Recorded <ProcedureTime value={row.recordedAt} /> by{' '}
+            <span className="break-all">{row.createdBy}</span>
+          </p>
+          <details>
+            <summary>Exact issue, evidence and predecessor</summary>
+            <p className="break-all">
+              Issue {row.stepDecisionId}; predecessor {row.previousDeviationId ?? 'None'}
+            </p>
+            {row.evidence.map((proof) => (
+              <p key={JSON.stringify([proof.fileId, proof.versionId])} className="break-all">
+                File {proof.fileId} / version {proof.versionId} · hash {proof.sha256Hash} · checked{' '}
+                <ProcedureTime value={proof.checkedAt} />
+              </p>
+            ))}
+          </details>
+        </article>
+      ))}
+    </section>
+  );
+}

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

@@ -0,0 +1,226 @@
+import { useState } from 'react';
+import type {
+  ProcedurePolicyQuery,
+  MtwProcedureScopeInput,
+  MtwEquipmentType,
+  MtwContainerCargoCategory,
+} from '../../../generated/logistics-procedure-operations';
+import { ContainerEvidencePicker, type SelectedEvidence } from '../ContainerEvidencePicker';
+import { Button } from '../ui';
+import { reuseSelect } from '../ReuseControls';
+import { ProcedureField, ProcedureGroup } from './ProcedureFields';
+import { localProcedureInstant, scopeInput } from '../../utils/procedureInput';
+type Policy = ProcedurePolicyQuery['mtwProcedureVersion'];
+const equipment: readonly MtwEquipmentType[] = [
+  'DRY_20',
+  'DRY_40',
+  'HIGH_CUBE_40',
+  'REEFER_20',
+  'REEFER_40',
+  'TANK',
+  'OPEN_TOP',
+  'FLAT_RACK',
+  'OTHER',
+];
+const cargo: readonly MtwContainerCargoCategory[] = [
+  'DRY',
+  'FOOD_GRADE',
+  'REEFER',
+  'DANGEROUS',
+  'PEST',
+];
+export function ProcedurePolicyForm({
+  reference,
+  previous,
+  busy,
+  onSave,
+}: {
+  reference: string;
+  previous: Policy | null;
+  busy: boolean;
+  onSave: (input: Record<string, unknown>) => Promise<void>;
+}) {
+  const [title, setTitle] = useState(previous?.title ?? '');
+  const [kind, setKind] = useState<'PUBLISHED' | 'WITHDRAWN'>('PUBLISHED');
+  const [scope, setScope] = useState<MtwProcedureScopeInput>({
+    handoffLocationReference: previous?.scope.handoffLocationReference ?? '',
+    equipmentType: previous?.scope.equipmentType ?? 'DRY_20',
+    cargoCategory: previous?.scope.cargoCategory ?? 'DRY',
+    equipmentOwnerReference: previous?.scope.equipmentOwnerReference ?? '',
+    declaredLaneReference: previous?.scope.declaredLaneReference ?? '',
+    declaredJurisdictions: previous?.scope.declaredJurisdictions ?? [],
+    sourceReference: previous?.scope.sourceReference ?? '',
+    sourceRevision: previous?.scope.sourceRevision ?? '',
+  });
+  const [jurisdictions, setJurisdictions] = useState(() => scope.declaredJurisdictions.join('\n'));
+  const [from, setFrom] = useState(''),
+    [until, setUntil] = useState(''),
+    [reason, setReason] = useState(''),
+    [evidence, setEvidence] = useState<SelectedEvidence[]>([]),
+    [error, setError] = useState<string | null>(null);
+  const patch = (name: keyof MtwProcedureScopeInput, value: string) =>
+    setScope((current) => ({ ...current, [name]: value }));
+  return (
+    <form
+      className="space-y-4"
+      onSubmit={(event) => {
+        event.preventDefault();
+        setError(null);
+        void (async () => {
+          try {
+            await onSave({
+              templateReference: reference,
+              expectedVersion: previous?.version ?? 0,
+              expectedPreviousId: previous?.id ?? null,
+              kind,
+              title,
+              scope: scopeInput({
+                ...scope,
+                declaredJurisdictions: jurisdictions.split('\n').filter((value) => value.trim()),
+              }),
+              effectiveAt: localProcedureInstant(from),
+              validUntil: kind === 'PUBLISHED' ? localProcedureInstant(until) : null,
+              reason,
+              evidence:
+                kind === 'PUBLISHED'
+                  ? evidence.map(({ fileId, versionId }) => ({ fileId, versionId }))
+                  : [],
+            });
+          } catch (failure) {
+            setError(failure instanceof Error ? failure.message : 'Unable to record this policy.');
+          }
+        })();
+      }}
+    >
+      <fieldset disabled={busy} className="space-y-4">
+        <p>
+          Reviewed predecessor:{' '}
+          {previous ? `version ${previous.version} (${previous.id})` : 'No recorded version'}. A new
+          scope requires a new procedure reference.
+        </p>
+        <ProcedureGroup title="Procedure">
+          <ProcedureField label="Title" value={title} onChange={setTitle} />
+          <label className="block">
+            Action
+            <select
+              className={reuseSelect}
+              value={kind}
+              onChange={(event) =>
+                setKind(event.target.value === 'WITHDRAWN' ? 'WITHDRAWN' : 'PUBLISHED')
+              }
+            >
+              <option value="PUBLISHED">Publish a sourced version</option>
+              <option value="WITHDRAWN" disabled={!previous}>
+                Withdraw applicability
+              </option>
+            </select>
+          </label>
+        </ProcedureGroup>
+        <ProcedureGroup title="Exact operational scope">
+          <fieldset disabled={!!previous} className="space-y-3">
+            <ProcedureField
+              label="Handoff location reference"
+              value={scope.handoffLocationReference}
+              onChange={(v) => patch('handoffLocationReference', v)}
+            />
+            <ProcedureField
+              label="Equipment owner reference"
+              value={scope.equipmentOwnerReference}
+              onChange={(v) => patch('equipmentOwnerReference', v)}
+            />
+            <label className="block">
+              Equipment
+              <select
+                className={reuseSelect}
+                value={scope.equipmentType}
+                onChange={(event) => {
+                  const found = equipment.find((v) => v === event.target.value);
+                  if (found) setScope((v) => ({ ...v, equipmentType: found }));
+                }}
+              >
+                {equipment.map((v) => (
+                  <option key={v}>{v}</option>
+                ))}
+              </select>
+            </label>
+            <label className="block">
+              Cargo category
+              <select
+                className={reuseSelect}
+                value={scope.cargoCategory}
+                onChange={(event) => {
+                  const found = cargo.find((v) => v === event.target.value);
+                  if (found) setScope((v) => ({ ...v, cargoCategory: found }));
+                }}
+              >
+                {cargo.map((v) => (
+                  <option key={v}>{v}</option>
+                ))}
+              </select>
+            </label>
+            <ProcedureField
+              label="Declared lane reference"
+              value={scope.declaredLaneReference}
+              onChange={(v) => patch('declaredLaneReference', v)}
+            />
+            <label className="block">
+              Declared jurisdictions (one reference per line)
+              <textarea
+                className={reuseSelect}
+                value={jurisdictions}
+                onChange={(event) => setJurisdictions(event.target.value)}
+                maxLength={2560}
+                required
+              />
+            </label>
+          </fieldset>
+          <p className="text-sm">
+            These sourced labels do not automatically validate geography or regulatory compliance.
+          </p>
+        </ProcedureGroup>
+        <ProcedureGroup title="Source and applicability">
+          <ProcedureField
+            label="Source reference"
+            value={scope.sourceReference}
+            onChange={(v) => patch('sourceReference', v)}
+          />
+          <ProcedureField
+            label="Source revision"
+            value={scope.sourceRevision}
+            onChange={(v) => patch('sourceRevision', v)}
+          />
+          <p className="text-sm">
+            Times use your local zone: {Intl.DateTimeFormat().resolvedOptions().timeZone}. The
+            deadline is exclusive.
+          </p>
+          <ProcedureField
+            label="Effective from"
+            type="datetime-local"
+            value={from}
+            onChange={setFrom}
+          />
+          {kind === 'PUBLISHED' && (
+            <ProcedureField
+              label="Valid until"
+              type="datetime-local"
+              value={until}
+              onChange={setUntil}
+            />
+          )}
+          <ProcedureField label="Reason" value={reason} onChange={setReason} maxLength={2000} />
+        </ProcedureGroup>
+        {kind === 'PUBLISHED' && (
+          <ContainerEvidencePicker
+            value={evidence}
+            onChange={setEvidence}
+            description="Exact source versions for this procedure. File integrity does not certify its legal applicability."
+          />
+        )}
+        <Button type="submit" disabled={kind === 'PUBLISHED' && evidence.length === 0}>
+          Record procedure version
+        </Button>
+      </fieldset>
+      {error && <p role="alert">{error}</p>}
+    </form>
+  );
+}