Merge branch 'dev' into freight/nati-2

apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingMileServicesCard.tsx

@@ -1,7 +1,10 @@
 import type { ReactNode } from "react";
-import { Truck } from "lucide-react";
-import { SimpleGrid, Stack } from "@mantine/core";
+import { Download, Truck } from "lucide-react";
+import { Button, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useQuery } from "@tanstack/react-query";
 
+import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
+import { lastMileRequestsService } from "@/services/last-mile-requests.service";
 import type { BookingDetail } from "@/types/booking";
 
 import { SectionCard } from "./SectionCard";
@@ -16,18 +19,44 @@ export interface BookingMileServicesCardProps {
   handoverSection?: ReactNode;
 }
 
-/** First / last mile addresses, plus the export handover control. Renders
- * nothing when none of the three are present. */
+/**
+ * First / last mile addresses, plus the export handover control and the
+ * stored last-mile contract reference (signed status + PDF download) for
+ * Truck & Machinery once a request on this booking is approved. Renders
+ * nothing when none of the three are present.
+ */
 export function BookingMileServicesCard({
   booking,
   handoverSection,
 }: BookingMileServicesCardProps) {
   const hasAddresses =
     Boolean(booking.firstMilePickupAddress) || Boolean(booking.lastMileDeliveryAddress);
+
+  const { data: requestsResponse } = useQuery({
+    queryKey: QUERY_KEYS.LAST_MILE_REQUESTS.list({ bookingId: booking.id }),
+    queryFn: async () =>
+      (await lastMileRequestsService.list({ bookingId: booking.id })).data,
+    enabled: Boolean(booking.lastMileDeliveryAddress),
+  });
+  const approvedRequest = (requestsResponse?.data ?? []).find(
+    (r) => r.status === "APPROVED",
+  );
+
   if (!hasAddresses && !handoverSection) {
     return null;
   }
 
+  const downloadContract = async () => {
+    if (!approvedRequest) return;
+    const blob = (await lastMileRequestsService.contractDocument(approvedRequest.id)).data;
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `last-mile-contract-${booking.reference ?? booking.id}.pdf`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
   return (
     <SectionCard icon={Truck} title="Mile services" accent="grape">
       <Stack gap="md">
@@ -41,6 +70,32 @@ export function BookingMileServicesCard({
             )}
           </SimpleGrid>
         )}
+        {approvedRequest && (
+          <Group justify="space-between" align="center" wrap="wrap">
+            <Stack gap={0}>
+              <Text size="sm" fw={600}>
+                Last-mile contract
+              </Text>
+              <Text size="xs" c={approvedRequest.customerSignedAt ? "green.8" : "orange.8"}>
+                {approvedRequest.customerSignedAt
+                  ? `Signed ${new Date(approvedRequest.customerSignedAt).toLocaleDateString()}${
+                      approvedRequest.signerDisplayName
+                        ? ` by ${approvedRequest.signerDisplayName}`
+                        : ""
+                    }`
+                  : "Awaiting customer signature"}
+              </Text>
+            </Stack>
+            <Button
+              size="xs"
+              variant="light"
+              leftSection={<Download size={14} />}
+              onClick={() => void downloadContract()}
+            >
+              Download PDF
+            </Button>
+          </Group>
+        )}
         {handoverSection}
       </Stack>
     </SectionCard>

apps/edr-freight-web/backoffice/src/components/contracts/LogoUpload.tsx

@@ -0,0 +1,172 @@
+import { useRef, useState } from "react";
+import { Box, Button, Group, Image, Paper, Stack, Text } from "@mantine/core";
+import { ImageIcon, RefreshCw, X } from "lucide-react";
+
+const MAX_LOGO_MB = 10;
+
+export interface LogoUploadProps {
+  /** Logo image as a data URL, or null when none is attached yet. */
+  value: string | null;
+  onChange: (dataUrl: string | null) => void;
+  label?: string;
+  description?: string;
+}
+
+/**
+ * Company logo picker — reads the picked image straight into a data URL,
+ * same transport as {@link StampUpload}. Kept as its own component (not a
+ * generalized image-upload) matching how stamp/teeter are already separate
+ * files here despite the near-identical shape.
+ */
+export function LogoUpload({
+  value,
+  onChange,
+  label = "Company logo",
+  description = "Attach the official company logo.",
+}: LogoUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragging, setDragging] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
+
+  const readFile = (file: File | undefined | null) => {
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      setError("The logo must be an image file (PNG or JPG).");
+      return;
+    }
+    if (file.size > MAX_LOGO_MB * 1024 * 1024) {
+      setError(`The logo image must be under ${MAX_LOGO_MB} MB.`);
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      setError(null);
+      setFileName(file.name);
+      onChange(typeof reader.result === "string" ? reader.result : null);
+    };
+    reader.onerror = () => setError("Could not read that file. Try another.");
+    reader.readAsDataURL(file);
+  };
+
+  const openPicker = () => inputRef.current?.click();
+
+  const clear = () => {
+    setFileName(null);
+    setError(null);
+    onChange(null);
+    if (inputRef.current) inputRef.current.value = "";
+  };
+
+  return (
+    <Stack gap={6}>
+      <Text size="sm" fw={500}>
+        {label}
+      </Text>
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/png,image/jpeg,image/webp"
+        hidden
+        onChange={(e) => readFile(e.currentTarget.files?.[0])}
+      />
+
+      {value ? (
+        <Paper withBorder radius="md" p="sm">
+          <Group gap="md" wrap="nowrap" align="center">
+            <Box
+              style={{
+                background:
+                  "repeating-conic-gradient(var(--mantine-color-gray-1) 0% 25%, transparent 0% 50%) 50% / 14px 14px",
+                borderRadius: 8,
+                flexShrink: 0,
+                padding: 6,
+              }}
+            >
+              <Image
+                src={value}
+                alt="Company logo"
+                fit="contain"
+                h={92}
+                w={92}
+              />
+            </Box>
+            <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
+              <Text size="sm" fw={500} truncate>
+                {fileName ?? "Logo attached"}
+              </Text>
+              <Text size="xs" c="dimmed">
+                Shown in the header of every generated document.
+              </Text>
+              <Group gap="xs" mt={2}>
+                <Button
+                  size="compact-xs"
+                  variant="light"
+                  color="edr-green"
+                  leftSection={<RefreshCw size={13} />}
+                  onClick={openPicker}
+                >
+                  Replace
+                </Button>
+                <Button
+                  size="compact-xs"
+                  variant="subtle"
+                  color="red"
+                  leftSection={<X size={13} />}
+                  onClick={clear}
+                >
+                  Remove
+                </Button>
+              </Group>
+            </Stack>
+          </Group>
+        </Paper>
+      ) : (
+        <Paper
+          withBorder
+          radius="md"
+          p="lg"
+          onClick={openPicker}
+          onDragOver={(e) => {
+            e.preventDefault();
+            setDragging(true);
+          }}
+          onDragLeave={() => setDragging(false)}
+          onDrop={(e) => {
+            e.preventDefault();
+            setDragging(false);
+            readFile(e.dataTransfer.files?.[0]);
+          }}
+          style={{
+            borderColor: dragging
+              ? "var(--mantine-color-edr-green-6)"
+              : undefined,
+            borderStyle: "dashed",
+            backgroundColor: dragging
+              ? "var(--mantine-color-edr-green-0)"
+              : undefined,
+            cursor: "pointer",
+          }}
+        >
+          <Stack gap={6} align="center">
+            <ImageIcon size={26} color="var(--mantine-color-edr-green-6)" />
+            <Text size="sm" fw={500}>
+              Upload company logo
+            </Text>
+            <Text size="xs" c="dimmed" ta="center">
+              {description} Drop an image here or click to browse — PNG or JPG,
+              up to {MAX_LOGO_MB} MB.
+            </Text>
+          </Stack>
+        </Paper>
+      )}
+
+      {error && (
+        <Text size="xs" c="red.7">
+          {error}
+        </Text>
+      )}
+    </Stack>
+  );
+}

apps/edr-freight-web/backoffice/src/components/layout/sidebar-sections.tsx

@@ -9,6 +9,7 @@ import {
   FileText,
   Hammer,
   History,
+  Image as ImageIcon,
   LayoutDashboard,
   LayoutGrid,
   MapPin,
@@ -492,6 +493,12 @@ export const buildSidebarSections = (
           icon: <Stamp />,
           permission: FREIGHT_PERMS.settings.stamp.view,
         },
+        {
+          label: "Company logo",
+          href: "/dashboard/logo-settings",
+          icon: <ImageIcon />,
+          permission: FREIGHT_PERMS.settings.logo.view,
+        },
         {
           label: "Contract templates",
           href: "/dashboard/contract-templates",

apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleWorkspacePanel.tsx

@@ -29,6 +29,7 @@ import {
   // Repeat, // used by the hidden Move (reassign) button
   Train,
   TrainFront,
+  Truck,
   Weight,
   X,
 } from "lucide-react";
@@ -38,6 +39,7 @@ import { CountdownTimer } from "@edr/ui-common";
 import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
 import { EntityLink } from "@/components/detail";
 import { api } from "@/services/api";
+import { bookingsService } from "@/services/bookings.service";
 import { useToast } from "@/hooks/use-toast";
 import type {
   EligibleContainerBooking,
@@ -412,6 +414,31 @@ export function ScheduleWorkspacePanel({
       );
   };
 
+  // Export cargo that skipped the warehouse (customer truck straight onto the
+  // wagon) has no GRN and never will — loadBooking's GRN gate would keep
+  // rejecting it forever. Setting DIRECT_TO_TRAIN tells that gate the carriage
+  // acceptance sheet is the handover document instead, then loads in one click.
+  const [truckToTrainPending, setTruckToTrainPending] = useState<string | null>(null);
+  const doTruckToTrain = (bookingId: string, ref: string) => {
+    setTruckToTrainPending(bookingId);
+    bookingsService
+      .setExportHandoverMode(bookingId, "DIRECT_TO_TRAIN")
+      .then(() => loadJourney.mutateAsync({ scheduleId: schedule.id, bookingId }))
+      .then(() => {
+        toast({ title: `${ref} loaded — direct truck-to-train handover` });
+        onChanged();
+        void yardWorkQuery.refetch();
+      })
+      .catch((error) =>
+        toast({
+          title: "Could not load as direct truck-to-train",
+          description: apiErrorMessage(error, "Please try again."),
+          variant: "destructive",
+        }),
+      )
+      .finally(() => setTruckToTrainPending(null));
+  };
+
   const doUnload = (bookingId: string, ref: string) => {
     unloadJourney
       .mutateAsync({ scheduleId: schedule.id, bookingId })
@@ -710,6 +737,12 @@ export function ScheduleWorkspacePanel({
                     const alightHere = trainAtYardId != null && b.destinationYardId === trainAtYardId;
                     const showLoad = canWork && !riding && !done && (journey?.canLoad ?? false);
                     const showUnload = canWork && riding && (journey?.canUnload ?? false);
+                    const showTruckToTrain =
+                      canWork &&
+                      !riding &&
+                      !done &&
+                      boardHere &&
+                      b.tradeDirection === "EXPORT";
                     return (
                       <BookingCard
                         key={b.id}
@@ -767,6 +800,24 @@ export function ScheduleWorkspacePanel({
                                 </Button>
                               </Tooltip>
                             ) : null}
+                            {showTruckToTrain ? (
+                              <Tooltip
+                                label="Customer truck loaded straight onto the wagon — no warehouse receipt, no GRN. Sets direct truck-to-train handover and loads."
+                                withArrow
+                              >
+                                <Button
+                                  size="compact-sm"
+                                  variant="light"
+                                  color="blue"
+                                  radius="md"
+                                  leftSection={<Truck size={13} />}
+                                  loading={truckToTrainPending === b.id}
+                                  onClick={() => doTruckToTrain(b.id, ref)}
+                                >
+                                  Truck to Train
+                                </Button>
+                              </Tooltip>
+                            ) : null}
                             {showUnload ? (
                               <Tooltip
                                 label={