@burdenoff/microfe-movethewheels 2026.930.4 → 2026.1010.1

package/src/movethewheels/pages/ContainersPage.tsx

@@ -0,0 +1,490 @@
+import { useState, type FormEvent } from 'react';
+import { Boxes, RefreshCw } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { Button, Input, Label } from '../components/ui';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import {
+  CONTAINER_EVENT_TYPES,
+  EQUIPMENT_TYPES,
+  useContainerLifecycle,
+  type ContainerEventKind,
+  type ContainerEventType,
+  type EquipmentType,
+} from '../hooks/useContainerLifecycle';
+
+function readable(value: string): string {
+  return value.replaceAll('_', ' ');
+}
+function formatTime(value: string): string {
+  return new Date(value).toLocaleString();
+}
+const selectClass = 'w-full rounded-md border bg-bg-surface p-2 text-sm';
+const sectionClass = 'rounded-xl border bg-bg-surface p-5 space-y-4';
+
+/** Remount on identity/workspace changes so previous workspace records never flash. */
+export default function ContainersPage() {
+  const { workspaceId, currentUser } = useMoveTheWheels();
+  return <ContainerWorkbench key={`${workspaceId ?? ''}:${currentUser?.id ?? ''}`} />;
+}
+
+function ContainerWorkbench() {
+  const data = useContainerLifecycle();
+  const [number, setNumber] = useState('');
+  const [equipmentType, setEquipmentType] = useState<EquipmentType>('DRY_20');
+  const [ownerName, setOwnerName] = useState('');
+  const [source, setSource] = useState('');
+  const [booking, setBooking] = useState('');
+  const [openingTime, setOpeningTime] = useState('');
+  const [eventType, setEventType] = useState<ContainerEventType>('GATE_OUT');
+  const [kind, setKind] = useState<ContainerEventKind>('ACTUAL');
+  const [eventTime, setEventTime] = useState('');
+  const [eventSource, setEventSource] = useState('');
+  const [sourceReference, setSourceReference] = useState('');
+  const [evidence, setEvidence] = useState('');
+  const [location, setLocation] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const selected = data.containers.find((row) => row.id === data.containerId);
+  const cycle = data.cycles.find((row) => row.id === data.cycleId);
+
+  const act = async (operation: () => Promise<void>, success: string) => {
+    setBusy(true);
+    setActionError(null);
+    setNotice(null);
+    try {
+      await operation();
+      setNotice(success);
+    } catch (error) {
+      setActionError(error instanceof Error ? error.message : 'Operation failed.');
+    } finally {
+      setBusy(false);
+    }
+  };
+  const register = (event: FormEvent) => {
+    event.preventDefault();
+    void act(async () => {
+      await data.register({
+        containerNumber: number.trim(),
+        equipmentType,
+        ownerName: ownerName.trim() || undefined,
+        source: source.trim(),
+      });
+      setNumber('');
+    }, 'Container registered. Record its usage cycle next.');
+  };
+  const record = (event: FormEvent) => {
+    event.preventDefault();
+    if (!cycle) return;
+    void act(async () => {
+      const timestamp = new Date(eventTime);
+      if (!Number.isFinite(timestamp.getTime())) throw new Error('Enter a valid event time.');
+      await data.recordEvent({
+        cycleId: cycle.id,
+        eventType,
+        kind,
+        occurredAt: timestamp.toISOString(),
+        source: eventSource.trim(),
+        sourceReference: sourceReference.trim() || undefined,
+        evidenceNote: evidence.trim() || undefined,
+        location: location.trim() || undefined,
+      });
+      setEvidence('');
+      setEventTime('');
+    }, 'Event recorded with its source and receipt time.');
+  };
+
+  return (
+    <PageLayout
+      title="Containers"
+      subtitle="Physical equipment, usage cycles and sourced movement history"
+      icon={<Boxes size={24} />}
+      headerActions={
+        <Button variant="outline" onClick={data.refresh} disabled={busy}>
+          <RefreshCw size={16} className="mr-2" />
+          Refresh
+        </Button>
+      }
+    >
+      <p className="mb-5 text-sm text-text-secondary">
+        Shipment delivery and equipment return are separate obligations. Close a cycle only after an
+        actual empty return and recorded return acceptance.
+      </p>
+      {actionError && (
+        <p role="alert" className="mb-4 rounded-md border border-red-400 p-3">
+          {actionError}
+        </p>
+      )}
+      {notice && (
+        <p role="status" className="mb-4 rounded-md border p-3">
+          {notice}
+        </p>
+      )}
+      <div className="grid gap-5 xl:grid-cols-3">
+        <section className={sectionClass}>
+          <h2 className="text-lg font-semibold">Equipment registry</h2>
+          {data.loading && <p role="status">Loading containers…</p>}
+          {data.error && (
+            <p role="alert">
+              {data.error}{' '}
+              <Button variant="outline" onClick={data.refresh}>
+                Retry
+              </Button>
+            </p>
+          )}
+          {!data.loading && !data.error && data.containers.length === 0 && (
+            <p>No containers on this page. Register equipment to start tracking its lifecycle.</p>
+          )}
+          <ul className="space-y-2">
+            {data.containers.map((row) => (
+              <li key={row.id}>
+                <button
+                  type="button"
+                  aria-pressed={row.id === data.containerId}
+                  disabled={busy}
+                  onClick={() => {
+                    data.selectContainer(row.id);
+                    setActionError(null);
+                    setNotice(null);
+                  }}
+                  className={`w-full rounded-md border p-3 text-left ${row.id === data.containerId ? 'border-blue-500' : ''}`}
+                >
+                  <span className="font-semibold">{row.containerNumber}</span>
+                  <br />
+                  <span className="text-sm">
+                    {readable(row.equipmentType)} · {row.ownerName || 'Owner not recorded'}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+          <Pagination
+            page={data.page}
+            more={data.hasMore}
+            disabled={data.loading || busy}
+            onChange={(page) => {
+              data.selectContainer('');
+              data.setPage(page);
+            }}
+          />
+          <form onSubmit={register} className="space-y-3 border-t pt-4">
+            <h3 className="font-semibold">Register container</h3>
+            <Label htmlFor="container-number">ISO container number</Label>
+            <Input
+              id="container-number"
+              value={number}
+              onChange={(event) => setNumber(event.target.value)}
+              required
+              maxLength={20}
+              placeholder="Four letters and seven digits"
+            />
+            <Label htmlFor="equipment-type">Physical equipment type</Label>
+            <select
+              id="equipment-type"
+              className={selectClass}
+              value={equipmentType}
+              onChange={(event) =>
+                setEquipmentType(
+                  EQUIPMENT_TYPES.find((value) => value === event.target.value) ?? 'OTHER'
+                )
+              }
+            >
+              {EQUIPMENT_TYPES.map((value) => (
+                <option key={value} value={value}>
+                  {readable(value)}
+                </option>
+              ))}
+            </select>
+            <Label htmlFor="container-owner">Owner (optional)</Label>
+            <Input
+              id="container-owner"
+              value={ownerName}
+              onChange={(event) => setOwnerName(event.target.value)}
+              maxLength={200}
+            />
+            <Label htmlFor="container-source">Information source</Label>
+            <Input
+              id="container-source"
+              value={source}
+              onChange={(event) => setSource(event.target.value)}
+              required
+              maxLength={120}
+              placeholder="Equipment release document or carrier portal"
+            />
+            <Button type="submit" disabled={busy || !number.trim() || !source.trim()}>
+              Register container
+            </Button>
+          </form>
+        </section>
+        <section className={sectionClass}>
+          <h2 className="text-lg font-semibold">Usage cycles</h2>
+          {!data.containerId && <p>Select a container to view its cycles.</p>}
+          {selected && (
+            <p className="text-sm">
+              {selected.containerNumber} · Source: {selected.source}
+            </p>
+          )}
+          {data.cyclesLoading && <p role="status">Loading cycles…</p>}
+          {data.cycleError && <p role="alert">{data.cycleError}</p>}
+          {data.containerId && !data.cyclesLoading && !data.cycleError && !data.cycles.length && (
+            <p>No usage cycles on this page.</p>
+          )}
+          <ul className="space-y-2">
+            {data.cycles.map((row) => (
+              <li key={row.id}>
+                <button
+                  type="button"
+                  aria-pressed={row.id === data.cycleId}
+                  disabled={busy}
+                  className={`w-full rounded-md border p-3 text-left ${row.id === data.cycleId ? 'border-blue-500' : ''}`}
+                  onClick={() => {
+                    data.selectCycle(row.id);
+                    setActionError(null);
+                    setNotice(null);
+                  }}
+                >
+                  <span className="font-semibold">
+                    {row.bookingReference || 'Unlinked booking'} · {row.status}
+                  </span>
+                  <br />
+                  <span className="text-sm">Opened {formatTime(row.openedAt)}</span>
+                  {row.closedAt && (
+                    <span className="block text-sm">Closed {formatTime(row.closedAt)}</span>
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+          {data.containerId && (
+            <Pagination
+              page={data.cyclePage}
+              more={data.hasMoreCycles}
+              disabled={data.cyclesLoading || busy}
+              onChange={(page) => {
+                data.selectCycle('');
+                data.setCyclePage(page);
+              }}
+            />
+          )}
+          {data.containerId && (
+            <form
+              className="space-y-3 border-t pt-4"
+              onSubmit={(event) => {
+                event.preventDefault();
+                void act(async () => {
+                  const timestamp = new Date(openingTime);
+                  if (!Number.isFinite(timestamp.getTime())) {
+                    throw new Error('Enter a valid cycle opening time.');
+                  }
+                  await data.openCycle({
+                    containerId: data.containerId,
+                    bookingReference: booking.trim() || undefined,
+                    openedAt: timestamp.toISOString(),
+                  });
+                }, 'Usage cycle opened.');
+              }}
+            >
+              <Label htmlFor="booking-reference">Booking reference (optional)</Label>
+              <Input
+                id="booking-reference"
+                value={booking}
+                onChange={(event) => setBooking(event.target.value)}
+                maxLength={120}
+              />
+              <Label htmlFor="cycle-opening-time">Cycle opening time (your local timezone)</Label>
+              <Input
+                id="cycle-opening-time"
+                type="datetime-local"
+                step={1}
+                value={openingTime}
+                onChange={(event) => setOpeningTime(event.target.value)}
+                required
+              />
+              <Button type="submit" disabled={busy || data.cyclesLoading}>
+                Open usage cycle
+              </Button>
+              <p className="text-sm text-text-secondary">
+                Only one cycle may be open for this container. Use its actual start time so earlier
+                movements can be recorded. Times are stored in UTC.
+              </p>
+            </form>
+          )}
+        </section>
+        <section className={sectionClass}>
+          <h2 className="text-lg font-semibold">Movement and return history</h2>
+          {!data.cycleId && <p>Select a usage cycle to view and record events.</p>}
+          {data.eventsLoading && <p role="status">Loading events…</p>}
+          {data.eventError && <p role="alert">{data.eventError}</p>}
+          {data.cycleId && !data.eventsLoading && !data.eventError && !data.events.length && (
+            <p>No events on this page. Record actual movements with their source.</p>
+          )}
+          <ol className="space-y-3">
+            {data.events.map((row) => (
+              <li key={row.id} className="rounded-md border p-3 text-sm">
+                <p className="font-semibold">
+                  {readable(row.eventType)} · {row.kind}
+                </p>
+                <p>Occurred: {formatTime(row.occurredAt)}</p>
+                <p>Received: {formatTime(row.receivedAt)}</p>
+                <p>
+                  Source: {row.source}
+                  {row.sourceReference ? ` · ${row.sourceReference}` : ''}
+                </p>
+                {row.location && <p>Location: {row.location}</p>}
+                {row.evidenceNote && <p>Evidence: {row.evidenceNote}</p>}
+              </li>
+            ))}
+          </ol>
+          {data.cycleId && (
+            <Pagination
+              page={data.eventPage}
+              more={data.hasMoreEvents}
+              disabled={data.eventsLoading || busy}
+              onChange={data.setEventPage}
+            />
+          )}
+          {cycle?.status === 'OPEN' && (
+            <>
+              <form onSubmit={record} className="space-y-3 border-t pt-4">
+                <h3 className="font-semibold">Record event</h3>
+                <Label htmlFor="container-event">Event</Label>
+                <select
+                  id="container-event"
+                  className={selectClass}
+                  value={eventType}
+                  onChange={(event) =>
+                    setEventType(
+                      CONTAINER_EVENT_TYPES.find((value) => value === event.target.value) ??
+                        'POSITION_UPDATE'
+                    )
+                  }
+                >
+                  {CONTAINER_EVENT_TYPES.map((value) => (
+                    <option key={value} value={value}>
+                      {readable(value)}
+                    </option>
+                  ))}
+                </select>
+                <Label htmlFor="event-kind">Event certainty</Label>
+                <select
+                  id="event-kind"
+                  className={selectClass}
+                  value={kind}
+                  onChange={(event) =>
+                    setKind(
+                      event.target.value === 'PLANNED'
+                        ? 'PLANNED'
+                        : event.target.value === 'ESTIMATED'
+                          ? 'ESTIMATED'
+                          : 'ACTUAL'
+                    )
+                  }
+                >
+                  <option value="ACTUAL">Actual</option>
+                  <option value="PLANNED">Planned</option>
+                  <option value="ESTIMATED">Estimated</option>
+                </select>
+                <Label htmlFor="event-time">Event time (your local timezone)</Label>
+                <Input
+                  id="event-time"
+                  type="datetime-local"
+                  step={1}
+                  value={eventTime}
+                  onChange={(event) => setEventTime(event.target.value)}
+                  required
+                />
+                <Label htmlFor="event-source">Event source</Label>
+                <Input
+                  id="event-source"
+                  value={eventSource}
+                  onChange={(event) => setEventSource(event.target.value)}
+                  required
+                  maxLength={120}
+                />
+                <Label htmlFor="source-reference">Source reference (optional)</Label>
+                <Input
+                  id="source-reference"
+                  value={sourceReference}
+                  onChange={(event) => setSourceReference(event.target.value)}
+                  maxLength={200}
+                />
+                <Label htmlFor="event-location">Location (optional)</Label>
+                <Input
+                  id="event-location"
+                  value={location}
+                  onChange={(event) => setLocation(event.target.value)}
+                  maxLength={200}
+                />
+                <Label htmlFor="event-evidence">
+                  Evidence note
+                  {eventType === 'RETURN_ACCEPTED' && kind === 'ACTUAL'
+                    ? ' (required for acceptance)'
+                    : ' (optional)'}
+                </Label>
+                <Input
+                  id="event-evidence"
+                  value={evidence}
+                  onChange={(event) => setEvidence(event.target.value)}
+                  maxLength={2000}
+                  required={eventType === 'RETURN_ACCEPTED' && kind === 'ACTUAL'}
+                />
+                <Button type="submit" disabled={busy || !eventSource.trim()}>
+                  Record event
+                </Button>
+              </form>
+              <div className="space-y-3 border-t pt-4">
+                <p className="text-sm text-text-secondary">
+                  Closure checks the complete recorded history for actual empty return and
+                  acceptance. A planned return or delivered shipment is insufficient.
+                </p>
+                <Button
+                  variant="outline"
+                  disabled={busy || data.cyclesLoading || data.eventsLoading}
+                  onClick={() =>
+                    void act(
+                      () => data.closeCycle(cycle),
+                      'Cycle closed after accepted empty return.'
+                    )
+                  }
+                >
+                  Close cycle
+                </Button>
+              </div>
+            </>
+          )}
+          {cycle?.status === 'CLOSED' && (
+            <p>This cycle is closed. Its recorded history remains available.</p>
+          )}
+        </section>
+      </div>
+    </PageLayout>
+  );
+}
+
+function Pagination({
+  page,
+  more,
+  disabled,
+  onChange,
+}: {
+  page: number;
+  more: boolean;
+  disabled: boolean;
+  onChange: (page: number) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <Button
+        variant="outline"
+        disabled={disabled || page === 0}
+        onClick={() => onChange(page - 1)}
+      >
+        Previous
+      </Button>
+      <span className="text-sm">Page {page + 1}</span>
+      <Button variant="outline" disabled={disabled || !more} onClick={() => onChange(page + 1)}>
+        Next
+      </Button>
+    </div>
+  );
+}