@burdenoff/microfe-movethewheels 2026.930.4 → 2026.1010.1

package/src/movethewheels/components/FreeTimeAgreementForm.tsx

@@ -0,0 +1,483 @@
+import { freeTimeIso } from '../utils/freeTimeDate';
+import { useState } from 'react';
+import type {
+  MtwFreeTimeAgreementInput,
+  FreeAgreementFieldsFragment,
+} from '../../generated/free-time-operations';
+import { ContainerEvidencePicker, type SelectedEvidence } from './ContainerEvidencePicker';
+import { Button, Input } from './ui';
+
+export interface FreeTimeEventOption {
+  id: string;
+  eventType: string;
+  kind: string;
+  occurredAt: string;
+}
+const field = 'block space-y-1 text-sm';
+const select = 'w-full rounded-md border bg-bg-surface p-2';
+export function FreeTimeAgreementForm({
+  events,
+  initial,
+  onSubmit,
+  busy,
+}: {
+  events: FreeTimeEventOption[];
+  initial?: FreeAgreementFieldsFragment;
+  onSubmit: (input: MtwFreeTimeAgreementInput) => Promise<void>;
+  busy: boolean;
+}) {
+  const [evidence, setEvidence] = useState<SelectedEvidence[]>([]);
+  const [pricing, setPricing] = useState(Boolean(initial?.terms));
+  const [rates, setRates] = useState(
+    initial?.terms?.rateTiers.map((rate) => ({
+      from: String(rate.fromDay),
+      through: rate.throughDay == null ? '' : String(rate.throughDay),
+      amount: String(rate.dailyMinorUnits),
+    })) ?? [{ from: '1', through: '', amount: '' }]
+  );
+  const [error, setError] = useState<string | null>(null);
+  const [triggerType, setTriggerType] = useState(
+    initial?.triggerEventType ?? 'AVAILABLE_FOR_PICKUP'
+  );
+  const [stopType, setStopType] = useState(initial?.stopEventType ?? 'GATE_OUT');
+  const [triggerEventId, setTriggerEventId] = useState(initial?.triggerEventId ?? '');
+  const [stopEventId, setStopEventId] = useState(initial?.stopEventId ?? '');
+  const holidays = (value: string) =>
+    value
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .filter(Boolean);
+  return (
+    <form
+      className="space-y-4"
+      onSubmit={async (event) => {
+        event.preventDefault();
+        setError(null);
+        try {
+          if (!evidence.length) throw new Error('Select exact source evidence versions.');
+          const values = new FormData(event.currentTarget);
+          const text = (name: string) => String(values.get(name) ?? '').trim();
+          const weekdays = (name: string) =>
+            text(name)
+              .split(',')
+              .map((value) => Number(value.trim()));
+          const terms = pricing
+            ? {
+                timeZone: text('timeZone'),
+                freeDays: Number(text('freeDays')),
+                includeTriggerDate: values.get('includeTrigger') === 'on',
+                freeCalendar: {
+                  weekdays: weekdays('freeWeekdays'),
+                  excludedDates: holidays(text('freeHolidays')),
+                },
+                chargeCalendar: {
+                  weekdays: weekdays('chargeWeekdays'),
+                  excludedDates: holidays(text('chargeHolidays')),
+                },
+                currency: text('currency'),
+                minorUnitDigits: Number(text('minorDigits')),
+                rateTiers: rates.map((rate) => ({
+                  fromDay: Number(rate.from),
+                  throughDay: rate.through ? Number(rate.through) : null,
+                  dailyMinorUnits: Number(rate.amount),
+                })),
+                calculationPolicy:
+                  text('calculationPolicy') === 'LOCAL_DATE_END'
+                    ? ('LOCAL_DATE_END' as const)
+                    : ('UNSUPPORTED' as const),
+                partialDayPolicy:
+                  text('partialDayPolicy') === 'ANY_STARTED_LOCAL_DATE'
+                    ? ('ANY_STARTED_LOCAL_DATE' as const)
+                    : ('UNSUPPORTED' as const),
+                tierBasis:
+                  text('tierBasis') === 'CHARGED_DAYS'
+                    ? ('CHARGED_DAYS' as const)
+                    : ('UNSUPPORTED' as const),
+              }
+            : null;
+          await onSubmit({
+            payer: text('payer'),
+            payee: text('payee'),
+            sourceReference: text('source'),
+            effectiveAt: freeTimeIso(text('effectiveAt')),
+            applicability:
+              text('applicability') === 'WHOLE_CLOCK' ? 'WHOLE_CLOCK' : 'UNSUPPORTED_SEGMENTED',
+            triggerEventType: triggerType,
+            stopEventType: stopType,
+            triggerEventId: text('triggerEvent') || null,
+            stopEventId: text('stopEvent') || null,
+            confirmedFreeUntil: text('confirmedDeadline')
+              ? freeTimeIso(text('confirmedDeadline'))
+              : null,
+            terms,
+            changeReason: text('changeReason'),
+            evidence: evidence.map(({ fileId, versionId }) => ({ fileId, versionId })),
+          });
+        } catch (failure) {
+          setError(failure instanceof Error ? failure.message : 'Unable to record agreement.');
+        }
+      }}
+    >
+      <p className="text-sm">
+        Each version is a full sourced replacement. Previous versions remain in history. Prices are
+        estimates, not payable invoice determinations.
+      </p>
+      <div className="grid gap-3 md:grid-cols-2">
+        <label className={field}>
+          Obligated party
+          <Input name="payer" required maxLength={255} defaultValue={initial?.payer} />
+        </label>
+        <label className={field}>
+          Payee
+          <Input name="payee" required maxLength={255} defaultValue={initial?.payee} />
+        </label>
+        <label className={field}>
+          Agreement source reference
+          <Input name="source" required maxLength={255} defaultValue={initial?.sourceReference} />
+        </label>
+        <label className={field}>
+          Agreement effective time with timezone
+          <Input
+            name="effectiveAt"
+            required
+            placeholder="2026-10-04T09:00:00+05:30"
+            defaultValue={initial?.effectiveAt}
+          />
+        </label>
+        <label className={field}>
+          Agreement applicability
+          <select
+            name="applicability"
+            className={select}
+            required
+            defaultValue={initial?.applicability ?? ''}
+          >
+            <option value="">Choose recorded applicability</option>
+            <option value="WHOLE_CLOCK">Applies to the whole clock</option>
+            <option value="UNSUPPORTED_SEGMENTED">
+              Prospective segmented amendment — cannot estimate
+            </option>
+          </select>
+        </label>
+        <label className={field}>
+          Externally confirmed deadline with timezone
+          <Input
+            name="confirmedDeadline"
+            placeholder="Leave empty if unconfirmed"
+            defaultValue={initial?.confirmedFreeUntil ?? ''}
+          />
+        </label>
+        <label className={field}>
+          Contractual trigger
+          <select
+            className={select}
+            value={triggerType}
+            onChange={(event) => {
+              const option = (
+                ['AVAILABLE_FOR_PICKUP', 'DISCHARGED', 'GATE_OUT', 'GATE_IN'] as const
+              ).find((type) => type === event.target.value);
+              if (option) {
+                setTriggerType(option);
+                setTriggerEventId('');
+              }
+            }}
+          >
+            <option>AVAILABLE_FOR_PICKUP</option>
+            <option>DISCHARGED</option>
+            <option>GATE_OUT</option>
+            <option>GATE_IN</option>
+          </select>
+        </label>
+        <label className={field}>
+          Contractual stop
+          <select
+            className={select}
+            value={stopType}
+            onChange={(event) => {
+              const option = (
+                [
+                  'GATE_OUT',
+                  'GATE_IN',
+                  'LOADED',
+                  'DELIVERED',
+                  'EMPTY_RETURNED',
+                  'RETURN_ACCEPTED',
+                ] as const
+              ).find((type) => type === event.target.value);
+              if (option) {
+                setStopType(option);
+                setStopEventId('');
+              }
+            }}
+          >
+            <option>GATE_OUT</option>
+            <option>GATE_IN</option>
+            <option>LOADED</option>
+            <option>DELIVERED</option>
+            <option>EMPTY_RETURNED</option>
+            <option>RETURN_ACCEPTED</option>
+          </select>
+        </label>
+        <label className={field}>
+          Actual trigger observation
+          <select
+            name="triggerEvent"
+            className={select}
+            value={triggerEventId}
+            onChange={(event) => setTriggerEventId(event.target.value)}
+          >
+            <option value="">Missing — exposure stays unknown</option>
+            {triggerEventId && !events.some((event) => event.id === triggerEventId) && (
+              <option value={triggerEventId}>
+                Selected actual observation — not on this event page
+              </option>
+            )}
+            {events
+              .filter((event) => event.kind === 'ACTUAL' && event.eventType === triggerType)
+              .map((event) => (
+                <option key={event.id} value={event.id}>
+                  {event.eventType} — {event.occurredAt}
+                </option>
+              ))}
+          </select>
+        </label>
+        <label className={field}>
+          Actual stop observation
+          <select
+            name="stopEvent"
+            className={select}
+            value={stopEventId}
+            onChange={(event) => setStopEventId(event.target.value)}
+          >
+            <option value="">No actual stop recorded</option>
+            {stopEventId && !events.some((event) => event.id === stopEventId) && (
+              <option value={stopEventId}>
+                Selected actual observation — not on this event page
+              </option>
+            )}
+            {events
+              .filter((event) => event.kind === 'ACTUAL' && event.eventType === stopType)
+              .map((event) => (
+                <option key={event.id} value={event.id}>
+                  {event.eventType} — {event.occurredAt}
+                </option>
+              ))}
+          </select>
+        </label>
+      </div>
+      <p className="text-sm">
+        Availability is a separate sourced observation. Requested return, actual return and accepted
+        return are distinct; select the boundary in the contract.
+      </p>
+      <label className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          checked={pricing}
+          onChange={(event) => setPricing(event.target.checked)}
+        />
+        Complete pricing terms available
+      </label>
+      {pricing && (
+        <fieldset className="space-y-3 rounded-lg border p-4">
+          <legend>Recorded pricing conventions</legend>
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className={field}>
+              Named IANA timezone
+              <Input
+                name="timeZone"
+                required
+                defaultValue={initial?.terms?.timeZone}
+                placeholder="Asia/Kolkata"
+              />
+            </label>
+            <label className={field}>
+              Free days
+              <Input
+                name="freeDays"
+                type="number"
+                required
+                min={0}
+                max={365}
+                defaultValue={initial?.terms?.freeDays}
+              />
+            </label>
+            <label className={field}>
+              Currency code
+              <Input
+                name="currency"
+                required
+                pattern="[A-Z]{3}"
+                defaultValue={initial?.terms?.currency}
+                placeholder="INR"
+              />
+            </label>
+            <label className={field}>
+              Currency minor-unit digits
+              <Input
+                name="minorDigits"
+                type="number"
+                required
+                min={0}
+                max={4}
+                defaultValue={initial?.terms?.minorUnitDigits}
+              />
+            </label>
+            <label className={field}>
+              Free-day weekdays (Monday=1…Sunday=7)
+              <Input
+                name="freeWeekdays"
+                required
+                defaultValue={initial?.terms?.freeCalendar.weekdays.join(',')}
+                placeholder="1,2,3,4,5"
+              />
+            </label>
+            <label className={field}>
+              Charged-day weekdays
+              <Input
+                name="chargeWeekdays"
+                required
+                defaultValue={initial?.terms?.chargeCalendar.weekdays.join(',')}
+                placeholder="1,2,3,4,5,6,7"
+              />
+            </label>
+            <label className={field}>
+              Excluded free dates, one YYYY-MM-DD per line
+              <textarea
+                className={select}
+                name="freeHolidays"
+                defaultValue={initial?.terms?.freeCalendar.excludedDates.join('\n')}
+              />
+            </label>
+            <label className={field}>
+              Excluded charge dates, one per line
+              <textarea
+                className={select}
+                name="chargeHolidays"
+                defaultValue={initial?.terms?.chargeCalendar.excludedDates.join('\n')}
+              />
+            </label>
+            <label className={field}>
+              Free-time counting
+              <select
+                className={select}
+                name="calculationPolicy"
+                required
+                defaultValue={initial?.terms?.calculationPolicy ?? ''}
+              >
+                <option value="">Choose sourced policy</option>
+                <option value="LOCAL_DATE_END">End of eligible local date</option>
+                <option value="UNSUPPORTED">
+                  Other / pooled / rolling 24-hour — cannot estimate
+                </option>
+              </select>
+            </label>
+            <label className={field}>
+              Partial-day charging
+              <select
+                className={select}
+                name="partialDayPolicy"
+                required
+                defaultValue={initial?.terms?.partialDayPolicy ?? ''}
+              >
+                <option value="">Choose sourced rounding</option>
+                <option value="ANY_STARTED_LOCAL_DATE">Any started eligible local date</option>
+                <option value="UNSUPPORTED">Other — cannot estimate</option>
+              </select>
+            </label>
+            <label className={field}>
+              Rate-tier basis
+              <select
+                className={select}
+                name="tierBasis"
+                required
+                defaultValue={initial?.terms?.tierBasis ?? ''}
+              >
+                <option value="">Choose sourced basis</option>
+                <option value="CHARGED_DAYS">Charged-day ordinal</option>
+                <option value="UNSUPPORTED">Elapsed / other — cannot estimate</option>
+              </select>
+            </label>
+            <label className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                name="includeTrigger"
+                defaultChecked={initial?.terms?.includeTriggerDate}
+              />
+              Count trigger date when eligible
+            </label>
+          </div>
+          {rates.map((rate, index) => (
+            <div key={index} className="grid gap-3 rounded-md border p-3 md:grid-cols-3">
+              {(['from', 'through', 'amount'] as const).map((name) => (
+                <label key={name} className={field}>
+                  {name === 'from'
+                    ? 'From charged day'
+                    : name === 'through'
+                      ? 'Through charged day (blank = unbounded)'
+                      : 'Daily price in integer minor units'}
+                  <Input
+                    type="number"
+                    min={name === 'amount' ? 0 : 1}
+                    max={name === 'amount' ? 1000000000 : undefined}
+                    required={name !== 'through'}
+                    value={rate[name]}
+                    onChange={(event) =>
+                      setRates((current) =>
+                        current.map((item, position) =>
+                          position === index ? { ...item, [name]: event.target.value } : item
+                        )
+                      )
+                    }
+                  />
+                </label>
+              ))}
+            </div>
+          ))}
+          <div className="flex flex-wrap gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              disabled={rates.length >= 20}
+              onClick={() =>
+                setRates((current) => [...current, { from: '', through: '', amount: '' }])
+              }
+            >
+              Add rate tier
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              disabled={rates.length === 1}
+              onClick={() => setRates((current) => current.slice(0, -1))}
+            >
+              Remove last tier
+            </Button>
+          </div>
+          <p className="text-sm">
+            Tiers start at day 1, are contiguous and end unbounded. Holidays must come from the
+            source; no country calendar is inferred.
+          </p>
+        </fieldset>
+      )}
+      <label className={field}>
+        Change reason and whole-clock applicability
+        <textarea
+          name="changeReason"
+          className={select}
+          required
+          maxLength={2000}
+          defaultValue={initial ? '' : undefined}
+        />
+      </label>
+      <ContainerEvidencePicker
+        description="Choose exact source versions. Integrity does not independently establish contractual terms or counterparty acceptance."
+        value={evidence}
+        onChange={setEvidence}
+      />
+      {error && <p role="alert">{error}</p>}
+      <Button type="submit" disabled={busy}>
+        {initial ? 'Record agreement correction' : 'Open sourced clock'}
+      </Button>
+    </form>
+  );
+}

package/src/movethewheels/components/ReturnInstructionForm.tsx

@@ -0,0 +1,102 @@
+import { reuseText } from '../utils/reuseForm';
+import { useState } from 'react';
+import type {
+  RecordMtwEmptyReturnInstructionInput,
+  ReturnInstructionFieldsFragment,
+} from '../../generated/empty-reuse-operations';
+import { ContainerEvidencePicker, type SelectedEvidence } from './ContainerEvidencePicker';
+import { ReuseField } from './ReuseControls';
+import { freeTimeIso } from '../utils/freeTimeDate';
+import { Button } from './ui';
+export type ReturnInstructionDraft = Omit<
+  RecordMtwEmptyReturnInstructionInput,
+  'idempotencyKey' | 'expectedCycleVersion' | 'cycleId' | 'currentInstructionId'
+>;
+export function ReturnInstructionForm({
+  current,
+  busy,
+  onSubmit,
+}: {
+  current?: ReturnInstructionFieldsFragment;
+  busy: boolean;
+  onSubmit: (input: ReturnInstructionDraft) => Promise<unknown>;
+}) {
+  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 {
+          const values = new FormData(event.currentTarget);
+          if (!evidence.length)
+            throw new Error('Select exact sourced return-instruction evidence.');
+          await onSubmit({
+            ownerReference: reuseText(values, 'ownerReference'),
+            bookingReference: reuseText(values, 'bookingReference'),
+            depotReference: reuseText(values, 'depotReference'),
+            locationReference: reuseText(values, 'locationReference'),
+            returnFrom: freeTimeIso(reuseText(values, 'returnFrom')),
+            returnUntil: freeTimeIso(reuseText(values, 'returnUntil')),
+            effectiveAt: freeTimeIso(reuseText(values, 'effectiveAt')),
+            sourceReference: reuseText(values, 'sourceReference'),
+            changeReason: reuseText(values, 'changeReason'),
+            evidence: evidence.map(({ fileId, versionId }) => ({ fileId, versionId })),
+          });
+        } catch (failure) {
+          setError(failure instanceof Error ? failure.message : 'Invalid instruction.');
+        }
+      }}
+    >
+      <fieldset disabled={busy} className="space-y-4">
+        <p>
+          {current
+            ? `Amending current instruction v${current.version}; retains the old immutable record.`
+            : 'Record initial owner/carrier return instruction.'}
+        </p>
+        <div className="grid gap-3 md:grid-cols-2">
+          <ReuseField
+            label="Equipment owner reference"
+            name="ownerReference"
+            value={current?.ownerReference}
+          />
+          <ReuseField
+            label="Import booking reference"
+            name="bookingReference"
+            value={current?.bookingReference}
+          />
+          <ReuseField
+            label="Return depot reference"
+            name="depotReference"
+            value={current?.depotReference}
+          />
+          <ReuseField
+            label="Return location reference"
+            name="locationReference"
+            value={current?.locationReference}
+          />
+          <ReuseField
+            label="Return window from (ISO with timezone)"
+            name="returnFrom"
+            value={current?.returnFrom}
+          />
+          <ReuseField
+            label="Return window until (ISO with timezone)"
+            name="returnUntil"
+            value={current?.returnUntil}
+          />
+          <ReuseField label="Effective at (ISO with timezone)" name="effectiveAt" />
+          <ReuseField label="Source reference" name="sourceReference" />
+        </div>
+        <ReuseField label="Change reason" name="changeReason" maxLength={2000} />
+        <ContainerEvidencePicker value={evidence} onChange={setEvidence} />
+        {error && <p role="alert">{error}</p>}
+        <Button type="submit" disabled={busy}>
+          Record sourced instruction
+        </Button>
+      </fieldset>
+    </form>
+  );
+}