@burdenoff/microfe-movethewheels 2026.930.4 → 2026.1010.1

package/src/movethewheels/components/stock-observation/StockIssueHistory.tsx

@@ -0,0 +1,96 @@
+import type { ReportedStockIssueFragment } from '../../../generated/stock-observation-operations';
+import { Button } from '../ui';
+
+const labels = {
+  COUNT_DISCREPANCY: 'Count discrepancy',
+  DAMAGE: 'Damage',
+  IDENTITY_UNCERTAIN: 'Uncertain item identity',
+  OTHER: 'Other issue',
+};
+export function StockIssueHistory({
+  items,
+  onSelect,
+  disabled,
+}: {
+  items: ReportedStockIssueFragment[];
+  onSelect: (id: string) => void;
+  disabled: boolean;
+}) {
+  return (
+    <div className="space-y-3">
+      {items.map((item) => (
+        <article key={item.id} className="rounded-lg border p-4 space-y-2">
+          <h3 className="font-semibold">
+            {labels[item.kind]} · report {item.sequence} · unresolved
+          </h3>
+          <p className="whitespace-pre-wrap break-words">{item.reason}</p>
+          <p className="text-sm">
+            Reported count: {item.observedCount ?? 'Not known'}; scope:{' '}
+            {item.countScope === 'WHOLE_LINE' ? 'Whole inventory line' : 'Not known'}; unit:{' '}
+            {item.reportedCountUnit ? 'Reported count unit' : 'Not known'}.
+          </p>
+          <p className="text-sm">
+            Received {new Date(item.recordedAt).toLocaleString()}; reported observation{' '}
+            {item.reportedObservedAt
+              ? new Date(item.reportedObservedAt).toLocaleString()
+              : 'time not known'}
+            .
+          </p>
+          <details>
+            <summary>Recorded references and attribution</summary>
+            <dl className="text-sm break-all">
+              <dt>Exact issue reference</dt>
+              <dd>{item.id}</dd>
+              <dt>Inventory line</dt>
+              <dd>{item.inventoryItemId}</dd>
+              <dt>Recorded actor</dt>
+              <dd>
+                {item.attribution.actorId} (
+                {item.attribution.provenance === 'delegated'
+                  ? 'Delegated operational session'
+                  : 'Direct operational session'}
+                )
+              </dd>
+              <dt>Reported count-unit reference and revision</dt>
+              <dd>
+                {item.reportedCountUnit?.reference ?? 'Not known'} /{' '}
+                {item.reportedCountUnit?.revision ?? 'Revision not known'}
+              </dd>
+              <dt>On behalf of</dt>
+              <dd>{item.attribution.onBehalfOf ?? 'Not supplied by verified context'}</dd>
+              <dt>Source</dt>
+              <dd>
+                {item.source?.reference ?? 'Not known'} /{' '}
+                {item.source?.revision ?? 'Revision not known'}
+              </dd>
+              <dt>Originating application</dt>
+              <dd>{item.attribution.originatingAppId ?? 'Not supplied by verified context'}</dd>
+            </dl>
+            {item.evidenceDeclarations.length > 0 ? (
+              <ul>
+                {item.evidenceDeclarations.map((ref) => (
+                  <li key={JSON.stringify([ref.fileId, ref.versionId])} className="break-all">
+                    {ref.fileId} / {ref.versionId} — unverified declaration
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p>No file references supplied.</p>
+            )}
+            <p className="text-sm">
+              Operational reporting is not move-review authority or verified evidence.
+            </p>
+          </details>
+          <Button
+            variant="outline"
+            type="button"
+            disabled={disabled}
+            onClick={() => onSelect(item.id)}
+          >
+            Read exact report
+          </Button>
+        </article>
+      ))}
+    </div>
+  );
+}

package/src/movethewheels/components/stock-observation/StockIssueReadPanel.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { useConditionQuery } from '../../hooks/useContainerCondition';
+import { ReusePager, ReuseState, reuseCard } from '../ReuseControls';
+import { StockIssueHistory } from './StockIssueHistory';
+import {
+  StockIssueHistoryDocument,
+  ExactStockIssueDocument,
+  type StockIssueHistoryQuery,
+  type ExactStockIssueQuery,
+} from '../../../generated/stock-observation-operations';
+
+export function StockIssueReadPanel({
+  inventoryItemId,
+  revision,
+  busy,
+}: {
+  inventoryItemId: string;
+  revision: number;
+  busy: boolean;
+}) {
+  const [offset, setOffset] = useState(0),
+    [exactId, setExactId] = useState<string | null>(null);
+  const history = useConditionQuery<StockIssueHistoryQuery>(
+    StockIssueHistoryDocument,
+    { inventoryItemId, pagination: { limit: 25, offset } },
+    revision
+  );
+  const exact = useConditionQuery<ExactStockIssueQuery>(
+    ExactStockIssueDocument,
+    exactId ? { inventoryItemId, id: exactId } : null,
+    revision
+  );
+  return (
+    <section className={reuseCard}>
+      <h2 className="text-lg font-semibold">Immediate issue history</h2>
+      <p className="text-sm">
+        All reports remain unresolved. This stream is independent of source assessments and their
+        effective dates.
+      </p>
+      <ReuseState loading={history.loading} error={history.error} />
+      {history.data && (
+        <>
+          <StockIssueHistory
+            items={history.data.mtwStockObservationPage.items}
+            disabled={busy}
+            onSelect={setExactId}
+          />
+          <ReusePager
+            page={history.data.mtwStockObservationPage}
+            offset={offset}
+            onChange={setOffset}
+            busy={busy}
+          />
+          {history.data.mtwStockObservationPage.total === 0 && <p>No reported issues.</p>}
+        </>
+      )}
+      {exactId && (
+        <div className="space-y-3">
+          <h3 className="font-semibold">Exact recorded report</h3>
+          <ReuseState loading={exact.loading} error={exact.error} />
+          {exact.data && (
+            <StockIssueHistory
+              items={[exact.data.mtwStockObservation]}
+              disabled={busy}
+              onSelect={setExactId}
+            />
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/movethewheels/components/trip-utilization/TripReportForm.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+import type {
+  MtwTripUtilizationBasis,
+  MtwTripUtilizationCoverage,
+} from '../../../generated/trip-utilization-operations';
+import { ContainerEvidencePicker, type SelectedEvidence } from '../ContainerEvidencePicker';
+import { ReuseField, reuseSelect } from '../ReuseControls';
+import { Button } from '../ui';
+import { readTripDraft, type TripReportDraft } from '../../utils/tripUtilizationForm';
+import { TripSegmentFields } from './TripSegmentFields';
+export function TripReportForm({
+  busy,
+  onSubmit,
+}: {
+  busy: boolean;
+  onSubmit: (draft: TripReportDraft) => Promise<void>;
+}) {
+  const [basis, setBasis] = useState<MtwTripUtilizationBasis>('OBSERVED');
+  const [coverage, setCoverage] = useState<MtwTripUtilizationCoverage>('PARTIAL');
+  const [ids, setIds] = useState(() => [crypto.randomUUID()]);
+  const [evidence, setEvidence] = useState<SelectedEvidence[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  return (
+    <form
+      className="space-y-4"
+      onSubmit={async (event) => {
+        event.preventDefault();
+        setError(null);
+        try {
+          await onSubmit(
+            readTripDraft(new FormData(event.currentTarget), ids, basis, coverage, evidence)
+          );
+        } catch (failure) {
+          setError(failure instanceof Error ? failure.message : 'Unable to record report.');
+        }
+      }}
+    >
+      <fieldset disabled={busy} className="space-y-4">
+        <ReuseField label="Trip reference" name="tripReference" />
+        <div className="grid gap-3 md:grid-cols-2">
+          <ReuseField label="Report interval starts (ISO with timezone)" name="intervalFrom" />
+          <ReuseField label="Report interval ends (ISO with timezone)" name="intervalUntil" />
+        </div>
+        <label className="block">
+          Reported basis
+          <select
+            className={reuseSelect}
+            value={basis}
+            onChange={(event) => {
+              const next = event.target.value;
+              if (next === 'OBSERVED' || next === 'ESTIMATED') {
+                setBasis(next);
+                setIds([crypto.randomUUID()]);
+                setEvidence([]);
+                setError(null);
+              }
+            }}
+          >
+            <option value="OBSERVED">OBSERVED measurements</option>
+            <option value="ESTIMATED">ESTIMATED values</option>
+          </select>
+        </label>
+        <p className="text-sm">
+          Changing the basis clears segment and evidence entries so measurements are not silently
+          converted into estimates.
+        </p>
+        <label className="block">
+          Operator-declared interval coverage
+          <select
+            className={reuseSelect}
+            value={coverage}
+            onChange={(event) => {
+              const next = event.target.value;
+              if (next === 'COMPLETE' || next === 'PARTIAL') setCoverage(next);
+            }}
+          >
+            <option value="PARTIAL">PARTIAL — some segments supplied</option>
+            <option value="COMPLETE">COMPLETE — operator declares all segments supplied</option>
+          </select>
+        </label>
+        <p className="text-sm">
+          COMPLETE is your declaration, not independently certified whole-trip coverage. Receipt
+          time is generated by the server and cannot be entered here.
+        </p>
+        {ids.map((id, index) => (
+          <TripSegmentFields
+            key={id}
+            id={id}
+            sequence={index + 1}
+            basis={basis}
+            removable={ids.length > 1}
+            onRemove={() => setIds((items) => items.filter((item) => item !== id))}
+          />
+        ))}
+        <Button
+          type="button"
+          variant="outline"
+          disabled={ids.length >= 100}
+          onClick={() => setIds((items) => [...items, crypto.randomUUID()])}
+        >
+          Add next segment
+        </Button>
+        <p className="text-sm">
+          This manual form supports up to 100 segments. The server report remains authoritative.
+        </p>
+        <ContainerEvidencePicker
+          value={evidence}
+          onChange={setEvidence}
+          description="Choose exact readable versions from shared Files for the supplied report sources. Integrity fingerprints do not authenticate the provider or certify measurements."
+        />
+        <Button type="submit">Record immutable utilization report</Button>
+      </fieldset>
+      {error && <p role="alert">{error}</p>}
+    </form>
+  );
+}

package/src/movethewheels/components/trip-utilization/TripReportHistory.tsx

@@ -0,0 +1,51 @@
+import type {
+  UtilizationReportFragment,
+  UtilizationReportsQuery,
+} from '../../../generated/trip-utilization-operations';
+import { ReusePager, ReuseState, reuseCard } from '../ReuseControls';
+import { Button } from '../ui';
+import { TripReportSummary } from './TripReportSummary';
+export function TripReportHistory({
+  query,
+  offset,
+  onPage,
+  selected,
+  onSelect,
+  busy,
+}: {
+  query: { data: UtilizationReportsQuery | null; loading: boolean; error: string | null };
+  offset: number;
+  onPage: (value: number) => void;
+  selected: UtilizationReportFragment | null;
+  onSelect: (report: UtilizationReportFragment) => void;
+  busy: boolean;
+}) {
+  const page = query.data?.mtwTripUtilizationReportPage;
+  return (
+    <section className={reuseCard} aria-label="Historical utilization reports">
+      <h2 className="text-lg font-semibold">Immutable report history</h2>
+      <ReuseState {...query} />
+      {page?.items.length === 0 && <p>No reports recorded for this route.</p>}
+      {page?.items.map((report) => (
+        <div key={report.id} className="flex flex-wrap items-center gap-3 rounded border p-3">
+          <p>
+            Trip {report.tripId} — {report.basis}; {report.intervalFrom}–{report.intervalUntil};
+            recorded {report.recordedAt}.
+          </p>
+          <Button type="button" variant="outline" disabled={busy} onClick={() => onSelect(report)}>
+            Inspect report
+          </Button>
+        </div>
+      ))}
+      <ReusePager page={page} offset={offset} onChange={onPage} busy={busy || query.loading} />
+      {selected && (
+        <>
+          <p className="text-sm">
+            Selected immutable report stays pinned when you change history pages.
+          </p>
+          <TripReportSummary report={selected} />
+        </>
+      )}
+    </section>
+  );
+}

package/src/movethewheels/components/trip-utilization/TripReportSummary.tsx

@@ -0,0 +1,127 @@
+import type {
+  UtilizationReportFragment,
+  UtilizationMetricFragment,
+  MtwUtilizationMetricReason,
+} from '../../../generated/trip-utilization-operations';
+const number = new Intl.NumberFormat(undefined, { maximumFractionDigits: 4 });
+const reasons: Record<MtwUtilizationMetricReason, string> = {
+  NO_SEGMENTS: 'No segments supplied',
+  PARTIAL_TRIP: 'Operator declared partial coverage',
+  DISTANCE_UNKNOWN: 'At least one segment has unknown distance',
+  ZERO_DISTANCE: 'No positive distance denominator',
+  SEGMENT_FACTS_UNKNOWN: 'Required segment facts are unknown',
+};
+function value(input: number | null | undefined, unit: string) {
+  return input == null ? 'UNKNOWN' : `${number.format(input)} ${unit}`;
+}
+function Metric({ title, metric }: { title: string; metric: UtilizationMetricFragment }) {
+  return (
+    <article className="space-y-2 rounded border p-4">
+      <h3 className="font-semibold">{title}</h3>
+      <p>
+        {metric.status === 'KNOWN'
+          ? value(metric.percentage, '%')
+          : `UNKNOWN — ${metric.reason ? reasons[metric.reason] : 'No valid percentage'}`}
+      </p>
+      <p className="text-sm">
+        Distance with sufficient facts for this metric: {value(metric.knownDistanceKm, 'km')};
+        unknown segment facts: {metric.unknownSegmentCount}.
+      </p>
+    </article>
+  );
+}
+export function TripReportSummary({ report }: { report: UtilizationReportFragment }) {
+  const summary = report.summary;
+  return (
+    <article className="min-w-0 space-y-4 break-words rounded-lg border p-5">
+      <h3 className="font-semibold">
+        Trip {report.tripId} — {report.basis}
+      </h3>
+      <p>
+        Interval {report.intervalFrom}–{report.intervalUntil}. Operator-declared{' '}
+        {report.declaredCoverage}; {summary.segmentCount} segments,{' '}
+        {summary.unknownFactsSegmentCount} with unknown/contradictory facts.
+      </p>
+      <p>
+        Known supplied distance: {value(summary.distanceCoverage.knownDistanceKm, 'km')}; declared
+        whole-interval distance: {value(summary.distanceCoverage.totalDistanceKm, 'km')}.
+        Unknown-distance segments: {summary.distanceCoverage.unknownSegmentCount}.
+      </p>
+      <div className="grid gap-3 md:grid-cols-3">
+        <Metric title="Loaded-distance percentage" metric={summary.loadedDistance} />
+        <Metric title="Distance-weighted payload ratio" metric={summary.distanceWeightedWeight} />
+        <Metric title="Distance-weighted cube ratio" metric={summary.distanceWeightedCube} />
+      </div>
+      <p className="text-sm">
+        Weight and cube are distance-weighted means of each segment’s individual ratio, not pooled
+        capacities. Zero-distance segments retain facts but add no weighting. Unknown facts do not
+        become zeros; overloads remain above 100%.
+      </p>
+      <details className="space-y-3">
+        <summary>Reported segment facts and sources</summary>
+        {summary.segments.map((segment) => (
+          <article key={segment.segmentId} className="space-y-2 rounded border p-3 text-sm">
+            <h4 className="font-semibold">
+              Segment {segment.sequence} — {segment.loadedState}
+            </h4>
+            <p>
+              {value(segment.distanceKm, 'km')}; payload {value(segment.payloadKg, 'kg')} / reported
+              payload capacity {value(segment.payloadCapacityKg, 'kg')}; occupied{' '}
+              {value(segment.cubeM3, 'm³')} / usable {value(segment.cubeCapacityM3, 'm³')}.
+            </p>
+            <p>
+              Payload ratio {value(segment.weightUtilizationPercentage, '%')}; cube ratio{' '}
+              {value(segment.cubeUtilizationPercentage, '%')}.
+            </p>
+            {segment.warnings.length > 0 && (
+              <ul className="space-y-1">
+                {segment.warnings.map((warning) => (
+                  <li key={warning} role="note">
+                    {warning === 'WEIGHT_OVERLOAD'
+                      ? 'WEIGHT OVERLOAD — reported payload exceeds supplied capacity'
+                      : warning === 'CUBE_OVERLOAD'
+                        ? 'CUBE OVERLOAD — occupied cube exceeds supplied capacity'
+                        : 'CONTRADICTORY EMPTY — positive reported payload or cube; empty distance remains unconfirmed'}
+                  </li>
+                ))}
+              </ul>
+            )}
+            <p>
+              Source {segment.source.reference}; revision {segment.source.revision}. Observation{' '}
+              {segment.source.observedAt ?? 'not recorded'}; server receipt{' '}
+              {segment.source.recordedAt}.
+            </p>
+            <p>
+              Distance basis {segment.source.distanceBasis}; load basis {segment.source.loadBasis};
+              capacity basis {segment.source.capacityBasis}.
+            </p>
+          </article>
+        ))}
+      </details>
+      <details className="space-y-2">
+        <summary>Captured context and exact evidence</summary>
+        <p>
+          Captured route {report.routeId}; vehicle {report.vehicleId}. Recorded {report.recordedAt};
+          actor {report.createdBy}; gateway provenance {report.actorProvenance}.
+        </p>
+        <p>
+          Captured route revision {report.routeUpdatedAt}; vehicle revision{' '}
+          {report.vehicleUpdatedAt}. This is a historical context snapshot.
+        </p>
+        <p className="break-all">Route-content fingerprint: {report.routeWaypointsFingerprint}.</p>
+        <ul>
+          {report.evidence.map((item) => (
+            <li key={item.versionId} className="break-all">
+              File {item.fileId}; version {item.versionId}; fingerprint {item.sha256Hash}; checked{' '}
+              {item.checkedAt}.
+            </li>
+          ))}
+        </ul>
+        <p>
+          Files readability and fingerprints were checked at recording time. Stored references are
+          not a guarantee of future readability or document authenticity.
+        </p>
+      </details>
+    </article>
+  );
+}

package/src/movethewheels/components/trip-utilization/TripSegmentFields.tsx

@@ -0,0 +1,118 @@
+import type { MtwTripUtilizationBasis } from '../../../generated/trip-utilization-operations';
+import { ReuseField, reuseSelect } from '../ReuseControls';
+import { Button } from '../ui';
+export function TripSegmentFields({
+  id,
+  sequence,
+  basis,
+  onRemove,
+  removable,
+}: {
+  id: string;
+  sequence: number;
+  basis: MtwTripUtilizationBasis;
+  onRemove: () => void;
+  removable: boolean;
+}) {
+  const name = (field: string) => `${id}.${field}`;
+  return (
+    <fieldset className="space-y-4 rounded-lg border p-4">
+      <legend className="px-2 font-semibold">Segment {sequence}</legend>
+      <p className="text-sm">
+        Blank measurements stay UNKNOWN. EMPTY does not fill in zero weight or cube. Segment order
+        is the order reported here.
+      </p>
+      <label className="block">
+        Reported load state
+        <select name={name('loadedState')} className={reuseSelect} defaultValue="UNKNOWN">
+          <option value="UNKNOWN">UNKNOWN</option>
+          <option value="EMPTY">EMPTY</option>
+          <option value="LOADED">LOADED</option>
+        </select>
+      </label>
+      <div className="grid gap-3 md:grid-cols-2">
+        {[
+          ['distanceKm', 'Distance (km)'],
+          ['payloadKg', 'Payload (kg)'],
+          ['payloadCapacityKg', 'Reported payload capacity (kg)'],
+          ['cubeM3', 'Occupied cube (m³)'],
+          ['cubeCapacityM3', 'Usable cube capacity (m³)'],
+        ].map(([field, label]) => (
+          <label key={field} className="block">
+            {label}
+            <input
+              name={name(field)}
+              type="number"
+              min="0"
+              step="any"
+              className={reuseSelect}
+              placeholder="UNKNOWN / not recorded"
+            />
+          </label>
+        ))}
+      </div>
+      <div className="grid gap-3 md:grid-cols-2">
+        <ReuseField label="Source reference" name={name('reference')} />
+        <ReuseField label="Source revision" name={name('revision')} maxLength={120} />
+        <ReuseField
+          label={
+            basis === 'OBSERVED'
+              ? 'Observation time (ISO with timezone)'
+              : 'Source observation time, if any (ISO with timezone)'
+          }
+          name={name('observedAt')}
+          required={basis === 'OBSERVED'}
+        />
+        <label className="block">
+          Distance source
+          <select
+            required
+            name={name('distanceBasis')}
+            className={reuseSelect}
+            defaultValue={basis === 'OBSERVED' ? 'MEASURED' : ''}
+          >
+            {basis === 'OBSERVED' ? (
+              <option value="MEASURED">Measured</option>
+            ) : (
+              <>
+                <option value="">Choose estimate source</option>
+                <option value="PROVIDER_ESTIMATE">Provider estimate</option>
+                <option value="OPERATOR_ESTIMATE">Operator estimate</option>
+              </>
+            )}
+          </select>
+        </label>
+        <label className="block">
+          Load source
+          <select
+            required
+            name={name('loadBasis')}
+            className={reuseSelect}
+            defaultValue={basis === 'OBSERVED' ? 'MEASURED' : ''}
+          >
+            {basis === 'ESTIMATED' && <option value="">Choose load source</option>}
+            <option value="MEASURED">Measured</option>
+            {basis === 'ESTIMATED' && (
+              <option value="SOURCE_CONFIRMED_PLAN">Source-confirmed plan</option>
+            )}
+          </select>
+        </label>
+        <label className="block">
+          Capacity source
+          <select required name={name('capacityBasis')} className={reuseSelect} defaultValue="">
+            <option value="">Choose capacity source</option>
+            <option value="RATED">Rated</option>
+            <option value="MEASURED">Measured</option>
+          </select>
+        </label>
+      </div>
+      <p className="text-sm">
+        These source labels are recorded by the operator. A source reference or evidence hash does
+        not authenticate the provider or certify measurements.
+      </p>
+      <Button type="button" variant="outline" disabled={!removable} onClick={onRemove}>
+        Remove segment {sequence}
+      </Button>
+    </fieldset>
+  );
+}