@burdenoff/microfe-movethewheels 2026.726.1 → 2026.731.1

package/dist/utils/formatters.js

@@ -18,7 +18,7 @@ function t(e, t = "USD") {
 }
 function n(e, t = "short") {
 	let n = typeof e == "string" ? new Date(e) : e;
-	return t === "relative" ? r(n) : t === "time" ? new Intl.DateTimeFormat("en-US", {
+	return t === "relative" ? i(n) : t === "time" ? new Intl.DateTimeFormat("en-US", {
 		hour: "numeric",
 		minute: "2-digit",
 		hour12: !0
@@ -37,6 +37,17 @@ function n(e, t = "short") {
 	}).format(n);
 }
 function r(e) {
+	let t = typeof e == "string" ? new Date(e) : e;
+	return new Intl.DateTimeFormat("en-US", {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "2-digit",
+		hour12: !0
+	}).format(t);
+}
+function i(e) {
 	let t = typeof e == "string" ? new Date(e) : e, r = Math.floor(((/* @__PURE__ */ new Date()).getTime() - t.getTime()) / 1e3);
 	if (r < 60) return "Just now";
 	let i = Math.floor(r / 60);
@@ -47,4 +58,4 @@ function r(e) {
 	return o < 7 ? `${o} ${o === 1 ? "day" : "days"} ago` : n(t);
 }
 //#endregion
-export { e as formatAddress, t as formatCurrency, n as formatDate };
+export { e as formatAddress, t as formatCurrency, n as formatDate, r as formatDateTime };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.726.1",
+  "version": "2026.731.1",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [

package/src/movethewheels/MoveTheWheelsRoutes.tsx

@@ -72,6 +72,8 @@ const ImportExportPage = lazy(() => import('./pages/ImportExportPage'));
 const ReportsPage = lazy(() => import('./pages/ReportsPage'));
 const SettingsPage = lazy(() => import('./pages/SettingsPage'));
 const AIAssistantPage = lazy(() => import('./pages/AIAssistantPage'));
+const DeliveryCapturePage = lazy(() => import('./pages/DeliveryCapturePage'));
+const MultiModalShipmentPage = lazy(() => import('./pages/MultiModalShipmentPage'));
 
 export function MoveTheWheelsRoutes() {
   return (
@@ -90,6 +92,12 @@ export function MoveTheWheelsRoutes() {
         <Route path="tracking" element={<TrackingPage />} />
         <Route path="tracking/live" element={<LiveTrackingPage />} />
 
+        {/* Driver ePOD capture (BOFF-4399) */}
+        <Route path="deliveries/mine" element={<DeliveryCapturePage />} />
+
+        {/* Multi-modal freight execution (BOFF-4398) */}
+        <Route path="shipments/multi-modal" element={<MultiModalShipmentPage />} />
+
         {/* Fleet */}
         <Route path="fleet" element={<FleetPage />} />
         <Route path="fleet/vehicles" element={<VehiclesPage />} />

package/src/movethewheels/components/ProofOfDeliveryCard.tsx

@@ -0,0 +1,149 @@
+/**
+ * ProofOfDeliveryCard — the shipper/customer-facing view of a captured ePOD
+ * (BOFF-4399). Read-only: shows recipient name, signature, timestamp,
+ * geo-location and any delivery photos, with a download link for the
+ * signature image. Renders an honest "not yet delivered" empty state when no
+ * capture exists.
+ */
+import { CheckCircle2, Clock, Download, MapPin, User } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle, Badge } from './ui';
+import { useEpod, useEpodPhotoUrl } from '../hooks/useEpod';
+import { formatDateTime } from '../utils/formatters';
+
+interface ProofOfDeliveryCardProps {
+  deliveryJobId: string;
+}
+
+function EpodPhotoThumbnail({ fileId }: { fileId: string }) {
+  const { url, isLoading } = useEpodPhotoUrl(fileId);
+
+  if (isLoading) {
+    return <div className="h-20 w-20 rounded-lg bg-bg-sunken animate-pulse" />;
+  }
+  if (!url) {
+    return null;
+  }
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" className="shrink-0">
+      <img
+        src={url}
+        alt="Delivery photo"
+        className="h-20 w-20 rounded-lg object-cover border border-border"
+      />
+    </a>
+  );
+}
+
+export function ProofOfDeliveryCard({ deliveryJobId }: ProofOfDeliveryCardProps) {
+  const { epod, isLoading, error } = useEpod(deliveryJobId);
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle className="flex items-center gap-2">
+          <CheckCircle2 size={18} /> Proof of Delivery
+        </CardTitle>
+        {epod && <Badge variant="success">Captured</Badge>}
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <p className="text-text-secondary text-center py-4">Loading proof of delivery…</p>
+        ) : error ? (
+          <p className="text-sm text-status-error-text text-center py-4">
+            Failed to load proof of delivery.
+          </p>
+        ) : epod ? (
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="flex items-start gap-2">
+                <User size={16} className="mt-0.5 text-text-secondary shrink-0" />
+                <div>
+                  <p className="text-xs text-text-secondary">Received by</p>
+                  <p className="font-medium">{epod.recipientName}</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-2">
+                <Clock size={16} className="mt-0.5 text-text-secondary shrink-0" />
+                <div>
+                  <p className="text-xs text-text-secondary">Delivered at</p>
+                  <p className="font-medium">{formatDateTime(epod.deliveredAt)}</p>
+                </div>
+              </div>
+              {epod.latitude != null && epod.longitude != null && (
+                <div className="flex items-start gap-2 sm:col-span-2">
+                  <MapPin size={16} className="mt-0.5 text-text-secondary shrink-0" />
+                  <div>
+                    <p className="text-xs text-text-secondary">Delivery location</p>
+                    <p className="font-medium">
+                      {epod.latitude.toFixed(5)}, {epod.longitude.toFixed(5)}
+                      {epod.locationAccuracy != null && (
+                        <span className="text-text-secondary"> (±{Math.round(epod.locationAccuracy)}m)</span>
+                      )}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {epod.notes && (
+              <div>
+                <p className="text-xs text-text-secondary mb-1">Notes</p>
+                <p className="text-sm">{epod.notes}</p>
+              </div>
+            )}
+
+            <div>
+              <p className="text-xs text-text-secondary mb-1">
+                Signature {epod.signatureType === 'typed' ? '(typed)' : '(drawn)'}
+              </p>
+              {epod.signatureType === 'drawn' ? (
+                <div className="border rounded-lg p-2 inline-block bg-white">
+                  <img src={epod.signatureData} alt="Recipient signature" className="h-16" />
+                </div>
+              ) : (
+                <p className="text-lg italic font-medium border-b border-border inline-block pb-1">
+                  {epod.signatureData}
+                </p>
+              )}
+            </div>
+
+            {epod.photoFileIds.length > 0 && (
+              <div>
+                <p className="text-xs text-text-secondary mb-2">Delivery photos</p>
+                <div className="flex flex-wrap gap-2">
+                  {epod.photoFileIds.map((fileId) => (
+                    <EpodPhotoThumbnail key={fileId} fileId={fileId} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <a
+              href={`data:text/plain;charset=utf-8,${encodeURIComponent(
+                `Proof of Delivery\nRecipient: ${epod.recipientName}\nDelivered at: ${formatDateTime(
+                  epod.deliveredAt
+                )}${
+                  epod.latitude != null && epod.longitude != null
+                    ? `\nLocation: ${epod.latitude}, ${epod.longitude}`
+                    : ''
+                }${epod.notes ? `\nNotes: ${epod.notes}` : ''}`
+              )}`}
+              download={`pod-${deliveryJobId}.txt`}
+              className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+            >
+              <Download size={14} /> Download record
+            </a>
+          </div>
+        ) : (
+          <div className="text-center py-6">
+            <CheckCircle2 size={32} className="mx-auto mb-2 text-text-secondary opacity-50" />
+            <p className="text-text-secondary">Not yet delivered</p>
+            <p className="text-xs text-text-secondary mt-1">
+              Proof of delivery will appear here once the driver completes capture.
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/movethewheels/components/SignaturePad.tsx

@@ -0,0 +1,157 @@
+/**
+ * SignaturePad — dependency-free canvas signature capture.
+ *
+ * Pointer-events drawing on a `<canvas>`, exported as a `data:image/png;base64,...`
+ * string via `toDataURL`. No external signature-pad package is pulled in — this
+ * keeps the ePOD capture core self-contained and avoids a new dependency for a
+ * single bounded widget.
+ */
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Button } from './ui';
+import { cn } from '../utils/cn';
+
+export interface SignaturePadHandle {
+  clear: () => void;
+  isEmpty: () => boolean;
+  toDataUrl: () => string | null;
+}
+
+interface SignaturePadProps {
+  className?: string;
+  onChange?: (hasSignature: boolean) => void;
+}
+
+export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
+  ({ className, onChange }, ref) => {
+    const canvasRef = useRef<HTMLCanvasElement | null>(null);
+    const drawingRef = useRef(false);
+    const hasDrawnRef = useRef(false);
+    const lastPointRef = useRef<{ x: number; y: number } | null>(null);
+    const [hasDrawn, setHasDrawn] = useState(false);
+
+    const getContext = useCallback((): CanvasRenderingContext2D | null => {
+      const canvas = canvasRef.current;
+      return canvas ? canvas.getContext('2d') : null;
+    }, []);
+
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      const ctx = getContext();
+      if (!canvas || !ctx) return;
+      // Size the backing bitmap to the element's rendered size (device-pixel
+      // aware) so lines stay crisp regardless of the CSS layout width.
+      const ratio = window.devicePixelRatio || 1;
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = rect.width * ratio;
+      canvas.height = rect.height * ratio;
+      ctx.scale(ratio, ratio);
+      ctx.lineWidth = 2;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      // Canvas has no CSS var support for strokeStyle — resolve the semantic
+      // `text-text-primary` token (applied via className below) to its
+      // computed color at draw-setup time instead of a hard-coded hex.
+      // `currentColor` is the CSS-spec fallback so a resolution failure still
+      // inherits the token via the element's own `color`, never a raw literal.
+      ctx.strokeStyle = getComputedStyle(canvas).color || 'currentColor';
+    }, [getContext]);
+
+    const pointFromEvent = useCallback((event: React.PointerEvent<HTMLCanvasElement>) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return { x: 0, y: 0 };
+      const rect = canvas.getBoundingClientRect();
+      return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    }, []);
+
+    const handlePointerDown = useCallback(
+      (event: React.PointerEvent<HTMLCanvasElement>) => {
+        const canvas = canvasRef.current;
+        const ctx = getContext();
+        if (!canvas || !ctx) return;
+        canvas.setPointerCapture(event.pointerId);
+        drawingRef.current = true;
+        lastPointRef.current = pointFromEvent(event);
+      },
+      [getContext, pointFromEvent]
+    );
+
+    const handlePointerMove = useCallback(
+      (event: React.PointerEvent<HTMLCanvasElement>) => {
+        if (!drawingRef.current) return;
+        const ctx = getContext();
+        const last = lastPointRef.current;
+        if (!ctx || !last) return;
+        const point = pointFromEvent(event);
+        ctx.beginPath();
+        ctx.moveTo(last.x, last.y);
+        ctx.lineTo(point.x, point.y);
+        ctx.stroke();
+        lastPointRef.current = point;
+        if (!hasDrawnRef.current) {
+          hasDrawnRef.current = true;
+          setHasDrawn(true);
+          onChange?.(true);
+        }
+      },
+      [getContext, onChange, pointFromEvent]
+    );
+
+    const handlePointerUp = useCallback((event: React.PointerEvent<HTMLCanvasElement>) => {
+      drawingRef.current = false;
+      lastPointRef.current = null;
+      const canvas = canvasRef.current;
+      if (canvas?.hasPointerCapture(event.pointerId)) {
+        canvas.releasePointerCapture(event.pointerId);
+      }
+    }, []);
+
+    const clear = useCallback(() => {
+      const canvas = canvasRef.current;
+      const ctx = getContext();
+      if (!canvas || !ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      hasDrawnRef.current = false;
+      setHasDrawn(false);
+      onChange?.(false);
+    }, [getContext, onChange]);
+
+    const toDataUrl = useCallback((): string | null => {
+      if (!hasDrawnRef.current) return null;
+      return canvasRef.current?.toDataURL('image/png') ?? null;
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      (): SignaturePadHandle => ({
+        clear,
+        isEmpty: () => !hasDrawnRef.current,
+        toDataUrl,
+      }),
+      [clear, toDataUrl]
+    );
+
+    return (
+      <div className={cn('space-y-2', className)}>
+        <canvas
+          ref={canvasRef}
+          className="w-full h-40 rounded-lg border-2 border-dashed border-border bg-bg-surface text-text-primary touch-none cursor-crosshair"
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerLeave={handlePointerUp}
+          role="img"
+          aria-label="Signature capture pad"
+        />
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-text-secondary">
+            {hasDrawn ? 'Signature captured' : 'Sign above with your finger or mouse'}
+          </p>
+          <Button type="button" variant="ghost" size="sm" onClick={clear} disabled={!hasDrawn}>
+            Clear
+          </Button>
+        </div>
+      </div>
+    );
+  }
+);
+SignaturePad.displayName = 'SignaturePad';

package/src/movethewheels/hooks/index.ts

@@ -71,3 +71,15 @@ export {
   type EntityDocument,
   type EntityDocumentType,
 } from './useEntityDocuments';
+
+// Electronic proof of delivery (ePOD) capture — BOFF-4399
+export {
+  useEpod,
+  useMyPendingEpodDeliveryJobs,
+  useCaptureEpod,
+  useEpodPhotoUpload,
+  useEpodPhotoUrl,
+  type PendingEpodDeliveryJob,
+  type CaptureEpodArgs,
+  type UploadedEpodPhoto,
+} from './useEpod';