@burdenoff/microfe-movethewheels 2026.1101.1 → 2026.1101.3

package/src/movethewheels/pages/DeliveryCapturePage.tsx

@@ -1,460 +1,545 @@
 /**
- * Delivery Capture Page — driver-facing electronic proof-of-delivery (ePOD)
- * capture flow (BOFF-4399).
+ * My Deliveries — the driver-facing mobile task list (BOFF-3991), built on
+ * the electronic proof-of-delivery capture core from BOFF-4399.
  *
- * Lists the calling driver's own delivery jobs still awaiting capture
- * (`myPendingEpodDeliveryJobs`, Type C self-list — no other driver's jobs are
- * ever visible here) and lets them capture: recipient name, signature
- * (drawn or typed), an optional delivery photo (uploaded via the platform
- * files primitive), device GPS if available, and notes. Submitting calls
- * `captureEpod`, which the backend owner-verifies against the assigned
- * driver and marks the job DELIVERED.
+ * Shows the calling driver's stops for a day (`myDeliveryDay`, a Type C
+ * self-list: no other driver's jobs are ever visible here) in driving
+ * sequence with progress, the next stop, turn-by-turn hand-off to the
+ * device's maps app (one stop, or the remaining stops as a route), a stop
+ * detail screen with recipient contact and delivery instructions, and the
+ * ePOD capture form. The layout is single-column and touch-sized so it works
+ * as the driver surface inside the Capacitor mobile build and on a phone
+ * browser.
  *
- * Deferred (see BOFF-4399 follow-up notes): barcode/RFID scan-based capture,
- * multi-language delivery instructions, and the full standalone mobile
- * driver app (BOFF-3991) — this page is the capture core, reachable from the
- * existing web MFE.
+ * Offline: the last loaded day stays on screen and a banner explains that
+ * capture is paused. Capture is deliberately not queued offline — it needs
+ * the live linked shipment status and an acknowledged server write
+ * (see EpodCaptureForm).
  */
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  AlertTriangle,
+  ArrowLeft,
+  CalendarDays,
   CheckCircle2,
-  Loader2,
-  MapPin,
-  Package,
-  PenLine,
-  Truck,
-  Type as TypeIcon,
-  Upload,
   ChevronLeft,
   ChevronRight,
+  Clock,
+  Navigation,
+  Package,
+  Phone,
+  RefreshCw,
+  Route as RouteIcon,
+  Truck,
+  WifiOff,
 } from 'lucide-react';
 import { PageLayout } from '../components/PageLayout';
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Input,
-  Label,
-  Textarea,
-} from '../components/ui';
-import { SignaturePad, type SignaturePadHandle } from '../components/SignaturePad';
-import { StatusBadge, PriorityBadge } from '../components/StatusBadge';
-import { mapOrderPriority, mapOrderStatus } from '../hooks/useOrders';
+import { Badge, Button, Card, CardContent, Input, Progress } from '../components/ui';
+import { PriorityBadge } from '../components/StatusBadge';
+import { EpodCaptureForm } from '../components/EpodCaptureForm';
 import { FormError } from '../components/FormError';
 import { Notice, useNotice } from '../components/Notice';
+import { mapOrderPriority } from '../hooks/useOrders';
+import type { PendingEpodDeliveryJob } from '../hooks/useEpod';
+import {
+  useMyDeliveryDay,
+  useOnlineStatus,
+  type DriverStop,
+  type DriverStopState,
+} from '../hooks/useDriverDay';
 import {
-  useCaptureEpod,
-  useEpodPhotoUpload,
-  useMyPendingEpodDeliveryJobs,
-  type PendingEpodDeliveryJob,
-} from '../hooks/useEpod';
-import { formatAddress, formatDate } from '../utils/formatters';
-import type { SignatureType } from '../types';
-import { useShipmentStatusQuery } from '../hooks/useShipmentStatusAuthority';
-import { StatusAuthorityOwnedDeliveryDocument } from '../../generated/shipment-status-authority-operations';
-import type { StatusAuthorityOwnedDeliveryQuery } from '../../generated/shipment-status-authority-operations';
+  formatLocalDay,
+  localDateString,
+  phoneHref,
+  routeNavigationUrl,
+  shiftLocalDate,
+  stopNavigationUrl,
+} from '../utils/driverNavigation';
+import { formatAddress, formatDate, formatTime } from '../utils/formatters';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 
-/** Resolves the device's current position, if the browser grants it. Never blocks submission. */
-function getCurrentPosition(): Promise<GeolocationPosition | null> {
-  return new Promise((resolve) => {
-    if (!navigator.geolocation) {
-      resolve(null);
-      return;
-    }
-    navigator.geolocation.getCurrentPosition(
-      (position) => resolve(position),
-      () => resolve(null),
-      { enableHighAccuracy: true, timeout: 8000, maximumAge: 30000 }
-    );
-  });
-}
-
-function CaptureForm({
-  job,
-  onCaptured,
-  onCancel,
-}: {
-  job: PendingEpodDeliveryJob;
-  onCaptured: (deliveryJobId: string) => void;
-  onCancel: () => void;
-}) {
-  const { captureEpod, isSubmitting, error: captureError, captureFeedback } = useCaptureEpod();
-  const [statusRefresh, setStatusRefresh] = useState(0);
-  const ownedStatus = useShipmentStatusQuery<StatusAuthorityOwnedDeliveryQuery>(
-    StatusAuthorityOwnedDeliveryDocument,
-    { deliveryJobId: job.id },
-    statusRefresh
-  );
-  const [completionAttestation, setCompletionAttestation] = useState(false);
-  const uploadedPhoto = useRef<{ file: File; id: string } | null>(null);
-  const submissionLock = useRef(false);
-  const active = useRef(true);
-  useEffect(() => {
-    active.current = true;
-    return () => {
-      active.current = false;
-    };
-  }, []);
-  const [preparing, setPreparing] = useState(false);
-  const [requiredStatusRefresh, setRequiredStatusRefresh] = useState(0);
-  const { upload: uploadPhoto, isUploading, error: uploadError } = useEpodPhotoUpload();
-  const signaturePadRef = useRef<SignaturePadHandle>(null);
-
-  const [recipientName, setRecipientName] = useState('');
-  const [signatureType, setSignatureType] = useState<SignatureType>('drawn');
-  const [typedSignature, setTypedSignature] = useState('');
-  const [photoFile, setPhotoFile] = useState<File | null>(null);
-  const [notes, setNotes] = useState('');
-  const [validationError, setValidationError] = useState<string | null>(null);
+type StopFilter = 'all' | 'remaining' | 'completed';
 
-  const handleSubmit = async () => {
-    if (submissionLock.current) return;
-    setValidationError(null);
-    if (
-      ownedStatus.loading ||
-      ownedStatus.error ||
-      !ownedStatus.data ||
-      statusRefresh < requiredStatusRefresh ||
-      !completionAttestation ||
-      captureFeedback?.kind === 'UNKNOWN'
-    ) {
-      setValidationError(
-        'Review the current linked shipment status and confirm completion before capture. Do not resend an uncertain capture.'
-      );
-      return;
-    }
+type View = { kind: 'list' } | { kind: 'stop'; jobId: string } | { kind: 'capture'; jobId: string };
 
-    const trimmedRecipient = recipientName.trim();
-    if (!trimmedRecipient) {
-      setValidationError('Recipient name is required.');
-      return;
-    }
+const STATE_LABEL: Record<DriverStopState, string> = {
+  COMPLETED: 'Delivered',
+  EN_ROUTE: 'En route',
+  UPCOMING: 'Upcoming',
+  FAILED: 'Not delivered',
+};
 
-    const signatureData =
-      signatureType === 'typed'
-        ? typedSignature.trim()
-        : (signaturePadRef.current?.toDataUrl() ?? null);
-    if (!signatureData) {
-      setValidationError(
-        signatureType === 'typed'
-          ? 'Type the recipient full name as their signature.'
-          : 'A signature is required.'
-      );
-      return;
-    }
+const STATE_VARIANT: Record<DriverStopState, 'default' | 'secondary' | 'destructive' | 'outline'> =
+  {
+    COMPLETED: 'secondary',
+    EN_ROUTE: 'default',
+    UPCOMING: 'outline',
+    FAILED: 'destructive',
+  };
 
-    submissionLock.current = true;
-    setPreparing(true);
-    try {
-      let photoFileIds: string[] | undefined;
-      if (photoFile) {
-        if (uploadedPhoto.current?.file === photoFile) photoFileIds = [uploadedPhoto.current.id];
-        else {
-          const uploaded = await uploadPhoto(photoFile);
-          uploadedPhoto.current = { file: photoFile, id: uploaded.fileId };
-          photoFileIds = [uploaded.fileId];
-        }
-      }
+function isDone(stop: DriverStop): boolean {
+  return stop.state === 'COMPLETED' || stop.state === 'FAILED';
+}
 
-      if (!active.current) return;
-      const position = await getCurrentPosition();
-      if (!active.current) return;
+function toCaptureJob(stop: DriverStop): PendingEpodDeliveryJob {
+  return {
+    id: stop.jobId,
+    deliveryJobNumber: stop.deliveryJobNumber,
+    status: stop.status,
+    priority: stop.priority,
+    deliveryAddress: stop.deliveryAddress,
+    scheduledDelivery: stop.scheduledDelivery,
+    customerName: stop.customerName,
+    customerPhone: stop.customerPhone,
+  };
+}
 
-      const proof = await captureEpod({
-        expectedShipmentId: ownedStatus.data.myEpodShipmentStatus?.id ?? null,
-        expectedShipmentStatusRevision: ownedStatus.data.myEpodShipmentStatus?.statusRevision,
-        completionAttestation,
-        deliveryJobId: job.id,
-        recipientName: trimmedRecipient,
-        signatureType,
-        signatureData,
-        photoFileIds,
-        latitude: position?.coords.latitude,
-        longitude: position?.coords.longitude,
-        locationAccuracy: position?.coords.accuracy,
-        notes: notes.trim() || undefined,
-      });
+function openExternal(url: string | null) {
+  if (url) window.open(url, '_blank', 'noopener,noreferrer');
+}
 
-      if (!active.current) return;
-      onCaptured(proof.deliveryJobId);
-    } catch {
-      setCompletionAttestation(false);
-      setRequiredStatusRefresh(statusRefresh + 1);
-      // captureError / uploadError already carry the message for display below.
-    } finally {
-      submissionLock.current = false;
-      setPreparing(false);
-    }
-  };
+function StopStateBadge({ state }: { state: DriverStopState }) {
+  return <Badge variant={STATE_VARIANT[state]}>{STATE_LABEL[state]}</Badge>;
+}
 
-  const submitting = isSubmitting || isUploading || preparing;
+function SequenceMarker({ stop }: { stop: DriverStop }) {
+  const done = isDone(stop);
+  return (
+    <span
+      aria-hidden="true"
+      className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold ${
+        stop.state === 'EN_ROUTE'
+          ? 'border-primary bg-primary text-primary-foreground'
+          : done
+            ? 'border-border bg-surface-secondary text-text-secondary'
+            : 'border-border bg-surface text-text-primary'
+      }`}
+    >
+      {stop.state === 'COMPLETED' ? <CheckCircle2 size={16} /> : stop.sequence}
+    </span>
+  );
+}
 
+function StopCard({
+  stop,
+  onOpen,
+  onCapture,
+  offline,
+}: {
+  stop: DriverStop;
+  onOpen: () => void;
+  onCapture: () => void;
+  offline: boolean;
+}) {
   return (
     <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Truck size={18} /> Capture delivery for {job.deliveryJobNumber}
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="text-sm text-text-secondary space-y-1">
-          {job.customerName && <p>Recipient on file: {job.customerName}</p>}
-          {job.deliveryAddress && <p>{formatAddress(job.deliveryAddress)}</p>}
-        </div>
-        <section aria-label="Linked shipment status" className="space-y-2">
-          <p>
-            Recorded shipment:{' '}
-            {ownedStatus.data?.myEpodShipmentStatus
-              ? `${ownedStatus.data.myEpodShipmentStatus.status.toLowerCase().replaceAll('_', ' ')} · revision ${ownedStatus.data.myEpodShipmentStatus.statusRevision}`
-              : ownedStatus.data
-                ? 'No linked shipment'
-                : 'Loading current record'}
+      <CardContent className="flex items-start gap-3 py-4">
+        <SequenceMarker stop={stop} />
+        <button
+          type="button"
+          onClick={onOpen}
+          aria-label={`Stop ${stop.sequence}, ${stop.deliveryJobNumber}, open details`}
+          className="min-w-0 flex-1 text-left"
+        >
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span className="font-medium">Stop {stop.sequence}</span>
+            <StopStateBadge state={stop.state} />
+            {stop.overdue && <Badge variant="destructive">Overdue</Badge>}
+          </div>
+          {stop.deliveryAddress && (
+            <p className="mt-1 text-sm text-text-secondary">
+              {formatAddress(stop.deliveryAddress)}
+            </p>
+          )}
+          <p className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-text-secondary">
+            {stop.scheduledDelivery && (
+              <span className="flex items-center gap-1">
+                <Clock size={12} /> {formatTime(stop.scheduledDelivery)}
+              </span>
+            )}
+            <span className="flex items-center gap-1">
+              <Package size={12} /> {stop.deliveryJobNumber}
+            </span>
+            {stop.routeName && (
+              <span className="flex items-center gap-1">
+                <RouteIcon size={12} /> {stop.routeName}
+              </span>
+            )}
           </p>
-          {ownedStatus.error && <p role="alert">{ownedStatus.error}</p>}
-          <Button
-            variant="outline"
-            disabled={ownedStatus.loading || submitting}
-            onClick={() => {
-              setCompletionAttestation(false);
-              setStatusRefresh((value) => value + 1);
-            }}
-          >
-            Refresh linked status
+        </button>
+        {stop.awaitingCapture && (
+          <Button type="button" size="sm" onClick={onCapture} disabled={offline}>
+            Capture
           </Button>
-          <label className="flex items-start gap-2">
-            <input
-              type="checkbox"
-              checked={completionAttestation}
-              disabled={
-                ownedStatus.loading ||
-                !!ownedStatus.error ||
-                submitting ||
-                statusRefresh < requiredStatusRefresh ||
-                captureFeedback?.kind === 'UNKNOWN'
-              }
-              onChange={(event) => setCompletionAttestation(event.target.checked)}
-            />
-            I reviewed the recorded linked status and attest to this delivery completion.
-          </label>
-          <p>
-            This records an assigned driver's attestation; it does not independently verify physical
-            freight movement.
-          </p>
-          {captureFeedback && <p role="status">{captureFeedback.message}</p>}
-        </section>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
 
-        <div className="space-y-1.5">
-          <Label htmlFor="epod-recipient-name">Recipient name</Label>
-          <Input
-            id="epod-recipient-name"
-            value={recipientName}
-            onChange={(event) => setRecipientName(event.target.value)}
-            placeholder="Who received the delivery?"
-          />
-        </div>
+function StopDetail({
+  stop,
+  onBack,
+  onCapture,
+  offline,
+}: {
+  stop: DriverStop;
+  onBack: () => void;
+  onCapture: () => void;
+  offline: boolean;
+}) {
+  const navigateUrl = stopNavigationUrl(stop.deliveryAddress);
+  const callUrl = phoneHref(stop.customerPhone);
+  return (
+    <div className="space-y-4">
+      <Button type="button" variant="ghost" size="sm" onClick={onBack}>
+        <ArrowLeft size={16} /> All stops
+      </Button>
+      <Card>
+        <CardContent className="space-y-4 py-5">
+          <div className="flex flex-wrap items-center gap-2">
+            <SequenceMarker stop={stop} />
+            <h2 className="text-lg font-semibold">Stop {stop.sequence}</h2>
+            <StopStateBadge state={stop.state} />
+            <PriorityBadge priority={mapOrderPriority(stop.priority)} size="sm" />
+            {stop.overdue && <Badge variant="destructive">Overdue</Badge>}
+          </div>
+
+          <dl className="grid gap-3 text-sm">
+            <div>
+              <dt className="text-text-secondary">Deliver to</dt>
+              <dd className="font-medium">
+                {stop.deliveryAddress ? formatAddress(stop.deliveryAddress) : 'No address on file'}
+              </dd>
+            </div>
+            {stop.customerName && (
+              <div>
+                <dt className="text-text-secondary">Recipient</dt>
+                <dd className="font-medium">{stop.customerName}</dd>
+              </div>
+            )}
+            <div>
+              <dt className="text-text-secondary">Order</dt>
+              <dd className="font-medium">{stop.deliveryJobNumber}</dd>
+            </div>
+            {stop.scheduledDelivery && (
+              <div>
+                <dt className="text-text-secondary">Scheduled</dt>
+                <dd className="font-medium">{formatDate(stop.scheduledDelivery, 'full')}</dd>
+              </div>
+            )}
+            {stop.routeName && (
+              <div>
+                <dt className="text-text-secondary">Route</dt>
+                <dd className="font-medium">{stop.routeName}</dd>
+              </div>
+            )}
+            {stop.specialInstructions && (
+              <div>
+                <dt className="text-text-secondary">Delivery instructions</dt>
+                <dd className="whitespace-pre-line">{stop.specialInstructions}</dd>
+              </div>
+            )}
+            {stop.deliveredAt && (
+              <div>
+                <dt className="text-text-secondary">Proof of delivery captured</dt>
+                <dd className="font-medium">{formatDate(stop.deliveredAt, 'full')}</dd>
+              </div>
+            )}
+          </dl>
 
-        <div className="space-y-1.5">
-          <Label>Signature</Label>
-          <div className="flex gap-2">
+          <div className="grid gap-2 sm:grid-cols-2">
             <Button
               type="button"
-              variant={signatureType === 'drawn' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setSignatureType('drawn')}
+              variant="outline"
+              disabled={!navigateUrl}
+              onClick={() => openExternal(navigateUrl)}
             >
-              <PenLine size={14} /> Draw
+              <Navigation size={16} /> Navigate
             </Button>
             <Button
               type="button"
-              variant={signatureType === 'typed' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => setSignatureType('typed')}
+              variant="outline"
+              disabled={!callUrl}
+              onClick={() => {
+                if (callUrl) window.location.href = callUrl;
+              }}
             >
-              <TypeIcon size={14} /> Type name instead
+              <Phone size={16} /> Call recipient
             </Button>
           </div>
-          {signatureType === 'drawn' ? (
-            <SignaturePad ref={signaturePadRef} />
-          ) : (
-            <Input
-              value={typedSignature}
-              onChange={(event) => setTypedSignature(event.target.value)}
-              placeholder="Type full name as signature"
-            />
-          )}
-        </div>
-
-        <div className="space-y-1.5">
-          <Label htmlFor="epod-photo">Delivery photo (optional)</Label>
-          <div className="flex items-center gap-2">
-            <input
-              id="epod-photo"
-              type="file"
-              accept="image/*"
-              capture="environment"
-              onChange={(event) => setPhotoFile(event.target.files?.[0] ?? null)}
-              className="text-sm"
-            />
-            {photoFile && <Upload size={14} className="text-text-secondary" />}
-          </div>
-          {photoFile && <p className="text-xs text-text-secondary">{photoFile.name}</p>}
-        </div>
-
-        <div className="space-y-1.5">
-          <Label htmlFor="epod-notes">Notes (optional)</Label>
-          <Textarea
-            id="epod-notes"
-            value={notes}
-            onChange={(event) => setNotes(event.target.value)}
-            placeholder="e.g. Left with front desk, gate code used, etc."
-            rows={2}
-          />
-        </div>
-
-        <p className="flex items-center gap-1.5 text-xs text-text-secondary">
-          <MapPin size={12} /> Device GPS is captured automatically when permitted by the browser.
-        </p>
 
-        {validationError && <FormError message={validationError} />}
-        {captureError && <FormError message={captureError.message} />}
-        {uploadError && <FormError message={uploadError.message} />}
-
-        <div className="flex gap-2 justify-end">
-          <Button type="button" variant="outline" onClick={onCancel} disabled={submitting}>
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            onClick={() => void handleSubmit()}
-            disabled={
-              submitting ||
-              ownedStatus.loading ||
-              !!ownedStatus.error ||
-              !ownedStatus.data ||
-              statusRefresh < requiredStatusRefresh ||
-              !completionAttestation ||
-              captureFeedback?.kind === 'UNKNOWN'
-            }
-          >
-            {submitting ? (
-              <>
-                <Loader2 size={14} className="animate-spin" /> Submitting…
-              </>
-            ) : (
-              <>
-                <CheckCircle2 size={14} /> Confirm delivery
-              </>
-            )}
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
+          {stop.awaitingCapture ? (
+            <Button type="button" className="w-full" onClick={onCapture} disabled={offline}>
+              <CheckCircle2 size={16} /> Capture proof of delivery
+            </Button>
+          ) : stop.state === 'UPCOMING' ? (
+            <p className="text-sm text-text-secondary">
+              Proof of delivery opens once dispatch marks this stop out for delivery.
+            </p>
+          ) : null}
+        </CardContent>
+      </Card>
+    </div>
   );
 }
 
 export default function DeliveryCapturePage() {
   const { workspaceId, tenantId, currentUser, apiGatewayUrl } = useMoveTheWheels();
-  const [pageIndex, setPageIndex] = useState(0);
-  const pageSize = 20;
-  const { jobs, hasMore, isLoading, error, refetch, retireAcknowledgedJob } =
-    useMyPendingEpodDeliveryJobs({
-      limit: pageSize,
-      offset: pageIndex * pageSize,
-    });
-  const [selectedJob, setSelectedJob] = useState<PendingEpodDeliveryJob | null>(null);
+  const online = useOnlineStatus();
+  const offline = !online;
+  const [date, setDate] = useState(() => localDateString(new Date()));
+  const [filter, setFilter] = useState<StopFilter>('all');
+  const [view, setView] = useState<View>({ kind: 'list' });
+  const { day, isLoading, error, refetch, markCaptured } = useMyDeliveryDay(date);
   const { message, notify } = useNotice();
+  const today = localDateString(new Date());
+
+  // Coming back online: refresh so the list reflects anything dispatch changed.
+  // Only an offline -> online transition refetches; the hook already loads on
+  // mount and whenever the date or scope changes.
+  const wasOffline = useRef(false);
+  useEffect(() => {
+    if (!online) {
+      wasOffline.current = true;
+    } else if (wasOffline.current) {
+      wasOffline.current = false;
+      void refetch();
+    }
+  }, [online, refetch]);
+
+  const stops = useMemo(() => day?.stops ?? [], [day]);
+  const visibleStops = useMemo(
+    () =>
+      stops.filter((stop) =>
+        filter === 'all' ? true : filter === 'completed' ? isDone(stop) : !isDone(stop)
+      ),
+    [stops, filter]
+  );
+  const remainingRouteUrl = useMemo(
+    () =>
+      routeNavigationUrl(stops.filter((stop) => !isDone(stop)).map((stop) => stop.deliveryAddress)),
+    [stops]
+  );
+  const selected =
+    view.kind === 'list' ? null : (stops.find((stop) => stop.jobId === view.jobId) ?? null);
 
   const handleCaptured = (deliveryJobId: string) => {
-    retireAcknowledgedJob(deliveryJobId);
+    markCaptured(deliveryJobId);
     notify('Proof of delivery captured — delivery marked complete.');
-    setSelectedJob(null);
-    setPageIndex(0);
-    refetch();
+    setView({ kind: 'list' });
+    void refetch();
   };
 
+  const changeDate = (next: string) => {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(next)) return;
+    setDate(next);
+    setView({ kind: 'list' });
+  };
+
+  const progress = day && day.totalStops > 0 ? (day.completedStops / day.totalStops) * 100 : 0;
+
   return (
     <PageLayout
       title="My Deliveries"
-      subtitle="Capture proof of delivery for your assigned stops"
+      subtitle="Your stops for the day, in order — navigate, then capture proof of delivery"
       icon={<Truck size={24} />}
+      maxWidth="2xl"
     >
       <div className="space-y-4">
         <Notice message={message} />
 
-        {selectedJob ? (
-          <CaptureForm
-            key={`${workspaceId}:${tenantId}:${currentUser?.id}:${apiGatewayUrl}:${selectedJob.id}`}
-            job={selectedJob}
+        {offline && (
+          <div
+            role="status"
+            className="flex items-start gap-2 rounded-md border border-border bg-surface-secondary p-3 text-sm"
+          >
+            <WifiOff size={16} className="mt-0.5 shrink-0" />
+            <span>
+              You are offline. Your last loaded stops stay available; reconnect to capture proof of
+              delivery.
+            </span>
+          </div>
+        )}
+
+        {selected && view.kind === 'capture' && selected.awaitingCapture ? (
+          <EpodCaptureForm
+            key={`${workspaceId}:${tenantId}:${currentUser?.id}:${apiGatewayUrl}:${selected.jobId}`}
+            job={toCaptureJob(selected)}
+            offline={offline}
             onCaptured={handleCaptured}
-            onCancel={() => setSelectedJob(null)}
+            onCancel={() => setView({ kind: 'stop', jobId: selected.jobId })}
           />
-        ) : isLoading ? (
-          <p className="text-text-secondary text-center py-8">Loading your deliveries…</p>
-        ) : error ? (
-          <FormError message={error.message} />
-        ) : jobs.length > 0 ? (
-          <div className="space-y-3">
-            {jobs.map((job) => (
-              <Card key={job.id}>
-                <CardContent className="flex items-center justify-between gap-3 py-4">
-                  <div className="min-w-0">
-                    <p className="font-medium flex items-center gap-2">
-                      <Package size={16} /> {job.deliveryJobNumber}
-                    </p>
-                    {/* Stop state + urgency, straight off the job record — a driver
-                        needs to know which stop is already out for delivery. */}
-                    <div className="flex flex-wrap items-center gap-1.5 py-1">
-                      <StatusBadge status={mapOrderStatus(job.status)} type="order" size="sm" />
-                      <PriorityBadge priority={mapOrderPriority(job.priority)} size="sm" />
-                    </div>
-                    {job.deliveryAddress && (
-                      <p className="text-sm text-text-secondary truncate">
-                        {formatAddress(job.deliveryAddress)}
-                      </p>
-                    )}
-                    {job.scheduledDelivery && (
-                      <p className="text-xs text-text-secondary">
-                        Scheduled {formatDate(job.scheduledDelivery, 'short')}
+        ) : selected ? (
+          <StopDetail
+            stop={selected}
+            offline={offline}
+            onBack={() => setView({ kind: 'list' })}
+            onCapture={() => setView({ kind: 'capture', jobId: selected.jobId })}
+          />
+        ) : (
+          <>
+            <div className="flex flex-wrap items-center gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                aria-label="Previous day"
+                onClick={() => changeDate(shiftLocalDate(date, -1))}
+              >
+                <ChevronLeft size={16} />
+              </Button>
+              <Button
+                type="button"
+                variant={date === today ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => changeDate(today)}
+              >
+                <CalendarDays size={16} /> Today
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                aria-label="Next day"
+                onClick={() => changeDate(shiftLocalDate(date, 1))}
+              >
+                <ChevronRight size={16} />
+              </Button>
+              <Input
+                type="date"
+                aria-label="Delivery date"
+                value={date}
+                onChange={(event) => changeDate(event.target.value)}
+                className="w-auto"
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                aria-label="Refresh stops"
+                disabled={isLoading || offline}
+                onClick={() => void refetch()}
+              >
+                <RefreshCw size={16} className={isLoading ? 'animate-spin' : undefined} />
+              </Button>
+            </div>
+
+            {error && <FormError message={error.message} />}
+
+            {isLoading && !day ? (
+              <p className="py-8 text-center text-text-secondary">Loading your deliveries…</p>
+            ) : day && day.driverId === null ? (
+              <div className="py-12 text-center">
+                <AlertTriangle size={40} className="mx-auto mb-3 text-text-secondary opacity-50" />
+                <p className="text-text-secondary">
+                  Your account is not linked to a driver in this workspace. Ask your dispatcher to
+                  link your user on the driver profile.
+                </p>
+              </div>
+            ) : day ? (
+              <>
+                <Card>
+                  <CardContent className="space-y-3 py-4">
+                    <div className="flex flex-wrap items-baseline justify-between gap-2">
+                      <p className="font-medium">
+                        {day.completedStops} of {day.totalStops} stops done
+                        {day.driverName ? ` · ${day.driverName}` : ''}
                       </p>
+                      <p className="text-sm text-text-secondary">{formatLocalDay(date)}</p>
+                    </div>
+                    <Progress value={progress} aria-label="Stops completed" />
+                    {day.nextStop && (
+                      <div className="rounded-md border border-border p-3">
+                        <p className="text-xs uppercase tracking-wide text-text-secondary">
+                          Next stop · Stop {day.nextStop.sequence}
+                        </p>
+                        <p className="mt-1 font-medium">
+                          {day.nextStop.deliveryAddress
+                            ? formatAddress(day.nextStop.deliveryAddress)
+                            : day.nextStop.deliveryJobNumber}
+                        </p>
+                        {day.nextStop.customerName && (
+                          <p className="text-sm text-text-secondary">
+                            Recipient: {day.nextStop.customerName}
+                          </p>
+                        )}
+                        <div className="mt-3 grid gap-2 sm:grid-cols-2">
+                          <Button
+                            type="button"
+                            onClick={() => openExternal(remainingRouteUrl)}
+                            disabled={!remainingRouteUrl}
+                          >
+                            <RouteIcon size={16} /> Start route
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            onClick={() => {
+                              const next = day.nextStop;
+                              if (next) setView({ kind: 'stop', jobId: next.jobId });
+                            }}
+                          >
+                            Stop details <ChevronRight size={16} />
+                          </Button>
+                        </div>
+                      </div>
                     )}
+                  </CardContent>
+                </Card>
+
+                <div role="tablist" aria-label="Filter stops" className="flex gap-2">
+                  {(
+                    [
+                      ['all', `All stops (${day.totalStops})`],
+                      ['remaining', `Remaining (${day.remainingStops})`],
+                      ['completed', `Done (${day.completedStops})`],
+                    ] as const
+                  ).map(([value, label]) => (
+                    <Button
+                      key={value}
+                      type="button"
+                      role="tab"
+                      aria-selected={filter === value}
+                      size="sm"
+                      variant={filter === value ? 'default' : 'outline'}
+                      onClick={() => setFilter(value)}
+                    >
+                      {label}
+                    </Button>
+                  ))}
+                </div>
+
+                {visibleStops.length > 0 ? (
+                  <div className="space-y-3">
+                    {visibleStops.map((stop) => (
+                      <StopCard
+                        key={stop.jobId}
+                        stop={stop}
+                        offline={offline}
+                        onOpen={() => setView({ kind: 'stop', jobId: stop.jobId })}
+                        onCapture={() => setView({ kind: 'capture', jobId: stop.jobId })}
+                      />
+                    ))}
                   </div>
-                  <Button type="button" size="sm" onClick={() => setSelectedJob(job)}>
-                    Capture
-                  </Button>
-                </CardContent>
-              </Card>
-            ))}
-            {(pageIndex > 0 || hasMore) && (
-              <div className="flex justify-end gap-2 pt-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  disabled={pageIndex === 0 || isLoading}
-                  onClick={() => setPageIndex((previous) => Math.max(0, previous - 1))}
-                >
-                  <ChevronLeft size={16} /> Previous
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  disabled={!hasMore || isLoading}
-                  onClick={() => setPageIndex((previous) => previous + 1)}
-                >
-                  Next <ChevronRight size={16} />
-                </Button>
-              </div>
-            )}
-          </div>
-        ) : (
-          <div className="text-center py-12">
-            <CheckCircle2 size={40} className="mx-auto mb-3 text-text-secondary opacity-50" />
-            <p className="text-text-secondary">No deliveries awaiting proof of delivery.</p>
-          </div>
+                ) : (
+                  <div className="py-12 text-center">
+                    <CheckCircle2
+                      size={40}
+                      className="mx-auto mb-3 text-text-secondary opacity-50"
+                    />
+                    <p className="text-text-secondary">
+                      {day.totalStops === 0
+                        ? 'No deliveries scheduled for this day.'
+                        : filter === 'completed'
+                          ? 'No stops completed yet.'
+                          : 'All stops done for this day.'}
+                    </p>
+                  </div>
+                )}
+              </>
+            ) : null}
+          </>
         )}
       </div>
     </PageLayout>