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.html

@@ -995,6 +995,32 @@
           </mat-select>
         </mat-form-field>
       }
+
+      <!-- CLIENT CREATION contact-OTP verification — create mode only. Edit mode already has
+           its own dual old/new OTP panel in EditClientComponent's template; this single
+           "new value" block only makes sense for a brand-new client (no "old" destination to
+           verify against). Each block only appears once its own field passes validation, so
+           staff enter a plausible-looking number/email before being asked to verify it. -->
+      @if (!clientData) {
+        <div class="contact-otp-row">
+          @if (createClientForm.get('mobileNo')?.valid) {
+            <mifosx-client-contact-otp-block
+              channel="MOBILE"
+              [destination]="createClientForm.get('mobileNo')?.value"
+              label="Verify Mobile Number"
+              (stateChange)="onMobileOtpState($event)"
+            ></mifosx-client-contact-otp-block>
+          }
+          @if (createClientForm.get('emailAddress')?.valid) {
+            <mifosx-client-contact-otp-block
+              channel="EMAIL"
+              [destination]="createClientForm.get('emailAddress')?.value"
+              label="Verify Email Address"
+              (stateChange)="onEmailOtpState($event)"
+            ></mifosx-client-contact-otp-block>
+          }
+        </div>
+      }
     </div>
   </div>
 

src/app/clients/client-stepper/client-general-step/client-general-step.component.scss

@@ -1493,6 +1493,21 @@ form {
   }
 }
 
+/* Create-time mobile/email OTP verification — spans both `.form-grid` columns so the two
+ * blocks sit on their own full-width row instead of disrupting the field/verify-button pairing
+ * above them. */
+.contact-otp-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  grid-column: 1 / -1;
+  margin-top: 4px;
+
+  mifosx-client-contact-otp-block {
+    flex: 1 1 260px;
+  }
+}
+
 @media (width <= 768px) {
   .form-grid {
     grid-template-columns: 1fr;
@@ -1516,6 +1531,10 @@ form {
       max-width: none;
     }
   }
+
+  .contact-otp-row {
+    flex-direction: column;
+  }
 }
 
 .guardian-card__avatar.has-photo {

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) {

src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.html

@@ -1359,10 +1359,15 @@
             <span class="upload-box__req">*</span>
           </span>
           <span class="upload-box__hint">JPG / PNG, max 2MB</span>
-          <label class="upload-box__btn">
-            <input type="file" accept="image/*" hidden (change)="onPhotoSelected($event)" />
-            <fa-icon icon="camera"></fa-icon> Choose &amp; Crop
-          </label>
+          <div class="upload-box__btn-row">
+            <label class="upload-box__btn">
+              <input type="file" accept="image/*" hidden (change)="onPhotoSelected($event)" />
+              <fa-icon icon="camera"></fa-icon> Choose &amp; Crop
+            </label>
+            <button type="button" class="upload-box__btn upload-box__btn--secondary" (click)="captureWebcamPhoto()">
+              <fa-icon icon="video"></fa-icon> Use Webcam
+            </button>
+          </div>
           @if (photoSigTouched) {
             <span class="upload-box__error">Photograph is required</span>
           }
@@ -1393,10 +1398,15 @@
             <span class="upload-box__req">*</span>
           </span>
           <span class="upload-box__hint">Scanned image, max 1MB</span>
-          <label class="upload-box__btn">
-            <input type="file" accept="image/*" hidden (change)="onSignatureSelected($event)" />
-            <fa-icon icon="crop"></fa-icon> Choose &amp; Crop
-          </label>
+          <div class="upload-box__btn-row">
+            <label class="upload-box__btn">
+              <input type="file" accept="image/*" hidden (change)="onSignatureSelected($event)" />
+              <fa-icon icon="crop"></fa-icon> Choose &amp; Crop
+            </label>
+            <button type="button" class="upload-box__btn upload-box__btn--secondary" (click)="captureWebcamSignature()">
+              <fa-icon icon="video"></fa-icon> Use Webcam
+            </button>
+          </div>
           @if (photoSigTouched) {
             <span class="upload-box__error">Signature is required</span>
           }

src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss

@@ -1057,9 +1057,17 @@
     color: #94a3b8;
   }
 
+  &__btn-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+  }
+
   &__btn {
     display: inline-flex;
     align-items: center;
+    gap: 6px;
     padding: 6px 16px;
     background: #fff;
     border: 1px solid #d0d5dd;
@@ -1074,6 +1082,10 @@
       border-color: #1353a0;
       color: #1353a0;
     }
+
+    &--secondary {
+      background: #f8fafc;
+    }
   }
 
   &__status {

src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.ts

@@ -30,6 +30,8 @@ import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
 import { ProofType, normalizeProofType, groupProofsByCategory } from '../../shared/kyc-proof-types';
 import { KycUploadHelperService } from '../../shared/kyc-upload-helper.service';
+import { CaptureImageDialogComponent } from '../../clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component';
+import { dataUrlToFile } from 'app/shared/utils/data-url.util';
 
 @Component({
   selector: 'mifosx-client-kyc-step',
@@ -128,6 +130,31 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
   markPhotoSigTouched(): void {
     this.photoSigTouched = true;
   }
+
+  /** Human-readable label for each `kycForm` control that can carry a `required` error —
+   * used to build a specific "why is Save & Next disabled" message instead of a generic one.
+   * Controls not listed here (e.g. purely pattern-validated ones like panNumber/gstinNumber)
+   * only block when the user has actually typed something invalid, which is covered separately. */
+  private static readonly REQUIRED_FIELD_LABELS: Record<string, string> = {
+    kycDocumentName: 'KYC Document Type',
+    kycDocumentNumber: 'KYC Document Number',
+    amlCheckStatus: 'AML Check Status',
+    bannedEntityMatch: 'Banned Entity List Match'
+  };
+
+  /** Names every currently-invalid `kycForm` control (required-but-empty, or an entered value
+   * that fails its pattern) in plain English — surfaced via the Save & Next tooltip so staff
+   * aren't left staring at a greyed-out button with no clue what's still missing. Whether or
+   * not photo/signature previews are filled has no bearing on this list (they aren't part of
+   * `kycForm` at all — see `photoSigComplete`). */
+  get invalidFieldLabels(): string[] {
+    if (!this.kycForm) {
+      return [];
+    }
+    return Object.keys(this.kycForm.controls)
+      .filter((key) => this.kycForm.get(key)?.invalid)
+      .map((key) => ClientKycStepComponent.REQUIRED_FIELD_LABELS[key] || key);
+  }
   /** Fallback document types when template API is unavailable */
   private defaultDocumentTypes = [
     { name: 'Aadhaar Card', code: 'AADHAAR' },
@@ -1366,6 +1393,25 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     if (!input.files?.length) return;
     const file = input.files[0];
     input.value = '';
+    await this.openPhotoCropDialog(file);
+  }
+
+  /** Webcam capture entry point for the profile photograph — feeds the captured frame
+   * through the same crop dialog + staging/upload path as the file-picker flow above,
+   * so behaviour (immediate upload in edit mode vs staged-until-submit in create mode)
+   * stays identical regardless of capture source. */
+  async captureWebcamPhoto(): Promise<void> {
+    const dialogRef = this.dialog.open(CaptureImageDialogComponent, {
+      data: { captureTarget: 'profile' }
+    });
+    dialogRef.afterClosed().subscribe(async (imageDataUrl: string) => {
+      if (!imageDataUrl) return;
+      const file = dataUrlToFile(imageDataUrl, 'webcam-photograph.jpg');
+      await this.openPhotoCropDialog(file);
+    });
+  }
+
+  private async openPhotoCropDialog(file: File): Promise<void> {
     const { ImageCropDialogComponent } = await import('./image-crop-dialog/image-crop-dialog.component');
     const dialogRef = this.dialog.open(ImageCropDialogComponent, {
       width: '680px',
@@ -1391,6 +1437,24 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     if (!input.files?.length) return;
     const file = input.files[0];
     input.value = '';
+    await this.openSignatureCropDialog(file);
+  }
+
+  /** Webcam capture entry point for the specimen signature — photographs a paper
+   * signature, then reuses the same crop dialog + staging/upload path as the file-picker
+   * flow above (additive to the existing draw-pad / upload options, not a replacement). */
+  async captureWebcamSignature(): Promise<void> {
+    const dialogRef = this.dialog.open(CaptureImageDialogComponent, {
+      data: { captureTarget: 'signature' }
+    });
+    dialogRef.afterClosed().subscribe(async (imageDataUrl: string) => {
+      if (!imageDataUrl) return;
+      const file = dataUrlToFile(imageDataUrl, 'webcam-signature.jpg');
+      await this.openSignatureCropDialog(file);
+    });
+  }
+
+  private async openSignatureCropDialog(file: File): Promise<void> {
     const { ImageCropDialogComponent } = await import('./image-crop-dialog/image-crop-dialog.component');
     const dialogRef = this.dialog.open(ImageCropDialogComponent, {
       width: '680px',