@burdenoff/microfe-movethewheels 2026.725.1 → 2026.728.1

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';

package/src/movethewheels/hooks/useEntityDocuments.ts

@@ -5,10 +5,26 @@
  * driver or order live in the platform Files module (wspace-files-svc), which
  * federates into the same workspace gateway. We tag each uploaded file with two
  * marqueue entity tags — `mtwEntityType` and `mtwEntityId` — and list them back
- * here through the federated `files(filter:{ tags:[...] })` query.
+ * here through `getFiles(filter:{ tags:[...] })`.
  *
  * There is no upload UI here (out of scope): uploading/managing happens in the
  * Files module, deep-linked from DocumentsCard. This hook is read-only.
+ *
+ * BOFF-3922 fix (2026-07-26): this previously called a non-existent root field
+ * `files(...)` — the wspace gateway only exposes `Workspace.files` (nested) and
+ * root fields `getFiles`/`searchFiles`/`ownedFiles`/`uploadedFiles`, none named
+ * bare `files`. Fixed to `getFiles(...): FileList!` (unwrapping `.files`), the
+ * root field whose `folderId` arg is optional so it supports a workspace-wide
+ * filter-only lookup. Caught by the new graphql-schema-drift CI guard, which
+ * had zero prior coverage on this repo — this bug would otherwise have shipped
+ * to prod undetected, same as BOFF-3915/BOFF-4703/BOFF-3529.
+ *
+ * NOT verified by this fix: whether `TagFilterInput.label` (renamed here from
+ * the nonexistent `.value`) actually produces the intended
+ * mtwEntityType+mtwEntityId AND-filter semantics against wspace-files-svc's
+ * tag-matching resolver — that's a wspace-files-svc/wspace-tags-svc business-
+ * logic question outside a schema-shape validator's reach (it operates on
+ * runtime variable values, not the query document). Flagged as follow-up.
  */
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -46,13 +62,15 @@ interface UseEntityDocumentsResult {
 
 const LIST_ENTITY_FILES_QUERY = `
   query ListEntityDocuments($filter: FileFilterInput, $pagination: PaginationInput) {
-    files(filter: $filter, pagination: $pagination) {
-      id
-      name
-      size
-      mimeType
-      createdAt
-      downloadUrl
+    getFiles(filter: $filter, pagination: $pagination) {
+      files {
+        id
+        name
+        size
+        mimeType
+        createdAt
+        downloadUrl
+      }
     }
   }
 `;
@@ -98,20 +116,20 @@ export function useEntityDocuments(
     setIsLoading(true);
     setError(null);
     try {
-      const data = await executeGraphQL<{ files: ApiFile[] }>(
+      const data = await executeGraphQL<{ getFiles: { files: ApiFile[] } }>(
         graphQLOptions,
         LIST_ENTITY_FILES_QUERY,
         {
           filter: {
             tags: [
-              { key: 'mtwEntityType', value: entityType },
-              { key: 'mtwEntityId', value: entityId },
+              { key: 'mtwEntityType', label: entityType },
+              { key: 'mtwEntityId', label: entityId },
             ],
           },
           pagination: { limit: 50, offset: 0 },
         }
       );
-      setDocuments((data.files ?? []).map(mapFile));
+      setDocuments((data.getFiles?.files ?? []).map(mapFile));
     } catch (fetchError) {
       setError(fetchError instanceof Error ? fetchError : new Error('Failed to load documents'));
       setDocuments([]);