@burdenoff/microfe-movethewheels 2026.1012.1 → 2026.1013.1

package/src/movethewheels/pages/ContainersPage.tsx

@@ -1,5 +1,7 @@
 import { useState, type FormEvent } from 'react';
 import { Boxes, RefreshCw } from 'lucide-react';
+import { PermissionProvider } from '@burdenoff/fe-libs/shared/providers/shell';
+import { useShipmentPermissions } from '../hooks/useShipmentPermissions';
 import { PageLayout } from '../components/PageLayout';
 import { Button, Input, Label } from '../components/ui';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
@@ -23,12 +25,25 @@ 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 ?? ''}`} />;
+  const { workspaceId, tenantId, currentUser, apiGatewayUrl } = useMoveTheWheels();
+  return (
+    <PermissionProvider
+      key={`${workspaceId}:${tenantId}:${currentUser?.id}:${apiGatewayUrl}`}
+      scopeId={workspaceId ?? null}
+      gateway="workspace"
+    >
+      <ContainerAccess />
+    </PermissionProvider>
+  );
+}
+
+function ContainerAccess() {
+  const access = useShipmentPermissions();
+  return <ContainerWorkbench access={access} />;
 }
 
-function ContainerWorkbench() {
-  const data = useContainerLifecycle();
+function ContainerWorkbench({ access }: { access: ReturnType<typeof useShipmentPermissions> }) {
+  const data = useContainerLifecycle(access.canRead);
   const [number, setNumber] = useState('');
   const [equipmentType, setEquipmentType] = useState<EquipmentType>('DRY_20');
   const [ownerName, setOwnerName] = useState('');
@@ -63,6 +78,7 @@ function ContainerWorkbench() {
   };
   const register = (event: FormEvent) => {
     event.preventDefault();
+    if (!access.allows('create')) return;
     void act(async () => {
       await data.register({
         containerNumber: number.trim(),
@@ -75,7 +91,7 @@ function ContainerWorkbench() {
   };
   const record = (event: FormEvent) => {
     event.preventDefault();
-    if (!cycle) return;
+    if (!cycle || !access.allows('update')) return;
     void act(async () => {
       const timestamp = new Date(eventTime);
       if (!Number.isFinite(timestamp.getTime())) throw new Error('Enter a valid event time.');
@@ -94,6 +110,21 @@ function ContainerWorkbench() {
     }, 'Event recorded with its source and receipt time.');
   };
 
+  if (!access.canRead)
+    return (
+      <PageLayout
+        title="Containers"
+        subtitle="Physical equipment, usage cycles and sourced movement history"
+      >
+        <p role={access.failed ? 'alert' : 'status'}>
+          {access.loading
+            ? 'Checking shipment permissions…'
+            : access.failed
+              ? 'Shipment permissions are unavailable. Reload to retry.'
+              : 'Shipment read permission is required.'}
+        </p>
+      </PageLayout>
+    );
   return (
     <PageLayout
       title="Containers"
@@ -167,54 +198,56 @@ function ContainerWorkbench() {
               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>
+          {access.canCreate && (
+            <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>
@@ -266,11 +299,12 @@ function ContainerWorkbench() {
               }}
             />
           )}
-          {data.containerId && (
+          {data.containerId && access.canCreate && (
             <form
               className="space-y-3 border-t pt-4"
               onSubmit={(event) => {
                 event.preventDefault();
+                if (!access.allows('create')) return;
                 void act(async () => {
                   const timestamp = new Date(openingTime);
                   if (!Number.isFinite(timestamp.getTime())) {
@@ -345,111 +379,116 @@ function ContainerWorkbench() {
           )}
           {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>
+              {access.canUpdate && (
+                <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>
+              )}
+              {access.canUpdate && (
+                <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={() =>
+                      access.allows('update') &&
+                      void act(
+                        () => data.closeCycle(cycle),
+                        'Cycle closed after accepted empty return.'
+                      )
+                    }
+                  >
+                    Close cycle
+                  </Button>
+                </div>
+              )}
             </>
           )}
           {cycle?.status === 'CLOSED' && (

package/src/movethewheels/pages/DeliveryCapturePage.tsx

@@ -78,7 +78,7 @@ function CaptureForm({
   onCancel,
 }: {
   job: PendingEpodDeliveryJob;
-  onCaptured: () => void;
+  onCaptured: (deliveryJobId: string) => void;
   onCancel: () => void;
 }) {
   const { captureEpod, isSubmitting, error: captureError, captureFeedback } = useCaptureEpod();
@@ -163,7 +163,7 @@ function CaptureForm({
       const position = await getCurrentPosition();
       if (!active.current) return;
 
-      await captureEpod({
+      const proof = await captureEpod({
         expectedShipmentId: ownedStatus.data.myEpodShipmentStatus?.id ?? null,
         expectedShipmentStatusRevision: ownedStatus.data.myEpodShipmentStatus?.statusRevision,
         completionAttestation,
@@ -178,7 +178,8 @@ function CaptureForm({
         notes: notes.trim() || undefined,
       });
 
-      onCaptured();
+      if (!active.current) return;
+      onCaptured(proof.deliveryJobId);
     } catch {
       setCompletionAttestation(false);
       setRequiredStatusRefresh(statusRefresh + 1);
@@ -358,14 +359,16 @@ export default function DeliveryCapturePage() {
   const { workspaceId, tenantId, currentUser, apiGatewayUrl } = useMoveTheWheels();
   const [pageIndex, setPageIndex] = useState(0);
   const pageSize = 20;
-  const { jobs, hasMore, isLoading, error, refetch } = useMyPendingEpodDeliveryJobs({
-    limit: pageSize,
-    offset: pageIndex * pageSize,
-  });
+  const { jobs, hasMore, isLoading, error, refetch, retireAcknowledgedJob } =
+    useMyPendingEpodDeliveryJobs({
+      limit: pageSize,
+      offset: pageIndex * pageSize,
+    });
   const [selectedJob, setSelectedJob] = useState<PendingEpodDeliveryJob | null>(null);
   const { message, notify } = useNotice();
 
-  const handleCaptured = () => {
+  const handleCaptured = (deliveryJobId: string) => {
+    retireAcknowledgedJob(deliveryJobId);
     notify('Proof of delivery captured — delivery marked complete.');
     setSelectedJob(null);
     setPageIndex(0);

package/src/movethewheels/pages/FreeTimePage.tsx

@@ -1,5 +1,7 @@
 import { useState, type ReactNode } from 'react';
 import { Clock } from 'lucide-react';
+import { PermissionProvider } from '@burdenoff/fe-libs/shared/providers/shell';
+import { useShipmentPermissions } from '../hooks/useShipmentPermissions';
 
 import { PageLayout } from '../components/PageLayout';
 import { Button, Input } from '../components/ui';
@@ -105,11 +107,22 @@ export default function FreeTimePage() {
       subtitle="Separate sourced commercial obligations, actual events and recorded counterparty decisions."
       icon={<Clock aria-hidden="true" />}
     >
-      <Workbench key={`${workspaceId}:${tenantId}:${currentUser?.id}:${apiGatewayUrl}`} />
+      <PermissionProvider
+        key={`${workspaceId}:${tenantId}:${currentUser?.id}:${apiGatewayUrl}`}
+        scopeId={workspaceId ?? null}
+        gateway="workspace"
+      >
+        <FreeTimeAccess />
+      </PermissionProvider>
     </PageLayout>
   );
 }
-function Workbench() {
+function FreeTimeAccess() {
+  const access = useShipmentPermissions();
+  return <Workbench access={access} />;
+}
+
+function Workbench({ access }: { access: ReturnType<typeof useShipmentPermissions> }) {
   const [containerId, setContainerId] = useState('');
   const [cycleId, setCycleId] = useState('');
   const [clockId, setClockId] = useState('');
@@ -131,41 +144,56 @@ function Workbench() {
   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 containers = useConditionQuery<FreeContainersQuery>(
+    FreeContainersDocument,
+    access.canRead
+      ? {
+          pagination: { limit: pageSize, offset: containerOffset },
+        }
+      : null
+  );
   const cycles = useConditionQuery<FreeCyclesQuery>(
     FreeCyclesDocument,
-    containerId ? { containerId, pagination: { limit: pageSize, offset: cycleOffset } } : null
+    access.canRead && containerId
+      ? { containerId, pagination: { limit: pageSize, offset: cycleOffset } }
+      : null
   );
   const events = useConditionQuery<FreeEventsQuery>(
     FreeEventsDocument,
-    cycleId ? { cycleId, pagination: { limit: pageSize, offset: eventOffset } } : null,
+    access.canRead && cycleId
+      ? { cycleId, pagination: { limit: pageSize, offset: eventOffset } }
+      : null,
     mutations.revision
   );
   const clocks = useConditionQuery<FreeClocksQuery>(
     FreeClocksDocument,
-    cycleId ? { cycleId, pagination: { limit: pageSize, offset: clockOffset } } : null,
+    access.canRead && cycleId
+      ? { cycleId, pagination: { limit: pageSize, offset: clockOffset } }
+      : null,
     mutations.revision
   );
   const agreements = useConditionQuery<FreeAgreementsQuery>(
     FreeAgreementsDocument,
-    clockId ? { clockId, pagination: { limit: pageSize, offset: agreementOffset } } : null,
+    access.canRead && clockId
+      ? { clockId, pagination: { limit: pageSize, offset: agreementOffset } }
+      : null,
     mutations.revision
   );
   const currentAgreement = useConditionQuery<FreeAgreementsQuery>(
     FreeAgreementsDocument,
-    clockId ? { clockId, pagination: { limit: 1, offset: 0 } } : null,
+    access.canRead && clockId ? { clockId, pagination: { limit: 1, offset: 0 } } : null,
     mutations.revision
   );
   const extensions = useConditionQuery<FreeExtensionsQuery>(
     FreeExtensionsDocument,
-    clockId ? { clockId, pagination: { limit: pageSize, offset: extensionOffset } } : null,
+    access.canRead && clockId
+      ? { clockId, pagination: { limit: pageSize, offset: extensionOffset } }
+      : null,
     mutations.revision
   );
   const exposure = useConditionQuery<FreeExposureQuery>(
     FreeExposureDocument,
-    clockId ? { clockId, asOf: evaluation } : null,
+    access.canRead && clockId ? { clockId, asOf: evaluation } : null,
     mutations.revision
   );
   const clock = clocks.data?.mtwFreeTimeClockPage.items.find((item) => item.id === clockId);
@@ -192,6 +220,16 @@ function Workbench() {
     if (!evidence.length) throw new Error('Select exact decision/request evidence versions.');
     return evidence.map(({ fileId, versionId }) => ({ fileId, versionId }));
   };
+  if (!access.canRead)
+    return (
+      <p role={access.failed ? 'alert' : 'status'}>
+        {access.loading
+          ? 'Checking shipment permissions…'
+          : access.failed
+            ? 'Shipment permissions are unavailable. Reload to retry.'
+            : 'Shipment read permission is required.'}
+      </p>
+    );
   return (
     <div className="space-y-6">
       <p className="rounded-lg border p-4 text-sm">
@@ -370,7 +408,7 @@ function Workbench() {
           </RecordState>
         </section>
       )}
-      {cycleId && (
+      {cycleId && access.canUpdate && (
         <section className={card} aria-label="Record contractual change">
           <h2 className="text-lg font-semibold">Record contractual change</h2>
           <label className="block">
@@ -456,6 +494,8 @@ function Workbench() {
                     (action === 'correct' && currentAgreement.loading)
                   }
                   onSubmit={async (agreement) => {
+                    if (!access.allows('update'))
+                      throw new Error('Shipment update permission is required.');
                     if (action === 'open') {
                       if (!obligation.trim())
                         throw new Error('Enter a distinct commercial obligation reference.');
@@ -485,6 +525,8 @@ function Workbench() {
                 event.preventDefault();
                 setValidation(null);
                 try {
+                  if (!access.allows('update'))
+                    throw new Error('Shipment update permission is required.');
                   if (!clock || !current)
                     throw new Error('Reload the current obligation and agreement.');
                   const values = new FormData(event.currentTarget);