Warehouse zone occupancy heatmap

Visualize live per-zone occupancy on the warehouse detail page.

apps/edr-freight-web/backoffice/src/components/operations/ProofOfDeliveryModal.tsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+import {
+  Button,
+  FileInput,
+  Group,
+  Modal,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { useMutation } from "@tanstack/react-query";
+import { Camera, PenLine } from "lucide-react";
+
+import { ContractSignaturePad } from "@/components/bookings/ContractSignaturePad";
+import { lastMileService } from "@/services/last-mile.service";
+import { useToast } from "@/hooks/use-toast";
+
+interface ProofOfDeliveryModalProps {
+  opened: boolean;
+  onClose: () => void;
+  lastMileId: string | null;
+  reference?: string | null;
+  /** Called after a successful capture so the caller can refetch. */
+  onDone: () => void;
+}
+
+/**
+ * Proof of delivery capture for an EDR last-mile leg: recipient name, a drawn
+ * signature, and proof photos. On confirm it uploads everything and completes
+ * the delivery (marks the leg DELIVERED).
+ */
+export function ProofOfDeliveryModal({
+  opened,
+  onClose,
+  lastMileId,
+  reference,
+  onDone,
+}: ProofOfDeliveryModalProps) {
+  const { toast } = useToast();
+  const [recipient, setRecipient] = useState("");
+  const [notes, setNotes] = useState("");
+  const [signatureUrl, setSignatureUrl] = useState<string | null>(null);
+  const [photos, setPhotos] = useState<File[]>([]);
+
+  const reset = () => {
+    setRecipient("");
+    setNotes("");
+    setSignatureUrl(null);
+    setPhotos([]);
+  };
+
+  const close = () => {
+    reset();
+    onClose();
+  };
+
+  const submit = useMutation({
+    mutationFn: async () => {
+      if (!lastMileId) throw new Error("No delivery selected");
+      const signature = signatureUrl
+        ? await (await fetch(signatureUrl)).blob()
+        : null;
+      return lastMileService.recordProofOfDelivery(lastMileId, {
+        recipientName: recipient.trim(),
+        notes: notes.trim() || undefined,
+        signature,
+        photos,
+      });
+    },
+    onSuccess: () => {
+      toast({
+        title: "Proof of delivery recorded",
+        description: "The delivery has been completed.",
+      });
+      reset();
+      onDone();
+      onClose();
+    },
+    onError: (e) =>
+      toast({
+        variant: "destructive",
+        title: "Could not record delivery",
+        description: e instanceof Error ? e.message : undefined,
+      }),
+  });
+
+  // Require a recipient plus at least one form of proof (signature or a photo).
+  const canSubmit =
+    recipient.trim().length > 0 && (Boolean(signatureUrl) || photos.length > 0);
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={close}
+      title={`Record delivery${reference ? ` — ${reference}` : ""}`}
+      size="lg"
+      centered
+    >
+      <Stack gap="md">
+        <TextInput
+          label="Received by"
+          placeholder="Recipient's name"
+          required
+          value={recipient}
+          onChange={(e) => setRecipient(e.currentTarget.value)}
+        />
+
+        <div>
+          <Text size="sm" fw={500} mb={4}>
+            Recipient signature
+          </Text>
+          <ContractSignaturePad onChange={setSignatureUrl} />
+        </div>
+
+        <FileInput
+          label="Proof photos"
+          placeholder="Attach delivery photo(s)"
+          leftSection={<Camera size={16} />}
+          accept="image/*"
+          multiple
+          clearable
+          value={photos}
+          onChange={setPhotos}
+        />
+
+        <Textarea
+          label="Notes"
+          placeholder="Optional delivery notes"
+          autosize
+          minRows={2}
+          value={notes}
+          onChange={(e) => setNotes(e.currentTarget.value)}
+        />
+
+        <Text size="xs" c="dimmed">
+          Provide a signature or at least one photo. Confirming completes the delivery.
+        </Text>
+
+        <Group justify="flex-end">
+          <Button variant="default" onClick={close} disabled={submit.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="green"
+            leftSection={<PenLine size={16} />}
+            loading={submit.isPending}
+            disabled={!canSubmit}
+            onClick={() => submit.mutate()}
+          >
+            Confirm delivery
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}