add reusable per-user contract signatures with profile prefill and approval

apps/edr-freight-web/backoffice/src/App.tsx

@@ -28,6 +28,7 @@ import UserManagementHostPage from "./pages/dashboard/user-management/UserManage
 import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
 import DemoUser2Page from "./pages/dashboard/demo/DemoUser2Page";
 import OverviewPage from "./pages/dashboard/OverviewPage";
+import MyProfilePage from "./pages/dashboard/MyProfilePage";
 //import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
 import PermissionsPage from "./pages/dashboard/user-management/PermissionsPage";
 import PositionTypesPage from "./pages/dashboard/user-management/PositionTypesPage";
@@ -257,6 +258,7 @@ const App = () => {
         <Route path="/dashboard" element={<Navigate to="/dashboard/overview" replace />} />
         <Route path="/dashboard" element={<DashboardShell />}>
           <Route path="overview" element={<OverviewPage />} />
+          <Route path="profile" element={<MyProfilePage />} />
 
           <Route path="booking-requests" element={<BookingRequestsPage />} />
           <Route path="booking-requests/new" element={<NewBookingPage />} />

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

@@ -10,6 +10,7 @@ import {
   User,
 } from "lucide-react";
 import { Group, Stack, Text, Menu, Tooltip, Box } from "@mantine/core";
+import { useNavigate } from "react-router-dom";
 
 import type { PageMeta } from "./types";
 import "./FreightDashboardHeader.css";
@@ -37,6 +38,7 @@ const FreightDashboardHeader = ({
   theme,
   onToggleTheme,
 }: FreightDashboardHeaderProps) => {
+  const navigate = useNavigate();
   const initials =
     userInitials ??
     (userName
@@ -200,7 +202,10 @@ const FreightDashboardHeader = ({
             <Menu.Divider />
             <Menu.Item
               leftSection={<User size={15} />}
-              onClick={() => setIsUserMenuOpen(false)}
+              onClick={() => {
+                setIsUserMenuOpen(false);
+                navigate("/dashboard/profile");
+              }}
             >
               Profile
             </Menu.Item>

apps/edr-freight-web/backoffice/src/components/layout/route-meta.ts

@@ -36,6 +36,13 @@ const ROUTE_META: Array<{ prefix: string; meta: PageMeta }> = [
       subtitle: "Dashboard summary and key metrics",
     },
   },
+  {
+    prefix: "/dashboard/profile",
+    meta: {
+      title: "My Profile",
+      subtitle: "Manage your account and signature",
+    },
+  },
   {
     prefix: "/dashboard/operations/train-scheduling-v2/",
     meta: {

apps/edr-freight-web/backoffice/src/components/profile/MySignatureCard.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import { FileSignature, Loader2 } from "lucide-react";
+
+import { ContractSignaturePad } from "@/components/bookings/ContractSignaturePad";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useAuth } from "@/auth/useAuth";
+import {
+  useMySignature,
+  useSaveSignature,
+} from "@/hooks/useSavedSignature";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+} from "@edr/ui-common";
+
+/**
+ * Lets the signed-in user view and update the reusable signature stored on
+ * their profile. The same signature is offered for approval when signing a
+ * booking contract.
+ */
+export function MySignatureCard() {
+  const { user } = useAuth();
+  const { data: saved, isLoading } = useMySignature();
+  const saveMutation = useSaveSignature();
+
+  const [open, setOpen] = useState(false);
+  const [signerName, setSignerName] = useState("");
+  const [signatureData, setSignatureData] = useState<string | null>(null);
+
+  const defaultName =
+    user?.name?.en || user?.username || user?.email || "";
+
+  const openDialog = () => {
+    setSignerName(saved?.signerDisplayName ?? defaultName);
+    setSignatureData(null);
+    setOpen(true);
+  };
+
+  const save = () => {
+    if (!signatureData || !signerName.trim()) return;
+    saveMutation.mutate(
+      {
+        signerDisplayName: signerName.trim(),
+        signatureImageBase64: signatureData,
+      },
+      { onSuccess: () => setOpen(false) },
+    );
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <FileSignature className="size-4" />
+          My signature
+        </CardTitle>
+        <CardDescription>
+          This signature can be reused to sign booking contracts.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {isLoading ? (
+          <div className="flex h-36 items-center justify-center">
+            <Loader2 className="size-6 animate-spin text-primary" />
+          </div>
+        ) : saved?.signatureImageUrl ? (
+          <div className="space-y-2">
+            <div className="overflow-hidden rounded-lg border-2 border-dashed border-border bg-white">
+              <img
+                src={saved.signatureImageUrl}
+                alt="My saved signature"
+                className="mx-auto h-36 w-full object-contain"
+              />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Saved as {saved.signerDisplayName}
+            </p>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            You have not saved a signature yet.
+          </p>
+        )}
+        <Button variant="outline" size="sm" onClick={openDialog}>
+          {saved?.signatureImageUrl ? "Update signature" : "Add signature"}
+        </Button>
+      </CardContent>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Save your signature</DialogTitle>
+            <DialogDescription>
+              Draw your signature below. It will be stored on your profile for
+              future contracts.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="profileSignerName">Full name</Label>
+              <Input
+                id="profileSignerName"
+                value={signerName}
+                onChange={(e) => setSignerName(e.target.value)}
+                placeholder="As shown on contracts"
+              />
+            </div>
+            <ContractSignaturePad onChange={setSignatureData} />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              disabled={
+                saveMutation.isPending || !signatureData || !signerName.trim()
+              }
+              onClick={save}
+            >
+              {saveMutation.isPending ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                "Save signature"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  );
+}

apps/edr-freight-web/backoffice/src/hooks/useSavedSignature.ts

@@ -0,0 +1,30 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+
+import {
+  signaturesService,
+  type SaveSignaturePayload,
+} from "@/services/signatures.service";
+
+const SAVED_SIGNATURE_KEY = ["me", "signature"] as const;
+
+export function useMySignature() {
+  return useQuery({
+    queryKey: SAVED_SIGNATURE_KEY,
+    queryFn: () => signaturesService.getMySignature(),
+    staleTime: 60_000,
+  });
+}
+
+export function useSaveSignature() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: SaveSignaturePayload) =>
+      signaturesService.saveMySignature(payload),
+    onSuccess: () => {
+      toast.success("Signature saved");
+      void qc.invalidateQueries({ queryKey: SAVED_SIGNATURE_KEY });
+    },
+    onError: () => toast.error("Failed to save signature"),
+  });
+}

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

@@ -40,6 +40,9 @@ export default function BookingContractPage() {
   const [signOpen, setSignOpen] = useState(false);
   const [signerName, setSignerName] = useState("");
   const [signatureData, setSignatureData] = useState<string | null>(null);
+  // When the user has a saved signature we offer it for approval first; they
+  // can switch to drawing a fresh one.
+  const [drawNew, setDrawNew] = useState(false);
 
   const { data, isLoading, isError } = useQuery({
     queryKey: [...QUERY_KEYS.BOOKINGS.byId(id ?? ""), "contract-view"],
@@ -53,6 +56,12 @@ export default function BookingContractPage() {
       ? "STAFF"
       : null;
 
+  const savedSignature = data?.savedSignature ?? null;
+  const savedSignatureImage = savedSignature?.signatureImageUrl ?? null;
+  // Show the approval view only while a saved signature exists and the user
+  // hasn't opted to draw a new one.
+  const usingSaved = Boolean(savedSignatureImage) && !drawNew;
+
   const signMutation = useMutation({
     mutationFn: (payload: SignContractPayload) =>
       bookingsService.signContract(id!, payload),
@@ -88,16 +97,22 @@ export default function BookingContractPage() {
   };
 
   const openSign = () => {
-    setSignerName("");
+    // Prefill from the saved signature when available so the user only has to
+    // approve it; otherwise start with an empty pad.
+    setSignerName(savedSignature?.signerDisplayName ?? "");
     setSignatureData(null);
+    setDrawNew(false);
     setSignOpen(true);
   };
 
   const confirmSign = () => {
-    if (!signRole || !signatureData || !signerName.trim()) return;
+    if (!signRole || !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,
-      signatureImageBase64: signatureData,
+      signatureImageBase64: image,
       signerDisplayName: signerName.trim(),
       consentText: "I agree to the terms of this contract.",
     });
@@ -183,7 +198,9 @@ export default function BookingContractPage() {
                 {signRole === "CUSTOMER" ? "Customer signature" : "Staff signature"}
               </DialogTitle>
               <DialogDescription>
-                Sign to execute the contract for {data.reference}.
+                {usingSaved
+                  ? `Review your saved signature and approve it to execute the contract for ${data.reference}.`
+                  : `Sign to execute the contract for ${data.reference}.`}
               </DialogDescription>
             </DialogHeader>
             <div className="space-y-4">
@@ -196,7 +213,32 @@ export default function BookingContractPage() {
                   placeholder="As shown on the contract"
                 />
               </div>
-              <ContractSignaturePad onChange={setSignatureData} />
+              {usingSaved ? (
+                <div className="space-y-2">
+                  <Label>Saved signature</Label>
+                  <div className="overflow-hidden rounded-lg border-2 border-dashed border-border bg-white">
+                    <img
+                      src={savedSignatureImage ?? undefined}
+                      alt="Saved signature"
+                      className="mx-auto h-36 w-full object-contain"
+                    />
+                  </div>
+                  <Button
+                    type="button"
+                    variant="link"
+                    size="sm"
+                    className="h-auto p-0 text-xs"
+                    onClick={() => {
+                      setDrawNew(true);
+                      setSignatureData(null);
+                    }}
+                  >
+                    Draw a new signature instead
+                  </Button>
+                </div>
+              ) : (
+                <ContractSignaturePad onChange={setSignatureData} />
+              )}
             </div>
             <DialogFooter>
               <Button variant="outline" onClick={() => setSignOpen(false)}>
@@ -205,13 +247,15 @@ export default function BookingContractPage() {
               <Button
                 disabled={
                   signMutation.isPending ||
-                  !signatureData ||
+                  (!usingSaved && !signatureData) ||
                   !signerName.trim()
                 }
                 onClick={confirmSign}
               >
                 {signMutation.isPending ? (
                   <Loader2 className="size-4 animate-spin" />
+                ) : usingSaved ? (
+                  "Approve & sign"
                 ) : (
                   "Confirm signature"
                 )}

apps/edr-freight-web/backoffice/src/pages/dashboard/MyProfilePage.tsx

@@ -0,0 +1,9 @@
+import { MySignatureCard } from "@/components/profile/MySignatureCard";
+
+export default function MyProfilePage() {
+  return (
+    <div className="mx-auto w-full max-w-2xl space-y-6 p-4">
+      <MySignatureCard />
+    </div>
+  );
+}

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

@@ -80,6 +80,11 @@ export interface ContractView {
     signedAt: string;
     signatureImageUrl?: string | null;
   }>;
+  /** Current viewer's reusable saved signature, if they have one. */
+  savedSignature?: {
+    signerDisplayName: string;
+    signatureImageUrl?: string | null;
+  } | null;
 }
 
 export interface SignContractPayload {

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

@@ -0,0 +1,32 @@
+import { api as client } from "../auth/http";
+import { unwrap } from "@/utils/endpoint";
+
+const SIGNATURE_URL = "/me/signature";
+
+export interface SavedSignature {
+  signerDisplayName: string;
+  signatureImageUrl?: string | null;
+}
+
+export interface SaveSignaturePayload {
+  signerDisplayName: string;
+  signatureImageBase64: string;
+}
+
+export const signaturesService = {
+  /** Returns the current user's reusable signature, or null if none saved. */
+  getMySignature: async (): Promise<SavedSignature | null> => {
+    const response = await client.get<SavedSignature | null>(SIGNATURE_URL);
+    return (unwrap(response.data) as SavedSignature | null) ?? null;
+  },
+
+  saveMySignature: async (
+    payload: SaveSignaturePayload,
+  ): Promise<SavedSignature | null> => {
+    const response = await client.put<SavedSignature | null>(
+      SIGNATURE_URL,
+      payload,
+    );
+    return (unwrap(response.data) as SavedSignature | null) ?? null;
+  },
+};