@burdenoff/microfe-movethewheels 2026.930.4 → 2026.1010.1

package/src/movethewheels/components/freight-cost/FreightFields.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from 'react';
+import type { MtwFreightCurrencyInput } from '../../../generated/freight-cost-operations';
+export const freightInput = 'mt-1 min-h-11 w-full rounded border p-2';
+export function FreightText({
+  label,
+  value,
+  onChange,
+  required = false,
+  type = 'text',
+  disabled = false,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+  type?: string;
+  disabled?: boolean;
+}) {
+  return (
+    <label className="block text-sm">
+      {label}
+      <input
+        className={freightInput}
+        aria-label={label}
+        value={value}
+        type={type}
+        step={type === 'datetime-local' ? 1 : undefined}
+        required={required}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </label>
+  );
+}
+export function FreightSelect({
+  label,
+  value,
+  onChange,
+  children,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  children: ReactNode;
+}) {
+  return (
+    <label className="block text-sm">
+      {label}
+      <select
+        className={freightInput}
+        aria-label={label}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      >
+        {children}
+      </select>
+    </label>
+  );
+}
+export function FreightCurrency({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: MtwFreightCurrencyInput;
+  onChange: (value: MtwFreightCurrencyInput) => void;
+}) {
+  return (
+    <fieldset className="grid gap-3 md:grid-cols-2">
+      <legend className="mb-2 font-medium">{label}</legend>
+      <FreightText
+        label={`${label} code`}
+        value={value.code}
+        onChange={(code) => onChange({ ...value, code: code.toUpperCase() })}
+        required
+      />
+      <FreightSelect
+        label={`${label} decimal places`}
+        value={String(value.minorUnitDigits)}
+        onChange={(digits) => onChange({ ...value, minorUnitDigits: Number(digits) })}
+      >
+        {[0, 1, 2, 3, 4].map((digits) => (
+          <option key={digits} value={digits}>
+            {digits}
+          </option>
+        ))}
+      </FreightSelect>
+    </fieldset>
+  );
+}

package/src/movethewheels/components/freight-cost/FreightFxEditor.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import type {
+  MtwFreightFactsInput,
+  MtwFreightFxInput,
+} from '../../../generated/freight-cost-operations';
+import { Button } from '../ui';
+import { FreightCurrency, FreightText } from './FreightFields';
+import { freightInstant, freightLocalTime, newFreightFx } from '../../utils/freightDraft';
+export function FreightFxEditor({
+  value,
+  onChange,
+}: {
+  value: MtwFreightFactsInput['fx'];
+  onChange: (value: MtwFreightFactsInput['fx']) => void;
+}) {
+  const [keys, setKeys] = useState(() => value.map(() => crypto.randomUUID()));
+  const patch = (index: number, values: Partial<MtwFreightFxInput>) =>
+    onChange(value.map((row, i) => (i === index ? { ...row, ...values } : row)));
+  return (
+    <section className="space-y-4">
+      <h3 className="font-semibold">Dated currency conversion</h3>
+      <p className="text-sm">
+        One unit of the source currency equals the stated rate in the target currency. No reverse
+        rate is inferred.
+      </p>
+      {value.map((row, index) => (
+        <fieldset key={keys[index]} className="space-y-3 rounded border p-3">
+          <legend>Conversion {index + 1}</legend>
+          <FreightCurrency
+            label="From currency"
+            value={row.fromCurrency}
+            onChange={(fromCurrency) => patch(index, { fromCurrency })}
+          />
+          <FreightCurrency
+            label="To reporting currency"
+            value={row.toCurrency}
+            onChange={(toCurrency) => patch(index, { toCurrency })}
+          />
+          <FreightText
+            label="Conversion rate"
+            value={row.rate}
+            onChange={(rate) => patch(index, { rate })}
+          />
+          <div className="grid gap-3 md:grid-cols-3">
+            {(['observedAt', 'effectiveFrom', 'effectiveUntil'] as const).map((field) => (
+              <FreightText
+                key={field}
+                label={
+                  field === 'observedAt'
+                    ? 'Rate observed at'
+                    : field === 'effectiveFrom'
+                      ? 'Rate applies from'
+                      : 'Rate applies until'
+                }
+                type="datetime-local"
+                value={freightLocalTime(row[field])}
+                onChange={(v) => {
+                  if (v) patch(index, { [field]: freightInstant(v) });
+                }}
+              />
+            ))}
+          </div>
+          <FreightText
+            label="Conversion source"
+            value={row.sourceReference}
+            onChange={(sourceReference) => patch(index, { sourceReference })}
+          />
+          <FreightText
+            label="Conversion source version"
+            value={row.sourceRevision}
+            onChange={(sourceRevision) => patch(index, { sourceRevision })}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              setKeys(keys.filter((_, i) => i !== index));
+              onChange(value.filter((_, i) => i !== index));
+            }}
+          >
+            Remove conversion
+          </Button>
+        </fieldset>
+      ))}
+      <Button
+        type="button"
+        variant="outline"
+        disabled={value.length >= 20}
+        onClick={() => {
+          setKeys([...keys, crypto.randomUUID()]);
+          onChange([...value, newFreightFx()]);
+        }}
+      >
+        Add sourced conversion
+      </Button>
+    </section>
+  );
+}

package/src/movethewheels/components/freight-cost/FreightHistory.tsx

@@ -0,0 +1,91 @@
+import type { FreightVersionQuery } from '../../../generated/freight-cost-operations';
+import { FreightTotals } from './FreightTotals';
+import { freightLabel, freightMoney } from '../../utils/freightDraft';
+export function FreightHistory({
+  record,
+}: {
+  record: FreightVersionQuery['mtwFreightEstimateVersion'];
+}) {
+  return (
+    <article className="min-w-0 space-y-4 break-words rounded border p-4">
+      <h2 className="text-lg font-semibold">
+        {record.facts.title} — version {record.version}
+      </h2>
+      <p>
+        {record.shipmentCapture.shipmentNumber} / {record.shipmentCapture.primaryMode} — captured
+        shipment context
+      </p>
+      <p>
+        {record.facts.kind === 'QUOTE' ? 'Reported quote' : 'Estimate'};{' '}
+        {freightLabel(record.validityAtRead)}. This record does not accept a quote or confirm
+        capacity.
+      </p>
+      <p>{record.facts.commercialScope}</p>
+      <p>
+        Source: {record.facts.sourceReference} / {record.facts.sourceRevision}
+      </p>
+      <p>
+        Price at {record.facts.pricingAt}; recorded {record.recordedAt} by {record.createdBy} (
+        {freightLabel(record.actorProvenance)}).
+      </p>
+      <FreightTotals value={record.totals} currency={record.facts.reportingCurrency} />
+      <details>
+        <summary className="min-h-11 cursor-pointer font-medium">
+          Cost facts and evidence recorded with this version
+        </summary>
+        <div className="space-y-3">
+          {record.facts.lines.map((line) => (
+            <div key={line.id} className="rounded border p-3">
+              <h3 className="font-medium">
+                {line.description} / {freightLabel(line.category)}
+              </h3>
+              <p>
+                {freightLabel(line.disposition)}; payer {line.payerLabel ?? 'Unknown'} (
+                {line.payerReference ?? 'Unknown reference'}).
+              </p>
+              <p>
+                Reported amount: {freightMoney(line.amountMinor, line.currency.minorUnitDigits)}{' '}
+                {line.currency.code}; {freightLabel(line.amountBasis)}. Quantity{' '}
+                {line.quantity ?? 'Unknown'} {line.unit ?? 'unknown unit'} × rate{' '}
+                {line.unitRateMajor ?? 'Unknown'}.
+              </p>
+              <p>
+                Source {line.sourceReference ?? 'Unknown'} /{' '}
+                {line.sourceRevision ?? 'Unknown version'}
+                {line.inclusionParentLineId
+                  ? `; included in recorded line ${line.inclusionParentLineId}`
+                  : ''}
+                .
+              </p>
+              {line.zeroReason && <p>Zero reason: {line.zeroReason}</p>}
+            </div>
+          ))}
+          {record.facts.requirements.map((row) => (
+            <p key={row.category}>
+              {freightLabel(row.category)}: {freightLabel(row.status)} —{' '}
+              {row.reason ?? 'No explanation recorded'}; source {row.sourceReference ?? 'Unknown'} /{' '}
+              {row.sourceRevision ?? 'Unknown'}
+            </p>
+          ))}
+          <p>
+            Quote occurred {record.facts.quotedAt ?? 'Unknown'}; validity{' '}
+            {record.facts.validFrom ?? 'Unknown'} to {record.facts.validUntil ?? 'Unknown'}.
+          </p>
+          {record.facts.fx.map((row) => (
+            <p key={row.fromCurrency.code}>
+              1 {row.fromCurrency.code} = {row.rate} {row.toCurrency.code}; observed{' '}
+              {row.observedAt}; applicable {row.effectiveFrom} to {row.effectiveUntil}; source{' '}
+              {row.sourceReference}/{row.sourceRevision}
+            </p>
+          ))}
+          {record.evidence.map((item) => (
+            <p key={JSON.stringify([item.fileId, item.versionId])}>
+              Recorded evidence: file {item.fileId}, version {item.versionId}; readable/integrity
+              check at {item.checkedAt}.
+            </p>
+          ))}
+        </div>
+      </details>
+    </article>
+  );
+}

package/src/movethewheels/components/freight-cost/FreightLineEditor.tsx

@@ -0,0 +1,192 @@
+import type { MtwFreightLineInput } from '../../../generated/freight-cost-operations';
+import { Button } from '../ui';
+import { FreightCurrency, FreightSelect, FreightText, freightInput } from './FreightFields';
+import {
+  fixedFreightMinor,
+  isFreightDecimalZero,
+  freightCategories,
+  freightLabel,
+  freightMoney,
+  freightNullable,
+} from '../../utils/freightDraft';
+export function FreightLineEditor({
+  line,
+  others,
+  onChange,
+  onRemove,
+}: {
+  line: MtwFreightLineInput;
+  others: MtwFreightLineInput[];
+  onChange: (line: MtwFreightLineInput) => void;
+  onRemove: () => void;
+}) {
+  const patch = (values: Partial<MtwFreightLineInput>) => onChange({ ...line, ...values });
+  return (
+    <fieldset className="min-w-0 space-y-4 rounded border p-4">
+      <legend className="px-1 font-medium">{line.description || 'Cost item'}</legend>
+      <div className="grid gap-3 md:grid-cols-2">
+        <FreightText
+          label="Cost description"
+          value={line.description}
+          required
+          onChange={(description) => patch({ description })}
+        />
+        <FreightSelect
+          label="Cost category"
+          value={line.category}
+          onChange={(category) => {
+            const found = freightCategories.find((item) => item === category);
+            if (found) patch({ category: found });
+          }}
+        >
+          {freightCategories.map((item) => (
+            <option key={item} value={item}>
+              {freightLabel(item)}
+            </option>
+          ))}
+        </FreightSelect>
+      </div>
+      <FreightSelect
+        label="How is this cost included?"
+        value={line.disposition}
+        onChange={(value) => {
+          if (
+            value === 'ADDITIONAL' ||
+            value === 'UNKNOWN' ||
+            value === 'EXCLUDED' ||
+            value === 'INCLUDED_IN_LINE'
+          )
+            patch({ disposition: value, inclusionParentLineId: null });
+        }}
+      >
+        <option value="UNKNOWN">Unknown</option>
+        <option value="ADDITIONAL">Added to the total</option>
+        <option value="INCLUDED_IN_LINE">Included in another cost item</option>
+        <option value="EXCLUDED">Excluded from this estimate</option>
+      </FreightSelect>
+      {line.disposition === 'INCLUDED_IN_LINE' && (
+        <FreightSelect
+          label="Included in cost item"
+          value={line.inclusionParentLineId ?? ''}
+          onChange={(value) => patch({ inclusionParentLineId: freightNullable(value) })}
+        >
+          <option value="">Choose the sourced parent cost</option>
+          {others
+            .filter((item) => item.id !== line.id && item.disposition === 'ADDITIONAL')
+            .map((item) => (
+              <option key={item.id} value={item.id}>
+                {item.description}
+              </option>
+            ))}
+        </FreightSelect>
+      )}
+      <FreightCurrency
+        label="Cost currency convention"
+        value={line.currency}
+        onChange={(currency) => patch({ currency, amountMinor: null })}
+      />
+      <FreightSelect
+        label="Amount source"
+        value={line.amountBasis}
+        onChange={(value) => {
+          if (value === 'UNKNOWN' || value === 'CALCULATED' || value === 'SOURCED_FIXED')
+            patch({
+              amountBasis: value,
+              amountMinor: null,
+              quantity: null,
+              unit: null,
+              unitRateMajor: null,
+            });
+        }}
+      >
+        <option value="UNKNOWN">Amount unknown</option>
+        <option value="SOURCED_FIXED">Amount stated by the source</option>
+        <option value="CALCULATED">Quantity × sourced rate</option>
+      </FreightSelect>
+      {line.amountBasis === 'SOURCED_FIXED' && (
+        <label className="block text-sm">
+          Sourced amount
+          <input
+            key={`${line.currency.code}:${line.currency.minorUnitDigits}:${line.amountBasis}`}
+            className={freightInput}
+            aria-label="Sourced amount"
+            defaultValue={
+              line.amountMinor === null || line.amountMinor === undefined
+                ? ''
+                : freightMoney(line.amountMinor, line.currency.minorUnitDigits)
+            }
+            onChange={(event) => {
+              try {
+                patch({
+                  amountMinor: fixedFreightMinor(event.target.value, line.currency.minorUnitDigits),
+                });
+                event.target.setCustomValidity('');
+              } catch (failure) {
+                patch({ amountMinor: null });
+                event.target.setCustomValidity(
+                  failure instanceof Error ? failure.message : 'Invalid amount'
+                );
+              }
+            }}
+          />
+        </label>
+      )}
+      {line.amountBasis === 'CALCULATED' && (
+        <div className="grid gap-3 md:grid-cols-3">
+          <FreightText
+            label="Quantity (blank means unknown)"
+            value={line.quantity ?? ''}
+            onChange={(value) =>
+              patch({
+                quantity: freightNullable(value),
+                amountMinor: isFreightDecimalZero(value) ? '0' : null,
+              })
+            }
+          />
+          <FreightText
+            label="Quantity unit"
+            value={line.unit ?? ''}
+            onChange={(value) => patch({ unit: freightNullable(value) })}
+          />
+          <FreightText
+            label="Rate per quantity unit"
+            value={line.unitRateMajor ?? ''}
+            onChange={(value) => patch({ unitRateMajor: freightNullable(value) })}
+          />
+        </div>
+      )}
+      {(isFreightDecimalZero(line.quantity) || line.amountMinor === '0') && (
+        <FreightText
+          label="Reason for the sourced zero"
+          value={line.zeroReason ?? ''}
+          onChange={(value) => patch({ zeroReason: freightNullable(value) })}
+        />
+      )}
+      <div className="grid gap-3 md:grid-cols-2">
+        <FreightText
+          label="Payer reference"
+          value={line.payerReference ?? ''}
+          onChange={(value) => patch({ payerReference: freightNullable(value) })}
+        />
+        <FreightText
+          label="Payer name"
+          value={line.payerLabel ?? ''}
+          onChange={(value) => patch({ payerLabel: freightNullable(value) })}
+        />
+        <FreightText
+          label="Cost inclusion source"
+          value={line.sourceReference ?? ''}
+          onChange={(value) => patch({ sourceReference: freightNullable(value) })}
+        />
+        <FreightText
+          label="Cost source version"
+          value={line.sourceRevision ?? ''}
+          onChange={(value) => patch({ sourceRevision: freightNullable(value) })}
+        />
+      </div>
+      <Button type="button" variant="outline" onClick={onRemove}>
+        Remove cost item
+      </Button>
+    </fieldset>
+  );
+}

package/src/movethewheels/components/freight-cost/FreightScopeEditor.tsx

@@ -0,0 +1,64 @@
+import type {
+  MtwFreightFactsInput,
+  MtwFreightRequirementInput,
+} from '../../../generated/freight-cost-operations';
+import { FreightSelect, FreightText } from './FreightFields';
+import { freightLabel, freightNullable } from '../../utils/freightDraft';
+export function FreightScopeEditor({
+  value,
+  onChange,
+}: {
+  value: MtwFreightFactsInput['requirements'];
+  onChange: (value: MtwFreightFactsInput['requirements']) => void;
+}) {
+  const patch = (
+    category: MtwFreightRequirementInput['category'],
+    changes: Partial<MtwFreightRequirementInput>
+  ) => onChange(value.map((item) => (item.category === category ? { ...item, ...changes } : item)));
+  return (
+    <section className="space-y-4">
+      <h3 className="font-semibold">Costs in scope</h3>
+      <p className="text-sm">
+        Declare what the source requires or excludes. Missing scope remains unknown.
+      </p>
+      {value.map((row) => (
+        <fieldset key={row.category} className="space-y-3 rounded border p-3">
+          <legend>{freightLabel(row.category)}</legend>
+          <FreightSelect
+            label={`${freightLabel(row.category)} scope`}
+            value={row.status}
+            onChange={(status) => {
+              if (status === 'REQUIRED' || status === 'NOT_APPLICABLE' || status === 'UNKNOWN')
+                patch(row.category, { status });
+            }}
+          >
+            <option value="UNKNOWN">Unknown</option>
+            <option value="REQUIRED">Required cost</option>
+            <option value="NOT_APPLICABLE">Source says not applicable</option>
+          </FreightSelect>
+          {row.status !== 'UNKNOWN' && (
+            <div className="grid gap-3 md:grid-cols-2">
+              <FreightText
+                label={`${freightLabel(row.category)} source`}
+                value={row.sourceReference ?? ''}
+                onChange={(v) => patch(row.category, { sourceReference: freightNullable(v) })}
+              />
+              <FreightText
+                label={`${freightLabel(row.category)} source version`}
+                value={row.sourceRevision ?? ''}
+                onChange={(v) => patch(row.category, { sourceRevision: freightNullable(v) })}
+              />
+              {row.status === 'NOT_APPLICABLE' && (
+                <FreightText
+                  label={`${freightLabel(row.category)} exclusion reason`}
+                  value={row.reason ?? ''}
+                  onChange={(v) => patch(row.category, { reason: freightNullable(v) })}
+                />
+              )}
+            </div>
+          )}
+        </fieldset>
+      ))}
+    </section>
+  );
+}

package/src/movethewheels/components/freight-cost/FreightTotals.tsx

@@ -0,0 +1,68 @@
+import type {
+  PreviewFreightCostsQuery,
+  MtwFreightCurrencyInput,
+} from '../../../generated/freight-cost-operations';
+import { freightMoney } from '../../utils/freightDraft';
+export function FreightTotals({
+  value,
+  currency,
+}: {
+  value: PreviewFreightCostsQuery['previewMtwFreightTotal'];
+  currency: MtwFreightCurrencyInput | null | undefined;
+}) {
+  return (
+    <section className="space-y-3 rounded border p-4" aria-label="Freight cost preview">
+      <h3 className="text-lg font-semibold">Cost preview</h3>
+      <p>
+        {value.completeRelativeToDeclarations
+          ? 'Complete against the recorded cost scope'
+          : 'Missing cost facts remain'}
+        .
+      </p>
+      <p className="font-medium">
+        Reporting total:{' '}
+        {currency
+          ? `${freightMoney(value.reportingTotalMinor, currency.minorUnitDigits)} ${currency.code}`
+          : 'No reporting currency recorded'}
+      </p>
+      <p className="text-sm">
+        A complete recorded scope does not establish an all-in price, capacity or quote acceptance.
+      </p>
+      {value.subtotals.map((group) => (
+        <div
+          key={JSON.stringify([group.currency, group.payerReference])}
+          className="rounded border p-3"
+        >
+          <p>
+            {group.payerLabel ?? 'Unknown payer'} — {group.currency.code}
+          </p>
+          <p>
+            Known subtotal: {freightMoney(group.knownAmountMinor, group.currency.minorUnitDigits)};
+            complete subtotal:{' '}
+            {freightMoney(group.totalAmountMinor, group.currency.minorUnitDigits)}
+          </p>
+        </div>
+      ))}
+      {value.reasons.length > 0 && (
+        <div>
+          <h4 className="font-semibold">Missing facts</h4>
+          <ul className="list-disc pl-5">
+            {value.reasons.map((item) => (
+              <li key={JSON.stringify([item.code, item.lineId, item.detail])}>{item.detail}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {value.warnings.length > 0 && (
+        <div>
+          <h4 className="font-semibold">Rounding notes</h4>
+          <ul className="list-disc pl-5">
+            {value.warnings.map((item) => (
+              <li key={JSON.stringify([item.code, item.lineId, item.detail])}>{item.detail}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </section>
+  );
+}