@burdenoff/microfe-movethewheels 2026.930.5 → 2026.1010.1

package/src/movethewheels/pages/ContainerConditionPage.tsx

@@ -0,0 +1,959 @@
+import { useState, type FormEvent, type ReactNode } from 'react';
+import { ShieldCheck } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { Button, Input } from '../components/ui';
+import {
+  ContainerEvidencePicker,
+  type SelectedEvidence,
+} from '../components/ContainerEvidencePicker';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useConditionAction, useConditionQuery } from '../hooks/useContainerCondition';
+import {
+  ConditionContainersDocument,
+  ConditionInspectionsDocument,
+  ConditionHoldsDocument,
+  ConditionQualificationsDocument,
+  ConditionDefectsDocument,
+  ConditionRepairsDocument,
+  ConditionReleasesDocument,
+  RecordInspectionDocument,
+  CreateConditionHoldDocument,
+  RecordConditionRepairDocument,
+  SubmitInspectorQualificationDocument,
+  ReviewInspectorQualificationDocument,
+  RevokeInspectorQualificationDocument,
+  ReleaseConditionHoldDocument,
+  type ConditionContainersQuery,
+  type ConditionInspectionsQuery,
+  type ConditionHoldsQuery,
+  type ConditionQualificationsQuery,
+  type ConditionDefectsQuery,
+  type ConditionRepairsQuery,
+  type ConditionReleasesQuery,
+  type MtwContainerExaminationScheme,
+  type MtwContainerCargoCategory,
+  type MtwContainerSuitability,
+  type MtwContainerDefectSeverity,
+  type MtwContainerQualificationScope,
+} from '../../generated/container-condition-operations';
+
+const box = 'space-y-4 rounded-xl border bg-bg-surface p-5';
+const selectStyle = 'mt-1 w-full rounded-md border p-2 text-sm';
+const actions = [
+  'inspection',
+  'hold',
+  'repair',
+  'qualification',
+  'review',
+  'revoke',
+  'release',
+] as const;
+type Action = (typeof actions)[number];
+const actionNames: Record<Action, string> = {
+  inspection: 'Record inspection',
+  hold: 'Place operational hold',
+  repair: 'Record repair',
+  qualification: 'Submit my qualification',
+  review: 'Review issuer qualification',
+  revoke: 'Revoke qualification',
+  release: 'Release hold',
+};
+const scopes: MtwContainerQualificationScope[] = [
+  'PES_EXAMINATION',
+  'ACEP_EXAMINATION',
+  'DRY_CARGO',
+  'REEFER_CARGO',
+  'FOOD_GRADE_CARGO',
+  'PEST_CARGO',
+  'DANGEROUS_CARGO',
+];
+const readable = (value: string) => value.replaceAll('_', ' ').toLowerCase();
+const time = (value: string) => new Date(value).toLocaleString();
+
+function Field({
+  label,
+  name,
+  type = 'text',
+  maxLength = 255,
+  required = true,
+}: {
+  label: string;
+  name: string;
+  type?: string;
+  maxLength?: number;
+  required?: boolean;
+}) {
+  return (
+    <label className="block text-sm">
+      {label}
+      <Input
+        name={name}
+        type={type}
+        required={required}
+        maxLength={maxLength}
+        step={type === 'datetime-local' ? 1 : undefined}
+        className="mt-1"
+      />
+    </label>
+  );
+}
+function Selector({
+  label,
+  value,
+  onChange,
+  children,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  children: ReactNode;
+}) {
+  return (
+    <label className="block text-sm">
+      {label}
+      <select
+        aria-label={label}
+        className={selectStyle}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      >
+        {children}
+      </select>
+    </label>
+  );
+}
+function Pages({
+  offset,
+  setOffset,
+  hasMore,
+  loading,
+  label,
+}: {
+  offset: number;
+  setOffset: (value: number) => void;
+  hasMore?: boolean;
+  loading: boolean;
+  label: string;
+}) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button
+        type="button"
+        variant="outline"
+        disabled={offset === 0 || loading}
+        onClick={() => setOffset(Math.max(0, offset - 25))}
+      >
+        Previous {label}
+      </Button>
+      <Button
+        type="button"
+        variant="outline"
+        disabled={!hasMore || loading || offset >= 10000}
+        onClick={() => setOffset(offset + 25)}
+      >
+        Next {label}
+      </Button>
+    </div>
+  );
+}
+
+export default function ContainerConditionPage() {
+  const { workspaceId, currentUser, tenantId, apiGatewayUrl } = useMoveTheWheels();
+  return (
+    <ConditionWorkbench
+      key={`${workspaceId ?? ''}:${currentUser?.id ?? ''}:${tenantId ?? ''}:${apiGatewayUrl ?? ''}`}
+    />
+  );
+}
+function ConditionWorkbench() {
+  const [containerId, setContainerId] = useState('');
+  const [offset, setOffset] = useState(0);
+  const query = useConditionQuery<ConditionContainersQuery>(ConditionContainersDocument, {
+    pagination: { limit: 25, offset },
+  });
+  return (
+    <PageLayout
+      title="Container condition"
+      subtitle="Recorded examinations, repairs and qualified hold release"
+      icon={<ShieldCheck size={24} />}
+    >
+      <div className="space-y-6">
+        <p className="rounded-lg border p-4 text-sm">
+          Operational records support a human decision. MoveTheWheels does not issue CSC approval,
+          verify an issuer automatically, or certify fitness for carriage. A repair never releases a
+          hold by itself.
+        </p>
+        <section className={box}>
+          <h2 className="text-lg font-semibold">Choose equipment</h2>
+          {query.error && <p role="alert">{query.error}</p>}
+          {query.loading && <p role="status">Loading containers…</p>}
+          <Selector label="Container" value={containerId} onChange={setContainerId}>
+            <option value="">Choose a container</option>
+            {query.data?.mtwContainerPage.items.map((row) => (
+              <option key={row.id} value={row.id}>
+                {row.containerNumber} — {readable(row.equipmentType)}
+              </option>
+            ))}
+          </Selector>
+          <Pages
+            offset={offset}
+            loading={query.loading}
+            hasMore={query.data?.mtwContainerPage.hasMore}
+            label="containers"
+            setOffset={(value) => {
+              setOffset(value);
+              setContainerId('');
+            }}
+          />
+        </section>
+        {containerId && <ConditionRecords key={containerId} containerId={containerId} />}
+      </div>
+    </PageLayout>
+  );
+}
+function ConditionRecords({ containerId }: { containerId: string }) {
+  const { currentUser } = useMoveTheWheels();
+  const task = useConditionAction();
+  const [action, setAction] = useState<Action>('inspection');
+  const [holdId, setHoldId] = useState('');
+  const [inspectionId, setInspectionId] = useState('');
+  const [qualificationId, setQualificationId] = useState('');
+  const [scheme, setScheme] = useState<MtwContainerExaminationScheme>('PES');
+  const [cargo, setCargo] = useState<MtwContainerCargoCategory>('DRY');
+  const [suitability, setSuitability] = useState<MtwContainerSuitability>('REVIEW_REQUIRED');
+  const [evidence, setEvidence] = useState<SelectedEvidence[]>([]);
+  const [selectedDefects, setSelectedDefects] = useState<string[]>([]);
+  const [selectedScopes, setSelectedScopes] = useState<MtwContainerQualificationScope[]>([]);
+  const [defects, setDefects] = useState<
+    Array<{ code: string; severity: MtwContainerDefectSeverity; details: string }>
+  >([]);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [inspectionOffset, setInspectionOffset] = useState(0);
+  const [viewInspectionId, setViewInspectionId] = useState('');
+  const [defectOffset, setDefectOffset] = useState(0);
+  const [holdOffset, setHoldOffset] = useState(0);
+  const [qualificationOffset, setQualificationOffset] = useState(0);
+  const [repairOffset, setRepairOffset] = useState(0);
+  const [historyHoldId, setHistoryHoldId] = useState('');
+  const [releaseOffset, setReleaseOffset] = useState(0);
+  const inspections = useConditionQuery<ConditionInspectionsQuery>(
+    ConditionInspectionsDocument,
+    { containerId, pagination: { limit: 25, offset: inspectionOffset } },
+    task.revision
+  );
+  const inspectionDefects = useConditionQuery<ConditionDefectsQuery>(
+    ConditionDefectsDocument,
+    viewInspectionId
+      ? { inspectionId: viewInspectionId, pagination: { limit: 25, offset: defectOffset } }
+      : null,
+    task.revision
+  );
+  const holds = useConditionQuery<ConditionHoldsQuery>(
+    ConditionHoldsDocument,
+    { containerId, pagination: { limit: 25, offset: holdOffset } },
+    task.revision
+  );
+  const qualifications = useConditionQuery<ConditionQualificationsQuery>(
+    ConditionQualificationsDocument,
+    { pagination: { limit: 25, offset: qualificationOffset } },
+    task.revision
+  );
+  const hold = holds.data?.mtwContainerHoldPage.items.find((item) => item.id === holdId);
+  const qualification = qualifications.data?.mtwContainerQualificationPage.items.find(
+    (item) => item.id === qualificationId
+  );
+  const heldDefects = useConditionQuery<ConditionDefectsQuery>(
+    ConditionDefectsDocument,
+    hold?.inspectionId
+      ? { inspectionId: hold.inspectionId, pagination: { limit: 25, offset: 0 } }
+      : null,
+    task.revision
+  );
+  const repairs = useConditionQuery<ConditionRepairsQuery>(
+    ConditionRepairsDocument,
+    historyHoldId
+      ? { holdId: historyHoldId, pagination: { limit: 25, offset: repairOffset } }
+      : null,
+    task.revision
+  );
+  const releases = useConditionQuery<ConditionReleasesQuery>(
+    ConditionReleasesDocument,
+    { containerId, pagination: { limit: 25, offset: releaseOffset } },
+    task.revision
+  );
+
+  const save = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setValidationError(null);
+    const fields = new FormData(event.currentTarget);
+    const text = (name: string) => String(fields.get(name) ?? '').trim();
+    const instant = (name: string) => {
+      const date = new Date(text(name));
+      if (!Number.isFinite(date.getTime())) throw new Error('Enter a valid date and time.');
+      return date.toISOString();
+    };
+    const proof = evidence.map(({ fileId, versionId }) => ({ fileId, versionId }));
+    try {
+      if (action !== 'revoke' && proof.length === 0)
+        throw new Error('Choose at least one exact evidence version.');
+      if (action === 'inspection')
+        await task.run(
+          RecordInspectionDocument,
+          {
+            containerId,
+            inspectedAt: instant('inspectedAt'),
+            templateVersion: text('templateVersion'),
+            examinationScheme: scheme,
+            cscPlateVersionId: text('cscPlateVersionId'),
+            examinationVersionId: text('examinationVersionId'),
+            nextExaminationAt: scheme === 'PES' ? instant('nextExaminationAt') : undefined,
+            acepReference: scheme === 'ACEP' ? text('acepReference') : undefined,
+            cargoCategory: cargo,
+            suitability,
+            evidence: proof,
+            defects,
+            resolvedDefectIds: selectedDefects,
+          },
+          'Inspection recorded. Severe defects create a hold.'
+        );
+      if (action === 'hold')
+        await task.run(
+          CreateConditionHoldDocument,
+          { containerId, reason: text('reason'), heldAt: instant('heldAt'), evidence: proof },
+          'Operational hold recorded.'
+        );
+      if (action === 'repair') {
+        if (!hold || hold.status !== 'OPEN') throw new Error('Choose an open hold.');
+        await task.run(
+          RecordConditionRepairDocument,
+          {
+            holdId: hold.id,
+            expectedVersion: hold.version,
+            completedAt: instant('completedAt'),
+            workDescription: text('workDescription'),
+            defectIds: selectedDefects,
+            evidence: proof,
+          },
+          'Repair recorded. The hold remains open.'
+        );
+      }
+      if (action === 'qualification' && selectedScopes.length === 0)
+        throw new Error('Choose at least one examination or cargo scope.');
+      if (action === 'qualification')
+        await task.run(
+          SubmitInspectorQualificationDocument,
+          {
+            issuerName: text('issuerName'),
+            credentialReference: text('credentialReference'),
+            validFrom: instant('validFrom'),
+            validUntil: instant('validUntil'),
+            scopes: selectedScopes,
+            evidence: proof,
+          },
+          'Qualification submitted for a separate human review.'
+        );
+      if (action === 'review') {
+        if (!qualification || qualification.subjectActorId === currentUser?.id)
+          throw new Error('Choose a qualification submitted by another human.');
+        await task.run(
+          ReviewInspectorQualificationDocument,
+          {
+            qualificationId: qualification.id,
+            expectedVersion: qualification.version,
+            issuerConfirmationReference: text('issuerConfirmationReference'),
+            reviewNote: text('reviewNote'),
+            evidence: proof,
+          },
+          'Human issuer review recorded.'
+        );
+      }
+      if (action === 'revoke') {
+        if (!qualification) throw new Error('Choose a qualification.');
+        await task.run(
+          RevokeInspectorQualificationDocument,
+          {
+            qualificationId: qualification.id,
+            expectedVersion: qualification.version,
+            reason: text('reason'),
+          },
+          'Qualification revoked.'
+        );
+      }
+      if (action === 'release') {
+        if (!hold || hold.status !== 'OPEN' || !qualification || !inspectionId)
+          throw new Error(
+            'Choose an open hold, current inspection and your reviewed qualification.'
+          );
+        await task.run(
+          ReleaseConditionHoldDocument,
+          {
+            holdId: hold.id,
+            expectedVersion: hold.version,
+            inspectionId,
+            qualificationId: qualification.id,
+            resolutionReview: text('resolutionReview'),
+            evidence: proof,
+          },
+          'Qualified release decision recorded. Other open holds still apply.'
+        );
+      }
+    } catch (failure) {
+      setValidationError(failure instanceof Error ? failure.message : 'Check the record fields.');
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <section className={box}>
+        <h2 className="text-lg font-semibold">Condition history</h2>
+        {inspections.error && <p role="alert">Inspections unavailable: {inspections.error}</p>}
+        {inspections.loading && <p role="status">Loading inspections…</p>}
+        <ul className="space-y-2">
+          {inspections.data?.mtwContainerInspectionPage.items.map((row) => (
+            <li key={row.id} className="rounded border p-3 text-sm">
+              {time(row.inspectedAt)} — {readable(row.suitability)}, {row.examinationScheme},{' '}
+              {readable(row.cargoCategory)}. {row.defectCount} defects, {row.severeDefectCount}{' '}
+              severe. Template {row.templateVersion}.
+            </li>
+          ))}
+        </ul>
+        <Pages
+          offset={inspectionOffset}
+          setOffset={(value) => {
+            setInspectionOffset(value);
+            setInspectionId('');
+            setViewInspectionId('');
+            setDefectOffset(0);
+          }}
+          hasMore={inspections.data?.mtwContainerInspectionPage.hasMore}
+          loading={inspections.loading}
+          label="inspections"
+        />
+        {inspections.data && inspections.data.mtwContainerInspectionPage.items.length === 0 && (
+          <p>No inspections recorded on this page.</p>
+        )}
+        <Selector
+          label="Inspect recorded defects"
+          value={viewInspectionId}
+          onChange={(value) => {
+            setViewInspectionId(value);
+            setDefectOffset(0);
+          }}
+        >
+          <option value="">Choose an inspection</option>
+          {inspections.data?.mtwContainerInspectionPage.items.map((row) => (
+            <option key={row.id} value={row.id}>
+              {time(row.inspectedAt)} — {readable(row.suitability)} — {row.templateVersion}
+            </option>
+          ))}
+        </Selector>
+        {viewInspectionId && (
+          <div className="space-y-2">
+            {inspectionDefects.error && <p role="alert">{inspectionDefects.error}</p>}
+            {inspectionDefects.loading && <p role="status">Loading recorded defects…</p>}
+            <ul className="space-y-2">
+              {inspectionDefects.data?.mtwContainerDefectPage.items.map((row) => (
+                <li key={row.id} className="rounded border p-3 text-sm">
+                  {row.code} — {readable(row.severity)} — {row.details}
+                </li>
+              ))}
+            </ul>
+            {inspectionDefects.data?.mtwContainerDefectPage.items.length === 0 && (
+              <p>No defects were recorded in this inspection.</p>
+            )}
+            <Pages
+              offset={defectOffset}
+              setOffset={setDefectOffset}
+              hasMore={inspectionDefects.data?.mtwContainerDefectPage.hasMore}
+              loading={inspectionDefects.loading}
+              label="defects"
+            />
+          </div>
+        )}
+        {holds.error && <p role="alert">Holds unavailable: {holds.error}</p>}
+        <ul className="space-y-2">
+          {holds.data?.mtwContainerHoldPage.items.map((row) => (
+            <li key={row.id} className="rounded border p-3 text-sm">
+              {readable(row.status)} — {row.reason} — {time(row.heldAt)}. Revision {row.version}.
+            </li>
+          ))}
+        </ul>
+        <Pages
+          offset={holdOffset}
+          setOffset={(value) => {
+            setHoldOffset(value);
+            setHoldId('');
+            setSelectedDefects([]);
+          }}
+          hasMore={holds.data?.mtwContainerHoldPage.hasMore}
+          loading={holds.loading}
+          label="holds"
+        />
+      </section>
+      <section className={box}>
+        <h2 className="text-lg font-semibold">Record a decision or event</h2>
+        <Selector
+          label="Action"
+          value={action}
+          onChange={(value) => {
+            if (actions.some((item) => item === value)) {
+              const next = actions.find((item) => item === value);
+              if (next) setAction(next);
+            }
+            setQualificationId('');
+            setEvidence([]);
+            setSelectedDefects([]);
+            setValidationError(null);
+            task.resetFeedback();
+          }}
+        >
+          {actions.map((value) => (
+            <option key={value} value={value}>
+              {actionNames[value]}
+            </option>
+          ))}
+        </Selector>
+        {validationError && <p role="alert">{validationError}</p>}
+        {task.error && <p role="alert">{task.error}</p>}
+        {task.notice && <p role="status">{task.notice}</p>}
+        {task.hasPendingAttempt && (
+          <div className="space-y-2 rounded border p-3 text-sm">
+            <p>
+              A failed response may still have committed. An unchanged retry preserves its original
+              request and revision. Check history before discarding the attempt to start another.
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              disabled={task.busy}
+              onClick={task.discardAttempt}
+            >
+              Discard failed attempt
+            </Button>
+          </div>
+        )}
+        <form
+          key={action}
+          onSubmit={(event) => {
+            void save(event);
+          }}
+          className="space-y-4"
+        >
+          {['inspection', 'repair', 'release'].includes(action) && (
+            <Selector
+              label="Hold being addressed"
+              value={holdId}
+              onChange={(value) => {
+                setHoldId(value);
+                setSelectedDefects([]);
+                setRepairOffset(0);
+              }}
+            >
+              <option value="">Choose a hold (optional for a new inspection)</option>
+              {holds.data?.mtwContainerHoldPage.items
+                .filter((row) => row.status === 'OPEN')
+                .map((row) => (
+                  <option key={row.id} value={row.id}>
+                    {row.reason} — {time(row.heldAt)}
+                  </option>
+                ))}
+            </Selector>
+          )}
+          {action === 'inspection' && (
+            <>
+              <Field label="Actual inspection time" name="inspectedAt" type="datetime-local" />
+              <Field label="Inspection template version" name="templateVersion" maxLength={120} />
+              <Selector
+                label="Recorded examination scheme"
+                value={scheme}
+                onChange={(value) => setScheme(value === 'ACEP' ? 'ACEP' : 'PES')}
+              >
+                <option value="PES">Periodic examination (PES)</option>
+                <option value="ACEP">Approved continuous examination programme (ACEP)</option>
+              </Selector>
+              {scheme === 'PES' ? (
+                <Field
+                  label="Recorded next examination due"
+                  name="nextExaminationAt"
+                  type="datetime-local"
+                />
+              ) : (
+                <Field label="Recorded ACEP programme reference" name="acepReference" />
+              )}
+              <Selector
+                label="Cargo category"
+                value={cargo}
+                onChange={(value) => {
+                  const match = (
+                    ['DRY', 'REEFER', 'FOOD_GRADE', 'PEST', 'DANGEROUS'] as const
+                  ).find((item) => item === value);
+                  if (match) setCargo(match);
+                }}
+              >
+                {['DRY', 'REEFER', 'FOOD_GRADE', 'PEST', 'DANGEROUS'].map((value) => (
+                  <option key={value} value={value}>
+                    {readable(value)}
+                  </option>
+                ))}
+              </Selector>
+              <Selector
+                label="Recorded suitability"
+                value={suitability}
+                onChange={(value) => {
+                  const match = (['ACCEPTABLE', 'REJECTED', 'REVIEW_REQUIRED'] as const).find(
+                    (item) => item === value
+                  );
+                  if (match) setSuitability(match);
+                }}
+              >
+                {['ACCEPTABLE', 'REJECTED', 'REVIEW_REQUIRED'].map((value) => (
+                  <option key={value} value={value}>
+                    {readable(value)}
+                  </option>
+                ))}
+              </Selector>
+              <fieldset className="space-y-3">
+                <legend>Defects found (up to 20)</legend>
+                {defects.map((defect, index) => (
+                  <div key={index} className="space-y-2 rounded border p-3">
+                    <label className="block text-sm">
+                      Defect code
+                      <Input
+                        required
+                        maxLength={120}
+                        value={defect.code}
+                        onChange={(event) =>
+                          setDefects(
+                            defects.map((row, position) =>
+                              position === index ? { ...row, code: event.target.value } : row
+                            )
+                          )
+                        }
+                      />
+                    </label>
+                    <Selector
+                      label={`Defect ${index + 1} severity`}
+                      value={defect.severity}
+                      onChange={(value) => {
+                        const match = (['MINOR', 'MAJOR', 'SEVERE'] as const).find(
+                          (item) => item === value
+                        );
+                        if (match)
+                          setDefects(
+                            defects.map((row, position) =>
+                              position === index ? { ...row, severity: match } : row
+                            )
+                          );
+                      }}
+                    >
+                      {['MINOR', 'MAJOR', 'SEVERE'].map((value) => (
+                        <option key={value} value={value}>
+                          {readable(value)}
+                        </option>
+                      ))}
+                    </Selector>
+                    <label className="block text-sm">
+                      Defect details
+                      <Input
+                        required
+                        maxLength={2000}
+                        value={defect.details}
+                        onChange={(event) =>
+                          setDefects(
+                            defects.map((row, position) =>
+                              position === index ? { ...row, details: event.target.value } : row
+                            )
+                          )
+                        }
+                      />
+                    </label>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() =>
+                        setDefects(defects.filter((_, position) => position !== index))
+                      }
+                    >
+                      Remove defect
+                    </Button>
+                  </div>
+                ))}
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={defects.length >= 20}
+                  onClick={() =>
+                    setDefects([...defects, { code: '', severity: 'MINOR', details: '' }])
+                  }
+                >
+                  Add defect
+                </Button>
+              </fieldset>
+            </>
+          )}
+          {action === 'hold' && (
+            <>
+              <Field label="Operational hold reason" name="reason" maxLength={2000} />
+              <Field label="Actual hold time" name="heldAt" type="datetime-local" />
+            </>
+          )}
+          {action === 'repair' && (
+            <>
+              <Field
+                label="Actual repair completion time"
+                name="completedAt"
+                type="datetime-local"
+              />
+              <Field label="Repair work performed" name="workDescription" maxLength={2000} />
+              <p className="text-sm">Recording repair evidence leaves the hold open.</p>
+            </>
+          )}
+          {['inspection', 'repair'].includes(action) && hold?.inspectionId && (
+            <fieldset className="space-y-2">
+              <legend>
+                {action === 'inspection'
+                  ? 'Held defects explicitly resolved by this examination'
+                  : 'Held defects addressed by this repair'}
+              </legend>
+              {heldDefects.error && <p role="alert">{heldDefects.error}</p>}
+              {heldDefects.data?.mtwContainerDefectPage.items
+                .filter((defect) => hold.defectIds.includes(defect.id))
+                .map((defect) => (
+                  <label key={defect.id} className="flex gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      checked={selectedDefects.includes(defect.id)}
+                      onChange={() =>
+                        setSelectedDefects(
+                          selectedDefects.includes(defect.id)
+                            ? selectedDefects.filter((id) => id !== defect.id)
+                            : [...selectedDefects, defect.id]
+                        )
+                      }
+                    />
+                    {defect.code} — {defect.details}
+                  </label>
+                ))}
+            </fieldset>
+          )}
+          {action === 'qualification' && (
+            <>
+              <p className="text-sm">
+                This submission belongs to you. Another authorized human must record issuer
+                confirmation.
+              </p>
+              <Field label="Credential issuer" name="issuerName" />
+              <Field label="Credential reference" name="credentialReference" />
+              <Field label="Qualification valid from" name="validFrom" type="datetime-local" />
+              <Field label="Qualification valid until" name="validUntil" type="datetime-local" />
+              <fieldset className="space-y-2">
+                <legend>Examination and cargo scopes</legend>
+                {scopes.map((scope) => (
+                  <label key={scope} className="flex gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      checked={selectedScopes.includes(scope)}
+                      onChange={() =>
+                        setSelectedScopes(
+                          selectedScopes.includes(scope)
+                            ? selectedScopes.filter((value) => value !== scope)
+                            : [...selectedScopes, scope]
+                        )
+                      }
+                    />
+                    {readable(scope)}
+                  </label>
+                ))}
+              </fieldset>
+            </>
+          )}
+          {['review', 'revoke', 'release'].includes(action) && (
+            <Selector label="Qualification" value={qualificationId} onChange={setQualificationId}>
+              <option value="">Choose a qualification</option>
+              {qualifications.data?.mtwContainerQualificationPage.items.map((row) => (
+                <option
+                  key={row.id}
+                  value={row.id}
+                  disabled={
+                    action === 'review'
+                      ? row.status !== 'SUBMITTED' || row.subjectActorId === currentUser?.id
+                      : action === 'release'
+                        ? row.status !== 'HUMAN_REVIEWED' || row.subjectActorId !== currentUser?.id
+                        : row.status === 'REVOKED'
+                  }
+                >
+                  {row.issuerName} — {row.credentialReference} — {readable(row.status)}
+                </option>
+              ))}
+            </Selector>
+          )}
+          {action === 'review' && (
+            <>
+              <Field label="Issuer confirmation reference" name="issuerConfirmationReference" />
+              <Field label="Human review notes" name="reviewNote" maxLength={2000} />
+              <p className="text-sm">
+                Record what you independently confirmed with the issuer. Software does not validate
+                the credential automatically.
+              </p>
+            </>
+          )}
+          {action === 'revoke' && (
+            <Field label="Revocation reason" name="reason" maxLength={2000} />
+          )}
+          {action === 'release' && (
+            <>
+              <Selector label="Release inspection" value={inspectionId} onChange={setInspectionId}>
+                <option value="">Choose a current inspection</option>
+                {inspections.data?.mtwContainerInspectionPage.items.map((row) => (
+                  <option
+                    key={row.id}
+                    value={row.id}
+                    disabled={row.suitability !== 'ACCEPTABLE' || row.severeDefectCount !== 0}
+                  >
+                    {time(row.inspectedAt)} — {readable(row.suitability)} —{' '}
+                    {readable(row.cargoCategory)}
+                  </option>
+                ))}
+              </Selector>
+              <Field
+                label="Explicit hold resolution review"
+                name="resolutionReview"
+                maxLength={2000}
+              />
+              <p className="text-sm">
+                The server checks current qualification, resolved defects, inspection chronology and
+                exact evidence. A newer conflicting inspection blocks release.
+              </p>
+            </>
+          )}
+          {action !== 'revoke' && (
+            <ContainerEvidencePicker value={evidence} onChange={setEvidence} />
+          )}
+          {action === 'inspection' && (
+            <fieldset className="space-y-3 rounded-lg border p-4">
+              <legend>Identify examination evidence</legend>
+              <p className="text-sm">
+                Identify which selected version contains the CSC plate and which contains the
+                examination record. A combined document can serve both roles. These are your
+                recorded classifications; the software does not certify their contents.
+              </p>
+              {[
+                ['cscPlateVersionId', 'CSC plate evidence'],
+                ['examinationVersionId', 'Examination document evidence'],
+              ].map(([name, label]) => (
+                <label key={name} className="block text-sm">
+                  {label}
+                  <select
+                    name={name}
+                    aria-label={label}
+                    required
+                    className={selectStyle}
+                    defaultValue=""
+                  >
+                    <option value="">Choose a selected evidence version</option>
+                    {evidence.map((item) => (
+                      <option key={item.versionId} value={item.versionId}>
+                        {item.label}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              ))}
+            </fieldset>
+          )}
+          <Button type="submit" disabled={task.busy}>
+            {task.busy ? 'Saving…' : actionNames[action]}
+          </Button>
+        </form>
+      </section>
+      <section className={box}>
+        <h2 className="text-lg font-semibold">Qualifications</h2>
+        {qualifications.error && (
+          <p role="alert">
+            Qualification records are unavailable for your current access: {qualifications.error}
+          </p>
+        )}
+        <ul className="space-y-2">
+          {qualifications.data?.mtwContainerQualificationPage.items.map((row) => (
+            <li key={row.id} className="rounded border p-3 text-sm">
+              {row.issuerName} — {row.credentialReference} — {readable(row.status)}. Valid{' '}
+              {time(row.validFrom)} to {time(row.validUntil)}. Scopes:{' '}
+              {row.scopes.map(readable).join(', ')}.{' '}
+              {row.subjectActorId === currentUser?.id
+                ? 'Your qualification.'
+                : 'Another inspector.'}
+            </li>
+          ))}
+        </ul>
+        <Pages
+          offset={qualificationOffset}
+          setOffset={(value) => {
+            setQualificationOffset(value);
+            setQualificationId('');
+          }}
+          hasMore={qualifications.data?.mtwContainerQualificationPage.hasMore}
+          loading={qualifications.loading}
+          label="qualifications"
+        />
+      </section>
+      <section className={box}>
+        <h2 className="text-lg font-semibold">Inspect repair history</h2>
+        <Selector
+          label="History hold"
+          value={historyHoldId}
+          onChange={(value) => {
+            setHistoryHoldId(value);
+            setRepairOffset(0);
+          }}
+        >
+          <option value="">Choose a recorded hold</option>
+          {holds.data?.mtwContainerHoldPage.items.map((row) => (
+            <option key={row.id} value={row.id}>
+              {readable(row.status)} — {row.reason} — {time(row.heldAt)}
+            </option>
+          ))}
+        </Selector>
+      </section>
+      {historyHoldId && (
+        <section className={box}>
+          <h2 className="text-lg font-semibold">Repair history for selected hold</h2>
+          {repairs.error && <p role="alert">{repairs.error}</p>}
+          <ul className="space-y-2">
+            {repairs.data?.mtwContainerRepairPage.items.map((row) => (
+              <li key={row.id} className="rounded border p-3 text-sm">
+                {time(row.completedAt)} — {row.workDescription}. Evidence: {row.evidence.length}{' '}
+                versions.
+              </li>
+            ))}
+          </ul>
+          <Pages
+            offset={repairOffset}
+            setOffset={setRepairOffset}
+            hasMore={repairs.data?.mtwContainerRepairPage.hasMore}
+            loading={repairs.loading}
+            label="repairs"
+          />
+        </section>
+      )}
+      <section className={box}>
+        <h2 className="text-lg font-semibold">Release decision history</h2>
+        {releases.error && <p role="alert">{releases.error}</p>}
+        <ul className="space-y-2">
+          {releases.data?.mtwContainerReleaseDecisionPage.items.map((row) => (
+            <li key={row.id} className="rounded border p-3 text-sm">
+              {time(row.decidedAt)} — {row.resolutionReview}. Evidence: {row.evidence.length}{' '}
+              versions.
+            </li>
+          ))}
+        </ul>
+        <Pages
+          offset={releaseOffset}
+          setOffset={setReleaseOffset}
+          hasMore={releases.data?.mtwContainerReleaseDecisionPage.hasMore}
+          loading={releases.loading}
+          label="decisions"
+        />
+      </section>
+    </div>
+  );
+}