@burdenoff/microfe-movethewheels 2026.930.4 → 2026.1010.1

package/src/movethewheels/components/consolidation/ConsolidationPlanWorkbench.tsx

@@ -0,0 +1,395 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  ConsolidationShipmentsDocument,
+  ConsolidationShipmentDocument,
+  ConsolidationContainersDocument,
+  ConsolidationCyclesDocument,
+  ConsolidationPlansDocument,
+  ConsolidationPlanDocument,
+  SaveConsolidationPlanDocument,
+  type ConsolidationShipmentsQuery,
+  type ConsolidationShipmentQuery,
+  type ConsolidationContainersQuery,
+  type ConsolidationCyclesQuery,
+  type ConsolidationPlansQuery,
+  type ConsolidationPlanQuery,
+  type SaveMtwConsolidationPlanInput,
+} from '../../../generated/consolidation-operations';
+import { useConditionApi, useConditionQuery } from '../../hooks/useContainerCondition';
+import type { useConsolidationAction } from '../../hooks/useConsolidationAction';
+import { ProcedureField as Field } from '../logistics-procedure/ProcedureFields';
+import { ConsolidationPlanForm, type ConsolidationPlanPin } from './ConsolidationPlanForm';
+import { ConsolidationPlanHistory } from './ConsolidationHistory';
+import { ConsolidationReportsWorkbench } from './ConsolidationReportsWorkbench';
+import {
+  offPageConsolidationContainer,
+  type ConsolidationContainerOption,
+  matchesConsolidationContext,
+  assertConsolidationPredecessor,
+  type ConsolidationContextPin,
+} from '../../utils/consolidationPins';
+import { ReuseState, ReusePager, reuseCard, reuseSelect } from '../ReuseControls';
+import { Button } from '../ui';
+export function ConsolidationPlanWorkbench({
+  actions,
+}: {
+  actions: ReturnType<typeof useConsolidationAction>;
+}) {
+  const active = useRef(true);
+  useEffect(() => {
+    active.current = true;
+    return () => {
+      active.current = false;
+    };
+  }, []);
+  const request = useConditionApi(),
+    [shipmentId, setShipment] = useState(''),
+    [containerId, setContainer] = useState(''),
+    [cycleId, setCycle] = useState(''),
+    [reference, setReference] = useState(''),
+    [selected, setSelected] = useState(''),
+    [shipmentOffset, setShipmentOffset] = useState(0),
+    [containerOffset, setContainerOffset] = useState(0),
+    [cycleOffset, setCycleOffset] = useState(0),
+    [historyOffset, setHistoryOffset] = useState(0),
+    [checking, setChecking] = useState(false),
+    [error, setError] = useState<string | null>(null);
+  const [selectedContainer, setSelectedContainer] = useState<ConsolidationContainerOption | null>(
+    null
+  );
+  const [draft, setDraft] = useState<{
+    pin: ConsolidationPlanPin;
+    context: ConsolidationContextPin;
+    previous: { id: string; version: number } | null;
+    generation: string;
+  } | null>(null);
+  const shipments = useConditionQuery<ConsolidationShipmentsQuery>(
+    ConsolidationShipmentsDocument,
+    { pagination: { limit: 25, offset: shipmentOffset } },
+    actions.revision
+  );
+  const shipment = useConditionQuery<ConsolidationShipmentQuery>(
+    ConsolidationShipmentDocument,
+    shipmentId ? { id: shipmentId } : null,
+    actions.revision
+  );
+  const containers = useConditionQuery<ConsolidationContainersQuery>(
+    ConsolidationContainersDocument,
+    { pagination: { limit: 25, offset: containerOffset } },
+    actions.revision
+  );
+  const cycles = useConditionQuery<ConsolidationCyclesQuery>(
+    ConsolidationCyclesDocument,
+    containerId ? { containerId, pagination: { limit: 25, offset: cycleOffset } } : null,
+    actions.revision
+  );
+  const history = useConditionQuery<ConsolidationPlansQuery>(
+    ConsolidationPlansDocument,
+    shipmentId ? { shipmentId, pagination: { limit: 5, offset: historyOffset } } : null,
+    actions.revision
+  );
+  const latest = useConditionQuery<ConsolidationPlansQuery>(
+    ConsolidationPlansDocument,
+    shipmentId && reference.trim()
+      ? { shipmentId, planReference: reference.trim(), pagination: { limit: 1, offset: 0 } }
+      : null,
+    actions.revision
+  );
+  const exact = useConditionQuery<ConsolidationPlanQuery>(
+    ConsolidationPlanDocument,
+    shipmentId && selected ? { shipmentId, id: selected } : null,
+    actions.revision
+  );
+  const cycle = cycles.data?.mtwContainerCyclePage.items.find((row) => row.id === cycleId) ?? null,
+    previous = latest.data?.mtwConsolidationPlanPage.items[0] ?? null,
+    paused = checking || actions.busy || actions.uncertain;
+  const offPageContainer = offPageConsolidationContainer(
+    containerId,
+    selectedContainer,
+    containers.data?.mtwContainerPage.items ?? []
+  );
+  const changed =
+    !!draft &&
+    !!shipment.data &&
+    !!cycles.data &&
+    !matchesConsolidationContext(draft.context, shipment.data.shipment, cycle);
+  const clear = () => {
+    setDraft(null);
+    setSelected('');
+    setHistoryOffset(0);
+    setError(null);
+  };
+  const save = async (input: Omit<SaveMtwConsolidationPlanInput, 'idempotencyKey'>) => {
+    if (!draft || paused) throw new Error('Review current sources before recording.');
+    setChecking(true);
+    try {
+      const freshShipment = await request<ConsolidationShipmentQuery>(
+        ConsolidationShipmentDocument,
+        { id: draft.context.shipmentId }
+      );
+      const freshCycles = await request<ConsolidationCyclesQuery>(ConsolidationCyclesDocument, {
+        containerId: draft.context.containerId,
+        pagination: { limit: 25, offset: cycleOffset },
+      });
+      const freshCycle =
+        freshCycles.mtwContainerCyclePage.items.find((row) => row.id === draft.context.cycleId) ??
+        null;
+      const freshHistory = await request<ConsolidationPlansQuery>(ConsolidationPlansDocument, {
+        shipmentId: draft.pin.shipmentId,
+        planReference: draft.pin.planReference,
+        pagination: { limit: 1, offset: 0 },
+      });
+      if (!active.current) throw new Error('Context changed. Nothing was sent.');
+      if (!matchesConsolidationContext(draft.context, freshShipment.shipment, freshCycle))
+        throw new Error('Shipment or cycle changed. Refresh and explicitly review a new form.');
+      assertConsolidationPredecessor(
+        draft.previous,
+        freshHistory.mtwConsolidationPlanPage.items[0] ?? null
+      );
+      const result = await actions.run(
+        SaveConsolidationPlanDocument,
+        { ...input },
+        'Plan version recorded.'
+      );
+      if (result) {
+        setDraft(null);
+        setSelected(
+          String(
+            result.saveMtwConsolidationPlan &&
+              typeof result.saveMtwConsolidationPlan === 'object' &&
+              'id' in result.saveMtwConsolidationPlan
+              ? result.saveMtwConsolidationPlan.id
+              : ''
+          )
+        );
+      }
+    } finally {
+      setChecking(false);
+    }
+  };
+  return (
+    <div className="space-y-5">
+      <section className={reuseCard}>
+        <h2 className="text-lg font-semibold">Choose a shipment and container cycle</h2>
+        <fieldset disabled={paused} className="space-y-3">
+          <label className="block">
+            Shipment
+            <select
+              className={reuseSelect}
+              value={shipmentId}
+              onChange={(e) => {
+                setShipment(e.target.value);
+                setCycle('');
+                clear();
+              }}
+            >
+              <option value="">Choose a shipment</option>
+              {shipment.data?.shipment &&
+                !shipments.data?.shipments.some((row) => row.id === shipmentId) && (
+                  <option value={shipmentId}>
+                    {shipment.data.shipment.shipmentNumber} · selected shipment
+                  </option>
+                )}
+              {shipments.data?.shipments.map((row) => (
+                <option key={row.id} value={row.id}>
+                  {row.shipmentNumber} · {row.status}
+                </option>
+              ))}
+            </select>
+          </label>
+          <ReuseState loading={shipments.loading} error={shipments.error} />
+          <div className="flex flex-wrap gap-2">
+            <Button
+              variant="outline"
+              disabled={shipmentOffset === 0}
+              onClick={() => setShipmentOffset(Math.max(0, shipmentOffset - 25))}
+            >
+              Previous shipments
+            </Button>
+            <Button
+              variant="outline"
+              disabled={!shipments.data || shipmentOffset + 25 >= shipments.data.shipmentsCount}
+              onClick={() => setShipmentOffset(shipmentOffset + 25)}
+            >
+              More shipments
+            </Button>
+          </div>
+          <label className="block">
+            Container
+            <select
+              className={reuseSelect}
+              value={containerId}
+              onChange={(e) => {
+                setContainer(e.target.value);
+                setSelectedContainer(
+                  containers.data?.mtwContainerPage.items.find(
+                    (row) => row.id === e.target.value
+                  ) ?? null
+                );
+                setCycle('');
+                setCycleOffset(0);
+                setDraft(null);
+              }}
+            >
+              <option value="">Choose a container</option>
+              {offPageContainer && (
+                <option value={offPageContainer.id}>
+                  {offPageContainer.containerNumber} · {offPageContainer.equipmentType} · selected
+                  container
+                </option>
+              )}
+              {containers.data?.mtwContainerPage.items.map((row) => (
+                <option key={row.id} value={row.id}>
+                  {row.containerNumber} · {row.equipmentType}
+                </option>
+              ))}
+            </select>
+          </label>
+          <ReuseState loading={containers.loading} error={containers.error} />
+          <ReusePager
+            offset={containerOffset}
+            page={containers.data?.mtwContainerPage}
+            busy={paused}
+            onChange={setContainerOffset}
+          />
+          <label className="block">
+            Open cycle for this shipment
+            <select
+              className={reuseSelect}
+              value={cycleId}
+              onChange={(e) => {
+                setCycle(e.target.value);
+                setDraft(null);
+              }}
+            >
+              <option value="">Choose an open cycle</option>
+              {cycles.data?.mtwContainerCyclePage.items
+                .filter((row) => row.shipmentId === shipmentId && row.status === 'OPEN')
+                .map((row) => (
+                  <option key={row.id} value={row.id}>
+                    {row.bookingReference ?? 'No booking reference'} · opened{' '}
+                    {new Date(row.openedAt).toLocaleString()}
+                  </option>
+                ))}
+            </select>
+          </label>
+          <ReuseState loading={cycles.loading} error={cycles.error} />
+          <ReusePager
+            offset={cycleOffset}
+            page={cycles.data?.mtwContainerCyclePage}
+            busy={paused}
+            onChange={(offset) => {
+              setCycleOffset(offset);
+              setCycle('');
+              setDraft(null);
+            }}
+          />
+          <Field
+            label="Plan reference"
+            value={reference}
+            onChange={(value) => {
+              setReference(value);
+              setDraft(null);
+            }}
+            maxLength={120}
+          />
+          <ReuseState
+            loading={shipment.loading || latest.loading}
+            error={shipment.error ?? latest.error}
+          />
+          <Button
+            disabled={!shipment.data?.shipment || !cycle || !latest.data || paused}
+            onClick={() => {
+              const row = shipment.data?.shipment;
+              if (!row || !cycle) return;
+              const context = {
+                shipmentId: row.id,
+                shipmentUpdatedAt: row.updatedAt,
+                cycleId: cycle.id,
+                cycleVersion: cycle.version,
+                containerId: cycle.containerId,
+              };
+              setDraft({
+                context,
+                previous,
+                generation: crypto.randomUUID(),
+                pin: {
+                  shipmentId: row.id,
+                  cycleId: cycle.id,
+                  planReference: reference.trim(),
+                  expectedShipmentUpdatedAt: row.updatedAt,
+                  expectedCycleVersion: cycle.version,
+                  expectedPreviousVersionId: previous?.id ?? null,
+                  expectedVersion: previous?.version ?? 0,
+                },
+              });
+              setError(null);
+            }}
+          >
+            Review sources and start a new plan
+          </Button>
+        </fieldset>
+        {draft && (
+          <>
+            <p>Unsent fields are reset when you explicitly start another plan.</p>
+            {changed && (
+              <p role="alert">Source context changed. Review it again before recording.</p>
+            )}
+            <ConsolidationPlanForm
+              key={draft.generation}
+              pin={draft.pin}
+              busy={
+                paused ||
+                changed ||
+                shipment.loading ||
+                cycles.loading ||
+                latest.loading ||
+                !!shipment.error ||
+                !!cycles.error ||
+                !!latest.error
+              }
+              onSave={async (input) => {
+                try {
+                  await save(input);
+                } catch (f) {
+                  setError(f instanceof Error ? f.message : 'Unable to save.');
+                  throw f;
+                }
+              }}
+            />
+          </>
+        )}
+        {error && <p role="alert">{error}</p>}
+      </section>
+      <section className={reuseCard}>
+        <h2 className="text-lg font-semibold">Plan history</h2>
+        <ReuseState loading={history.loading} error={history.error} />
+        {history.data?.mtwConsolidationPlanPage.items.map((row) => (
+          <Button
+            key={row.id}
+            variant={selected === row.id ? 'default' : 'outline'}
+            disabled={paused}
+            onClick={() => setSelected(row.id)}
+          >
+            {row.planReference} · version {row.version} · {row.facts.hubName}
+          </Button>
+        ))}
+        <ReusePager
+          offset={historyOffset}
+          page={history.data?.mtwConsolidationPlanPage}
+          busy={paused}
+          onChange={setHistoryOffset}
+        />
+        <ReuseState loading={exact.loading} error={exact.error} />
+        {exact.data && <ConsolidationPlanHistory plan={exact.data.mtwConsolidationPlan} />}
+      </section>
+      {exact.data && (
+        <ConsolidationReportsWorkbench
+          key={exact.data.mtwConsolidationPlan.id}
+          plan={exact.data.mtwConsolidationPlan}
+          actions={actions}
+        />
+      )}
+    </div>
+  );
+}

package/src/movethewheels/components/consolidation/ConsolidationReportForm.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import type {
+  ConsolidationPlanQuery,
+  RecordMtwConsolidationObservationInput,
+} from '../../../generated/consolidation-operations';
+import { ContainerEvidencePicker, type SelectedEvidence } from '../ContainerEvidencePicker';
+import { ProcedureField as Field } from '../logistics-procedure/ProcedureFields';
+import {
+  consolidationInstant,
+  consolidationQuantity,
+  nullableText,
+} from '../../utils/consolidationInput';
+import { Button } from '../ui';
+export type ConsolidationReportPin = Omit<
+  RecordMtwConsolidationObservationInput,
+  'reportedQuantity' | 'reportedObservedAt' | 'reason' | 'source' | 'evidence' | 'idempotencyKey'
+>;
+export function ConsolidationReportForm({
+  pin,
+  lot,
+  busy,
+  onSave,
+}: {
+  pin: ConsolidationReportPin;
+  lot: ConsolidationPlanQuery['mtwConsolidationPlan']['facts']['lots'][number];
+  busy: boolean;
+  onSave: (input: Omit<RecordMtwConsolidationObservationInput, 'idempotencyKey'>) => Promise<void>;
+}) {
+  const [quantity, setQuantity] = useState(''),
+    [observed, setObserved] = useState(''),
+    [reason, setReason] = useState(''),
+    [reference, setReference] = useState(''),
+    [revision, setRevision] = useState(''),
+    [evidence, setEvidence] = useState<SelectedEvidence[]>([]),
+    [error, setError] = useState<string | null>(null);
+  const issue = pin.kind === 'ISSUE';
+  return (
+    <form
+      className="space-y-3"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (busy) return;
+        setError(null);
+        void (async () => {
+          if (!issue && (evidence.length < 1 || evidence.length > 10))
+            throw new Error('Choose one to ten evidence versions for this cumulative report.');
+          await onSave({
+            ...pin,
+            reportedQuantity: issue ? null : consolidationQuantity(quantity),
+            reportedObservedAt: observed ? consolidationInstant(observed) : null,
+            reason: reason.trim(),
+            source: { reference: nullableText(reference), revision: nullableText(revision) },
+            evidence: evidence.map(({ fileId, versionId }) => ({ fileId, versionId })),
+          });
+        })().catch((f) => setError(f instanceof Error ? f.message : 'Unable to record report.'));
+      }}
+    >
+      <fieldset disabled={busy} className="space-y-3">
+        <p>
+          {lot.supplierReference} · {lot.lotReference} · {lot.unitReference ?? 'Unknown unit'} (
+          {lot.unitRevision ?? 'Unknown revision'})
+        </p>
+        {issue ? (
+          <p>
+            This is an unresolved reported issue. It contributes no quantity and does not resolve
+            earlier issues.
+          </p>
+        ) : (
+          <>
+            <p>
+              Enter the new cumulative total, not an additional increment. It replaces the previous
+              total for this lot and report kind. Blank means unknown.
+            </p>
+            <Field
+              required={false}
+              label="Reported cumulative quantity"
+              value={quantity}
+              onChange={setQuantity}
+            />
+          </>
+        )}
+        <Field
+          label="Reason / reported discrepancy"
+          value={reason}
+          maxLength={2000}
+          onChange={setReason}
+        />
+        <Field
+          label="Observed at (local time, optional)"
+          type="datetime-local"
+          required={false}
+          value={observed}
+          onChange={setObserved}
+        />
+        <Field
+          label="Report source reference"
+          required={false}
+          value={reference}
+          onChange={setReference}
+        />
+        <Field
+          label="Report source revision"
+          required={false}
+          value={revision}
+          onChange={setRevision}
+        />
+        {issue ? (
+          <p>
+            Urgent issues can be recorded without Files access. This form submits no file
+            declarations for issues.
+          </p>
+        ) : (
+          <ContainerEvidencePicker
+            value={evidence}
+            onChange={setEvidence}
+            description="Exact source evidence is checked when recording. A report remains an unverified operator declaration."
+          />
+        )}
+        {error && <p role="alert">{error}</p>}
+        <Button type="submit">Record {issue ? 'unresolved issue' : 'replacement total'}</Button>
+      </fieldset>
+    </form>
+  );
+}