@burdenoff/microfe-movethewheels 2026.930.4 → 2026.1010.1

package/src/movethewheels/pages/FreeTimePage.tsx

@@ -0,0 +1,720 @@
+import { useState, type ReactNode } from 'react';
+import { Clock } from 'lucide-react';
+
+import { PageLayout } from '../components/PageLayout';
+import { Button, Input } from '../components/ui';
+import {
+  ContainerEvidencePicker,
+  type SelectedEvidence,
+} from '../components/ContainerEvidencePicker';
+import { FreeTimeAgreementForm } from '../components/FreeTimeAgreementForm';
+import { freeTimeIso } from '../utils/freeTimeDate';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { useConditionAction, useConditionQuery } from '../hooks/useContainerCondition';
+import {
+  FreeContainersDocument,
+  FreeCyclesDocument,
+  FreeEventsDocument,
+  FreeClocksDocument,
+  FreeAgreementsDocument,
+  FreeExtensionsDocument,
+  FreeExposureDocument,
+  OpenFreeClockDocument,
+  RecordFreeAgreementDocument,
+  RequestFreeExtensionDocument,
+  DecideFreeExtensionDocument,
+  type FreeContainersQuery,
+  type FreeCyclesQuery,
+  type FreeEventsQuery,
+  type FreeClocksQuery,
+  type FreeAgreementsQuery,
+  type FreeExtensionsQuery,
+  type FreeExposureQuery,
+} from '../../generated/free-time-operations';
+
+const card = 'space-y-4 rounded-xl border bg-bg-surface p-5';
+const select = 'mt-1 w-full rounded-md border bg-bg-surface p-2 text-sm';
+const pageSize = 25;
+interface PageInfo {
+  total: number;
+  offset: number;
+  hasMore: boolean;
+  nextOffset?: number | null;
+}
+function Pager({
+  page,
+  offset,
+  setOffset,
+  busy,
+}: {
+  page?: PageInfo;
+  offset: number;
+  setOffset: (offset: number) => void;
+  busy: boolean;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button
+        type="button"
+        variant="outline"
+        disabled={busy || offset === 0}
+        onClick={() => setOffset(Math.max(0, offset - pageSize))}
+      >
+        Previous
+      </Button>
+      <span className="text-sm">
+        {page
+          ? `${page.total} records; page ${Math.floor(offset / pageSize) + 1}`
+          : 'Waiting for records'}
+      </span>
+      <Button
+        type="button"
+        variant="outline"
+        disabled={busy || !page?.hasMore || page.nextOffset == null || page.nextOffset > 10000}
+        onClick={() => {
+          if (page?.nextOffset != null) setOffset(page.nextOffset);
+        }}
+      >
+        Next
+      </Button>
+    </div>
+  );
+}
+function RecordState({
+  error,
+  loading,
+  children,
+}: {
+  error: string | null;
+  loading: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <>
+      {error && <p role="alert">{error}</p>}
+      {loading && <p role="status">Loading records…</p>}
+      {children}
+    </>
+  );
+}
+export default function FreeTimePage() {
+  const { workspaceId, tenantId, currentUser, apiGatewayUrl } = useMoveTheWheels();
+  return (
+    <PageLayout
+      title="Free time and extension decisions"
+      subtitle="Separate sourced commercial obligations, actual events and recorded counterparty decisions."
+      icon={<Clock aria-hidden="true" />}
+    >
+      <Workbench key={`${workspaceId}:${tenantId}:${currentUser?.id}:${apiGatewayUrl}`} />
+    </PageLayout>
+  );
+}
+function Workbench() {
+  const [containerId, setContainerId] = useState('');
+  const [cycleId, setCycleId] = useState('');
+  const [clockId, setClockId] = useState('');
+  const [containerOffset, setContainerOffset] = useState(0);
+  const [cycleOffset, setCycleOffset] = useState(0);
+  const [eventOffset, setEventOffset] = useState(0);
+  const [clockOffset, setClockOffset] = useState(0);
+  const [agreementOffset, setAgreementOffset] = useState(0);
+  const [extensionOffset, setExtensionOffset] = useState(0);
+  const [action, setAction] = useState<'open' | 'correct' | 'request' | 'decision'>('open');
+  const [chargeKind, setChargeKind] = useState<'DEMURRAGE' | 'DETENTION' | 'TERMINAL_STORAGE'>(
+    'DEMURRAGE'
+  );
+  const [obligation, setObligation] = useState('');
+  const [asOf, setAsOf] = useState(new Date().toISOString());
+  const [evaluation, setEvaluation] = useState(asOf);
+  const [validation, setValidation] = useState<string | null>(null);
+  const [evidence, setEvidence] = useState<SelectedEvidence[]>([]);
+  const [extensionId, setExtensionId] = useState('');
+  const [decisionKind, setDecisionKind] = useState<'ACCEPTED' | 'REJECTED' | 'EXPIRED'>('ACCEPTED');
+  const mutations = useConditionAction();
+  const containers = useConditionQuery<FreeContainersQuery>(FreeContainersDocument, {
+    pagination: { limit: pageSize, offset: containerOffset },
+  });
+  const cycles = useConditionQuery<FreeCyclesQuery>(
+    FreeCyclesDocument,
+    containerId ? { containerId, pagination: { limit: pageSize, offset: cycleOffset } } : null
+  );
+  const events = useConditionQuery<FreeEventsQuery>(
+    FreeEventsDocument,
+    cycleId ? { cycleId, pagination: { limit: pageSize, offset: eventOffset } } : null,
+    mutations.revision
+  );
+  const clocks = useConditionQuery<FreeClocksQuery>(
+    FreeClocksDocument,
+    cycleId ? { cycleId, pagination: { limit: pageSize, offset: clockOffset } } : null,
+    mutations.revision
+  );
+  const agreements = useConditionQuery<FreeAgreementsQuery>(
+    FreeAgreementsDocument,
+    clockId ? { clockId, pagination: { limit: pageSize, offset: agreementOffset } } : null,
+    mutations.revision
+  );
+  const currentAgreement = useConditionQuery<FreeAgreementsQuery>(
+    FreeAgreementsDocument,
+    clockId ? { clockId, pagination: { limit: 1, offset: 0 } } : null,
+    mutations.revision
+  );
+  const extensions = useConditionQuery<FreeExtensionsQuery>(
+    FreeExtensionsDocument,
+    clockId ? { clockId, pagination: { limit: pageSize, offset: extensionOffset } } : null,
+    mutations.revision
+  );
+  const exposure = useConditionQuery<FreeExposureQuery>(
+    FreeExposureDocument,
+    clockId ? { clockId, asOf: evaluation } : null,
+    mutations.revision
+  );
+  const clock = clocks.data?.mtwFreeTimeClockPage.items.find((item) => item.id === clockId);
+  const current = currentAgreement.data?.mtwFreeTimeAgreementPage.items[0];
+  const pending =
+    extensions.data?.mtwFreeTimeExtensionPage.items.filter((item) => !item.decision) ?? [];
+  const resetClock = () => {
+    setClockId('');
+    setAgreementOffset(0);
+    setExtensionOffset(0);
+    setExtensionId('');
+    setEvidence([]);
+    setAction('open');
+    setObligation('');
+    setValidation(null);
+    mutations.resetFeedback();
+  };
+  const estimate = exposure.data?.mtwFreeTimeExposure;
+  const evaluatedAgreement =
+    agreements.data?.mtwFreeTimeAgreementPage.items.find(
+      (item) => item.id === estimate?.agreementId
+    ) ?? (current?.id === estimate?.agreementId ? current : undefined);
+  const refs = () => {
+    if (!evidence.length) throw new Error('Select exact decision/request evidence versions.');
+    return evidence.map(({ fileId, versionId }) => ({ fileId, versionId }));
+  };
+  return (
+    <div className="space-y-6">
+      <p className="rounded-lg border p-4 text-sm">
+        These are estimates under recorded source terms. Separate storage, demurrage and detention
+        may overlap commercially; they are not automatically merged or summed across currencies. An
+        extension changes the clock only after external acceptance is recorded. This service does
+        not negotiate or certify acceptance.
+      </p>
+      <section className={card} aria-label="Container and commercial obligation">
+        <label className="block">
+          Container
+          <select
+            className={select}
+            value={containerId}
+            disabled={mutations.busy}
+            onChange={(event) => {
+              setContainerId(event.target.value);
+              setCycleId('');
+              setCycleOffset(0);
+              setEventOffset(0);
+              setClockOffset(0);
+              resetClock();
+            }}
+          >
+            <option value="">Choose container</option>
+            {containers.data?.mtwContainerPage.items.map((item) => (
+              <option key={item.id} value={item.id}>
+                {item.containerNumber}
+              </option>
+            ))}
+          </select>
+        </label>
+        <RecordState error={containers.error} loading={containers.loading}>
+          <Pager
+            page={containers.data?.mtwContainerPage}
+            offset={containerOffset}
+            busy={containers.loading || mutations.busy}
+            setOffset={(offset) => {
+              setContainerOffset(offset);
+              setContainerId('');
+              setCycleId('');
+              resetClock();
+            }}
+          />
+        </RecordState>
+        <label className="block">
+          Usage cycle
+          <select
+            className={select}
+            value={cycleId}
+            disabled={!containerId || mutations.busy}
+            onChange={(event) => {
+              setCycleId(event.target.value);
+              setEventOffset(0);
+              setClockOffset(0);
+              resetClock();
+            }}
+          >
+            <option value="">Choose cycle</option>
+            {cycles.data?.mtwContainerCyclePage.items.map((item) => (
+              <option key={item.id} value={item.id}>
+                {item.bookingReference ?? item.id} — {item.status} — {item.openedAt}
+              </option>
+            ))}
+          </select>
+        </label>
+        <RecordState error={cycles.error} loading={cycles.loading}>
+          <Pager
+            page={cycles.data?.mtwContainerCyclePage}
+            offset={cycleOffset}
+            busy={cycles.loading || mutations.busy}
+            setOffset={(offset) => {
+              setCycleOffset(offset);
+              setCycleId('');
+              resetClock();
+            }}
+          />
+        </RecordState>
+        <label className="block">
+          Commercial obligation
+          <select
+            className={select}
+            value={clockId}
+            disabled={!cycleId || mutations.busy}
+            onChange={(event) => {
+              setClockId(event.target.value);
+              setAgreementOffset(0);
+              setExtensionOffset(0);
+              setExtensionId('');
+              setEvidence([]);
+              setAction('correct');
+              setValidation(null);
+              mutations.resetFeedback();
+            }}
+          >
+            <option value="">New obligation / choose existing</option>
+            {clocks.data?.mtwFreeTimeClockPage.items.map((item) => (
+              <option key={item.id} value={item.id}>
+                {item.chargeKind} — {item.obligationReference}
+              </option>
+            ))}
+          </select>
+        </label>
+        <RecordState error={clocks.error} loading={clocks.loading}>
+          <Pager
+            page={clocks.data?.mtwFreeTimeClockPage}
+            offset={clockOffset}
+            busy={clocks.loading || mutations.busy}
+            setOffset={(offset) => {
+              setClockOffset(offset);
+              resetClock();
+            }}
+          />
+        </RecordState>
+      </section>
+      {clockId && (
+        <section className={card} aria-label="Recorded exposure">
+          <h2 className="text-lg font-semibold">Recorded exposure</h2>
+          <form
+            className="flex flex-wrap items-end gap-3"
+            onSubmit={(event) => {
+              event.preventDefault();
+              try {
+                setEvaluation(freeTimeIso(asOf));
+                setValidation(null);
+              } catch (failure) {
+                setValidation(
+                  failure instanceof Error ? failure.message : 'Invalid evaluation time'
+                );
+              }
+            }}
+          >
+            <label>
+              Evaluate at time with timezone
+              <Input value={asOf} onChange={(event) => setAsOf(event.target.value)} required />
+            </label>
+            <Button type="submit">Estimate exposure</Button>
+          </form>
+          <RecordState error={exposure.error} loading={exposure.loading}>
+            {estimate && (
+              <>
+                <p>
+                  Evaluation agreement: {estimate.agreementId ?? 'Unknown'}.{' '}
+                  {evaluatedAgreement
+                    ? `${evaluatedAgreement.payer} → ${evaluatedAgreement.payee}. Source: ${evaluatedAgreement.sourceReference}. Timezone: ${evaluatedAgreement.terms?.timeZone ?? 'Pricing terms unavailable'}.`
+                    : 'See the matching history version for source and parties.'}
+                </p>
+                <p>
+                  {estimate.status === 'ESTIMATED'
+                    ? 'Estimated under recorded terms'
+                    : `Cannot estimate: ${estimate.reason ?? 'Incomplete data'}`}
+                </p>
+                <p>
+                  Exact deadline: {estimate.freeUntil ?? 'Unknown'}
+                  {estimate.localLastFreeDate
+                    ? `; local last-free date ${estimate.localLastFreeDate}`
+                    : ''}
+                </p>
+                {estimate.status === 'ESTIMATED' && (
+                  <p>
+                    {estimate.chargedDays} charged dates;{' '}
+                    {typeof estimate.amountMinorUnits === 'number' &&
+                    typeof estimate.minorUnitDigits === 'number'
+                      ? `${(estimate.amountMinorUnits / 10 ** estimate.minorUnitDigits).toFixed(estimate.minorUnitDigits)} ${estimate.currency}`
+                      : 'Price data unavailable'}
+                    . Deadline source: {estimate.deadlineSource}.
+                  </p>
+                )}
+                <p className="text-sm">
+                  The exact timestamp takes precedence over a date label. Recalculated using
+                  versions effective at evaluation time; this does not reconstruct what was known
+                  then. Prospective segmented tariffs are unsupported.
+                </p>
+              </>
+            )}
+          </RecordState>
+        </section>
+      )}
+      {cycleId && (
+        <section className={card} aria-label="Record contractual change">
+          <h2 className="text-lg font-semibold">Record contractual change</h2>
+          <label className="block">
+            Free-time action
+            <select
+              className={select}
+              value={action}
+              disabled={mutations.busy}
+              onChange={(event) => {
+                const value = (['open', 'correct', 'request', 'decision'] as const).find(
+                  (item) => item === event.target.value
+                );
+                if (value) {
+                  setAction(value);
+                  mutations.resetFeedback();
+                  setExtensionId('');
+                  setEvidence([]);
+                  setValidation(null);
+                }
+              }}
+            >
+              <option value="open">Open a separate sourced obligation</option>
+              <option value="correct" disabled={!clock}>
+                Correct agreement / actual event binding
+              </option>
+              <option value="request" disabled={!clock}>
+                Record extension request
+              </option>
+              <option value="decision" disabled={!clock}>
+                Record external decision
+              </option>
+            </select>
+          </label>
+          {(action === 'open' || action === 'correct') && (
+            <>
+              {action === 'open' && (
+                <div className="grid gap-3 md:grid-cols-2">
+                  <label>
+                    Charge kind
+                    <select
+                      className={select}
+                      value={chargeKind}
+                      onChange={(event) => {
+                        const value = (
+                          ['DEMURRAGE', 'DETENTION', 'TERMINAL_STORAGE'] as const
+                        ).find((item) => item === event.target.value);
+                        if (value) setChargeKind(value);
+                      }}
+                    >
+                      <option>DEMURRAGE</option>
+                      <option>DETENTION</option>
+                      <option>TERMINAL_STORAGE</option>
+                    </select>
+                  </label>
+                  <label>
+                    Commercial obligation reference
+                    <Input
+                      required
+                      maxLength={255}
+                      value={obligation}
+                      onChange={(event) => setObligation(event.target.value)}
+                      placeholder="Payee / terminal / booking / segment"
+                    />
+                  </label>
+                </div>
+              )}
+              <RecordState error={events.error} loading={events.loading}>
+                <Pager
+                  page={events.data?.mtwContainerEventPage}
+                  offset={eventOffset}
+                  setOffset={setEventOffset}
+                  busy={events.loading || mutations.busy}
+                />
+              </RecordState>
+              {(action === 'open' || current) && (
+                <FreeTimeAgreementForm
+                  key={`${action}:${cycleId}:${clockId}:${current?.id}`}
+                  events={events.data?.mtwContainerEventPage.items ?? []}
+                  initial={action === 'correct' ? current : undefined}
+                  busy={
+                    mutations.busy ||
+                    events.loading ||
+                    (action === 'correct' && currentAgreement.loading)
+                  }
+                  onSubmit={async (agreement) => {
+                    if (action === 'open') {
+                      if (!obligation.trim())
+                        throw new Error('Enter a distinct commercial obligation reference.');
+                      await mutations.run(
+                        OpenFreeClockDocument,
+                        { cycleId, chargeKind, obligationReference: obligation, agreement },
+                        'Sourced clock opened.'
+                      );
+                    } else {
+                      if (!clock || !current)
+                        throw new Error('Reload the current obligation before correcting it.');
+                      await mutations.run(
+                        RecordFreeAgreementDocument,
+                        { clockId, expectedVersion: clock.version, agreement },
+                        'New immutable agreement version recorded.'
+                      );
+                    }
+                  }}
+                />
+              )}
+            </>
+          )}
+          {(action === 'request' || action === 'decision') && (
+            <form
+              className="space-y-4"
+              onSubmit={async (event) => {
+                event.preventDefault();
+                setValidation(null);
+                try {
+                  if (!clock || !current)
+                    throw new Error('Reload the current obligation and agreement.');
+                  const values = new FormData(event.currentTarget);
+                  const text = (name: string) => String(values.get(name) ?? '').trim();
+                  if (action === 'request')
+                    await mutations.run(
+                      RequestFreeExtensionDocument,
+                      {
+                        clockId,
+                        expectedVersion: clock.version,
+                        baseAgreementId: current.id,
+                        requestedFreeUntil: freeTimeIso(text('requestedDeadline')),
+                        requestedAt: freeTimeIso(text('requestedAt')),
+                        expiresAt: freeTimeIso(text('expiresAt')),
+                        reason: text('reason'),
+                        evidence: refs(),
+                      },
+                      'Request recorded; current terms remain unchanged.'
+                    );
+                  else {
+                    if (!pending.some((item) => item.id === extensionId))
+                      throw new Error('Choose an unanswered request.');
+                    await mutations.run(
+                      DecideFreeExtensionDocument,
+                      {
+                        extensionId,
+                        expectedVersion: clock.version,
+                        decision: decisionKind,
+                        decidedAt: freeTimeIso(text('decidedAt')),
+                        effectiveAt:
+                          decisionKind === 'ACCEPTED' ? freeTimeIso(text('effectiveAt')) : null,
+                        acceptedFreeUntil:
+                          decisionKind === 'ACCEPTED'
+                            ? freeTimeIso(text('acceptedDeadline'))
+                            : null,
+                        counterparty: text('counterparty'),
+                        sourceReference: text('confirmation'),
+                        note: text('note'),
+                        evidence: refs(),
+                      },
+                      'External decision recorded with immutable history.'
+                    );
+                  }
+                } catch (failure) {
+                  setValidation(
+                    failure instanceof Error ? failure.message : 'Unable to record change.'
+                  );
+                }
+              }}
+            >
+              {action === 'request' ? (
+                <div className="grid gap-3 md:grid-cols-2">
+                  {[
+                    ['requestedDeadline', 'Requested deadline with timezone'],
+                    ['requestedAt', 'Actual request time with timezone'],
+                    ['expiresAt', 'Request expiry with timezone'],
+                  ].map(([name, label]) => (
+                    <label key={name}>
+                      {label}
+                      <Input name={name} required placeholder="2026-10-04T09:00:00+05:30" />
+                    </label>
+                  ))}
+                  <label>
+                    Request reason
+                    <Input name="reason" required maxLength={2000} />
+                  </label>
+                </div>
+              ) : (
+                <>
+                  <label className="block">
+                    Unanswered extension request
+                    <select
+                      className={select}
+                      required
+                      value={extensionId}
+                      onChange={(event) => setExtensionId(event.target.value)}
+                    >
+                      <option value="">Choose request from this page</option>
+                      {pending.map((item) => (
+                        <option key={item.id} value={item.id}>
+                          {item.requestedFreeUntil} — expires {item.expiresAt} — base{' '}
+                          {item.baseAgreementId}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  <label className="block">
+                    Recorded decision
+                    <select
+                      className={select}
+                      value={decisionKind}
+                      onChange={(event) => {
+                        const value = (['ACCEPTED', 'REJECTED', 'EXPIRED'] as const).find(
+                          (item) => item === event.target.value
+                        );
+                        if (value) setDecisionKind(value);
+                      }}
+                    >
+                      <option>ACCEPTED</option>
+                      <option>REJECTED</option>
+                      <option>EXPIRED</option>
+                    </select>
+                  </label>
+                  <div className="grid gap-3 md:grid-cols-2">
+                    <label>
+                      Actual decision time with timezone
+                      <Input name="decidedAt" required />
+                    </label>
+                    <label>
+                      Counterparty / expiry authority
+                      <Input name="counterparty" required maxLength={255} />
+                    </label>
+                    <label>
+                      External confirmation source reference
+                      <Input name="confirmation" required maxLength={255} />
+                    </label>
+                    {decisionKind === 'ACCEPTED' && (
+                      <>
+                        <label>
+                          Externally accepted deadline with timezone
+                          <Input name="acceptedDeadline" required />
+                        </label>
+                        <label>
+                          Explicit effective time with timezone
+                          <Input name="effectiveAt" required />
+                        </label>
+                      </>
+                    )}
+                    <label>
+                      Decision note and applicability
+                      <Input name="note" required maxLength={2000} />
+                    </label>
+                  </div>
+                  <p className="text-sm">
+                    Requested and accepted deadlines can differ. Accepted extensions must move a
+                    known current cutoff later. Late decisions or a superseded base agreement
+                    require explicit reconciliation. Expiry never reverses an accepted agreement.
+                  </p>
+                </>
+              )}
+              <ContainerEvidencePicker
+                description="Choose exact source versions. Integrity does not independently establish contractual terms or counterparty acceptance."
+                value={evidence}
+                onChange={setEvidence}
+              />
+              <Button
+                type="submit"
+                disabled={mutations.busy || currentAgreement.loading || !clock || !current}
+              >
+                {action === 'request' ? 'Record extension request' : 'Record counterparty decision'}
+              </Button>
+            </form>
+          )}
+          {(validation || mutations.error) && <p role="alert">{validation ?? mutations.error}</p>}
+          {mutations.notice && <p role="status">{mutations.notice}</p>}
+          {mutations.hasPendingAttempt && (
+            <div className="space-y-2">
+              <p className="text-sm">
+                A failed response may still mean the record was saved. Check history before
+                discarding or repeating the action, especially after reopening this page.
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={mutations.busy}
+                onClick={mutations.discardAttempt}
+              >
+                Discard failed attempt
+              </Button>
+            </div>
+          )}
+        </section>
+      )}
+      {clockId && (
+        <div className="grid gap-6 xl:grid-cols-2">
+          <section className={card}>
+            <h2 className="text-lg font-semibold">Agreement history</h2>
+            <RecordState error={agreements.error} loading={agreements.loading}>
+              <ul className="space-y-3">
+                {agreements.data?.mtwFreeTimeAgreementPage.items.map((item) => (
+                  <li className="break-words rounded-lg border p-3 text-sm" key={item.id}>
+                    Version {item.version} (agreement {item.id}): {item.payer} → {item.payee};
+                    effective {item.effectiveAt}; {item.applicability}; deadline{' '}
+                    {item.confirmedFreeUntil ?? 'Calculated / unknown'}. Source{' '}
+                    {item.sourceReference}. Reason {item.changeReason}.
+                    <ul>
+                      {item.evidence.map((proof) => (
+                        <li className="break-all" key={proof.versionId}>
+                          Evidence version {proof.versionId}; SHA256 {proof.sha256Hash}
+                        </li>
+                      ))}
+                    </ul>
+                  </li>
+                ))}
+              </ul>
+              <Pager
+                page={agreements.data?.mtwFreeTimeAgreementPage}
+                offset={agreementOffset}
+                setOffset={setAgreementOffset}
+                busy={agreements.loading || mutations.busy}
+              />
+            </RecordState>
+          </section>
+          <section className={card}>
+            <h2 className="text-lg font-semibold">Extension decisions</h2>
+            <RecordState error={extensions.error} loading={extensions.loading}>
+              <ul className="space-y-3">
+                {extensions.data?.mtwFreeTimeExtensionPage.items.map((item) => (
+                  <li className="break-words rounded-lg border p-3 text-sm" key={item.id}>
+                    Requested {item.requestedFreeUntil}; expires {item.expiresAt}; base{' '}
+                    {item.baseAgreementId}.{' '}
+                    {item.decision
+                      ? `${item.decision.decision}: ${item.decision.acceptedFreeUntil ?? 'Terms unchanged'}; ${item.decision.counterparty}; ${item.decision.sourceReference}; ${item.decision.note}`
+                      : 'REQUESTED — no terminal decision recorded.'}
+                  </li>
+                ))}
+              </ul>
+              <Pager
+                page={extensions.data?.mtwFreeTimeExtensionPage}
+                offset={extensionOffset}
+                busy={extensions.loading || mutations.busy}
+                setOffset={(offset) => {
+                  setExtensionOffset(offset);
+                  setExtensionId('');
+                }}
+              />
+            </RecordState>
+          </section>
+        </div>
+      )}
+    </div>
+  );
+}