feat(clients): dual-OTP contact-change verification, webcam signature capture, and client history tab

Frontend counterpart to the backend dual-OTP contact-change feature:

- New ContactOtpBlockComponent (6-box segmented OTP input) used up to 4x in
  Edit Client (old/new mobile, old/new email — grouped under per-field
  sub-headers) and once each for mobile/email in Create Client, gating
  Save/Save & Next until every required box is verified.
- edit-client.component.ts: detects mobile/email/DOB changes against the
  loaded snapshot using local-date comparison (not `.toISOString()`, which
  false-triggers a day-shift in positive-UTC-offset timezones) and
  trimmed/case-insensitive email comparison (autofill whitespace or re-typed
  casing no longer reads as a change the masked preview can't explain).
- client-kyc-step.component.ts: new `invalidFieldLabels` getter names every
  currently-invalid required KYC field, surfaced via the Save & Next tooltip
  in both create-client and edit-client so a greyed-out button always
  explains what's still missing instead of a generic message.
- CaptureImageDialogComponent generalized for both profile photo and
  signature (photograph-a-paper-signature) capture:
  - Frame aspect now matches the requested getUserMedia resolution
    (4:3 profile / 16:9 signature) with object-fit: cover, eliminating the
    pillarboxing (black bars) a mismatched box previously caused.
  - Suppresses Chromium's auto-injected PiP/cast corner overlay icons.
  - Frame height capped in vh (not just px) so the dialog fits short
    viewports instead of pushing Cancel/Upload below the fold.
- upload-document-dialog.component.ts: generic Documents-tab upload now also
  offers "Capture from Webcam" alongside Browse, reusing the same capture
  dialog.
- New client History tab (reuses the existing Audit Trail data, scoped to
  this client) and dataUrlToFile/dataUrlToBlob util for routing webcam
  captures through the same upload pipelines as a picked file.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/clients/create-client/create-client.component.ts

@@ -192,7 +192,10 @@ export class CreateClientComponent {
     if (idx === 0) {
       if (!this.clientGeneralStep || !this.clientGeneralForm) return false;
       if (this.clientGeneralStep.sanctionsBlocked) return false;
-      return this.clientGeneralForm.valid;
+      if (!this.clientGeneralForm.valid) return false;
+      // Contact-OTP gate: mobileNo/emailAddress must each be OTP-verified before a brand-new
+      // client can be created — mirrors the edit flow's dual-OTP gate in EditClientComponent.
+      return this.clientGeneralStep.contactVerified;
     }
     if (idx === 1) {
       // KYC tab — block when the kyc form has unfilled required fields
@@ -241,6 +244,15 @@ export class CreateClientComponent {
     if (idx === 0 && this.clientGeneralStep?.sanctionsBlocked) {
       return 'Client failed sanctions screening — cannot proceed.';
     }
+    if (idx === 0 && this.clientGeneralForm?.valid && !this.clientGeneralStep?.contactVerified) {
+      return 'Verify the OTP sent to both the mobile number and email address before proceeding.';
+    }
+    if (idx === 1) {
+      const labels = this.clientKycStep?.invalidFieldLabels || [];
+      if (labels.length) {
+        return `Please fill/correct: ${labels.join(', ')}.`;
+      }
+    }
     return 'Please fill all mandatory fields on this tab to continue.';
   }
 
@@ -309,6 +321,16 @@ export class CreateClientComponent {
         return;
       }
 
+      // Contact-OTP gate — defensive re-check. The Save & Next button is already disabled via
+      // `currentStepValid` while this is incomplete, but don't rely on that alone (mirrors the
+      // same defensive re-check in EditClientComponent.confirmAndSaveTab()).
+      if (!this.clientGeneralStep?.contactVerified) {
+        this.snackBar.open('Verify the OTP sent to both the mobile number and email address before saving.', 'Close', {
+          duration: 5000
+        });
+        return;
+      }
+
       // Sanctions verification gate — Verify Client must be clicked before save
       if (!this.clientGeneralStep?.sanctionsVerified) {
         this.dialog
@@ -426,6 +448,12 @@ export class CreateClientComponent {
     const dateFormat = this.settingsService.dateFormat;
     const clientData = { ...this.client, dateFormat, locale };
 
+    // Mandatory contact-OTP references — required by POST /clients whenever mobileNo/
+    // emailAddress are present (they always are, both are Validators.required on this form).
+    // Gated by `contactVerified` above, so these are guaranteed non-null at this point.
+    clientData.mobileNewOtpId = this.clientGeneralStep?.mobileNewOtpId;
+    clientData.emailNewOtpId = this.clientGeneralStep?.emailNewOtpId;
+
     if (this.clientTemplate.datatables && this.clientTemplate.datatables.length > 0) {
       const datatables: any[] = [];
       this.clientDatatables?.forEach((clientDatatable: ClientDatatableStepComponent) => {
@@ -493,12 +521,19 @@ export class CreateClientComponent {
       this.finalizeClient(this.createdClientId);
     } else {
       // Fallback: create client now (shouldn't happen in normal flow)
+      if (!this.clientGeneralStep?.contactVerified) {
+        this.validationError = 'Verify the OTP sent to both the mobile number and email address before submitting.';
+        this.selectedTabIndex = 0;
+        return;
+      }
       const locale = this.settingsService.language.code;
       const dateFormat = this.settingsService.dateFormat;
       const clientData = {
         ...this.client,
         dateFormat,
-        locale
+        locale,
+        mobileNewOtpId: this.clientGeneralStep?.mobileNewOtpId,
+        emailNewOtpId: this.clientGeneralStep?.emailNewOtpId
       };
 
       if (this.clientTemplate.datatables && this.clientTemplate.datatables.length > 0) {