@burdenoff/microfe-movethewheels 2026.930.5 → 2026.1010.1

package/src/movethewheels/components/ReuseProposalForm.tsx

@@ -0,0 +1,484 @@
+import { reuseText, reuseInteger, readReuseSource } from '../utils/reuseForm';
+import { useState } from 'react';
+import { Button } from './ui';
+import { ContainerEvidencePicker, type SelectedEvidence } from './ContainerEvidencePicker';
+import { ReuseField, ReusePager, ReuseState, PinnedSelect } from './ReuseControls';
+import { ReuseSourceFields } from './ReuseSourceFields';
+import { freeTimeIso } from '../utils/freeTimeDate';
+import { useConditionQuery } from '../hooks/useContainerCondition';
+import { EQUIPMENT_TYPES } from '../hooks/useContainerLifecycle';
+import {
+  ReuseEventsDocument,
+  ReuseInspectionsDocument,
+  ReuseQualificationsDocument,
+  ReuseRouteDocument,
+  type ReuseEventsQuery,
+  type ReuseInspectionsQuery,
+  type ReuseQualificationsQuery,
+  type ReuseRouteQuery,
+  type ReuseProposalFieldsFragment,
+  type ReturnInstructionFieldsFragment,
+  type RecordMtwReuseProposalInput,
+  type MtwContainerCargoCategory,
+  type MtwEquipmentType,
+} from '../../generated/empty-reuse-operations';
+export type ReuseProposalDraft = Omit<
+  RecordMtwReuseProposalInput,
+  'idempotencyKey' | 'expectedCycleVersion' | 'cycleId'
+>;
+const categories: MtwContainerCargoCategory[] = [
+  'DRY',
+  'REEFER',
+  'FOOD_GRADE',
+  'PEST',
+  'DANGEROUS',
+];
+export function ReuseProposalForm({
+  cycleId,
+  containerId,
+  instruction,
+  initial,
+  busy,
+  onSubmit,
+}: {
+  cycleId: string;
+  containerId: string;
+  instruction: ReturnInstructionFieldsFragment;
+  initial?: ReuseProposalFieldsFragment;
+  busy: boolean;
+  onSubmit: (input: ReuseProposalDraft) => Promise<unknown>;
+}) {
+  const [eventOffset, setEventOffset] = useState(0);
+  const [inspectionOffset, setInspectionOffset] = useState(0);
+  const [qualificationOffset, setQualificationOffset] = useState(0);
+  const [eventId, setEventId] = useState(initial?.emptyEventId ?? '');
+  const [inspectionId, setInspectionId] = useState(initial?.inspectionId ?? '');
+  const [qualificationId, setQualificationId] = useState(
+    initial?.assessment.conditionQualificationId ?? ''
+  );
+  const [routeInput, setRouteInput] = useState(initial?.transportRouteId ?? '');
+  const [routeRevision, setRouteRevision] = useState(0);
+  const [routeId, setRouteId] = useState(initial?.transportRouteId ?? '');
+  const [equipment, setEquipment] = useState<MtwEquipmentType>(
+    initial?.requiredEquipmentType ?? 'DRY_20'
+  );
+  const [cargo, setCargo] = useState<MtwContainerCargoCategory>(initial?.cargoCategory ?? 'DRY');
+  const [hasTiming, setHasTiming] = useState(!!initial?.assessment.timing);
+  const [hasBinding, setHasBinding] = useState(!!initial?.assessment.routeBinding);
+  const [evidence, setEvidence] = useState<SelectedEvidence[]>(
+    () =>
+      initial?.evidence.map((item) => ({
+        fileId: item.fileId,
+        versionId: item.versionId,
+        label: `Pinned evidence version ${item.versionId}`,
+      })) ?? []
+  );
+  const [error, setError] = useState<string | null>(null);
+  const events = useConditionQuery<ReuseEventsQuery>(ReuseEventsDocument, {
+    cycleId,
+    pagination: { limit: 25, offset: eventOffset },
+  });
+  const inspections = useConditionQuery<ReuseInspectionsQuery>(ReuseInspectionsDocument, {
+    containerId,
+    pagination: { limit: 25, offset: inspectionOffset },
+  });
+  const qualifications = useConditionQuery<ReuseQualificationsQuery>(ReuseQualificationsDocument, {
+    pagination: { limit: 25, offset: qualificationOffset },
+  });
+  const route = useConditionQuery<ReuseRouteQuery>(
+    ReuseRouteDocument,
+    routeId ? { id: routeId } : null,
+    routeRevision
+  );
+  const routeRecord = route.data?.route;
+  const waypoints = Array.isArray(routeRecord?.waypoints) ? routeRecord.waypoints : null;
+  const timing = initial?.assessment.timing;
+  return (
+    <form
+      className="space-y-5"
+      onSubmit={async (event) => {
+        event.preventDefault();
+        setError(null);
+        try {
+          const values = new FormData(event.currentTarget);
+          if (!eventId || !inspectionId || !routeRecord || routeInput.trim() !== routeId)
+            throw new Error('Select pinned empty event, inspection and a loaded current route.');
+          if (!evidence.length) throw new Error('Choose exact proposal evidence.');
+          const proposalReference = reuseText(values, 'proposalReference');
+          if (initial && proposalReference !== initial.proposalReference)
+            throw new Error(
+              'Keep the same proposal reference when recording a revision; choose a new draft for a new reference.'
+            );
+          const input: ReuseProposalDraft = {
+            instructionId: instruction.id,
+            proposalReference,
+            expectedProposalRevision: initial?.revision ?? 0,
+            emptyEventId: eventId,
+            inspectionId,
+            transportRouteId: routeRecord.id,
+            transportRouteUpdatedAt: routeRecord.updatedAt,
+            exportBookingReference: reuseText(values, 'exportBookingReference'),
+            exporterReference: reuseText(values, 'exporterReference'),
+            handoffLocationReference: reuseText(values, 'handoffLocationReference'),
+            handoffFrom: freeTimeIso(reuseText(values, 'handoffFrom')),
+            handoffUntil: freeTimeIso(reuseText(values, 'handoffUntil')),
+            requiredEquipmentType: equipment,
+            cargoCategory: cargo,
+            conditionQualificationId: qualificationId || undefined,
+            evidence: evidence.map(({ fileId, versionId }) => ({ fileId, versionId })),
+            sources: {
+              booking: readReuseSource(values, 'booking', evidence),
+              roadAccess: readReuseSource(values, 'roadAccess', evidence),
+              conditionSuitability: readReuseSource(values, 'conditionSuitability', evidence),
+              retainedReturnPlan: readReuseSource(values, 'retainedReturnPlan', evidence),
+            },
+          };
+          if (hasTiming)
+            input.timing = {
+              departureAt: freeTimeIso(reuseText(values, 'departureAt')),
+              maxTravelSeconds: reuseInteger(values, 'maxTravelSeconds'),
+              maxWaitSeconds: reuseInteger(values, 'maxWaitSeconds'),
+              siteOpenAt: freeTimeIso(reuseText(values, 'siteOpenAt')),
+              siteCloseAt: freeTimeIso(reuseText(values, 'siteCloseAt')),
+              maxFullReuseAndReturnSeconds: reuseInteger(values, 'maxFullReuseAndReturnSeconds'),
+              plannedReturnFrom: freeTimeIso(reuseText(values, 'plannedReturnFrom')),
+              plannedReturnUntil: freeTimeIso(reuseText(values, 'plannedReturnUntil')),
+              siteWaitingLocationReference:
+                reuseText(values, 'siteWaitingLocationReference') || undefined,
+              returnWaitingLocationReference:
+                reuseText(values, 'returnWaitingLocationReference') || undefined,
+            };
+          if (hasBinding) {
+            const handoff = reuseInteger(values, 'handoffWaypointIndex');
+            const returning = reuseInteger(values, 'returnWaypointIndex');
+            if (!waypoints || handoff >= returning || returning >= waypoints.length)
+              throw new Error(
+                'Choose ordered handoff then return waypoint indexes within the loaded route.'
+              );
+            input.routeBinding = { handoffWaypointIndex: handoff, returnWaypointIndex: returning };
+          }
+          await onSubmit(input);
+        } catch (failure) {
+          setError(failure instanceof Error ? failure.message : 'Invalid proposal.');
+        }
+      }}
+    >
+      <fieldset disabled={busy} className="space-y-5">
+        <p className="text-sm">
+          {initial
+            ? `Revision of ${initial.proposalReference}, selected revision${initial.revision}.`
+            : 'New immutable planning draft.'}{' '}
+          Current return instruction v{instruction.version}: {instruction.locationReference},{' '}
+          {instruction.returnFrom}–{instruction.returnUntil}. New revisions do not inherit
+          permission or allocation. Blank source, timing, route binding and qualification remain
+          UNKNOWN.
+        </p>
+        <div className="grid gap-3 md:grid-cols-2">
+          <ReuseField
+            label="Proposal reference"
+            name="proposalReference"
+            value={initial?.proposalReference}
+            maxLength={120}
+          />
+          <ReuseField
+            label="Exact export booking reference"
+            name="exportBookingReference"
+            value={initial?.exportBookingReference}
+          />
+          <ReuseField
+            label="Export recipient reference"
+            name="exporterReference"
+            value={initial?.exporterReference}
+          />
+          <ReuseField
+            label="Handoff location reference"
+            name="handoffLocationReference"
+            value={initial?.handoffLocationReference}
+          />
+          <ReuseField
+            label="Handoff from (ISO with timezone)"
+            name="handoffFrom"
+            value={initial?.handoffFrom}
+          />
+          <ReuseField
+            label="Handoff until (ISO with timezone)"
+            name="handoffUntil"
+            value={initial?.handoffUntil}
+          />
+          <PinnedSelect
+            label="Required equipment"
+            value={equipment}
+            onChange={(value) => {
+              const next = EQUIPMENT_TYPES.find((item) => item === value);
+              if (next) setEquipment(next);
+            }}
+            options={EQUIPMENT_TYPES.map((id) => ({ id, label: id }))}
+          />
+          <PinnedSelect
+            label="Cargo category"
+            value={cargo}
+            onChange={(value) => {
+              const next = categories.find((item) => item === value);
+              if (next) setCargo(next);
+            }}
+            options={categories.map((id) => ({ id, label: id }))}
+          />
+        </div>
+        <section className="space-y-3" aria-label="Actual empty observation">
+          <PinnedSelect
+            label="Actual empty observation"
+            value={eventId}
+            onChange={setEventId}
+            options={
+              events.data?.mtwContainerEventPage.items
+                .filter((item) => item.kind === 'ACTUAL' && item.eventType === 'EMPTY_READY')
+                .map((item) => ({
+                  id: item.id,
+                  label: `${item.occurredAt} — ${item.sourceReference ?? item.source} — ${item.id}`,
+                })) ?? []
+            }
+          />
+          <ReuseState {...events} />
+          <ReusePager
+            page={events.data?.mtwContainerEventPage}
+            offset={eventOffset}
+            onChange={setEventOffset}
+            busy={busy || events.loading}
+          />
+          <p className="text-sm">
+            Planned or estimated events cannot establish actual availability; later events can
+            supersede an earlier empty observation.
+          </p>
+        </section>
+        <section className="space-y-3" aria-label="Pinned condition inspection">
+          <PinnedSelect
+            label="Condition inspection"
+            value={inspectionId}
+            onChange={setInspectionId}
+            options={
+              inspections.data?.mtwContainerInspectionPage.items.map((item) => ({
+                id: item.id,
+                label: `${item.inspectedAt} — ${item.cargoCategory} — ${item.suitability} — inspector ${item.inspectorActorId} — ${item.id}`,
+              })) ?? []
+            }
+          />
+          <ReuseState {...inspections} />
+          <ReusePager
+            page={inspections.data?.mtwContainerInspectionPage}
+            offset={inspectionOffset}
+            onChange={setInspectionOffset}
+            busy={busy || inspections.loading}
+          />
+        </section>
+        <section className="space-y-3" aria-label="Condition examination qualification">
+          <PinnedSelect
+            label="Condition qualification"
+            value={qualificationId}
+            onChange={setQualificationId}
+            required={false}
+            options={
+              qualifications.data?.mtwContainerQualificationPage.items.map((item) => ({
+                id: item.id,
+                label: `${item.issuerName} — ${item.credentialReference} — ${item.status} — subject ${item.subjectActorId} — scopes ${item.scopes.join(', ')} — ${item.validFrom}–${item.validUntil}`,
+              })) ?? []
+            }
+          />
+          <ReuseState {...qualifications} />
+          <ReusePager
+            page={qualifications.data?.mtwContainerQualificationPage}
+            offset={qualificationOffset}
+            onChange={setQualificationOffset}
+            busy={busy || qualifications.loading}
+          />
+          <p className="text-sm">
+            A recorded human review is not software certification. The server checks the exact
+            qualification, scope, validity and latest condition.
+          </p>
+        </section>
+        <section className="space-y-3 rounded-lg border p-4" aria-label="Transport route binding">
+          <label className="block">
+            Same-workspace route ID
+            <input
+              className="mt-1 w-full rounded border p-2"
+              value={routeInput}
+              onChange={(event) => setRouteInput(event.target.value)}
+              required
+            />
+          </label>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={!routeInput.trim() || route.loading}
+            onClick={() => {
+              setRouteId(routeInput.trim());
+              setRouteRevision((value) => value + 1);
+            }}
+          >
+            Load route revision
+          </Button>
+          <ReuseState {...route} />
+          {routeRecord && (
+            <>
+              <p>
+                {routeRecord.name} — {routeRecord.status}. Pinned updatedAt: {routeRecord.updatedAt}
+              </p>
+              <p className="text-sm">
+                Ordered waypoint indexes start at0. Complete route content is fingerprinted by the
+                server.
+              </p>
+              {waypoints ? (
+                <>
+                  <pre className="max-h-48 overflow-auto whitespace-pre-wrap break-all text-xs">
+                    {JSON.stringify(waypoints.slice(0, 50), null, 2)}
+                  </pre>
+                  {waypoints.length > 50 && (
+                    <p>
+                      Preview shows first50 of {waypoints.length} waypoints; confirm selected
+                      indexes in the source route.
+                    </p>
+                  )}
+                </>
+              ) : (
+                <p>Route waypoints unavailable; binding remains unresolved.</p>
+              )}
+            </>
+          )}
+          <label className="block">
+            <input
+              type="checkbox"
+              checked={hasBinding}
+              onChange={(event) => setHasBinding(event.target.checked)}
+            />{' '}
+            Pin ordered handoff and return waypoints (otherwise UNKNOWN)
+          </label>
+          {hasBinding && (
+            <div className="grid gap-3 md:grid-cols-2">
+              <ReuseField
+                label="Handoff waypoint index"
+                name="handoffWaypointIndex"
+                type="number"
+                value={String(initial?.assessment.routeBinding?.handoffWaypointIndex ?? '')}
+              />
+              <ReuseField
+                label="Return waypoint index"
+                name="returnWaypointIndex"
+                type="number"
+                value={String(initial?.assessment.routeBinding?.returnWaypointIndex ?? '')}
+              />
+            </div>
+          )}
+        </section>
+        <section className="space-y-3 rounded-lg border p-4" aria-label="Reuse and return timing">
+          <label>
+            <input
+              type="checkbox"
+              checked={hasTiming}
+              onChange={(event) => setHasTiming(event.target.checked)}
+            />{' '}
+            Record bounded full-leg timing (otherwise UNKNOWN)
+          </label>
+          <p className="text-sm">
+            The full bound starts at departure and includes travel, loading/unloading, every
+            post-arrival wait and the return leg. Pre-arrival en-route delay is a separate arrival
+            bound. Site or return waiting needs the corresponding sourced location.
+          </p>
+          {hasTiming && (
+            <div className="grid gap-3 md:grid-cols-2">
+              <ReuseField
+                label="Departure (ISO with timezone)"
+                name="departureAt"
+                value={timing?.departureAt}
+              />
+              <ReuseField
+                label="Maximum travel seconds"
+                name="maxTravelSeconds"
+                type="number"
+                value={String(timing?.maxTravelSeconds ?? '')}
+              />
+              <ReuseField
+                label="Maximum en-route delay/wait before arrival (seconds)"
+                name="maxWaitSeconds"
+                type="number"
+                value={String(timing?.maxWaitSeconds ?? '')}
+              />
+              <ReuseField
+                label="Site opens (ISO with timezone)"
+                name="siteOpenAt"
+                value={timing?.siteOpenAt}
+              />
+              <ReuseField
+                label="Site closes (ISO with timezone)"
+                name="siteCloseAt"
+                value={timing?.siteCloseAt}
+              />
+              <ReuseField
+                label="Maximum full departure-to-return duration (seconds)"
+                name="maxFullReuseAndReturnSeconds"
+                type="number"
+                value={String(timing?.maxFullReuseAndReturnSeconds ?? '')}
+              />
+              <ReuseField
+                label="Site waiting location reference"
+                name="siteWaitingLocationReference"
+                required={false}
+                value={timing?.siteWaitingLocationReference ?? ''}
+              />
+              <ReuseField
+                label="Return waiting location reference"
+                name="returnWaitingLocationReference"
+                required={false}
+                value={timing?.returnWaitingLocationReference ?? ''}
+              />
+              <ReuseField
+                label="Planned return from (ISO with timezone)"
+                name="plannedReturnFrom"
+                value={timing?.plannedReturnFrom}
+              />
+              <ReuseField
+                label="Planned return until (ISO with timezone)"
+                name="plannedReturnUntil"
+                value={timing?.plannedReturnUntil}
+              />
+            </div>
+          )}
+          <p className="text-sm">
+            Covers travel, site waiting, reuse work and return; waiting locations need
+            purpose-specific road-access evidence. Does not calculate or stop commercial clocks.
+          </p>
+        </section>
+        <ContainerEvidencePicker value={evidence} onChange={setEvidence} />
+        <ReuseSourceFields
+          name="booking"
+          label="Export booking"
+          evidence={evidence}
+          initial={initial?.assessment.sources.booking}
+        />
+        <ReuseSourceFields
+          name="roadAccess"
+          label="Road and site access"
+          evidence={evidence}
+          initial={initial?.assessment.sources.roadAccess}
+        />
+        <ReuseSourceFields
+          name="conditionSuitability"
+          label="Condition and cargo suitability"
+          evidence={evidence}
+          initial={initial?.assessment.sources.conditionSuitability}
+        />
+        <ReuseSourceFields
+          name="retainedReturnPlan"
+          label="Retained return obligation"
+          evidence={evidence}
+          initial={initial?.assessment.sources.retainedReturnPlan}
+        />
+        {error && <p role="alert">{error}</p>}
+        <Button
+          type="submit"
+          disabled={busy || route.loading || !routeRecord || routeInput.trim() !== routeId}
+        >
+          Record planning revision
+        </Button>
+      </fieldset>
+    </form>
+  );
+}

package/src/movethewheels/components/ReuseSourceFields.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import type { ReuseSourceFieldsFragment } from '../../generated/empty-reuse-operations';
+import type { SelectedEvidence } from './ContainerEvidencePicker';
+import { ReuseField } from './ReuseControls';
+export function ReuseSourceFields({
+  name,
+  label,
+  evidence,
+  initial,
+}: {
+  name: string;
+  label: string;
+  evidence: SelectedEvidence[];
+  initial?: ReuseSourceFieldsFragment | null;
+}) {
+  const [recorded, setRecorded] = useState(!!initial);
+  return (
+    <fieldset className="space-y-3 rounded-lg border p-4">
+      <legend>{label} source</legend>
+      <label>
+        <select
+          name={`${name}.recorded`}
+          value={recorded ? 'yes' : ''}
+          onChange={(event) => setRecorded(event.target.value === 'yes')}
+        >
+          <option value="">UNKNOWN: no purpose-specific source</option>
+          <option value="yes">Record source attestation for this purpose</option>
+        </select>
+      </label>
+      {recorded && (
+        <>
+          <p className="text-sm">
+            Binding is limited to this exact proposal and source purpose. Recording a source is not
+            external approval or certification.
+          </p>
+          <div className="grid gap-3 md:grid-cols-2">
+            <ReuseField
+              label={`${label} source reference`}
+              name={`${name}.reference`}
+              value={initial?.sourceReference}
+            />
+            <ReuseField
+              label={`${label} source revision`}
+              name={`${name}.revision`}
+              value={initial?.sourceRevision}
+            />
+            <ReuseField
+              label={`${label} observed at (ISO with timezone)`}
+              name={`${name}.observed`}
+              value={initial?.observedAt}
+            />
+            <ReuseField
+              label={`${label} valid from (ISO with timezone)`}
+              name={`${name}.from`}
+              value={initial?.validFrom}
+            />
+            <ReuseField
+              label={`${label} valid until (ISO with timezone)`}
+              name={`${name}.until`}
+              value={initial?.validUntil}
+            />
+          </div>
+          <p>Select exact versions from this proposal’s evidence for this purpose.</p>
+          {!evidence.length && <p>No proposal evidence selected.</p>}
+          {evidence.map((item) => (
+            <label key={item.versionId} className="block text-sm">
+              <input
+                type="checkbox"
+                name={`${name}.evidence`}
+                value={item.versionId}
+                defaultChecked={initial?.evidence.some((row) => row.versionId === item.versionId)}
+              />{' '}
+              {item.label}
+            </label>
+          ))}
+        </>
+      )}
+    </fieldset>
+  );
+}