Merge remote-tracking branch 'origin/uate' into dev

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>
+          <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>
+          <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',

src/app/clients/clients-routing.module.ts

@@ -22,6 +22,7 @@ import { AddFamilyMemberComponent } from './clients-view/family-members-tab/add-
 import { EditFamilyMemberComponent } from './clients-view/family-members-tab/edit-family-member/edit-family-member.component';
 import { IdentitiesTabComponent } from './clients-view/identities-tab/identities-tab.component';
 import { NotesTabComponent } from './clients-view/notes-tab/notes-tab.component';
+import { HistoryTabComponent } from './clients-view/history-tab/history-tab.component';
 import { DocumentsTabComponent } from './clients-view/documents-tab/documents-tab.component';
 import { DatatableTabComponent } from './clients-view/datatable-tab/datatable-tab.component';
 import { AddressTabComponent } from './clients-view/address-tab/address-tab.component';
@@ -208,6 +209,11 @@ const routes: Routes = [
                 clientNotes: ClientNotesResolver
               }
             },
+            {
+              path: 'history',
+              component: HistoryTabComponent,
+              data: { title: 'History', breadcrumb: 'History', routeParamBreadcrumb: false }
+            },
             {
               path: 'datatables',
               children: [

src/app/clients/clients-view/clients-view.component.html

@@ -426,6 +426,9 @@
     <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
       {{ 'labels.buttons.Upload Signature' | translate }}
     </button>
+    <button mat-menu-item (click)="doAction('Capture Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+      Capture Signature (Webcam)
+    </button>
     <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
       {{ 'labels.buttons.Delete Signature' | translate }}
     </button>
@@ -559,6 +562,15 @@
       >
         <i class="fa fa-sticky-note cv-tab-icon"></i> {{ 'labels.inputs.Notes' | translate }}
       </a>
+      <a
+        mat-tab-link
+        [routerLink]="['./history']"
+        routerLinkActive
+        #history="routerLinkActive"
+        [active]="history.isActive"
+      >
+        <i class="fa fa-history cv-tab-icon"></i> History
+      </a>
       @for (clientDatatable of clientDatatables; track clientDatatable) {
         <a
           mat-tab-link

src/app/clients/clients-view/clients-view.component.ts

@@ -240,6 +240,9 @@ export class ClientsViewComponent implements OnInit {
       case 'Upload Signature':
         this.uploadSignature();
         break;
+      case 'Capture Signature':
+        this.captureSignatureImage();
+        break;
       case 'Delete Signature':
         this.deleteSignature();
         break;
@@ -332,6 +335,8 @@ export class ClientsViewComponent implements OnInit {
           this.uploadSignature();
         } else if (response.draw) {
           this.drawSignature();
+        } else if (response.capture) {
+          this.captureSignatureImage();
         } else if (response.delete) {
           this.deleteSignature();
         }
@@ -391,7 +396,9 @@ export class ClientsViewComponent implements OnInit {
    * Captures clients profile image.
    */
   private captureProfileImage() {
-    const captureImageDialogRef = this.dialog.open(CaptureImageDialogComponent);
+    const captureImageDialogRef = this.dialog.open(CaptureImageDialogComponent, {
+      data: { captureTarget: 'profile' }
+    });
     captureImageDialogRef.afterClosed().subscribe((imageURL: string) => {
       if (imageURL) {
         this.clientsService.uploadCapturedClientProfileImage(this.clientViewData.id, imageURL).subscribe(() => {
@@ -401,6 +408,24 @@ export class ClientsViewComponent implements OnInit {
     });
   }
 
+  /**
+   * Captures client signature via webcam (photograph of a paper signature).
+   * Mirrors `captureProfileImage()` — same dialog, parametrized for signature capture,
+   * uploaded via `uploadCapturedClientSignature()` instead of the profile-image upload.
+   */
+  private captureSignatureImage() {
+    const captureImageDialogRef = this.dialog.open(CaptureImageDialogComponent, {
+      data: { captureTarget: 'signature' }
+    });
+    captureImageDialogRef.afterClosed().subscribe((imageURL: string) => {
+      if (imageURL) {
+        this.clientsService.uploadCapturedClientSignature(this.clientViewData.id, imageURL).subscribe(() => {
+          this.reload();
+        });
+      }
+    });
+  }
+
   /**
    * Uploads the clients image.
    */

src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html

@@ -6,10 +6,24 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="layout-column gap-2px">
+<div class="layout-column gap-2px capture-dialog">
-  <h1 mat-dialog-title align="center">{{ 'labels.heading.Capture Client Image' | translate }}</h1>
+  <h1 mat-dialog-title align="center" class="capture-title">
+    <fa-icon [icon]="isSignatureCapture ? 'signature' : 'camera'"></fa-icon>
+    <span>{{ dialogTitle }}</span>
+  </h1>
+  <p class="capture-instructions" align="center">{{ dialogInstructions }}</p>
 
-  <video #video class="capture-video" autoplay></video>
+  <div class="capture-frame" [class.capture-frame--signature]="isSignatureCapture">
+    <video
+      #video
+      class="capture-video"
+      autoplay
+      playsinline
+      disablepictureinpicture
+      disableremoteplayback
+      controlslist="nodownload noremoteplayback nofullscreen"
+    ></video>
+  </div>
 
   <!-- Using a class will break renderer changes -->
   <canvas #canvas [ngStyle]="{ display: 'none' }"></canvas>
@@ -17,20 +31,20 @@
   <!-- Using a class will break renderer changes -->
   <p #fallback [ngStyle]="{ display: 'none' }" align="center"></p>
 
-  <div class="flex-20" align="center">
+  <div class="capture-actions-row">
     @if (!isCaptured) {
-      <button #captureButton mat-stroked-button color="primary" (click)="capture()">
+      <button #captureButton mat-stroked-button color="primary" class="capture-btn" (click)="capture()">
-        {{ 'labels.buttons.Capture' | translate }}
+        <fa-icon icon="camera" size="sm" class="m-r-10"></fa-icon>{{ 'labels.buttons.Capture' | translate }}
       </button>
     }
     @if (isCaptured) {
-      <button mat-stroked-button color="primary" (click)="recapture()">
+      <button mat-stroked-button color="primary" class="capture-btn" (click)="recapture()">
         <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>{{ 'labels.buttons.Recapture' | translate }}
       </button>
     }
   </div>
 
-  <mat-dialog-actions align="end">
+  <mat-dialog-actions align="end" class="capture-dialog-footer">
     <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
     <button [disabled]="!isCaptured" mat-raised-button color="primary" [mat-dialog-close]="clientImageDataURL">
       {{ 'labels.buttons.Upload' | translate }}

src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.scss

@@ -6,13 +6,103 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-@use '../../../../../assets/styles/colours' as colors;
+/* No explicit width/maxHeight is passed at every `dialog.open(CaptureImageDialogComponent)`
+   call site (there are several, across clients-view/create/edit flows) — capping height and
+   allowing internal scroll here, once, keeps the Cancel/Upload footer reachable on short
+   viewports instead of relying on every caller to remember a maxHeight config. */
+:host {
+  display: block;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.capture-dialog {
+  padding: 4px 4px 8px;
+}
+
+.capture-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 0;
+
+  fa-icon {
+    color: #1074b9;
+    font-size: 18px;
+  }
+}
+
+.capture-instructions {
+  margin: 4px 0 14px;
+  padding: 0 16px;
+  font-size: 13px;
+  color: rgb(0 0 0 / 60%);
+}
+
+.capture-frame {
+  width: 100%;
+  max-width: 640px;
+
+  /* Capped in vh, not just px, so the frame shrinks on short viewports (laptop screens with
+     browser chrome eating into the visible height) instead of pushing the Capture/Cancel/
+     Upload buttons below the fold — `object-fit: cover` on the video means shrinking this box
+     never reintroduces pillarboxing, it just changes how much of the live frame is visible. */
+  max-height: 42vh;
+  margin: 0 auto;
+  border-radius: 14px;
+  overflow: hidden;
+  background: #111;
+  box-shadow: 0 8px 24px -8px rgb(15 23 42 / 25%);
+  border: 1px solid rgb(255 255 255 / 8%);
+
+  /* Default (profile) frame follows the requested 4:3 capture stream. */
+  aspect-ratio: 4 / 3;
+
+  /* Signature capture uses a shorter, wider (16:9) frame — paper signatures are landscape-ish
+     and this matches the wider resolution requested from getUserMedia, so the live preview
+     fills the frame edge-to-edge instead of pillarboxing (black bars) inside a mismatched box. */
+  &--signature {
+    aspect-ratio: 16 / 9;
+    max-height: 36vh;
+  }
+}
 
 .capture-video {
   width: 100%;
-  max-width: 640px;
+  height: 100%;
-  height: auto;
+  object-fit: cover;
-  object-fit: contain;
+  display: block;
-  border-radius: 4px;
+
-  background-color: colors.$black;
+  /* Chromium auto-injects a Picture-in-Picture toggle (and sometimes a cast button) as small
+     square overlay icons in a bare <video>'s corners on hover — the `disablepictureinpicture`/
+     `disableremoteplayback` attributes stop the *feature*, but these pseudo-elements are the
+     belt-and-braces way to make sure the icons themselves never render. */
+  &::-webkit-media-controls,
+  &::-webkit-media-controls-panel,
+  &::-internal-media-controls-overlay-cast-button {
+    display: none !important;
+  }
+}
+
+.capture-actions-row {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0 4px;
+}
+
+.capture-btn {
+  border-radius: 999px !important;
+  padding: 0 20px !important;
+  height: 42px;
+  font-weight: 600 !important;
+}
+
+.capture-dialog-footer {
+  padding: 8px 4px 0 !important;
+
+  .mat-mdc-raised-button {
+    border-radius: 999px !important;
+    font-weight: 600 !important;
+  }
 }

src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.ts

@@ -8,11 +8,23 @@
 
 /** Angular Imports */
 import { Component, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy, inject } from '@angular/core';
-import { MatDialogRef, MatDialogTitle, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
 import { NgStyle } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
+/** What the captured image is for — drives the dialog's title/instructions and lets the
+ * caller decide (based on how it opened the dialog) which upload method to invoke on the
+ * resulting data URL. Defaults to 'profile' so existing callers that don't pass `data`
+ * keep working unchanged. */
+export type CaptureImageTarget = 'profile' | 'signature';
+
 /**
  * Capture image dialog component
  */
@@ -32,6 +44,24 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CaptureImageDialogComponent implements AfterViewInit, OnDestroy {
   dialogRef = inject<MatDialogRef<CaptureImageDialogComponent>>(MatDialogRef);
   private renderer = inject(Renderer2);
+  private data = inject<{ captureTarget?: CaptureImageTarget } | null>(MAT_DIALOG_DATA, { optional: true });
+
+  /** 'profile' (default, unchanged behaviour) or 'signature' — photographing a paper signature. */
+  captureTarget: CaptureImageTarget = this.data?.captureTarget || 'profile';
+
+  get isSignatureCapture(): boolean {
+    return this.captureTarget === 'signature';
+  }
+
+  get dialogTitle(): string {
+    return this.isSignatureCapture ? 'Capture Client Signature' : 'Capture Client Image';
+  }
+
+  get dialogInstructions(): string {
+    return this.isSignatureCapture
+      ? 'Photograph the customer’s signed paper — line up the signature within the frame before capturing.'
+      : 'Line up the customer’s face within the frame before capturing.';
+  }
 
   /** Video element reference */
   @ViewChild('video', { static: true }) video: ElementRef;
@@ -62,11 +92,12 @@ export class CaptureImageDialogComponent implements AfterViewInit, OnDestroy {
    */
   startCamera() {
     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-      const videoConstraints: MediaTrackConstraints = {
+      // Signature capture asks for a wide/short (16:9) stream to match the frame it's shown
-        width: { ideal: 640 },
+      // in — requesting an aspect ratio close to what the CSS box actually renders avoids the
-        height: { ideal: 480 },
+      // camera negotiating a 4:3 stream that then gets pillarboxed (black bars) inside a 16:9 box.
-        facingMode: 'user'
+      const videoConstraints: MediaTrackConstraints = this.isSignatureCapture
-      };
+        ? { width: { ideal: 1280 }, height: { ideal: 720 }, facingMode: 'user' }
+        : { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: 'user' };
       navigator.mediaDevices
         .getUserMedia({ video: videoConstraints })
         .then((stream: MediaStream) => {

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html

@@ -438,6 +438,15 @@
         <div class="fd-field fd-field--file">
           <mifosx-file-upload flex="100%" (change)="onFileSelect($event)"></mifosx-file-upload>
         </div>
+        <div class="fd-webcam-row">
+          <span class="fd-webcam-divider">or</span>
+          <button type="button" mat-stroked-button color="primary" class="fd-webcam-btn" (click)="captureFromWebcam()">
+            <i class="fa fa-camera"></i> Capture from Webcam
+          </button>
+          @if (capturedFileName) {
+            <span class="fd-webcam-confirm"><i class="fa fa-check-circle"></i> {{ capturedFileName }}</span>
+          }
+        </div>
       </form>
     }
   </div>

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.scss

@@ -130,6 +130,41 @@ $white: #fff;
   }
 }
 
+.fd-webcam-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.fd-webcam-divider {
+  font-size: 12px;
+  color: $gray-500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.fd-webcam-btn {
+  border-radius: 8px !important;
+  font-weight: 500 !important;
+
+  i {
+    margin-right: 6px;
+  }
+}
+
+.fd-webcam-confirm {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #1e8e3e;
+
+  i {
+    color: #1e8e3e;
+  }
+}
+
 .fd-section-divider {
   margin: 8px 0 12px;
   border-bottom: 1px solid $gray-200;

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts

@@ -16,12 +16,14 @@ import {
   MatDialogClose
 } from '@angular/material/dialog';
 import { ImageCropperDialogComponent } from '../image-cropper-dialog/image-cropper-dialog.component';
+import { CaptureImageDialogComponent } from '../capture-image-dialog/capture-image-dialog.component';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { FileUploadComponent } from '../../../../shared/file-upload/file-upload.component';
 import { MatIconButton } from '@angular/material/button';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { ClientsService } from '../../../clients.service';
 import { ProofType, normalizeProofType, groupProofsByCategory } from '../../../shared/kyc-proof-types';
+import { dataUrlToFile } from '../../../../shared/utils/data-url.util';
 
 type SectionKey = 'id' | 'address';
 
@@ -72,6 +74,12 @@ export class UploadDocumentDialogComponent implements OnInit {
   addrMergedFile: File | null = null;
   addrMergedPreview: string | null = null;
 
+  /** Non-identifier (generic) mode only — set after a webcam capture, since
+   * `FileUploadComponent` only reflects files picked through its own native input and has
+   * no input for one supplied programmatically. Cleared if the user then picks a file via
+   * Browse instead, so only one confirmation shows at a time. */
+  capturedFileName: string | null = null;
+
   constructor() {
     const data = this.data;
     this.documentIdentifier = !!data?.documentIdentifier;
@@ -390,6 +398,24 @@ export class UploadDocumentDialogComponent implements OnInit {
     if ($event.target.files.length > 0) {
       const file = $event.target.files[0];
       this.uploadDocumentForm.get('file').setValue(file);
+      this.capturedFileName = null;
     }
   }
+
+  /** Non-identifier (generic Documents tab) mode only — lets staff photograph a document
+   * with the webcam instead of only being able to browse for an existing file. Reuses the
+   * same capture dialog as the profile-photo/signature flows. */
+  captureFromWebcam(): void {
+    const ref = this.dialog.open(CaptureImageDialogComponent, {
+      width: '720px',
+      maxWidth: '95vw',
+      data: { captureTarget: 'profile' }
+    });
+    ref.afterClosed().subscribe((dataUrl: string | null) => {
+      if (!dataUrl) return;
+      const file = dataUrlToFile(dataUrl, `webcam-capture-${Date.now()}.jpg`);
+      this.uploadDocumentForm.get('file').setValue(file);
+      this.capturedFileName = file.name;
+    });
+  }
 }

src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.html

@@ -34,5 +34,8 @@
     <button mat-raised-button color="primary" [mat-dialog-close]="{ draw: true }">
       {{ 'labels.buttons.Draw' | translate }}
     </button>
+    <button mat-raised-button color="primary" [mat-dialog-close]="{ capture: true }">
+      <fa-icon icon="camera"></fa-icon> Webcam
+    </button>
   }
 </mat-dialog-actions>

src/app/clients/clients-view/custom-dialogs/view-signature-dialog/view-signature-dialog.component.ts

@@ -24,6 +24,7 @@ import { ClientsService } from 'app/clients/clients.service';
 /** Node Types */
 import { Buffer } from 'buffer';
 import { CdkScrollable } from '@angular/cdk/scrolling';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -39,7 +40,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     CdkScrollable,
     MatDialogContent,
     MatDialogActions,
-    MatDialogClose
+    MatDialogClose,
+    FaIconComponent
   ]
 })
 export class ViewSignatureDialogComponent implements OnInit {

src/app/clients/clients-view/history-tab/history-tab.component.html

@@ -0,0 +1,79 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="history-tab">
+  <div class="history-tab__header">
+    <h3>Change History</h3>
+    <p>Past changes to this client's details and address, pulled from the system Audit Trail.</p>
+  </div>
+
+  <div class="history-tab__table-container">
+    @if (isLoading) {
+      <mat-progress-bar mode="indeterminate" class="history-tab__loader"></mat-progress-bar>
+    }
+
+    @if (!isLoading && dataSource.data.length === 0) {
+      <div class="history-tab__empty">No recorded changes for this client yet.</div>
+    }
+
+    @if (!isLoading && dataSource.data.length > 0) {
+      <table mat-table [dataSource]="dataSource" class="history-tab__table">
+        <ng-container matColumnDef="entityName">
+          <th mat-header-cell *matHeaderCellDef>Entity</th>
+          <td mat-cell *matCellDef="let row">{{ row.entityName | translateKey: 'auditTrail.entities' }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="actionName">
+          <th mat-header-cell *matHeaderCellDef>Action</th>
+          <td mat-cell *matCellDef="let row">
+            <span class="history-tab__action-badge">{{ row.actionName | translateKey: 'auditTrail.actions' }}</span>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="fieldsChanged">
+          <th mat-header-cell *matHeaderCellDef>Fields Changed</th>
+          <td mat-cell *matCellDef="let row" class="history-tab__fields">{{ fieldsChanged(row) || '—' }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="maker">
+          <th mat-header-cell *matHeaderCellDef>Made By</th>
+          <td mat-cell *matCellDef="let row">{{ row.maker }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="madeOnDate">
+          <th mat-header-cell *matHeaderCellDef>Made On</th>
+          <td mat-cell *matCellDef="let row" class="history-tab__mono">{{ row.madeOnDate | datetimeFormat }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="processingResult">
+          <th mat-header-cell *matHeaderCellDef>Status</th>
+          <td mat-cell *matCellDef="let row">
+            <span
+              class="history-tab__status"
+              [class.history-tab__status--success]="row.processingResult === 'SUCCESS'"
+              [class.history-tab__status--failure]="row.processingResult === 'FAILURE'"
+              [class.history-tab__status--awaiting]="row.processingResult === 'AWAITING_APPROVAL'"
+            >
+              {{ row.processingResult }}
+            </span>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: displayedColumns"
+          class="history-tab__row"
+          [routerLink]="['/system', 'audit-trails', row.id]"
+        ></tr>
+      </table>
+
+      <mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
+    }
+  </div>
+</div>

src/app/clients/clients-view/history-tab/history-tab.component.scss

@@ -0,0 +1,108 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+.history-tab {
+  padding: 16px 0;
+}
+
+.history-tab__header {
+  margin-bottom: 16px;
+
+  h3 {
+    margin: 0 0 4px;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+    color: rgb(0 0 0 / 60%);
+  }
+}
+
+.history-tab__table-container {
+  position: relative;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
+  overflow-x: auto;
+}
+
+.history-tab__loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.history-tab__empty {
+  padding: 32px 16px;
+  text-align: center;
+  color: rgb(0 0 0 / 55%);
+  font-size: 13.5px;
+}
+
+.history-tab__table {
+  width: 100%;
+}
+
+.history-tab__row {
+  cursor: pointer;
+
+  &:hover {
+    background: #f8fafc;
+  }
+}
+
+.history-tab__fields {
+  max-width: 320px;
+  white-space: normal;
+  font-size: 12.5px;
+  color: #475569;
+}
+
+.history-tab__mono {
+  font-family: 'Roboto Mono', monospace;
+  font-size: 12.5px;
+}
+
+.history-tab__action-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #1074b9;
+  font-size: 11.5px;
+  font-weight: 600;
+}
+
+.history-tab__status {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 700;
+  background: #f1f5f9;
+  color: #475569;
+
+  &--success {
+    background: #dcfce7;
+    color: #15803d;
+  }
+
+  &--failure {
+    background: #fee2e2;
+    color: #b91c1c;
+  }
+
+  &--awaiting {
+    background: #fef3c7;
+    color: #92400e;
+  }
+}

src/app/clients/clients-view/history-tab/history-tab.component.ts

@@ -0,0 +1,150 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/** Angular Imports */
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MatPaginator } from '@angular/material/paginator';
+import {
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
+import { MatProgressBar } from '@angular/material/progress-bar';
+
+/** rxjs Imports */
+import { forkJoin } from 'rxjs';
+
+/** Custom Services */
+import { SystemService } from 'app/system/system.service';
+import { DatetimeFormatPipe } from '../../../pipes/datetime-format.pipe';
+import { TranslatePipe } from '../../../pipes/translate.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/**
+ * Client "History" tab — a read-only, client-scoped view over the EXISTING system-wide
+ * Audit Trail data (no new backend endpoint). Reuses `SystemService.getAuditTrails()`
+ * exactly as `AuditTrailsComponent` does, pre-filtered to `entityName IN (CLIENT, ADDRESS)`
+ * + `resourceId = clientId` — two calls (the underlying `filterBy` shape only carries one
+ * `entityName` value at a time) merged and sorted client-side.
+ */
+@Component({
+  selector: 'mifosx-clients-history-tab',
+  templateUrl: './history-tab.component.html',
+  styleUrls: ['./history-tab.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatProgressBar,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatPaginator,
+    DatetimeFormatPipe,
+    TranslatePipe
+  ]
+})
+export class HistoryTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private systemService = inject(SystemService);
+
+  /** Client ID (from the parent `:clientId` route param, same pattern as notes-tab). */
+  clientId: string;
+
+  isLoading = false;
+  displayedColumns: string[] = [
+    'entityName',
+    'actionName',
+    'fieldsChanged',
+    'maker',
+    'madeOnDate',
+    'processingResult'
+  ];
+  dataSource: MatTableDataSource<any> = new MatTableDataSource<any>([]);
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  constructor() {
+    this.clientId = this.route.parent.snapshot.params['clientId'];
+  }
+
+  ngOnInit(): void {
+    this.loadHistory();
+  }
+
+  private auditFilterFor(entityName: string): { type: string; value: string }[] {
+    return [
+      { type: 'entityName', value: entityName },
+      { type: 'resourceId', value: this.clientId }
+    ];
+  }
+
+  private loadHistory(): void {
+    this.isLoading = true;
+    forkJoin({
+      client: this.systemService.getAuditTrails(this.auditFilterFor('CLIENT'), '', '', 0, 200),
+      address: this.systemService.getAuditTrails(this.auditFilterFor('ADDRESS'), '', '', 0, 200)
+    }).subscribe({
+      next: ({ client, address }: { client: any; address: any }) => {
+        const merged = [
+          ...(client?.pageItems || []),
+          ...(address?.pageItems || [])
+        ];
+        // Most recent first — audit trail ids are monotonically increasing.
+        merged.sort((a, b) => (b?.id ?? 0) - (a?.id ?? 0));
+        this.dataSource = new MatTableDataSource(merged);
+        this.dataSource.paginator = this.paginator;
+        this.isLoading = false;
+      },
+      error: () => {
+        this.isLoading = false;
+      }
+    });
+  }
+
+  /**
+   * Summarises which fields a row changed, parsed from `commandAsJson` — same source
+   * `ViewAuditComponent` parses for its command/value table, just condensed to a
+   * comma-separated field list for this compact history view. Boilerplate command
+   * params (locale/dateFormat) are excluded as noise.
+   */
+  fieldsChanged(row: any): string {
+    if (!row?.commandAsJson) {
+      return '';
+    }
+    try {
+      const parsed = JSON.parse(row.commandAsJson);
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        const ignore = new Set([
+          'locale',
+          'dateFormat'
+        ]);
+        return Object.keys(parsed)
+          .filter((key) => !ignore.has(key))
+          .join(', ');
+      }
+    } catch {
+      // Malformed/absent commandAsJson — leave blank rather than throw.
+    }
+    return '';
+  }
+}

src/app/clients/clients.service.ts

@@ -16,6 +16,7 @@ import { switchMap } from 'rxjs/operators';
 import { map, catchError } from 'rxjs/operators';
 
 import { environment } from 'environments/environment';
+import { dataUrlToFile } from 'app/shared/utils/data-url.util';
 
 /**
  * Clients service.
@@ -230,6 +231,63 @@ export class ClientsService {
     return this.http.get(`/clients/${clientId}/documents/${documentId}/attachment`, { responseType: 'blob' });
   }
 
+  /**
+   * Uploads a webcam-captured signature (photograph of a paper signature).
+   * Mirrors `uploadClientSignatureImage()`'s multipart shape (name=clientSignature)
+   * exactly, but the source is a captured `data:` URL rather than a picked `File`.
+   */
+  uploadCapturedClientSignature(clientId: string, imageDataUrl: string) {
+    const formData = new FormData();
+    formData.append('file', dataUrlToFile(imageDataUrl, 'clientSignature.jpg'));
+    formData.append('name', 'clientSignature');
+    formData.append('description', 'Client signature (captured via webcam)');
+    return this.http.post(`/clients/${clientId}/documents`, formData);
+  }
+
+  /**
+   * Generates an OTP against a client's OLD or NEW mobile/email destination, ahead of a
+   * sensitive contact-detail change. Dual-OTP verification (old + new) is required before
+   * the mobileNo/emailAddress change is accepted by the backend — see `verifyClientContactOtp()`.
+   * @param clientId Client ID
+   * @param channel 'MOBILE' | 'EMAIL'
+   * @param destination Raw mobile number or email address to send the OTP to
+   */
+  sendClientContactOtp(clientId: string, channel: 'MOBILE' | 'EMAIL', destination: string): Observable<any> {
+    return this.http.post(`/clients/${clientId}/contact-verification/otp`, { channel, destination });
+  }
+
+  /**
+   * Verifies an OTP previously generated via `sendClientContactOtp()`.
+   * @param clientId Client ID
+   * @param otpId ID returned by the generate call
+   * @param otp 6-digit code entered by staff on the customer's behalf
+   */
+  verifyClientContactOtp(clientId: string, otpId: number, otp: string): Observable<any> {
+    return this.http.post(`/clients/${clientId}/contact-verification/otp/verify`, { otpId, otp });
+  }
+
+  /**
+   * Generates an OTP against a NOT-YET-CREATED client's mobile/email, ahead of the initial
+   * `POST /clients` call. There is no clientId yet, so this hits the clientId-less sibling
+   * endpoint (`ClientCreationContactVerificationApiResource`) rather than
+   * `sendClientContactOtp()`'s `/clients/{clientId}/...` shape. The returned otpId is sent
+   * back as `mobileNewOtpId`/`emailNewOtpId` on `createClient()`.
+   * @param channel 'MOBILE' | 'EMAIL'
+   * @param destination Raw mobile number or email address to send the OTP to
+   */
+  sendClientCreationContactOtp(channel: 'MOBILE' | 'EMAIL', destination: string): Observable<any> {
+    return this.http.post(`/clients/contact-verification/otp`, { channel, destination });
+  }
+
+  /**
+   * Verifies an OTP previously generated via `sendClientCreationContactOtp()`.
+   * @param otpId ID returned by the generate call
+   * @param otp 6-digit code entered by staff on the customer's behalf
+   */
+  verifyClientCreationContactOtp(otpId: number, otp: string): Observable<any> {
+    return this.http.post(`/clients/contact-verification/otp/verify`, { otpId, otp });
+  }
+
   getClientFamilyMembers(clientId: string) {
     return this.http.get(`/clients/${clientId}/familymembers`);
   }

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

src/app/clients/edit-client/contact-otp-block/contact-otp-block.component.html

@@ -0,0 +1,76 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="cotp-block" [class.cotp-block--verified]="verified">
+  <div class="cotp-block__header">
+    <span class="cotp-block__label">{{ label }}</span>
+    <span class="cotp-block__target">{{ maskedDestination }}</span>
+  </div>
+
+  @if (verified) {
+    <div class="cotp-block__verified">
+      <fa-icon icon="check-circle"></fa-icon>
+      <span>Verified</span>
+    </div>
+  } @else if (!otpSent) {
+    <button type="button" class="cotp-btn cotp-btn--primary" (click)="sendOtp()" [disabled]="sending || !destination">
+      @if (sending) {
+        <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
+        <span>Sending…</span>
+      } @else {
+        <fa-icon icon="paper-plane"></fa-icon>
+        <span>Send OTP</span>
+      }
+    </button>
+  } @else {
+    <div class="cotp-otp">
+      @for (i of digitIndexes; track i) {
+        <input
+          #digitBox
+          type="text"
+          inputmode="numeric"
+          maxlength="1"
+          class="cotp-otp__box"
+          [value]="digitControls[i].value"
+          [attr.autocomplete]="i === 0 ? 'one-time-code' : 'off'"
+          (input)="onDigitInput(i, $any($event.target).value)"
+          (keydown)="onDigitKeydown(i, $event)"
+          (paste)="onDigitPaste($event)"
+        />
+      }
+    </div>
+
+    <div class="cotp-block__actions">
+      <button
+        type="button"
+        class="cotp-btn cotp-btn--primary"
+        (click)="verifyOtp()"
+        [disabled]="!codeValid || verifying"
+      >
+        @if (verifying) {
+          <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
+          <span>Verifying…</span>
+        } @else {
+          <fa-icon icon="check-circle"></fa-icon>
+          <span>Verify</span>
+        }
+      </button>
+      <button type="button" class="cotp-btn cotp-btn--ghost" (click)="resendOtp()" [disabled]="resendCountdown > 0">
+        <fa-icon icon="redo"></fa-icon>
+        <span>{{ resendCountdown > 0 ? 'Resend (' + resendCountdown + 's)' : 'Resend OTP' }}</span>
+      </button>
+    </div>
+  }
+
+  @if (errorMessage) {
+    <div class="cotp-error">
+      <fa-icon icon="exclamation-circle"></fa-icon>
+      {{ errorMessage }}
+    </div>
+  }
+</div>

src/app/clients/edit-client/contact-otp-block/contact-otp-block.component.scss

@@ -0,0 +1,177 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/* Card with 6 individually-bordered digit boxes (not the single-input/background-gradient
+ * trick used elsewhere in this app) — each box is its own <input>, so focus/border state is
+ * per-digit rather than shared across the whole code. */
+
+:host {
+  display: block;
+}
+
+.cotp-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 28px 24px;
+  border: 1px solid #e7ecf3;
+  border-radius: 18px;
+  background: #fff;
+  box-shadow: 0 8px 24px -8px rgb(15 23 42 / 10%);
+  text-align: center;
+
+  &--verified {
+    border-color: #86efac;
+    background: #f7fdf9;
+  }
+}
+
+.cotp-block__header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cotp-block__label {
+  font-size: 15px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: #1e293b;
+}
+
+.cotp-block__target {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1074b9;
+  word-break: break-all;
+}
+
+.cotp-block__verified {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 16px;
+  border-radius: 999px;
+  background: #dcfce7;
+  color: #15803d;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.cotp-block__actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.cotp-otp {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+.cotp-otp__box {
+  box-sizing: border-box;
+  width: 46px;
+  height: 52px;
+  border: 1.5px solid #dde3ec;
+  border-radius: 12px;
+  background: #fff;
+  color: #0f172a;
+  font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
+  font-size: 22px;
+  font-weight: 700;
+  text-align: center;
+  caret-color: #1074b9;
+  outline: none;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+
+  &:hover {
+    border-color: #b7c2d0;
+  }
+
+  &:focus {
+    border-color: #1074b9;
+    box-shadow: 0 0 0 3px rgb(16 116 185 / 15%);
+  }
+}
+
+.cotp-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex: 1 1 0;
+  height: 48px;
+  padding: 0 20px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  border: 1.5px solid transparent;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s,
+    opacity 0.15s;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  &--primary {
+    background: #1074b9;
+    color: #fff;
+    box-shadow: 0 6px 16px -4px rgb(16 116 185 / 45%);
+
+    &:hover:not(:disabled) {
+      background: #0d5f96;
+    }
+  }
+
+  &--ghost {
+    background: #fff;
+    color: #1074b9;
+    border-color: #cfe0ee;
+
+    &:hover:not(:disabled) {
+      border-color: #1074b9;
+      background: #f0f7fc;
+    }
+  }
+
+  mat-progress-spinner ::ng-deep circle {
+    stroke: currentcolor !important;
+  }
+}
+
+.cotp-error {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 10px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #b91c1c;
+  font-size: 12.5px;
+}
+
+@media (width <= 420px) {
+  .cotp-otp__box {
+    width: 38px;
+    height: 46px;
+    font-size: 18px;
+  }
+}

src/app/clients/edit-client/contact-otp-block/contact-otp-block.component.ts

@@ -0,0 +1,307 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/** Angular Imports */
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  QueryList,
+  SimpleChanges,
+  ViewChildren,
+  inject
+} from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/** Custom Services */
+import { ClientsService } from '../../clients.service';
+
+/** Emitted every time this block's verification result changes — including a reset back
+ * to `{ otpId: null, verified: false }` when the destination it was verifying no longer
+ * matches (e.g. staff kept editing the mobile number after verifying an earlier value). */
+export interface ContactOtpState {
+  otpId: number | null;
+  verified: boolean;
+}
+
+/**
+ * Small presentational OTP-entry block reused up to four times inside the Edit Client
+ * "Verify Contact Change" panel (old mobile / new mobile / old email / new email — see
+ * `EditClientComponent`), and once each for mobile/email in the Create Client flow (see
+ * `ClientGeneralStepComponent`). Renders as 6 individually-bordered digit boxes (one real
+ * `<input>` each, auto-advancing focus) rather than the single-input/background-gradient trick
+ * used elsewhere in this app — each box needs its own focus/border state, which a shared input
+ * can't express.
+ */
+@Component({
+  selector: 'mifosx-client-contact-otp-block',
+  templateUrl: './contact-otp-block.component.html',
+  styleUrls: ['./contact-otp-block.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    MatProgressSpinner
+  ]
+})
+export class ContactOtpBlockComponent implements OnChanges, OnDestroy {
+  private clientsService = inject(ClientsService);
+
+  /** The 6 individual digit-box <input> elements, in order — used to move focus between them. */
+  @ViewChildren('digitBox') digitBoxes: QueryList<ElementRef<HTMLInputElement>>;
+
+  /** One independent control per box — NOT a single 6-char string sliced up. Editing box 0
+   * can never disturb box 3's value this way. (An earlier version kept one shared string and
+   * rebuilt it via `chars.join('')` on every keystroke — `['', '2', '3'].join('') === '23'`
+   * silently drops empty slots instead of preserving them as gaps, so deleting an early digit
+   * collapsed/shifted every digit after it. Per-box controls sidestep that class of bug
+   * entirely — there's no string to rebuild until the moment we actually submit.) */
+  readonly digitControls: UntypedFormControl[] = Array.from({ length: 6 }, () => new UntypedFormControl(''));
+
+  /** Fixed-length array so the template can `*ngFor` over exactly 6 boxes. */
+  readonly digitIndexes = [
+    0,
+    1,
+    2,
+    3,
+    4,
+    5
+  ];
+
+  /** Client whose mobileNo/emailAddress is being changed. Omit this input entirely for the
+   * CLIENT CREATION flow — there is no client id yet, so the block falls back to the
+   * clientId-less creation-time OTP endpoints (`ClientsService.sendClientCreationContactOtp()` /
+   * `verifyClientCreationContactOtp()`) instead of the edit-flow `/clients/{clientId}/...` ones. */
+  @Input() clientId?: string;
+  /** Which LincPay OTP channel to use. */
+  @Input() channel: 'MOBILE' | 'EMAIL';
+  /** Raw destination (old or new mobile number / email address) this block verifies. */
+  @Input() destination = '';
+  /** Display label, e.g. "Old Mobile Number" / "New Email Address". */
+  @Input() label = '';
+
+  /** Fires whenever `{ otpId, verified }` changes — including resets. */
+  @Output() stateChange = new EventEmitter<ContactOtpState>();
+
+  otpId: number | null = null;
+  otpSent = false;
+  verified = false;
+  sending = false;
+  verifying = false;
+  errorMessage = '';
+  resendCountdown = 0;
+  private resendTimer: ReturnType<typeof setInterval> | null = null;
+
+  /** The full 6-digit code, assembled fresh from the 6 independent box controls only when
+   * actually needed (display never needs this — each box renders its own control's value). */
+  get code(): string {
+    return this.digitControls.map((c) => c.value || '').join('');
+  }
+
+  get codeValid(): boolean {
+    return /^\d{6}$/.test(this.code);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    // If the value being verified changes after the fact (staff kept typing), any
+    // previously-sent/verified OTP no longer applies to the current destination.
+    if (changes['destination'] && !changes['destination'].firstChange && this.otpSent) {
+      this.resetState();
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.resendTimer) {
+      clearInterval(this.resendTimer);
+    }
+  }
+
+  /** Masks the destination so only a few characters are visible, mirroring the masking
+   * convention already used on the login 2FA screen (`maskTarget()`). */
+  get maskedDestination(): string {
+    const value = this.destination || '';
+    if (!value) {
+      return '';
+    }
+    if (this.channel === 'MOBILE') {
+      const digits = value.replace(/\D/g, '');
+      if (digits.length <= 4) {
+        return value;
+      }
+      return 'X'.repeat(digits.length - 4) + digits.slice(-4);
+    }
+    const at = value.indexOf('@');
+    if (at <= 0) {
+      return value;
+    }
+    const local = value.substring(0, at);
+    const domain = value.substring(at);
+    const visible = local.substring(0, Math.min(2, local.length));
+    const hidden = 'X'.repeat(Math.max(0, local.length - visible.length));
+    return visible + hidden + domain;
+  }
+
+  sendOtp(): void {
+    if (!this.destination || this.sending) {
+      return;
+    }
+    this.sending = true;
+    this.errorMessage = '';
+    const request$ = this.clientId
+      ? this.clientsService.sendClientContactOtp(this.clientId, this.channel, this.destination)
+      : this.clientsService.sendClientCreationContactOtp(this.channel, this.destination);
+    request$.subscribe({
+      next: (res: any) => {
+        this.sending = false;
+        this.otpId = res?.otpId ?? res?.resourceId ?? null;
+        this.otpSent = true;
+        this.clearAllDigits();
+        this.startResendCountdown();
+        // The 6 digit boxes only render once otpSent flips true — defer the focus call to the
+        // next tick so they exist in the DOM (and in `digitBoxes`) by the time it runs.
+        setTimeout(() => this.focusBox(0));
+        if (this.otpId == null) {
+          this.errorMessage = 'OTP sent, but no reference id was returned. Please contact support.';
+        }
+      },
+      error: (err: any) => {
+        this.sending = false;
+        this.errorMessage = err?.error?.defaultUserMessage || err?.error?.message || 'Could not send OTP.';
+      }
+    });
+  }
+
+  /** Typing a digit in box `index`: this box's own control gets exactly that digit — every
+   * other box's control is untouched, so there's nothing to shift or collapse. Moves focus to
+   * the next box unless this was the last one. */
+  onDigitInput(index: number, rawValue: string): void {
+    const digit = (rawValue || '').replace(/\D/g, '').slice(-1);
+    this.digitControls[index].setValue(digit);
+
+    if (digit && index < 5) {
+      this.focusBox(index + 1);
+    }
+  }
+
+  /** Backspace in an empty box clears the PREVIOUS box and moves focus there, matching the
+   * usual "segmented OTP input" keyboard feel — again, only ever touching one control at a
+   * time. Arrow keys move focus without altering any box's value. */
+  onDigitKeydown(index: number, event: KeyboardEvent): void {
+    if (event.key === 'Backspace') {
+      if (!this.digitControls[index].value && index > 0) {
+        this.digitControls[index - 1].setValue('');
+        this.focusBox(index - 1);
+        event.preventDefault();
+      }
+      return;
+    }
+    if (event.key === 'ArrowLeft' && index > 0) {
+      this.focusBox(index - 1);
+      event.preventDefault();
+    } else if (event.key === 'ArrowRight' && index < 5) {
+      this.focusBox(index + 1);
+      event.preventDefault();
+    }
+  }
+
+  /** Pasting a full code into any box fills all 6 boxes at once (one control per digit) and
+   * focuses the last filled one. */
+  onDigitPaste(event: ClipboardEvent): void {
+    const pasted = event.clipboardData?.getData('text') || '';
+    const digits = pasted.replace(/\D/g, '').slice(0, 6);
+    if (!digits) {
+      return;
+    }
+    event.preventDefault();
+    digits.split('').forEach((d, i) => this.digitControls[i].setValue(d));
+    for (let i = digits.length; i < 6; i++) {
+      this.digitControls[i].setValue('');
+    }
+    this.focusBox(Math.min(digits.length, 6) - 1);
+  }
+
+  private clearAllDigits(): void {
+    this.digitControls.forEach((c) => c.setValue(''));
+  }
+
+  private focusBox(index: number): void {
+    const box = this.digitBoxes?.toArray()[index];
+    box?.nativeElement.focus();
+  }
+
+  resendOtp(): void {
+    if (this.resendCountdown > 0 || this.sending) {
+      return;
+    }
+    this.sendOtp();
+  }
+
+  verifyOtp(): void {
+    if (this.otpId == null || !this.codeValid || this.verifying) {
+      this.digitControls.forEach((c) => c.markAsTouched());
+      return;
+    }
+    this.verifying = true;
+    this.errorMessage = '';
+    const request$ = this.clientId
+      ? this.clientsService.verifyClientContactOtp(this.clientId, this.otpId, this.code)
+      : this.clientsService.verifyClientCreationContactOtp(this.otpId, this.code);
+    request$.subscribe({
+      next: (res: any) => {
+        this.verifying = false;
+        // Defensive shape-tolerance: treat an explicit `verified: false` as failure,
+        // anything else (2xx with `verified: true`, or no `verified` field at all) as success.
+        const ok = res?.verified !== false;
+        if (ok) {
+          this.verified = true;
+          this.stateChange.emit({ otpId: this.otpId, verified: true });
+        } else {
+          this.errorMessage = res?.message || 'Incorrect OTP — please try again.';
+        }
+      },
+      error: (err: any) => {
+        this.verifying = false;
+        this.errorMessage = err?.error?.defaultUserMessage || err?.error?.message || 'OTP verification failed.';
+      }
+    });
+  }
+
+  private resetState(): void {
+    this.otpId = null;
+    this.otpSent = false;
+    this.verified = false;
+    this.errorMessage = '';
+    this.clearAllDigits();
+    if (this.resendTimer) {
+      clearInterval(this.resendTimer);
+      this.resendTimer = null;
+    }
+    this.resendCountdown = 0;
+    this.stateChange.emit({ otpId: null, verified: false });
+  }
+
+  private startResendCountdown(): void {
+    this.resendCountdown = 30;
+    if (this.resendTimer) {
+      clearInterval(this.resendTimer);
+    }
+    this.resendTimer = setInterval(() => {
+      this.resendCountdown--;
+      if (this.resendCountdown <= 0 && this.resendTimer) {
+        clearInterval(this.resendTimer);
+        this.resendTimer = null;
+      }
+    }, 1000);
+  }
+}

src/app/clients/edit-client/edit-client.component.html

@@ -42,6 +42,79 @@
           [readOnly]="isTabReadOnly(0)"
           (legalFormChangeEvent)="legalFormChange($event)"
         ></mifosx-client-general-step>
+
+        <!-- Dual-OTP contact-change verification panel — appears only once the mobile
+             number and/or email address differ from the loaded snapshot. Save stays
+             gated (see currentStepValid) until every required block below is verified. -->
+        @if (!isTabReadOnly(0) && (contactChanges.mobileChanged || contactChanges.emailChanged)) {
+          <div class="contact-verify-panel">
+            <div class="contact-verify-panel__header">
+              <mat-icon>verified_user</mat-icon>
+              <div class="contact-verify-panel__header-text">
+                <strong>Verify Contact Change</strong>
+                <span
+                  >An OTP must be verified on both the old and new
+                  {{
+                    contactChanges.mobileChanged && contactChanges.emailChanged
+                      ? 'mobile number and email address'
+                      : contactChanges.mobileChanged
+                        ? 'mobile number'
+                        : 'email address'
+                  }}
+                  before this change can be saved.</span
+                >
+              </div>
+            </div>
+            @if (contactChanges.mobileChanged) {
+              <div class="contact-verify-panel__field-group">
+                <div class="contact-verify-panel__field-title">
+                  <mat-icon>phone_iphone</mat-icon>
+                  <span>Mobile Number</span>
+                </div>
+                <div class="contact-verify-panel__grid">
+                  <mifosx-client-contact-otp-block
+                    [clientId]="clientId"
+                    channel="MOBILE"
+                    [destination]="contactChanges.oldMobile"
+                    label="Old Mobile Number"
+                    (stateChange)="onOldMobileOtpState($event)"
+                  ></mifosx-client-contact-otp-block>
+                  <mifosx-client-contact-otp-block
+                    [clientId]="clientId"
+                    channel="MOBILE"
+                    [destination]="contactChanges.newMobile"
+                    label="New Mobile Number"
+                    (stateChange)="onNewMobileOtpState($event)"
+                  ></mifosx-client-contact-otp-block>
+                </div>
+              </div>
+            }
+            @if (contactChanges.emailChanged) {
+              <div class="contact-verify-panel__field-group">
+                <div class="contact-verify-panel__field-title">
+                  <mat-icon>email</mat-icon>
+                  <span>Email Address</span>
+                </div>
+                <div class="contact-verify-panel__grid">
+                  <mifosx-client-contact-otp-block
+                    [clientId]="clientId"
+                    channel="EMAIL"
+                    [destination]="contactChanges.oldEmail"
+                    label="Old Email Address"
+                    (stateChange)="onOldEmailOtpState($event)"
+                  ></mifosx-client-contact-otp-block>
+                  <mifosx-client-contact-otp-block
+                    [clientId]="clientId"
+                    channel="EMAIL"
+                    [destination]="contactChanges.newEmail"
+                    label="New Email Address"
+                    (stateChange)="onNewEmailOtpState($event)"
+                  ></mifosx-client-contact-otp-block>
+                </div>
+              </div>
+            }
+          </div>
+        }
       </div>
     </mat-tab>
 

src/app/clients/edit-client/edit-client.component.scss

@@ -150,6 +150,73 @@
   border: 1px solid #fca5a5 !important;
 }
 
+/* ─── Dual-OTP "Verify Contact Change" panel ─── */
+.contact-verify-panel {
+  margin-top: 20px;
+  padding: 16px 18px;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  background: #eff6ff;
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 14px;
+    color: #1074b9;
+
+    mat-icon {
+      margin-top: 1px;
+      flex-shrink: 0;
+    }
+  }
+
+  &__header-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    font-size: 13.5px;
+    line-height: 1.5;
+    color: #1e3a5f;
+
+    strong {
+      font-size: 14px;
+      font-weight: 700;
+    }
+  }
+
+  &__field-group {
+    &:not(:last-child) {
+      margin-bottom: 18px;
+      padding-bottom: 18px;
+      border-bottom: 1px dashed #bfdbfe;
+    }
+  }
+
+  &__field-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 8px;
+    font-size: 13px;
+    font-weight: 700;
+    color: #1e3a5f;
+
+    mat-icon {
+      font-size: 17px;
+      width: 17px;
+      height: 17px;
+      color: #1074b9;
+    }
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 12px;
+  }
+}
+
 /* ─── Re-KYC Alert Banner ─── */
 .rekyc-alert {
   display: flex;

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

@@ -10,6 +10,7 @@
 import { Component, QueryList, ViewChild, ViewChildren, inject } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -28,6 +29,7 @@ import { ClientDatatableStepComponent } from '../client-stepper/client-datatable
 import { ClientKycStepComponent } from '../client-stepper/client-kyc-step/client-kyc-step.component';
 import { ClientPreviewStepComponent } from '../client-stepper/client-preview-step/client-preview-step.component';
 import { ClientFamilyMembersStepComponent } from '../client-stepper/client-family-members-step/client-family-members-step.component';
+import { ContactOtpBlockComponent, ContactOtpState } from './contact-otp-block/contact-otp-block.component';
 
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatIconModule } from '@angular/material/icon';
@@ -59,7 +61,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     ClientDatatableStepComponent,
     ClientKycStepComponent,
     ClientPreviewStepComponent,
-    ClientFamilyMembersStepComponent
+    ClientFamilyMembersStepComponent,
+    ContactOtpBlockComponent
   ]
 })
 export class EditClientComponent {
@@ -68,6 +71,7 @@ export class EditClientComponent {
   private dialog = inject(MatDialog);
   private clientsService = inject(ClientsService);
   private settingsService = inject(SettingsService);
+  private snackBar = inject(MatSnackBar);
 
   @ViewChild(ClientGeneralStepComponent) clientGeneralStep: ClientGeneralStepComponent;
   @ViewChild('clientAddress') clientAddressStep: ClientAddressStepComponent;
@@ -88,6 +92,26 @@ export class EditClientComponent {
   /** Flag: DOB was changed — requires re-KYC (PAN re-verification) */
   dobChanged = false;
 
+  /**
+   * Dual-OTP contact-change verification state (mobileNo / emailAddress). Mirrors the
+   * name/DOB "detect change against snapshot, gate the save" pattern already established
+   * in this component (see `detectSensitiveFieldChanges()` / `flagReKycRequired()`) —
+   * extended here so a changed mobile/email must be OTP-verified on BOTH the old and new
+   * destination before Save is allowed. Payload param names sent to the backend PUT are
+   * `mobileOldOtpId` / `mobileNewOtpId` / `emailOldOtpId` / `emailNewOtpId` (added onto
+   * `clientData` in `saveCurrentTab()`'s General-tab branch) — kept per-field rather than
+   * one generic old/new pair so mobile AND email can both be changed (and independently
+   * OTP-verified) in a single save.
+   */
+  oldMobileOtpId: number | null = null;
+  newMobileOtpId: number | null = null;
+  oldMobileVerified = false;
+  newMobileVerified = false;
+  oldEmailOtpId: number | null = null;
+  newEmailOtpId: number | null = null;
+  oldEmailVerified = false;
+  newEmailVerified = false;
+
   /** Client data and template (merged object from resolver) */
   clientDataAndTemplate: any;
   /** Client ID */
@@ -168,6 +192,61 @@ export class EditClientComponent {
     return { ...general };
   }
 
+  /**
+   * Live view of `detectSensitiveFieldChanges()` against the loaded snapshot — drives the
+   * "Verify Contact Change" OTP panel in the General tab template. Re-evaluated on every
+   * change-detection pass (cheap: a handful of form-control reads), so the panel appears/
+   * disappears as the user types, same as the existing re-KYC name/DOB detection.
+   */
+  get contactChanges() {
+    return this.detectSensitiveFieldChanges(this.clientDataAndTemplate);
+  }
+
+  /** Whether every OTP block required by the fields that actually changed has been verified. */
+  get contactVerificationComplete(): boolean {
+    const changes = this.contactChanges;
+    if (changes.mobileChanged && !(this.oldMobileVerified && this.newMobileVerified)) {
+      return false;
+    }
+    if (changes.emailChanged && !(this.oldEmailVerified && this.newEmailVerified)) {
+      return false;
+    }
+    return true;
+  }
+
+  onOldMobileOtpState(state: ContactOtpState): void {
+    this.oldMobileOtpId = state.otpId;
+    this.oldMobileVerified = state.verified;
+  }
+
+  onNewMobileOtpState(state: ContactOtpState): void {
+    this.newMobileOtpId = state.otpId;
+    this.newMobileVerified = state.verified;
+  }
+
+  onOldEmailOtpState(state: ContactOtpState): void {
+    this.oldEmailOtpId = state.otpId;
+    this.oldEmailVerified = state.verified;
+  }
+
+  onNewEmailOtpState(state: ContactOtpState): void {
+    this.newEmailOtpId = state.otpId;
+    this.newEmailVerified = state.verified;
+  }
+
+  /** Reset all dual-OTP state — called once a General-tab save succeeds (the snapshot is
+   * updated to match, so the "Verify Contact Change" panel naturally disappears too). */
+  private resetContactVerificationState(): void {
+    this.oldMobileOtpId = null;
+    this.newMobileOtpId = null;
+    this.oldMobileVerified = false;
+    this.newMobileVerified = false;
+    this.oldEmailOtpId = null;
+    this.newEmailOtpId = null;
+    this.oldEmailVerified = false;
+    this.newEmailVerified = false;
+  }
+
   areFormvalids(): boolean {
     if (!this.clientGeneralStep || !this.clientGeneralForm) {
       return false;
@@ -196,7 +275,10 @@ export class EditClientComponent {
     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;
+      // Dual-OTP gate: a changed mobile/email must be verified on both old & new
+      // destinations before Save is allowed — mirrors the re-KYC gate below it.
+      return this.contactVerificationComplete;
     }
     if (idx === 1) {
       const kf = this.clientKycStep?.kycForm;
@@ -227,6 +309,15 @@ export class EditClientComponent {
     if (this.selectedTabIndex === 0 && this.clientGeneralStep?.sanctionsBlocked) {
       return 'Client failed sanctions screening — cannot proceed.';
     }
+    if (this.selectedTabIndex === 0 && this.clientGeneralForm?.valid && !this.contactVerificationComplete) {
+      return 'Verify the OTP sent to both the old and new mobile number/email before saving.';
+    }
+    if (this.selectedTabIndex === 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.';
   }
 
@@ -272,6 +363,16 @@ export class EditClientComponent {
     // Check if name or DOB changed on the General tab — warn about re-KYC
     if (this.selectedTabIndex === 0) {
       const changes = this.detectSensitiveFieldChanges(this.clientDataAndTemplate);
+
+      // Dual-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.
+      if (!this.contactVerificationComplete) {
+        this.snackBar.open('Verify the OTP sent to both the old and new mobile number/email before saving.', 'Close', {
+          duration: 5000
+        });
+        return;
+      }
+
       if (changes.nameChanged || changes.dobChanged) {
         heading = 'Re-KYC Required';
         dialogContext =
@@ -308,6 +409,19 @@ export class EditClientComponent {
       const originalData = this.clientDataAndTemplate;
       const changedFields = this.detectSensitiveFieldChanges(originalData);
 
+      // Dual-OTP verified ids — sent only for the field(s) that actually changed, per-field
+      // (not a single generic old/new pair) so the backend can tell mobile's OTPs apart from
+      // email's when BOTH changed in the same save. See the class-level JSDoc above the OTP
+      // state fields for the full naming rationale.
+      if (changedFields.mobileChanged) {
+        clientData.mobileOldOtpId = this.oldMobileOtpId;
+        clientData.mobileNewOtpId = this.newMobileOtpId;
+      }
+      if (changedFields.emailChanged) {
+        clientData.emailOldOtpId = this.oldEmailOtpId;
+        clientData.emailNewOtpId = this.newEmailOtpId;
+      }
+
       this.savingClient = true;
       this.clientsService.updateClient(this.clientId, clientData).subscribe({
         next: () => {
@@ -342,6 +456,14 @@ export class EditClientComponent {
             originalData.fullname = form?.get('fullname')?.value ?? originalData.fullname;
           }
 
+          // Notification is backend-driven (SMS + Email) — just reassure staff it happened.
+          if (changedFields.mobileChanged || changedFields.emailChanged) {
+            this.snackBar.open('Customer notified via SMS/Email of the contact change.', 'Close', {
+              duration: 4000
+            });
+          }
+          this.resetContactVerificationState();
+
           this.selectedTabIndex = this.selectedTabIndex + 1;
         },
         error: () => {
@@ -430,12 +552,14 @@ export class EditClientComponent {
       return;
     }
 
-    // Address tab
+    // Address tab — no OTP gate (an address has no "old/new channel" to verify an OTP
+    // against); notification-only, per the plan. Save proceeds normally.
     const addressTabIdx = this.legalFormType === 2 ? 3 : 2;
     if (tabIndex === addressTabIdx) {
       this.savingClient = true;
       if (this.clientIndiaAddressStep?.hasAddressData) {
         this.saveClientAddresses(this.clientId);
+        this.snackBar.open('Customer notified via SMS/Email of the address change.', 'Close', { duration: 4000 });
       }
       this.savingClient = false;
       this.tabEditMode[tabIndex] = false;
@@ -465,20 +589,41 @@ export class EditClientComponent {
   /**
    * Compare current form values with original data to detect changes in name, DOB, mobile, email.
    */
+  /** "YYYY-MM-DD" built from a Date's LOCAL components — see the timezone-safety note where
+   * this is called from `detectSensitiveFieldChanges()`. */
+  private toLocalDateString(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+
   private detectSensitiveFieldChanges(originalData: any) {
     const form = this.clientGeneralForm;
-    const newMobile = form?.get('mobileNo')?.value || '';
+    // Trimmed so browser autofill adding invisible leading/trailing whitespace never reads as
-    const newEmail = form?.get('emailAddress')?.value || '';
+    // a "change" — the masked preview shown in the Verify Contact Change panel only reveals the
+    // first couple of characters, so a whitespace-only difference is otherwise invisible to the
+    // user and just looks like the panel appeared for no reason. These trimmed-but-original-case
+    // values are what get returned/sent as the actual OTP destination and saved value — only the
+    // *comparison* (below) is further case-normalized for email, so we never silently rewrite the
+    // customer's email casing into the saved record or the OTP destination.
+    const newMobile = (form?.get('mobileNo')?.value || '').trim();
+    const newEmail = (form?.get('emailAddress')?.value || '').trim();
     const newDobRaw = form?.get('dateOfBirth')?.value;
-    const newDob = newDobRaw instanceof Date ? newDobRaw.toISOString().split('T')[0] : newDobRaw || '';
+    // Local calendar date, NOT `.toISOString()` — that converts to UTC first, which silently
+    // shifts the date by a day in any positive-UTC-offset timezone (e.g. India, UTC+5:30:
+    // midnight local on the 15th becomes 18:30 UTC on the 14th). That made this comparison
+    // report a DOB "change" — falsely triggering the Re-KYC dialog — even when the user never
+    // touched the date field, purely because the Date object round-tripped through the picker.
+    const newDob = newDobRaw instanceof Date ? this.toLocalDateString(newDobRaw) : newDobRaw || '';
 
-    const oldMobile = originalData.mobileNo || '';
+    const oldMobile = (originalData.mobileNo || '').trim();
-    const oldEmail = originalData.emailAddress || '';
+    const oldEmail = (originalData.emailAddress || '').trim();
     const oldDobRaw = originalData.dateOfBirth;
     const oldDob = Array.isArray(oldDobRaw)
       ? `${oldDobRaw[0]}-${String(oldDobRaw[1]).padStart(2, '0')}-${String(oldDobRaw[2]).padStart(2, '0')}`
       : oldDobRaw instanceof Date
-        ? oldDobRaw.toISOString().split('T')[0]
+        ? this.toLocalDateString(oldDobRaw)
         : oldDobRaw || '';
 
     const buildName = (parts: { firstname?: string; middlename?: string; lastname?: string; fullname?: string }) =>
@@ -509,7 +654,9 @@ export class EditClientComponent {
     return {
       nameChanged: newName !== oldName,
       mobileChanged: newMobile !== oldMobile,
-      emailChanged: newEmail !== oldEmail,
+      // Case-insensitive: emails are not case-sensitive in practice, and comparing raw case
+      // would flag a change (surfacing the dual-OTP panel) even when nothing meaningful changed.
+      emailChanged: newEmail.toLowerCase() !== oldEmail.toLowerCase(),
       dobChanged: newDob !== oldDob,
       oldName,
       newName,

src/app/core/authentication/authentication.service.ts

@@ -281,12 +281,8 @@ export class AuthenticationService {
           message: 'Your password has expired, please reset your password!'
         });
       } else {
-        this.setCredentials(credentials);
+        this.credentials = credentials;
-        this.alertService.alert({
+        this.finalizeLogin();
-          type: 'Authentication Success',
-          message: `${credentials.username} successfully logged in!`
-        });
-        delete this.credentials;
       }
     }
   }
@@ -554,14 +550,58 @@ export class AuthenticationService {
         message: 'Your password has expired, please reset your password!'
       });
     } else {
+      this.storage.setItem(this.twoFactorAuthenticationTokenStorageKey, JSON.stringify(response));
+      this.finalizeLogin();
+    }
+  }
+
+  /**
+   * Runs after primary login (and 2FA, if the account has it enrolled) succeeds. Every user must
+   * accept the bank's current agreement/disclaimer at least once — checks that here and either
+   * finishes the login immediately (already accepted, or nothing published yet) or fires an alert
+   * so `login.component.ts` can show the accept dialog.
+   */
+  private finalizeLogin(): void {
+    this.http.get<{ accepted: boolean }>('/useragreements/active/status').subscribe({
+      next: (status) => {
+        if (status?.accepted) {
+          this.completeAuthentication();
+        } else {
+          this.alertService.alert({
+            type: 'Agreement Acceptance Required',
+            message: 'Please review and accept the agreement to continue.'
+          });
+        }
+      },
+      // Don't let an agreement-status hiccup block login entirely.
+      error: () => this.completeAuthentication()
+    });
+  }
+
+  /** Finishes the login: persists credentials and fires the existing 'Authentication Success' alert. */
+  private completeAuthentication(): void {
     this.setCredentials(this.credentials);
     this.alertService.alert({
       type: 'Authentication Success',
       message: `${this.credentials.username} successfully logged in!`
     });
     delete this.credentials;
-      this.storage.setItem(this.twoFactorAuthenticationTokenStorageKey, JSON.stringify(response));
   }
+
+  /** Fetches the active agreement's text for display, when the current user hasn't accepted it yet. */
+  getAgreementStatus(): Observable<{
+    accepted: boolean;
+    id?: number;
+    version?: number;
+    title?: string;
+    body?: string;
+  }> {
+    return this.http.get<any>('/useragreements/active/status');
+  }
+
+  /** Records the current user's acceptance of the active agreement, then finishes the login. */
+  acceptActiveAgreement(): Observable<void> {
+    return this.http.post<any>('/useragreements/active/accept', {}).pipe(map(() => this.completeAuthentication()));
   }
 
   /**

src/app/login/agreement-accept/agreement-accept.component.html

@@ -0,0 +1,71 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="aga-card">
+  <div class="aga-icon">
+    <fa-icon icon="file-signature"></fa-icon>
+  </div>
+
+  <h2 class="aga-title">Terms &amp; Agreement</h2>
+  <p class="aga-sub">
+    @if (loading) {
+      Loading the agreement…
+    } @else if (loadErrorMessage) {
+      We couldn't load the agreement.
+    } @else {
+      Please read the agreement below before continuing.
+    }
+  </p>
+
+  @if (loading) {
+    <div class="aga-loading">
+      <mat-spinner diameter="32"></mat-spinner>
+    </div>
+  } @else if (loadErrorMessage) {
+    <div class="aga-error">
+      <fa-icon icon="exclamation-circle"></fa-icon>
+      {{ loadErrorMessage }}
+    </div>
+    <button type="button" class="aga-btn aga-btn--ghost" (click)="loadAgreement()">
+      <fa-icon icon="sync-alt"></fa-icon>
+      <span>Try Again</span>
+    </button>
+  } @else {
+    <div class="aga-agreement">
+      <h3 class="aga-agreement__title">{{ agreementTitle }}</h3>
+      <div class="aga-agreement__body">{{ agreementBody }}</div>
+    </div>
+
+    <label class="aga-check">
+      <input type="checkbox" [checked]="accepted" (change)="toggleAccepted()" />
+      <span>I have read and agree to the above</span>
+    </label>
+
+    @if (submitErrorMessage) {
+      <div class="aga-error">
+        <fa-icon icon="exclamation-circle"></fa-icon>
+        {{ submitErrorMessage }}
+      </div>
+    }
+
+    <button
+      type="button"
+      class="aga-btn aga-btn--primary"
+      [disabled]="!accepted || submitting"
+      (click)="acceptAndContinue()"
+    >
+      @if (submitting) {
+        <mat-spinner diameter="20"></mat-spinner>
+        <span>Submitting…</span>
+      } @else {
+        <fa-icon icon="check-circle"></fa-icon>
+        <span>Accept &amp; Continue</span>
+      }
+    </button>
+  }
+</div>

src/app/login/agreement-accept/agreement-accept.component.scss

@@ -0,0 +1,221 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+:host {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  animation: aga-fade 0.4s ease-out;
+}
+
+.aga-card {
+  width: 100%;
+  max-width: 460px;
+  padding: 20px 24px 24px;
+  border-radius: 20px;
+  background: linear-gradient(180deg, rgb(255 255 255 / 7%) 0%, rgb(255 255 255 / 4%) 100%);
+  border: 1px solid rgb(255 255 255 / 14%);
+  backdrop-filter: blur(12px);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  box-shadow:
+    0 30px 60px rgb(0 0 0 / 35%),
+    0 10px 24px rgb(0 0 0 / 22%),
+    inset 0 1px 0 rgb(255 255 255 / 8%);
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.aga-icon {
+  align-self: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26px;
+  box-shadow:
+    0 10px 28px rgb(37 99 235 / 45%),
+    0 0 0 1px rgb(255 255 255 / 10%),
+    inset 0 1px 0 rgb(255 255 255 / 25%);
+  margin-bottom: 14px;
+}
+
+.aga-title {
+  margin: 0 0 6px;
+  text-align: center;
+  font-size: 19px;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 0.2px;
+}
+
+.aga-sub {
+  margin: 0 0 18px;
+  text-align: center;
+  font-size: 13px;
+  color: rgb(255 255 255 / 65%);
+}
+
+.aga-loading {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+}
+
+.aga-agreement {
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+  border-radius: 12px;
+  background: rgb(255 255 255 / 5%);
+  border: 1px solid rgb(255 255 255 / 10%);
+
+  &__title {
+    margin: 0 0 8px;
+    font-size: 14px;
+    font-weight: 700;
+    color: #fff;
+  }
+
+  &__body {
+    font-size: 13px;
+    line-height: 1.6;
+    color: rgb(255 255 255 / 78%);
+    white-space: pre-wrap;
+  }
+}
+
+.aga-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 16px;
+  font-size: 13px;
+  color: rgb(255 255 255 / 80%);
+  cursor: pointer;
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  input[type='checkbox'] {
+    margin-top: 2px;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    accent-color: #2563eb;
+  }
+}
+
+.aga-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  margin-bottom: 14px;
+  border-radius: 10px;
+  background: rgb(239 68 68 / 14%);
+  border: 1px solid rgb(239 68 68 / 35%);
+  color: #fecaca;
+  font-size: 12.5px;
+
+  fa-icon {
+    font-size: 13px;
+    color: #fca5a5;
+  }
+}
+
+.aga-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 48px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  cursor: pointer;
+  transition:
+    background 0.18s,
+    box-shadow 0.18s,
+    transform 0.18s,
+    opacity 0.18s;
+  border: 1px solid transparent;
+
+  fa-icon {
+    font-size: 14px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &--primary {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 60%, #1e3a8a 100%);
+    color: #fff;
+    box-shadow:
+      0 10px 24px rgb(37 99 235 / 38%),
+      0 0 0 1px rgb(255 255 255 / 6%),
+      inset 0 1px 0 rgb(255 255 255 / 22%);
+
+    fa-icon {
+      filter: drop-shadow(0 1px 2px rgb(0 0 0 / 25%));
+    }
+
+    &:hover:not(:disabled) {
+      transform: translateY(-1px);
+      background: linear-gradient(135deg, #4f8ff7 0%, #2563eb 60%, #1e3a8a 100%);
+      box-shadow:
+        0 14px 28px rgb(37 99 235 / 48%),
+        0 0 0 1px rgb(255 255 255 / 8%),
+        inset 0 1px 0 rgb(255 255 255 / 26%);
+    }
+  }
+
+  &--ghost {
+    background: transparent;
+    color: rgb(255 255 255 / 80%);
+    border-color: rgb(255 255 255 / 18%);
+
+    &:hover:not(:disabled) {
+      background: rgb(255 255 255 / 8%);
+      color: #fff;
+      border-color: rgb(255 255 255 / 30%);
+    }
+  }
+
+  mat-spinner ::ng-deep circle {
+    stroke: #fff !important;
+  }
+}
+
+@keyframes aga-fade {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (width <= 480px) {
+  .aga-card {
+    padding: 18px 16px 20px;
+  }
+}

src/app/login/agreement-accept/agreement-accept.component.ts

@@ -0,0 +1,91 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/** Angular Imports */
+import { Component, OnInit, inject } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+
+/** rxjs Imports */
+import { finalize } from 'rxjs/operators';
+
+/** Custom Services */
+import { AuthenticationService } from '../../core/authentication/authentication.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/**
+ * Shown right after a successful login (OTP included, if the account has it enrolled) when the
+ * signed-in user hasn't yet accepted the bank's current agreement/disclaimer. Non-dismissable —
+ * mirrors TwoFactorAuthenticationComponent's dialog posture.
+ */
+@Component({
+  selector: 'mifosx-agreement-accept',
+  templateUrl: './agreement-accept.component.html',
+  styleUrls: ['./agreement-accept.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatProgressSpinner,
+    FaIconComponent
+  ]
+})
+export class AgreementAcceptComponent implements OnInit {
+  private authenticationService = inject(AuthenticationService);
+  public dialogRef = inject(MatDialogRef<AgreementAcceptComponent>);
+
+  loading = true;
+  loadErrorMessage = '';
+
+  agreementTitle = '';
+  agreementBody = '';
+  accepted = false;
+
+  submitting = false;
+  submitErrorMessage = '';
+
+  ngOnInit(): void {
+    this.loadAgreement();
+  }
+
+  loadAgreement(): void {
+    this.loading = true;
+    this.loadErrorMessage = '';
+    this.authenticationService
+      .getAgreementStatus()
+      .pipe(finalize(() => (this.loading = false)))
+      .subscribe({
+        next: (status) => {
+          this.agreementTitle = status?.title || '';
+          this.agreementBody = status?.body || '';
+        },
+        error: (err) => {
+          this.loadErrorMessage =
+            err?.error?.defaultUserMessage || err?.error?.message || 'Could not load the agreement.';
+        }
+      });
+  }
+
+  toggleAccepted(): void {
+    this.accepted = !this.accepted;
+  }
+
+  acceptAndContinue(): void {
+    if (!this.accepted || this.submitting) return;
+    this.submitErrorMessage = '';
+    this.submitting = true;
+    this.authenticationService
+      .acceptActiveAgreement()
+      .pipe(finalize(() => (this.submitting = false)))
+      .subscribe({
+        error: (err) => {
+          this.submitErrorMessage =
+            err?.error?.defaultUserMessage || err?.error?.message || 'Could not record your acceptance.';
+        }
+      });
+  }
+}

src/app/login/login.component.html

@@ -247,13 +247,13 @@
       </div>
 
       <!-- Login Forms -->
-      @if (!resetPassword && !twoFactorAuthenticationRequired) {
+      @if (!resetPassword && !twoFactorAuthenticationRequired && !agreementAcceptanceRequired) {
         <mifosx-login-form></mifosx-login-form>
       }
       @if (resetPassword) {
         <mifosx-reset-password></mifosx-reset-password>
       }
-      <!-- 2FA opens as a non-dismissable dialog from login.component.ts -->
+      <!-- 2FA and the post-login agreement dialog open as non-dismissable dialogs from login.component.ts -->
 
       <div class="right-footer">RBI Licensed · PCI-DSS Compliant · ISO 27001 Certified</div>
     </div>

src/app/login/login.component.ts

@@ -43,6 +43,7 @@ import { TenantSelectorComponent } from '../shared/tenant-selector/tenant-select
 import { LoginFormComponent } from './login-form/login-form.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
 import { TwoFactorAuthenticationComponent } from './two-factor-authentication/two-factor-authentication.component';
+import { AgreementAcceptComponent } from './agreement-accept/agreement-accept.component';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
@@ -85,6 +86,7 @@ import { AuthenticationService } from '../core/authentication/authentication.ser
     LoginFormComponent,
     ResetPasswordComponent,
     TwoFactorAuthenticationComponent,
+    AgreementAcceptComponent,
     MatMenuTrigger,
     FaIconComponent,
     MatMenu,
@@ -220,6 +222,7 @@ export class LoginComponent implements OnInit, OnDestroy {
   private themingService = inject(ThemingService);
   private dialog = inject(MatDialog);
   private twoFactorDialogRef: MatDialogRef<TwoFactorAuthenticationComponent> | null = null;
+  private agreementAcceptDialogRef: MatDialogRef<AgreementAcceptComponent> | null = null;
   private router = inject(Router);
   private authService = inject(AuthenticationService);
 
@@ -245,6 +248,8 @@ export class LoginComponent implements OnInit, OnDestroy {
   resetPassword = false;
   /** True if user requires two factor authentication. */
   twoFactorAuthenticationRequired = false;
+  /** True if the signed-in user still needs to accept the current agreement/disclaimer. */
+  agreementAcceptanceRequired = false;
   /** Subscription to alerts. */
   alert$: Subscription;
   logoPath = 'assets/images/cbsnexora-logo.png';
@@ -275,16 +280,24 @@ export class LoginComponent implements OnInit, OnDestroy {
       const alertType = alertEvent.type;
       if (alertType === 'Password Expired') {
         this.twoFactorAuthenticationRequired = false;
+        this.agreementAcceptanceRequired = false;
         this.closeTwoFactorDialog();
+        this.closeAgreementAcceptDialog();
         this.resetPassword = true;
       } else if (alertType === 'Two Factor Authentication Required') {
         this.resetPassword = false;
         this.twoFactorAuthenticationRequired = true;
         this.openTwoFactorDialog();
+      } else if (alertType === 'Agreement Acceptance Required') {
+        this.resetPassword = false;
+        this.agreementAcceptanceRequired = true;
+        this.openAgreementAcceptDialog();
       } else if (alertType === 'Authentication Success') {
         this.resetPassword = false;
         this.twoFactorAuthenticationRequired = false;
+        this.agreementAcceptanceRequired = false;
         this.closeTwoFactorDialog();
+        this.closeAgreementAcceptDialog();
         // Cashier users go directly to the full-screen transaction entry dashboard
         const destination = this.authService.isCashierUser() ? ['/cashier/transaction-entry'] : ['/'];
         this.router.navigate(destination, { replaceUrl: true });
@@ -334,6 +347,7 @@ export class LoginComponent implements OnInit, OnDestroy {
       this.theme$.unsubscribe();
     }
     this.closeTwoFactorDialog();
+    this.closeAgreementAcceptDialog();
     clearInterval(this.slideTimer);
   }
 
@@ -361,6 +375,30 @@ export class LoginComponent implements OnInit, OnDestroy {
     }
   }
 
+  /** Open the post-login agreement acceptance dialog as a non-dismissable modal */
+  private openAgreementAcceptDialog(): void {
+    if (this.agreementAcceptDialogRef) return;
+    this.agreementAcceptDialogRef = this.dialog.open(AgreementAcceptComponent, {
+      width: '460px',
+      maxWidth: '95vw',
+      panelClass: 'tfa-dialog-panel',
+      backdropClass: 'tfa-dialog-backdrop',
+      disableClose: true,
+      autoFocus: 'first-tabbable',
+      restoreFocus: true
+    });
+    this.agreementAcceptDialogRef.afterClosed().subscribe(() => {
+      this.agreementAcceptDialogRef = null;
+    });
+  }
+
+  private closeAgreementAcceptDialog(): void {
+    if (this.agreementAcceptDialogRef) {
+      this.agreementAcceptDialogRef.close();
+      this.agreementAcceptDialogRef = null;
+    }
+  }
+
   goToSlide(index: number): void {
     this.currentSlide = index;
     this.restartSlider();

src/app/shared/icons.module.ts

@@ -166,6 +166,7 @@ import {
   faClipboardList,
   faMap,
   faCamera,
+  faVideo,
   faSlidersH,
   faPrint,
   faCertificate,
@@ -401,6 +402,7 @@ export class IconsModule {
       faClipboardList,
       faMap,
       faCamera,
+      faVideo,
       faSlidersH,
       faPrint,
       faCertificate,

src/app/shared/utils/data-url.util.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/**
+ * Converts a `data:` URL (e.g. produced by `HTMLCanvasElement.toDataURL()` in the
+ * webcam-capture dialog) into a Blob, preserving the embedded MIME type.
+ */
+export function dataUrlToBlob(dataUrl: string): Blob {
+  const [
+    header,
+    base64
+  ] = dataUrl.split(',');
+  const mimeMatch = /data:(.*?);base64/.exec(header || '');
+  const mime = mimeMatch ? mimeMatch[1] : 'image/jpeg';
+  const binary = atob(base64 || '');
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new Blob([bytes], { type: mime });
+}
+
+/**
+ * Converts a `data:` URL into a `File` so it can be routed through the same
+ * upload/crop pipelines used for file-picker input (multipart form posts, the
+ * image-crop dialog, etc).
+ */
+export function dataUrlToFile(dataUrl: string, filename: string): File {
+  const blob = dataUrlToBlob(dataUrl);
+  return new File([blob], filename, { type: blob.type || 'image/jpeg' });
+}

src/app/system/manage-user-agreement/manage-user-agreement.component.html

@@ -0,0 +1,126 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+<div class="ua-page">
+  <!-- LEFT CONTENT COLUMN -->
+  <div class="ua-content">
+    <!-- HERO -->
+    <header class="hero">
+      <div class="hero-text">
+        <div class="eyebrow">COMPLIANCE · CONFIGURATION</div>
+        <h1 class="hero-title">Manage user agreement</h1>
+        <p class="hero-sub">
+          Publish versioned agreement / warning text that new users must read and accept on their first login.
+        </p>
+      </div>
+      <button
+        class="hero-add-btn"
+        (click)="openAdd()"
+        aria-label="Publish new version"
+        *mifosxHasPermission="'CREATE_USERAGREEMENT'"
+      >
+        <mat-icon>add</mat-icon>
+        Publish new version
+      </button>
+    </header>
+
+    @if (loading) {
+      <div class="ua-loading">
+        <mat-icon>hourglass_empty</mat-icon>
+        Loading…
+      </div>
+    } @else if (agreements.length === 0) {
+      <div class="ua-empty">
+        <mat-icon>description</mat-icon>
+        No agreement has been published yet.
+      </div>
+    } @else {
+      <section class="ua-section">
+        <div class="ua-table">
+          <div class="ua-row ua-row--head">
+            <span class="ua-col ua-col--version">Version</span>
+            <span class="ua-col ua-col--title">Title</span>
+            <span class="ua-col ua-col--author">Published by</span>
+            <span class="ua-col ua-col--date">Published on</span>
+            <span class="ua-col ua-col--status">Status</span>
+          </div>
+          @for (item of agreements; track item.id) {
+            <div class="ua-row">
+              <span class="ua-col ua-col--version">v{{ item.version }}</span>
+              <span class="ua-col ua-col--title" [title]="item.title">{{ item.title }}</span>
+              <span class="ua-col ua-col--author">{{ item.createdByUsername || '—' }}</span>
+              <span class="ua-col ua-col--date">{{ item.createdOn || '—' }}</span>
+              <span class="ua-col ua-col--status">
+                <span class="status-pill" [class.is-active]="isActive(item)" [class.is-inactive]="!isActive(item)">
+                  <span class="status-dot"></span>{{ isActive(item) ? 'Active' : 'Superseded' }}
+                </span>
+              </span>
+            </div>
+          }
+        </div>
+      </section>
+    }
+  </div>
+
+  <!-- DRAWER BACKDROP -->
+  <div class="drawer-backdrop" *ngIf="drawerOpen" (click)="closeDrawer()"></div>
+
+  <!-- RIGHT DRAWER -->
+  <aside
+    class="drawer"
+    [class.open]="drawerOpen"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Publish new agreement version"
+  >
+    <div class="drawer-head">
+      <div>
+        <h3 class="drawer-title">Publish new version</h3>
+        <p class="drawer-sub">This will supersede the current active agreement once published.</p>
+      </div>
+      <button class="icon-btn close-btn" (click)="closeDrawer()" aria-label="Close"><mat-icon>close</mat-icon></button>
+    </div>
+
+    <ng-container *ngIf="drawerOpen">
+      <form class="drawer-form" (ngSubmit)="confirmPublish()">
+        <!-- Title -->
+        <div class="field">
+          <label class="field-label" for="titleInput">Title</label>
+          <input
+            id="titleInput"
+            class="text-input"
+            type="text"
+            placeholder="e.g. Acceptable Use Policy v3"
+            [(ngModel)]="model.title"
+            name="title"
+          />
+        </div>
+
+        <!-- Body -->
+        <div class="field">
+          <label class="field-label" for="bodyInput">Agreement text</label>
+          <textarea
+            id="bodyInput"
+            class="text-area"
+            rows="10"
+            placeholder="Full agreement / warning text shown to the user…"
+            [(ngModel)]="model.body"
+            name="body"
+          ></textarea>
+        </div>
+
+        <!-- Actions -->
+        <div class="drawer-actions">
+          <button type="button" class="btn btn-cancel" (click)="closeDrawer()">Cancel</button>
+          <button type="submit" class="btn btn-save" [disabled]="!formValid || saving">
+            {{ saving ? 'Publishing…' : 'Publish' }}
+          </button>
+        </div>
+      </form>
+    </ng-container>
+  </aside>
+</div>

src/app/system/manage-user-agreement/manage-user-agreement.component.scss

@@ -0,0 +1,439 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:host {
+  /* Colors — matches denomination-master's palette for visual consistency across /system */
+  --bg-page: #faf8f4;
+  --bg-card: #fff;
+  --bg-soft: #f2ede0;
+  --border: #ece6d8;
+  --border-strong: #e5e0d6;
+  --text-primary: #1a1a1a;
+  --text-secondary: #5f5c57;
+  --text-muted: #8a867f;
+  --accent-dark: #1a1a1a;
+  --accent-eyebrow: #0f4f3c;
+  --status-active-bg: #e8f3e8;
+  --status-active-text: #1f6f3d;
+  --status-inactive-bg: #f4ede0;
+  --status-inactive-text: #8a6a2e;
+  --r-sm: 8px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  --r-xl: 16px;
+  --r-pill: 999px;
+
+  display: block;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+}
+
+.ua-page {
+  position: relative;
+  min-height: 100%;
+  background: var(--bg-page);
+  padding: 36px 40px;
+  overflow-x: clip;
+}
+
+.ua-content {
+  width: 100%;
+}
+
+/* ---------- HERO ---------- */
+.hero {
+  margin-bottom: 32px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.hero-text {
+  min-width: 0;
+}
+
+.hero-add-btn {
+  flex: 0 0 auto;
+  align-self: flex-start;
+  width: auto;
+  height: 38px;
+  margin-top: 4px;
+  padding: 0 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  border: none;
+  border-radius: var(--r-pill);
+  cursor: pointer;
+  color: #fff;
+  background: linear-gradient(135deg, #1f7a4d 0%, #0f4f3c 100%);
+  box-shadow: 0 4px 14px -4px rgb(15 79 60 / 45%);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    filter 0.15s ease;
+}
+
+.hero-add-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 22px -6px rgb(15 79 60 / 55%);
+  filter: brightness(1.06);
+}
+
+.hero-add-btn mat-icon {
+  font-size: 17px;
+  width: 17px;
+  height: 17px;
+  line-height: 17px;
+}
+
+.eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  color: var(--accent-eyebrow);
+  margin-bottom: 12px;
+}
+
+.hero-title {
+  font-size: 34px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin: 0 0 12px;
+  line-height: 1.1;
+}
+
+.hero-sub {
+  font-size: 15px;
+  color: var(--text-secondary);
+  max-width: 560px;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* ---------- LOADING / EMPTY ---------- */
+.ua-loading,
+.ua-empty {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 40px;
+  color: var(--text-muted);
+  font-size: 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-xl);
+}
+
+/* ---------- TABLE ---------- */
+.ua-section {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-xl);
+  overflow: hidden;
+}
+
+.ua-table {
+  display: flex;
+  flex-direction: column;
+}
+
+.ua-row {
+  display: grid;
+  grid-template-columns: 90px 2fr 1fr 1fr 130px;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &--head {
+    background: var(--bg-soft);
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-muted);
+  }
+}
+
+.ua-col {
+  min-width: 0;
+  font-size: 13.5px;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &--version {
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &--title {
+    font-weight: 500;
+  }
+
+  &--author,
+  &--date {
+    color: var(--text-secondary);
+  }
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 9px;
+  border-radius: var(--r-pill);
+  line-height: 1.4;
+}
+
+.status-pill.is-active {
+  background: var(--status-active-bg);
+  color: var(--status-active-text);
+}
+
+.status-pill.is-inactive {
+  background: var(--status-inactive-bg);
+  color: var(--status-inactive-text);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentcolor;
+  display: inline-block;
+  flex: 0 0 auto;
+}
+
+/* ---------- DRAWER ---------- */
+.drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(26 26 26 / 18%);
+  z-index: 1000;
+  animation: fade-in 0.18s ease;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 460px;
+  background: var(--bg-card);
+  border-left: 1px solid var(--border);
+  padding: 32px 28px;
+  box-shadow: -20px 0 40px -20px rgb(0 0 0 / 18%);
+  overflow-y: auto;
+  z-index: 1001;
+  transform: translateX(100%);
+  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.drawer.open {
+  transform: translateX(0);
+}
+
+.drawer-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.drawer-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.drawer-sub {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 4px 0 0;
+}
+
+.icon-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border);
+  background: var(--bg-page);
+  color: var(--text-secondary);
+  border-radius: var(--r-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background 0.12s ease,
+    color 0.12s ease;
+}
+
+.icon-btn:hover {
+  background: var(--bg-soft);
+  color: var(--text-primary);
+}
+
+.icon-btn mat-icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+}
+
+.drawer-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 24px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.text-input,
+.text-area {
+  box-sizing: border-box;
+  padding: 0 14px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--r-md);
+  background: var(--bg-page);
+  font-size: 14px;
+  color: var(--text-primary);
+  font-family: inherit;
+  width: 100%;
+}
+
+.text-input {
+  height: 42px;
+}
+
+.text-area {
+  padding: 12px 14px;
+  resize: vertical;
+  min-height: 160px;
+  line-height: 1.5;
+}
+
+.text-input:focus,
+.text-area:focus {
+  outline: none;
+  border-color: var(--accent-dark);
+  background: var(--bg-card);
+}
+
+.text-input::placeholder,
+.text-area::placeholder {
+  color: var(--text-muted);
+}
+
+/* drawer actions */
+.drawer-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.btn {
+  flex: 1;
+  height: 42px;
+  padding: 0 18px;
+  border-radius: var(--r-pill);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+}
+
+.btn-cancel {
+  background: var(--bg-card);
+  border: 1px solid var(--border-strong);
+  color: var(--text-primary);
+}
+
+.btn-save {
+  background: var(--accent-dark);
+  border: 1px solid var(--accent-dark);
+  color: var(--bg-page);
+}
+
+.btn-save:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* ---------- RESPONSIVE ---------- */
+@media (width <= 1100px) {
+  .drawer {
+    width: min(460px, 90vw);
+  }
+}
+
+@media (width <= 820px) {
+  .hero {
+    flex-direction: column;
+  }
+
+  .ua-row {
+    grid-template-columns: 70px 2fr 1fr 110px;
+  }
+
+  .ua-col--author {
+    display: none;
+  }
+}

src/app/system/manage-user-agreement/manage-user-agreement.component.ts

@@ -0,0 +1,135 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { Component, OnInit, HostListener, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatIconModule } from '@angular/material/icon';
+import { forkJoin } from 'rxjs';
+import { UserAgreementService, UserAgreement } from './user-agreement.service';
+import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+import { HasPermissionDirective } from 'app/directives/has-permission/has-permission.directive';
+
+@Component({
+  selector: 'mifosx-manage-user-agreement',
+  templateUrl: './manage-user-agreement.component.html',
+  styleUrls: ['./manage-user-agreement.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatIconModule,
+    HasPermissionDirective
+  ]
+})
+export class ManageUserAgreementComponent implements OnInit {
+  private service = inject(UserAgreementService);
+  private dialog = inject(MatDialog);
+  private snackBar = inject(MatSnackBar);
+
+  agreements: UserAgreement[] = [];
+  activeId: number | null = null;
+  loading = true;
+
+  drawerOpen = false;
+  saving = false;
+
+  model = {
+    title: '',
+    body: ''
+  };
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.loading = true;
+    forkJoin({
+      all: this.service.getAll(),
+      active: this.service.getActive()
+    }).subscribe({
+      next: ({ all, active }) => {
+        this.agreements = (all || []).slice().sort((a, b) => b.version - a.version);
+        this.activeId = active?.id ?? null;
+        this.loading = false;
+      },
+      error: () => {
+        this.loading = false;
+      }
+    });
+  }
+
+  isActive(item: UserAgreement): boolean {
+    return item.isActive === true || (this.activeId != null && item.id === this.activeId);
+  }
+
+  // ---- drawer ----
+  openAdd(): void {
+    this.model = { title: '', body: '' };
+    this.drawerOpen = true;
+  }
+
+  closeDrawer(): void {
+    if (this.saving) return;
+    this.drawerOpen = false;
+  }
+
+  get formValid(): boolean {
+    return this.model.title.trim().length > 0 && this.model.body.trim().length > 0;
+  }
+
+  @HostListener('document:keydown.escape')
+  onEsc(): void {
+    if (this.drawerOpen) this.closeDrawer();
+  }
+
+  /** Publishing deactivates whatever is currently active — confirm before doing it. */
+  confirmPublish(): void {
+    if (!this.formValid || this.saving) return;
+    const ref = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        heading: 'Publish New Agreement',
+        dialogContext:
+          'Publishing this version will immediately supersede the current active agreement — every ' +
+          'new first-login user will be shown this version instead. Continue?',
+        type: 'warn'
+      }
+    });
+    ref.afterClosed().subscribe((response: any) => {
+      if (!response?.confirm) return;
+      this.publish();
+    });
+  }
+
+  private publish(): void {
+    this.saving = true;
+    this.service
+      .create({
+        title: this.model.title.trim(),
+        body: this.model.body
+      })
+      .subscribe({
+        next: () => {
+          this.snackBar.open('Agreement published', 'Close', { duration: 3000 });
+          this.saving = false;
+          this.drawerOpen = false;
+          this.load();
+        },
+        error: (err: any) => {
+          this.saving = false;
+          const message =
+            err?.error?.defaultUserMessage || err?.error?.errors?.[0]?.defaultUserMessage || 'Could not publish.';
+          this.snackBar.open(message, 'Close', { duration: 5000 });
+        }
+      });
+  }
+}

src/app/system/manage-user-agreement/user-agreement.service.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+/** A single published version of the bank's user agreement/warning text. */
+export interface UserAgreement {
+  id: number;
+  version: number;
+  title: string;
+  body: string;
+  isActive?: boolean;
+  createdByUsername?: string;
+  createdOn?: string | number[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class UserAgreementService {
+  private http = inject(HttpClient);
+
+  /** List all published versions, newest first. */
+  getAll(): Observable<UserAgreement[]> {
+    return this.http.get<UserAgreement[]>('/useragreements');
+  }
+
+  /** The currently-active version — the one new users must accept. */
+  getActive(): Observable<UserAgreement> {
+    return this.http.get<UserAgreement>('/useragreements/active');
+  }
+
+  /** Publish a new version. The backend deactivates the previous active row automatically. */
+  create(data: { title: string; body: string }): Observable<{ resourceId: number }> {
+    return this.http.post<{ resourceId: number }>('/useragreements', data);
+  }
+}

src/app/system/system-routing.module.ts

@@ -57,6 +57,7 @@ import { SystemComponent } from './system.component';
 import { SystemInformationComponent } from './system-information/system-information.component';
 import { AboutUsComponent } from './about-us/about-us.component';
 import { DenominationMasterComponent } from './denomination-master/denomination-master.component';
+import { ManageUserAgreementComponent } from './manage-user-agreement/manage-user-agreement.component';
 
 /** Custom Resolvers */
 import { AccountNumberPreferencesResolver } from './account-number-preferences/account-number-preferences.resolver';
@@ -625,6 +626,16 @@ const routes: Routes = [
               component: DenominationMasterComponent
             }
           ]
+        },
+        {
+          path: 'user-agreement',
+          data: { title: 'Manage User Agreement', breadcrumb: 'Manage User Agreement' },
+          children: [
+            {
+              path: '',
+              component: ManageUserAgreementComponent
+            }
+          ]
         }
       ]
     }

src/app/system/system.component.html

@@ -218,6 +218,20 @@
       <i class="fas fa-chevron-right sys-card__arrow"></i>
     </a>
 
+    <!-- Manage User Agreement -->
+    <a class="sys-card" [routerLink]="['user-agreement']" *mifosxHasPermission="'READ_USERAGREEMENT'">
+      <div class="sys-card__icon sys-card__icon--emerald">
+        <i class="fas fa-file-contract"></i>
+      </div>
+      <div class="sys-card__body">
+        <h3 class="sys-card__title">{{ 'labels.heading.Manage User Agreement' | translate }}</h3>
+        <p class="sys-card__desc">
+          {{ 'labels.text.Publish versioned agreement text new users must accept on first login' | translate }}
+        </p>
+      </div>
+      <i class="fas fa-chevron-right sys-card__arrow"></i>
+    </a>
+
     <!-- System Information -->
     <a class="sys-card" [routerLink]="['system-information']">
       <div class="sys-card__icon sys-card__icon--teal">

src/app/users/create-user/create-user.component.html

@@ -124,6 +124,19 @@
               <mat-error>Enter a valid <strong>10-digit mobile number</strong></mat-error>
             }
           </mat-form-field>
+
+          <div class="cu-checkbox-row cu-field--full">
+            <div>
+              <label class="cu-radio-label">OTP Delivery Method *</label>
+              <mat-radio-group formControlName="otpDeliveryMethod">
+                <mat-radio-button value="EMAIL">Email</mat-radio-button>
+                <mat-radio-button value="SMS">Mobile</mat-radio-button>
+              </mat-radio-group>
+              @if (userForm.controls.otpDeliveryMethod.hasError('required')) {
+                <mat-error>Choose how this user will receive their first-login OTP.</mat-error>
+              }
+            </div>
+          </div>
         </div>
       </div>
 

src/app/users/create-user/create-user.component.scss

@@ -166,6 +166,14 @@ $gray-900: #202124;
   }
 }
 
+.cu-radio-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: $gray-700;
+  margin-bottom: 6px;
+}
+
 .cu-error {
   grid-column: 1 / -1;
   color: #dc2626;

src/app/users/create-user/create-user.component.ts

@@ -29,6 +29,7 @@ import { ConfigurationWizardService } from 'app/configuration-wizard/configurati
 import { ContinueSetupDialogComponent } from 'app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatIcon } from '@angular/material/icon';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -41,7 +42,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     MatCheckbox,
-    MatIcon
+    MatIcon,
+    MatRadioGroup,
+    MatRadioButton
   ]
 })
 export class CreateUserComponent implements OnInit, AfterViewInit {
@@ -142,6 +145,10 @@ export class CreateUserComponent implements OnInit, AfterViewInit {
         roles: [
           '',
           Validators.required
+        ],
+        otpDeliveryMethod: [
+          '',
+          Validators.required
         ]
       },
       { validator: confirmPasswordValidator }

src/app/users/user-form-dialog/user-form-dialog.component.html

@@ -72,6 +72,27 @@
             }
           </div>
         </div>
+
+        @if (!isEdit) {
+          <div class="ufd-field">
+            <label>OTP Delivery Method *</label>
+            <div class="ufd-otp-methods" role="radiogroup" aria-label="OTP Delivery Method">
+              <label class="ufd-otp-method" [class.is-selected]="form.value.otpDeliveryMethod === 'EMAIL'">
+                <input type="radio" formControlName="otpDeliveryMethod" value="EMAIL" />
+                <fa-icon icon="envelope"></fa-icon>
+                <span>Email</span>
+              </label>
+              <label class="ufd-otp-method" [class.is-selected]="form.value.otpDeliveryMethod === 'SMS'">
+                <input type="radio" formControlName="otpDeliveryMethod" value="SMS" />
+                <fa-icon icon="mobile-alt"></fa-icon>
+                <span>Mobile</span>
+              </label>
+            </div>
+            @if (form.get('otpDeliveryMethod')?.touched && form.get('otpDeliveryMethod')?.errors?.['required']) {
+              <div class="ufd-err">Choose how this user will receive their OTP.</div>
+            }
+          </div>
+        }
       </div>
 
       <!-- Office mapping -->

src/app/users/user-form-dialog/user-form-dialog.component.scss

@@ -126,6 +126,12 @@ $purple: #7c3aed;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px 14px;
+
+  // A field placed right after the grid (e.g. OTP Delivery Method, which spans full width
+  // and isn't part of the 2-column layout) needs its own breathing room above it.
+  + .ufd-field {
+    margin-top: 12px;
+  }
 }
 
 .ufd-field {
@@ -268,6 +274,57 @@ $purple: #7c3aed;
   }
 }
 
+.ufd-otp-methods {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.ufd-otp-method {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid #cbd5e1;
+  background: #fff;
+  border-radius: 999px;
+  color: #475569;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.12s;
+
+  fa-icon {
+    font-size: 12px;
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  input[type='radio'] {
+    // Visually hidden but still focusable/clickable for accessibility - the pill itself
+    // carries the selected state via .is-selected, matching .ufd-role's pattern.
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &:hover {
+    border-color: #94a3b8;
+    color: $navy;
+  }
+
+  &.is-selected {
+    background: rgb(30 136 229 / 12%);
+    border-color: $blue;
+    color: $blue-d;
+
+    fa-icon {
+      color: $blue;
+    }
+  }
+}
+
 .ufd-hint {
   display: flex;
   align-items: center;

src/app/users/user-form-dialog/user-form-dialog.component.ts

@@ -160,7 +160,11 @@ export class UserFormDialogComponent implements OnInit {
         Validators.required
       ],
       passwordNeverExpires: [false],
-      sendPasswordToEmail: [true]
+      sendPasswordToEmail: [true],
+      otpDeliveryMethod: [
+        '',
+        Validators.required
+      ]
     });
   }
 
@@ -174,6 +178,9 @@ export class UserFormDialogComponent implements OnInit {
         const selectedRoleIds = (u?.selectedRoles || []).map((r: any) => r.id);
         // Edit mode never asks about password — strip those controls.
         this.form.removeControl('sendPasswordToEmail');
+        // OTP delivery method is a create-only concept (first-login gate) — changing an
+        // existing user's channel post-creation is out of scope for this phase.
+        this.form.removeControl('otpDeliveryMethod');
         this.form.patchValue({
           username: u.username,
           firstname: u.firstname,