@burdenoff/microfe-movethewheels 2026.930.5 → 2026.1010.1

package/src/movethewheels/components/ReuseControls.tsx

@@ -0,0 +1,138 @@
+import type { ReactNode } from 'react';
+import { Button, Input } from './ui';
+export const reuseCard = 'space-y-4 rounded-xl border bg-bg-surface p-5';
+export const reuseSelect = 'mt-1 w-full rounded-md border bg-bg-surface p-2 text-sm';
+export interface ReusePageInfo {
+  total: number;
+  limit: number;
+  offset: number;
+  hasMore: boolean;
+  nextOffset?: number | null;
+}
+export function ReusePager({
+  page,
+  offset,
+  onChange,
+  busy,
+}: {
+  page?: ReusePageInfo;
+  offset: number;
+  onChange: (offset: number) => void;
+  busy: boolean;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button
+        type="button"
+        variant="outline"
+        disabled={busy || offset === 0}
+        onClick={() => onChange(Math.max(0, offset - (page?.limit ?? 25)))}
+      >
+        Previous
+      </Button>
+      <span className="text-sm">
+        {page
+          ? `${page.total} records; showing ${page.total === 0 ? 0 : page.offset + 1}–${Math.min(page.offset + page.limit, page.total)}`
+          : 'Waiting for records'}
+      </span>
+      <Button
+        type="button"
+        variant="outline"
+        disabled={busy || !page?.hasMore || page.nextOffset == null || page.nextOffset > 10000}
+        onClick={() => {
+          if (page?.nextOffset != null) onChange(page.nextOffset);
+        }}
+      >
+        Next
+      </Button>
+    </div>
+  );
+}
+export function ReuseState({
+  loading,
+  error,
+  children,
+}: {
+  loading: boolean;
+  error: string | null;
+  children?: ReactNode;
+}) {
+  return (
+    <>
+      {loading && <p role="status">Loading records…</p>}
+      {error && <p role="alert">{error}</p>}
+      {children}
+    </>
+  );
+}
+export function ReuseField({
+  label,
+  name,
+  value,
+  type = 'text',
+  required = true,
+  maxLength = 255,
+}: {
+  label: string;
+  name: string;
+  value?: string;
+  type?: 'text' | 'number';
+  required?: boolean;
+  maxLength?: number;
+}) {
+  return (
+    <label className="block">
+      {label}
+      <Input
+        name={name}
+        defaultValue={value}
+        required={required}
+        type={type}
+        maxLength={maxLength}
+        min={type === 'number' ? 0 : undefined}
+        step={type === 'number' ? 1 : undefined}
+      />
+    </label>
+  );
+}
+export function PinnedSelect({
+  label,
+  name,
+  value,
+  onChange,
+  options,
+  required = true,
+  disabled = false,
+}: {
+  label: string;
+  name?: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: { id: string; label: string }[];
+  required?: boolean;
+  disabled?: boolean;
+}) {
+  return (
+    <label className="block">
+      {label}
+      <select
+        className={reuseSelect}
+        name={name}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        required={required}
+        disabled={disabled}
+      >
+        <option value="">{required ? 'Choose record' : 'UNKNOWN / not recorded'}</option>
+        {value && !options.some((item) => item.id === value) && (
+          <option value={value}>Pinned record {value} (outside this page)</option>
+        )}
+        {options.map((item) => (
+          <option key={item.id} value={item.id}>
+            {item.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}

package/src/movethewheels/components/ReusePermissionForm.tsx

@@ -0,0 +1,123 @@
+import { reuseText } from '../utils/reuseForm';
+import { useState } from 'react';
+import type {
+  RecordMtwEquipmentReuseApprovalInput,
+  ReuseApprovalFieldsFragment,
+  MtwReuseApprovalKind,
+} from '../../generated/empty-reuse-operations';
+import { ContainerEvidencePicker, type SelectedEvidence } from './ContainerEvidencePicker';
+import { Button } from './ui';
+import { PinnedSelect, ReuseField } from './ReuseControls';
+import { freeTimeIso } from '../utils/freeTimeDate';
+export type ReusePermissionDraft = Omit<
+  RecordMtwEquipmentReuseApprovalInput,
+  'idempotencyKey' | 'proposalId' | 'expectedCycleVersion'
+>;
+const kinds: MtwReuseApprovalKind[] = ['APPROVED', 'REJECTED', 'REVOKED'];
+export function ReusePermissionForm({
+  approvals,
+  ownerReference,
+  busy,
+  onSubmit,
+}: {
+  approvals: ReuseApprovalFieldsFragment[];
+  ownerReference: string;
+  busy: boolean;
+  onSubmit: (input: ReusePermissionDraft) => Promise<unknown>;
+}) {
+  const [kind, setKind] = useState<MtwReuseApprovalKind>('APPROVED');
+  const [targetId, setTargetId] = useState('');
+  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 external permission evidence.');
+          if (kind === 'REVOKED' && !targetId)
+            throw new Error('Select the exact grant being revoked.');
+          await onSubmit({
+            kind,
+            counterpartyReference: reuseText(values, 'counterpartyReference'),
+            sourceReference: reuseText(values, 'sourceReference'),
+            note: reuseText(values, 'note'),
+            approvalId: kind === 'REVOKED' ? targetId : undefined,
+            validFrom:
+              kind === 'APPROVED' ? freeTimeIso(reuseText(values, 'validFrom')) : undefined,
+            validUntil:
+              kind === 'APPROVED' ? freeTimeIso(reuseText(values, 'validUntil')) : undefined,
+            evidence: evidence.map(({ fileId, versionId }) => ({ fileId, versionId })),
+          });
+        } catch (failure) {
+          setError(failure instanceof Error ? failure.message : 'Invalid permission record.');
+        }
+      }}
+    >
+      <fieldset disabled={busy} className="space-y-4">
+        <p className="text-sm">
+          Record external owner/carrier permission for this exact planning revision. This does not
+          create permission, authenticate the counterparty, reserve equipment or dispatch.
+        </p>
+        <PinnedSelect
+          label="Recorded external decision"
+          value={kind}
+          onChange={(value) => {
+            const next = kinds.find((item) => item === value);
+            if (next) {
+              setKind(next);
+              setTargetId('');
+              setEvidence([]);
+              setError(null);
+            }
+          }}
+          options={kinds.map((id) => ({
+            id,
+            label:
+              id === 'APPROVED'
+                ? 'Sourced grant'
+                : id === 'REJECTED'
+                  ? 'Sourced rejection'
+                  : 'Revoke exact grant',
+          }))}
+        />
+        {kind === 'REVOKED' && (
+          <PinnedSelect
+            label="Grant to revoke"
+            value={targetId}
+            onChange={setTargetId}
+            options={approvals
+              .filter((item) => item.kind === 'APPROVED')
+              .map((item) => ({
+                id: item.id,
+                label: `${item.counterpartyReference} — ${item.sourceReference} — ${item.id}`,
+              }))}
+          />
+        )}
+        <div className="grid gap-3 md:grid-cols-2">
+          <ReuseField
+            label="Exact equipment owner reference"
+            name="counterpartyReference"
+            value={ownerReference}
+          />
+          <ReuseField label="External source reference" name="sourceReference" />
+          {kind === 'APPROVED' && (
+            <>
+              <ReuseField label="Permission valid from (ISO with timezone)" name="validFrom" />
+              <ReuseField label="Permission valid until (ISO with timezone)" name="validUntil" />
+            </>
+          )}
+        </div>
+        <ReuseField label="Decision or revocation note" name="note" maxLength={2000} />
+        <ContainerEvidencePicker value={evidence} onChange={setEvidence} />
+        {error && <p role="alert">{error}</p>}
+        <Button type="submit" disabled={busy}>
+          Record external decision
+        </Button>
+      </fieldset>
+    </form>
+  );
+}