Updated signature handling, added booking detail components, introduced a signature management page, updated routing, enabled document downloads, and simplified the profile page.

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

@@ -0,0 +1,102 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  Building2,
+  FileCheck,
+  Mail,
+  MapPin,
+  Phone,
+  User,
+} from "lucide-react";
+import { Group, Stack, Text, Divider } from "@mantine/core";
+
+import type { BookingDetail } from "@/types/booking";
+import { SectionCard } from "./SectionCard";
+
+interface InfoRowProps {
+  icon: LucideIcon;
+  label: string;
+  value?: string | null;
+}
+
+function InfoRow({ icon: Icon, label, value }: InfoRowProps) {
+  return (
+    <Group justify="space-between" wrap="nowrap" py={6} gap="md">
+      <Group gap="xs" wrap="nowrap">
+        <Icon size={15} color="var(--mantine-color-gray-5)" />
+        <Text size="sm" c="dimmed">
+          {label}
+        </Text>
+      </Group>
+      <Text size="sm" fw={600} ta="right" style={{ minWidth: 0 }} truncate>
+        {value || "—"}
+      </Text>
+    </Group>
+  );
+}
+
+export interface BookingCompanyCardProps {
+  booking: BookingDetail;
+}
+
+/** Customer (company) information for the booking. */
+export function BookingCompanyCard({ booking }: BookingCompanyCardProps) {
+  const company = booking.company;
+
+  // Government bookings may not carry a company; show the institution instead.
+  if (!company && booking.isGovernment) {
+    return (
+      <SectionCard icon={Building2} title="Customer" accent="blue">
+        <InfoRow
+          icon={Building2}
+          label="Government"
+          value={booking.governmentInstitution}
+        />
+      </SectionCard>
+    );
+  }
+
+  if (!company) {
+    return (
+      <SectionCard icon={Building2} title="Customer" accent="blue">
+        <Text size="sm" c="dimmed">
+          No customer linked to this booking.
+        </Text>
+      </SectionCard>
+    );
+  }
+
+  const companyName = company.companyName ?? company.name ?? company.label;
+
+  const rows: InfoRowProps[] = [
+    { icon: FileCheck, label: "TIN", value: company.tin },
+    { icon: Mail, label: "Email", value: company.email },
+    { icon: Phone, label: "Phone", value: company.phone },
+    { icon: MapPin, label: "Address", value: company.address },
+    { icon: User, label: "Contact person", value: company.contactPersonName },
+    { icon: Phone, label: "Contact phone", value: company.contactPersonPhone },
+  ].filter((r) => r.value);
+
+  return (
+    <SectionCard
+      icon={Building2}
+      title="Customer"
+      subtitle={companyName}
+      accent="blue"
+    >
+      <Stack gap={0}>
+        {rows.length === 0 ? (
+          <Text size="sm" c="dimmed">
+            No additional company details available.
+          </Text>
+        ) : (
+          rows.map((row, index) => (
+            <div key={row.label}>
+              {index > 0 && <Divider color="var(--mantine-color-gray-2)" />}
+              <InfoRow {...row} />
+            </div>
+          ))
+        )}
+      </Stack>
+    </SectionCard>
+  );
+}

apps/edr-freight-web/backoffice/src/components/bookings/detail/index.ts

@@ -17,3 +17,4 @@ export * from "./BookingRouteServiceCard";
 export * from "./BookingMileServicesCard";
 export * from "./BookingCargoCard";
 export * from "./BookingContractSummaryCard";
+export * from "./BookingCompanyCard";

apps/edr-freight-web/backoffice/src/pages/bookings/BookingContractPage.tsx

@@ -50,11 +50,8 @@ export default function BookingContractPage() {
     enabled: Boolean(id),
   });
 
-  const signRole: "CUSTOMER" | "STAFF" | null = data?.canSignCustomer
-    ? "CUSTOMER"
-    : data?.canSignStaff
-      ? "STAFF"
-      : null;
+  // Backoffice only ever signs as STAFF — customers sign in the portal.
+  const canSign = Boolean(data?.canSignStaff);
 
   const savedSignature = data?.savedSignature ?? null;
   const savedSignatureImage = savedSignature?.signatureImageUrl ?? null;
@@ -106,12 +103,12 @@ export default function BookingContractPage() {
   };
 
   const confirmSign = () => {
-    if (!signRole || !signerName.trim()) return;
+    if (!canSign || !signerName.trim()) return;
     // Approve the saved signature, or submit the freshly drawn one.
     const image = usingSaved ? savedSignatureImage : signatureData;
     if (!image) return;
     signMutation.mutate({
-      role: signRole,
+      role: "STAFF",
       signatureImageBase64: image,
       signerDisplayName: signerName.trim(),
       consentText: "I agree to the terms of this contract.",
@@ -167,10 +164,10 @@ export default function BookingContractPage() {
               <Download className="size-4" />
               Download PDF
             </Button>
-            {signRole && (
+            {canSign && (
               <Button size="sm" className="gap-2" onClick={openSign}>
                 <FileSignature className="size-4" />
-                Sign as {signRole === "CUSTOMER" ? "Customer" : "Staff"}
+                {usingSaved ? "Approve & sign" : "Sign contract"}
               </Button>
             )}
           </div>
@@ -194,9 +191,7 @@ export default function BookingContractPage() {
         <Dialog open={signOpen} onOpenChange={setSignOpen}>
           <DialogContent className="sm:max-w-md">
             <DialogHeader>
-              <DialogTitle>
-                {signRole === "CUSTOMER" ? "Customer signature" : "Staff signature"}
-              </DialogTitle>
+              <DialogTitle>Staff signature</DialogTitle>
               <DialogDescription>
                 {usingSaved
                   ? `Review your saved signature and approve it to execute the contract for ${data.reference}.`

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx

@@ -24,11 +24,16 @@ import {
   BookingRouteServiceCard,
   BookingMileServicesCard,
   BookingCargoCard,
+  BookingCompanyCard,
   BookingContractSummaryCard,
+  BookingDocumentsCard,
+  type BookingFileView,
 } from "@/components/bookings/detail";
 import { getStatusMeta } from "@/features/bookings/booking-status.config";
 import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
+import { downloadBookingFile } from "@/services/files.service";
 import { useBookingDetail, useBookingMutations } from "@/hooks/bookings/useBookings";
+import toast from "react-hot-toast";
 
 export default function BookingRequestDetailPage() {
   const { id } = useParams<{ id: string }>();
@@ -36,6 +41,14 @@ export default function BookingRequestDetailPage() {
   const { data: booking, isLoading, isError, refetch, isFetching } = useBookingDetail(id);
   const mutations = useBookingMutations(id ?? "");
 
+  const handleDownloadFile = async (file: BookingFileView) => {
+    try {
+      await downloadBookingFile(file.id, file.name);
+    } catch {
+      toast.error("Could not download file.");
+    }
+  };
+
   if (isLoading) {
     return (
       <Box style={detailStyles.page}>
@@ -147,6 +160,10 @@ export default function BookingRequestDetailPage() {
                 {booking.contractSummary && (
                   <BookingContractSummaryCard summary={booking.contractSummary} />
                 )}
+                <BookingDocumentsCard
+                  files={booking.files ?? []}
+                  onDownload={handleDownloadFile}
+                />
               </Stack>
             </Grid.Col>
 
@@ -154,6 +171,7 @@ export default function BookingRequestDetailPage() {
             <Grid.Col span={{ base: 12, lg: 4 }}>
               <Box style={{ position: "sticky", top: 24 }}>
                 <Stack gap="lg">
+                  <BookingCompanyCard booking={booking} />
                   <BookingPricingSummary booking={booking} />
                   <BookingActionsToolbar booking={booking} mutations={mutations} />
                   {showContractButton && (

apps/edr-freight-web/backoffice/src/services/files.service.ts

@@ -0,0 +1,26 @@
+import { api as client } from "../auth/http";
+import { URL_CONSTANTS } from "@/constants/URLS";
+
+const F = URL_CONSTANTS.FILES;
+
+export const filesService = {
+  /** Stream a stored file by id (backend route: GET /files/:id). */
+  download: async (id: string): Promise<Blob> => {
+    const response = await client.get(F.BY_ID(id), { responseType: "blob" });
+    return response.data as Blob;
+  },
+};
+
+/** Download a file blob and trigger a browser save with the given name. */
+export async function downloadBookingFile(
+  id: string,
+  filename: string,
+): Promise<void> {
+  const blob = await filesService.download(id);
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}

apps/edr-freight-web/backoffice/src/types/booking.ts

@@ -30,6 +30,27 @@ export interface BookingNamedRef {
   companyName?: string;
 }
 
+/** Full company record the booking response joins in (subset used by the UI). */
+export interface BookingCompany {
+  id: string;
+  name?: string;
+  type?: string;
+  status?: string;
+  tin?: string | null;
+  vatNumber?: string | null;
+  businessLicense?: string | null;
+  country?: string | null;
+  address?: string | null;
+  phone?: string | null;
+  email?: string | null;
+  contactPersonName?: string | null;
+  contactPersonPhone?: string | null;
+  generalManagerName?: string | null;
+  generalManagerEmail?: string | null;
+  generalManagerPhone?: string | null;
+  website?: string | null;
+}
+
 export interface BookingContainerLine {
   id: string;
   containerTypeId: string;
@@ -81,6 +102,8 @@ export interface BookingFile {
   name: string;
   mimeType?: string;
   code?: string;
+  url?: string;
+  size?: number;
 }
 
 export interface BookingDetail {
@@ -121,7 +144,7 @@ export interface BookingDetail {
   createdAt: string;
   updatedAt: string;
   // customer?: BookingNamedRef & { companyName?: string };
-  company?: BookingNamedRef;
+  company?: BookingNamedRef & Partial<BookingCompany>;
   originYard?: BookingNamedRef;
   destinationYard?: BookingNamedRef;
   serviceType?: BookingNamedRef & { code?: string; priorityBonusPoints?: number };