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/client-stepper/client-general-step/client-general-step.component.ts

@@ -50,6 +50,10 @@ import { DateFormatPipe } from '../../../pipes/date-format.pipe';
 import { SanctionsVerifyDialogComponent } from './sanctions-verify-dialog.component';
 import { DipVerifyDialogComponent } from './dip-verify-dialog.component';
 import { DinVerifyDialogComponent } from './din-verify-dialog.component';
+import {
+  ContactOtpBlockComponent,
+  ContactOtpState
+} from 'app/clients/edit-client/contact-otp-block/contact-otp-block.component';
 
 /**
  * Create Client Component
@@ -68,7 +72,8 @@ import { DinVerifyDialogComponent } from './din-verify-dialog.component';
     MatIcon,
     MatTooltip,
     MatSelectTrigger,
-    DateFormatPipe
+    DateFormatPipe,
+    ContactOtpBlockComponent
   ]
 })
 export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges {
@@ -183,6 +188,45 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
   alternateDipLookupLogId: number | null = null;
   /** Alternate DIP lookup timestamp from API */
   alternateDipTimestamp: string | null = null;
+
+  /**
+   * CLIENT CREATION contact-OTP verification state (mobileNo / emailAddress). Unlike the
+   * edit-flow dual old/new OTP panel in `EditClientComponent`, a brand-new client has no "old"
+   * destination to verify against — so only a single "new value" OTP-verification is needed
+   * per field here. Sent to the backend as `mobileNewOtpId`/`emailNewOtpId` alongside the rest
+   * of the create-client payload (see `CreateClientComponent.saveAndProceed()`), which requires
+   * both whenever `mobileNo`/`emailAddress` are present (and they always are — both are
+   * `Validators.required` on this form).
+   */
+  mobileOtpVerified = false;
+  mobileNewOtpId: number | null = null;
+  emailOtpVerified = false;
+  emailNewOtpId: number | null = null;
+
+  /**
+   * Whether both mobile and email have been OTP-verified for CLIENT CREATION. Always `true`
+   * in edit mode (`clientData` set) — edit-time contact verification is gated separately by
+   * `EditClientComponent.contactVerificationComplete`, not by this component.
+   */
+  get contactVerified(): boolean {
+    if (this.clientData) {
+      return true;
+    }
+    return this.mobileOtpVerified && this.emailOtpVerified;
+  }
+
+  /** Resets create-time OTP verification for mobileNo — called whenever the field's value
+   * changes after a prior verification, since that OTP no longer applies to the new value. */
+  onMobileOtpState(state: ContactOtpState): void {
+    this.mobileOtpVerified = state.verified;
+    this.mobileNewOtpId = state.otpId;
+  }
+
+  /** Resets create-time OTP verification for emailAddress — see `onMobileOtpState()`. */
+  onEmailOtpState(state: ContactOtpState): void {
+    this.emailOtpVerified = state.verified;
+    this.emailNewOtpId = state.otpId;
+  }
   /** Constitution Types Master with KYC field metadata */
   constitutionTypesMaster = [
     {
@@ -853,6 +897,13 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
       .valueChanges.pipe(takeUntil(this.destroy$))
       .subscribe(() => {
         this.mobileVerified = false;
+        // Also reset create-time contact-OTP verification — an OTP verified against a
+        // previous mobile number no longer applies once the value is edited. Belt-and-braces
+        // alongside ContactOtpBlockComponent's own destination-change reset: this fires even
+        // if the OTP block was unmounted (e.g. `*ngIf` hid it while the field was momentarily
+        // invalid) and its own reset never had a chance to run.
+        this.mobileOtpVerified = false;
+        this.mobileNewOtpId = null;
       });
 
     this.createClientForm
@@ -861,6 +912,16 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
       .subscribe(() => {
         this.alternateMobileVerified = false;
       });
+
+    // Reset create-time contact-OTP verification when email address changes — see the
+    // mobileNo subscription above for the rationale.
+    this.createClientForm
+      .get('emailAddress')
+      .valueChanges.pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.emailOtpVerified = false;
+        this.emailNewOtpId = null;
+      });
   }
 
   ngOnChanges(changes: SimpleChanges) {