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

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

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

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

src/app/clients/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">
-  <h1 mat-dialog-title align="center">{{ 'labels.heading.Capture Client Image' | translate }}</h1>
+<div class="layout-column gap-2px capture-dialog">
+  <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()">
-        {{ 'labels.buttons.Capture' | translate }}
+      <button #captureButton mat-stroked-button color="primary" class="capture-btn" (click)="capture()">
+        <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: auto;
-  object-fit: contain;
-  border-radius: 4px;
-  background-color: colors.$black;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+
+  /* 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 = {
-        width: { ideal: 640 },
-        height: { ideal: 480 },
-        facingMode: 'user'
-      };
+      // Signature capture asks for a wide/short (16:9) stream to match the frame it's shown
+      // in — requesting an aspect ratio close to what the CSS box actually renders avoids the
+      // camera negotiating a 4:3 stream that then gets pillarboxed (black bars) inside a 16:9 box.
+      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 '';
+  }
+}