configer the stamp

apps/edr-freight-api/src/modules/signatures/dto/save-signature.dto.ts

@@ -7,12 +7,14 @@ export class SaveSignatureDto {
   @MinLength(1)
   signerDisplayName!: string;
 
-  @ApiProperty({
-    description: 'PNG signature image as base64 (with or without data URL prefix)',
+  @ApiPropertyOptional({
+    description:
+      'PNG signature image as base64 (with or without data URL prefix). Omit to keep the existing saved signature (stamp-only update).',
   })
+  @IsOptional()
   @IsString()
   @MinLength(20)
-  signatureImageBase64!: string;
+  signatureImageBase64?: string;
 
   @ApiPropertyOptional({
     description:

apps/edr-freight-api/src/modules/signatures/signatures.service.ts

@@ -12,7 +12,8 @@ import { SavedSignatureDto } from './dto/save-signature.dto';
 export interface UpsertSignatureInput {
   userId: string;
   signerDisplayName: string;
-  signatureImageBase64: string;
+  /** Optional; omitted = keep the existing saved signature (stamp-only update). */
+  signatureImageBase64?: string;
   /** Optional company stamp/seal; omitted = keep the existing saved stamp. */
   stampImageBase64?: string;
 }
@@ -46,12 +47,14 @@ export class SignaturesService {
     const previousFileId = existing?.signatureFileId ?? null;
     const previousStampFileId = existing?.stampFileId ?? null;
 
-    const fileRecord = await this.filesService.upload({
-      resourceId: input.userId,
-      resource: 'saved_signatures',
-      code: 'signature',
-      file: this.toUploadFile('signature', input.userId, input.signatureImageBase64),
-    });
+    const fileRecord = input.signatureImageBase64
+      ? await this.filesService.upload({
+          resourceId: input.userId,
+          resource: 'saved_signatures',
+          code: 'signature',
+          file: this.toUploadFile('signature', input.userId, input.signatureImageBase64),
+        })
+      : null;
 
     const stampRecord = input.stampImageBase64
       ? await this.filesService.upload({
@@ -65,13 +68,13 @@ export class SignaturesService {
     const saved = await this.signaturesRepository.upsert({
       userId: input.userId,
       signerDisplayName: input.signerDisplayName,
-      signatureFileId: fileRecord.id,
-      // Omitted stamp keeps whatever was saved before.
+      // Omitted image keeps whatever was saved before.
+      ...(fileRecord ? { signatureFileId: fileRecord.id } : {}),
       ...(stampRecord ? { stampFileId: stampRecord.id } : {}),
     });
 
     const staleIds = [
-      previousFileId !== fileRecord.id ? previousFileId : null,
+      fileRecord && previousFileId !== fileRecord.id ? previousFileId : null,
       stampRecord && previousStampFileId !== stampRecord.id
         ? previousStampFileId
         : null,

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FileSignature, Loader2 } from "lucide-react";
+import { FileSignature, Loader2, Stamp } from "lucide-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 
@@ -27,9 +27,9 @@ import {
 } 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.
+ * Lets the signed-in user view and update the reusable signature and company
+ * stamp stored on their profile — managed independently of each other. Both
+ * are offered when signing a booking contract.
  */
 export function MySignatureCard() {
   const { user } = useAuth();
@@ -38,42 +38,63 @@ export function MySignatureCard() {
   );
   const saveMutation = useMutation(api.signatures.save.mutationOptions());
 
-  const [open, setOpen] = useState(false);
+  const [signatureOpen, setSignatureOpen] = useState(false);
+  const [stampOpen, setStampOpen] = useState(false);
   const [signerName, setSignerName] = useState("");
   const [signatureData, setSignatureData] = useState<string | null>(null);
   const [stampData, setStampData] = useState<string | null>(null);
 
   const defaultName =
     user?.name?.en || user?.username || user?.email || "";
+  const savedName = saved?.signerDisplayName ?? defaultName;
 
-  const openDialog = () => {
-    setSignerName(saved?.signerDisplayName ?? defaultName);
+  const openSignatureDialog = () => {
+    setSignerName(savedName);
     setSignatureData(null);
-    setStampData(saved?.stampImageUrl ?? null);
-    setOpen(true);
+    setSignatureOpen(true);
   };
 
-  const save = () => {
+  const saveSignature = () => {
     if (!signatureData || !signerName.trim()) return;
     saveMutation.mutate(
       {
         signerDisplayName: signerName.trim(),
         signatureImageBase64: signatureData,
-        // Only send the stamp when it changed — omitted keeps the saved one.
-        ...(stampData && stampData !== saved?.stampImageUrl
-          ? { stampImageBase64: stampData }
-          : {}),
+        // Stamp untouched — it is managed by its own dialog.
       },
       {
         onSuccess: () => {
           toast.success("Signature saved");
-          setOpen(false);
+          setSignatureOpen(false);
         },
         onError: () => toast.error("Failed to save signature"),
       },
     );
   };
 
+  const openStampDialog = () => {
+    setStampData(saved?.stampImageUrl ?? null);
+    setStampOpen(true);
+  };
+
+  const saveStamp = () => {
+    if (!stampData) return;
+    saveMutation.mutate(
+      {
+        signerDisplayName: savedName || defaultName,
+        // Signature untouched — stamp-only update.
+        stampImageBase64: stampData,
+      },
+      {
+        onSuccess: () => {
+          toast.success("Stamp saved");
+          setStampOpen(false);
+        },
+        onError: () => toast.error("Failed to save stamp"),
+      },
+    );
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -85,47 +106,64 @@ export function MySignatureCard() {
           This signature can be reused to sign booking contracts.
         </CardDescription>
       </CardHeader>
-      <CardContent className="space-y-4">
+      <CardContent className="space-y-6">
         {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>
-        )}
-        {saved?.stampImageUrl && (
-          <div className="space-y-2">
-            <div className="overflow-hidden rounded-lg border-2 border-dashed border-border bg-white">
-              <img
-                src={saved.stampImageUrl}
-                alt="My saved company stamp"
-                className="mx-auto h-24 w-full object-contain"
-              />
+          <>
+            <div className="space-y-2">
+              {saved?.signatureImageUrl ? (
+                <>
+                  <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>
+                </>
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  You have not saved a signature yet.
+                </p>
+              )}
+              <Button variant="outline" size="sm" onClick={openSignatureDialog}>
+                {saved?.signatureImageUrl ? "Update signature" : "Add signature"}
+              </Button>
             </div>
-            <p className="text-xs text-muted-foreground">Company stamp</p>
-          </div>
+
+            <div className="space-y-2">
+              {saved?.stampImageUrl ? (
+                <>
+                  <div className="overflow-hidden rounded-lg border-2 border-dashed border-border bg-white">
+                    <img
+                      src={saved.stampImageUrl}
+                      alt="My saved company stamp"
+                      className="mx-auto h-24 w-full object-contain"
+                    />
+                  </div>
+                  <p className="text-xs text-muted-foreground">Company stamp</p>
+                </>
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  You have not uploaded a company stamp yet.
+                </p>
+              )}
+              <Button variant="outline" size="sm" onClick={openStampDialog}>
+                <Stamp className="size-4" />
+                {saved?.stampImageUrl ? "Update stamp" : "Upload stamp"}
+              </Button>
+            </div>
+          </>
         )}
-        <Button variant="outline" size="sm" onClick={openDialog}>
-          {saved?.signatureImageUrl ? "Update signature" : "Add signature"}
-        </Button>
       </CardContent>
 
-      <Dialog open={open} onOpenChange={setOpen}>
+      <Dialog open={signatureOpen} onOpenChange={setSignatureOpen}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>Save your signature</DialogTitle>
@@ -145,21 +183,16 @@ export function MySignatureCard() {
               />
             </div>
             <ContractSignaturePad onChange={setSignatureData} />
-            <StampUpload
-              value={stampData}
-              onChange={setStampData}
-              description="Stored on your profile and prefilled when you sign contracts."
-            />
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setOpen(false)}>
+            <Button variant="outline" onClick={() => setSignatureOpen(false)}>
               Cancel
             </Button>
             <Button
               disabled={
                 saveMutation.isPending || !signatureData || !signerName.trim()
               }
-              onClick={save}
+              onClick={saveSignature}
             >
               {saveMutation.isPending ? (
                 <Loader2 className="size-4 animate-spin" />
@@ -170,6 +203,39 @@ export function MySignatureCard() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <Dialog open={stampOpen} onOpenChange={setStampOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Company stamp</DialogTitle>
+            <DialogDescription>
+              Upload your official company stamp or seal as an image. It is
+              stored on your profile and applied next to your signature on
+              contracts.
+            </DialogDescription>
+          </DialogHeader>
+          <StampUpload
+            value={stampData}
+            onChange={setStampData}
+            description="Stored on your profile and prefilled when you sign contracts."
+          />
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setStampOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              disabled={saveMutation.isPending || !stampData}
+              onClick={saveStamp}
+            >
+              {saveMutation.isPending ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                "Save stamp"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Card>
   );
 }

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

@@ -11,7 +11,8 @@ export interface SavedSignature {
 
 export interface SaveSignaturePayload {
   signerDisplayName: string;
-  signatureImageBase64: string;
+  /** Omit to keep the existing saved signature (stamp-only update). */
+  signatureImageBase64?: string;
   /** Omit to keep the existing saved stamp. */
   stampImageBase64?: string;
 }

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FileSignature, Loader2 } from "lucide-react";
+import { FileSignature, Loader2, Stamp } from "lucide-react";
 
 import { ContractSignaturePad } from "@/components/bookings/ContractSignaturePad";
 import { StampUpload } from "@/components/contracts/StampUpload";
@@ -26,41 +26,56 @@ import {
 } from "@edr/ui-common";
 
 /**
- * Lets the signed-in customer view and update the reusable signature stored on
- * their profile. The same signature is offered for approval when signing a
- * booking contract.
+ * Lets the signed-in customer view and update the reusable signature and
+ * company stamp stored on their profile — managed independently of each
+ * other. Both are offered when signing a booking contract.
  */
 export function MySignatureCard() {
   const { user } = useAuth();
   const { data: saved, isPending } = useMySignature();
   const saveMutation = useSaveSignature();
 
-  const [open, setOpen] = useState(false);
+  const [signatureOpen, setSignatureOpen] = useState(false);
+  const [stampOpen, setStampOpen] = useState(false);
   const [signerName, setSignerName] = useState("");
   const [signatureData, setSignatureData] = useState<string | null>(null);
   const [stampData, setStampData] = useState<string | null>(null);
 
   const defaultName = user?.name?.en || user?.username || user?.email || "";
+  const savedName = saved?.signerDisplayName ?? defaultName;
 
-  const openDialog = () => {
-    setSignerName(saved?.signerDisplayName ?? defaultName);
+  const openSignatureDialog = () => {
+    setSignerName(savedName);
     setSignatureData(null);
-    setStampData(saved?.stampImageUrl ?? null);
-    setOpen(true);
+    setSignatureOpen(true);
   };
 
-  const save = () => {
+  const saveSignature = () => {
     if (!signatureData || !signerName.trim()) return;
     saveMutation.mutate(
       {
         signerDisplayName: signerName.trim(),
         signatureImageBase64: signatureData,
-        // Only send the stamp when it changed — omitted keeps the saved one.
-        ...(stampData && stampData !== saved?.stampImageUrl
-          ? { stampImageBase64: stampData }
-          : {}),
+        // Stamp untouched — it is managed by its own dialog.
       },
-      { onSuccess: () => setOpen(false) },
+      { onSuccess: () => setSignatureOpen(false) },
+    );
+  };
+
+  const openStampDialog = () => {
+    setStampData(saved?.stampImageUrl ?? null);
+    setStampOpen(true);
+  };
+
+  const saveStamp = () => {
+    if (!stampData) return;
+    saveMutation.mutate(
+      {
+        signerDisplayName: savedName || defaultName,
+        // Signature untouched — stamp-only update.
+        stampImageBase64: stampData,
+      },
+      { onSuccess: () => setStampOpen(false) },
     );
   };
 
@@ -75,47 +90,64 @@ export function MySignatureCard() {
           Reused to approve and sign booking contracts.
         </CardDescription>
       </CardHeader>
-      <CardContent className="flex flex-col gap-4">
+      <CardContent className="flex flex-col gap-6">
         {isPending ? (
           <div className="flex h-36 items-center justify-center">
             <Loader2 className="size-6 animate-spin text-primary" />
           </div>
-        ) : saved?.signatureImageUrl ? (
-          <div className="flex flex-col gap-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>
-        )}
-        {saved?.stampImageUrl && (
-          <div className="flex flex-col gap-2">
-            <div className="overflow-hidden rounded-lg border-2 border-dashed border-border bg-white">
-              <img
-                src={saved.stampImageUrl}
-                alt="My saved company stamp"
-                className="mx-auto h-24 w-full object-contain"
-              />
+          <>
+            <div className="flex flex-col gap-2">
+              {saved?.signatureImageUrl ? (
+                <>
+                  <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>
+                </>
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  You have not saved a signature yet.
+                </p>
+              )}
+              <Button variant="outline" size="sm" onClick={openSignatureDialog}>
+                {saved?.signatureImageUrl ? "Update signature" : "Add signature"}
+              </Button>
             </div>
-            <p className="text-xs text-muted-foreground">Company stamp</p>
-          </div>
+
+            <div className="flex flex-col gap-2">
+              {saved?.stampImageUrl ? (
+                <>
+                  <div className="overflow-hidden rounded-lg border-2 border-dashed border-border bg-white">
+                    <img
+                      src={saved.stampImageUrl}
+                      alt="My saved company stamp"
+                      className="mx-auto h-24 w-full object-contain"
+                    />
+                  </div>
+                  <p className="text-xs text-muted-foreground">Company stamp</p>
+                </>
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  You have not uploaded a company stamp yet.
+                </p>
+              )}
+              <Button variant="outline" size="sm" onClick={openStampDialog}>
+                <Stamp className="size-4" />
+                {saved?.stampImageUrl ? "Update stamp" : "Upload stamp"}
+              </Button>
+            </div>
+          </>
         )}
-        <Button variant="outline" size="sm" onClick={openDialog}>
-          {saved?.signatureImageUrl ? "Update signature" : "Add signature"}
-        </Button>
       </CardContent>
 
-      <Dialog open={open} onOpenChange={setOpen}>
+      <Dialog open={signatureOpen} onOpenChange={setSignatureOpen}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>Save your signature</DialogTitle>
@@ -135,21 +167,16 @@ export function MySignatureCard() {
               />
             </div>
             <ContractSignaturePad onChange={setSignatureData} />
-            <StampUpload
-              value={stampData}
-              onChange={setStampData}
-              description="Stored on your profile and prefilled when you sign contracts."
-            />
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setOpen(false)}>
+            <Button variant="outline" onClick={() => setSignatureOpen(false)}>
               Cancel
             </Button>
             <Button
               disabled={
                 saveMutation.isPending || !signatureData || !signerName.trim()
               }
-              onClick={save}
+              onClick={saveSignature}
             >
               {saveMutation.isPending ? (
                 <Loader2 className="size-4 animate-spin" />
@@ -160,6 +187,39 @@ export function MySignatureCard() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <Dialog open={stampOpen} onOpenChange={setStampOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Company stamp</DialogTitle>
+            <DialogDescription>
+              Upload your official company stamp or seal as an image. It is
+              stored on your profile and applied next to your signature on
+              contracts.
+            </DialogDescription>
+          </DialogHeader>
+          <StampUpload
+            value={stampData}
+            onChange={setStampData}
+            description="Stored on your profile and prefilled when you sign contracts."
+          />
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setStampOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              disabled={saveMutation.isPending || !stampData}
+              onClick={saveStamp}
+            >
+              {saveMutation.isPending ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                "Save stamp"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Card>
   );
 }

apps/edr-freight-web/portal/src/pages/accounts/SignupPage.tsx

@@ -21,7 +21,9 @@ import AuthShell from "@/components/auth/AuthShell";
 import OtpChannelStep, { OTP_LENGTH } from "@/components/auth/OtpChannelStep";
 import PasswordChecklist from "@/components/auth/PasswordChecklist";
 import { ControlledPhoneField, isValidPhone } from "@/components/PhoneField";
+import { StampUpload } from "@/components/contracts/StampUpload";
 import { api } from "@/services/api";
+import { signaturesService } from "@/services/signatures.service";
 import {
   confirmPasswordField,
   passwordField,
@@ -59,6 +61,10 @@ export default function SignupPage() {
   const navigate = useNavigate();
   const { signup } = useAuth();
   const [error, setError] = useState<string | null>(null);
+  // Company stamp image, captured at signup and stored on the new profile so
+  // it is ready when the customer signs their first contract. Optional —
+  // individuals without a stamp can add one later from Settings.
+  const [stampData, setStampData] = useState<string | null>(null);
 
   // Two-stage signup: fill the form, then a mandatory OTP challenge before the
   // account is actually created. The code goes to BOTH the email and phone just
@@ -179,6 +185,18 @@ export default function SignupPage() {
       };
       const result = await signup(payload);
       if (result.success) {
+        // Signup logs the user in, so the stamp can land on their profile
+        // right away. Non-fatal — it can also be added later from Settings.
+        if (stampData) {
+          try {
+            await signaturesService.saveMySignature({
+              signerDisplayName: payload.name.en,
+              stampImageBase64: stampData,
+            });
+          } catch {
+            // Ignore — account exists; the stamp can be re-uploaded later.
+          }
+        }
         navigate("/portal");
       } else {
         setOtpError(result.error.message);
@@ -269,6 +287,13 @@ export default function SignupPage() {
                 {...register("confirmPassword")}
               />
 
+              <StampUpload
+                value={stampData}
+                onChange={setStampData}
+                label="Company stamp (optional)"
+                description="Stored on your profile and applied next to your signature when you sign contracts."
+              />
+
               {error ? (
                 <Alert
                   color="red"

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

@@ -10,7 +10,8 @@ export interface SavedSignature {
 
 export interface SaveSignaturePayload {
   signerDisplayName: string;
-  signatureImageBase64: string;
+  /** Omit to keep the existing saved signature (stamp-only update). */
+  signatureImageBase64?: string;
   /** Omit to keep the existing saved stamp. */
   stampImageBase64?: string;
 }