Revert demo to pre-2026-08-06 state (rollback today's push)

Reverts all commits pushed to demo today (a5124ca3, 858c277a, a1a50ab8,
f72abb09, fcf66657) back to f8c532f7 as a single forward commit, without
rewriting history. All reverted content (Share Withdrawal/Closure feature,
TDS reports, KYC exception tracking, client-edit-email-dialog, form121 tab,
search-select) remains intact on dev and was verified identical before
this revert.

.claude/scheduled_tasks.lock

@@ -1 +0,0 @@
-{"sessionId":"67d120b4-ff78-435d-be80-f79482a386b4","pid":19832,"acquiredAt":1778067581856}

angular.json

@@ -69,8 +69,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "13mb",
-                  "maximumError": "14mb"
+                  "maximumWarning": "15mb",
+                  "maximumError": "17mb"
                 },
                 {
                   "type": "anyComponentStyle",

src/app/accounting/search-journal-entry/mark-entry-dialog.component.html

@@ -0,0 +1,70 @@
+<!--
+  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/.
+-->
+
+<h2 class="mk-title" [class.mk-title--str]="isEscalation">
+  <fa-icon [icon]="isEscalation ? 'exclamation-triangle' : 'check-circle'"></fa-icon>
+  {{ isEscalation ? 'Mark as Suspicious' : 'Mark as Whitelisted' }}
+</h2>
+
+<mat-dialog-content>
+  <div class="mk-entry">
+    <div>
+      <label>Journal entry</label><span class="mono">#{{ data.journalEntryId }}</span>
+    </div>
+    <div>
+      <label>Transaction</label><span class="mono">{{ data.transactionId }}</span>
+    </div>
+    <div>
+      <label>Date</label><span>{{ data.transactionDate }}</span>
+    </div>
+    <div>
+      <label>Amount</label><span class="mono">&#8377;{{ data.amount | number: '1.2-2' }}</span>
+    </div>
+    <div class="wide">
+      <label>GL account</label><span>{{ data.glAccountName }}</span>
+    </div>
+  </div>
+
+  @if (isEscalation) {
+    <p class="mk-warn">
+      <fa-icon icon="exclamation-triangle"></fa-icon>
+      This raises an AML alert against the customer behind this entry and escalates it. An STR case opens for the
+      Principal Officer with the seven working day FIU-IND clock running. It cannot be undone from this screen.
+    </p>
+  } @else {
+    <p class="mk-note">
+      Records the entry as reviewed and cleared. No report is filed and the customer's risk rating is untouched.
+    </p>
+  }
+
+  <label class="mk-field">
+    <span>Reviewer notes {{ isEscalation ? '(required)' : '(optional)' }}</span>
+    <textarea
+      rows="4"
+      [(ngModel)]="notes"
+      [placeholder]="
+        isEscalation
+          ? 'Why is this entry suspicious? What did you check?'
+          : 'What satisfied you that this entry is in order?'
+      "
+    ></textarea>
+  </label>
+</mat-dialog-content>
+
+<mat-dialog-actions class="mk-actions">
+  <button class="mk-btn" (click)="dialogRef.close()">Cancel</button>
+  <button
+    class="mk-btn"
+    [class.mk-btn--str]="isEscalation"
+    [class.mk-btn--ok]="!isEscalation"
+    [disabled]="!canSubmit"
+    (click)="confirm()"
+  >
+    {{ isEscalation ? 'Escalate to STR' : 'Whitelist entry' }}
+  </button>
+</mat-dialog-actions>

src/app/accounting/search-journal-entry/mark-entry-dialog.component.scss

@@ -0,0 +1,165 @@
+/**
+ * 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 {
+  --mk-g100: #f1f5f9;
+  --mk-g200: #e2e8f0;
+  --mk-g300: #cbd5e1;
+  --mk-g500: #64748b;
+  --mk-g700: #334155;
+  --mk-g900: #0f172a;
+  --mk-green: #15803d;
+  --mk-red: #c0392b;
+  --mk-amber-l: #fef3c7;
+
+  display: block;
+  font-family: 'DM Sans', system-ui, sans-serif;
+  color: var(--mk-g900);
+  min-width: 460px;
+}
+
+.mk-title {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0;
+  padding: 18px 22px 10px;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--mk-green);
+
+  &--str {
+    color: var(--mk-red);
+  }
+}
+
+.mk-entry {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 18px;
+  padding: 11px 14px;
+  background: #fff;
+  border: 1px solid var(--mk-g200);
+  border-radius: 8px;
+  margin-bottom: 12px;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .wide {
+    grid-column: span 2;
+  }
+
+  label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--mk-g500);
+  }
+
+  span {
+    font-size: 12.5px;
+  }
+}
+
+.mk-warn {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 12px;
+  color: #78350f;
+  background: var(--mk-amber-l);
+  border-radius: 7px;
+  padding: 9px 12px;
+  margin: 0 0 12px;
+}
+
+.mk-note {
+  font-size: 12px;
+  color: var(--mk-g500);
+  margin: 0 0 12px;
+}
+
+.mk-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  span {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--mk-g500);
+  }
+
+  textarea {
+    padding: 9px 11px;
+    border: 1px solid var(--mk-g300);
+    border-radius: 7px;
+    font-size: 13px;
+    font-family: inherit;
+    resize: vertical;
+
+    &:focus {
+      outline: none;
+      border-color: var(--mk-g700);
+    }
+  }
+}
+
+.mk-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 9px;
+  padding: 8px 22px 18px;
+}
+
+.mk-btn {
+  padding: 8px 16px;
+  border: 1px solid var(--mk-g300);
+  background: #fff;
+  border-radius: 8px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--mk-g700);
+  cursor: pointer;
+  font-family: inherit;
+
+  &:hover:not(:disabled) {
+    background: var(--mk-g100);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &--ok {
+    background: var(--mk-green);
+    border-color: var(--mk-green);
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background: #12692f;
+    }
+  }
+
+  &--str {
+    background: var(--mk-red);
+    border-color: var(--mk-red);
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background: #a5301f;
+    }
+  }
+}

src/app/accounting/search-journal-entry/mark-entry-dialog.component.ts

@@ -0,0 +1,63 @@
+/**
+ * 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, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+
+export interface MarkEntryDialogData {
+  disposition: 'WHITELIST' | 'ESCALATE';
+  journalEntryId: number;
+  transactionId: string;
+  amount: number;
+  glAccountName: string;
+  transactionDate: string;
+}
+
+/**
+ * Captures the reviewer's reason before a ledger entry is marked.
+ *
+ * Notes are not optional on an escalation: the Principal Officer picks the case up
+ * with nothing else to go on, and an STR filed on an unexplained referral is not
+ * defensible. A whitelist may be recorded without them.
+ */
+@Component({
+  selector: 'mifosx-mark-entry-dialog',
+  templateUrl: './mark-entry-dialog.component.html',
+  styleUrls: ['./mark-entry-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FormsModule,
+    FaIconComponent,
+    MatDialogContent,
+    MatDialogActions
+  ]
+})
+export class MarkEntryDialogComponent {
+  dialogRef = inject<MatDialogRef<MarkEntryDialogComponent>>(MatDialogRef);
+  data = inject<MarkEntryDialogData>(MAT_DIALOG_DATA);
+
+  notes = '';
+
+  get isEscalation(): boolean {
+    return this.data.disposition === 'ESCALATE';
+  }
+
+  get canSubmit(): boolean {
+    return !this.isEscalation || this.notes.trim().length > 0;
+  }
+
+  confirm(): void {
+    if (this.canSubmit) {
+      this.dialogRef.close(this.notes.trim());
+    }
+  }
+}

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -535,6 +535,14 @@
     </div>
   </div>
 
+  @if (markError) {
+    <div class="gl-mark-error">
+      <fa-icon icon="exclamation-triangle"></fa-icon>
+      <span>{{ markError }}</span>
+      <button class="gl-mark-error__close" (click)="markError = ''">&times;</button>
+    </div>
+  }
+
   <div class="gl-table-shell">
     <mat-table [dataSource]="dataSource" matSort class="gl-mat-table">
       <!-- #ID -->
@@ -692,6 +700,50 @@
         </mat-cell>
       </ng-container>
 
+      <!-- AML review — whitelist or refer the entry to STR -->
+      <ng-container matColumnDef="amlMark">
+        <mat-header-cell *matHeaderCellDef class="gl-th">AML Review</mat-header-cell>
+        <mat-cell *matCellDef="let e" class="gl-td">
+          @if (markOf(e); as mark) {
+            <span
+              class="gl-mark"
+              [class.gl-mark--str]="mark.disposition === 'ESCALATE'"
+              [matTooltip]="
+                (mark.disposition === 'ESCALATE'
+                  ? 'Escalated to STR' + (mark.strCaseId ? ' — case #' + mark.strCaseId : '')
+                  : 'Whitelisted') +
+                (mark.reviewedBy ? ' by ' + mark.reviewedBy : '') +
+                (mark.notes ? ' — ' + mark.notes : '')
+              "
+            >
+              <fa-icon [icon]="mark.disposition === 'ESCALATE' ? 'exclamation-triangle' : 'check-circle'"></fa-icon>
+              {{ mark.disposition === 'ESCALATE' ? 'Suspicious' : 'Whitelisted' }}
+            </span>
+          } @else if (isMarking(e)) {
+            <span class="gl-mark gl-mark--busy">Saving…</span>
+          } @else if (canMark(e)) {
+            <span class="gl-mark-actions">
+              <button
+                class="gl-mark-btn gl-mark-btn--ok"
+                matTooltip="Reviewed and in order — clear this entry"
+                (click)="openMarkDialog(e, 'WHITELIST')"
+              >
+                <fa-icon icon="check-circle"></fa-icon> Whitelist
+              </button>
+              <button
+                class="gl-mark-btn gl-mark-btn--str"
+                matTooltip="Refer to the Principal Officer as an STR case"
+                (click)="openMarkDialog(e, 'ESCALATE')"
+              >
+                <fa-icon icon="exclamation-triangle"></fa-icon> Suspicious
+              </button>
+            </span>
+          } @else {
+            <span class="gl-mark gl-mark--na" [matTooltip]="markBlockedReason(e)">—</span>
+          }
+        </mat-cell>
+      </ng-container>
+
       <!-- Actions -->
       <ng-container matColumnDef="actions">
         <mat-header-cell *matHeaderCellDef class="gl-th"></mat-header-cell>

src/app/accounting/search-journal-entry/search-journal-entry.component.scss

@@ -1328,6 +1328,17 @@
     flex: 0 0 130px;
   }
 
+  // Wide enough to hold both action buttons on one line. Every other column
+  // declares a width; without one this collapsed and clipped its contents.
+  ::ng-deep .mat-column-amlMark {
+    width: 184px;
+    min-width: 184px;
+    flex: 0 0 184px;
+    // Keeps the "AML REVIEW" heading on one line instead of clipping it.
+    white-space: nowrap;
+    overflow: visible;
+  }
+
   ::ng-deep .mat-column-actions {
     width: 50px;
     min-width: 50px;
@@ -1556,6 +1567,112 @@
   }
 }
 
+// ── AML review column ─────────────────────────────────────────────────────────
+// Never wrap — a wrapped second button used to be clipped by the row height.
+.gl-mark-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.gl-mark-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: 1px solid var(--c-border);
+  background: var(--c-surface);
+  border-radius: 6px;
+  font-size: 0.62rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--c-text-2);
+  cursor: pointer;
+  font-family: inherit;
+  white-space: nowrap;
+  flex: 1 1 auto;
+  transition: all var(--transition);
+
+  // Tinted at rest, not only on hover — these have to be findable in a dense
+  // table without the reviewer hunting for them.
+  &--ok {
+    border-color: rgb(16 185 129 / 45%);
+    background: var(--c-cr-bg);
+    color: #047857;
+
+    &:hover {
+      border-color: var(--c-cr);
+      background: #d1fae5;
+    }
+  }
+
+  &--str {
+    border-color: rgb(239 68 68 / 45%);
+    background: var(--c-dr-bg);
+    color: #b91c1c;
+
+    &:hover {
+      border-color: var(--c-dr);
+      background: #fee2e2;
+    }
+  }
+}
+
+.gl-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 9px;
+  border-radius: 999px;
+  font-size: 0.62rem;
+  font-weight: 700;
+  white-space: nowrap;
+  background: var(--c-cr-bg);
+  color: #047857;
+
+  &--str {
+    background: var(--c-dr-bg);
+    color: #b91c1c;
+  }
+
+  &--busy {
+    background: #f1f5f9;
+    color: var(--c-text-3);
+  }
+
+  &--na {
+    background: transparent;
+    color: var(--c-text-3);
+    cursor: help;
+  }
+}
+
+.gl-mark-error {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0 0 10px;
+  padding: 9px 14px;
+  border: 1px solid #fecaca;
+  background: var(--c-dr-bg);
+  border-radius: 8px;
+  font-size: 0.75rem;
+  color: #b91c1c;
+
+  &__close {
+    margin-left: auto;
+    border: 0;
+    background: transparent;
+    font-size: 1.1rem;
+    line-height: 1;
+    color: inherit;
+    cursor: pointer;
+  }
+}
+
 // ── Empty state ───────────────────────────────────────────────────────────────
 .gl-empty {
   display: flex;

src/app/accounting/search-journal-entry/search-journal-entry.component.ts

@@ -41,9 +41,20 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatCardModule } from '@angular/material/card';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatIconModule } from '@angular/material/icon';
+import { MatDialog } from '@angular/material/dialog';
+import { AmlService } from 'app/aml/aml.service';
+import { MarkEntryDialogComponent, MarkEntryDialogData } from './mark-entry-dialog.component';
 
 const STATE_KEY = 'gl_ledger_filter_state';
 
+/** How a ledger entry has been marked by a reviewer, keyed on journal entry id. */
+interface EntryMark {
+  disposition: 'WHITELIST' | 'ESCALATE';
+  strCaseId: number | null;
+  reviewedBy: string;
+  notes: string;
+}
+
 @Component({
   selector: 'mifosx-search-journal-entry',
   standalone: true,
@@ -87,6 +98,8 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView
   private settingsService = inject(SettingsService);
   private dateUtils = inject(Dates);
   private route = inject(ActivatedRoute);
+  private amlService = inject(AmlService);
+  private dialog = inject(MatDialog);
 
   // ── Misc ──────────────────────────────────────────────────────────────────
   minDate = new Date(2000, 0, 1);
@@ -129,6 +142,7 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView
     'manualEntry',
     'createdByUserName',
     'submittedOnDate',
+    'amlMark',
     'actions'
   ];
   dayWiseColumns = [
@@ -157,6 +171,14 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView
   dayWiseData: any[] = [];
   glAccountInfo: any = null;
 
+  // ── AML marking ───────────────────────────────────────────────────────────
+
+  /** Marks already recorded, by journal entry id. */
+  private marks = new Map<number, EntryMark>();
+  /** Entry ids with a request in flight, so a row cannot be double-submitted. */
+  private marking = new Set<number>();
+  markError = '';
+
   // ── UI state ──────────────────────────────────────────────────────────────
   activeQuickFilter = '';
   activeFiltersCount = 0;
@@ -212,6 +234,103 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView
     this.setFilteredOffices();
     this.getJournalEntries();
     this.loadLedgerSummary();
+    this.loadMarks();
+  }
+
+  // ── AML marking ───────────────────────────────────────────────────────────
+
+  /**
+   * Marks are loaded once for the whole ledger rather than per page, because the
+   * user pages and re-filters constantly and the set is small — only entries a
+   * reviewer has actually touched.
+   */
+  private loadMarks(): void {
+    this.amlService.getManualReferrals().subscribe({
+      next: (rows) => {
+        this.marks = new Map(
+          (rows || []).map((r: any) => [
+            r.journalEntryId,
+            {
+              disposition: r.disposition === 'ESCALATE' ? 'ESCALATE' : 'WHITELIST',
+              strCaseId: r.strCaseId ?? null,
+              reviewedBy: r.reviewedByUsername || '',
+              notes: r.reviewNotes || ''
+            } as EntryMark
+          ])
+        );
+      },
+      // A ledger that cannot reach the AML service still has to render.
+      error: () => (this.marks = new Map())
+    });
+  }
+
+  markOf(entry: any): EntryMark | null {
+    return this.marks.get(entry?.id) ?? null;
+  }
+
+  isMarking(entry: any): boolean {
+    return this.marking.has(entry?.id);
+  }
+
+  /**
+   * An alert needs a customer, and a journal entry only reaches one through the
+   * savings, loan or client transaction that produced it. A purely manual GL
+   * posting reaches none, so it cannot be referred — the server enforces this too.
+   */
+  canMark(entry: any): boolean {
+    return !!entry && !this.markOf(entry) && !!(entry.savingsAccountNo || entry.entityId);
+  }
+
+  markBlockedReason(entry: any): string {
+    if (this.markOf(entry)) {
+      return 'Already reviewed — a ledger entry is marked once';
+    }
+    return 'No customer behind this entry, so it cannot be referred';
+  }
+
+  openMarkDialog(entry: any, disposition: 'WHITELIST' | 'ESCALATE'): void {
+    if (!this.canMark(entry) || this.isMarking(entry)) {
+      return;
+    }
+    const data: MarkEntryDialogData = {
+      disposition,
+      journalEntryId: entry.id,
+      transactionId: entry.transactionId,
+      amount: entry.amount,
+      glAccountName: `${entry.glAccountCode} — ${entry.glAccountName}`,
+      transactionDate: this.dateUtils.formatDate(entry.transactionDate, this.settingsService.dateFormat)
+    };
+
+    this.dialog
+      .open(MarkEntryDialogComponent, { data, width: '520px', autoFocus: false })
+      .afterClosed()
+      .subscribe((notes: string | undefined) => {
+        if (notes !== undefined) {
+          this.submitMark(entry, disposition, notes);
+        }
+      });
+  }
+
+  private submitMark(entry: any, disposition: 'WHITELIST' | 'ESCALATE', notes: string): void {
+    this.markError = '';
+    this.marking.add(entry.id);
+
+    this.amlService.referJournalEntry(entry.id, disposition, notes).subscribe({
+      next: (res: any) => {
+        this.marking.delete(entry.id);
+        this.marks.set(entry.id, {
+          disposition,
+          strCaseId: res?.strCaseId ?? null,
+          reviewedBy: res?.reviewedByUsername || '',
+          notes
+        });
+      },
+      error: (err: any) => {
+        this.marking.delete(entry.id);
+        this.markError =
+          err?.error?.defaultUserMessage || err?.error?.errors?.[0]?.defaultUserMessage || 'Could not mark this entry.';
+      }
+    });
   }
 
   ngOnDestroy() {

src/app/aml/aml.service.ts

@@ -0,0 +1,111 @@
+/**
+ * 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, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+/**
+ * AML transaction-monitoring API: live alerts raised by the rule engine, the
+ * two-tier AML Officer / Principal Officer review workflow, STR cases (with
+ * their 7-working-day FIU filing deadline), monthly CTR reports, and a
+ * client's risk-category change history.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class AmlService {
+  private http = inject(HttpClient);
+
+  // ═══ Alerts (AML Officer) ═══
+
+  getAlerts(status?: string): Observable<any[]> {
+    const params = status ? new HttpParams().set('status', status) : undefined;
+    return this.http.get<any[]>('/aml/alerts', { params });
+  }
+
+  /** disposition: 'WHITELIST' | 'ESCALATE' */
+  reviewAlert(alertId: number, disposition: 'WHITELIST' | 'ESCALATE', notes: string): Observable<any> {
+    return this.http.post(`/aml/alerts/${alertId}/review`, { disposition, notes });
+  }
+
+  // ═══ Manual referrals from the general ledger ═══
+
+  /**
+   * Ledger entries a user has already marked, keyed on `journalEntryId`.
+   *
+   * Separate from `getAlerts()` because these are not engine alerts — they carry the
+   * journal entry id rather than a savings or loan transaction id, so the ledger
+   * screen can match them to the rows it is showing.
+   */
+  getManualReferrals(): Observable<any[]> {
+    return this.http.get<any[]>('/aml/alerts/manual-referrals');
+  }
+
+  /**
+   * Marks a ledger entry. WHITELIST clears it with no report; ESCALATE opens an STR
+   * case for the Principal Officer, the same road an escalated engine alert takes.
+   * The entry must have a customer behind it or the server rejects it.
+   */
+  referJournalEntry(journalEntryId: number, disposition: 'WHITELIST' | 'ESCALATE', notes: string): Observable<any> {
+    return this.http.post('/aml/alerts/manual-referral', { journalEntryId, disposition, notes });
+  }
+
+  // ═══ STR cases (Principal Officer) ═══
+
+  getStrCases(): Observable<any[]> {
+    return this.http.get<any[]>('/aml/str-cases');
+  }
+
+  getStrCase(strCaseId: number): Observable<any> {
+    return this.http.get(`/aml/str-cases/${strCaseId}`);
+  }
+
+  getWeeklyDigest(): Observable<any[]> {
+    return this.http.get<any[]>('/aml/str-cases/weekly-digest');
+  }
+
+  assignPrincipalOfficer(strCaseId: number, principalOfficerUserId: number): Observable<any> {
+    return this.http.post(`/aml/str-cases/${strCaseId}/assign`, { principalOfficerUserId });
+  }
+
+  /** conclusion: 'NOT_SUSPICIOUS' | 'SUSPICIOUS' */
+  concludeStrCase(
+    strCaseId: number,
+    conclusion: 'NOT_SUSPICIOUS' | 'SUSPICIOUS',
+    investigationNotes: string,
+    sourceOfFundsNotes: string
+  ): Observable<any> {
+    return this.http.post(`/aml/str-cases/${strCaseId}/conclude`, {
+      conclusion,
+      investigationNotes,
+      sourceOfFundsNotes
+    });
+  }
+
+  fileStr(strCaseId: number, referenceNo: string): Observable<any> {
+    return this.http.post(`/aml/str-cases/${strCaseId}/file`, { referenceNo });
+  }
+
+  // ═══ CTR reports (mechanical, threshold-based) ═══
+
+  getCtrReports(): Observable<any[]> {
+    return this.http.get<any[]>('/aml/ctr-reports');
+  }
+
+  /** month format: yyyy-MM */
+  generateCtrReport(month: string): Observable<any> {
+    return this.http.post('/aml/ctr-reports/generate', { month });
+  }
+
+  // ═══ Client risk-category history ═══
+
+  getRiskCategoryHistory(clientId: number): Observable<any[]> {
+    return this.http.get<any[]>(`/clients/${clientId}/risk-category-history`);
+  }
+}

src/app/app.module.ts

@@ -37,6 +37,8 @@ import { GroupsModule } from './groups/groups.module';
 import { CentersModule } from './centers/centers.module';
 import { AccountingModule } from './accounting/accounting.module';
 import { ChequeBookModule } from './chequebook/chequebook.module';
+import { CtsClearingModule } from './ctsclearing/ctsclearing.module';
+import { NachClearingModule } from './nachclearing/nachclearing.module';
 import { SystemModule } from './system/system.module';
 import { ProductsModule } from './products/products.module';
 import { OrganizationModule } from './organization/organization.module';
@@ -62,11 +64,18 @@ import { BankCalendarModule } from './bank-calendar/bank-calendar.module';
 import { DeafModule } from './deaf/deaf.module';
 import { DicgcModule } from './dicgc/dicgc.module';
 import { FiuModule } from './fiu/fiu.module';
+import { GlReportsModule } from './gl-reports/gl-reports.module';
 import { SftModule } from './sft/sft.module';
+import { InvestmentModule } from './investment/investment.module';
+import { NpaModule } from './npa/npa.module';
+import { ReconciliationModule } from './reconciliation/reconciliation.module';
+import { LoanOriginationModule } from './loan-origination/loan-origination.module';
 import { DigitalModule } from './digital/digital.module';
 import { LetterMgmtModule } from './letter-mgmt/letter-mgmt.module';
 import { AccountsModule } from './accounts/accounts.module';
 import { ElectionModule } from './election/election.module';
+import { SponsorDDModule } from './sponsor-dd/sponsor-dd.module';
+import { SponsorDDReconciliationModule } from './sponsor-dd-reconciliation/sponsor-dd-reconciliation.module';
 import { PortalModule } from '@angular/cdk/portal';
 
 /** Main Routing Module */
@@ -144,6 +153,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     CentersModule,
     AccountingModule,
     ChequeBookModule,
+    CtsClearingModule,
+    NachClearingModule,
     SystemModule,
     ProductsModule,
     OrganizationModule,
@@ -165,11 +176,18 @@ export function HttpLoaderFactory(http: HttpClient) {
     DeafModule,
     DicgcModule,
     FiuModule,
+    GlReportsModule,
     SftModule,
+    InvestmentModule,
+    NpaModule,
+    ReconciliationModule,
+    LoanOriginationModule,
     DigitalModule,
     LetterMgmtModule,
     AccountsModule,
     ElectionModule,
+    SponsorDDModule,
+    SponsorDDReconciliationModule,
     AppRoutingModule,
     NotFoundComponent,
     CallbackComponent,

src/app/cashier/cash-clearing-transfer-summary/cash-clearing-transfer-summary.component.html

@@ -0,0 +1,292 @@
+<!--
+  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="pg">
+  <header class="pg-head">
+    <div>
+      <div class="pg-eyebrow">SUB LEDGER · TRANSACTIONS · {{ scopeName | uppercase }}</div>
+      <h1 class="pg-title">Cash / Clearing / Transfer - Summary Report</h1>
+      <p class="pg-sub">
+        Opening, credit, debit and closing position across Cash, Transfer, Clearing and Digital channels as on
+        {{ asOnDate }}.
+      </p>
+    </div>
+    <div class="pg-toolbar">
+      @if (isHeadOffice) {
+        <label class="pg-field">
+          <span>Branch</span>
+          <select class="pg-select" [ngModel]="selectedBranchCode" (ngModelChange)="setBranch($event)">
+            <option value="ALL">All Branches (Consolidated)</option>
+            @for (b of branches; track b.code) {
+              <option [value]="b.code">{{ b.name }}</option>
+            }
+          </select>
+        </label>
+      }
+      <button type="button" class="pg-btn" [class.pg-btn--active]="showDetails" (click)="toggleDetails()">
+        {{ showDetails ? 'Summary View' : 'Transaction Details' }}
+      </button>
+      <button type="button" class="pg-btn pg-btn--ghost" [disabled]="generating" (click)="exportExcel()">
+        {{ generating ? 'Exporting…' : 'Export to Excel' }}
+      </button>
+    </div>
+  </header>
+
+  <div class="cctr-grand-summary">
+    <div class="cctr-grand-summary__item">
+      <span class="cctr-grand-summary__label">Opening</span>
+      <span class="cctr-grand-summary__value">₹{{ grandOpening | number: '1.2-2' }}</span>
+    </div>
+    <div class="cctr-grand-summary__item">
+      <span class="cctr-grand-summary__label">Credit</span>
+      <span class="cctr-grand-summary__value col-in">₹{{ grandCredit | number: '1.2-2' }}</span>
+    </div>
+    <div class="cctr-grand-summary__item">
+      <span class="cctr-grand-summary__label">Debit</span>
+      <span class="cctr-grand-summary__value col-out">₹{{ grandDebit | number: '1.2-2' }}</span>
+    </div>
+    <div class="cctr-grand-summary__item">
+      <span class="cctr-grand-summary__label">Closing</span>
+      <span class="cctr-grand-summary__value">₹{{ grandClosing | number: '1.2-2' }}</span>
+    </div>
+  </div>
+
+  @if (isHeadOffice && selectedBranchCode === 'ALL') {
+    <div class="pg-card">
+      <div class="pos-section-label">Branch-wise Break-up — click a branch to drill in</div>
+      <table class="pg-table">
+        <thead>
+          <tr>
+            <th>Branch</th>
+            <th class="num">Opening</th>
+            <th class="num col-in">Credit</th>
+            <th class="num col-out">Debit</th>
+            <th class="num col-net">Closing</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (b of branchBreakup; track b.code) {
+            <tr class="cctr-branch-row" (click)="setBranch(b.code)">
+              <td>{{ b.name }}</td>
+              <td class="num">₹{{ b.opening | number: '1.2-2' }}</td>
+              <td class="num col-in">₹{{ b.credit | number: '1.2-2' }}</td>
+              <td class="num col-out">₹{{ b.debit | number: '1.2-2' }}</td>
+              <td class="num col-net">₹{{ b.closing | number: '1.2-2' }}</td>
+            </tr>
+          }
+        </tbody>
+        <tfoot>
+          <tr class="cctr-total-row">
+            <td>All Branches</td>
+            <td class="num">₹{{ grandOpening | number: '1.2-2' }}</td>
+            <td class="num">₹{{ grandCredit | number: '1.2-2' }}</td>
+            <td class="num">₹{{ grandDebit | number: '1.2-2' }}</td>
+            <td class="num">₹{{ grandClosing | number: '1.2-2' }}</td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  }
+
+  <div class="cctr-tabs">
+    <button
+      type="button"
+      class="pg-btn pg-btn--ghost"
+      [class.pg-btn--active]="activeTab === 'cash'"
+      (click)="setTab('cash')"
+    >
+      Cash
+    </button>
+    <button
+      type="button"
+      class="pg-btn pg-btn--ghost"
+      [class.pg-btn--active]="activeTab === 'transfer'"
+      (click)="setTab('transfer')"
+    >
+      Transfer
+    </button>
+    <button
+      type="button"
+      class="pg-btn pg-btn--ghost"
+      [class.pg-btn--active]="activeTab === 'clearing'"
+      (click)="setTab('clearing')"
+    >
+      Clearing
+    </button>
+    <button
+      type="button"
+      class="pg-btn pg-btn--ghost"
+      [class.pg-btn--active]="activeTab === 'digital'"
+      (click)="setTab('digital')"
+    >
+      Digital
+    </button>
+  </div>
+
+  <!-- Summary (Opening | Credit | Debit | Closing) -->
+  @if (!showDetails) {
+    <div class="pg-card">
+      @if (activeTab === 'digital') {
+        <div class="pos-section-label">RTGS · NEFT · UPI · ATM · NACH — Overall Position</div>
+      }
+      <table class="pg-table">
+        <thead>
+          <tr>
+            @if (activeTab !== 'digital') {
+              <th>GL Code</th>
+            }
+            <th>Particulars</th>
+            <th class="num">Opening</th>
+            <th class="num col-in">Credit</th>
+            <th class="num col-out">Debit</th>
+            <th class="num col-net">Closing</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (r of rowsForActiveTab; track r.code) {
+            <tr>
+              @if (activeTab !== 'digital') {
+                <td>
+                  <span class="pg-chip">{{ r.code }}</span>
+                </td>
+              }
+              <td>{{ r.name }}</td>
+              <td class="num">₹{{ r.opening | number: '1.2-2' }}</td>
+              <td class="num col-in">₹{{ rowCredit(r, txnsForActiveTab) | number: '1.2-2' }}</td>
+              <td class="num col-out">₹{{ rowDebit(r, txnsForActiveTab) | number: '1.2-2' }}</td>
+              <td class="num col-net">₹{{ closing(r, txnsForActiveTab) | number: '1.2-2' }}</td>
+            </tr>
+          }
+        </tbody>
+        <tfoot>
+          <tr class="cctr-total-row">
+            <td [attr.colspan]="activeTab !== 'digital' ? 2 : 1">Total</td>
+            <td class="num">₹{{ total(rowsForActiveTab, txnsForActiveTab, 'opening') | number: '1.2-2' }}</td>
+            <td class="num">₹{{ total(rowsForActiveTab, txnsForActiveTab, 'credit') | number: '1.2-2' }}</td>
+            <td class="num">₹{{ total(rowsForActiveTab, txnsForActiveTab, 'debit') | number: '1.2-2' }}</td>
+            <td class="num">₹{{ totalClosing(rowsForActiveTab, txnsForActiveTab) | number: '1.2-2' }}</td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  }
+
+  <!-- Transaction Details (all txns for the selected category, optionally filtered by GL/channel) -->
+  @if (showDetails) {
+    @if (rowsForActiveTab.length > 1) {
+      <div class="cctr-tabs">
+        <button
+          type="button"
+          class="pg-btn pg-btn--ghost"
+          [class.pg-btn--active]="glFilter === null"
+          (click)="setGlFilter(null)"
+        >
+          All
+        </button>
+        @for (r of rowsForActiveTab; track r.code) {
+          <button
+            type="button"
+            class="pg-btn pg-btn--ghost"
+            [class.pg-btn--active]="glFilter === r.code"
+            (click)="setGlFilter(r.code)"
+          >
+            {{ filterLabel(r) }}
+          </button>
+        }
+      </div>
+    }
+
+    <div class="pg-card">
+      <div class="pos-section-label">
+        {{
+          activeTab === 'cash'
+            ? 'Cash'
+            : activeTab === 'transfer'
+              ? 'Transfer'
+              : activeTab === 'clearing'
+                ? 'Clearing'
+                : 'Digital'
+        }}
+        — Transaction Details (Full Double Entry)
+        @if (glFilter !== null) {
+          · {{ glFilter }}
+        }
+      </div>
+      <table class="pg-table cctr-journal">
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Voucher / Ref No</th>
+            <th>Dr / Cr</th>
+            <th>GL / Account</th>
+            <th class="num col-out">Debit</th>
+            <th class="num col-in">Credit</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (t of filteredTxns; track t.voucherNo) {
+            <tr class="cctr-journal-row cctr-journal-row--first">
+              <td>{{ asOnDate }}</td>
+              <td>
+                <span class="pg-chip">{{ display(t.voucherNo) }}</span>
+              </td>
+              <td><span class="cctr-drcr cctr-drcr--dr">Dr</span></td>
+              <td>
+                @if (t.debit > 0) {
+                  <span class="pg-chip">{{ t.glCode }}</span> {{ glName(t.glCode) }} — {{ display(t.accountNo) }} ({{
+                    t.accountName
+                  }})
+                } @else {
+                  <span class="cctr-contra">{{ contraLabel(t) }}</span>
+                }
+              </td>
+              <td class="num col-out">₹{{ legAmount(t) | number: '1.2-2' }}</td>
+              <td class="num"></td>
+              <td rowspan="2">
+                <span class="cctr-balanced-chip">✓ Balanced</span>
+              </td>
+            </tr>
+            <tr class="cctr-journal-row cctr-journal-row--second">
+              <td></td>
+              <td></td>
+              <td><span class="cctr-drcr cctr-drcr--cr">Cr</span></td>
+              <td>
+                @if (t.credit > 0) {
+                  <span class="pg-chip">{{ t.glCode }}</span> {{ glName(t.glCode) }} — {{ display(t.accountNo) }} ({{
+                    t.accountName
+                  }})
+                } @else {
+                  <span class="cctr-contra">{{ contraLabel(t) }}</span>
+                }
+              </td>
+              <td class="num"></td>
+              <td class="num col-in">₹{{ legAmount(t) | number: '1.2-2' }}</td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="7" class="pg-empty">No transactions for this filter.</td>
+            </tr>
+          }
+        </tbody>
+        <tfoot>
+          <tr class="cctr-total-row">
+            <td colspan="4">Total ({{ filteredTxns.length }} vouchers)</td>
+            <td class="num">
+              ₹{{ txnTotal(filteredTxns, 'debit') + txnTotal(filteredTxns, 'credit') | number: '1.2-2' }}
+            </td>
+            <td class="num">
+              ₹{{ txnTotal(filteredTxns, 'debit') + txnTotal(filteredTxns, 'credit') | number: '1.2-2' }}
+            </td>
+            <td></td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  }
+</div>

src/app/cashier/cash-clearing-transfer-summary/cash-clearing-transfer-summary.component.scss

@@ -0,0 +1,138 @@
+/**
+ * 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/.
+ */
+
+.cctr-tabs {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.cctr-total-row {
+  td {
+    background: #f1f5f9;
+    font-weight: 800;
+    border-top: 2px solid #cbd5e1;
+    border-bottom: none;
+    color: #0f172a;
+  }
+}
+
+.cctr-grand-summary {
+  display: flex;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+
+  &__item {
+    flex: 1;
+    padding: 14px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    border-right: 1px solid #e2e8f0;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  &__label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: #64748b;
+  }
+
+  &__value {
+    font-size: 20px;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    color: #0f172a;
+  }
+}
+
+.cctr-subtext {
+  font-size: 11px;
+  color: #94a3b8;
+  margin-top: 2px;
+}
+
+.cctr-branch-row {
+  cursor: pointer;
+
+  &:hover td {
+    background: #eff6ff;
+  }
+}
+
+// Both journal lines of one voucher share a tint and sit flush against each other (no dotted
+// divider between them) so the pair reads as a single entry; a hairline separates one voucher's
+// pair from the next.
+.cctr-journal-row {
+  &--first td {
+    border-bottom: none;
+    padding-bottom: 4px;
+  }
+
+  &--second td {
+    border-top: none;
+    padding-top: 4px;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  &--first,
+  &--second {
+    &:hover td {
+      background: #f8fafc;
+    }
+  }
+}
+
+.cctr-drcr {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  padding: 1px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.03em;
+
+  &--dr {
+    background: #eff6ff;
+    color: #1d4ed8;
+    border: 1px solid #bfdbfe;
+  }
+
+  &--cr {
+    background: #f0fdf4;
+    color: #15803d;
+    border: 1px solid #bbf7d0;
+  }
+}
+
+.cctr-contra {
+  color: #64748b;
+  font-style: italic;
+}
+
+.cctr-balanced-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  background: #f0fdf4;
+  color: #15803d;
+  border: 1px solid #bbf7d0;
+  white-space: nowrap;
+}

src/app/cashier/cashier-export.ts

@@ -0,0 +1,88 @@
+/**
+ * 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/.
+ */
+
+// Shared "Export to Excel" builder for Cashier reports (mirrors ../investment/investment-export.ts)
+// — centralised so the ExcelJS boilerplate (title/meta/header rows, number formatting, safe sheet
+// names, Blob download) is written once and every cashier report's export behaves the same way.
+
+import * as ExcelJS from 'exceljs';
+
+export interface ExportSheetSpec {
+  /** Worksheet tab name — sanitised for Excel's forbidden characters (\ / ? * [ ]) and length. */
+  sheetName: string;
+  /** Bold title row, merged across all columns. */
+  title: string;
+  /** Optional italic subtitle row (e.g. scope/date), merged across all columns. */
+  subtitle?: string;
+  headers: string[];
+  rows: (string | number | null)[][];
+  widths?: number[];
+}
+
+/** Excel worksheet names can't contain \ / ? * [ ] or exceed 31 chars. */
+function safeSheetName(name: string): string {
+  return name.replace(/[\\/?*[\]]/g, '-').slice(0, 31);
+}
+
+function buildSheet(wb: ExcelJS.Workbook, spec: ExportSheetSpec): void {
+  const sheet = wb.addWorksheet(safeSheetName(spec.sheetName));
+  sheet.columns = (spec.widths || spec.headers.map(() => 18)).map((w) => ({ width: w }));
+
+  const title = sheet.addRow([spec.title]);
+  sheet.mergeCells(title.number, 1, title.number, spec.headers.length);
+  title.font = { bold: true, size: 14, color: { argb: 'FFFFFFFF' } };
+  title.alignment = { horizontal: 'center', vertical: 'middle' };
+  title.height = 24;
+  title.getCell(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF0F4F3C' } };
+
+  if (spec.subtitle) {
+    const meta = sheet.addRow([spec.subtitle]);
+    sheet.mergeCells(meta.number, 1, meta.number, spec.headers.length);
+    meta.font = { italic: true, size: 10 };
+  }
+  sheet.addRow([]);
+
+  const head = sheet.addRow(spec.headers);
+  head.font = { bold: true };
+  head.alignment = { wrapText: true, horizontal: 'center' };
+  head.eachCell((c) => {
+    c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE2E8F0' } };
+    c.border = { bottom: { style: 'thin' } };
+  });
+
+  for (const r of spec.rows) {
+    const row = sheet.addRow(r);
+    r.forEach((v, idx) => {
+      if (typeof v === 'number') {
+        row.getCell(idx + 1).numFmt = '#,##0.00';
+      }
+    });
+  }
+  sheet.views = [{ state: 'frozen', ySplit: spec.subtitle ? 4 : 3 }];
+}
+
+/** Builds a (possibly multi-sheet) workbook and triggers a browser download. */
+export async function exportWorkbook(sheets: ExportSheetSpec[], fileName: string): Promise<void> {
+  const wb = new ExcelJS.Workbook();
+  wb.creator = 'CBSNexora';
+  wb.created = new Date();
+  sheets.forEach((s) => buildSheet(wb, s));
+
+  const buffer = await wb.xlsx.writeBuffer();
+  const blob = new Blob([buffer], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${fileName.replace(/[^\w]+/g, '-')}.xlsx`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}

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

@@ -179,6 +179,17 @@ const routes: Routes = [
           loadComponent: () =>
             import('./my-deposit-requests/my-deposit-requests.component').then((m) => m.MyDepositRequestsComponent),
           data: { title: 'My Deposit Requests', breadcrumb: 'My Deposit Requests' }
+        },
+        {
+          path: 'cash-clearing-transfer-summary',
+          loadComponent: () =>
+            import('./cash-clearing-transfer-summary/cash-clearing-transfer-summary.component').then(
+              (m) => m.CashClearingTransferSummaryComponent
+            ),
+          data: {
+            title: 'Cash / Clearing / Transfer - Summary Report',
+            breadcrumb: 'Cash / Clearing / Transfer - Summary Report'
+          }
         }
       ]
     }

src/app/cashier/my-deposit-requests/my-deposit-requests.component.html

@@ -218,6 +218,26 @@
               <span class="mdr-detail__val cell-mono">{{ viewRequest.txn_id }}</span>
             </div>
           }
+          @if (viewRequest.dd_face_value != null) {
+            <div class="mdr-detail">
+              <span class="mdr-detail__lbl">DD Face Value</span>
+              <span class="mdr-detail__val">₹{{ viewRequest.dd_face_value | number: '1.2-2' }}</span>
+            </div>
+            <div class="mdr-detail">
+              <span class="mdr-detail__lbl">Charges</span>
+              <span class="mdr-detail__val">₹{{ viewRequest.dd_charges | number: '1.2-2' }}</span>
+            </div>
+            <div class="mdr-detail">
+              <span class="mdr-detail__lbl">GST ({{ viewRequest.dd_gst_percentage }}%)</span>
+              <span class="mdr-detail__val">₹{{ viewRequest.dd_gst_amount | number: '1.2-2' }}</span>
+            </div>
+            <div class="mdr-detail">
+              <span class="mdr-detail__lbl">Total Collected</span>
+              <span class="mdr-detail__val"
+                ><strong>₹{{ viewRequest.amount | number: '1.2-2' }}</strong></span
+              >
+            </div>
+          }
           @if (viewRequest.description) {
             <div class="mdr-detail mdr-detail--wide">
               <span class="mdr-detail__lbl">Description</span>

src/app/cashier/transaction-entry/transaction-entry.component.html

@@ -70,6 +70,13 @@
           <span class="ws-header__title">Transaction Entry</span>
         </div>
         <div class="ws-header__right">
+          <button type="button" class="ws-btn ws-btn--ghost" (click)="openCustomerSearch()">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+            Search Customer
+          </button>
           <span class="ws-header__effdt">
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <rect x="3" y="4" width="18" height="18" rx="2" />
@@ -300,6 +307,59 @@
                   </div>
                 </div>
               </div>
+
+              <!-- ── Row 3: DD Charges & GST — only for TYPE=DD, TXN TP=Cash, AC.TP=GL ── -->
+              @if (isDdCashGlRow(row)) {
+                <div class="ws-group-row ws-group-row--mt">
+                  <div class="ws-group ws-group--flex">
+                    <span class="ws-caption">DD Charges &amp; GST — Admin Rate {{ ddGstPercentage }}%</span>
+                    <div class="ws-group__fields">
+                      <div class="ws-f ws-f--amt">
+                        <label class="ws-f__lbl" title="DD issuance charges / commission">CHARGES</label>
+                        <div class="ws-amt-wrap">
+                          <span class="ws-amt-prefix">₹</span>
+                          <input
+                            class="ws-f__ctl ws-amt-input"
+                            type="number"
+                            [value]="row.ddCharges ?? ''"
+                            (input)="row.ddCharges = +$any($event.target).value"
+                            (click)="$event.stopPropagation()"
+                            placeholder="0.00"
+                          />
+                        </div>
+                      </div>
+                      <div class="ws-f ws-f--amt">
+                        <label class="ws-f__lbl" title="GST on charges, at the admin-configured rate">
+                          GST ({{ ddGstPercentage }}%)
+                        </label>
+                        <div class="ws-amt-wrap ws-amt-wrap--locked">
+                          <span class="ws-amt-prefix">₹</span>
+                          <input
+                            class="ws-f__ctl ws-amt-input ws-amt-input--locked"
+                            type="text"
+                            [value]="ddGstAmountFor(row) | number: '1.2-2'"
+                            readonly
+                          />
+                        </div>
+                      </div>
+                      <div class="ws-f ws-f--amt">
+                        <label class="ws-f__lbl" title="Amount + Charges + GST, rounded up to the next rupee">
+                          TOTAL TO COLLECT
+                        </label>
+                        <div class="ws-amt-wrap ws-amt-wrap--locked">
+                          <span class="ws-amt-prefix">₹</span>
+                          <input
+                            class="ws-f__ctl ws-amt-input ws-amt-input--locked"
+                            type="text"
+                            [value]="ddTotalPayableFor(row)"
+                            readonly
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              }
             </div>
           </div>
         }
@@ -957,11 +1017,15 @@
                 <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
               </svg>
               Denomination Entry
-              @if (denominationTotal > 0) {
-                <span class="te-mandate-badge">₹{{ denominationTotal | number: '1.2-2' }}</span>
-              }
-              @if (isCashPayment && denominationTotal <= 0) {
-                <span class="te-denom-required-badge">⚠ Required for Cash</span>
+              @if (isSelectedRowDdCashGl) {
+                <span class="te-mandate-badge">Target ₹{{ ddTargetTotal | number: '1.2-2' }}</span>
+              } @else {
+                @if (denominationTotal > 0) {
+                  <span class="te-mandate-badge">₹{{ denominationTotal | number: '1.2-2' }}</span>
+                }
+                @if (isCashPayment && denominationTotal <= 0) {
+                  <span class="te-denom-required-badge">⚠ Required for Cash</span>
+                }
               }
             </div>
             <div class="te-panel__body">
@@ -1011,7 +1075,26 @@
                 </tfoot>
               </table>
 
-              @if (denominationTotal > 0) {
+              @if (isSelectedRowDdCashGl) {
+                <div class="te-denom-actions">
+                  @if (denominationTotal <= 0) {
+                    <span class="te-denom-required-badge"
+                      >⚠ Count notes/coins totalling ₹{{ ddTargetTotal | number: '1.2-2' }}</span
+                    >
+                  } @else if (ddDenomMatchesTarget()) {
+                    <span class="te-denom-match-badge"
+                      >✓ Matches Total To Collect ₹{{ ddTargetTotal | number: '1.2-2' }}</span
+                    >
+                  } @else {
+                    <span class="te-denom-required-badge">
+                      ⚠ Must total ₹{{ ddTargetTotal | number: '1.2-2' }} (counted ₹{{
+                        denominationTotal | number: '1.2-2'
+                      }})
+                    </span>
+                  }
+                  <button class="te-btn" type="button" (click)="clearDenominations()">Clear</button>
+                </div>
+              } @else if (denominationTotal > 0) {
                 <div class="te-denom-actions">
                   <button class="te-btn te-btn--primary" type="button" (click)="applyDenominationTotal()">
                     Apply ₹{{ denominationTotal | number: '1.2-2' }} to Amount
@@ -1140,6 +1223,13 @@
             <span class="ws-header__title">Transaction Entry</span>
           </div>
           <div class="ws-header__right">
+            <button type="button" class="ws-btn ws-btn--ghost" (click)="openCustomerSearch()">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8" />
+                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+              </svg>
+              Search Customer
+            </button>
             <span class="ws-header__effdt">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <rect x="3" y="4" width="18" height="18" rx="2" />
@@ -1325,6 +1415,58 @@
                       </div>
                     </div>
                   </div>
+
+                  <!-- ── Row 3: DD Charges & GST — only for TYPE=DD, TXN TP=Cash, AC.TP=GL ── -->
+                  @if (isDdCashGlRow(row)) {
+                    <div class="ws-group-row ws-group-row--mt">
+                      <div class="ws-group ws-group--flex">
+                        <span class="ws-caption">DD Charges &amp; GST — Admin Rate {{ ddGstPercentage }}%</span>
+                        <div class="ws-group__fields">
+                          <div class="ws-f ws-f--amt">
+                            <label class="ws-f__lbl" title="DD issuance charges / commission">CHARGES</label>
+                            <div class="ws-amt-wrap">
+                              <span class="ws-amt-prefix">₹</span>
+                              <input
+                                class="ws-f__ctl ws-amt-input"
+                                type="number"
+                                [value]="row.ddCharges ?? ''"
+                                (input)="row.ddCharges = +$any($event.target).value"
+                                placeholder="0.00"
+                              />
+                            </div>
+                          </div>
+                          <div class="ws-f ws-f--amt">
+                            <label class="ws-f__lbl" title="GST on charges, at the admin-configured rate">
+                              GST ({{ ddGstPercentage }}%)
+                            </label>
+                            <div class="ws-amt-wrap ws-amt-wrap--locked">
+                              <span class="ws-amt-prefix">₹</span>
+                              <input
+                                class="ws-f__ctl ws-amt-input ws-amt-input--locked"
+                                type="text"
+                                [value]="ddGstAmountFor(row) | number: '1.2-2'"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                          <div class="ws-f ws-f--amt">
+                            <label class="ws-f__lbl" title="Amount + Charges + GST, rounded up to the next rupee">
+                              TOTAL TO COLLECT
+                            </label>
+                            <div class="ws-amt-wrap ws-amt-wrap--locked">
+                              <span class="ws-amt-prefix">₹</span>
+                              <input
+                                class="ws-f__ctl ws-amt-input ws-amt-input--locked"
+                                type="text"
+                                [value]="ddTotalPayableFor(row)"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  }
                 </div>
               </div>
             }
@@ -1539,8 +1681,26 @@
               >{{ confirmData.symbol }}{{ confirmData.currentBalance | number: '1.2-2' }}</span
             >
           </div>
+          @if (confirmData.isDdCashGl) {
+            <div class="te-confirm-row">
+              <span class="te-confirm-label">DD Face Value</span
+              ><span class="te-confirm-val"
+                >{{ confirmData.symbol }}{{ confirmData.ddFaceValue | number: '1.2-2' }}</span
+              >
+            </div>
+            <div class="te-confirm-row">
+              <span class="te-confirm-label">Charges</span
+              ><span class="te-confirm-val">{{ confirmData.symbol }}{{ confirmData.ddCharges | number: '1.2-2' }}</span>
+            </div>
+            <div class="te-confirm-row">
+              <span class="te-confirm-label">GST ({{ confirmData.ddGstPercentage }}%)</span
+              ><span class="te-confirm-val"
+                >{{ confirmData.symbol }}{{ confirmData.ddGstAmount | number: '1.2-2' }}</span
+              >
+            </div>
+          }
           <div class="te-confirm-row te-confirm-row--amount">
-            <span class="te-confirm-label">Deposit Amount</span>
+            <span class="te-confirm-label">{{ confirmData.isDdCashGl ? 'Total To Collect' : 'Deposit Amount' }}</span>
             <span class="te-confirm-val te-cr"
               >+{{ confirmData.symbol }}{{ confirmData.amount | number: '1.2-2' }}</span
             >

src/app/cashier/transaction-entry/transaction-entry.component.scss

@@ -1928,6 +1928,19 @@ select.te-cell {
   animation: te-pulse 1.5s ease-in-out infinite;
 }
 
+// Denomination matches DD target badge
+.te-denom-match-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  background: #dcfce7;
+  color: #15803d;
+  border: 1px solid #86efac;
+}
+
 @keyframes te-pulse {
   0%,
   100% {

src/app/cashier/transaction-entry/transaction-entry.component.ts

@@ -23,6 +23,11 @@ import { ClerkWithdrawalService } from '../clerk-withdrawal.service';
 import { ClerkDisbursementService } from '../clerk-disbursement.service';
 import { CashierDepositService } from '../cashier-deposit.service';
 import { SettingsService } from '../../settings/settings.service';
+import {
+  CustomerSearchDialogComponent,
+  CustomerSearchResult
+} from '../../shared/customer-search-dialog/customer-search-dialog.component';
+import { SponsorDDService } from '../../sponsor-dd/sponsor-dd.service';
 
 interface TxnRow {
   typ: string;
@@ -40,6 +45,8 @@ interface TxnRow {
   paymentTypeId: number | null;
   bankName: string;
   routingCode: string;
+  /** DD issuance charges/commission — only used when TYPE=DD, TXN TP=Cash, AC.TP=GL */
+  ddCharges: number | null;
 }
 
 interface Denomination {
@@ -387,7 +394,12 @@ export class JointHolderDialogComponent implements OnInit {
       this.kyc = kycArr[0] ?? null;
       this.photo = photo ?? null;
       const docs: any[] = Array.isArray(documents) ? documents : [];
-      const sigDoc = docs.find((d: any) => d.name === 'clientSignature' || d.name?.toLowerCase().includes('signature'));
+      // Multiple 'clientSignature' documents can exist for clients who re-cropped/replaced their
+      // signature before uploads became single-slot, so pick the highest id (latest) rather than
+      // the first unordered match.
+      const sigDoc = docs
+        .filter((d: any) => d.name === 'clientSignature' || d.name?.toLowerCase().includes('signature'))
+        .sort((a: any, b: any) => b.id - a.id)[0];
       this.loading = false;
       if (sigDoc) {
         this.http
@@ -744,6 +756,12 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
   private cashierDepositService = inject(CashierDepositService);
   readonly router = inject(Router);
   private settingsService = inject(SettingsService);
+  private sponsorDDService = inject(SponsorDDService);
+
+  /** GST % on DD issuance charges — loaded from the admin GST/GL Settings (sponsor-dd module). */
+  ddGstPercentage = 18;
+  /** Admin-configured DD limit (sponsor-dd module) — caps a single DD's face value. Null = no limit. */
+  ddLimitAmount: number | null = null;
 
   today = '';
   rows: TxnRow[] = [];
@@ -889,6 +907,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
       });
 
     this.loadCashVaultGl();
+    this.loadDdGstPercentage();
 
     if (this.reviewMode) {
       this.loadRequestIntoForm(this.reviewRequestId!, 'review');
@@ -973,6 +992,18 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
       });
   }
 
+  /** Admin GST rate (set via GST / GL Settings in the sponsor-dd module) applied to DD issuance charges. */
+  private loadDdGstPercentage(): void {
+    this.sponsorDDService
+      .getGlMappings()
+      .pipe(catchError(() => of([])))
+      .subscribe((mappings: any[]) => {
+        const mapping = mappings && mappings.length ? mappings[0] : null;
+        this.ddGstPercentage = Number(mapping?.gstPercentage ?? 18);
+        this.ddLimitAmount = mapping?.ddLimitAmount != null ? Number(mapping.ddLimitAmount) : null;
+      });
+  }
+
   private loadDayStatus(): void {
     this.cashierService
       .getCashierDayStatus()
@@ -1139,7 +1170,9 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
   }
 
   applyDenominationTotal(): void {
-    if (this.selectedRow) {
+    // DD + Cash + GL: amount is derived from Face Value + Charges + GST, not from counted cash —
+    // overwriting it here would feed back into the Charges/GST sum and compound on every click.
+    if (this.selectedRow && !this.isDdCashGlRow(this.selectedRow)) {
       this.selectedRow.amount = this.denominationTotal;
     }
   }
@@ -1167,7 +1200,8 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
         tokNo: '',
         paymentTypeId: this.findTransferPaymentTypeId(),
         bankName: '',
-        routingCode: ''
+        routingCode: '',
+        ddCharges: null
       };
       this.rows.push(mirror);
       this.selectedRow = mirror;
@@ -1188,7 +1222,8 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
       tokNo: '',
       paymentTypeId: null,
       bankName: '',
-      routingCode: ''
+      routingCode: '',
+      ddCharges: null
     };
     this.rows.push(row);
   }
@@ -1227,6 +1262,40 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
     return pt?.id ?? null;
   }
 
+  /** TYPE=DD + TXN TP=Cash + AC.TP=GL — the only combination that collects DD charges + GST from the customer. */
+  isDdCashGlRow(row: TxnRow): boolean {
+    const pt = this.paymentTypes.find((p: any) => p.id === row.paymentTypeId);
+    return row.typ === 'DD' && !!pt?.isCashPayment && row.acTyp === 'GL';
+  }
+
+  /** GST on DD charges only (never on the DD face value), at the admin-configured rate. */
+  ddGstAmountFor(row: TxnRow): number {
+    const charges = Number(row.ddCharges) || 0;
+    if (charges <= 0) return 0;
+    return Math.round(charges * this.ddGstPercentage) / 100;
+  }
+
+  /** Amount + Charges + GST, rounded UP to the next whole rupee — the total collected from the customer. */
+  ddTotalPayableFor(row: TxnRow): number {
+    const amount = Number(row.amount) || 0;
+    const charges = Number(row.ddCharges) || 0;
+    const gst = this.ddGstAmountFor(row);
+    return Math.ceil(amount + charges + gst - 1e-9);
+  }
+
+  get isSelectedRowDdCashGl(): boolean {
+    return !!this.selectedRow && this.isDdCashGlRow(this.selectedRow);
+  }
+
+  /** Cash the cashier must physically count for the selected DD row — Face Value + Charges + GST. */
+  get ddTargetTotal(): number {
+    return this.selectedRow ? this.ddTotalPayableFor(this.selectedRow) : 0;
+  }
+
+  ddDenomMatchesTarget(): boolean {
+    return !!this.selectedRow && Math.abs(this.denominationTotal - this.ddTargetTotal) < 0.005;
+  }
+
   /**
    * Submits a clerk double-entry request (maker-checker, PENDING until manager approves).
    * Disbursement: 1 DR [GL] source → N CR savings/current/GL destinations.
@@ -1503,6 +1572,34 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
     }
   }
 
+  private static readonly SEARCH_ACCOUNT_TYPE_TO_AC_TYP: Record<string, string> = {
+    SAVINGS: 'SD',
+    CURRENT: 'CA',
+    FIXED_DEPOSIT: 'FD',
+    RECURRING_DEPOSIT: 'RD'
+  };
+
+  openCustomerSearch(): void {
+    const dialogRef = this.dialog.open(CustomerSearchDialogComponent, {
+      width: '960px',
+      maxWidth: '95vw'
+    });
+
+    dialogRef.afterClosed().subscribe((result: CustomerSearchResult | undefined) => {
+      if (!result || !result.accountNo) return;
+      // selectedRow is only set once the clerk types into A/C NO. themselves - on a fresh screen
+      // it's still null, so fall back to the first (only) row that addRow() created at startup.
+      const targetRow = this.selectedRow ?? this.rows[0];
+      if (!targetRow) return;
+
+      const acTyp = TransactionEntryComponent.SEARCH_ACCOUNT_TYPE_TO_AC_TYP[result.accountType || ''] || 'SD';
+      targetRow.acTyp = acTyp;
+      targetRow.acNo = result.accountNo;
+      this.selectedRow = targetRow;
+      this.loadAccountDetails(result.accountNo, acTyp);
+    });
+  }
+
   private loadAccountDetails(acNo: string, acTyp: string): void {
     this.lastLoadedAcNo = acNo;
     this.loadingAccount = true;
@@ -1776,7 +1873,12 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
       this.clientAddresses = Array.isArray(r.addresses) ? r.addresses : [];
       this.clientPhotoUrl = r.photo ?? null;
       const docs: any[] = Array.isArray(r.documents) ? r.documents : [];
-      const sigDoc = docs.find((d: any) => d.name === 'clientSignature' || d.name?.toLowerCase().includes('signature'));
+      // Multiple 'clientSignature' documents can exist for clients who re-cropped/replaced their
+      // signature before uploads became single-slot, so pick the highest id (latest) rather than
+      // the first unordered match.
+      const sigDoc = docs
+        .filter((d: any) => d.name === 'clientSignature' || d.name?.toLowerCase().includes('signature'))
+        .sort((a: any, b: any) => b.id - a.id)[0];
       if (sigDoc) {
         this.http
           .get(`/clients/${clientId}/documents/${sigDoc.id}/attachment`, { responseType: 'blob' })
@@ -2532,20 +2634,55 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
 
     const selectedPtEarly = this.paymentTypes.find((p: any) => p.id === row.paymentTypeId);
     const isCash = !!selectedPtEarly?.isCashPayment;
+    const isDdCashGl = this.isDdCashGlRow(row);
     // Clerk mode: always use manually entered amount; Cashier mode: cash amount comes from denomination
-    const amount = isCash && !this.clerkMode ? this.denominationTotal : (row.amount ?? this.denominationTotal);
+    // DD + Cash + GL: amount is DD face value + charges + GST (rounded up), not the counted denomination
+    const amount = isDdCashGl
+      ? this.ddTotalPayableFor(row)
+      : isCash && !this.clerkMode
+        ? this.denominationTotal
+        : (row.amount ?? this.denominationTotal);
 
-    if (isCash && this.denominationTotal <= 0 && !this.clerkMode) {
+    if (isCash && this.denominationTotal <= 0 && !this.clerkMode && !isDdCashGl) {
       this.showAlert('error', 'Denomination Required', [
         'Cash transaction: Please enter denomination (notes/coins count) first.'
       ]);
       return;
     }
+
+    // DD + Cash + GL: physical cash counted must reconcile with Face Value + Charges + GST
+    if (isDdCashGl && !this.clerkMode) {
+      if (this.denominationTotal <= 0) {
+        this.showAlert('error', 'Denomination Required', [
+          `Cash transaction: Please count notes/coins totalling ₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2 })} (DD Face Value + Charges + GST).`
+        ]);
+        return;
+      }
+      if (Math.abs(this.denominationTotal - amount) > 0.005) {
+        this.showAlert('error', 'Denomination Mismatch', [
+          `Cash counted: ₹${this.denominationTotal.toLocaleString('en-IN', { minimumFractionDigits: 2 })}`,
+          `Total To Collect: ₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2 })} (Face Value + Charges + GST)`,
+          'Adjust the notes/coins breakdown to match the Total To Collect exactly.'
+        ]);
+        return;
+      }
+    }
+
     if (!amount || amount <= 0) {
       this.showAlert('error', 'Amount Required', ['Please enter a valid transaction amount.']);
       return;
     }
 
+    // DD + Cash + GL: reject at cash intake, before the cashier even accepts the money, if the DD
+    // Face Value exceeds the admin-configured DD limit (same limit enforced again at DD issuance).
+    if (isDdCashGl && this.ddLimitAmount != null && this.ddLimitAmount > 0 && Number(row.amount) > this.ddLimitAmount) {
+      this.showAlert('error', 'DD Limit Exceeded', [
+        `DD Face Value (₹${Number(row.amount).toLocaleString('en-IN', { minimumFractionDigits: 2 })}) exceeds the configured DD limit of ₹${this.ddLimitAmount.toLocaleString('en-IN', { minimumFractionDigits: 2 })}.`,
+        'Reduce the amount, or issue this as separate DDs within the limit each.'
+      ]);
+      return;
+    }
+
     const isDeposit = row.dbCr === 'Cr';
 
     // Clerk cash deposit is not permitted — cash handling (notes/coins) is cashier's responsibility
@@ -2848,7 +2985,12 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
       paymentType: selectedPt?.name ?? 'Cash',
       chequeNo: row.chequeNo || null,
       symbol: this.currencySymbol,
-      tokNo: this.activeWithdrawalRequest?.tok_no ?? null
+      tokNo: this.activeWithdrawalRequest?.tok_no ?? null,
+      isDdCashGl: this.isDdCashGlRow(row),
+      ddFaceValue: row.amount ?? 0,
+      ddCharges: row.ddCharges ?? 0,
+      ddGstPercentage: this.ddGstPercentage,
+      ddGstAmount: this.ddGstAmountFor(row)
     };
     this.showConfirmDialog = true;
   }
@@ -2856,7 +2998,7 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
   confirmSubmit(): void {
     this.showConfirmDialog = false;
     const row = this.selectedRow!;
-    const amount = row.amount ?? this.denominationTotal;
+    const amount = this.isDdCashGlRow(row) ? this.ddTotalPayableFor(row) : (row.amount ?? this.denominationTotal);
     const isDeposit = row.dbCr === 'Cr';
     const command = isDeposit ? 'deposit' : 'withdrawal';
     const accountId = this.accountDetails.id;
@@ -3261,7 +3403,17 @@ export class TransactionEntryComponent implements OnInit, OnDestroy {
       description: row.description || null,
       chequeNo: row.chequeNo || null,
       bankName: row.bankName || null,
-      denominationData: isCash && this.denominationTotal > 0 ? JSON.stringify(this.denominationCounts) : null
+      denominationData: isCash && this.denominationTotal > 0 ? JSON.stringify(this.denominationCounts) : null,
+      // DD + Cash + GL breakdown — persisted so the Sponsor DD issuance screen can read the face
+      // value/charges/GST back once this request is approved, instead of retyping them.
+      ...(this.isDdCashGlRow(row)
+        ? {
+            ddFaceValue: row.amount ?? 0,
+            ddCharges: row.ddCharges ?? 0,
+            ddGstPercentage: this.ddGstPercentage,
+            ddGstAmount: this.ddGstAmountFor(row)
+          }
+        : {})
     };
   }
 

src/app/chequebook/stock-management/stock-management.component.html

@@ -45,6 +45,12 @@
         @if (showReceiveForm) {
           <mat-card class="add-form">
             <mat-card-content>
+              <div class="global-allocation-note">
+                {{ 'labels.text.Highest leaf serial allocated so far, across every series' | translate }}:
+                <strong>{{ globalHighestAllocated }}</strong>
+                — {{ 'labels.text.next available start' | translate }}:
+                <strong>{{ globalHighestAllocated + 1 }}</strong>
+              </div>
               <form [formGroup]="receiveForm" (ngSubmit)="submitReceive()">
                 <div class="form-grid">
                   <mat-form-field appearance="fill">
@@ -82,7 +88,12 @@
                   <mat-form-field appearance="fill">
                     <mat-label>{{ 'labels.inputs.Range Start' | translate }}</mat-label>
                     <input matInput type="number" formControlName="rangeStart" required />
-                    <mat-hint>{{ 'labels.text.Auto-suggested to avoid overlap; editable' | translate }}</mat-hint>
+                    <mat-hint
+                      >{{ 'labels.text.Auto-suggested to avoid overlap across every series; editable' | translate }} ({{
+                        globalHighestAllocated
+                      }}
+                      + 1)</mat-hint
+                    >
                   </mat-form-field>
                   <mat-form-field appearance="fill">
                     <mat-label>{{ 'labels.inputs.Range End' | translate }}</mat-label>

src/app/chequebook/stock-management/stock-management.component.scss

@@ -92,6 +92,19 @@
   margin-bottom: 16px;
 }
 
+.global-allocation-note {
+  margin-bottom: 14px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background: rgb(25 118 210 / 8%);
+  color: rgb(0 0 0 / 70%);
+  font-size: 0.85rem;
+
+  strong {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
 .form-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

src/app/chequebook/stock-management/stock-management.component.ts

@@ -281,17 +281,22 @@ export class StockManagementComponent implements OnInit {
     return start + leaves - 1;
   }
 
+  /** Highest leaf-serial allocated so far, across every series/office — the actual number the "Range Start"
+   *  suggestion is based on. Shown directly in the form (not just silently applied to the field) so the operator
+   *  can see and trust the reasoning instead of taking a pre-filled number on faith. */
+  get globalHighestAllocated(): number {
+    return this.allStockLots.reduce((m, l) => Math.max(m, l.rangeEnd || 0), 0);
+  }
+
   /**
-   * Next unused serial WITHIN this series, so a fresh receipt continues that series' own numbering —
-   * each series is numbered independently (a separate stationery order from the press), so a different
-   * series' stock is not relevant here.
+   * Next unused serial across EVERY series, not just the one being received — a real bank allocates leaf-serial
+   * numbers from one bank-wide numbering authority, so two different cheque designs never legitimately reuse the
+   * same range. Suggesting a start that only avoids the same series' own lots is exactly what let two series end
+   * up overlapping (and, once both got issued to the same account, an unresolvable serial collision) before the
+   * backend's own overlap check was widened to match (ChequeStockLotRepository.countOverlappingAnySeries).
    */
   private nextFreeSerial(): number {
-    const seriesId = this.receiveForm.get('seriesId')?.value;
-    const maxEnd = this.allStockLots
-      .filter((l) => l.seriesId === seriesId)
-      .reduce((m, l) => Math.max(m, l.rangeEnd || 0), 0);
-    return maxEnd + 1;
+    return this.globalHighestAllocated + 1;
   }
 
   onReceiveSeriesChange(): void {

src/app/ckyc/ckyc-reports/ckyc-sample-data.ts

@@ -12,16 +12,16 @@
  * have meaningful variety out of the box.
  */
 export const SAMPLE_CKYC_FILE = `10|24401|IN4711|MH|30|31-08-2020|V1.1|||||
-20|1|01|01|||||||||||01|||01|10078|MR|RAVI|KUMAR|SHARMA|||||||01|MR|RAJESH|KUMAR|SHARMA||MRS|SUNITA|DEVI|||M|02|IN|B-01|10-08-1985|||||||||01|02|||||02|FLAT 402, SUNRISE TOWERS|MAROL ANDHERI EAST|MUMBAI|MUMBAI|MUMBAI|MH|IN|400069|01||Y|02|FLAT 402, SUNRISE TOWERS|MAROL ANDHERI EAST|MUMBAI|MUMBAI|MUMBAI|MH|IN|400069|01||||||||||||||||9892011001|||||31-08-2020|MUMBAI MAIN|31-08-2020|01|ANJALI MEHTA|ASSISTANT MANAGER|HEAD OFFICE|4|BHARAT URBAN BANK|IN4711|1|0||0|4||||||
+20|1|01|01|||||||||||01|||01|10078|MR|RAVI|KUMAR|SHARMA|||||||01|MR|RAJESH|KUMAR|SHARMA||MRS|SUNITA|DEVI|||M|02|IN|B-01|10-08-1985|||||||||01|02|||||02|FLAT 402, SUNRISE TOWERS|MAROL ANDHERI EAST|MUMBAI|MUMBAI|MUMBAI|MH|IN|400069|01||Y|02|FLAT 402, SUNRISE TOWERS|MAROL ANDHERI EAST|MUMBAI|MUMBAI|MUMBAI|MH|IN|400069|01||||||||||||||||9892011001|||||31-08-2020|MUMBAI MAIN|31-08-2020|01|ANJALI MEHTA|ASSISTANT MANAGER|HEAD OFFICE|4|CBSNEXORA BANK|IN4711|1|0||0|4||||||
 30|1|C|AAQPS8560J||01|02|||||
 70|1|10078_Sign.jpeg|09|01|01||||
 70|1|10078_Photo.jpeg|02|01|01||||
 70|1|10078_AP.jpg|04|01|01||||
-20|2|01|01|||||||||||01|||01|10079|MRS|PRIYA||PATEL|||||||01|MR|HARISH|PATEL|||MRS|MEENA|PATEL|||F|01|IN|O-04|22-03-1990|||||||||01|02|||||02|B-12, SHIVAJI NAGAR|FC ROAD|PUNE|PUNE|PUNE|MH|IN|411005|01||Y|02|B-12, SHIVAJI NAGAR|FC ROAD|PUNE|PUNE|PUNE|MH|IN|411005|01||||||||||||||||9822055002|||||31-08-2020|PUNE FC ROAD|31-08-2020|01|VIKRAM SINGH|BRANCH MANAGER|HEAD OFFICE|4|BHARAT URBAN BANK|IN4711|1|0||0|3||||||
+20|2|01|01|||||||||||01|||01|10079|MRS|PRIYA||PATEL|||||||01|MR|HARISH|PATEL|||MRS|MEENA|PATEL|||F|01|IN|O-04|22-03-1990|||||||||01|02|||||02|B-12, SHIVAJI NAGAR|FC ROAD|PUNE|PUNE|PUNE|MH|IN|411005|01||Y|02|B-12, SHIVAJI NAGAR|FC ROAD|PUNE|PUNE|PUNE|MH|IN|411005|01||||||||||||||||9822055002|||||31-08-2020|PUNE FC ROAD|31-08-2020|01|VIKRAM SINGH|BRANCH MANAGER|HEAD OFFICE|4|CBSNEXORA BANK|IN4711|1|0||0|3||||||
 30|2|E|XXXXXXXX2210||01|02|||||
 70|2|10079_Sign.jpeg|09|01|01||||
 70|2|10079_Photo.jpeg|02|01|01||||
-20|3|01|01|||||||||||01|||01|10080|MR|ARJUN||DESHMUKH|||||||01|MR|VIJAY|DESHMUKH|||MRS|REKHA|DESHMUKH|||M|01|IN|B-01|15-01-1978|||||||||01|02|||||02|HOUSE NO 7, DHARAMPETH|RAMDASPETH|NAGPUR|NAGPUR|NAGPUR|MH|IN|440010|01||Y|02|HOUSE NO 7, DHARAMPETH|RAMDASPETH|NAGPUR|NAGPUR|NAGPUR|MH|IN|440010|01||||||||||||||||9823033003|||||30-08-2020|NAGPUR DHARAMPETH|30-08-2020|01|RAHUL JOSHI|ASSISTANT MANAGER|HEAD OFFICE|4|BHARAT URBAN BANK|IN4711|1|0||0|3||||||
+20|3|01|01|||||||||||01|||01|10080|MR|ARJUN||DESHMUKH|||||||01|MR|VIJAY|DESHMUKH|||MRS|REKHA|DESHMUKH|||M|01|IN|B-01|15-01-1978|||||||||01|02|||||02|HOUSE NO 7, DHARAMPETH|RAMDASPETH|NAGPUR|NAGPUR|NAGPUR|MH|IN|440010|01||Y|02|HOUSE NO 7, DHARAMPETH|RAMDASPETH|NAGPUR|NAGPUR|NAGPUR|MH|IN|440010|01||||||||||||||||9823033003|||||30-08-2020|NAGPUR DHARAMPETH|30-08-2020|01|RAHUL JOSHI|ASSISTANT MANAGER|HEAD OFFICE|4|CBSNEXORA BANK|IN4711|1|0||0|3||||||
 30|3|C|AGTPD1144K||01|02|||||
 70|3|10080_Sign.jpeg|09|01|01||||
 70|3|10080_AP.jpg|04|01|01||||

src/app/ckyc/record-master/record-master.component.ts

@@ -446,8 +446,12 @@ export class RecordMasterComponent implements OnInit {
           };
         }
 
-        // 2. Signature — client document named 'clientSignature'
-        const signatureDoc = (documents as any[])?.find((d: any) => d?.name === 'clientSignature');
+        // 2. Signature — client document named 'clientSignature'. Multiple rows can exist for
+        // clients who re-cropped/replaced their signature before uploads became single-slot, so
+        // pick the highest id (latest) rather than the first unordered match.
+        const signatureDoc = (documents as any[])
+          ?.filter((d: any) => d?.name === 'clientSignature')
+          ?.sort((a: any, b: any) => b.id - a.id)?.[0];
         if (signatureDoc) {
           this.viewDetails.docs.signature = {
             present: true,

src/app/clearing-network/clearing-status.ts

@@ -0,0 +1,54 @@
+/**
+ * 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/.
+ */
+
+/**
+ * Maps a clearing status/decision string to one of the three shared .pill classes
+ * (ok / bad / neutral). Shared by every CTS, NACH and settlement/reconciliation screen so the
+ * colour language stays consistent across the whole clearing feature.
+ */
+export function pillClass(status: string | null | undefined): 'ok' | 'bad' | 'neutral' {
+  const s = (status || '').toUpperCase();
+  const ok = [
+    'PASSED',
+    'PASS',
+    'POSTED',
+    'MATCHED',
+    'SETTLED',
+    'SENT',
+    'SENT_TO_CLEARING_HOUSE',
+    'PROCESSED',
+    'VALIDATED',
+    'ACTIVE',
+    'CLEARED',
+    'HONOURED',
+    'COMPLETED'
+  ];
+  const bad = [
+    'RETURNED',
+    'RETURN',
+    'REJECTED',
+    'MISMATCH',
+    'DISHONOURED',
+    'CANCELLED',
+    'FAILED',
+    'FAIL',
+    'UNROUTABLE'
+  ];
+  if (ok.includes(s)) {
+    return 'ok';
+  }
+  if (bad.includes(s)) {
+    return 'bad';
+  }
+  return 'neutral';
+}
+
+/** Extracts the most specific backend error message from a Fineract-style error response. */
+export function clearingError(err: any, fallback = 'Request failed'): string {
+  return err?.error?.errors?.[0]?.defaultUserMessage ?? err?.error?.defaultUserMessage ?? fallback;
+}

src/app/clearing-network/clearing.service.ts

@@ -0,0 +1,77 @@
+/**
+ * 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 { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+/**
+ * Shared clearing services used across CTS and NACH — return-reason-code master, settlement-batch posting,
+ * and reconciliation.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class ClearingService {
+  private http = inject(HttpClient);
+
+  // ----- Return reason codes -----
+
+  /** appliesTo: 'CTS' | 'NACH'. Returns a raw array of reason codes. */
+  getReturnReasonCodes(appliesTo: string): Observable<any> {
+    return this.http.get('/clearing/return-reason-codes', {
+      params: new HttpParams().set('appliesTo', appliesTo)
+    });
+  }
+
+  // ----- Settlement batches -----
+
+  /** Server-side paginated — returns { pageItems, totalFilteredRecords }. */
+  getSettlementBatches(clearingType?: string, status?: string, offset = 0, limit = 20): Observable<any> {
+    let params = new HttpParams().set('offset', offset).set('limit', limit);
+    if (clearingType) params = params.set('clearingType', clearingType);
+    if (status) params = params.set('status', status);
+    return this.http.get('/clearing/settlement-batches', { params });
+  }
+
+  getSettlementBatch(id: string | number): Observable<any> {
+    return this.http.get(`/clearing/settlement-batches/${id}`);
+  }
+
+  /** payload: { clearingType, sourceBatchId }. */
+  prepareSettlement(payload: any): Observable<any> {
+    return this.http.post('/clearing/settlement-batches', payload);
+  }
+
+  postSettlement(id: string | number): Observable<any> {
+    return this.http.post(
+      `/clearing/settlement-batches/${id}`,
+      {},
+      { params: new HttpParams().set('command', 'post') }
+    );
+  }
+
+  rejectSettlement(id: string | number, payload: any): Observable<any> {
+    return this.http.post(`/clearing/settlement-batches/${id}`, payload, {
+      params: new HttpParams().set('command', 'reject')
+    });
+  }
+
+  // ----- Reconciliations -----
+
+  getReconciliations(clearingType?: string, offset = 0, limit = 20): Observable<any> {
+    let params = new HttpParams().set('offset', offset).set('limit', limit);
+    if (clearingType) params = params.set('clearingType', clearingType);
+    return this.http.get('/clearing/reconciliations', { params });
+  }
+
+  runReconciliation(payload: any): Observable<any> {
+    return this.http.post('/clearing/reconciliations', payload);
+  }
+}

src/app/clearing-network/signatory.service.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 { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { catchError, map, switchMap } from 'rxjs/operators';
+
+export interface JointHolder {
+  clientId: number;
+  cifNumber?: string;
+  displayName: string;
+  sharePercentage?: number;
+  signingAuthority?: string;
+  role?: string;
+  isPrimary?: boolean;
+  isMandatory?: boolean;
+}
+
+export interface AccountSignatoryInfo {
+  modeOfOperation: string | null;
+  primaryClientId: number | null;
+  primaryName: string | null;
+  jointHolders: JointHolder[];
+  availableBalance: number | null;
+  onHoldAmount: number | null;
+}
+
+/**
+ * Fetches account-holder/signatory data needed to verify a cheque's signature — reusing the exact APIs and
+ * conventions already established in the cashier module's joint-holder detail view
+ * (`transaction-entry.component.ts`), so this isn't a second, divergent implementation of the same lookup.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class SignatoryService {
+  private http = inject(HttpClient);
+
+  /**
+   * Fetches the savings or current account (with joint holders and mode of operation embedded via
+   * `associations=all` — the same Fineract convention the cashier module already relies on).
+   */
+  fetchAccountSignatories(accountType: string, accountId: number | string): Observable<AccountSignatoryInfo> {
+    const path =
+      accountType?.toUpperCase() === 'CURRENT' ? `/currentaccounts/${accountId}` : `/savingsaccounts/${accountId}`;
+    return this.http.get<any>(path, { params: new HttpParams().set('associations', 'all') }).pipe(
+      map((acc: any) => ({
+        modeOfOperation: acc?.modeOfOperation ?? null,
+        primaryClientId: acc?.clientId ?? null,
+        primaryName: acc?.clientName ?? acc?.name ?? null,
+        jointHolders: Array.isArray(acc?.jointHolders) ? acc.jointHolders : [],
+        availableBalance: acc?.summary?.availableBalance ?? null,
+        onHoldAmount: acc?.summary?.totalSavingsAmountOnHold ?? acc?.onHoldFundsDerived ?? null
+      }))
+    );
+  }
+
+  /** The client's stored signature (a document tagged name === 'clientSignature'), as a blob object URL, or null if none uploaded. */
+  fetchClientSignature(clientId: number | string): Observable<string | null> {
+    return this.http.get<any[]>(`/clients/${clientId}/documents`).pipe(
+      switchMap((docs: any[]) => {
+        // Multiple 'clientSignature' documents can exist for clients who re-cropped/replaced
+        // their signature before uploads became single-slot, so pick the highest id (latest)
+        // rather than the first unordered match.
+        const sigDoc = (docs || [])
+          .filter((d: any) => d.name === 'clientSignature' || d.name?.toLowerCase().includes('signature'))
+          .sort((a: any, b: any) => b.id - a.id)[0];
+        if (!sigDoc) {
+          return of(null);
+        }
+        return this.http.get(`/clients/${clientId}/documents/${sigDoc.id}/attachment`, { responseType: 'blob' }).pipe(
+          map((blob: Blob) => URL.createObjectURL(blob)),
+          catchError(() => of(null))
+        );
+      }),
+      catchError(() => of(null))
+    );
+  }
+
+  /** The client's photo (already base64/text from this API), or null if none uploaded. */
+  fetchClientPhoto(clientId: number | string): Observable<string | null> {
+    return this.http.get(`/clients/${clientId}/images`, { responseType: 'text' }).pipe(catchError(() => of(null)));
+  }
+}

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html

@@ -62,6 +62,22 @@
     </div>
   }
 
+  <!-- Mother requirement — shown independently of the Father/Caretaker check below -->
+  @if (!nomineeOnly && clientFamilyMembers.length > 0 && !hasMother) {
+    <div class="fm-step__empty fm-step__empty--required">
+      <mat-icon class="fm-step__empty-icon">error_outline</mat-icon>
+      <span class="fm-step__empty-required">Mother is required.</span>
+    </div>
+  }
+
+  <!-- Father-or-Caretaker requirement — shown independently of the Mother check above -->
+  @if (!nomineeOnly && clientFamilyMembers.length > 0 && !hasFather && !hasCaretaker) {
+    <div class="fm-step__empty fm-step__empty--required">
+      <mat-icon class="fm-step__empty-icon">error_outline</mat-icon>
+      <span class="fm-step__empty-required">Either Father or a Caretaker is required.</span>
+    </div>
+  }
+
   <!-- Spouse hint for married clients -->
   @if (!nomineeOnly && isMarried && !hasSpouse) {
     <div class="fm-spouse-hint">

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts

@@ -12,6 +12,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { ClientFamilyMemberDialogComponent } from './client-family-member-dialog/client-family-member-dialog.component';
 import { ImageZoomDialogComponent } from './client-family-member-dialog/client-family-member-dialog.component';
+import { FamilyMemberAddedDialogComponent } from './family-member-added-dialog.component';
 import { ClientsService } from '../../clients.service';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatIcon } from '@angular/material/icon';
@@ -152,6 +153,22 @@ export class ClientFamilyMembersStepComponent implements OnInit {
     ref.afterClosed().subscribe((response: any) => {
       if (response?.member) {
         this.clientFamilyMembers.push(response.member);
+        this.showFamilyMemberAddedConfirmation(response.member);
+      }
+    });
+  }
+
+  /** Confirms what was just recorded — in particular the linked client's own CBS Client ID,
+   * since the "Add Member" dialog closes silently otherwise and gives no acknowledgement. */
+  private showFamilyMemberAddedConfirmation(member: any): void {
+    this.dialog.open(FamilyMemberAddedDialogComponent, {
+      width: '360px',
+      data: {
+        clientId: member._linkedClient?.id ?? member.linkedClientId ?? null,
+        name: member._linkedClient?.displayName || member.firstName,
+        relationship: this.getRelName(member.relationshipId),
+        dateOfBirth: member.dateOfBirth,
+        isDependent: member.isDependent
       }
     });
   }
@@ -223,6 +240,33 @@ export class ClientFamilyMembersStepComponent implements OnInit {
     return this.clientFamilyMembers.length > 0;
   }
 
+  /** True if a family member with the given relationship (case-insensitive) has been added */
+  private hasRelationship(name: string): boolean {
+    const target = name.toLowerCase();
+    return this.clientFamilyMembers.some((m: any) => {
+      const resolved = this.getRelName(m.relationshipId ?? m.relationship).toLowerCase();
+      if (resolved === target) return true;
+      return typeof m.relationship === 'string' && m.relationship.toLowerCase() === target;
+    });
+  }
+
+  get hasMother(): boolean {
+    return this.hasRelationship('mother');
+  }
+
+  get hasFather(): boolean {
+    return this.hasRelationship('father');
+  }
+
+  get hasCaretaker(): boolean {
+    return this.hasRelationship('caretaker');
+  }
+
+  /** Mother is always required; Father is required unless a Caretaker has been added instead. */
+  get familyRelationshipRulesMet(): boolean {
+    return this.hasMother && (this.hasFather || this.hasCaretaker);
+  }
+
   /** Check if client's marital status is "Married" */
   get isMarried(): boolean {
     if (!this.maritalStatusId || !this.maritalStatusOptions?.length) return false;

src/app/clients/client-stepper/client-family-members-step/family-member-added-dialog.component.ts

@@ -0,0 +1,145 @@
+/**
+ * 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, inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogActions } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { MatButton } from '@angular/material/button';
+
+/**
+ * Confirmation popup shown right after a family member is added — surfaces the linked
+ * client's own CBS Client ID (when the member was linked to an existing client rather than
+ * entered manually) alongside name/relationship, since the "Add Member" dialog itself just
+ * closed silently before this with no acknowledgement of what got recorded.
+ */
+@Component({
+  selector: 'mifosx-family-member-added-dialog',
+  imports: [
+    MatDialogTitle,
+    MatDialogActions,
+    MatIcon,
+    MatButton
+  ],
+  template: `
+    <h2 mat-dialog-title class="fma-title">
+      <mat-icon class="fma-title__icon">check_circle</mat-icon>
+      Family Member Added
+    </h2>
+    <div class="fma-body">
+      @if (data.clientId) {
+        <div class="fma-row fma-row--id">
+          <span class="fma-row__label">Client ID</span>
+          <span class="fma-row__value fma-row__value--id">{{ data.clientId }}</span>
+        </div>
+      }
+      <div class="fma-row">
+        <span class="fma-row__label">Name</span>
+        <span class="fma-row__value">{{ data.name }}</span>
+      </div>
+      @if (data.relationship) {
+        <div class="fma-row">
+          <span class="fma-row__label">Relationship</span>
+          <span class="fma-row__value">{{ data.relationship }}</span>
+        </div>
+      }
+      @if (data.dateOfBirth) {
+        <div class="fma-row">
+          <span class="fma-row__label">Date of Birth</span>
+          <span class="fma-row__value">{{ data.dateOfBirth }}</span>
+        </div>
+      }
+      @if (data.isDependent) {
+        <div class="fma-row">
+          <span class="fma-row__label">Dependent</span>
+          <span class="fma-row__value">Yes</span>
+        </div>
+      }
+    </div>
+    <mat-dialog-actions align="end">
+      <button mat-flat-button color="primary" (click)="dialogRef.close()">Done</button>
+    </mat-dialog-actions>
+  `,
+  styles: [
+    `
+      .fma-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 17px;
+        font-weight: 700;
+        color: #0f172a;
+        margin: 0;
+        padding: 20px 24px 4px;
+      }
+
+      .fma-title__icon {
+        color: #059669;
+      }
+
+      .fma-body {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding: 12px 24px 8px;
+        min-width: 280px;
+      }
+
+      .fma-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 16px;
+        padding: 8px 0;
+        border-bottom: 1px solid #f1f5f9;
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      .fma-row__label {
+        font-size: 12px;
+        color: #64748b;
+        font-weight: 500;
+      }
+
+      .fma-row__value {
+        font-size: 13px;
+        color: #0f172a;
+        font-weight: 600;
+        text-align: right;
+      }
+
+      .fma-row--id {
+        background: #eff6ff;
+        margin: 0 -24px;
+        padding: 10px 24px;
+      }
+
+      .fma-row__value--id {
+        font-family: 'Roboto Mono', monospace;
+        color: #1353a0;
+        font-size: 14px;
+      }
+
+      mat-dialog-actions {
+        padding: 8px 24px 16px;
+      }
+    `
+  ]
+})
+export class FamilyMemberAddedDialogComponent {
+  dialogRef = inject<MatDialogRef<FamilyMemberAddedDialogComponent>>(MatDialogRef);
+  data: {
+    clientId?: string | number | null;
+    name: string;
+    relationship?: string;
+    dateOfBirth?: string;
+    isDependent?: boolean;
+  } = inject(MAT_DIALOG_DATA);
+}

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

@@ -136,7 +136,7 @@
                 | translate
             }}
           </mat-label>
-          <input matInput required formControlName="fullname" />
+          <input matInput required formControlName="fullname" autocomplete="off" />
           @if (createClientForm.controls.fullname.hasError('required')) {
             <mat-error>Client name is <strong>required</strong></mat-error>
           } @else if (createClientForm.controls.fullname.hasError('pattern')) {
@@ -214,7 +214,7 @@
             <mat-form-field appearance="outline" class="name-field first-name">
               <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
               <span matPrefix class="field-prefix-icon"><mat-icon>badge</mat-icon></span>
-              <input matInput required formControlName="firstname" />
+              <input matInput required formControlName="firstname" autocomplete="off" />
               @if (createClientForm.controls.firstname.hasError('required')) {
                 <mat-error>First name is <strong>required</strong></mat-error>
               } @else if (createClientForm.controls.firstname.hasError('pattern')) {
@@ -228,7 +228,7 @@
             <mat-form-field appearance="outline" class="name-field middle-name">
               <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
               <span matPrefix class="field-prefix-icon"><mat-icon>person_outline</mat-icon></span>
-              <input matInput formControlName="middlename" />
+              <input matInput formControlName="middlename" autocomplete="off" />
               @if (
                 createClientForm.controls.middlename?.hasError('pattern') &&
                 createClientForm.controls.middlename?.touched
@@ -241,7 +241,7 @@
             <mat-form-field appearance="outline" class="name-field last-name">
               <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
               <span matPrefix class="field-prefix-icon"><mat-icon>person</mat-icon></span>
-              <input matInput required formControlName="lastname" />
+              <input matInput required formControlName="lastname" autocomplete="off" />
               @if (createClientForm.controls.lastname.hasError('required')) {
                 <mat-error>Last name is <strong>required</strong></mat-error>
               } @else if (createClientForm.controls.lastname.hasError('pattern')) {
@@ -358,11 +358,14 @@
           @if (isMinor) {
             <span class="minor-badge">Minor</span>
           }
+          @if (isSeniorCitizen) {
+            <span class="senior-citizen-badge">Senior Citizen</span>
+          }
         </div>
       }
     </div>
 
-    <!-- Minor / Guardian Mapping (mandatory if age < 10) -->
+    <!-- Minor / Guardian Mapping (mandatory if age < 18) -->
     @if (isMinor && createClientForm.get('legalFormId')?.value === LegalFormId.PERSON) {
       <div class="guardian-section">
         <!-- Header bar -->
@@ -995,6 +998,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>
 
@@ -1006,69 +1035,67 @@
         Education &amp; Social Details
       </h4>
       <div class="form-grid">
-        <!-- Education Level (non-minor) -->
-        @if (!isMinor) {
-          <mat-form-field appearance="outline" class="form-field">
-            <mat-label>Education Level</mat-label>
-            <mat-select formControlName="educationLevelId">
-              <mat-select-trigger>
-                @if (getSelectedEducationLevel()) {
-                  <span class="icon-option">
-                    <mat-icon class="icon-option-icon">{{
-                      getEducationLevelIcon(getSelectedEducationLevel().name)
-                    }}</mat-icon>
-                    {{ getSelectedEducationLevel().name }}
-                  </span>
-                }
-              </mat-select-trigger>
-              @for (el of educationLevelOptions; track el) {
-                <mat-option [value]="el.id">
-                  <span class="icon-option">
-                    <mat-icon class="icon-option-icon">{{ getEducationLevelIcon(el.name) }}</mat-icon>
-                    {{ el.name }}
-                  </span>
-                </mat-option>
+        <!-- Education Level -->
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Education Level</mat-label>
+          <mat-select formControlName="educationLevelId">
+            <mat-select-trigger>
+              @if (getSelectedEducationLevel()) {
+                <span class="icon-option">
+                  <mat-icon class="icon-option-icon">{{
+                    getEducationLevelIcon(getSelectedEducationLevel().name)
+                  }}</mat-icon>
+                  {{ getSelectedEducationLevel().name }}
+                </span>
               }
-            </mat-select>
-          </mat-form-field>
+            </mat-select-trigger>
+            @for (el of educationLevelOptions; track el) {
+              <mat-option [value]="el.id">
+                <span class="icon-option">
+                  <mat-icon class="icon-option-icon">{{ getEducationLevelIcon(el.name) }}</mat-icon>
+                  {{ el.name }}
+                </span>
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
 
-          <!-- Degree / Qualification (depends on Education Level) -->
-          <mat-form-field appearance="outline" class="form-field">
-            <mat-label>Degree / Qualification</mat-label>
-            <mat-select
-              formControlName="degreeQualificationId"
-              [placeholder]="getSelectedEducationLevel() ? 'Select Degree' : 'Select Education Level first'"
-            >
-              <mat-select-trigger>
-                @if (getSelectedDegreeQualification()) {
-                  <span class="icon-option">
-                    <mat-icon class="icon-option-icon">{{
-                      getDegreeQualificationIcon(getSelectedDegreeQualification().name)
-                    }}</mat-icon>
-                    {{ getSelectedDegreeQualification().name }}
-                  </span>
-                }
-              </mat-select-trigger>
-              @for (dq of filteredDegreeQualificationOptions; track dq) {
-                <mat-option [value]="dq.id">
-                  <span class="icon-option">
-                    <mat-icon class="icon-option-icon">{{ getDegreeQualificationIcon(dq.name) }}</mat-icon>
-                    {{ dq.name }}
-                  </span>
-                </mat-option>
+        <!-- Degree / Qualification (depends on Education Level) -->
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Degree / Qualification</mat-label>
+          <mat-select
+            formControlName="degreeQualificationId"
+            [placeholder]="getSelectedEducationLevel() ? 'Select Degree' : 'Select Education Level first'"
+          >
+            <mat-select-trigger>
+              @if (getSelectedDegreeQualification()) {
+                <span class="icon-option">
+                  <mat-icon class="icon-option-icon">{{
+                    getDegreeQualificationIcon(getSelectedDegreeQualification().name)
+                  }}</mat-icon>
+                  {{ getSelectedDegreeQualification().name }}
+                </span>
               }
-              @if (!getSelectedEducationLevel()) {
-                <mat-option disabled>
-                  <em>Please select Education Level first</em>
-                </mat-option>
-              } @else if (filteredDegreeQualificationOptions.length === 0) {
-                <mat-option disabled>
-                  <em>No options available</em>
-                </mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-        }
+            </mat-select-trigger>
+            @for (dq of filteredDegreeQualificationOptions; track dq) {
+              <mat-option [value]="dq.id">
+                <span class="icon-option">
+                  <mat-icon class="icon-option-icon">{{ getDegreeQualificationIcon(dq.name) }}</mat-icon>
+                  {{ dq.name }}
+                </span>
+              </mat-option>
+            }
+            @if (!getSelectedEducationLevel()) {
+              <mat-option disabled>
+                <em>Please select Education Level first</em>
+              </mat-option>
+            } @else if (filteredDegreeQualificationOptions.length === 0) {
+              <mat-option disabled>
+                <em>No options available</em>
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
 
         <!-- Religion -->
         <mat-form-field appearance="outline" class="form-field">
@@ -1191,21 +1218,25 @@
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="form-field">
-          <mat-label>Annual Turnover (Last FY)</mat-label>
+          <mat-label>Annual Income</mat-label>
           <span matPrefix class="rupee-prefix">&#8377;</span>
-          <input matInput type="number" formControlName="annualTurnover" min="0" />
+          <input matInput type="number" formControlName="annualIncome" min="0" />
           @if (
-            createClientForm.get('annualTurnover')?.hasError('pattern') &&
-            createClientForm.get('annualTurnover')?.touched
+            createClientForm.get('annualIncome')?.hasError('pattern') && createClientForm.get('annualIncome')?.touched
           ) {
             <mat-error>Enter a valid amount</mat-error>
           } @else if (
-            createClientForm.get('annualTurnover')?.hasError('min') && createClientForm.get('annualTurnover')?.touched
+            createClientForm.get('annualIncome')?.hasError('min') && createClientForm.get('annualIncome')?.touched
           ) {
             <mat-error>Amount cannot be negative</mat-error>
           }
         </mat-form-field>
 
+        <div class="full-width subsection-title">
+          <fa-icon icon="coins" class="subsection-icon"></fa-icon>
+          Other Income
+        </div>
+
         <mat-form-field appearance="outline" class="form-field">
           <mat-label>Agriculture Income</mat-label>
           <span matPrefix class="rupee-prefix">&#8377;</span>
@@ -1239,6 +1270,128 @@
             <mat-error>Amount cannot be negative</mat-error>
           }
         </mat-form-field>
+
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Monthly Turnover</mat-label>
+          <span matPrefix class="rupee-prefix">&#8377;</span>
+          <input matInput type="number" formControlName="monthlyTurnover" min="0" />
+          @if (
+            createClientForm.get('monthlyTurnover')?.hasError('pattern') &&
+            createClientForm.get('monthlyTurnover')?.touched
+          ) {
+            <mat-error>Enter a valid amount</mat-error>
+          } @else if (
+            createClientForm.get('monthlyTurnover')?.hasError('min') && createClientForm.get('monthlyTurnover')?.touched
+          ) {
+            <mat-error>Amount cannot be negative</mat-error>
+          }
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="form-field">
+          <mat-label>Yearly Turnover</mat-label>
+          <span matPrefix class="rupee-prefix">&#8377;</span>
+          <input matInput type="number" formControlName="annualTurnover" min="0" />
+          @if (
+            createClientForm.get('annualTurnover')?.hasError('pattern') &&
+            createClientForm.get('annualTurnover')?.touched
+          ) {
+            <mat-error>Enter a valid amount</mat-error>
+          } @else if (
+            createClientForm.get('annualTurnover')?.hasError('min') && createClientForm.get('annualTurnover')?.touched
+          ) {
+            <mat-error>Amount cannot be negative</mat-error>
+          }
+        </mat-form-field>
+
+        <div class="full-width subsection-title">
+          <fa-icon icon="user-shield" class="subsection-icon"></fa-icon>
+          Senior Citizen / Person with Disability
+        </div>
+
+        @if (isSeniorCitizen) {
+          <div class="full-width senior-citizen-auto-note">
+            <fa-icon icon="check-circle"></fa-icon>
+            Senior Citizen (60+ years) — detected automatically from Date of Birth
+          </div>
+
+          <div class="full-width doc-upload-field">
+            <label class="doc-upload-label">
+              <input type="file" accept=".jpg,.jpeg,.png,.pdf" hidden (change)="onSeniorCitizenProofSelected($event)" />
+              <fa-icon icon="file-upload"></fa-icon>
+              @if (seniorCitizenProofFile) {
+                <span>{{ seniorCitizenProofFile.name }}</span>
+              } @else if (existingSeniorCitizenProofDoc) {
+                <span>{{ existingSeniorCitizenProofDoc.name }} (uploaded)</span>
+              } @else {
+                <span>Upload Senior Citizen Proof (Age / ID Proof) &mdash; optional</span>
+              }
+            </label>
+            @if (seniorCitizenProofFile) {
+              <button type="button" mat-icon-button (click)="removeSeniorCitizenProof()" matTooltip="Remove">
+                <mat-icon>close</mat-icon>
+              </button>
+            } @else if (existingSeniorCitizenProofDoc) {
+              <button type="button" mat-icon-button (click)="viewExistingSeniorCitizenProof()" matTooltip="View">
+                <mat-icon>visibility</mat-icon>
+              </button>
+              <button type="button" mat-icon-button (click)="removeExistingSeniorCitizenProof()" matTooltip="Remove">
+                <mat-icon>close</mat-icon>
+              </button>
+            }
+          </div>
+        }
+
+        <div class="checkbox-field full-width">
+          <mat-checkbox formControlName="isPwd">Person with Disability (PWD)</mat-checkbox>
+        </div>
+
+        @if (createClientForm.get('isPwd')?.value) {
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Disability Type</mat-label>
+            <mat-select formControlName="pwdCategoryId">
+              @for (category of pwdCategoryOptions; track category.id) {
+                <mat-option [value]="category.id">{{ category.name }}</mat-option>
+              }
+            </mat-select>
+            @if (seniorPwdDocsTouched && !createClientForm.get('pwdCategoryId')?.value) {
+              <mat-error>Disability type is required</mat-error>
+            }
+          </mat-form-field>
+
+          <div class="full-width doc-upload-field">
+            <label
+              class="doc-upload-label"
+              [class.doc-upload-label--missing]="
+                seniorPwdDocsTouched && !pwdCertificateFile && !existingPwdCertificateDoc
+              "
+            >
+              <input type="file" accept=".jpg,.jpeg,.png,.pdf" hidden (change)="onPwdCertificateSelected($event)" />
+              <fa-icon icon="file-upload"></fa-icon>
+              @if (pwdCertificateFile) {
+                <span>{{ pwdCertificateFile.name }}</span>
+              } @else if (existingPwdCertificateDoc) {
+                <span>{{ existingPwdCertificateDoc.name }} (uploaded)</span>
+              } @else {
+                <span>Upload Disability Certificate <span class="doc-upload-req">*</span></span>
+              }
+            </label>
+            @if (pwdCertificateFile) {
+              <button type="button" mat-icon-button (click)="removePwdCertificate()" matTooltip="Remove">
+                <mat-icon>close</mat-icon>
+              </button>
+            } @else if (existingPwdCertificateDoc) {
+              <button type="button" mat-icon-button (click)="viewExistingPwdCertificate()" matTooltip="View">
+                <mat-icon>visibility</mat-icon>
+              </button>
+              <button type="button" mat-icon-button (click)="removeExistingPwdCertificate()" matTooltip="Remove">
+                <mat-icon>close</mat-icon>
+              </button>
+            }
+            @if (seniorPwdDocsTouched && !pwdCertificateFile && !existingPwdCertificateDoc) {
+              <span class="doc-upload-error">Required when PWD is checked</span>
+            }
+          </div>
+        }
       </div>
     </div>
   }

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

@@ -56,6 +56,78 @@ form {
   grid-column: 1 / -1;
 }
 
+.senior-citizen-auto-note {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #1074b9;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin-bottom: 8px;
+}
+
+.doc-upload-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.doc-upload-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #475569;
+  cursor: pointer;
+  transition: border-color 0.15s;
+
+  &:hover {
+    border-color: #1074b9;
+  }
+
+  &.doc-upload-label--missing {
+    border-color: #dc2626;
+    color: #dc2626;
+  }
+}
+
+.doc-upload-req {
+  color: #dc2626;
+  font-weight: 700;
+}
+
+.doc-upload-error {
+  font-size: 11px;
+  color: #dc2626;
+}
+
+.subsection-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #6b7280;
+  margin: 20px 0 4px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+
+  .subsection-icon {
+    color: var(--md-sys-color-primary, #1074b9);
+    font-size: 12px;
+  }
+}
+
 .checkbox-field {
   display: flex;
   align-items: center;
@@ -234,6 +306,18 @@ form {
   letter-spacing: 0.5px;
 }
 
+.senior-citizen-badge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: #eff6ff;
+  color: #1074b9;
+  margin-left: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
 /* ═══ Guardian Section (Redesigned) ═══ */
 .guardian-section {
   margin-top: 12px;
@@ -1493,6 +1577,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 +1615,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

@@ -46,10 +46,15 @@ import { MatSelectTrigger } from '@angular/material/select';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogContent, MatDialogClose } from '@angular/material/dialog';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { DocumentPreviewDialogComponent } from '../../shared/document-preview-dialog/document-preview-dialog.component';
 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 +73,8 @@ import { DinVerifyDialogComponent } from './din-verify-dialog.component';
     MatIcon,
     MatTooltip,
     MatSelectTrigger,
-    DateFormatPipe
+    DateFormatPipe,
+    ContactOtpBlockComponent
   ]
 })
 export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges {
@@ -88,6 +94,148 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
   /** Expose enum to template */
   readonly LegalFormId = LegalFormId;
 
+  /** Senior Citizen proof is optional; the PWD certificate is mandatory (see seniorPwdDocsComplete). Both, when
+   * attached, are uploaded after client creation. */
+  seniorCitizenProofFile: File | null = null;
+  pwdCertificateFile: File | null = null;
+
+  /** Previously-uploaded documents, loaded in edit mode so the certificate doesn't appear to
+   * "disappear" on reopening — the raw File properties above only ever hold a fresh selection. */
+  existingSeniorCitizenProofDoc: { id: string; name: string } | null = null;
+  existingPwdCertificateDoc: { id: string; name: string } | null = null;
+
+  /** Disability categories (per the Rights of Persons with Disabilities Act, 2016) — fetched from
+   * m_code_value (code "PwdCategory") via the client template, same as occupationCategoryOptions.
+   * Admins can add/reorder/deactivate entries from System -> Manage Codes without a code change. */
+  pwdCategoryOptions: any[] = [];
+  riskRules: any[] = [];
+
+  /** Set true after a save attempt so the UI can highlight a missing required document */
+  seniorPwdDocsTouched = false;
+
+  /** Senior Citizen proof is optional. The PWD certificate + disability type are mandatory
+   * whenever the PWD checkbox is set. */
+  get seniorPwdDocsComplete(): boolean {
+    const pwdOk =
+      !this.createClientForm.get('isPwd')?.value ||
+      ((!!this.pwdCertificateFile || !!this.existingPwdCertificateDoc) &&
+        !!this.createClientForm.get('pwdCategoryId')?.value);
+    return pwdOk;
+  }
+
+  markSeniorPwdDocsTouched(): void {
+    this.seniorPwdDocsTouched = true;
+  }
+
+  onSeniorCitizenProofSelected(event: any): void {
+    const file = event.target?.files?.[0];
+    if (file) {
+      this.seniorCitizenProofFile = file;
+    }
+  }
+
+  removeSeniorCitizenProof(): void {
+    this.seniorCitizenProofFile = null;
+  }
+
+  onPwdCertificateSelected(event: any): void {
+    const file = event.target?.files?.[0];
+    if (file) {
+      this.pwdCertificateFile = file;
+    }
+  }
+
+  removePwdCertificate(): void {
+    this.pwdCertificateFile = null;
+  }
+
+  /** Loads previously-uploaded senior-citizen-proof / PWD-certificate documents in edit mode —
+   * mirrors the KYC step's loadExistingSignature() pattern so re-opening edit shows what's
+   * already on file instead of an empty upload prompt. */
+  private loadExistingSeniorPwdDocuments(): void {
+    const clientId = this.clientData?.id;
+    if (!clientId) {
+      return;
+    }
+    this.clientService.getClientDocuments(clientId.toString()).subscribe({
+      next: (documents: any[]) => {
+        const seniorDoc = documents
+          ?.filter((d: any) => d.name === 'seniorCitizenProof')
+          ?.sort((a: any, b: any) => b.id - a.id)?.[0];
+        if (seniorDoc?.id) {
+          this.existingSeniorCitizenProofDoc = {
+            id: seniorDoc.id.toString(),
+            name: seniorDoc.fileName || 'Senior Citizen Proof'
+          };
+        }
+        const pwdDoc = documents
+          ?.filter((d: any) => d.name === 'pwdCertificate')
+          ?.sort((a: any, b: any) => b.id - a.id)?.[0];
+        if (pwdDoc?.id) {
+          this.existingPwdCertificateDoc = {
+            id: pwdDoc.id.toString(),
+            name: pwdDoc.fileName || 'Disability Certificate'
+          };
+        }
+      },
+      error: () => {}
+    });
+  }
+
+  viewExistingSeniorCitizenProof(): void {
+    const clientId = this.clientData?.id;
+    if (!clientId || !this.existingSeniorCitizenProofDoc) {
+      return;
+    }
+    this.clientService.downloadClientDocument(clientId.toString(), this.existingSeniorCitizenProofDoc.id).subscribe({
+      next: (blob: any) =>
+        this.dialog.open(DocumentPreviewDialogComponent, {
+          data: {
+            blob,
+            title: this.existingSeniorCitizenProofDoc?.name,
+            fileName: this.existingSeniorCitizenProofDoc?.name
+          }
+        }),
+      error: () => {}
+    });
+  }
+
+  removeExistingSeniorCitizenProof(): void {
+    const clientId = this.clientData?.id;
+    if (!clientId || !this.existingSeniorCitizenProofDoc) {
+      return;
+    }
+    this.clientService.deleteClientDocument(clientId.toString(), this.existingSeniorCitizenProofDoc.id).subscribe({
+      next: () => (this.existingSeniorCitizenProofDoc = null),
+      error: () => {}
+    });
+  }
+
+  viewExistingPwdCertificate(): void {
+    const clientId = this.clientData?.id;
+    if (!clientId || !this.existingPwdCertificateDoc) {
+      return;
+    }
+    this.clientService.downloadClientDocument(clientId.toString(), this.existingPwdCertificateDoc.id).subscribe({
+      next: (blob: any) =>
+        this.dialog.open(DocumentPreviewDialogComponent, {
+          data: { blob, title: this.existingPwdCertificateDoc?.name, fileName: this.existingPwdCertificateDoc?.name }
+        }),
+      error: () => {}
+    });
+  }
+
+  removeExistingPwdCertificate(): void {
+    const clientId = this.clientData?.id;
+    if (!clientId || !this.existingPwdCertificateDoc) {
+      return;
+    }
+    this.clientService.deleteClientDocument(clientId.toString(), this.existingPwdCertificateDoc.id).subscribe({
+      next: () => (this.existingPwdCertificateDoc = null),
+      error: () => {}
+    });
+  }
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -150,8 +298,10 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
   ];
   /** Calculated age detail string (Y/M/D) */
   calculatedAgeDetail: string | null = null;
-  /** Whether client is a minor (age < 10) */
+  /** Whether client is a minor (age < 18) */
   isMinor = false;
+  /** Whether client is a senior citizen (age >= 60) — auto-detected from Date of Birth */
+  isSeniorCitizen = false;
   /** Age breakdown for DB storage */
   ageBreakdown = { years: 0, months: 0, days: 0 };
 
@@ -183,6 +333,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 = [
     {
@@ -344,6 +533,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
   screeningLogId: number | null = null;
   /** Snapshot of the name that was last verified — used to invalidate verification when name changes */
   private verifiedName: string = '';
+  /** True while prefillForEdit() is patching historical monthly/annual values — see linkMonthlyAnnual(). */
+  private suppressMonthlyAnnualLink = false;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
@@ -358,6 +549,18 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
   ngOnInit() {
     this.maxDate = this.settingsService.businessDate;
     this.setOptions();
+
+    // Risk rules are an enhancement on top of the default low/medium-risk fallback in
+    // calculatedRisk — if the endpoint isn't available (e.g. not yet deployed on this
+    // backend), fail silently rather than surfacing a raw HTTP-error toast to the user.
+    this.clientService.getClientRiskRules().subscribe({
+      next: (rules) => {
+        this.riskRules = rules || [];
+      },
+      error: () => {
+        this.riskRules = [];
+      }
+    });
     // Fetch marital status options from code values
     this.clientService.getCodeValuesByName('MaritalStatus').subscribe((options) => {
       this.maritalStatusOptions = options || [];
@@ -422,6 +625,51 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     }
   }
 
+  /**
+   * Resets transient session state back to a blank-client baseline.
+   *
+   * This app's RouteReusableStrategy (core/route/route-reusable-strategy.ts) keeps the SAME
+   * component instance alive across repeat visits to /clients/create — `ngOnInit`/the
+   * constructor never re-run for a second "create new client" session. Without this, computed
+   * state like `isMinor`, the linked guardian, or a prior sanctions/OTP verification would leak
+   * from whatever client was created in the previous session into the new one. Called by
+   * CreateClientComponent whenever `route.data` re-emits (which happens on every navigation,
+   * even a reused one).
+   */
+  resetForNewClient(): void {
+    this.createClientForm.reset();
+    // legalFormId's raw FormControl default is '' — the buildDependencies() subscription
+    // treats any non-PERSON value (including '') as "non-individual" and adds fullname /
+    // clientNonPersonDetails. Patch it back to the same PERSON default buildDependencies()
+    // itself applies on first construction, so a reset lands on a blank Individual client
+    // instead of stuck with leftover Entity-only controls.
+    this.createClientForm.get('legalFormId')?.setValue(LegalFormId.PERSON);
+    this.isMinor = false;
+    this.calculatedAgeDetail = null;
+    this.ageBreakdown = { years: 0, months: 0, days: 0 };
+    this.selectedGuardian = null;
+    this.guardianSearchText = '';
+    this.guardianSearchResults = [];
+    this.guardianExpanded = false;
+    if (this.createClientForm.get('guardianDetails')) {
+      this.createClientForm.removeControl('guardianDetails');
+    }
+    // Verification state must not carry over — a previous client's cleared sanctions
+    // screening or verified OTP must not silently apply to a different new client.
+    this.mobileVerified = false;
+    this.dipLookupLogId = null;
+    this.dipTimestamp = null;
+    this.alternateMobileVerified = false;
+    this.alternateDipLookupLogId = null;
+    this.alternateDipTimestamp = null;
+    this.mobileNewOtpId = null;
+    this.emailNewOtpId = null;
+    this.sanctionsVerified = false;
+    this.sanctionsBlocked = false;
+    this.screeningLogId = null;
+    this.verifiedName = '';
+  }
+
   /**
    * Pre-fills the General step form from a manually-entered family member
    * when the user clicks "Create as Client" on the family members tab.
@@ -461,6 +709,13 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
    */
   private prefillForEdit() {
     const data = this.clientData;
+    this.loadExistingSeniorPwdDocuments();
+
+    // Loading an existing client's independently-saved monthly/annual values must not run
+    // through the auto-calc in linkMonthlyAnnual() — patching monthlyIncome then annualIncome
+    // (or vice versa) would otherwise have each overwrite the other via its valueChanges,
+    // instead of keeping the exact historical values as saved.
+    this.suppressMonthlyAnnualLink = true;
 
     // Patch all base controls that exist on the form
     this.createClientForm.patchValue({
@@ -477,17 +732,26 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
       mobileNo: data.mobileNo,
       alternateMobileNo: data.alternateMobileNo || '',
       emailAddress: data.emailAddress,
-      dateOfBirth: data.dateOfBirth ? new Date(data.dateOfBirth) : '',
+      dateOfBirth: data.dateOfBirth
+        ? Array.isArray(data.dateOfBirth)
+          ? new Date(data.dateOfBirth[0], data.dateOfBirth[1] - 1, data.dateOfBirth[2])
+          : new Date(data.dateOfBirth)
+        : '',
       occupationCategoryId: data.occupationCategory?.id || data.occupationCategoryId || '',
       occupationId: data.occupation?.id || data.occupationId || '',
       monthlyIncome: data.monthlyIncome || '',
+      annualIncome: data.annualIncome || '',
       annualTurnover: data.annualTurnover || '',
+      monthlyTurnover: data.monthlyTurnover || '',
+      isPwd: data.isPwd || false,
+      pwdCategoryId: data.pwdCategory?.id || '',
       agricultureIncome: data.agricultureIncome || '',
       nonAgricultureIncome: data.nonAgricultureIncome || '',
       submittedOnDate: data.timeline?.submittedOnDate
         ? new Date(data.timeline.submittedOnDate)
         : this.settingsService.businessDate
     });
+    this.suppressMonthlyAnnualLink = false;
 
     // Patch name fields (already created by buildDependencies via legalFormId subscription)
     const legalFormId = data.legalForm?.id || LegalFormId.PERSON;
@@ -555,6 +819,42 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         }
       });
     }
+
+    // Restore linked guardian for minor clients. The `guardianDetails` control group above was
+    // just created synchronously by the dateOfBirth subscription (patched a few lines up), which
+    // also resets `selectedGuardian` to null — so this has to run after that patch, not before it.
+    // If a guardian is linked in the database (or the client is marked minor), we force minor state
+    // and explicitly ensure the form control exists so the guardian details load correctly.
+    if ((data.isMinor || this.isMinor || data.guardianClientId) && data.guardianClientId) {
+      this.isMinor = true;
+      if (!this.createClientForm.get('guardianDetails')) {
+        this.createClientForm.addControl(
+          'guardianDetails',
+          this.formBuilder.group({
+            guardianClientId: [
+              '',
+              Validators.required
+            ],
+            guardianRelation: [
+              '',
+              Validators.required
+            ]
+          })
+        );
+      }
+      setTimeout(() => {
+        this.createClientForm.get('guardianDetails')?.patchValue({
+          guardianClientId: data.guardianClientId,
+          guardianRelation: data.guardianRelation || ''
+        });
+        this.selectedGuardian = {
+          id: data.guardianClientId,
+          displayName: data.guardianClientDisplayName || '',
+          _loading: true
+        };
+        this.fetchClientFullDetails(data.guardianClientId, this.selectedGuardian);
+      });
+    }
   }
 
   /**
@@ -621,6 +921,13 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
           Validators.min(0)
         ]
       ],
+      annualIncome: [
+        '',
+        [
+          Validators.pattern(/^\d+(\.\d{1,2})?$/),
+          Validators.min(0)
+        ]
+      ],
       annualTurnover: [
         '',
         [
@@ -628,6 +935,15 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
           Validators.min(0)
         ]
       ],
+      monthlyTurnover: [
+        '',
+        [
+          Validators.pattern(/^\d+(\.\d{1,2})?$/),
+          Validators.min(0)
+        ]
+      ],
+      isPwd: [false],
+      pwdCategoryId: [''],
       agricultureIncome: [
         '',
         [
@@ -647,6 +963,43 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
         Validators.required
       ]
     });
+
+    this.linkMonthlyAnnual('monthlyIncome', 'annualIncome');
+    this.linkMonthlyAnnual('monthlyTurnover', 'annualTurnover');
+  }
+
+  /**
+   * Keeps a Monthly/Annual pair of amount fields in sync at a 12x ratio — typing into either
+   * one auto-fills the other. Uses { emitEvent: false } on the write side so the two
+   * subscriptions don't trigger each other back and forth.
+   */
+  /** Rounds to at most 2 decimals without padding whole numbers with a trailing ".00". */
+  private round2(n: number): string {
+    return (Math.round(n * 100) / 100).toString();
+  }
+
+  private linkMonthlyAnnual(monthlyControlName: string, annualControlName: string): void {
+    const monthly = this.createClientForm.get(monthlyControlName);
+    const annual = this.createClientForm.get(annualControlName);
+    if (!monthly || !annual) {
+      return;
+    }
+
+    monthly.valueChanges.subscribe((value) => {
+      if (this.suppressMonthlyAnnualLink) {
+        return;
+      }
+      const num = parseFloat(value);
+      annual.setValue(!isNaN(num) && num >= 0 ? this.round2(num * 12) : '', { emitEvent: false });
+    });
+
+    annual.valueChanges.subscribe((value) => {
+      if (this.suppressMonthlyAnnualLink) {
+        return;
+      }
+      const num = parseFloat(value);
+      monthly.setValue(!isNaN(num) && num >= 0 ? this.round2(num / 12) : '', { emitEvent: false });
+    });
   }
 
   /**
@@ -665,6 +1018,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     this.occupationCategoryOptions = this.clientTemplate.occupationCategoryOptions || [];
     this.occupationOptions = this.clientTemplate.occupationOptions || [];
     this.salutationOptions = this.clientTemplate.salutationOptions || [];
+    this.pwdCategoryOptions = this.clientTemplate.pwdCategoryOptions || [];
   }
 
   /**
@@ -780,7 +1134,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
             this.calculatedAgeDetail = `${years} yr${years !== 1 ? 's' : ''} ${months} mo${months !== 1 ? 's' : ''} ${days} day${days !== 1 ? 's' : ''}`;
             this.ageBreakdown = { years, months, days };
             const wasMinor = this.isMinor;
-            this.isMinor = years < 10;
+            this.isMinor = years < 18;
+            this.isSeniorCitizen = years >= 60;
             // Add/remove guardian form group based on minor status
             if (this.isMinor && !wasMinor) {
               this.createClientForm.addControl(
@@ -806,12 +1161,14 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
           } else {
             this.calculatedAgeDetail = null;
             this.isMinor = false;
+            this.isSeniorCitizen = false;
             this.ageBreakdown = { years: 0, months: 0, days: 0 };
             this.createClientForm.removeControl('guardianDetails');
           }
         } else {
           this.calculatedAgeDetail = null;
           this.isMinor = false;
+          this.isSeniorCitizen = false;
           this.ageBreakdown = { years: 0, months: 0, days: 0 };
           this.createClientForm.removeControl('guardianDetails');
         }
@@ -853,6 +1210,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 +1225,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) {
@@ -1487,6 +1861,9 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     if (n.includes('postgrad') || n === 'pg' || n.includes('master')) return 'postgraduate';
     if (n.includes('undergrad') || n === 'ug' || n.includes('bachelor') || n.includes('graduate'))
       return 'undergraduate';
+    // Diploma is its own Education Level, distinct from School — checked before the school
+    // keywords below so it doesn't get swept into that bucket.
+    if (n.includes('diploma') || n.includes('polytechnic')) return 'diploma';
     if (
       n.includes('school') ||
       n.includes('10th') ||
@@ -1495,7 +1872,6 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
       n.includes('hsc') ||
       n.includes('matric') ||
       n.includes('intermediate') ||
-      n.includes('diploma') ||
       n.includes('iti') ||
       n.includes('below')
     )
@@ -1573,8 +1949,12 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
   }
 
   /**
-   * Degrees filtered by the currently selected Education Level.
-   * Returns all degrees if no level is selected, or category can't be determined.
+   * Degrees filtered by the currently selected Education Level. Each DegreeQualification code
+   * value is tagged with its owning level in `description` (e.g. "Undergraduate") when seeded —
+   * match on that authoritative field first. Only fall back to the name-keyword heuristic
+   * (getDegreeQualificationCategory) for older/untagged rows that predate this tagging, so
+   * degrees never silently disappear because an admin added one without a description.
+   * Returns all degrees if no level is selected.
    */
   get filteredDegreeQualificationOptions(): any[] {
     const level = this.getSelectedEducationLevel();
@@ -1582,6 +1962,9 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     const category = this.getEducationLevelCategory(level.name);
     if (!category) return this.degreeQualificationOptions;
     const filtered = this.degreeQualificationOptions.filter((d: any) => {
+      if (d.description) {
+        return this.getEducationLevelCategory(d.description) === category;
+      }
       const c = this.getDegreeQualificationCategory(d.name);
       return c === category || c === '';
     });
@@ -1744,6 +2127,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
     // Store extended fields separately (not yet supported by Fineract API)
     // Add isMinor flag
     generalDetails.isMinor = this.isMinor;
+    // isSeniorCitizen is auto-detected from DOB (not a form control) — add it explicitly
+    generalDetails.isSeniorCitizen = this.isSeniorCitizen;
 
     // Add guardian clientId for minors
     if (this.isMinor && generalDetails.guardianDetails) {
@@ -1794,6 +2179,121 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
 
     return generalDetails;
   }
+
+  get calculatedRisk(): {
+    category: number;
+    reason: string;
+    amlCheckStatus?: string;
+    bannedEntityMatch?: string;
+    willfulDefaulter?: string;
+    ecgcSalFlag?: string;
+    dormantFlag?: string;
+  } {
+    const legalFormId = this.createClientForm.get('legalFormId')?.value || 1; // 1 = Person, 2 = Entity
+    const occCatId = this.createClientForm.get('occupationCategoryCvId')?.value;
+    const occId = this.createClientForm.get('occupationCvId')?.value;
+
+    const monthlyIncome = parseFloat(this.createClientForm.get('monthlyIncome')?.value) || 0;
+    const annualIncome = parseFloat(this.createClientForm.get('annualIncome')?.value) || 0;
+    const monthlyTurnover = parseFloat(this.createClientForm.get('monthlyTurnover')?.value) || 0;
+    const annualTurnover = parseFloat(this.createClientForm.get('annualTurnover')?.value) || 0;
+    const agricultureIncome = parseFloat(this.createClientForm.get('agricultureIncome')?.value) || 0;
+    const nonAgricultureIncome = parseFloat(this.createClientForm.get('nonAgricultureIncome')?.value) || 0;
+
+    const totalAnnualIncome = annualIncome + agricultureIncome + nonAgricultureIncome;
+
+    // Evaluate rules from DB (ordered by orderPosition ASC)
+    if (this.riskRules && this.riskRules.length > 0) {
+      for (const rule of this.riskRules) {
+        // Skip transaction/AML rules that have no KYC criteria
+        if (
+          rule.legalFormId == null &&
+          rule.occupationCategoryCvId == null &&
+          rule.occupationCvId == null &&
+          rule.minMonthlyIncome == null &&
+          rule.maxMonthlyIncome == null &&
+          rule.minAnnualIncome == null &&
+          rule.maxAnnualIncome == null &&
+          rule.minAnnualTurnover == null &&
+          rule.maxAnnualTurnover == null
+        ) {
+          continue;
+        }
+
+        // Match legal form
+        if (rule.legalFormId != null && rule.legalFormId !== legalFormId) {
+          continue;
+        }
+
+        // Match occupation category
+        if (rule.occupationCategoryCvId != null && rule.occupationCategoryCvId !== occCatId) {
+          continue;
+        }
+
+        // Match occupation
+        if (rule.occupationCvId != null && rule.occupationCvId !== occId) {
+          continue;
+        }
+
+        // Match monthly income ranges
+        if (rule.minMonthlyIncome != null && rule.minMonthlyIncome > 0 && monthlyIncome < rule.minMonthlyIncome) {
+          continue;
+        }
+        if (rule.maxMonthlyIncome != null && rule.maxMonthlyIncome > 0 && monthlyIncome > rule.maxMonthlyIncome) {
+          continue;
+        }
+
+        // Match annual income ranges (evaluated against totalAnnualIncome)
+        if (rule.minAnnualIncome != null && rule.minAnnualIncome > 0 && totalAnnualIncome < rule.minAnnualIncome) {
+          continue;
+        }
+        if (rule.maxAnnualIncome != null && rule.maxAnnualIncome > 0 && totalAnnualIncome > rule.maxAnnualIncome) {
+          continue;
+        }
+
+        // Match turnover ranges
+        if (rule.minAnnualTurnover != null && rule.minAnnualTurnover > 0 && annualTurnover < rule.minAnnualTurnover) {
+          continue;
+        }
+        if (rule.maxAnnualTurnover != null && rule.maxAnnualTurnover > 0 && annualTurnover > rule.maxAnnualTurnover) {
+          continue;
+        }
+
+        // All matched!
+        return {
+          category: rule.riskCategory,
+          reason: rule.reason,
+          amlCheckStatus: rule.amlCheckStatus || (rule.riskCategory === 3 ? 'FLAGGED' : 'CLEAR'),
+          bannedEntityMatch: rule.bannedEntityMatch || 'NO',
+          willfulDefaulter: rule.willfulDefaulter || 'NO',
+          ecgcSalFlag: rule.ecgcSalFlag || 'NO',
+          dormantFlag: rule.dormantFlag || 'ACTIVE'
+        };
+      }
+    }
+
+    // Default Fallbacks
+    if (legalFormId !== LegalFormId.PERSON) {
+      return {
+        category: 2,
+        reason: 'Non-Individual / Entity profile (Default Medium Risk)',
+        amlCheckStatus: 'CLEAR',
+        bannedEntityMatch: 'NO',
+        willfulDefaulter: 'NO',
+        ecgcSalFlag: 'NO',
+        dormantFlag: 'ACTIVE'
+      };
+    }
+    return {
+      category: 1,
+      reason: 'Default Low Risk profile (Salary / Service / Agriculture / Others)',
+      amlCheckStatus: 'CLEAR',
+      bannedEntityMatch: 'NO',
+      willfulDefaulter: 'NO',
+      ecgcSalFlag: 'NO',
+      dormantFlag: 'ACTIVE'
+    };
+  }
 }
 
 /**

src/app/clients/client-stepper/client-general-step/sanctions-verify-dialog.component.ts

@@ -42,6 +42,7 @@ import { ClientsService } from 'app/clients/clients.service';
             <strong>UN Security Council</strong> &amp;
             <strong>Financial Intelligence Unit - India (FIU-IND under UNSC Resolution 2231)</strong>
           </p>
+          <p class="regulatory-note">{{ regulatoryBasis }}</p>
         </div>
       }
       @if (!verifying && !matchFound && !errorOccurred) {
@@ -69,7 +70,14 @@ import { ClientsService } from 'app/clients/clients.service';
               <span class="meta-label">Database</span>
               <span class="meta-value">UN SC Consolidated List</span>
             </div>
+            @if (listDataAsOf) {
+              <div class="meta-row">
+                <span class="meta-label">List Data As Of</span>
+                <span class="meta-value">{{ listDataAsOf }}</span>
+              </div>
+            }
           </div>
+          <p class="regulatory-note">{{ regulatoryBasis }}</p>
         </div>
       }
       @if (!verifying && matchFound) {
@@ -96,11 +104,18 @@ import { ClientsService } from 'app/clients/clients.service';
               <span class="meta-label">Database</span>
               <span class="meta-value">UN SC Consolidated List</span>
             </div>
+            @if (listDataAsOf) {
+              <div class="meta-row">
+                <span class="meta-label">List Data As Of</span>
+                <span class="meta-value">{{ listDataAsOf }}</span>
+              </div>
+            }
           </div>
           <div class="escalate-banner">
             <fa-icon icon="exclamation-circle" class="escalate-icon"></fa-icon>
             <span><strong>Escalate to Principal Officer immediately.</strong> Account opening blocked.</span>
           </div>
+          <p class="regulatory-note">{{ regulatoryBasis }}</p>
         </div>
       }
       @if (!verifying && errorOccurred) {
@@ -207,6 +222,15 @@ import { ClientsService } from 'app/clients/clients.service';
         text-align: center;
       }
 
+      .regulatory-note {
+        font-size: 11px;
+        color: #9ca3af;
+        line-height: 1.5;
+        text-align: center;
+        margin: 8px 0 0;
+        max-width: 420px;
+      }
+
       .approve-card {
         display: flex;
         flex-direction: column;
@@ -524,6 +548,10 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
   errorOccurred = false;
   errorMessage = '';
   screeningLogId: number | null = null;
+  listDataAsOf: string | null = null;
+
+  regulatoryBasis =
+    'Screened as per Section 51-A of the Unlawful Activities (Prevention) Act, 1967 and the RBI Master Direction on KYC.';
 
   screenedDate = new Date().toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
   progressValue = 0;
@@ -624,6 +652,13 @@ export class SanctionsVerifyDialogComponent implements OnInit, OnDestroy {
           'Unable to connect to sanctions screening service.';
       } else {
         this.screeningLogId = this.apiResult?.screeningLogId || null;
+        this.listDataAsOf = this.apiResult?.listDataAsOf
+          ? new Date(this.apiResult.listDataAsOf).toLocaleDateString('en-IN', {
+              day: '2-digit',
+              month: 'short',
+              year: 'numeric'
+            })
+          : null;
         if (this.apiResult?.matchFound) {
           this.matchFound = true;
           this.matchCount = this.apiResult.matchCount || 0;

src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.html

@@ -173,8 +173,9 @@
             @if (selectedAddrProof.requiresDate) {
               <mat-form-field appearance="outline" class="addr-ff">
                 <mat-label>Issue / bill date</mat-label>
-                <span matPrefix class="addr-prefix"><mat-icon>event</mat-icon></span>
-                <input matInput type="date" formControlName="issueDate" />
+                <input matInput [matDatepicker]="addrIssueDatePicker" formControlName="issueDate" />
+                <mat-datepicker-toggle matSuffix [for]="addrIssueDatePicker"></mat-datepicker-toggle>
+                <mat-datepicker #addrIssueDatePicker></mat-datepicker>
               </mat-form-field>
             }
           </div>

src/app/clients/client-stepper/client-india-address-step/client-india-address-step.component.ts

@@ -15,9 +15,12 @@ import { MatCheckbox } from '@angular/material/checkbox';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatIcon } from '@angular/material/icon';
 import { MatIconButton, MatButton } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
 import { ClientsService } from '../../clients.service';
 import { ProofType, normalizeProofType, groupProofsByCategory } from '../../shared/kyc-proof-types';
 import { KycUploadHelperService } from '../../shared/kyc-upload-helper.service';
+import { DocumentPreviewDialogComponent } from '../../shared/document-preview-dialog/document-preview-dialog.component';
+import { Dates } from 'app/core/utils/dates';
 
 @Component({
   selector: 'mifosx-client-india-address-step',
@@ -38,11 +41,20 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
   private http = inject(HttpClient);
   private clientsService = inject(ClientsService);
   private kycUpload = inject(KycUploadHelperService);
+  private dialog = inject(MatDialog);
+  private dates = inject(Dates);
 
   /** Client ID — when set, loads existing addresses for edit mode */
   @Input() clientId: string = '';
   /** Read-only mode — disables form editing until user clicks edit icon */
   @Input() readOnly = false;
+  /** Minor clients can't hold utility bills, bank statements or an adult-only OVD in their own
+   * name — restricts the address-proof picker to Aadhaar/Passport when true. */
+  @Input() isMinor = false;
+  /** Non-individual (entity) clients — hides personal OVDs (Aadhaar/Passport/DL/Voter ID/NREGA/
+   * NPR/Birth Certificate/School ID) from the proof-of-address picker; a company's registered
+   * office address is evidenced by utility bills, GST/rent documents etc., not a person's ID. */
+  @Input() isNonIndividual = false;
 
   activeTab = 0;
   sameAsPermanent = false;
@@ -235,12 +247,50 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
     }
   }
 
+  /**
+   * Resets transient address-tab state for a brand-new client.
+   *
+   * This app's RouteReusableStrategy (core/route/route-reusable-strategy.ts) keeps this SAME
+   * component instance alive across repeat visits to /clients/create, so `ngOnInit` never
+   * re-runs for a second "create new client" session — the previous client's address forms,
+   * selected proof-of-address chip and uploaded files would otherwise leak into the new one.
+   * Called by CreateClientComponent.resetForNewClient() whenever a fresh create session begins.
+   */
+  resetForNewClient(): void {
+    this.permanentForm.reset({ country: 'India' });
+    this.currentForm.reset({ country: 'India' });
+    this.officeForm.reset({ country: 'India' });
+    this.correspondenceForm.reset({ country: 'India' });
+    this.activeTab = 0;
+    this.sameAsPermanent = false;
+    this.pinStatus = {
+      permanent: { loading: false, found: false, error: false, message: '' },
+      current: { loading: false, found: false, error: false, message: '' },
+      office: { loading: false, found: false, error: false, message: '' },
+      correspondence: { loading: false, found: false, error: false, message: '' }
+    };
+    this.localityOptions = { permanent: [], current: [], office: [], correspondence: [] };
+    this.selectedAddrProof = null;
+    this.addrFiles = { front: null, back: null };
+    this.addrMergedFile = null;
+    this.addrMergedPreview = null;
+    this.existingAddressProofIdentifierId = null;
+    this.existingAddressProofDocuments = [];
+    this.addressLoaded = false;
+    // Re-fetch rather than re-filter `addressProofs` in place — if the previous session's
+    // isMinor filtering already reduced it (e.g. down to Aadhaar/Passport only), filtering
+    // that reduced list again can never recover the items it already removed.
+    this.loadProofTypes();
+  }
+
   private loadProofTypes(): void {
     this.loadingProofs = true;
     this.clientsService.getKycProofTypes().subscribe({
       next: (res: any) => {
         const activeFilter = (p: any) => p?.active !== false;
-        this.addressProofs = (res?.addressProofs || []).filter(activeFilter).map(normalizeProofType);
+        this.addressProofs = this.filterAddressProofsForNonIndividual(
+          this.filterAddressProofsForMinor((res?.addressProofs || []).filter(activeFilter).map(normalizeProofType))
+        );
         this.addressGroups = groupProofsByCategory(this.addressProofs);
         this.loadingProofs = false;
       },
@@ -250,6 +300,41 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
     });
   }
 
+  /** Minors don't hold utility bills, bank statements, rent agreements, property tax receipts,
+   * employer letters or pension orders in their own name, and Voter ID/Driving Licence both
+   * require adult age — Aadhaar and Passport are the only OVDs left for proof of address. */
+  private static readonly MINOR_ELIGIBLE_ADDRESS_PROOF_CODES = new Set([
+    'AADHAAR',
+    'PASSPORT'
+  ]);
+
+  private filterAddressProofsForMinor(proofs: ProofType[]): ProofType[] {
+    if (!this.isMinor) return proofs;
+    return proofs.filter((p) =>
+      ClientIndiaAddressStepComponent.MINOR_ELIGIBLE_ADDRESS_PROOF_CODES.has((p.code || '').toUpperCase())
+    );
+  }
+
+  /** Personal OVDs — not valid proof of a registered office/entity address. */
+  private static readonly NON_INDIVIDUAL_EXCLUDED_ADDRESS_PROOF_CODES = new Set([
+    'AADHAAR',
+    'PASSPORT',
+    'VOTER_ID',
+    'DRIVING_LICENSE',
+    'NREGA_JOB_CARD',
+    'NPR_LETTER',
+    'BIRTH_CERTIFICATE',
+    'SCHOOL_ID_CARD'
+  ]);
+
+  private filterAddressProofsForNonIndividual(proofs: ProofType[]): ProofType[] {
+    if (!this.isNonIndividual) return proofs;
+    return proofs.filter(
+      (p) =>
+        !ClientIndiaAddressStepComponent.NON_INDIVIDUAL_EXCLUDED_ADDRESS_PROOF_CODES.has((p.code || '').toUpperCase())
+    );
+  }
+
   selectAddrProof(proof: ProofType): void {
     this.selectedAddrProof = proof;
     this.permanentForm.get('proofId')?.setValue(proof.id);
@@ -330,11 +415,12 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
         files.push({ slot: 'Back', file: this.addrFiles.back });
       }
     }
+    const rawIssueDate = this.permanentForm.get('issueDate')?.value;
     return {
       proof: this.selectedAddrProof,
       proofId: this.permanentForm.get('proofId')?.value || '',
       documentKey: this.permanentForm.get('documentKey')?.value || '',
-      issueDate: this.permanentForm.get('issueDate')?.value || '',
+      issueDate: rawIssueDate ? this.dates.getDate(rawIssueDate) : '',
       files
     };
   }
@@ -355,6 +441,25 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
         }
       }
     }
+    if (changes['isMinor'] && !changes['isMinor'].firstChange && this.addressProofs.length) {
+      const filtered = this.filterAddressProofsForMinor(this.addressProofs);
+      if (filtered.length !== this.addressProofs.length) {
+        this.addressProofs = filtered;
+        this.addressGroups = groupProofsByCategory(this.addressProofs);
+        if (this.selectedAddrProof && !filtered.some((p) => p.id === this.selectedAddrProof?.id)) {
+          this.selectedAddrProof = null;
+          this.permanentForm.get('proofId')?.setValue('');
+        }
+      }
+    }
+    // Legal form toggled on an already-initialized instance — re-fetch rather than filter
+    // `addressProofs` in place, since the non-individual filter only ever removes entries and
+    // toggling back to individual could never recover what a prior pass had stripped out.
+    if (changes['isNonIndividual'] && !changes['isNonIndividual'].firstChange) {
+      this.selectedAddrProof = null;
+      this.permanentForm.get('proofId')?.setValue('');
+      this.loadProofTypes();
+    }
   }
 
   /**
@@ -458,13 +563,13 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
             proofId: matchedProof.id,
             documentKey: identifier.documentKey || ''
           });
-          // The description carries `Issue date: dd/mm/yyyy` when set on create (see
+          // The description carries `Issue date: yyyy-MM-dd` when set on create (see
           // create-client.saveAddressProof) — pull it out so the form's issueDate field
           // shows what was previously entered.
           const desc: string = identifier.description || '';
           const issueMatch = desc.match(/Issue date:\s*(.+)$/i);
           if (issueMatch) {
-            this.permanentForm.patchValue({ issueDate: issueMatch[1].trim() });
+            this.permanentForm.patchValue({ issueDate: this.dates.parseDate(issueMatch[1].trim()) });
           }
         }
 
@@ -566,33 +671,17 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
     });
   }
 
-  /**
-   * Open the saved address proof in a new browser tab.
-   *
-   * For images we already hold a base64 data URL in `previewUrl` from
-   * `loadExistingAddressProof`, so we can hand it straight to `window.open`.
-   * For PDFs / other types we need to fetch the binary blob and create a
-   * temporary object URL so the browser's PDF viewer can render it.
-   */
+  /** Open the saved address proof in an in-app preview dialog. */
   viewExistingAddressProof(): void {
     if (!this.existingAddressProofIdentifierId || this.existingAddressProofDocuments.length === 0) {
       return;
     }
     const doc = this.existingAddressProofDocuments[0];
-    if (doc.previewUrl) {
-      window.open(doc.previewUrl, '_blank', 'noopener');
-      return;
-    }
     this.clientsService.downloadClientIdentificationDocument(this.existingAddressProofIdentifierId, doc.id).subscribe({
-      next: (blob: Blob) => {
-        const url = URL.createObjectURL(blob);
-        const w = window.open(url, '_blank', 'noopener');
-        // Revoke after the tab has had time to load — browsers vary, so
-        // err on the side of a generous wait.
-        if (w) {
-          setTimeout(() => URL.revokeObjectURL(url), 60_000);
-        }
-      },
+      next: (blob: Blob) =>
+        this.dialog.open(DocumentPreviewDialogComponent, {
+          data: { blob, title: doc.fileName || doc.name, fileName: doc.fileName || doc.name }
+        }),
       error: () => {
         // Silent fail — UI shows the saved name so user knows it exists.
       }

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

@@ -28,33 +28,36 @@
     <div class="form-grid">
       <!-- ══ INDIVIDUAL KYC ══ -->
       @if (!isNonIndividual) {
-        @if (readOnly) {
-          <!-- In view mode the mat-checkbox renders as a faded grey square
-               that reads as "blurry". Show a clean Yes/No pill instead. -->
-          <div class="form-field checkbox-field full-width">
-            <div class="ro-flag">
-              <span class="ro-flag__label">Client has PAN Card</span>
-              @if (kycForm.get('hasPan')?.value) {
-                <span class="ro-flag__chip ro-flag__chip--yes">
-                  <mat-icon>check_circle</mat-icon>
-                  Yes
-                </span>
-              } @else {
-                <span class="ro-flag__chip ro-flag__chip--no">
-                  <mat-icon>cancel</mat-icon>
-                  No
-                </span>
-              }
+        <!-- Minors don't hold a PAN card — skip the PAN checkbox/section entirely -->
+        @if (!isMinor) {
+          @if (readOnly) {
+            <!-- In view mode the mat-checkbox renders as a faded grey square
+                 that reads as "blurry". Show a clean Yes/No pill instead. -->
+            <div class="form-field checkbox-field full-width">
+              <div class="ro-flag">
+                <span class="ro-flag__label">Client has PAN Card</span>
+                @if (kycForm.get('hasPan')?.value) {
+                  <span class="ro-flag__chip ro-flag__chip--yes">
+                    <mat-icon>check_circle</mat-icon>
+                    Yes
+                  </span>
+                } @else {
+                  <span class="ro-flag__chip ro-flag__chip--no">
+                    <mat-icon>cancel</mat-icon>
+                    No
+                  </span>
+                }
+              </div>
             </div>
-          </div>
-        } @else {
-          <div class="form-field checkbox-field full-width">
-            <mat-checkbox formControlName="hasPan">Client has PAN Card</mat-checkbox>
-          </div>
+          } @else {
+            <div class="form-field checkbox-field full-width">
+              <mat-checkbox formControlName="hasPan">Client has PAN Card</mat-checkbox>
+            </div>
+          }
         }
 
         <!-- Individual PAN with inline verify -->
-        @if (kycForm.get('hasPan')?.value) {
+        @if (!isMinor && kycForm.get('hasPan')?.value) {
           <div class="form-field verify-field">
             <mat-form-field appearance="outline" class="verify-input">
               <mat-label>PAN Number</mat-label>
@@ -158,6 +161,17 @@
                 }
               </button>
             }
+            @if (aadhaarOtpSent && aadhaarVerifyStatus !== 'VERIFIED') {
+              <button
+                mat-stroked-button
+                type="button"
+                class="change-number-btn"
+                [disabled]="readOnly"
+                (click)="changeAadhaarNumber()"
+              >
+                <mat-icon>edit</mat-icon> Change Number
+              </button>
+            }
             @if (aadhaarVerifyStatus === 'VERIFIED') {
               <span class="verify-chip verified"><fa-icon icon="check-circle"></fa-icon> Verified</span>
             }
@@ -1035,6 +1049,12 @@
     </h4>
 
     <div class="form-grid">
+      <div class="checkbox-field override-checkbox-wrapper full-width">
+        <mat-checkbox formControlName="allowRiskOverride" [disabled]="readOnly">
+          Override Auto-calculated Risk Category
+        </mat-checkbox>
+      </div>
+
       <mat-form-field appearance="outline" class="form-field">
         <mat-label>Risk Category</mat-label>
         <mat-select formControlName="riskCategory">
@@ -1072,6 +1092,64 @@
         <mat-hint>Auto: Low 10yr, Medium 8yr, High 2yr</mat-hint>
       </mat-form-field>
 
+      @if (riskCalculationReason && !kycForm.get('allowRiskOverride')?.value && !readOnly) {
+        <div
+          class="risk-auto-calc-info full-width"
+          [class.risk-auto-calc-info--low]="kycForm.get('riskCategory')?.value === 1"
+          [class.risk-auto-calc-info--medium]="kycForm.get('riskCategory')?.value === 2"
+          [class.risk-auto-calc-info--high]="kycForm.get('riskCategory')?.value === 3"
+        >
+          <mat-icon class="info-icon">info</mat-icon>
+          <span class="info-text"
+            >Auto-determined: <strong>{{ riskCalculationReason }}</strong></span
+          >
+        </div>
+      }
+
+      <div class="risk-rules-toggle-wrapper full-width">
+        <button mat-button type="button" class="rules-toggle-btn" (click)="showRiskRulesTable = !showRiskRulesTable">
+          <mat-icon class="rules-toggle-icon">{{ showRiskRulesTable ? 'expand_less' : 'expand_more' }}</mat-icon>
+          {{
+            showRiskRulesTable ? 'Hide Risk Classification Criteria Table' : 'View Risk Classification Criteria Table'
+          }}
+        </button>
+      </div>
+
+      @if (showRiskRulesTable) {
+        <div class="risk-rules-card mat-elevation-z1 full-width">
+          <table class="risk-rules-table">
+            <thead>
+              <tr>
+                <th>Risk Category</th>
+                <th>Primary Criteria / Basis</th>
+                <th>Examples / Thresholds</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="rule-row rule-row--high">
+                <td><span class="risk-badge risk-badge--high">High Risk</span></td>
+                <td>PEPs, High-Risk Industries, High Income / Turnovers</td>
+                <td>
+                  Politicians; Real Estate, Import/Export; Commission Agents; Income > ₹20L/yr; Turnover > ₹1 Crore
+                </td>
+              </tr>
+              <tr class="rule-row rule-row--medium">
+                <td><span class="risk-badge risk-badge--medium">Medium Risk</span></td>
+                <td>Self-Employed, Professionals, Cross-Border, Moderate Income</td>
+                <td>
+                  Business Owners, Traders; Doctors, Lawyers, CAs; NRI, PIO, OCI; Income > ₹6L/yr; Turnover > ₹20L
+                </td>
+              </tr>
+              <tr class="rule-row rule-row--low">
+                <td><span class="risk-badge risk-badge--low">Low Risk</span></td>
+                <td>Non-Earning, Government Employment, Agriculture / Manual</td>
+                <td>Students, Minors, Homemakers; Govt/PSU Employees; Farmers, Daily Wage; Income <= ₹6L/yr</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      }
+
       <mat-form-field appearance="outline" class="form-field full-width">
         <mat-label>{{ isKycVerified ? 'Reason for Re-edit *' : 'Remarks' }}</mat-label>
         <textarea
@@ -1173,6 +1251,12 @@
     </h4>
 
     <div class="form-grid">
+      <div class="checkbox-field override-checkbox-wrapper full-width">
+        <mat-checkbox formControlName="allowAmlOverride" [disabled]="readOnly">
+          Override Auto-calculated AML &amp; Compliance Checks
+        </mat-checkbox>
+      </div>
+
       <mat-form-field appearance="outline" class="form-field">
         <mat-label>AML Check Status</mat-label>
         <mat-select required formControlName="amlCheckStatus">
@@ -1266,11 +1350,11 @@
     </div>
   </div>
 
-  <!-- ═══ SECTION: Form 60/61 ═══ -->
+  <!-- ═══ SECTION: Form 97/98 ═══ -->
   <div class="section-block">
     <h4 class="section-title">
       <fa-icon icon="file-invoice" class="section-icon"></fa-icon>
-      Form 60 / 61
+      Form 97 / 98
       @if (!kycForm.get('hasPan')?.value) {
         <span class="kyc-badge required-badge">Required — No PAN</span>
       }
@@ -1278,14 +1362,14 @@
     @if (!kycForm.get('hasPan')?.value) {
       <div class="kyc-info-hint warning-hint">
         <mat-icon class="kyc-info-hint-icon">warning</mat-icon>
-        <span>Client does not have PAN. Form 60/61 is mandatory.</span>
+        <span>Client does not have PAN. Form 97/98 is mandatory.</span>
       </div>
       <div class="form-grid">
         <mat-form-field appearance="outline" class="form-field">
           <mat-label>Form Type</mat-label>
           <mat-select formControlName="form60Type">
-            <mat-option value="FORM_60">Form 60</mat-option>
-            <mat-option value="FORM_61">Form 61</mat-option>
+            <mat-option value="FORM_60">Form 97</mat-option>
+            <mat-option value="FORM_61">Form 98</mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field appearance="outline" class="form-field" (click)="form60DatePicker.open()">
@@ -1296,26 +1380,26 @@
         </mat-form-field>
       </div>
     } @else {
-      <p class="form60-not-needed">Client has PAN — Form 60/61 not required.</p>
+      <p class="form60-not-needed">Client has PAN — Form 97/98 not required.</p>
     }
   </div>
 
-  <!-- ═══ SECTION: Form 15G / 15H ═══ -->
+  <!-- ═══ SECTION: Form 121 ═══ -->
   <div class="section-block">
     <h4 class="section-title">
       <fa-icon icon="receipt" class="section-icon"></fa-icon>
-      Form 15G / 15H
+      Form 121
     </h4>
     <div class="form-grid">
       <div class="form-field checkbox-field">
-        <mat-checkbox formControlName="form15Applicable">Form 15G/15H Applicable</mat-checkbox>
+        <mat-checkbox formControlName="form15Applicable">Form 121 Applicable</mat-checkbox>
       </div>
       @if (kycForm.get('form15Applicable')?.value) {
         <mat-form-field appearance="outline" class="form-field">
           <mat-label>Form Type</mat-label>
           <mat-select formControlName="form15Type">
-            <mat-option value="15G">15G (Below 60 years)</mat-option>
-            <mat-option value="15H">15H (Senior Citizen 60+)</mat-option>
+            <mat-option value="15G">Form 121 (Below 60 years)</mat-option>
+            <mat-option value="15H">Form 121 (Senior Citizen 60+)</mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field appearance="outline" class="form-field">
@@ -1359,10 +1443,15 @@
             <span class="upload-box__req">*</span>
           </span>
           <span class="upload-box__hint">JPG / PNG, max 2MB</span>
-          <label class="upload-box__btn">
-            <input type="file" accept="image/*" hidden (change)="onPhotoSelected($event)" />
-            <fa-icon icon="camera"></fa-icon> Choose &amp; Crop
-          </label>
+          <div class="upload-box__btn-row">
+            <label class="upload-box__btn">
+              <input type="file" accept="image/*" hidden (change)="onPhotoSelected($event)" />
+              <fa-icon icon="camera"></fa-icon> Choose &amp; Crop
+            </label>
+            <button type="button" class="upload-box__btn upload-box__btn--secondary" (click)="captureWebcamPhoto()">
+              <fa-icon icon="video"></fa-icon> Use Webcam
+            </button>
+          </div>
           @if (photoSigTouched) {
             <span class="upload-box__error">Photograph is required</span>
           }
@@ -1393,10 +1482,15 @@
             <span class="upload-box__req">*</span>
           </span>
           <span class="upload-box__hint">Scanned image, max 1MB</span>
-          <label class="upload-box__btn">
-            <input type="file" accept="image/*" hidden (change)="onSignatureSelected($event)" />
-            <fa-icon icon="crop"></fa-icon> Choose &amp; Crop
-          </label>
+          <div class="upload-box__btn-row">
+            <label class="upload-box__btn">
+              <input type="file" accept="image/*" hidden (change)="onSignatureSelected($event)" />
+              <fa-icon icon="crop"></fa-icon> Choose &amp; Crop
+            </label>
+            <button type="button" class="upload-box__btn upload-box__btn--secondary" (click)="drawSignature()">
+              <fa-icon icon="pen"></fa-icon> Draw Signature
+            </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

@@ -266,6 +266,23 @@
   gap: 6px;
 }
 
+.change-number-btn {
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  padding: 0 14px !important;
+  height: 36px !important;
+  border-radius: 6px !important;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+}
+
 .verify-chip {
   display: inline-flex;
   align-items: center;
@@ -297,8 +314,24 @@
 .toggle-vis-btn {
   width: 28px !important;
   height: 28px !important;
+  padding: 0 !important;
   font-size: 13px !important;
   color: #64748b;
+
+  /* Material reserves a 48x48 invisible touch-target + ripple around every
+     mat-icon-button by default. Shrinking the button to 28px above doesn't
+     shrink that touch-target/ripple with it, so — since the suffix
+     container doesn't clip overflow — it visually spills out past the
+     field's own border, making the icon look misplaced/half-outside the box. */
+  ::ng-deep .mat-mdc-button-touch-target {
+    width: 28px !important;
+    height: 28px !important;
+  }
+
+  ::ng-deep .mat-mdc-button-persistent-ripple,
+  ::ng-deep .mat-ripple {
+    border-radius: 50%;
+  }
 }
 
 /* Verification Info Banner */
@@ -1057,9 +1090,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 +1115,10 @@
       border-color: #1353a0;
       color: #1353a0;
     }
+
+    &--secondary {
+      background: #f8fafc;
+    }
   }
 
   &__status {
@@ -2228,3 +2273,161 @@
     width: 95px;
   }
 }
+
+.override-checkbox-wrapper {
+  margin-bottom: 8px;
+}
+
+.risk-auto-calc-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  margin-top: -8px;
+  margin-bottom: 12px;
+  border: 1px solid transparent;
+
+  .info-icon {
+    font-size: 18px !important;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+
+  .info-text strong {
+    font-weight: 600;
+  }
+
+  &--low {
+    background: #ecfdf5;
+    color: #065f46;
+    border-color: #a7f3d0;
+
+    .info-icon {
+      color: #10b981;
+    }
+  }
+
+  &--medium {
+    background: #fffbeb;
+    color: #92400e;
+    border-color: #fde68a;
+
+    .info-icon {
+      color: #f59e0b;
+    }
+  }
+
+  &--high {
+    background: #fef2f2;
+    color: #991b1b;
+    border-color: #fecaca;
+
+    .info-icon {
+      color: #ef4444;
+    }
+  }
+}
+
+.risk-rules-toggle-wrapper {
+  margin-top: 4px;
+  margin-bottom: 12px;
+
+  .rules-toggle-btn {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e6bb8;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: 20px;
+    transition: all 0.2s ease-in-out;
+    background: #f1f5f9;
+
+    &:hover {
+      background: #e2e8f0;
+      color: #0f172a;
+    }
+  }
+}
+
+.risk-rules-card {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
+}
+
+.risk-rules-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  text-align: left;
+
+  th {
+    padding: 10px 12px;
+    font-weight: 600;
+    color: #475569;
+    border-bottom: 2px solid #cbd5e1;
+    background: #f8fafc;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  td {
+    padding: 12px;
+    border-bottom: 1px solid #e2e8f0;
+    color: #334155;
+    vertical-align: top;
+    line-height: 1.5;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  .rule-row {
+    transition: background 0.15s ease-in-out;
+
+    &:hover {
+      background: #f8fafc;
+    }
+  }
+
+  .risk-badge {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    text-align: center;
+    width: 80px;
+
+    &--high {
+      background: #fef2f2;
+      color: #dc2626;
+      border: 1px solid #fecaca;
+    }
+
+    &--medium {
+      background: #fffbeb;
+      color: #d97706;
+      border: 1px solid #fde68a;
+    }
+
+    &--low {
+      background: #ecfdf5;
+      color: #16a34a;
+      border: 1px solid #a7f3d0;
+    }
+  }
+}

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

@@ -30,6 +30,10 @@ 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 { DrawSignatureDialogComponent } from '../../clients-view/custom-dialogs/draw-signature-dialog/draw-signature-dialog.component';
+import { dataUrlToFile } from 'app/shared/utils/data-url.util';
+import { DocumentPreviewDialogComponent } from '../../shared/document-preview-dialog/document-preview-dialog.component';
 
 @Component({
   selector: 'mifosx-client-kyc-step',
@@ -59,12 +63,23 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
   /** Set by parent after client is created */
   @Input() clientId: string = '';
   @Input() isNonIndividual = false;
+  /** Minor clients don't hold a PAN card — hides the PAN section on the individual KYC form */
+  @Input() isMinor = false;
   /** Constitution metadata (panLabel, showCin, etc.) passed from general step */
   @Input() constitutionMeta: any = null;
   /** Entity full name (non-individual) — used for enterprise PAN verification */
   @Input() entityName: string = '';
   /** Read-only mode — disables form editing until user clicks edit icon */
   @Input() readOnly = false;
+  @Input() calculatedRisk: {
+    category: number;
+    reason: string;
+    amlCheckStatus?: string;
+    bannedEntityMatch?: string;
+    willfulDefaulter?: string;
+    ecgcSalFlag?: string;
+    dormantFlag?: string;
+  } | null = null;
 
   today = new Date();
   kycId: string = '';
@@ -128,6 +143,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' },
@@ -136,7 +176,20 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     { name: 'Driving Licence', code: 'DRIVING_LICENSE' },
     { name: 'Voter ID', code: 'VOTER_ID' },
     { name: 'NREGA Job Card', code: 'NREGA_JOB_CARD' },
-    { name: 'National Population Register Letter', code: 'NPR_LETTER' }
+    { name: 'National Population Register Letter', code: 'NPR_LETTER' },
+    { name: 'Birth Certificate', code: 'BIRTH_CERTIFICATE' },
+    { name: 'School ID Card', code: 'SCHOOL_ID_CARD' }
+  ];
+  /** Generic RBI-prescribed KYC documents for legal entities (Master Direction on KYC,
+   * Annexure I) — shown for non-individual clients before a specific constitution type is
+   * picked. Individual OVDs (Aadhaar/Passport/DL/Voter ID/NREGA/NPR) don't apply to entities. */
+  private nonIndividualDefaultDocTypes = [
+    { name: 'Certificate of Incorporation / Registration Certificate', code: 'CERT_INCORPORATION' },
+    { name: 'PAN Card of Entity', code: 'ENTITY_PAN' },
+    { name: 'Memorandum & Articles of Association / Partnership Deed / Trust Deed', code: 'CONSTITUTIVE_DOC' },
+    { name: 'Board Resolution / Authorization Letter', code: 'BOARD_RESOLUTION' },
+    { name: 'KYC of Authorized Signatory / Power of Attorney Holder', code: 'AUTH_SIGNATORY_KYC' },
+    { name: 'GST Registration Certificate', code: 'GST_CERTIFICATE' }
   ];
   /** Constitution-based KYC document types for non-individual clients */
   private constitutionDocTypes: Record<string, { name: string; mandatory: boolean }[]> = {
@@ -218,6 +271,9 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     { value: 3, label: 'High Risk', years: 2, color: 'red' }
   ];
 
+  riskCalculationReason = '';
+  showRiskRulesTable = false;
+
   /** PAN verification */
   panVerifyStatus: 'NONE' | 'VERIFIED' | 'FAILED' = 'NONE';
   panVerifying = false;
@@ -409,6 +465,8 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     kycDocIssueDate: [''],
     kycDocExpiryDate: [''],
     riskCategory: [1],
+    allowRiskOverride: [false],
+    allowAmlOverride: [false],
     remarks: [''],
     amlCheckStatus: [
       'CLEAR',
@@ -431,22 +489,177 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     form15FY: ['']
   });
 
-  ngOnInit(): void {
-    // Seed defaults immediately so the picker has options before clientId is set
-    // (template API requires clientId; user can still pick a type pre-save).
-    if (!this.kycDocumentTypes.length) {
-      this.kycDocumentTypes = this.defaultDocumentTypes.map((d) => ({
-        name: d.name,
-        code: d.code,
-        mandatory: false
-      }));
-      this.rebuildKycDocPicker();
+  /** RBI-accepted OVDs for a minor client — mirrors the backend's minor branch in
+   * ClientKycApiResource.getRequiredDocuments(). Voter ID, Driving Licence, PAN and NREGA
+   * all require adult eligibility; National Population Register Letter is deliberately
+   * excluded too (not offered as a minor OVD in this system). */
+  private static readonly MINOR_ELIGIBLE_DOC_CODES = new Set([
+    'AADHAAR',
+    'PASSPORT',
+    'BIRTH_CERTIFICATE',
+    'SCHOOL_ID_CARD'
+  ]);
+
+  /** Birth Certificate / School ID Card are minor-specific OVDs — not relevant once the
+   * client is an adult, so they're hidden the other direction. */
+  private static readonly MINOR_ONLY_DOC_CODES = new Set([
+    'BIRTH_CERTIFICATE',
+    'SCHOOL_ID_CARD'
+  ]);
+
+  private filterDocTypesForMinor<T extends { name: string; code?: string }>(docs: T[]): T[] {
+    if (this.isMinor) {
+      return docs.filter((d) => ClientKycStepComponent.MINOR_ELIGIBLE_DOC_CODES.has((d.code || '').toUpperCase()));
     }
+    return docs.filter((d) => !ClientKycStepComponent.MINOR_ONLY_DOC_CODES.has((d.code || '').toUpperCase()));
+  }
+
+  /** Individual-only OVDs vs. entity-only RBI docs — never both, and minor filtering only
+   * ever applies to individuals. */
+  private getDefaultDocTypes(): { name: string; code: string }[] {
+    return this.isNonIndividual
+      ? this.nonIndividualDefaultDocTypes
+      : this.filterDocTypesForMinor(this.defaultDocumentTypes);
+  }
+
+  ngOnInit(): void {
+    this.seedDefaultDocTypes();
     this.loadExistingKycIfNeeded();
     this.loadKycTemplate();
     if (this.isNonIndividual && this.constitutionMeta) {
       this.updateDocTypesForConstitution();
     }
+
+    this.kycForm.get('allowRiskOverride')?.valueChanges.subscribe((allowed: boolean) => {
+      const riskControl = this.kycForm.get('riskCategory');
+      if (allowed) {
+        if (!this.readOnly) {
+          riskControl?.enable();
+        }
+      } else {
+        riskControl?.disable();
+        if (this.calculatedRisk) {
+          riskControl?.setValue(this.calculatedRisk.category);
+        }
+      }
+    });
+
+    this.kycForm.get('allowAmlOverride')?.valueChanges.subscribe((allowed: boolean) => {
+      const amlControls = [
+        this.kycForm.get('amlCheckStatus'),
+        this.kycForm.get('bannedEntityMatch'),
+        this.kycForm.get('willfulDefaulter'),
+        this.kycForm.get('ecgcSalFlag'),
+        this.kycForm.get('dormantFlag')
+      ];
+      if (allowed) {
+        if (!this.readOnly) {
+          amlControls.forEach((ctrl) => ctrl?.enable());
+        }
+      } else {
+        amlControls.forEach((ctrl) => ctrl?.disable());
+        this.applyAutoCalculatedAmlFlags();
+      }
+    });
+
+    if (!this.kycForm.get('allowRiskOverride')?.value) {
+      this.kycForm.get('riskCategory')?.disable();
+    }
+
+    if (!this.kycForm.get('allowAmlOverride')?.value) {
+      this.kycForm.get('amlCheckStatus')?.disable();
+      this.kycForm.get('bannedEntityMatch')?.disable();
+      this.kycForm.get('willfulDefaulter')?.disable();
+      this.kycForm.get('ecgcSalFlag')?.disable();
+      this.kycForm.get('dormantFlag')?.disable();
+    }
+  }
+
+  /** Seed the document-type picker from defaults (entity RBI docs vs. individual OVDs,
+   * filtered by the current isMinor input for individuals). Only seeds when the list is
+   * empty — the template API (loadKycTemplate) takes over once a clientId is available. */
+  private seedDefaultDocTypes(): void {
+    if (this.kycDocumentTypes.length) return;
+    this.kycDocumentTypes = this.getDefaultDocTypes().map((d) => ({
+      name: d.name,
+      code: d.code,
+      mandatory: false
+    }));
+    this.rebuildKycDocPicker();
+  }
+
+  /**
+   * Resets transient KYC-tab state for a brand-new client.
+   *
+   * This app's RouteReusableStrategy (core/route/route-reusable-strategy.ts) keeps this SAME
+   * component instance alive across repeat visits to /clients/create, so `ngOnInit` never
+   * re-runs for a second "create new client" session. Without this, the document-type picker
+   * (and any PAN/Aadhaar verification state, uploaded photo/signature) would otherwise leak
+   * from whatever client was created in the previous session into the new one. Called by
+   * CreateClientComponent.resetForNewClient() whenever a fresh create session begins.
+   */
+  resetForNewClient(): void {
+    this.kycForm.reset({
+      hasPan: true,
+      riskCategory: 1,
+      allowRiskOverride: false,
+      amlCheckStatus: 'CLEAR',
+      bannedEntityMatch: 'NO',
+      willfulDefaulter: 'NO',
+      ecgcSalFlag: 'NO',
+      dormantFlag: 'ACTIVE',
+      accountStatus: 'ACTIVE',
+      form60Type: 'FORM_60',
+      form15Type: '15G'
+    });
+    this.kycId = '';
+    this.kycLoaded = false;
+    this.kycStatus = 0;
+    this.kycTemplate = null;
+    this.kycTemplateLoaded = false;
+    this.kycDocumentTypes = [];
+    this.selectedKycDoc = null;
+    this.kycDocFiles = { front: null, back: null };
+    this.kycDocMergedFile = null;
+    this.kycDocMergedPreview = null;
+    this.existingKycIdentifierId = null;
+    this.riskCalculationReason = '';
+    this.showRiskRulesTable = false;
+    this.existingKycDocuments = [];
+    this.photoSigTouched = false;
+    this.panVerifyStatus = 'NONE';
+    this.panVerifying = false;
+    this.panVerifyError = '';
+    this.panVerifyName = '';
+    this.panVerifiedOn = '';
+    this.aadhaarVerifyStatus = 'NONE';
+    this.aadhaarVerifying = false;
+    this.aadhaarVerifyError = '';
+    this.aadhaarVerifyName = '';
+    this.aadhaarVisible = false;
+    this.aadhaarOtpSent = false;
+    this.resetOtpDigits();
+    this.aadhaarOtpReferenceId = '';
+    this.panAadhaarSeedingStatus = '';
+    this.entPanVerifyStatus = 'NONE';
+    this.entPanVerifying = false;
+    this.entPanVerifyName = '';
+    this.entPanVerifiedOn = '';
+    this.gstinVerifyStatus = 'NONE';
+    this.gstinVerifying = false;
+    this.gstinVerifyName = '';
+    this.gstinVerifiedOn = '';
+    this.gstinVerifyState = '';
+    this.cinVerifyStatus = 'NONE';
+    this.cinVerifying = false;
+    this.cinVerifiedOn = '';
+    this.cinCompanyName = '';
+    this.photographFile = null;
+    this.photographPreview = null;
+    this.signatureFile = null;
+    this.signaturePreview = null;
+    this.existingSignatureDocId = '';
+    this.seedDefaultDocTypes();
   }
 
   ngOnDestroy(): void {
@@ -464,11 +677,75 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
         this.kycForm.disable({ emitEvent: false });
       } else {
         this.kycForm.enable({ emitEvent: false });
+        if (!this.kycForm.get('allowRiskOverride')?.value) {
+          this.kycForm.get('riskCategory')?.disable({ emitEvent: false });
+        }
+        if (!this.kycForm.get('allowAmlOverride')?.value) {
+          this.kycForm.get('amlCheckStatus')?.disable({ emitEvent: false });
+          this.kycForm.get('bannedEntityMatch')?.disable({ emitEvent: false });
+          this.kycForm.get('willfulDefaulter')?.disable({ emitEvent: false });
+          this.kycForm.get('ecgcSalFlag')?.disable({ emitEvent: false });
+          this.kycForm.get('dormantFlag')?.disable({ emitEvent: false });
+        }
+      }
+    }
+    if (changes['calculatedRisk']) {
+      const newRisk = changes['calculatedRisk'].currentValue;
+      if (newRisk) {
+        this.riskCalculationReason = newRisk.reason;
+        const allowOverride = this.kycForm.get('allowRiskOverride')?.value;
+        const riskControl = this.kycForm.get('riskCategory');
+        if (!allowOverride && riskControl && riskControl.value !== newRisk.category) {
+          riskControl.setValue(newRisk.category);
+          riskControl.markAsDirty();
+        }
+
+        const allowAmlOverride = this.kycForm.get('allowAmlOverride')?.value;
+        if (!allowAmlOverride) {
+          this.applyAutoCalculatedAmlFlags(newRisk);
+        }
+      } else {
+        this.riskCalculationReason = '';
       }
     }
     if (changes['constitutionMeta'] && this.isNonIndividual) {
       this.updateDocTypesForConstitution();
     }
+    // Legal form toggled on an already-initialized instance (route-reuse keeps this
+    // component alive across create sessions) — the individual OVD list and the entity RBI
+    // doc list are mutually exclusive, so re-seed from scratch rather than filtering in place.
+    if (changes['isNonIndividual'] && !changes['isNonIndividual'].firstChange && !this.kycTemplateLoaded) {
+      this.kycDocumentTypes = [];
+      this.selectedKycDoc = null;
+      this.kycForm.get('kycDocumentName')?.setValue('');
+      this.seedDefaultDocTypes();
+      if (this.isNonIndividual && this.constitutionMeta) {
+        this.updateDocTypesForConstitution();
+      }
+    }
+    if (changes['isMinor'] && !this.isNonIndividual) {
+      if (this.isMinor) {
+        this.kycForm.get('hasPan')?.setValue(false);
+        this.kycForm.get('panNumber')?.setValue('');
+      }
+      // Re-derive from the full default list, not by re-filtering the already-narrowed
+      // `kycDocumentTypes` — filterDocTypesForMinor() only ever REMOVES entries, so once the
+      // initial (pre-DOB, isMinor=false) seed has already stripped out Birth Certificate /
+      // School ID Card, re-filtering that same shortened list can never bring them back once
+      // the client turns out to be a minor. Once the backend KYC template has loaded
+      // (kycTemplateLoaded), that list is already minor-aware and authoritative — leave it alone.
+      if (!this.kycTemplateLoaded) {
+        const rebuilt = this.filterDocTypesForMinor(
+          this.defaultDocumentTypes.map((d) => ({ name: d.name, code: d.code, mandatory: false }))
+        );
+        this.kycDocumentTypes = rebuilt;
+        const currentName = this.kycForm.get('kycDocumentName')?.value;
+        if (currentName && !rebuilt.some((d) => d.name === currentName)) {
+          this.kycForm.get('kycDocumentName')?.setValue('');
+        }
+        this.rebuildKycDocPicker();
+      }
+    }
   }
 
   /** Update KYC document types based on selected constitution type */
@@ -539,30 +816,17 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     this.kycDocMergedPreview = null;
   }
 
-  /**
-   * Open the saved KYC ID-proof document in a new browser tab.
-   *
-   * Same flow as the address-step variant: images use the already-loaded
-   * base64 data URL; PDFs (or anything without a cached preview) are fetched
-   * fresh and rendered via a temporary blob URL.
-   */
+  /** Open the saved KYC ID-proof document in an in-app preview dialog. */
   viewExistingKycDoc(): void {
     if (!this.existingKycIdentifierId || this.existingKycDocuments.length === 0) {
       return;
     }
     const doc = this.existingKycDocuments[0];
-    if (doc.previewUrl) {
-      window.open(doc.previewUrl, '_blank', 'noopener');
-      return;
-    }
     this.clientsService.downloadClientIdentificationDocument(this.existingKycIdentifierId, doc.id).subscribe({
-      next: (blob: Blob) => {
-        const url = URL.createObjectURL(blob);
-        const w = window.open(url, '_blank', 'noopener');
-        if (w) {
-          setTimeout(() => URL.revokeObjectURL(url), 60_000);
-        }
-      },
+      next: (blob: Blob) =>
+        this.dialog.open(DocumentPreviewDialogComponent, {
+          data: { blob, title: doc.fileName || doc.name, fileName: doc.fileName || doc.name }
+        }),
       error: () => {
         /* silent — UI still shows the saved filename */
       }
@@ -653,6 +917,14 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
             kycDocExpiryDate: parseDate(data.kycDocExpiryDate),
             // Risk & Remarks
             riskCategory: data.riskCategory || 1,
+            allowRiskOverride: this.calculatedRisk ? this.calculatedRisk.category !== (data.riskCategory || 1) : false,
+            allowAmlOverride: this.calculatedRisk
+              ? this.calculatedRisk.amlCheckStatus !== (data.amlCheckStatus || 'CLEAR') ||
+                this.calculatedRisk.bannedEntityMatch !== (data.bannedEntityMatch || 'NO') ||
+                this.calculatedRisk.willfulDefaulter !== (data.willfulDefaulter || 'NO') ||
+                this.calculatedRisk.ecgcSalFlag !== (data.ecgcSalFlag || 'NO') ||
+                this.calculatedRisk.dormantFlag !== (data.dormantFlag || 'ACTIVE')
+              : false,
             remarks: data.remarks || '',
             hasPan: !!data.panNumber,
             // AML & Compliance
@@ -738,12 +1010,17 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
           const n = i?.documentType?.name?.toLowerCase();
           return !!n && this.kycDocProofs.some((p) => p.name?.toLowerCase() === n);
         };
+        // Re-uploading a KYC document creates a new identifier row rather than updating the
+        // old one in place (same pattern as OVD identifiers), so sort newest-first before
+        // picking — otherwise a repeat upload of the same document type would keep showing
+        // the ORIGINAL file forever, since .find() would always hit the oldest matching row.
+        const sorted = [...identifiers].sort((a: any, b: any) => (b?.id ?? 0) - (a?.id ?? 0));
         // Pick by document-type name match first; otherwise the first identifier whose
         // type lives in the KYC proof list (avoid bleeding the address proof in here).
         const match = kycDocumentName
-          ? identifiers.find((i: any) => i?.documentType?.name?.toLowerCase() === kycDocumentName.toLowerCase())
+          ? sorted.find((i: any) => i?.documentType?.name?.toLowerCase() === kycDocumentName.toLowerCase())
           : null;
-        const identifier = match || identifiers.find(isKycType);
+        const identifier = match || sorted.find(isKycType);
         if (!identifier?.id) return;
 
         this.existingKycIdentifierId = identifier.id.toString();
@@ -818,7 +1095,12 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     if (!this.clientId) return;
     this.clientsService.getClientDocuments(this.clientId).subscribe({
       next: (documents: any[]) => {
-        const sigDoc = documents?.find((d: any) => d.name === 'clientSignature');
+        // Multiple 'clientSignature' documents can exist for clients who re-cropped/replaced
+        // their signature before uploads became single-slot, so pick the highest id (latest)
+        // rather than the first unordered match.
+        const sigDoc = documents
+          ?.filter((d: any) => d.name === 'clientSignature')
+          ?.sort((a: any, b: any) => b.id - a.id)?.[0];
         if (sigDoc?.id) {
           this.existingSignatureDocId = sigDoc.id.toString();
           this.clientsService.getClientSignatureImage(this.clientId, this.existingSignatureDocId).subscribe({
@@ -847,11 +1129,13 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
         this.kycTemplate = template;
         this.kycTemplateLoaded = true;
         if (template?.requiredDocuments?.length > 0) {
-          this.kycDocumentTypes = template.requiredDocuments.map((doc: any) => ({
-            name: doc.name,
-            code: doc.code || doc.name,
-            mandatory: doc.mandatory ?? false
-          }));
+          this.kycDocumentTypes = this.filterDocTypesForMinor(
+            template.requiredDocuments.map((doc: any) => ({
+              name: doc.name,
+              code: doc.code || doc.name,
+              mandatory: doc.mandatory ?? false
+            }))
+          );
           // Update kycDocumentName validator based on mandatory docs
           const hasMandatory = this.kycDocumentTypes.some((d) => d.mandatory);
           if (hasMandatory) {
@@ -864,7 +1148,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
       error: () => {
         // Fallback to defaults if template API unavailable
         this.kycTemplateLoaded = true;
-        this.kycDocumentTypes = this.defaultDocumentTypes.map((d) => ({
+        this.kycDocumentTypes = this.getDefaultDocTypes().map((d) => ({
           name: d.name,
           code: d.code,
           mandatory: false
@@ -1291,6 +1575,21 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     );
   }
 
+  /** Lets the user go back and fix a wrong Aadhaar number after an OTP was already sent —
+   * unlocks the (readonly-while-OTP-pending) input and discards the in-flight OTP session,
+   * since it was requested for the now-being-corrected number. */
+  changeAadhaarNumber(): void {
+    this.aadhaarOtpSent = false;
+    this.aadhaarVerifyError = '';
+    this.aadhaarOtpReferenceId = '';
+    this.resetOtpDigits();
+    this.resendCountdown = 0;
+    if (this.resendTimer) {
+      clearInterval(this.resendTimer);
+      this.resendTimer = null;
+    }
+  }
+
   /** Verify Aadhaar OTP */
   verifyAadhaarOtp() {
     if (!this.aadhaarOtp || !this.clientId || !this.kycId) return;
@@ -1366,6 +1665,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 +1709,10 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     if (!input.files?.length) return;
     const file = input.files[0];
     input.value = '';
+    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',
@@ -1399,42 +1721,51 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
     });
     dialogRef.afterClosed().subscribe((result: any) => {
       if (result) {
-        this.signatureFile = result.croppedFile;
-        this.signaturePreview = result.previewUrl;
-        // In edit mode, delete old signature doc then upload new one
-        if (this.clientId) {
-          if (this.existingSignatureDocId) {
-            this.clientsService.deleteClientDocument(this.clientId, this.existingSignatureDocId).subscribe({
-              next: () => {
-                this.clientsService.uploadClientSignatureImage(this.clientId, result.croppedFile).subscribe({
-                  next: (res: any) => {
-                    if (res?.resourceId) this.existingSignatureDocId = res.resourceId.toString();
-                  },
-                  error: () => {}
-                });
-              },
-              error: () => {
-                this.clientsService.uploadClientSignatureImage(this.clientId, result.croppedFile).subscribe({
-                  next: (res: any) => {
-                    if (res?.resourceId) this.existingSignatureDocId = res.resourceId.toString();
-                  },
-                  error: () => {}
-                });
-              }
-            });
-          } else {
-            this.clientsService.uploadClientSignatureImage(this.clientId, result.croppedFile).subscribe({
-              next: (res: any) => {
-                if (res?.resourceId) this.existingSignatureDocId = res.resourceId.toString();
-              },
-              error: () => {}
-            });
-          }
-        }
+        this.applySignatureFile(result.croppedFile, result.previewUrl);
       }
     });
   }
 
+  /** Draw-with-mouse/touchpad entry point for the specimen signature — same staging/upload
+   * path as the file-picker and webcam flows, minus the crop step (the pad's canvas is
+   * already the right shape/size). */
+  drawSignature(): void {
+    const dialogRef = this.dialog.open(DrawSignatureDialogComponent);
+    dialogRef.afterClosed().subscribe((file: File) => {
+      if (file) {
+        this.applySignatureFile(file, URL.createObjectURL(file));
+      }
+    });
+  }
+
+  /** Stages the signature locally and, in edit mode, persists it — replacing any existing
+   * signature doc first so a client never ends up with two. Shared by the file-picker, webcam
+   * and draw-pad entry points. */
+  private applySignatureFile(file: File, previewUrl: string): void {
+    this.signatureFile = file;
+    this.signaturePreview = previewUrl;
+    if (!this.clientId) {
+      return;
+    }
+    if (this.existingSignatureDocId) {
+      this.clientsService.deleteClientDocument(this.clientId, this.existingSignatureDocId).subscribe({
+        next: () => this.uploadSignatureFile(file),
+        error: () => this.uploadSignatureFile(file)
+      });
+    } else {
+      this.uploadSignatureFile(file);
+    }
+  }
+
+  private uploadSignatureFile(file: File): void {
+    this.clientsService.uploadClientSignatureImage(this.clientId, file).subscribe({
+      next: (res: any) => {
+        if (res?.resourceId) this.existingSignatureDocId = res.resourceId.toString();
+      },
+      error: () => {}
+    });
+  }
+
   removePhoto() {
     this.photographFile = null;
     this.photographPreview = null;
@@ -1459,7 +1790,7 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   get kycData(): any {
-    const formVal = this.readOnly ? this.kycForm.getRawValue() : this.kycForm.value;
+    const formVal = this.kycForm.getRawValue();
     const aadhaarRaw = formVal.aadhaarNumber || '';
     const aadhaarMasked = aadhaarRaw.length === 12 ? 'XXXXXXXX' + aadhaarRaw.slice(-4) : null;
     const dateFormat = this.settingsService.dateFormat;
@@ -1528,6 +1859,21 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
       v.form15Applicable
     );
   }
+
+  private applyAutoCalculatedAmlFlags(risk = this.calculatedRisk): void {
+    if (!risk) return;
+    this.kycForm.get('amlCheckStatus')?.setValue(risk.amlCheckStatus || 'CLEAR');
+    this.kycForm.get('bannedEntityMatch')?.setValue(risk.bannedEntityMatch || 'NO');
+    this.kycForm.get('willfulDefaulter')?.setValue(risk.willfulDefaulter || 'NO');
+    this.kycForm.get('ecgcSalFlag')?.setValue(risk.ecgcSalFlag || 'NO');
+    this.kycForm.get('dormantFlag')?.setValue(risk.dormantFlag || 'ACTIVE');
+
+    this.kycForm.get('amlCheckStatus')?.markAsDirty();
+    this.kycForm.get('bannedEntityMatch')?.markAsDirty();
+    this.kycForm.get('willfulDefaulter')?.markAsDirty();
+    this.kycForm.get('ecgcSalFlag')?.markAsDirty();
+    this.kycForm.get('dormantFlag')?.markAsDirty();
+  }
 }
 
 /**

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

@@ -195,7 +195,7 @@
                   client.isMinor ? 'preview-badge preview-badge--danger' : 'preview-badge preview-badge--verified'
                 "
               >
-                {{ client.isMinor ? 'Yes (Age < 10)' : 'No' }}
+                {{ client.isMinor ? 'Yes (Age < 18)' : 'No' }}
               </span>
             </span>
           </div>

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';
@@ -190,7 +191,7 @@ const routes: Routes = [
             {
               path: 'form60',
               component: Form60TabComponent,
-              data: { title: 'Form 60', breadcrumb: 'Form 60', routeParamBreadcrumb: false }
+              data: { title: 'Form 97', breadcrumb: 'Form 97', routeParamBreadcrumb: false }
             },
             {
               path: 'documents',
@@ -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/ckyc-tab/ckyc-tab.component.ts

@@ -234,8 +234,12 @@ export class CkycTabComponent implements OnInit, OnDestroy {
           };
         }
 
-        // 2. Signature — client document with name='clientSignature'
-        const signatureDoc = (documents as any[])?.find((d: any) => d?.name === 'clientSignature');
+        // 2. Signature — client document with name='clientSignature'. Multiple rows can exist
+        // for clients who re-cropped/replaced their signature before uploads became single-slot,
+        // so pick the highest id (latest) rather than the first unordered match.
+        const signatureDoc = (documents as any[])
+          ?.filter((d: any) => d?.name === 'clientSignature')
+          ?.sort((a: any, b: any) => b.id - a.id)?.[0];
         if (signatureDoc) {
           this.existing.CLIENT_SIGNATURE = {
             present: true,

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

@@ -410,6 +410,9 @@
     <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'">
       {{ 'labels.buttons.Add Charge' | translate }}
     </button>
+    <button mat-menu-item (click)="doAction('Welcome Kit')" *mifosxHasPermission="'READ_WELCOMEKIT'">
+      Welcome Kit
+    </button>
     <button mat-menu-item (click)="doAction('Create Collateral')">
       {{ 'labels.buttons.Create Collateral' | translate }}
     </button>
@@ -426,6 +429,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 +565,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

@@ -22,6 +22,7 @@ import { DrawSignatureDialogComponent } from './custom-dialogs/draw-signature-di
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { UploadImageDialogComponent } from './custom-dialogs/upload-image-dialog/upload-image-dialog.component';
 import { CaptureImageDialogComponent } from './custom-dialogs/capture-image-dialog/capture-image-dialog.component';
+import { WelcomeKitDialogComponent } from './custom-dialogs/welcome-kit-dialog/welcome-kit-dialog.component';
 
 /** Custom Services */
 import { ClientsService } from '../clients.service';
@@ -240,6 +241,9 @@ export class ClientsViewComponent implements OnInit {
       case 'Upload Signature':
         this.uploadSignature();
         break;
+      case 'Capture Signature':
+        this.captureSignatureImage();
+        break;
       case 'Delete Signature':
         this.deleteSignature();
         break;
@@ -252,6 +256,9 @@ export class ClientsViewComponent implements OnInit {
       case 'Delete Image':
         this.deleteProfileImage();
         break;
+      case 'Welcome Kit':
+        this.dispatchWelcomeKit();
+        break;
       case 'Create Standing Instructions':
         const createStandingInstructionsQueryParams: any = {
           officeId: this.clientViewData.officeId,
@@ -332,6 +339,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 +400,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 +412,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.
    */
@@ -430,4 +459,20 @@ export class ClientsViewComponent implements OnInit {
       }
     });
   }
+
+  /**
+   * Opens the Welcome Kit Dispatch dialog.
+   */
+  private dispatchWelcomeKit() {
+    const welcomeKitDialogRef = this.dialog.open(WelcomeKitDialogComponent, {
+      data: { clientId: this.clientViewData.id },
+      width: '600px'
+    });
+    welcomeKitDialogRef.afterClosed().subscribe((response: any) => {
+      if (response) {
+        // the form was successfully submitted
+        this.reload();
+      }
+    });
+  }
 }

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/delete-signature-dialog/delete-signature-dialog.component.ts

@@ -47,7 +47,13 @@ export class DeleteSignatureDialogComponent {
    * @param {any} data Documents data
    */
   constructor() {
-    const signature = this.data.find((document: any) => document.name === 'clientSignature') || {};
+    // Multiple 'clientSignature' documents can exist for clients who re-cropped/replaced their
+    // signature before uploads became single-slot, so pick the highest id (latest) rather than
+    // the first unordered match.
+    const signature =
+      this.data
+        .filter((document: any) => document.name === 'clientSignature')
+        .sort((a: any, b: any) => b.id - a.id)[0] || {};
     this.signatureId = signature.id;
   }
 }

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

@@ -347,9 +347,18 @@
                     <i class="fa fa-calendar"></i> Issue / statement date
                     <span class="kyc-opt">(not older than 3 months)</span>
                   </label>
-                  <div class="kyc-input-wrap kyc-input-wrap--date">
-                    <i class="fa fa-calendar-o kyc-input-wrap__icon"></i>
-                    <input type="date" class="kyc-input kyc-input--date" formControlName="issueDate" />
+                  <div class="kyc-input-wrap kyc-input-wrap--date" (click)="uploadIssueDatePicker.open()">
+                    <input
+                      class="kyc-input kyc-input--date"
+                      [matDatepicker]="uploadIssueDatePicker"
+                      formControlName="issueDate"
+                      readonly
+                    />
+                    <mat-datepicker-toggle
+                      class="kyc-input-wrap__calendar-toggle"
+                      [for]="uploadIssueDatePicker"
+                    ></mat-datepicker-toggle>
+                    <mat-datepicker #uploadIssueDatePicker></mat-datepicker>
                   </div>
                 </div>
               }
@@ -438,6 +447,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;
@@ -353,42 +388,32 @@ $red-900: #993c1d;
   padding-left: 38px;
 }
 
-/* Date input — match styling of other kyc inputs */
+/* Date input — opens the Material calendar picker; styled to match other kyc inputs */
 .kyc-input--date {
   font-family: inherit;
   color: $gray-900;
   cursor: pointer;
   min-height: 40px;
-  padding-right: 14px !important;
+  padding-left: 12px !important;
+  padding-right: 40px !important;
+}
 
-  &::-webkit-calendar-picker-indicator {
-    opacity: 0.55;
-    cursor: pointer;
-    filter: grayscale(1);
-    transition: opacity 0.15s;
+.kyc-input-wrap--date .kyc-input-wrap__calendar-toggle {
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: $gray-500;
+
+  ::ng-deep .mat-mdc-icon-button {
+    width: 32px;
+    height: 32px;
+    padding: 4px;
   }
 
-  &:hover::-webkit-calendar-picker-indicator {
-    opacity: 0.9;
-  }
-
-  &::-webkit-datetime-edit {
-    color: $gray-900;
-    padding-top: 1px;
-  }
-
-  &::-webkit-datetime-edit-fields-wrapper {
-    color: $gray-900;
-  }
-
-  &::-webkit-datetime-edit-text {
-    color: $gray-500;
-    padding: 0 2px;
-  }
-
-  &:invalid::-webkit-datetime-edit,
-  &:not(:focus):placeholder-shown::-webkit-datetime-edit {
-    color: $gray-500;
+  ::ng-deep .mat-mdc-icon-button svg {
+    width: 18px;
+    height: 18px;
   }
 }
 

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 {
@@ -63,7 +65,13 @@ export class ViewSignatureDialogComponent implements OnInit {
    * @param {any} data Documents data
    */
   constructor() {
-    const signature = this.data.documents.find((document: any) => document.name === 'clientSignature') || {};
+    // Multiple 'clientSignature' documents can exist for clients who re-cropped/replaced their
+    // signature before uploads became single-slot, so pick the highest id (latest) rather than
+    // the first unordered match.
+    const signature =
+      this.data.documents
+        .filter((document: any) => document.name === 'clientSignature')
+        .sort((a: any, b: any) => b.id - a.id)[0] || {};
     this.signatureId = signature.id;
     this.clientId = this.data.id;
   }

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

@@ -0,0 +1,94 @@
+<!--
+  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/.
+-->
+<h2 mat-dialog-title>Welcome Kit Dispatch</h2>
+
+<mat-dialog-content class="mat-typography">
+  <div fxLayout="row" fxLayoutAlign="center center" style="padding: 2rem" *ngIf="isLoading">
+    <mat-spinner diameter="40"></mat-spinner>
+  </div>
+
+  <ng-container *ngIf="!isLoading">
+    <!-- Tracking view if dispatches already exist -->
+    <div
+      class="dispatch-tracking-panel"
+      *ngFor="let dispatch of activeDispatches; let i = index"
+      style="margin-bottom: 16px; padding: 16px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fafafa"
+    >
+      <div fxLayout="row" fxLayoutAlign="space-between start" style="margin-bottom: 8px">
+        <h3 style="margin: 0">{{ i === 0 ? 'Current' : 'Previous' }} Welcome Kit Status</h3>
+        <button mat-stroked-button color="primary" type="button" (click)="downloadPdf(dispatch)">
+          Download Details
+        </button>
+      </div>
+      <p style="margin: 4px 0"><strong>Delivery Address:</strong> {{ getDisplayAddress(dispatch) }}</p>
+      <p style="margin: 4px 0"><strong>Tracking ID:</strong> {{ dispatch.trackingId }}</p>
+      <p style="margin: 4px 0">
+        <strong>Delivery Mode:</strong> {{ dispatch.deliveryMode }}
+        <ng-container *ngIf="dispatch.deliveryMode === 'OTHER'">({{ dispatch.deliveryModeOtherText }})</ng-container>
+      </p>
+      <p style="margin: 4px 0"><strong>Dispatched On:</strong> {{ dispatch.dispatchedOnDate | date: 'mediumDate' }}</p>
+      <p style="margin: 4px 0">
+        <strong>Status:</strong>
+        <span class="status-badge status-{{ dispatch.status | lowercase }}">{{ dispatch.status }}</span>
+      </p>
+    </div>
+
+    <hr *ngIf="activeDispatches.length > 0 && welcomeKitsData?.canDispatchNew" />
+
+    <!-- Create form if they can dispatch a new one -->
+    <div class="dispatch-create-form" [formGroup]="dispatchForm" *ngIf="welcomeKitsData?.canDispatchNew">
+      <h3>Create New Dispatch</h3>
+      <div fxLayout="column" fxLayoutGap="16px">
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Delivery Address</mat-label>
+          <textarea matInput formControlName="deliveryAddress" rows="3" required></textarea>
+          <mat-error *ngIf="dispatchForm.get('deliveryAddress')?.hasError('required')">
+            Delivery Address is required
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label>Delivery Mode</mat-label>
+          <mat-select formControlName="deliveryMode" required>
+            <mat-option *ngFor="let mode of deliveryModes" [value]="mode">
+              {{ mode }}
+            </mat-option>
+          </mat-select>
+          <mat-error *ngIf="dispatchForm.get('deliveryMode')?.hasError('required')">
+            Delivery Mode is required
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field
+          appearance="outline"
+          class="full-width"
+          *ngIf="dispatchForm.get('deliveryMode')?.value === 'OTHER'"
+        >
+          <mat-label>Specify Other Mode</mat-label>
+          <input matInput formControlName="deliveryModeOtherText" required />
+          <mat-error *ngIf="dispatchForm.get('deliveryModeOtherText')?.hasError('required')">
+            Please specify the delivery mode
+          </mat-error>
+        </mat-form-field>
+      </div>
+    </div>
+  </ng-container>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Close</button>
+  <button
+    mat-raised-button
+    color="primary"
+    *ngIf="welcomeKitsData?.canDispatchNew && !isLoading"
+    (click)="submit()"
+    [disabled]="dispatchForm.invalid || isLoading"
+  >
+    Dispatch
+  </button>
+</mat-dialog-actions>

src/app/clients/clients-view/custom-dialogs/welcome-kit-dialog/welcome-kit-dialog.component.scss

@@ -0,0 +1,59 @@
+/**
+ * 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/.
+ */
+.dispatch-tracking-panel {
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+
+  h3 {
+    margin-top: 0;
+    margin-bottom: 12px;
+    font-size: 1.1rem;
+  }
+
+  p {
+    margin: 6px 0;
+  }
+
+  .status-badge {
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: white;
+
+    &.status-dispatched {
+      background-color: #1976d2;
+    }
+
+    &.status-in_transit {
+      background-color: #f57c00;
+    }
+
+    &.status-delivered {
+      background-color: #388e3c;
+    }
+
+    &.status-returned {
+      background-color: #d32f2f;
+    }
+  }
+}
+
+.dispatch-create-form {
+  h3 {
+    margin-top: 0;
+    margin-bottom: 12px;
+    font-size: 1.1rem;
+  }
+}
+
+.full-width {
+  width: 100%;
+}

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

@@ -0,0 +1,347 @@
+/**
+ * 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, inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ClientsService } from '../../../clients.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { DatePipe } from '@angular/common';
+import { jsPDF } from 'jspdf';
+import autoTable from 'jspdf-autotable';
+
+@Component({
+  selector: 'mifosx-welcome-kit-dialog',
+  templateUrl: './welcome-kit-dialog.component.html',
+  styleUrls: ['./welcome-kit-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatProgressSpinnerModule
+  ],
+  providers: [DatePipe]
+})
+export class WelcomeKitDialogComponent implements OnInit {
+  private dialogRef = inject(MatDialogRef<WelcomeKitDialogComponent>);
+  data: { clientId: string } = inject(MAT_DIALOG_DATA);
+  private clientsService = inject(ClientsService);
+  private formBuilder = inject(FormBuilder);
+  private snackBar = inject(MatSnackBar);
+  private datePipe = inject(DatePipe);
+
+  isLoading = true;
+  welcomeKitsData: any = null;
+  dispatchForm: FormGroup = this.formBuilder.group({
+    deliveryAddress: [
+      '',
+      Validators.required
+    ],
+    deliveryMode: [
+      'POSTMAN',
+      Validators.required
+    ],
+    deliveryModeOtherText: ['']
+  });
+  deliveryModes = [
+    'POSTMAN',
+    'COURIER',
+    'OTHER'
+  ];
+
+  constructor() {
+    this.dispatchForm.get('deliveryMode')?.valueChanges.subscribe((mode) => {
+      const otherControl = this.dispatchForm.get('deliveryModeOtherText');
+      if (mode === 'OTHER') {
+        otherControl?.setValidators([Validators.required]);
+      } else {
+        otherControl?.clearValidators();
+      }
+      otherControl?.updateValueAndValidity();
+    });
+  }
+
+  ngOnInit(): void {
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.isLoading = true;
+    this.clientsService.getWelcomeKits(this.data.clientId).subscribe({
+      next: (response: any) => {
+        this.welcomeKitsData = response;
+        if (this.welcomeKitsData && this.welcomeKitsData.canDispatchNew) {
+          this.fetchPrimaryAddress();
+        } else {
+          this.isLoading = false;
+        }
+      },
+      error: () => {
+        this.isLoading = false;
+        this.snackBar.open('Failed to load welcome kits data', 'Close', { duration: 3000 });
+      }
+    });
+  }
+
+  fetchPrimaryAddress() {
+    this.clientsService.getClientAddressData(this.data.clientId).subscribe({
+      next: (addresses: any) => {
+        this.isLoading = false;
+        if (addresses && addresses.length > 0) {
+          // Attempt to build a readable address from the first address returned
+          const primary = addresses[0];
+          const parts = [];
+          if (primary.addressLine1) parts.push(primary.addressLine1);
+          if (primary.addressLine2) parts.push(primary.addressLine2);
+          if (primary.city) parts.push(primary.city);
+          if (primary.stateName) parts.push(primary.stateName);
+          if (primary.postalCode) parts.push(primary.postalCode);
+          if (primary.countryName) parts.push(primary.countryName);
+
+          const clientNameStr = this.welcomeKitsData?.clientName ? this.welcomeKitsData.clientName + ' — ' : '';
+          this.dispatchForm.patchValue({
+            deliveryAddress: clientNameStr + parts.join(', ')
+          });
+        }
+      },
+      error: () => {
+        this.isLoading = false;
+      }
+    });
+  }
+
+  get activeDispatches() {
+    if (this.welcomeKitsData && this.welcomeKitsData.dispatches && this.welcomeKitsData.dispatches.length > 0) {
+      return this.welcomeKitsData.dispatches;
+    }
+    return [];
+  }
+
+  submit() {
+    if (this.dispatchForm.invalid) {
+      this.dispatchForm.markAllAsTouched();
+      return;
+    }
+
+    this.isLoading = true;
+    const formValue = this.dispatchForm.value;
+
+    const today = new Date();
+    const formattedDate = this.datePipe.transform(today, 'dd MMMM yyyy');
+
+    const payload = {
+      deliveryAddress: formValue.deliveryAddress,
+      deliveryMode: formValue.deliveryMode,
+      deliveryModeOtherText: formValue.deliveryMode === 'OTHER' ? formValue.deliveryModeOtherText : null,
+      dispatchedOnDate: formattedDate,
+      locale: 'en',
+      dateFormat: 'dd MMMM yyyy'
+    };
+
+    this.clientsService.dispatchWelcomeKit(this.data.clientId, payload).subscribe({
+      next: () => {
+        this.snackBar.open('Welcome Kit Dispatched successfully', 'Close', { duration: 3000 });
+        this.fetchData();
+      },
+      error: () => {
+        this.isLoading = false;
+        this.snackBar.open('Failed to dispatch welcome kit', 'Close', { duration: 3000 });
+      }
+    });
+  }
+
+  getDisplayAddress(dispatch: any): string {
+    const address = dispatch.deliveryAddress || '';
+    const name = this.welcomeKitsData?.clientName || '';
+    if (name && !address.startsWith(name)) {
+      return `${name} — ${address}`;
+    }
+    return address;
+  }
+
+  downloadPdf(dispatch: any) {
+    const doc = new jsPDF();
+    const clientName = this.welcomeKitsData?.clientName || dispatch.clientName || 'N/A';
+    const address = this.getDisplayAddress(dispatch);
+    const mode =
+      dispatch.deliveryMode === 'OTHER'
+        ? `${dispatch.deliveryMode} (${dispatch.deliveryModeOtherText || ''})`
+        : dispatch.deliveryMode;
+    const trackingId = dispatch.trackingId || 'N/A';
+    const status = dispatch.status || 'N/A';
+    const dispatchedOn = this.datePipe.transform(dispatch.dispatchedOnDate, 'mediumDate') || 'N/A';
+
+    const primaryColor: [number, number, number] = [
+      31,
+      73,
+      125
+    ]; // Navy Blue
+    const grayColor: [number, number, number] = [
+      100,
+      100,
+      100
+    ];
+    const lightGray: [number, number, number] = [
+      230,
+      230,
+      230
+    ];
+    const pageWidth = doc.internal.pageSize.getWidth();
+    const pageHeight = doc.internal.pageSize.getHeight();
+
+    // --- 1. Header Banner ---
+    doc.setFillColor(...primaryColor);
+    doc.rect(0, 0, pageWidth, 40, 'F');
+
+    // Decorative circles
+    doc.setFillColor(255, 255, 255);
+    doc.circle(pageWidth - 20, 15, 3, 'F');
+    doc.circle(pageWidth - 30, 25, 2, 'F');
+    doc.circle(pageWidth - 10, 30, 1.5, 'F');
+
+    doc.setFontSize(28);
+    doc.setFont('helvetica', 'bold');
+    doc.setTextColor(255, 255, 255);
+    doc.text('CBSNexora', 20, 22);
+
+    doc.setFontSize(11);
+    doc.setFont('helvetica', 'normal');
+    doc.text('Core Banking Solution', 22, 30);
+
+    // --- 2. Title ---
+    let currentY = 55;
+    doc.setFontSize(16);
+    doc.setFont('helvetica', 'bold');
+    doc.setTextColor(...primaryColor);
+    doc.text('Welcome Kit Dispatch Confirmation', pageWidth / 2, currentY, { align: 'center' });
+    currentY += 12;
+
+    // --- 3. Date Line ---
+    doc.setFontSize(11);
+    doc.setFont('helvetica', 'normal');
+    doc.setTextColor(0, 0, 0);
+    const today = this.datePipe.transform(new Date(), 'longDate');
+    doc.text(`Date: ${today}`, pageWidth - 20, currentY, { align: 'right' });
+    currentY += 15;
+
+    // --- 4. Greeting ---
+    doc.text(`Dear ${clientName},`, 20, currentY);
+    currentY += 10;
+
+    // --- 5. Opening welcome paragraph ---
+    const p1 =
+      'Welcome to the CBSNexora family! We are delighted to have you on board as a valued client. As part of our onboarding process, we have dispatched your Welcome Kit to your registered address, which includes your account documentation and essential banking materials to help you get started with us.';
+    const splitP1 = doc.splitTextToSize(p1, pageWidth - 40);
+    doc.text(splitP1, 20, currentY);
+    currentY += splitP1.length * 6 + 8;
+
+    // --- 6. Short paragraph about the company ---
+    const p2 =
+      'CBSNexora is committed to providing secure, reliable, and customer-first banking services. Our team is always available to assist you with any banking needs, from account management to digital services, ensuring a seamless banking experience.';
+    const splitP2 = doc.splitTextToSize(p2, pageWidth - 40);
+    doc.text(splitP2, 20, currentY);
+    currentY += splitP2.length * 6 + 8;
+
+    // --- 7. Transition line before details ---
+    doc.text('Please find your Welcome Kit dispatch details below for your reference:', 20, currentY);
+    currentY += 8;
+
+    // --- 8. Details Section ---
+    autoTable(doc, {
+      startY: currentY,
+      theme: 'plain',
+      margin: { left: 20, right: 20 },
+      styles: { fontSize: 11, cellPadding: 6, textColor: [
+          0,
+          0,
+          0
+        ] },
+      columnStyles: {
+        0: { fontStyle: 'bold', cellWidth: 50 },
+        1: { cellWidth: 'auto' }
+      },
+      didDrawCell: (data) => {
+        if (data.row.index >= 0) {
+          doc.setDrawColor(...lightGray);
+          doc.setLineWidth(0.2);
+          doc.line(
+            data.cell.x,
+            data.cell.y + data.cell.height,
+            data.cell.x + data.cell.width,
+            data.cell.y + data.cell.height
+          );
+        }
+      },
+      body: [
+        [
+          'Delivery Address',
+          address
+        ],
+        [
+          'Delivery Mode',
+          mode
+        ],
+        [
+          'Tracking ID',
+          trackingId
+        ],
+        [
+          'Status',
+          status
+        ],
+        [
+          'Dispatched On',
+          dispatchedOn
+        ]
+      ]
+    });
+
+    // --- 9. Closing paragraph ---
+    currentY = (doc as any).lastAutoTable.finalY + 12;
+    const p3 =
+      'Should you have any questions about your Welcome Kit or need any assistance, please do not hesitate to reach out to our support team. We look forward to serving you and building a long-term relationship with you.';
+    const splitP3 = doc.splitTextToSize(p3, pageWidth - 40);
+    doc.text(splitP3, 20, currentY);
+    currentY += splitP3.length * 6 + 12;
+
+    // --- 10. Sign-off ---
+    doc.text('Warm regards,', 20, currentY);
+    currentY += 7;
+    doc.setFont('helvetica', 'bold');
+    doc.text('CBSNexora Operations Team', 20, currentY);
+
+    // --- 11. Footer ---
+    // Ensure footer doesn't float too high on short pages, but pushes down if content goes long
+    let footerY = currentY + 30;
+    if (footerY < pageHeight - 30) {
+      footerY = pageHeight - 30;
+    }
+
+    doc.setDrawColor(...primaryColor);
+    doc.setLineWidth(0.3);
+    doc.line(20, footerY - 5, pageWidth - 20, footerY - 5);
+
+    doc.setFontSize(9);
+    doc.setFont('helvetica', 'italic');
+    doc.setTextColor(...grayColor);
+    const timestamp = this.datePipe.transform(new Date(), 'medium');
+    doc.text(`This is a system-generated document. Generated on: ${timestamp}`, 20, footerY + 2);
+
+    doc.save(`WelcomeKit_Dispatch_${trackingId !== 'N/A' ? trackingId : new Date().getTime()}.pdf`);
+  }
+}

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

@@ -19,14 +19,14 @@
       <div class="f60-pan-ok__icon-wrap">
         <mat-icon class="f60-pan-ok__icon">verified</mat-icon>
       </div>
-      <h3 class="f60-pan-ok__title">Form 60 Not Required</h3>
+      <h3 class="f60-pan-ok__title">Form 97 Not Required</h3>
       <p class="f60-pan-ok__desc">
         PAN <strong>{{ panNumber }}</strong> is attached to this client.
         @if (panVerified) {
           <mat-icon class="f60-pan-ok__tick">check_circle</mat-icon> <span class="f60-pan-ok__verified">Verified</span>
         }
       </p>
-      <p class="f60-pan-ok__rule">As per Income Tax Rule 114B, Form 60 is only required when PAN is not available.</p>
+      <p class="f60-pan-ok__rule">As per Income Tax Rule 114B, Form 97 is only required when PAN is not available.</p>
     </div>
   }
 
@@ -36,7 +36,7 @@
     <div class="f60-warning">
       <mat-icon class="f60-warning__icon">warning_amber</mat-icon>
       <div class="f60-warning__text">
-        <strong>PAN not provided</strong> — Form 60 declaration is mandatory as per Income Tax Rule 114B.
+        <strong>PAN not provided</strong> — Form 97 declaration is mandatory as per Income Tax Rule 114B.
       </div>
     </div>
 
@@ -45,7 +45,7 @@
       <div class="f60-card">
         <div class="f60-card__header">
           <mat-icon class="f60-card__header-icon">description</mat-icon>
-          <h3>Form 60 Declaration</h3>
+          <h3>Form 97 Declaration</h3>
           <span class="f60-card__status">Submitted</span>
           <button mat-stroked-button color="primary" (click)="toggleEditMode()" class="f60-card__edit">
             <mat-icon>edit</mat-icon> Edit
@@ -123,7 +123,7 @@
       <div class="f60-card">
         <div class="f60-card__header">
           <mat-icon class="f60-card__header-icon">edit_note</mat-icon>
-          <h3>Form 60 Declaration</h3>
+          <h3>Form 97 Declaration</h3>
         </div>
         <div class="f60-card__body">
           <form [formGroup]="form60Form" (ngSubmit)="submit()">
@@ -204,7 +204,7 @@
                 <button type="button" mat-stroked-button (click)="toggleEditMode()">Cancel</button>
               }
               <button type="submit" mat-flat-button color="primary" [disabled]="!form60Form.valid">
-                <mat-icon>check</mat-icon> Submit Form 60
+                <mat-icon>check</mat-icon> Submit Form 97
               </button>
             </div>
           </form>

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

@@ -224,14 +224,14 @@ export class Form60TabComponent implements OnInit, OnDestroy {
           this.isEditMode = false;
           this.alertService.alert({
             type: 'success',
-            message: 'Form 60 submitted successfully.'
+            message: 'Form 97 submitted successfully.'
           });
           this.loadForm60Data();
         },
         error: (err: any) => {
           this.alertService.alert({
             type: 'error',
-            message: err?.error?.developerMessage || err?.error?.defaultUserMessage || 'Failed to submit Form 60.'
+            message: err?.error?.developerMessage || err?.error?.defaultUserMessage || 'Failed to submit Form 97.'
           });
         }
       });

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-view/personal-data-tab/personal-data-tab.component.html

@@ -105,7 +105,7 @@
                   [class.pd-verify-badge--verified]="!clientViewData.isMinor"
                   [class.pd-verify-badge--pending]="clientViewData.isMinor"
                 >
-                  {{ clientViewData.isMinor ? 'Yes (Age < 10)' : 'No' }}
+                  {{ clientViewData.isMinor ? 'Yes (Age < 18)' : 'No' }}
                 </span>
               </div>
             </div>

src/app/clients/clients.component.html

@@ -98,12 +98,10 @@
         </td>
       </ng-container>
 
-      <!-- Account no Column -->
+      <!-- Client ID Column -->
       <ng-container matColumnDef="accountNumber">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account No' | translate }}</th>
-        <td mat-cell *matCellDef="let row" class="cell-mono">
-          <mifosx-account-number display="left" accountNo="{{ row.accountNumber }}"></mifosx-account-number>
-        </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Client ID</th>
+        <td mat-cell *matCellDef="let row" class="cell-mono">{{ row.id }}</td>
       </ng-container>
 
       <!-- CIF Number Column -->

src/app/clients/clients.component.ts

@@ -137,7 +137,16 @@ export class ClientsComponent implements OnInit {
   private getClients() {
     this.isLoading = true;
     this.clientService
-      .searchByText(this.filterText, this.currentPage, this.pageSize, this.sortAttribute, this.sortDirection)
+      .searchByText(
+        this.filterText,
+        this.currentPage,
+        this.pageSize,
+        this.sortAttribute,
+        this.sortDirection,
+        false,
+        '',
+        true
+      )
       .subscribe(
         (data: any) => {
           this.allRows = data.content || [];
@@ -166,7 +175,7 @@ export class ClientsComponent implements OnInit {
     // Use individual subscriptions instead of forkJoin to avoid EMPTY observable issues
     clients.forEach((client, i) => {
       this.clientService
-        .getClientData(client.id?.toString())
+        .getClientData(client.id?.toString(), true)
         .pipe(catchError(() => of(null)))
         .subscribe((data: any) => {
           if (data?.legalForm) {
@@ -176,7 +185,7 @@ export class ClientsComponent implements OnInit {
         });
 
       this.clientService
-        .getClientKyc(client.id?.toString())
+        .getClientKyc(client.id?.toString(), true)
         .pipe(catchError(() => of(null)))
         .subscribe((kyc: any) => {
           if (kyc) {
@@ -188,7 +197,7 @@ export class ClientsComponent implements OnInit {
         });
 
       this.clientService
-        .getClientAddressData(client.id?.toString())
+        .getClientAddressData(client.id?.toString(), true)
         .pipe(catchError(() => of(null)))
         .subscribe((addr: any) => {
           if (addr && Array.isArray(addr) && addr.length > 0) {

src/app/clients/clients.service.ts

@@ -8,7 +8,8 @@
 
 /** Angular Imports */
 import { Injectable, inject } from '@angular/core';
-import { HttpClient, HttpParams, HttpBackend, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpParams, HttpBackend, HttpHeaders, HttpContext } from '@angular/common/http';
+import { SILENT_HTTP_ERROR } from 'app/core/http/silent-error.token';
 
 /** rxjs Imports */
 import { Observable, of, throwError } from 'rxjs';
@@ -16,6 +17,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.
@@ -65,8 +67,11 @@ export class ClientsService {
     return this.http.get(`/clients/template?officeId=${officeId}&staffInSelectedOfficeOnly=true`);
   }
 
-  getClientData(clientId: string) {
-    return this.http.get(`/clients/${clientId}`);
+  getClientData(clientId: string, silent = false) {
+    return this.http.get(
+      `/clients/${clientId}`,
+      silent ? { context: new HttpContext().set(SILENT_HTTP_ERROR, true) } : {}
+    );
   }
 
   createClient(client: any) {
@@ -81,6 +86,43 @@ export class ClientsService {
     return this.http.delete(`/clients/${clientId}`);
   }
 
+  /**
+   * Maker-checker for Client edits — stages the change in m_client_pending_edit instead of
+   * applying it immediately; a different user must call approveClientEdit() before it takes
+   * effect. See ClientEditApiResource on the backend.
+   */
+  submitClientEdit(clientId: string, client: any) {
+    return this.http.post(`/clients/${clientId}/edit`, client);
+  }
+
+  getPendingClientEdit(clientId: string) {
+    return this.http.get(`/clients/${clientId}/edit/pending`);
+  }
+
+  getAllPendingClientEdits(
+    status?: string,
+    clientName?: string,
+    fromDate?: string,
+    toDate?: string,
+    offset = 0,
+    limit = 20
+  ): Observable<any> {
+    let params = new HttpParams().set('offset', offset).set('limit', limit);
+    if (status) params = params.set('status', status);
+    if (clientName) params = params.set('clientName', clientName);
+    if (fromDate) params = params.set('fromDate', fromDate);
+    if (toDate) params = params.set('toDate', toDate);
+    return this.http.get(`/clients/edit/pending`, { params });
+  }
+
+  approveClientEdit(clientId: string) {
+    return this.http.post(`/clients/${clientId}/edit/approve`, {});
+  }
+
+  rejectClientEdit(clientId: string, rejectReason?: string) {
+    return this.http.post(`/clients/${clientId}/edit/reject`, { rejectReason: rejectReason || '' });
+  }
+
   getClientDataAndTemplate(clientId: string) {
     const httpParams = new HttpParams().set('template', 'true').set('staffInSelectedOfficeOnly', 'true');
     return this.http.get(`/clients/${clientId}`, { params: httpParams });
@@ -115,8 +157,11 @@ export class ClientsService {
     return this.http.get(`/clients/${clientId}/accounts`);
   }
 
-  getClientAddressData(clientId: string) {
-    return this.http.get(`/client/${clientId}/addresses`);
+  getClientAddressData(clientId: string, silent = false) {
+    return this.http.get(
+      `/client/${clientId}/addresses`,
+      silent ? { context: new HttpContext().set(SILENT_HTTP_ERROR, true) } : {}
+    );
   }
 
   getClientChargesData(clientId: string) {
@@ -230,6 +275,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`);
   }
@@ -603,7 +705,8 @@ export class ClientsService {
     sortAttribute: string = '',
     sortDirection: string = '',
     activeOnly: boolean = false,
-    legalFormType: string = ''
+    legalFormType: string = '',
+    silent: boolean = false
   ) {
     const innerRequest: any = { text };
     if (activeOnly) {
@@ -632,7 +735,11 @@ export class ClientsService {
         ]
       };
     }
-    return this.http.post(`/v2/clients/search`, request);
+    return this.http.post(
+      `/v2/clients/search`,
+      request,
+      silent ? { context: new HttpContext().set(SILENT_HTTP_ERROR, true) } : {}
+    );
   }
 
   /**
@@ -669,8 +776,11 @@ export class ClientsService {
    * Gets KYC details for a client.
    * @param clientId Client ID
    */
-  getClientKyc(clientId: string): Observable<any> {
-    return this.http.get(`/clients/${clientId}/kyc`);
+  getClientKyc(clientId: string, silent = false): Observable<any> {
+    return this.http.get(
+      `/clients/${clientId}/kyc`,
+      silent ? { context: new HttpContext().set(SILENT_HTTP_ERROR, true) } : {}
+    );
   }
 
   /**
@@ -681,6 +791,10 @@ export class ClientsService {
     return this.http.get(`/clients/${clientId}/kyc/template`);
   }
 
+  getClientRiskRules(): Observable<any[]> {
+    return this.http.get<any[]>('/kyc/risk-rules');
+  }
+
   /** Fetch code values by code ID */
   getCodeValuesById(codeId: number): Observable<any[]> {
     return this.http.get<any[]>(`/codes/${codeId}/codevalues`).pipe(catchError(() => of([])));
@@ -836,4 +950,12 @@ export class ClientsService {
   submitClientForm60(clientId: string, data: any): Observable<any> {
     return this.http.post(`/clients/${clientId}/form60`, data);
   }
+
+  getWelcomeKits(clientId: string | number): Observable<any> {
+    return this.http.get(`/clients/${clientId}/welcomekit`);
+  }
+
+  dispatchWelcomeKit(clientId: string | number, data: any): Observable<any> {
+    return this.http.post(`/clients/${clientId}/welcomekit`, data);
+  }
 }

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

@@ -71,10 +71,12 @@
           <mifosx-client-kyc-step
             #clientKyc
             [isNonIndividual]="legalFormType === 2"
+            [isMinor]="clientGeneralStep?.isMinor || false"
             [clientId]="createdClientId"
             [constitutionMeta]="clientGeneralStep?.selectedConstitution"
             [entityName]="clientGeneralStep?.createClientForm?.get('fullname')?.value || ''"
             [readOnly]="isTabReadOnly(1)"
+            [calculatedRisk]="clientGeneralStep?.calculatedRisk"
           ></mifosx-client-kyc-step>
         </div>
 
@@ -146,6 +148,8 @@
         }
         <mifosx-client-india-address-step
           #clientIndiaAddress
+          [isMinor]="clientGeneralStep?.isMinor || false"
+          [isNonIndividual]="legalFormType === 2"
           [readOnly]="isTabReadOnly(addressTabIdx)"
         ></mifosx-client-india-address-step>
       </div>

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

@@ -111,6 +111,12 @@ export class CreateClientComponent {
     this.route.data.subscribe((data: { clientTemplate: any; clientAddressFieldConfig: any }) => {
       this.clientTemplate = data.clientTemplate;
       this.clientAddressFieldConfig = data.clientAddressFieldConfig;
+      // This app's RouteReusableStrategy keeps this SAME component instance alive across
+      // repeat visits to /clients/create, so ngOnInit/constructor won't re-run for a second
+      // "create new client" session — reset transient state here instead, since `route.data`
+      // re-emits on every navigation regardless of whether the component was reused. Must run
+      // BEFORE setDatatables(), which reads legalFormType to filter clientTemplate.datatables.
+      this.resetForNewClient();
       this.setDatatables();
     });
     // Read pre-fill data set by "Create as Client" from a manual family member
@@ -121,6 +127,22 @@ export class CreateClientComponent {
     }
   }
 
+  /** Resets session state that could otherwise leak between clients when the route is reused. */
+  private resetForNewClient(): void {
+    this.legalFormType = 1;
+    this.selectedTabIndex = 0;
+    this.createdClientId = '';
+    this.savingClient = false;
+    this.saveProgress = 0;
+    this.tabEditMode = {};
+    this.highestTabReached = 0;
+    this.validationError = '';
+    this.prefillData = null;
+    this.clientGeneralStep?.resetForNewClient();
+    this.clientKycStep?.resetForNewClient();
+    this.clientIndiaAddressStep?.resetForNewClient();
+  }
+
   /** Check if a tab is in read-only mode (completed tab navigated back to) */
   isTabReadOnly(tabIndex: number): boolean {
     // Only tabs that have been passed (below highest reached) AND not explicitly set to edit mode
@@ -192,7 +214,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
@@ -215,8 +240,8 @@ export class CreateClientComponent {
         return this.isAddressStepValid();
       }
       if (idx === 3) {
-        // Family tab — relations are optional, always allow.
-        return true;
+        // Family tab — Mother is required, and either Father or a Caretaker.
+        return !this.clientFamilyMembersStep || this.clientFamilyMembersStep.familyRelationshipRulesMet;
       }
     }
     return true;
@@ -241,6 +266,20 @@ 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(', ')}.`;
+      }
+    }
+    if (idx === 3 && this.legalFormType === 1 && this.clientFamilyMembersStep) {
+      const step = this.clientFamilyMembersStep;
+      if (!step.hasMother) return 'Mother is required as a family member.';
+      if (!step.hasFather && !step.hasCaretaker) return 'Either Father or a Caretaker is required as a family member.';
+    }
     return 'Please fill all mandatory fields on this tab to continue.';
   }
 
@@ -309,6 +348,28 @@ 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;
+      }
+
+      // PWD gate — disability type + certificate are mandatory when PWD is checked
+      // (Senior Citizen proof upload is optional, not gated here)
+      if (!this.clientGeneralStep?.seniorPwdDocsComplete) {
+        this.clientGeneralStep?.markSeniorPwdDocsTouched();
+        this.snackBar.open(
+          'Select the disability type and upload the Disability Certificate before continuing.',
+          'Close',
+          { duration: 5000 }
+        );
+        return;
+      }
+
       // Sanctions verification gate — Verify Client must be clicked before save
       if (!this.clientGeneralStep?.sanctionsVerified) {
         this.dialog
@@ -426,6 +487,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) => {
@@ -441,6 +508,29 @@ export class CreateClientComponent {
         clearInterval(progressInterval);
         this.saveProgress = 100;
         this.createdClientId = response.resourceId;
+
+        // Senior Citizen / PWD supporting documents — uploaded after creation, same pattern as
+        // the KYC step's photo/signature uploads (the generic /clients/{id}/documents endpoint
+        // needs a real clientId, which only exists once createClient() has returned).
+        if (this.clientGeneralStep?.seniorCitizenProofFile) {
+          const seniorCitizenProofForm = new FormData();
+          seniorCitizenProofForm.append('file', this.clientGeneralStep.seniorCitizenProofFile);
+          seniorCitizenProofForm.append('name', 'seniorCitizenProof');
+          seniorCitizenProofForm.append('description', 'Senior Citizen Proof (Age/ID Proof)');
+          this.clientsService
+            .uploadClientDocument(this.createdClientId, seniorCitizenProofForm)
+            .subscribe({ error: () => {} });
+        }
+        if (this.clientGeneralStep?.pwdCertificateFile) {
+          const pwdCertificateForm = new FormData();
+          pwdCertificateForm.append('file', this.clientGeneralStep.pwdCertificateFile);
+          pwdCertificateForm.append('name', 'pwdCertificate');
+          pwdCertificateForm.append('description', 'Disability Certificate');
+          this.clientsService
+            .uploadClientDocument(this.createdClientId, pwdCertificateForm)
+            .subscribe({ error: () => {} });
+        }
+
         // Brief delay to show 100% before transitioning
         setTimeout(() => {
           this.savingClient = false;
@@ -486,6 +576,21 @@ export class CreateClientComponent {
       this.selectedTabIndex = 3;
       return;
     }
+    // Validate: Mother required, and either Father or a Caretaker (Individual clients)
+    if (
+      this.legalFormType === 1 &&
+      this.clientFamilyMembersStep &&
+      !this.clientFamilyMembersStep.familyRelationshipRulesMet
+    ) {
+      const step = this.clientFamilyMembersStep;
+      if (!step.hasMother) {
+        this.validationError = 'Mother is required as a family member.';
+      } else {
+        this.validationError = 'Either Father or a Caretaker is required as a family member.';
+      }
+      this.selectedTabIndex = 3;
+      return;
+    }
     this.validationError = '';
 
     if (this.createdClientId) {
@@ -493,12 +598,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

@@ -25,9 +25,22 @@
         {{ 'labels.inputs.GENERAL' | translate }}
       </ng-template>
       <div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(0)">
+        @if (hasPendingGeneralEdit) {
+          <div class="pending-edit-banner">
+            <mat-icon>hourglass_top</mat-icon>
+            <span
+              >An edit is awaiting approval from another user. You can't submit another edit until it's resolved.</span
+            >
+          </div>
+        }
         <div class="tab-mode-bar">
           @if (isTabReadOnly(0)) {
-            <button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(0)">
+            <button
+              mat-flat-button
+              class="tab-mode-btn tab-mode-btn--edit"
+              [disabled]="hasPendingGeneralEdit"
+              (click)="enableTabEdit(0)"
+            >
               <mat-icon>edit</mat-icon> Edit
             </button>
           } @else {
@@ -42,6 +55,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>
 
@@ -76,8 +162,10 @@
           <mifosx-client-kyc-step
             #clientKyc
             [isNonIndividual]="legalFormType === 2"
+            [isMinor]="clientGeneralStep?.isMinor || false"
             [clientId]="clientId"
             [readOnly]="isTabReadOnly(1)"
+            [calculatedRisk]="clientGeneralStep?.calculatedRisk"
           ></mifosx-client-kyc-step>
         </div>
       </div>
@@ -133,6 +221,8 @@
         <mifosx-client-india-address-step
           #clientIndiaAddress
           [clientId]="clientId"
+          [isMinor]="clientGeneralStep?.isMinor || false"
+          [isNonIndividual]="legalFormType === 2"
           [readOnly]="isTabReadOnly(addressTabIdx)"
         ></mifosx-client-india-address-step>
       </div>

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

@@ -150,6 +150,93 @@
   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;
+  }
+}
+
+/* ─── Pending Edit Approval Banner ─── */
+.pending-edit-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  margin: 0 0 16px;
+  background: #eff6ff;
+  border: 1px solid #93c5fd;
+  border-radius: 8px;
+  color: #1e40af;
+  font-size: 13px;
+  font-weight: 500;
+
+  mat-icon {
+    color: #2563eb;
+    flex-shrink: 0;
+  }
+}
+
 /* ─── 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';
@@ -36,6 +38,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatTooltip } from '@angular/material/tooltip';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { ORIGINAL_VALUES_PAYLOAD_KEY, buildOriginalValuesSnapshot } from '../shared/client-edit-diff.util';
 
 /**
  * Edit Client Component — uses the same wizard/stepper layout as Create Client.
@@ -59,7 +62,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     ClientDatatableStepComponent,
     ClientKycStepComponent,
     ClientPreviewStepComponent,
-    ClientFamilyMembersStepComponent
+    ClientFamilyMembersStepComponent,
+    ContactOtpBlockComponent
   ]
 })
 export class EditClientComponent {
@@ -68,6 +72,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,10 +93,33 @@ 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 */
   clientId: string;
+  /** True while a General-tab edit is staged awaiting checker approval — blocks submitting
+   * another one (the backend enforces this too; this just avoids a round-trip error toast). */
+  hasPendingGeneralEdit = false;
 
   constructor() {
     this.route.data.subscribe((data: { clientDataAndTemplate: any }) => {
@@ -100,6 +128,15 @@ export class EditClientComponent {
       if (this.clientDataAndTemplate.legalForm) {
         this.legalFormType = this.clientDataAndTemplate.legalForm.id;
       }
+      this.loadPendingGeneralEdit();
+    });
+  }
+
+  private loadPendingGeneralEdit(): void {
+    if (!this.clientId) return;
+    this.clientsService.getPendingClientEdit(this.clientId).subscribe({
+      next: (edit: any) => (this.hasPendingGeneralEdit = !!edit && edit.status === 'PENDING'),
+      error: () => (this.hasPendingGeneralEdit = false)
     });
   }
 
@@ -168,6 +205,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 +288,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;
@@ -205,14 +300,20 @@ export class EditClientComponent {
     if (this.legalFormType === 2) {
       if (idx === 2) return true; // Scheme & Sector — opt-in
       if (idx === 3) return this.isAddressStepValid();
-      if (idx === 4) return true; // Family — optional
+      if (idx === 4) return true; // Family — not applicable to non-individual entities
     } else {
       if (idx === 2) return this.isAddressStepValid();
-      if (idx === 3) return true; // Family — optional
+      if (idx === 3) return this.isFamilyStepValid(); // Mother required, plus Father or a Caretaker
     }
     return true;
   }
 
+  /** Mother is required, and either Father or a Caretaker, for individual clients. */
+  private isFamilyStepValid(): boolean {
+    const step = this.clientFamilyMembersStep;
+    return !step || step.familyRelationshipRulesMet;
+  }
+
   private isAddressStepValid(): boolean {
     const step = this.clientIndiaAddressStep;
     if (!step) return true;
@@ -227,6 +328,21 @@ 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(', ')}.`;
+      }
+    }
+    const familyTabIndex = this.legalFormType === 2 ? 4 : 3;
+    if (this.selectedTabIndex === familyTabIndex && this.legalFormType !== 2 && this.clientFamilyMembersStep) {
+      const step = this.clientFamilyMembersStep;
+      if (!step.hasMother) return 'Mother is required as a family member.';
+      if (!step.hasFather && !step.hasCaretaker) return 'Either Father or a Caretaker is required as a family member.';
+    }
     return 'Please fill all mandatory fields on this tab to continue.';
   }
 
@@ -272,6 +388,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,39 +434,65 @@ 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;
+      }
+
+      // Point-in-time "before" snapshot for the checker's diff view — captured now, from the
+      // client record loaded when this edit page opened, rather than relying on comparing against
+      // the LIVE client later (which would show nothing changed once a checker approves the edit,
+      // since by then current == proposed).
+      clientData[ORIGINAL_VALUES_PAYLOAD_KEY] = buildOriginalValuesSnapshot(originalData);
+
       this.savingClient = true;
-      this.clientsService.updateClient(this.clientId, clientData).subscribe({
+      // Maker-checker: stage the edit instead of applying it immediately. The customer-facing
+      // side effects that a direct update would have had immediately — SMS/Email contact-change
+      // notification, re-KYC flagging, PAN re-verification reset — are all deferred until a
+      // different user actually approves the edit (approval replays this exact payload through
+      // the same updateClient() the direct PUT used to call, so the backend-driven notification
+      // still fires correctly, just at approval time instead of now).
+      this.clientsService.submitClientEdit(this.clientId, clientData).subscribe({
         next: () => {
           this.savingClient = false;
           this.tabEditMode[tabIndex] = false;
+          this.hasPendingGeneralEdit = true;
 
-          // Log mobile/email changes as client notes for risk audit
-          this.logFieldChangeNotes(changedFields);
-
-          // If name or DOB changed, flag re-KYC requirement and reset PAN verification
-          if (changedFields.nameChanged || changedFields.dobChanged) {
-            this.dobChanged = true;
-            this.tabEditMode[1] = true; // auto-enable KYC tab for re-verification
-            this.flagReKycRequired(changedFields);
+          // Senior Citizen / PWD supporting documents — separate upload endpoints, not part of
+          // the staged JSON edit, so these still apply immediately as before.
+          if (this.clientGeneralStep?.seniorCitizenProofFile) {
+            const seniorCitizenProofForm = new FormData();
+            seniorCitizenProofForm.append('file', this.clientGeneralStep.seniorCitizenProofFile);
+            seniorCitizenProofForm.append('name', 'seniorCitizenProof');
+            seniorCitizenProofForm.append('description', 'Senior Citizen Proof (Age/ID Proof)');
+            this.clientsService
+              .uploadClientDocument(this.clientId, seniorCitizenProofForm)
+              .subscribe({ error: () => {} });
+          }
+          if (this.clientGeneralStep?.pwdCertificateFile) {
+            const pwdCertificateForm = new FormData();
+            pwdCertificateForm.append('file', this.clientGeneralStep.pwdCertificateFile);
+            pwdCertificateForm.append('name', 'pwdCertificate');
+            pwdCertificateForm.append('description', 'Disability Certificate');
+            this.clientsService.uploadClientDocument(this.clientId, pwdCertificateForm).subscribe({ error: () => {} });
           }
 
-          // Update original data snapshot so subsequent edits compare against latest
-          if (changedFields.mobileChanged) {
-            originalData.mobileNo = changedFields.newMobile;
-          }
-          if (changedFields.emailChanged) {
-            originalData.emailAddress = changedFields.newEmail;
-          }
-          if (changedFields.dobChanged) {
-            originalData.dateOfBirth = changedFields.newDob;
-          }
-          if (changedFields.nameChanged) {
-            const form = this.clientGeneralForm;
-            originalData.firstname = form?.get('firstname')?.value ?? originalData.firstname;
-            originalData.middlename = form?.get('middlename')?.value ?? originalData.middlename;
-            originalData.lastname = form?.get('lastname')?.value ?? originalData.lastname;
-            originalData.fullname = form?.get('fullname')?.value ?? originalData.fullname;
-          }
+          this.snackBar.open(
+            'Edit submitted for approval — a different user must review it before it takes effect.',
+            'Close',
+            {
+              duration: 5000
+            }
+          );
+          this.resetContactVerificationState();
 
           this.selectedTabIndex = this.selectedTabIndex + 1;
         },
@@ -430,12 +582,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 +619,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 || '';
-    const newEmail = form?.get('emailAddress')?.value || '';
+    // Trimmed so browser autofill adding invisible leading/trailing whitespace never reads as
+    // 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 oldEmail = originalData.emailAddress || '';
+    const oldMobile = (originalData.mobileNo || '').trim();
+    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 +684,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/clients/shared/client-edit-diff.util.ts

@@ -0,0 +1,149 @@
+/**
+ * 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/.
+ */
+
+/**
+ * Shared between the maker side (edit-client, which captures a point-in-time snapshot of the
+ * client's current values right before staging an edit) and the checker side (pending-client-edits,
+ * which diffs the staged payload against that snapshot). Keeping both in one place means the two
+ * sides can never drift out of sync on which fields are captured/compared/labelled.
+ *
+ * Extracts a payload key's CURRENT value from a client record (as returned by GET /clients/{id}) —
+ * CodeValue fields come back as nested {id, name} objects, so most extractors pull the nested .id
+ * to compare against the payload's raw id.
+ */
+export const PENDING_EDIT_FIELD_EXTRACTORS: Record<string, (c: any) => any> = {
+  officeId: (c) => c.officeId,
+  legalFormId: (c) => c.legalForm?.id,
+  nationalityId: (c) => c.nationality,
+  isStaff: (c) => c.isStaff,
+  active: (c) => c.active,
+  accountNo: (c) => c.accountNo,
+  salutationId: (c) => c.salutation?.id,
+  firstname: (c) => c.firstname,
+  middlename: (c) => c.middlename,
+  lastname: (c) => c.lastname,
+  fullname: (c) => c.fullname,
+  genderId: (c) => c.gender?.id,
+  maritalStatusId: (c) => c.maritalStatus?.id,
+  educationLevelId: (c) => c.educationLevel?.id,
+  degreeQualificationId: (c) => c.degreeQualification?.id,
+  religionId: (c) => c.religion?.id,
+  socialCategoryId: (c) => c.socialCategory?.id,
+  mobileNo: (c) => c.mobileNo,
+  alternateMobileNo: (c) => c.alternateMobileNo,
+  emailAddress: (c) => c.emailAddress,
+  dateOfBirth: (c) => c.dateOfBirth,
+  occupationCategoryId: (c) => c.occupationCategory?.id,
+  occupationId: (c) => c.occupation?.id,
+  monthlyIncome: (c) => c.monthlyIncome,
+  annualIncome: (c) => c.annualIncome,
+  annualTurnover: (c) => c.annualTurnover,
+  monthlyTurnover: (c) => c.monthlyTurnover,
+  isPwd: (c) => c.isPwd,
+  pwdCategoryId: (c) => c.pwdCategory?.id,
+  isSeniorCitizen: (c) => c.isSeniorCitizen,
+  agricultureIncome: (c) => c.agricultureIncome,
+  nonAgricultureIncome: (c) => c.nonAgricultureIncome,
+  savingsProductId: (c) => c.savingsProductId,
+  staffId: (c) => c.staffId,
+  guardianClientId: (c) => c.guardianClientId,
+  guardianRelation: (c) => c.guardianRelation
+};
+
+/** Payload keys that are computed, internal, or otherwise never meaningfully "changed" from a
+ * checker's point of view — always sent by the form (age breakdown, OTP tracking ids, the
+ * business-date default on submittedOnDate) but with no comparable "current" value. */
+export const NON_COMPARABLE_KEYS = new Set([
+  'dateFormat',
+  'locale',
+  'ageYears',
+  'ageMonths',
+  'ageDays',
+  'isMinor',
+  'addSavings',
+  'submittedOnDate',
+  'activationDate',
+  // Flattened onto top-level guardianClientId/guardianRelation right after this in the payload —
+  // that flattened pair already has real comparators above, so the nested group is redundant.
+  'guardianDetails',
+  // Mobile/email DIP verification + name-match + sanctions-screening results — carried along on
+  // every save to re-affirm the client's EXISTING verification state, not something the maker
+  // edited on this pass. dipTimestamp especially would almost never string-match exactly even
+  // when functionally unchanged, so these were never real "proposed changes" to review.
+  'dipVerified',
+  'dipLookupLogId',
+  'dipTimestamp',
+  'alternateDipVerified',
+  'alternateDipLookupLogId',
+  'alternateDipTimestamp',
+  'nameVerified',
+  'screeningLogId',
+  'mobileNewOtpId',
+  'mobileOldOtpId',
+  'emailNewOtpId',
+  'emailOldOtpId'
+]);
+
+export const PENDING_EDIT_FIELD_LABELS: Record<string, string> = {
+  officeId: 'Office',
+  legalFormId: 'Legal Form',
+  nationalityId: 'Nationality',
+  isStaff: 'Is Staff',
+  active: 'Active',
+  accountNo: 'Account Number',
+  salutationId: 'Salutation',
+  firstname: 'First Name',
+  middlename: 'Middle Name',
+  lastname: 'Last Name',
+  fullname: 'Full Name',
+  genderId: 'Gender',
+  maritalStatusId: 'Marital Status',
+  educationLevelId: 'Education Level',
+  degreeQualificationId: 'Degree / Qualification',
+  religionId: 'Religion',
+  socialCategoryId: 'Social Category',
+  mobileNo: 'Mobile Number',
+  alternateMobileNo: 'Alternate Mobile Number',
+  emailAddress: 'Email Address',
+  dateOfBirth: 'Date of Birth',
+  occupationCategoryId: 'Occupation Category',
+  occupationId: 'Occupation',
+  monthlyIncome: 'Monthly Income',
+  annualIncome: 'Annual Income',
+  annualTurnover: 'Yearly Turnover',
+  monthlyTurnover: 'Monthly Turnover',
+  isPwd: 'Person with Disability',
+  pwdCategoryId: 'Disability Type',
+  isSeniorCitizen: 'Senior Citizen',
+  agricultureIncome: 'Agriculture Income',
+  nonAgricultureIncome: 'Non-Agriculture Income',
+  submittedOnDate: 'Submitted On',
+  savingsProductId: 'Linked Savings Product',
+  staffId: 'Staff'
+};
+
+/** Key under which the maker's point-in-time "before" snapshot rides along in the submit payload —
+ * stripped out by the backend before replaying the rest through updateClient(), and stored
+ * separately as original_json for the checker's diff. Never a real Client field name, so it can't
+ * collide with anything ClientDataValidator actually expects. */
+export const ORIGINAL_VALUES_PAYLOAD_KEY = '_originalValues';
+
+/** Builds the maker-side "before" snapshot from the client record loaded when the edit page
+ * opened — flat key names matching the payload's own, so the checker side can diff two plain
+ * objects directly without needing to know Client's nested response shape at all. */
+export function buildOriginalValuesSnapshot(clientData: any): Record<string, any> {
+  const snapshot: Record<string, any> = {};
+  if (!clientData) return snapshot;
+  for (const key of Object.keys(PENDING_EDIT_FIELD_EXTRACTORS)) {
+    const value = PENDING_EDIT_FIELD_EXTRACTORS[key](clientData);
+    if (value !== undefined) {
+      snapshot[key] = value;
+    }
+  }
+  return snapshot;
+}

src/app/clients/shared/document-preview-dialog/document-preview-dialog.component.html

@@ -0,0 +1,24 @@
+<!--
+  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/.
+-->
+
+<h1 mat-dialog-title>{{ data.title || data.fileName || 'Document Preview' }}</h1>
+
+<div mat-dialog-content class="doc-preview-content">
+  @if (isImage) {
+    <img [src]="previewUrl" [alt]="data.fileName || 'Document'" class="doc-preview-image" />
+  } @else if (isPdf) {
+    <iframe [src]="safeUrl" class="doc-preview-pdf" title="Document preview"></iframe>
+  } @else {
+    <p>Preview isn't available for this file type — use Download to view it.</p>
+  }
+</div>
+
+<mat-dialog-actions align="end">
+  <button mat-raised-button (click)="download()">Download</button>
+  <button mat-raised-button mat-dialog-close color="primary">Close</button>
+</mat-dialog-actions>

src/app/clients/shared/document-preview-dialog/document-preview-dialog.component.scss

@@ -0,0 +1,27 @@
+/**
+ * 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/.
+ */
+
+.doc-preview-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 320px;
+  max-width: 80vw;
+}
+
+.doc-preview-image {
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+}
+
+.doc-preview-pdf {
+  width: 70vw;
+  height: 70vh;
+  border: none;
+}

src/app/clients/shared/document-preview-dialog/document-preview-dialog.component.ts

@@ -0,0 +1,81 @@
+/**
+ * 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, OnDestroy, inject } from '@angular/core';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+export interface DocumentPreviewDialogData {
+  blob: Blob;
+  title?: string;
+  fileName?: string;
+}
+
+/**
+ * Generic in-app document preview dialog — shows an image inline or a PDF in an embedded
+ * viewer, with a Download fallback for anything else. Used in place of window.open() for
+ * saved KYC/address/senior-citizen/PWD documents: opening a new browser tab is subject to
+ * popup blockers (fires only after the async download resolves) and, for images, Chrome/Edge
+ * frequently fail to paint a huge base64 data: URL until the tab is manually refreshed.
+ */
+@Component({
+  selector: 'mifosx-document-preview-dialog',
+  templateUrl: './document-preview-dialog.component.html',
+  styleUrls: ['./document-preview-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose
+  ]
+})
+export class DocumentPreviewDialogComponent implements OnDestroy {
+  dialogRef = inject<MatDialogRef<DocumentPreviewDialogComponent>>(MatDialogRef);
+  private sanitizer = inject(DomSanitizer);
+  data = inject<DocumentPreviewDialogData>(MAT_DIALOG_DATA);
+
+  private readonly objectUrl: string;
+  readonly safeUrl: SafeResourceUrl;
+  readonly isImage: boolean;
+  readonly isPdf: boolean;
+
+  constructor() {
+    this.objectUrl = URL.createObjectURL(this.data.blob);
+    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.objectUrl);
+    const type = this.data.blob.type || '';
+    this.isImage = type.startsWith('image/');
+    this.isPdf = type === 'application/pdf';
+  }
+
+  ngOnDestroy(): void {
+    URL.revokeObjectURL(this.objectUrl);
+  }
+
+  get previewUrl(): string {
+    return this.objectUrl;
+  }
+
+  download(): void {
+    const a = document.createElement('a');
+    a.href = this.objectUrl;
+    a.download = this.data.fileName || 'document';
+    a.click();
+  }
+}

src/app/clients/shared/kyc-proof-types.ts

@@ -70,6 +70,20 @@ export const PROOF_META: Record<string, Partial<ProofType>> = {
     documentKeyPlaceholder: 'NPR reference number',
     info: 'NPR letter — upload full document.'
   },
+  BIRTH_CERTIFICATE: {
+    sides: 1,
+    documentKeyLabel: 'Birth certificate registration number',
+    documentKeyPlaceholder: 'Registration / certificate number',
+    category: 'Government-issued ID',
+    info: 'Birth certificate issued by the Municipal Corporation / Registrar of Births & Deaths — accepted proof of identity for minor clients as per RBI KYC norms.'
+  },
+  SCHOOL_ID_CARD: {
+    sides: 1,
+    documentKeyLabel: 'School ID / admission number',
+    documentKeyPlaceholder: 'Student ID number',
+    category: 'Government-issued ID',
+    info: 'School identity card bearing photograph — accepted proof of identity for minor clients as per RBI KYC norms.'
+  },
   UTILITY_BILL: {
     sides: 1,
     category: 'Utility bills',
@@ -131,7 +145,46 @@ export const PROOF_META: Record<string, Partial<ProofType>> = {
   PENSION_PAYMENT_ORDER: {
     sides: 1,
     category: 'Financial & other',
+    requiresDate: true,
     info: 'Pension payment order — upload full document issued by pension authority.'
+  },
+  CERT_INCORPORATION: {
+    sides: 1,
+    category: 'Entity KYC documents',
+    documentKeyLabel: 'Registration / incorporation number',
+    documentKeyPlaceholder: 'CIN / registration number',
+    info: 'Certificate of Incorporation (companies/LLPs) or Registration Certificate (firms/trusts/societies) — as prescribed under the RBI Master Direction on KYC, Annexure I.'
+  },
+  ENTITY_PAN: {
+    sides: 1,
+    category: 'Entity KYC documents',
+    documentKeyLabel: 'PAN of entity',
+    documentKeyPlaceholder: 'e.g. ABCDE1234F',
+    info: 'PAN card issued in the name of the entity.'
+  },
+  CONSTITUTIVE_DOC: {
+    sides: 1,
+    category: 'Entity KYC documents',
+    documentKeyLabel: 'Document reference number',
+    documentKeyPlaceholder: 'Reference / registration number',
+    info: 'Constitutive document — Memorandum & Articles of Association (companies), Partnership Deed (firms), Trust Deed (trusts), or By-laws (societies) — as prescribed under the RBI Master Direction on KYC.'
+  },
+  BOARD_RESOLUTION: {
+    sides: 1,
+    category: 'Entity KYC documents',
+    info: 'Board Resolution / Authorization Letter naming the officers, managers or employees authorised to transact on the entity’s behalf.'
+  },
+  AUTH_SIGNATORY_KYC: {
+    sides: 1,
+    category: 'Entity KYC documents',
+    info: 'OVD-based KYC of the person(s) holding Power of Attorney / authorised to transact on the entity’s behalf.'
+  },
+  GST_CERTIFICATE: {
+    sides: 1,
+    category: 'Entity KYC documents',
+    documentKeyLabel: 'GSTIN',
+    documentKeyPlaceholder: 'e.g. 22AAAAA0000A1Z5',
+    info: 'GST Registration Certificate, where the entity is GST-registered.'
   }
 };
 

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.alertService.alert({
-          type: 'Authentication Success',
-          message: `${credentials.username} successfully logged in!`
-        });
-        delete this.credentials;
+        this.credentials = credentials;
+        this.finalizeLogin();
       }
     }
   }
@@ -396,6 +392,22 @@ export class AuthenticationService {
     return roleNames.some((n) => n === 'clerk');
   }
 
+  /** Returns true when the logged-in user has the "Principal Officer" role (STR conclusion/filing authority). */
+  isPrincipalOfficerUser(): boolean {
+    const creds = this.getCredentials();
+    if (!creds || !creds.roles) return false;
+    const roleNames: string[] = (creds.roles as any[]).map((r) => (r.name || r.role || '').toLowerCase().trim());
+    return roleNames.some((n) => n === 'principal officer');
+  }
+
+  /** Returns true when the logged-in user has the "AML Officer" role (first-level alert review). */
+  isAmlOfficerUser(): boolean {
+    const creds = this.getCredentials();
+    if (!creds || !creds.roles) return false;
+    const roleNames: string[] = (creds.roles as any[]).map((r) => (r.name || r.role || '').toLowerCase().trim());
+    return roleNames.some((n) => n === 'aml officer');
+  }
+
   /**
    * Returns true ONLY for regular cashier role (not Head Cashier).
    * Regular cashier → full-screen transaction entry, no nav.
@@ -420,6 +432,26 @@ export class AuthenticationService {
     return false;
   }
 
+  /** Returns true when the logged-in user has the "Cashier" role. */
+  hasCashierRole(): boolean {
+    const creds = this.getCredentials();
+    if (!creds || !creds.roles) return false;
+    const roleNames: string[] = (creds.roles as any[]).map((r) => (r.name || r.role || '').toLowerCase().trim());
+    return roleNames.some((n) => n === 'cashier');
+  }
+
+  /**
+   * Returns true when the logged-in user belongs to the Head Office.
+   * Fineract seeds Head Office as officeId 1 with hierarchy "."; office name is
+   * checked too since some deployments rename/reseed the root office.
+   */
+  isHeadOfficeUser(): boolean {
+    const creds = this.getCredentials();
+    if (!creds) return false;
+    if (creds.officeId === 1) return true;
+    return (creds.officeName || '').toLowerCase().includes('head office');
+  }
+
   /**
    * Sets the user credentials.
    *
@@ -546,16 +578,60 @@ export class AuthenticationService {
         message: 'Your password has expired, please reset your password!'
       });
     } else {
-      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));
+      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;
+  }
+
+  /** 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()));
+  }
+
   /**
    * Resets the user's password and authenticates the user.
    * @param {any} passwordDetails New password.

src/app/core/branch-scope.service.ts

@@ -0,0 +1,98 @@
+/**
+ * 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 { AuthenticationService } from './authentication/authentication.service';
+import { GL_BRANCHES, GlBranch } from 'app/gl-reports/gl-reports-data';
+
+/**
+ * Resolves what branch data the logged-in user is allowed to see.
+ *
+ * Head Office sees every branch and can drill into any one of them; a branch login is
+ * locked to its own book. Previously this logic was copy-pasted into the Cash/Clearing
+ * Summary and the NPA report with slightly different branch code lists; this service is
+ * the single place it lives so new reports cannot drift.
+ *
+ * The logged-in office is matched to a branch by name, since session credentials carry
+ * only officeId and officeName. Office names are seeded to match the GL branch names
+ * exactly (see Liquibase 0442).
+ */
+@Injectable({ providedIn: 'root' })
+export class BranchScopeService {
+  private auth = inject(AuthenticationService);
+
+  /** Sentinel used when a branch login cannot be matched to a known branch. */
+  static readonly UNRESOLVED = '__unresolved__';
+
+  get isHeadOffice(): boolean {
+    return this.auth.isHeadOfficeUser();
+  }
+
+  /** The office name on the session, for labelling the scope in report headers. */
+  get officeName(): string {
+    return this.auth.getCredentials()?.officeName || 'Branch Office';
+  }
+
+  /**
+   * Branch code the user is confined to, or null for Head Office.
+   *
+   * Deliberately returns the UNRESOLVED sentinel rather than falling back to the first
+   * branch when the office cannot be matched: showing an unrecognised branch someone
+   * else's figures would be worse than showing them nothing.
+   */
+  get ownBranchCode(): string | null {
+    if (this.isHeadOffice) {
+      return null;
+    }
+    const name = this.officeName.toLowerCase().trim();
+    const match = GL_BRANCHES.find((b) => b.code !== 'HO' && name === b.name.toLowerCase());
+    // Fall back to a substring match for offices named e.g. "Andheri (E) Branch".
+    const loose = match ?? GL_BRANCHES.find((b) => b.code !== 'HO' && name.includes(b.name.toLowerCase()));
+    return loose?.code ?? BranchScopeService.UNRESOLVED;
+  }
+
+  /** True when the user may choose which branch to view. */
+  get canSelectBranch(): boolean {
+    return this.isHeadOffice;
+  }
+
+  /** Branches offered in a selector — everything for Head Office, nothing for a branch login. */
+  get selectableBranches(): GlBranch[] {
+    return this.isHeadOffice ? GL_BRANCHES : [];
+  }
+
+  /** Branch code a report should start on. '' means all branches consolidated. */
+  get defaultBranchCode(): string {
+    return this.isHeadOffice ? '' : (this.ownBranchCode ?? '');
+  }
+
+  /**
+   * Forces a requested branch code into what the user is actually allowed to see.
+   * Call this wherever a branch code reaches a data query, so a stale or hand-edited
+   * selection cannot widen the user's scope.
+   */
+  enforce(requested: string): string {
+    return this.isHeadOffice ? requested : (this.ownBranchCode ?? BranchScopeService.UNRESOLVED);
+  }
+
+  /** True when a branch login's office matched no known branch, so it sees no data. */
+  get isUnresolved(): boolean {
+    return this.ownBranchCode === BranchScopeService.UNRESOLVED;
+  }
+
+  /** Human label for the current scope, for report headers. */
+  scopeLabel(selectedCode: string): string {
+    if (!this.isHeadOffice) {
+      return this.officeName;
+    }
+    if (!selectedCode) {
+      return 'All Branches (Consolidated)';
+    }
+    return GL_BRANCHES.find((b) => b.code === selectedCode)?.name ?? selectedCode;
+  }
+}

src/app/core/http/error-handler.interceptor.ts

@@ -21,6 +21,7 @@ import { environment } from '../../../environments/environment';
 import { Logger } from '../logger/logger.service';
 import { AlertService } from '../alert/alert.service';
 import { TranslateService } from '@ngx-translate/core'; // Added import for TranslateService
+import { SILENT_HTTP_ERROR } from './silent-error.token';
 
 /** Initialize Logger */
 const log = new Logger('ErrorHandlerInterceptor');
@@ -54,12 +55,33 @@ export class ErrorHandlerInterceptor implements HttpInterceptor {
     const isClientImageRequest = request.url.includes('/clients/') && request.url.includes('/images');
     const isClientKycRequest = request.url.match(/\/clients\/\d+\/kyc$/);
     const isDirectorRequest = request.url.includes('/election/directors');
-    const isSilentRequest = isClientImageRequest || isClientKycRequest || isDirectorRequest;
+    // "No pending edit for this client" is the normal/expected state — checked on every edit-page
+    // load, not a real error the user needs to see.
+    const isClientPendingEditRequest = request.url.match(/\/clients\/\d+\/edit\/pending$/);
+    // Risk rules are an enhancement on top of a default risk-category fallback — if this
+    // endpoint isn't available on a given backend deployment, the client-general-step
+    // component already falls back to riskRules = [] silently; no toast needed here either.
+    const isKycRiskRulesRequest = request.url.includes('/kyc/risk-rules');
+    const isSilentRequest =
+      isClientImageRequest ||
+      isClientKycRequest ||
+      isDirectorRequest ||
+      isClientPendingEditRequest ||
+      isKycRiskRulesRequest;
 
-    if (!environment.production && !isSilentRequest) {
+    // Explicit per-request opt-out (e.g. per-row enrichment fetches on a list page whose
+    // component already recovers via its own catchError) — silenced for every status, since
+    // the caller took responsibility for handling failure when it set this.
+    const isSilentOverride = request.context.get(SILENT_HTTP_ERROR);
+
+    if (!environment.production && !isSilentRequest && !isSilentOverride) {
       log.error(`Request Error: ${errorMessage}`);
     }
 
+    if (isSilentOverride) {
+      throw response;
+    }
+
     // Silently handle expected 403/404 errors (no image, no KYC record)
     // Throw instead of EMPTY so component-level catchError can handle it
     if (isSilentRequest && (status === 403 || status === 404)) {

src/app/core/http/silent-error.token.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 { HttpContextToken } from '@angular/common/http';
+
+/**
+ * Per-request opt-out of ErrorHandlerInterceptor's toast. Set via
+ * `{ context: new HttpContext().set(SILENT_HTTP_ERROR, true) }` on calls whose caller already
+ * handles failures itself (e.g. per-row enrichment fetches on a list page) — the interceptor
+ * still throws so the caller's own catchError/error callback runs, it just skips the alert.
+ */
+export const SILENT_HTTP_ERROR = new HttpContextToken<boolean>(() => false);

src/app/core/shell/shell.component.html

@@ -350,6 +350,10 @@
           <fa-icon icon="exclamation-triangle" class="ni-ico"></fa-icon>NPA
           <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
         </a>
+        <a class="ni" tabindex="0" [matMenuTriggerFor]="loanOriginationMenu" *mifosxHasPermission="'MENU_ADVANCES'">
+          <fa-icon icon="clipboard-check" class="ni-ico"></fa-icon>Loan Origination
+          <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
+        </a>
         <a class="ni" tabindex="0" [matMenuTriggerFor]="advancesMenu" *mifosxHasPermission="'MENU_ADVANCES'">
           <fa-icon icon="hand-holding-usd" class="ni-ico"></fa-icon>Advances
           <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
@@ -362,6 +366,10 @@
           <fa-icon icon="university" class="ni-ico"></fa-icon>RBI
           <fa-icon [icon]="rbiMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
         </a>
+        <a class="ni" tabindex="0" (click)="investmentMenuOpen = !investmentMenuOpen; rbiMenuOpen = false; glMenuOpen = false" *mifosxHasPermission="'MENU_RBI'">
+          <fa-icon icon="chart-line" class="ni-ico"></fa-icon>Investment
+          <fa-icon [icon]="investmentMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
+        </a>
         <a class="ni" tabindex="0" [matMenuTriggerFor]="digitalMenu" *mifosxHasPermission="'MENU_DIGITAL'">
           <fa-icon icon="mobile-alt" class="ni-ico"></fa-icon>Digital
           <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
@@ -438,6 +446,10 @@
             <fa-icon icon="exclamation-triangle" class="ni-ico"></fa-icon>NPA
             <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
           </a>
+          <a class="ni" tabindex="0" [matMenuTriggerFor]="loanOriginationMenu" *mifosxHasPermission="'MENU_ADVANCES'">
+            <fa-icon icon="clipboard-check" class="ni-ico"></fa-icon>Loan Origination
+            <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
+          </a>
           <a
             class="ni"
             tabindex="0"
@@ -492,6 +504,15 @@
             <fa-icon icon="university" class="ni-ico"></fa-icon>RBI
             <fa-icon [icon]="rbiMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
           </a>
+          <a
+            class="ni"
+            tabindex="0"
+            (click)="investmentMenuOpen = !investmentMenuOpen; rbiMenuOpen = false; glMenuOpen = false"
+            *mifosxHasPermission="'MENU_RBI'"
+          >
+            <fa-icon icon="chart-line" class="ni-ico"></fa-icon>Investment
+            <fa-icon [icon]="investmentMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
+          </a>
           <a class="ni" tabindex="0" [matMenuTriggerFor]="reportsMenu" *mifosxHasPermission="'MENU_REPORTS'">
             <fa-icon icon="chart-bar" class="ni-ico"></fa-icon>Reports
             <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
@@ -566,6 +587,13 @@
       <button mat-menu-item [routerLink]="['/reports', 'Accounting']" tabindex="0">
         <i class="fa fa-calculator menu-item-icon"></i> Accounting
       </button>
+      <mat-divider></mat-divider>
+      <button mat-menu-item routerLink="/reports/form-97-98" tabindex="0">
+        <i class="fa fa-file-invoice menu-item-icon"></i> Form 97/98 Transaction Report
+      </button>
+      <button mat-menu-item routerLink="/reports/risk-review" tabindex="0">
+        <i class="fa fa-user-shield menu-item-icon"></i> Risk Review Report
+      </button>
     </mat-menu>
 
     <!-- Admin Mega Menu — 3-column rectangular panel grouping Setup,
@@ -653,6 +681,7 @@
             <a
               class="gl-link"
               [class.hidden]="!matchesSubLedgerSearch('Cash / Clearing / Transfer')"
+              routerLink="/cashier/cash-clearing-transfer-summary"
               (click)="subLedgerOpen = false"
               ><fa-icon icon="money-bill" class="gl-icon"></fa-icon> Cash / Clearing / Transfer</a
             >
@@ -701,8 +730,11 @@
           </div>
           <div class="gl-group">
             <div class="gl-group-title">Deposits</div>
-            <a class="gl-link" [class.hidden]="!matchesSubLedgerSearch('FD / RD Entry')" (click)="subLedgerOpen = false"
-              ><fa-icon icon="piggy-bank" class="gl-icon"></fa-icon> FD / RD Entry</a
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesSubLedgerSearch('FD / RD Entry')"
+              (click)="subLedgerOpen = false; openFdRdEntryDialog()"
+              ><fa-icon icon="piggy-bank" class="gl-icon" style="color: #0f766e"></fa-icon> FD / RD Entry</a
             >
             <a class="gl-link" [class.hidden]="!matchesSubLedgerSearch('DDS Entry')" (click)="subLedgerOpen = false"
               ><fa-icon icon="coins" class="gl-icon"></fa-icon> DDS Entry</a
@@ -808,50 +840,72 @@
         <div class="gl-columns">
           <div class="gl-group">
             <div class="gl-group-title">Financial Statements</div>
-            <a class="gl-link" [class.hidden]="!matchesGlSearch('Trial Balance')" (click)="glMenuOpen = false"
-              ><fa-icon icon="balance-scale" class="gl-icon"></fa-icon> Trial Balance</a
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesGlSearch('Trial Balance')"
+              routerLink="/gl/reports/trial-balance"
+              (click)="glMenuOpen = false"
+              ><fa-icon icon="balance-scale" class="gl-icon" style="color: #b45309"></fa-icon> Trial Balance</a
             >
             <a
               class="gl-link"
               [class.hidden]="!matchesGlSearch('Profit and Loss')"
-              (click)="glMenuOpen = false; openAccountingReportsDialog('PNL')"
+              routerLink="/gl/reports/profit-and-loss"
+              (click)="glMenuOpen = false"
               ><fa-icon icon="chart-line" class="gl-icon" style="color: #b45309"></fa-icon> Profit and Loss</a
             >
             <a
               class="gl-link"
               [class.hidden]="!matchesGlSearch('Consolidate Balance Sheet')"
-              (click)="glMenuOpen = false; openAccountingReportsDialog('BALANCE-SHEET')"
-              ><fa-icon icon="file-alt" class="gl-icon" style="color: #b45309"></fa-icon> Consolidate Balance Sheet</a
+              routerLink="/gl/reports/balance-sheet"
+              (click)="glMenuOpen = false"
+              ><fa-icon icon="file-alt" class="gl-icon" style="color: #b45309"></fa-icon> Consolidated Balance Sheet</a
             >
             <a
               class="gl-link"
               [class.hidden]="!matchesGlSearch('Comparative Balance Sheet')"
-              (click)="glMenuOpen = false; openAccountingReportsDialog('COMPARATIVE-BS')"
+              routerLink="/gl/reports/comparative-balance-sheet"
+              (click)="glMenuOpen = false"
               ><fa-icon icon="balance-scale" class="gl-icon" style="color: #b45309"></fa-icon> Comparative Balance
               Sheet</a
             >
           </div>
           <div class="gl-group">
             <div class="gl-group-title">GL Reports</div>
-            <a class="gl-link" [class.hidden]="!matchesGlSearch('GL Average Balance')" (click)="glMenuOpen = false"
-              ><fa-icon icon="calculator" class="gl-icon"></fa-icon> GL Average Balance</a
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesGlSearch('GL Average Balance')"
+              routerLink="/gl/reports/gl-average-balance"
+              (click)="glMenuOpen = false"
+              ><fa-icon icon="calculator" class="gl-icon" style="color: #b45309"></fa-icon> GL Average Balance</a
             >
-            <a class="gl-link" [class.hidden]="!matchesGlSearch('GL Mapping for Report')" (click)="glMenuOpen = false"
-              ><fa-icon icon="project-diagram" class="gl-icon"></fa-icon> GL Mapping for Report</a
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesGlSearch('GL Mapping for Report')"
+              routerLink="/gl/reports/gl-mapping"
+              (click)="glMenuOpen = false"
+              ><fa-icon icon="project-diagram" class="gl-icon" style="color: #b45309"></fa-icon> GL Mapping for
+              Report</a
             >
             <a
               class="gl-link"
               [class.hidden]="!matchesGlSearch('Account wise Balance List')"
+              routerLink="/gl/reports/account-wise-balance"
               (click)="glMenuOpen = false"
-              ><fa-icon icon="list" class="gl-icon"></fa-icon> Account wise Balance List</a
+              ><fa-icon icon="list" class="gl-icon" style="color: #b45309"></fa-icon> Account wise Balance List</a
             >
-            <a class="gl-link" [class.hidden]="!matchesGlSearch('Distribution of Balance')" (click)="glMenuOpen = false"
-              ><fa-icon icon="chart-pie" class="gl-icon"></fa-icon> Distribution of Balance</a
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesGlSearch('Distribution of Balance')"
+              routerLink="/gl/reports/distribution-of-balance"
+              (click)="glMenuOpen = false"
+              ><fa-icon icon="chart-pie" class="gl-icon" style="color: #b45309"></fa-icon> Distribution of Balance</a
             >
             <a
               class="gl-link"
               [class.hidden]="!matchesGlSearch('GL Wise DR CR')"
-              (click)="glMenuOpen = false; openAccountingReportsDialog('GL-DR-CR')"
+              routerLink="/gl/reports/gl-wise-dr-cr"
+              (click)="glMenuOpen = false"
               ><fa-icon icon="project-diagram" class="gl-icon" style="color: #b45309"></fa-icon> GL Wise DR / CR
               Report</a
             >
@@ -861,28 +915,47 @@
             <a
               class="gl-link"
               [class.hidden]="!matchesGlSearch('Client wise Balance Report')"
+              routerLink="/gl/reports/client-wise-balance"
               (click)="glMenuOpen = false"
-              ><fa-icon icon="users" class="gl-icon"></fa-icon> Client wise Balance Report</a
+              ><fa-icon icon="users" class="gl-icon" style="color: #b45309"></fa-icon> Client wise Balance Report</a
             >
-            <a class="gl-link" [class.hidden]="!matchesGlSearch('Contingent Expense')" (click)="glMenuOpen = false"
-              ><fa-icon icon="exclamation-circle" class="gl-icon"></fa-icon> Contingent Expense</a
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesGlSearch('Contingent Liabilities')"
+              routerLink="/gl/reports/contingent-liabilities"
+              (click)="glMenuOpen = false"
+              ><fa-icon icon="exclamation-circle" class="gl-icon" style="color: #b45309"></fa-icon> Contingent
+              Liabilities</a
             >
-            <a class="gl-link" [class.hidden]="!matchesGlSearch('Banker Head Report')" (click)="glMenuOpen = false"
-              ><fa-icon icon="university" class="gl-icon"></fa-icon> Banker Head Report</a
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesGlSearch('Banker Head Report')"
+              routerLink="/gl/reports/banker-head"
+              (click)="glMenuOpen = false"
+              ><fa-icon icon="university" class="gl-icon" style="color: #b45309"></fa-icon> Banker Head Report</a
             >
           </div>
           <div class="gl-group">
             <div class="gl-group-title">Registers</div>
-            <a class="gl-link" [class.hidden]="!matchesGlSearch('Sundry Register')" (click)="glMenuOpen = false"
-              ><fa-icon icon="clipboard-list" class="gl-icon"></fa-icon> Sundry Register</a
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesGlSearch('Sundry Register')"
+              routerLink="/gl/reports/sundry-register"
+              (click)="glMenuOpen = false"
+              ><fa-icon icon="clipboard-list" class="gl-icon" style="color: #b45309"></fa-icon> Sundry Register</a
             >
-            <a class="gl-link" [class.hidden]="!matchesGlSearch('Voucher Register')" (click)="glMenuOpen = false"
-              ><fa-icon icon="receipt" class="gl-icon"></fa-icon> Voucher Register</a
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesGlSearch('Voucher Register')"
+              routerLink="/gl/reports/voucher-register"
+              (click)="glMenuOpen = false"
+              ><fa-icon icon="receipt" class="gl-icon" style="color: #b45309"></fa-icon> Voucher Register</a
             >
             <a
               class="gl-link"
               [class.hidden]="!matchesGlSearch('Misc Expense Ledger')"
-              (click)="glMenuOpen = false; openAccountingReportsDialog('MISC-EXP')"
+              routerLink="/gl/reports/misc-expense-ledger"
+              (click)="glMenuOpen = false"
               ><fa-icon icon="receipt" class="gl-icon" style="color: #b45309"></fa-icon> Misc Expense Ledger</a
             >
           </div>
@@ -991,14 +1064,35 @@
     </mat-menu>
 
     <mat-menu #clearingMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
-      <button mat-menu-item tabindex="0">
-        <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Cheque Honoured
+      <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/inward']">
+        <fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward Clearing (CTS)
       </button>
-      <button mat-menu-item tabindex="0">
-        <fa-icon icon="ban" class="menu-item-icon"></fa-icon> Cheque Book Stopped
+      <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/outward']">
+        <fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward Clearing (CTS)
+      </button>
+      <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/positive-pay']">
+        <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Positive Pay (PPS)
+      </button>
+      <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/settlement']">
+        <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Settlement
+      </button>
+      <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/reconciliation']">
+        <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Reconciliation
+      </button>
+      <button mat-menu-item tabindex="0" [routerLink]="['/nachclearing']">
+        <fa-icon icon="money-check" class="menu-item-icon"></fa-icon> NACH Clearing
       </button>
       <button mat-menu-item tabindex="0"><fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward</button>
       <button mat-menu-item tabindex="0"><fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward</button>
+      <button mat-menu-item [routerLink]="['/sponsor-dd/inventory']" tabindex="0">
+        <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Sponsor DD Inventory
+      </button>
+      <button mat-menu-item [routerLink]="['/sponsor-dd/issue-approvals']" tabindex="0">
+        <fa-icon icon="check-double" class="menu-item-icon"></fa-icon> DD Issuance Approvals
+      </button>
+      <button mat-menu-item [routerLink]="['/sponsor-dd/reprint-approvals']" tabindex="0">
+        <fa-icon icon="print" class="menu-item-icon"></fa-icon> DD Reprint Approvals
+      </button>
     </mat-menu>
 
     <mat-menu #hrmMenu="matMenu" class="hrm-mega-panel" [overlapTrigger]="false">
@@ -1100,7 +1194,7 @@
           <button mat-menu-item tabindex="0">
             <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Share Issued
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/share-holders']">
             <fa-icon icon="users" class="menu-item-icon"></fa-icon> Share Holder
           </button>
           <button mat-menu-item tabindex="0">
@@ -1134,7 +1228,7 @@
             <fa-icon icon="user-slash" class="menu-item-icon" style="color: #c2410c"></fa-icon> Non-Customer Entry
           </button>
           <button mat-menu-item tabindex="0"><fa-icon icon="lock" class="menu-item-icon"></fa-icon> Locker</button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item routerLink="/investment/bonds" tabindex="0">
             <fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> SLR and Non SLR Investment Report
           </button>
           <button mat-menu-item tabindex="0" (click)="openCicReportingDialog()">
@@ -1146,21 +1240,17 @@
           <button mat-menu-item tabindex="0">
             <fa-icon icon="chart-bar" class="menu-item-icon"></fa-icon> Depreciation Register
           </button>
-          <button mat-menu-item routerLink="/fiu" tabindex="0">
-            <fa-icon icon="shield-alt" class="menu-item-icon" style="color: #dc2626"></fa-icon> Financial Intelligence
-            Unit (FIU-IND)
-          </button>
         </div>
         <!-- Investment -->
         <div class="deposit-menu-group">
           <div class="deposit-group-title">Investment</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item routerLink="/investment/dashboard" tabindex="0">
             <fa-icon icon="calendar-alt" class="menu-item-icon"></fa-icon> Due Date Diary for All Investment
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item routerLink="/investment/reports" tabindex="0">
             <fa-icon icon="dollar-sign" class="menu-item-icon"></fa-icon> Total Int Received &amp; Receivable Report
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item routerLink="/investment/reports" tabindex="0">
             <fa-icon icon="piggy-bank" class="menu-item-icon"></fa-icon> Bucket Wise Investment
           </button>
           <button mat-menu-item routerLink="/deaf" tabindex="0">
@@ -1191,39 +1281,96 @@
         <!-- NPA Reports -->
         <div class="deposit-menu-group">
           <div class="deposit-group-title">NPA Reports</div>
-          <button mat-menu-item tabindex="0">
-            <fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> NPA Interest
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/interest">
+            <fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> NPA Report
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/status">
             <fa-icon icon="file-alt" class="menu-item-icon"></fa-icon> NPA Status Report
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/recovery">
             <fa-icon icon="undo" class="menu-item-icon"></fa-icon> NPA Recovery Report
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/summary">
             <fa-icon icon="clipboard-list" class="menu-item-icon"></fa-icon> NPA Summary Report
           </button>
         </div>
         <!-- NPA Analysis -->
         <div class="deposit-menu-group">
           <div class="deposit-group-title">NPA Analysis</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/account-detail">
             <fa-icon icon="list-alt" class="menu-item-icon"></fa-icon> NPA Account Detail Report
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/movement">
             <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> NPA Movement Report
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/provision">
             <fa-icon icon="hand-holding-usd" class="menu-item-icon"></fa-icon> NPA with Provision and Required Provision
           </button>
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/undebited-interest">
+            <fa-icon icon="coins" class="menu-item-icon"></fa-icon> Undebited Interest Recovery Report
+          </button>
         </div>
         <!-- NPA Classification -->
         <div class="deposit-menu-group">
           <div class="deposit-group-title">NPA Classification</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/probable">
             <fa-icon icon="exclamation-circle" class="menu-item-icon"></fa-icon> Probable NPA
           </button>
-          <button mat-menu-item tabindex="0"><fa-icon icon="flag" class="menu-item-icon"></fa-icon> SMA Report</button>
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/sma">
+            <fa-icon icon="flag" class="menu-item-icon"></fa-icon> SMA Report
+          </button>
+        </div>
+        <!-- Recovery Management -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Recovery Management</div>
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/recovery-dashboard">
+            <fa-icon icon="tachometer-alt" class="menu-item-icon"></fa-icon> Recovery Management Dashboard
+          </button>
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/daywise-overdue">
+            <fa-icon icon="calendar-alt" class="menu-item-icon"></fa-icon> Day-wise Overdue Report
+          </button>
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/daywise-overdrawn">
+            <fa-icon icon="credit-card" class="menu-item-icon"></fa-icon> Day-wise Overdrawn Report
+          </button>
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/agri-gold-value">
+            <fa-icon icon="crop" class="menu-item-icon"></fa-icon> Agriculture / Gold Market Value Report
+          </button>
+          <button mat-menu-item tabindex="0" routerLink="/npa/reports/exception-check">
+            <fa-icon icon="balance-scale" class="menu-item-icon"></fa-icon> Exception Check — Security Value vs Loan
+          </button>
+        </div>
+      </div>
+    </mat-menu>
+
+    <mat-menu #loanOriginationMenu="matMenu" class="npa-mega-panel" [overlapTrigger]="false">
+      <div class="deposit-menu-grid npa-grid" (click)="$event.stopPropagation()">
+        <!-- Loan Origination -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Loan Origination</div>
+          <button mat-menu-item tabindex="0" routerLink="/loan-origination/pipeline">
+            <fa-icon icon="stream" class="menu-item-icon"></fa-icon> Application Pipeline
+          </button>
+        </div>
+        <!-- Reports -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Reports</div>
+          <button
+            mat-menu-item
+            tabindex="0"
+            routerLink="/loan-origination/pipeline"
+            [queryParams]="{ view: 'channel' }"
+          >
+            <fa-icon icon="chart-pie" class="menu-item-icon"></fa-icon> Channel-wise Report
+          </button>
+          <button mat-menu-item tabindex="0" routerLink="/loan-origination/pipeline" [queryParams]="{ view: 'bc' }">
+            <fa-icon icon="mobile-alt" class="menu-item-icon"></fa-icon> BC-wise Report
+          </button>
+          <button mat-menu-item tabindex="0" routerLink="/loan-origination/pipeline" [queryParams]="{ view: 'share' }">
+            <fa-icon icon="coins" class="menu-item-icon"></fa-icon> Share Member Report
+          </button>
+          <button mat-menu-item tabindex="0" routerLink="/loan-origination/pipeline" [queryParams]="{ view: 'target' }">
+            <fa-icon icon="chart-column" class="menu-item-icon"></fa-icon> Target vs Actual
+          </button>
         </div>
       </div>
     </mat-menu>
@@ -1256,27 +1403,27 @@
         <!-- Core / Books -->
         <div class="deposit-menu-group">
           <div class="deposit-group-title">Core &amp; Books</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/voucher">
             <fa-icon icon="receipt" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             Voucher Reconciliation
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/sundry-dr-cr">
             <fa-icon icon="random" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             Sundry Dr / Cr Reconciliation
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/pnl-impact">
             <fa-icon icon="chart-line" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             P&amp;L Impact Reconciliation
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/gl-reconciliation">
             <fa-icon icon="book-open" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             GL Reconciliation
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/fixed-assets">
             <fa-icon icon="cube" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             Fixed Assets Reconciliation
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/inter-company">
             <fa-icon icon="sitemap" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             Inter-Company Reconciliation
           </button>
@@ -1285,19 +1432,19 @@
         <!-- Bank & Clearing -->
         <div class="deposit-menu-group">
           <div class="deposit-group-title">Bank &amp; Clearing</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/bank-reco">
             <fa-icon icon="university" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             Bank Reconciliation
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/api-bank-reco">
             <fa-icon icon="code-branch" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             API Based Bank Reconciliation
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/neft-rtgs">
             <fa-icon icon="exchange" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             NEFT / RTGS Reconciliation
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/clearing-reco">
             <fa-icon icon="hand-holding-usd" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             Clearing Reconciliation
           </button>
@@ -1306,15 +1453,15 @@
         <!-- Digital / Payments -->
         <div class="deposit-menu-group">
           <div class="deposit-group-title">Digital &amp; Payments</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/udir">
             <fa-icon icon="mobile-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             UDIR (IMPS / UPI / ATM)
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/three-way-digital">
             <fa-icon icon="project-diagram" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             Three-way Digital Reconciliation
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/nach-reco">
             <fa-icon icon="sync-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             NACH Reconciliation
           </button>
@@ -1323,11 +1470,11 @@
         <!-- Instruments & Members -->
         <div class="deposit-menu-group">
           <div class="deposit-group-title">Instruments &amp; Members</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item [routerLink]="['/sponsor-dd-reconciliation']" tabindex="0">
             <fa-icon icon="money-check-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             DD / Pay Order Reconciliation
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/share-member">
             <fa-icon icon="coins" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             Share Member Reconciliation
           </button>
@@ -1336,11 +1483,11 @@
         <!-- Compliance & Financials -->
         <div class="deposit-menu-group">
           <div class="deposit-group-title">Compliance &amp; Financials</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/invoice-payment">
             <fa-icon icon="file-invoice" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             Invoice Payment
           </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" routerLink="/reconciliation/tax-reco">
             <fa-icon icon="percentage" class="menu-item-icon" style="color: #0d9488"></fa-icon>
             Tax Reconciliation
           </button>
@@ -1447,13 +1594,16 @@
             Balance Certificate
           </button>
           <button mat-menu-item routerLink="/letter-mgmt/form-60" tabindex="0">
-            <fa-icon icon="file-signature" class="menu-item-icon" style="color: #15803d"></fa-icon> Form 60
+            <fa-icon icon="file-signature" class="menu-item-icon" style="color: #15803d"></fa-icon> Form 97
           </button>
           <button mat-menu-item tabindex="0">
-            <fa-icon icon="file-signature" class="menu-item-icon" style="color: #15803d"></fa-icon> Form 61
+            <fa-icon icon="file-signature" class="menu-item-icon" style="color: #15803d"></fa-icon> Form 98
+          </button>
+          <button mat-menu-item routerLink="/reports/form-97-98" tabindex="0">
+            <fa-icon icon="file-invoice" class="menu-item-icon" style="color: #15803d"></fa-icon> Form 97/98 Txn Report
           </button>
           <button mat-menu-item routerLink="/letter-mgmt/form-15gh" tabindex="0">
-            <fa-icon icon="file-signature" class="menu-item-icon" style="color: #15803d"></fa-icon> Form 15G and H
+            <fa-icon icon="file-signature" class="menu-item-icon" style="color: #15803d"></fa-icon> Form 121
           </button>
           <button mat-menu-item routerLink="/letter-mgmt/hypothecation-certificate" tabindex="0">
             <fa-icon icon="file-alt" class="menu-item-icon" style="color: #15803d"></fa-icon>
@@ -1547,8 +1697,13 @@
             <a class="gl-link" [class.hidden]="!matchesRbiSearch('Balance Sheet')" (click)="rbiMenuOpen = false">
               <fa-icon icon="file-alt" class="gl-icon"></fa-icon> Balance Sheet (BR Act & Others)
             </a>
-            <a class="gl-link" [class.hidden]="!matchesRbiSearch('CRR / SLR')" (click)="rbiMenuOpen = false">
-              <fa-icon icon="calculator" class="gl-icon"></fa-icon> CRR / SLR
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesRbiSearch('CTR / STR')"
+              routerLink="/fiu"
+              (click)="rbiMenuOpen = false"
+            >
+              <fa-icon icon="calculator" class="gl-icon"></fa-icon> CTR / STR
             </a>
             <a class="gl-link" [class.hidden]="!matchesRbiSearch('Annexure')" (click)="rbiMenuOpen = false">
               <fa-icon icon="paperclip" class="gl-icon"></fa-icon> Annexure
@@ -1643,31 +1798,49 @@
             >
               <fa-icon icon="bell" class="gl-icon"></fa-icon> Daily Position Notice
             </a>
-            <a class="gl-link" [class.hidden]="!matchesRbiSearch('R/SLR')" (click)="rbiMenuOpen = false">
-              <fa-icon icon="lock" class="gl-icon"></fa-icon> R/SLR
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesRbiSearch('AML')"
+              routerLink="/rbi/aml"
+              (click)="rbiMenuOpen = false"
+            >
+              <fa-icon icon="shield-alt" class="gl-icon"></fa-icon> AML
+            </a>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesRbiSearch('Risk Review Report')"
+              routerLink="/reports/risk-review"
+              (click)="rbiMenuOpen = false"
+            >
+              <fa-icon icon="user-shield" class="gl-icon"></fa-icon> Risk Review Report
             </a>
           </div>
           <!-- OSS Reports -->
           <div class="gl-group">
             <div class="gl-group-title">OSS Reports</div>
-            <a class="gl-link" [class.hidden]="!matchesRbiSearch('OSS 1 XBRL/CIMS')" (click)="rbiMenuOpen = false">
-              <fa-icon icon="file-alt" class="gl-icon"></fa-icon> OSS 1 XBRL/CIMS
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesRbiSearch('OSS 1 XBRL/CIMS')"
+              routerLink="/rbi/oss1"
+              (click)="rbiMenuOpen = false"
+            >
+              <fa-icon icon="file-alt" class="gl-icon" style="color: #0891b2"></fa-icon> OSS 1 XBRL/CIMS
             </a>
             <a
               class="gl-link"
               [class.hidden]="!matchesRbiSearch('OSS 2 XBRL')"
-              (click)="rbiMenuOpen = false; openCimsXbrlDialog('OSS-2')"
+              routerLink="/rbi/oss2"
+              (click)="rbiMenuOpen = false"
             >
               <fa-icon icon="file-alt" class="gl-icon" style="color: #0891b2"></fa-icon> OSS 2 XBRL
             </a>
-            <a class="gl-link" [class.hidden]="!matchesRbiSearch('OSS 3 XBRL/CIMS')" (click)="rbiMenuOpen = false">
-              <fa-icon icon="file-alt" class="gl-icon"></fa-icon> OSS 3 XBRL/CIMS
-            </a>
-            <a class="gl-link" [class.hidden]="!matchesRbiSearch('OSS 4/OSS 5/OSS 6')" (click)="rbiMenuOpen = false">
-              <fa-icon icon="file-alt" class="gl-icon"></fa-icon> OSS 4 / OSS 5 / OSS 6
-            </a>
-            <a class="gl-link" [class.hidden]="!matchesRbiSearch('OSS 7')" (click)="rbiMenuOpen = false">
-              <fa-icon icon="file-alt" class="gl-icon"></fa-icon> OSS 7
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesRbiSearch('OSS 3 XBRL/CIMS')"
+              routerLink="/rbi/oss3"
+              (click)="rbiMenuOpen = false"
+            >
+              <fa-icon icon="file-alt" class="gl-icon" style="color: #0891b2"></fa-icon> OSS 3 XBRL/CIMS
             </a>
           </div>
           <!-- CIMS / XBRL Returns -->
@@ -1798,6 +1971,161 @@
       </div>
     }
 
+    <!-- Investment (Treasury) Mega Menu -->
+    @if (investmentMenuOpen) {
+      <div class="gl-backdrop" (click)="investmentMenuOpen = false"></div>
+      <div class="gl-mega-menu rbi-mega-menu">
+        <div class="gl-mega-menu-header">
+          <fa-icon icon="chart-line" class="gl-mega-menu-header-icon"></fa-icon>
+          <span>Investment</span>
+        </div>
+        <input
+          type="text"
+          class="gl-search"
+          placeholder="Search Investment..."
+          (input)="investmentSearch = $any($event.target).value"
+        />
+        <div class="rbi-columns">
+          <!-- Dashboard -->
+          <div class="gl-group">
+            <div class="gl-group-title">Dashboard</div>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('Investment Dashboard')"
+              routerLink="/investment/dashboard"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="chart-pie" class="gl-icon"></fa-icon> Portfolio Dashboard
+            </a>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('Due Date Diary for All Investment')"
+              routerLink="/investment/dashboard"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="calendar-check" class="gl-icon"></fa-icon> Due Date Diary for All Investment
+            </a>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('Bucket Wise Investment')"
+              routerLink="/investment/reports"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="layer-group" class="gl-icon"></fa-icon> Bucket Wise Investment
+            </a>
+          </div>
+          <!-- Entry -->
+          <div class="gl-group">
+            <div class="gl-group-title">Entry</div>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('FD Investment')"
+              routerLink="/investment/fd"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="piggy-bank" class="gl-icon"></fa-icon> FD Investment
+            </a>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('Govt Security / Non-SLR / Bond / Mutual Fund')"
+              routerLink="/investment/bonds"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="university" class="gl-icon"></fa-icon> Govt Security / Non-SLR / Bond / Mutual Fund
+            </a>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('SLR and Non SLR Investment Report')"
+              routerLink="/investment/bonds"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="balance-scale" class="gl-icon"></fa-icon> SLR and Non SLR Investment Report
+            </a>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('Share Entry')"
+              routerLink="/investment/share"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="chart-line" class="gl-icon"></fa-icon> Share Entry
+            </a>
+          </div>
+          <!-- Masters -->
+          <div class="gl-group">
+            <div class="gl-group-title">Masters</div>
+            <a
+              class="gl-link"
+              [class.hidden]="
+                !matchesInvestmentSearch(
+                  'Bank Party Script Broker SubType Control Parameter Daily Script LIEN Reason Mutual Fund Product SGL Bank Script Market Detail Masters'
+                )
+              "
+              routerLink="/investment/masters"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="cogs" class="gl-icon"></fa-icon> Bank/Party, Script, Broker &amp; Other Masters
+            </a>
+          </div>
+          <!-- Interest -->
+          <div class="gl-group">
+            <div class="gl-group-title">Interest</div>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('FD Interest Calculation')"
+              routerLink="/investment/interest"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="calculator" class="gl-icon"></fa-icon> FD Interest Calculation
+            </a>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('Govt Bond Interest Calculation')"
+              routerLink="/investment/interest"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="calculator" class="gl-icon"></fa-icon> Govt./Bond Int. Calculation
+            </a>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('Government Bond Int Register FD Interest Register FD Register')"
+              routerLink="/investment/interest"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="list-alt" class="gl-icon"></fa-icon> Bond Int / FD Int / FD Registers
+            </a>
+          </div>
+          <!-- Reports -->
+          <div class="gl-group">
+            <div class="gl-group-title">Reports</div>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('Balance Ledger Maturity Investment Reports')"
+              routerLink="/investment/reports"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="file-invoice" class="gl-icon"></fa-icon> Balance / Ledger / Maturity Reports
+            </a>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('Total Int Received & Receivable Report')"
+              routerLink="/investment/reports"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="hand-holding-usd" class="gl-icon"></fa-icon> Total Int Received &amp; Receivable Report
+            </a>
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesInvestmentSearch('Investment Portfolio')"
+              routerLink="/investment/reports"
+              (click)="investmentMenuOpen = false"
+            >
+              <fa-icon icon="briefcase" class="gl-icon"></fa-icon> Investment Portfolio
+            </a>
+          </div>
+        </div>
+      </div>
+    }
+
     <!-- Progress Bar -->
     @if (progressBarMode !== 'none') {
       <div>

src/app/core/shell/shell.component.scss

@@ -677,6 +677,26 @@ $gray-700: #334155;
   opacity: 0.7;
 }
 
+// Marks a `mat-menu-item` as actually wired to a working screen/dialog (vs a still-unwired
+// placeholder) — same "green dot" convention as .gl-link--live, positioned absolutely since
+// mat-menu-item's internal layout isn't a plain flex row we control directly.
+[mat-menu-item].menu-item-live {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #16a34a;
+    box-shadow: 0 0 0 2px rgb(22 163 74 / 15%);
+  }
+}
+
 // ===== Nav Dropdown Menus =====
 ::ng-deep .nav-dropdown {
   border-radius: 8px !important;
@@ -729,6 +749,13 @@ $gray-700: #334155;
   }
 }
 
+/* NPA Mega Panel — 4 columns (Reports / Analysis / Classification / Recovery Management) */
+.npa-grid {
+  grid-template-columns: repeat(4, minmax(200px, 1fr));
+  min-width: 880px;
+  max-width: 96vw;
+}
+
 /* Reconciliation Mega Panel — 5 columns, teal accent to match the icon palette */
 .reconciliation-grid {
   grid-template-columns: repeat(5, minmax(190px, 1fr));
@@ -856,6 +883,20 @@ $gray-700: #334155;
   }
 }
 
+// Marks a menu link as actually wired to a working screen/dialog (vs a still-unwired
+// placeholder) — a small green dot at the end of the row, so a reviewer can tell at a glance
+// which items in a mega-menu are functional without having to click every one of them.
+.gl-link--live::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  margin-left: auto;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: #16a34a;
+  box-shadow: 0 0 0 2px rgb(22 163 74 / 15%);
+}
+
 /* RBI Mega Menu */
 .rbi-mega-menu {
   width: 1100px;

src/app/core/shell/shell.component.ts

@@ -98,6 +98,10 @@ export class ShellComponent implements OnInit, OnDestroy {
   rbiMenuOpen = false;
   rbiSearch = '';
 
+  /** Investment (Treasury) mega menu state */
+  investmentMenuOpen = false;
+  investmentSearch = '';
+
   /* Live KPI ticker — markup is static inside the template; the marquee
      animation, LIVE badge, and pause-on-hover handle the live feel. */
 
@@ -116,6 +120,11 @@ export class ShellComponent implements OnInit, OnDestroy {
     return label.toLowerCase().includes(this.rbiSearch.toLowerCase());
   }
 
+  matchesInvestmentSearch(label: string): boolean {
+    if (!this.investmentSearch) return true;
+    return label.toLowerCase().includes(this.investmentSearch.toLowerCase());
+  }
+
   /** Route for a facility entry in the Account Facilities hover dropdown — only "Cheque Book" has a
    *  dedicated action page today; every other facility falls back to the existing overview page. */
   facilityRoute(label: string): string[] {
@@ -242,7 +251,7 @@ export class ShellComponent implements OnInit, OnDestroy {
    * GL Wise DR/CR / Misc Expense Ledger). Initial report selected via menu link.
    */
   async openAccountingReportsDialog(
-    initialReport: 'PNL' | 'BALANCE-SHEET' | 'COMPARATIVE-BS' | 'GL-DR-CR' | 'MISC-EXP' = 'PNL'
+    initialReport: 'PNL' | 'BALANCE-SHEET' | 'COMPARATIVE-BS' | 'CONTINGENT-LIAB' | 'GL-DR-CR' | 'MISC-EXP' = 'PNL'
   ): Promise<void> {
     const { AccountingReportsDialogComponent } =
       await import('../../home/dashboard/accounting-reports-dialog/accounting-reports-dialog.component');
@@ -285,7 +294,9 @@ export class ShellComponent implements OnInit, OnDestroy {
    * is selected based on the menu link the user clicked; user can switch between
    * forms via the form-pill selector inside the dialog.
    */
-  async openCimsXbrlDialog(initialForm: 'OSS-2' | 'PSA' | 'RAL' | 'RCP-UCB' = 'OSS-2'): Promise<void> {
+  async openCimsXbrlDialog(
+    initialForm: 'OSS-2' | 'PSA' | 'RAL' | 'RCP-UCB' | 'OSS-4' | 'OSS-5' | 'OSS-6' | 'OSS-7' = 'OSS-2'
+  ): Promise<void> {
     const { CimsXbrlDialogComponent } =
       await import('../../home/dashboard/cims-xbrl-dialog/cims-xbrl-dialog.component');
     this.dialog.open(CimsXbrlDialogComponent, {
@@ -301,6 +312,26 @@ export class ShellComponent implements OnInit, OnDestroy {
     });
   }
 
+  /** Opens the FD / RD Entry dialog under Sub Ledger → Deposits. */
+  async openFdRdEntryDialog(): Promise<void> {
+    const { FdRdEntryDialogComponent } =
+      await import('../../home/dashboard/fd-rd-entry-dialog/fd-rd-entry-dialog.component');
+    this.dialog.open(FdRdEntryDialogComponent, {
+      width: '100vw',
+      height: '100vh',
+      maxWidth: '100vw',
+      maxHeight: '100vh',
+      panelClass: [
+        'crr-slr-dialog-panel',
+        'fdrd-fullscreen-panel'
+      ],
+      autoFocus: false,
+      disableClose: false,
+      hasBackdrop: true,
+      backdropClass: 'fdrd-dlg-backdrop'
+    });
+  }
+
   /**
    * Opens the Asset Liability Management dialog (Form ALM-1).
    * Covers maturity ladder, monthly snapshot, and structural liquidity returns.

src/app/core/shell/sidenav/sidenav.component.html

@@ -247,6 +247,32 @@
           </mat-icon>
           <a matLine>{{ 'labels.menus.Cheque Book Inventory' | translate }}</a>
         </mat-list-item>
+        <mat-list-item
+          [routerLink]="['/ctsclearing']"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.CTS Clearing' | translate }}"
+          routerLinkActive="active-menu"
+          [routerLinkActiveOptions]="{ exact: false }"
+          *mifosxHasPermission="'MENU_CLEARING'"
+        >
+          <mat-icon matListIcon>
+            <fa-icon icon="exchange" size="sm"></fa-icon>
+          </mat-icon>
+          <a matLine>{{ 'labels.menus.CTS Clearing' | translate }}</a>
+        </mat-list-item>
+        <mat-list-item
+          [routerLink]="['/nachclearing']"
+          [matTooltipPosition]="tooltipPosition"
+          matTooltip="{{ 'tooltips.NACH Clearing' | translate }}"
+          routerLinkActive="active-menu"
+          [routerLinkActiveOptions]="{ exact: false }"
+          *mifosxHasPermission="'MENU_CLEARING'"
+        >
+          <mat-icon matListIcon>
+            <fa-icon icon="money-check" size="sm"></fa-icon>
+          </mat-icon>
+          <a matLine>{{ 'labels.menus.NACH Clearing' | translate }}</a>
+        </mat-list-item>
         <mat-list-item
           [routerLink]="['/rbi-circulars']"
           [matTooltipPosition]="tooltipPosition"

src/app/core/shell/toolbar/toolbar.component.html

@@ -266,7 +266,7 @@
         <a
           class="subledger-link"
           [class.hidden]="!matchesSearch('Cash / Clearing / Transfer')"
-          (click)="subLedgerOpen = false"
+          (click)="navigateMenu('/cashier/cash-clearing-transfer-summary'); subLedgerOpen = false"
         >
           <fa-icon icon="money-bill" class="subledger-icon"></fa-icon> Cash / Clearing / Transfer
         </a>
@@ -403,17 +403,26 @@
     <div class="subledger-columns">
       <div class="subledger-group">
         <div class="subledger-group-title">Financial Statements</div>
-        <a class="subledger-link" [class.hidden]="!matchesGlSearch('Trial Balance')" (click)="glMenuOpen = false"
+        <a
+          class="subledger-link"
+          [class.hidden]="!matchesGlSearch('Trial Balance')"
+          routerLink="/gl/reports/trial-balance"
+          (click)="glMenuOpen = false"
           ><fa-icon icon="balance-scale" class="subledger-icon"></fa-icon> Trial Balance</a
         >
-        <a class="subledger-link" [class.hidden]="!matchesGlSearch('Profit and Loss')" (click)="glMenuOpen = false"
+        <a
+          class="subledger-link"
+          [class.hidden]="!matchesGlSearch('Profit and Loss')"
+          routerLink="/gl/reports/profit-and-loss"
+          (click)="glMenuOpen = false"
           ><fa-icon icon="chart-line" class="subledger-icon"></fa-icon> Profit and Loss</a
         >
         <a
           class="subledger-link"
-          [class.hidden]="!matchesGlSearch('Consolidate Balance Sheet')"
+          [class.hidden]="!matchesGlSearch('Consolidated Balance Sheet')"
+          routerLink="/gl/reports/balance-sheet"
           (click)="glMenuOpen = false"
-          ><fa-icon icon="file-alt" class="subledger-icon"></fa-icon> Consolidate Balance Sheet</a
+          ><fa-icon icon="file-alt" class="subledger-icon"></fa-icon> Consolidated Balance Sheet</a
         >
       </div>
       <div class="subledger-group">
@@ -448,8 +457,12 @@
           (click)="glMenuOpen = false"
           ><fa-icon icon="users" class="subledger-icon"></fa-icon> Client wise Balance Report</a
         >
-        <a class="subledger-link" [class.hidden]="!matchesGlSearch('Contingent Expense')" (click)="glMenuOpen = false"
-          ><fa-icon icon="exclamation-circle" class="subledger-icon"></fa-icon> Contingent Expense</a
+        <a
+          class="subledger-link"
+          [class.hidden]="!matchesGlSearch('Contingent Liabilities')"
+          routerLink="/gl/reports/contingent-liabilities"
+          (click)="glMenuOpen = false"
+          ><fa-icon icon="exclamation-circle" class="subledger-icon"></fa-icon> Contingent Liabilities</a
         >
         <a class="subledger-link" [class.hidden]="!matchesGlSearch('Banker Head Report')" (click)="glMenuOpen = false"
           ><fa-icon icon="university" class="subledger-icon"></fa-icon> Banker Head Report</a

src/app/ctsclearing/ctsclearing-dashboard/ctsclearing-dashboard.component.html

@@ -0,0 +1,29 @@
+<!--
+  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="container">
+  <div class="page-header">
+    <h2>{{ 'labels.menus.CTS Clearing' | translate }}</h2>
+  </div>
+
+  <div class="cards-grid">
+    @for (screen of screens; track screen.label) {
+      <mat-card class="cb-card" [routerLink]="screen.route">
+        <mat-card-content>
+          <div class="card-head">
+            <span class="card-icon">
+              <fa-icon [icon]="screen.icon"></fa-icon>
+            </span>
+            <span class="card-title">{{ screen.label | translate }}</span>
+          </div>
+          <p class="card-desc">{{ screen.description | translate }}</p>
+        </mat-card-content>
+      </mat-card>
+    }
+  </div>
+</div>

src/app/ctsclearing/ctsclearing-dashboard/ctsclearing-dashboard.component.scss

@@ -0,0 +1,68 @@
+/**
+ * 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/.
+ */
+
+.container {
+  padding: 16px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 16px;
+}
+
+.cb-card {
+  cursor: pointer;
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+    transform: translateY(-2px);
+  }
+}
+
+.card-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.card-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 10px;
+  flex: 0 0 auto;
+  background: rgb(25 118 210 / 10%);
+  color: #1976d2;
+  font-size: 1.15rem;
+}
+
+.card-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.card-desc {
+  color: rgb(0 0 0 / 60%);
+  font-size: 0.85rem;
+  margin: 0;
+}

src/app/ctsclearing/ctsclearing-dashboard/ctsclearing-dashboard.component.ts

@@ -0,0 +1,73 @@
+/**
+ * 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 } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/**
+ * CTS Clearing landing page — one card per screen (inward presentment, outward presentment, settlement,
+ * reconciliation) plus a shortcut to the shared clearing network directory.
+ */
+@Component({
+  selector: 'mifosx-ctsclearing-dashboard',
+  templateUrl: './ctsclearing-dashboard.component.html',
+  styleUrls: ['./ctsclearing-dashboard.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    RouterLink,
+    MatIconModule,
+    MatCardModule,
+    FaIconComponent
+  ]
+})
+export class CtsClearingDashboardComponent {
+  screens = [
+    {
+      route: [
+        '/ctsclearing',
+        'inward'
+      ],
+      label: 'Inward Clearing',
+      icon: 'arrow-left',
+      description: 'Presentment batches drawn on us — per-cheque validation, pass/return decisioning'
+    },
+    {
+      route: [
+        '/ctsclearing',
+        'outward'
+      ],
+      label: 'Outward Clearing',
+      icon: 'arrow-right',
+      description:
+        'Cheques deposited by our customers — capture, then browse the 2-hourly clearing-session batches to settle/dishonour'
+    },
+    {
+      route: [
+        '/ctsclearing',
+        'settlement'
+      ],
+      label: 'Settlement',
+      icon: 'money-check',
+      description: 'Net settlement batches — prepare, post to the GL, reject'
+    },
+    {
+      route: [
+        '/ctsclearing',
+        'reconciliation'
+      ],
+      label: 'Reconciliation',
+      icon: 'check-circle',
+      description: 'Reconcile CBS totals against the clearing-house figures'
+    }
+  ];
+}

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

@@ -0,0 +1,81 @@
+/**
+ * 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 { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+/** Routing Imports */
+import { Route } from '../core/route/route.service';
+
+/** Custom Components */
+import { CtsClearingDashboardComponent } from './ctsclearing-dashboard/ctsclearing-dashboard.component';
+import { InwardBatchesComponent } from './inward-batches/inward-batches.component';
+import { InwardBatchDetailComponent } from './inward-batch-detail/inward-batch-detail.component';
+import { OutwardPresentmentComponent } from './outward-presentment/outward-presentment.component';
+import { OutwardBatchDetailComponent } from './outward-batch-detail/outward-batch-detail.component';
+import { SettlementComponent } from './settlement/settlement.component';
+import { ReconciliationComponent } from './reconciliation/reconciliation.component';
+import { PositivePayComponent } from './positive-pay/positive-pay.component';
+
+/** CTS Clearing Routes */
+const routes: Routes = [
+  Route.withShell([
+    {
+      path: 'ctsclearing',
+      data: { title: 'CTS Clearing', breadcrumb: 'CTS Clearing' },
+      children: [
+        {
+          path: '',
+          component: CtsClearingDashboardComponent
+        },
+        {
+          path: 'inward',
+          component: InwardBatchesComponent,
+          data: { title: 'Inward Clearing', breadcrumb: 'Inward Clearing' }
+        },
+        {
+          path: 'inward/:id',
+          component: InwardBatchDetailComponent,
+          data: { title: 'Inward Batch', routeParamBreadcrumb: 'id' }
+        },
+        {
+          path: 'outward',
+          component: OutwardPresentmentComponent,
+          data: { title: 'Outward Clearing', breadcrumb: 'Outward Clearing' }
+        },
+        {
+          path: 'outward-batches/:id',
+          component: OutwardBatchDetailComponent,
+          data: { title: 'Outward Batch', routeParamBreadcrumb: 'id' }
+        },
+        {
+          path: 'settlement',
+          component: SettlementComponent,
+          data: { title: 'Settlement', breadcrumb: 'Settlement' }
+        },
+        {
+          path: 'reconciliation',
+          component: ReconciliationComponent,
+          data: { title: 'Reconciliation', breadcrumb: 'Reconciliation' }
+        },
+        {
+          path: 'positive-pay',
+          component: PositivePayComponent,
+          data: { title: 'Positive Pay', breadcrumb: 'Positive Pay' }
+        }
+      ]
+    }
+  ])
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CtsClearingRoutingModule {}

src/app/ctsclearing/ctsclearing.module.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 { NgModule } from '@angular/core';
+
+/** Custom Modules */
+import { SharedModule } from '../shared/shared.module';
+import { DirectivesModule } from '../directives/directives.module';
+import { PipesModule } from 'app/pipes/pipes.module';
+import { CtsClearingRoutingModule } from './ctsclearing-routing.module';
+
+/** Custom Components (standalone) */
+import { CtsClearingDashboardComponent } from './ctsclearing-dashboard/ctsclearing-dashboard.component';
+import { InwardBatchesComponent } from './inward-batches/inward-batches.component';
+import { InwardBatchDetailComponent } from './inward-batch-detail/inward-batch-detail.component';
+import { ItemDecisionDialogComponent } from './inward-batch-detail/item-decision-dialog/item-decision-dialog.component';
+import { OutwardPresentmentComponent } from './outward-presentment/outward-presentment.component';
+import { OutwardBatchDetailComponent } from './outward-batch-detail/outward-batch-detail.component';
+import { SettlementComponent } from './settlement/settlement.component';
+import { ReconciliationComponent } from './reconciliation/reconciliation.component';
+import { PositivePayComponent } from './positive-pay/positive-pay.component';
+
+/**
+ * CTS (Cheque Truncation System) Clearing Module.
+ *
+ * Inward presentment batches with per-cheque validation and pass/return decisioning, outward
+ * presentment life-cycle (capture -> send -> settle/dishonour), plus the CTS views of the shared
+ * settlement and reconciliation screens.
+ */
+@NgModule({
+  imports: [
+    SharedModule,
+    DirectivesModule,
+    PipesModule,
+    CtsClearingRoutingModule,
+    CtsClearingDashboardComponent,
+    InwardBatchesComponent,
+    InwardBatchDetailComponent,
+    ItemDecisionDialogComponent,
+    OutwardPresentmentComponent,
+    OutwardBatchDetailComponent,
+    SettlementComponent,
+    ReconciliationComponent,
+    PositivePayComponent
+  ]
+})
+export class CtsClearingModule {}

src/app/ctsclearing/ctsclearing.service.ts

@@ -0,0 +1,219 @@
+/**
+ * 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 { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+/**
+ * CTS (Cheque Truncation System) clearing — inward presentment batches with the per-cheque validation
+ * ruleset and pass/return decisioning, and the outward presentment life-cycle (capture -> send ->
+ * settle/dishonour). Shared settlement/reconciliation/bank/routing calls live in ClearingService.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class CtsClearingService {
+  private http = inject(HttpClient);
+
+  /**
+   * Persists the Outward Clearing screen's Batches Today/All filter across navigation (e.g. viewing a batch
+   * and coming back) — otherwise the component would reset to "today" every time it's recreated.
+   */
+  outwardBatchesDateFilter: 'today' | 'all' = 'today';
+
+  /** Same persistence, for the Inward Clearing screen's Today/Yesterday/All quick filter. */
+  inwardBatchesDateFilter: 'today' | 'yesterday' | 'all' = 'today';
+
+  // ----- Inward batches -----
+
+  /** Server-side paginated — returns { pageItems, totalFilteredRecords }. */
+  getInwardBatches(
+    status?: string,
+    offset = 0,
+    limit = 20,
+    filters?: { fromDate?: string; toDate?: string; batchReference?: string; presentingBankName?: string }
+  ): Observable<any> {
+    let params = new HttpParams().set('offset', offset).set('limit', limit);
+    if (status) params = params.set('status', status);
+    if (filters?.fromDate) params = params.set('fromDate', filters.fromDate);
+    if (filters?.toDate) params = params.set('toDate', filters.toDate);
+    if (filters?.batchReference) params = params.set('batchReference', filters.batchReference);
+    if (filters?.presentingBankName) params = params.set('presentingBankName', filters.presentingBankName);
+    return this.http.get('/ctsclearing/inward-batches', { params });
+  }
+
+  getInwardBatch(id: string | number): Observable<any> {
+    return this.http.get(`/ctsclearing/inward-batches/${id}`);
+  }
+
+  /** Sub-list may come back as a raw array OR a page — callers handle both. */
+  getInwardBatchItems(id: string | number): Observable<any> {
+    return this.http.get(`/ctsclearing/inward-batches/${id}/items`);
+  }
+
+  createInwardBatch(payload: any): Observable<any> {
+    return this.http.post('/ctsclearing/inward-batches', payload);
+  }
+
+  validateInwardBatch(id: string | number): Observable<any> {
+    return this.http.post(
+      `/ctsclearing/inward-batches/${id}`,
+      {},
+      { params: new HttpParams().set('command', 'validate') }
+    );
+  }
+
+  // ----- Inward items -----
+
+  getInwardItem(id: string | number): Observable<any> {
+    return this.http.get(`/ctsclearing/inward-items/${id}`);
+  }
+
+  passInwardItem(id: string | number, payload: any): Observable<any> {
+    return this.http.post(`/ctsclearing/inward-items/${id}`, payload, {
+      params: new HttpParams().set('command', 'pass')
+    });
+  }
+
+  /** Records the clerk's manual signature-verification decision — required before passInwardItem will succeed. */
+  verifyInwardItemSignature(id: string | number, signatureOk: boolean): Observable<any> {
+    return this.http.post(
+      `/ctsclearing/inward-items/${id}`,
+      { signatureOk, locale: 'en' },
+      { params: new HttpParams().set('command', 'verifySignature') }
+    );
+  }
+
+  /** Uploads a real scanned cheque image (front|back) for an inward item. */
+  uploadInwardItemImage(id: string | number, side: 'front' | 'back', file: File): Observable<any> {
+    const formData = new FormData();
+    formData.append('file', file, file.name);
+    return this.http.post(`/ctsclearing/inward-items/${id}/image`, formData, {
+      params: new HttpParams().set('side', side)
+    });
+  }
+
+  /** Fetches the front|back cheque image as a base64 data URL (bind straight to [src]), via an authenticated call. */
+  getInwardItemImage(id: string | number, side: 'front' | 'back'): Observable<string> {
+    return this.http.get(`/ctsclearing/inward-items/${id}/image`, {
+      params: new HttpParams().set('side', side),
+      responseType: 'text'
+    });
+  }
+
+  returnInwardItem(id: string | number, payload: any): Observable<any> {
+    return this.http.post(`/ctsclearing/inward-items/${id}`, payload, {
+      params: new HttpParams().set('command', 'return')
+    });
+  }
+
+  // ----- Outward presentments -----
+
+  getOutwardPresentments(
+    status?: string,
+    offset = 0,
+    limit = 20,
+    filters?: {
+      fromDate?: string;
+      toDate?: string;
+      chequeNumber?: string;
+      drawerBankName?: string;
+      payeeName?: string;
+      batchReference?: string;
+    }
+  ): Observable<any> {
+    let params = new HttpParams().set('offset', offset).set('limit', limit);
+    if (status) params = params.set('status', status);
+    if (filters?.fromDate) params = params.set('fromDate', filters.fromDate);
+    if (filters?.toDate) params = params.set('toDate', filters.toDate);
+    if (filters?.chequeNumber) params = params.set('chequeNumber', filters.chequeNumber);
+    if (filters?.drawerBankName) params = params.set('drawerBankName', filters.drawerBankName);
+    if (filters?.payeeName) params = params.set('payeeName', filters.payeeName);
+    if (filters?.batchReference) params = params.set('batchReference', filters.batchReference);
+    return this.http.get('/ctsclearing/outward-presentments', { params });
+  }
+
+  /** One row per outward clearing session ("batch") — cheques grouped by the shared batchReference they were sent under. */
+  getOutwardBatches(
+    offset = 0,
+    limit = 20,
+    filters?: { fromDate?: string; toDate?: string; batchReference?: string }
+  ): Observable<any> {
+    let params = new HttpParams().set('offset', offset).set('limit', limit);
+    if (filters?.fromDate) params = params.set('fromDate', filters.fromDate);
+    if (filters?.toDate) params = params.set('toDate', filters.toDate);
+    if (filters?.batchReference) params = params.set('batchReference', filters.batchReference);
+    return this.http.get('/ctsclearing/outward-presentments/batches', { params });
+  }
+
+  getOutwardPresentment(id: string | number): Observable<any> {
+    return this.http.get(`/ctsclearing/outward-presentments/${id}`);
+  }
+
+  createOutwardPresentment(payload: any): Observable<any> {
+    return this.http.post('/ctsclearing/outward-presentments', payload);
+  }
+
+  /** command: 'send' | 'settle' | 'dishonour'. Dishonour carries { dishonourReasonCode }. */
+  actOnOutwardPresentment(id: string | number, command: string, payload: any = {}): Observable<any> {
+    return this.http.post(`/ctsclearing/outward-presentments/${id}`, payload, {
+      params: new HttpParams().set('command', command)
+    });
+  }
+
+  /** Uploads a real scanned cheque image (front|back) for an outward presentment. */
+  uploadOutwardPresentmentImage(id: string | number, side: 'front' | 'back', file: File): Observable<any> {
+    const formData = new FormData();
+    formData.append('file', file, file.name);
+    return this.http.post(`/ctsclearing/outward-presentments/${id}/image`, formData, {
+      params: new HttpParams().set('side', side)
+    });
+  }
+
+  /** Fetches the front|back cheque image as a base64 data URL (bind straight to [src]), via an authenticated call. */
+  getOutwardPresentmentImage(id: string | number, side: 'front' | 'back'): Observable<string> {
+    return this.http.get(`/ctsclearing/outward-presentments/${id}/image`, {
+      params: new HttpParams().set('side', side),
+      responseType: 'text'
+    });
+  }
+
+  /** Offices/branches, for the "presenting branch" selector on the outward capture form. */
+  getOffices(): Observable<any> {
+    return this.http.get('/offices');
+  }
+
+  /**
+   * Bundles every CAPTURED outward presentment into one CTS batch file and sends it to the clearing house in
+   * a single go — the same action the (disabled by default) clearing-session scheduler would run automatically.
+   */
+  sendPendingOutwardBatch(): Observable<any> {
+    return this.http.post('/ctsclearing/outward-presentments/send-pending-batch', {});
+  }
+
+  // ----- Positive Pay (RBI PPS) -----
+
+  getPositivePayRegistrations(accountId?: string | number, status?: string, offset = 0, limit = 20): Observable<any> {
+    let params = new HttpParams().set('offset', offset).set('limit', limit);
+    if (accountId) params = params.set('accountId', accountId);
+    if (status) params = params.set('status', status);
+    return this.http.get('/ctsclearing/positive-pay', { params });
+  }
+
+  registerPositivePay(payload: any): Observable<any> {
+    return this.http.post('/ctsclearing/positive-pay', payload);
+  }
+
+  cancelPositivePay(id: string | number, payload: any): Observable<any> {
+    return this.http.post(`/ctsclearing/positive-pay/${id}`, payload, {
+      params: new HttpParams().set('command', 'cancel')
+    });
+  }
+}

src/app/ctsclearing/inward-batch-detail/inward-batch-detail.component.html

@@ -0,0 +1,262 @@
+<!--
+  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="container">
+  <div class="page-header">
+    <h2>{{ 'labels.inputs.Inward Batch' | translate }} #{{ batch.id }}</h2>
+    <button mat-raised-button [routerLink]="['/ctsclearing', 'inward']">{{ 'labels.buttons.Back' | translate }}</button>
+  </div>
+
+  <mat-card class="info-card">
+    <mat-card-content>
+      <div class="info-grid">
+        <div>
+          <span class="k">{{ 'labels.inputs.Batch Reference' | translate }}</span
+          ><span>{{ batch.batchReference }}</span>
+        </div>
+        <div>
+          <span class="k">{{ 'labels.inputs.Session Date' | translate }}</span
+          ><span>{{ batch.sessionDate ? (batch.sessionDate | dateFormat) : '–' }}</span>
+        </div>
+        <div>
+          <span class="k">{{ 'labels.inputs.Presentment Type' | translate }}</span
+          ><span>{{ batch.presentmentType }}</span>
+        </div>
+        <div>
+          <span class="k">{{ 'labels.inputs.Items' | translate }}</span
+          ><span>{{ batch.itemCount ?? batch.totalCount ?? items.length }}</span>
+        </div>
+        <div>
+          <span class="k">{{ 'labels.inputs.Total Amount' | translate }}</span
+          ><span>{{ batch.totalAmount ?? '–' }}</span>
+        </div>
+        <div>
+          <span class="k">{{ 'labels.inputs.Status' | translate }}</span>
+          <span
+            ><span class="pill" [ngClass]="pillClass(batch.status)">{{ batch.status }}</span></span
+          >
+        </div>
+        @if (batch.presentingBankName || batch.presentingBankCode) {
+          <div>
+            <span class="k">{{ 'labels.inputs.Presenting Bank' | translate }}</span
+            ><span
+              >{{ batch.presentingBankName || '–' }} <span class="muted">{{ batch.presentingBankCode }}</span></span
+            >
+          </div>
+        }
+        @if (batch.returnTatDeadline) {
+          <div>
+            <span class="k">{{ 'labels.inputs.Return TAT Deadline' | translate }}</span
+            ><span>{{ batch.returnTatDeadline | dateFormat }}</span>
+          </div>
+        }
+      </div>
+    </mat-card-content>
+  </mat-card>
+
+  <div class="action-toolbar">
+    <button mat-raised-button color="primary" (click)="runValidation()" [disabled]="busy">
+      <fa-icon icon="check-circle"></fa-icon>&nbsp;{{ 'labels.buttons.Run Validation' | translate }}
+    </button>
+    <button mat-raised-button (click)="prepareSettlement()" [disabled]="busy">
+      <fa-icon icon="money-check"></fa-icon>&nbsp;{{ 'labels.buttons.Prepare Settlement' | translate }}
+    </button>
+  </div>
+
+  <div class="table-wrapper mat-elevation-z1">
+    <table mat-table [dataSource]="items">
+      <ng-container matColumnDef="chequeNumber">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Cheque Number' | translate }}</th>
+        <td mat-cell *matCellDef="let it">
+          {{ it.chequeNumber }}
+          @if (it.instrumentStopPaymentFlag) {
+            <span class="pill bad" matTooltip="Stop payment was flagged on the depositing side">STOP</span>
+          }
+          @if (it.micrCode) {
+            <span class="muted">{{ it.micrCode }}</span>
+          }
+          @if (it.ifsc) {
+            <span class="muted">{{ it.ifsc }}</span>
+          }
+          @if (it.ctsReferenceNumber) {
+            <span class="muted">{{ it.ctsReferenceNumber }}</span>
+          }
+          @if (it.instrumentDate) {
+            <span class="muted">Dated {{ it.instrumentDate | dateFormat }}</span>
+          }
+          @if (it.instrumentTypeDescription || it.instrumentType) {
+            <span class="muted">{{ it.instrumentTypeDescription || it.instrumentType }}</span>
+          }
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="drawer">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account' | translate }}</th>
+        <td mat-cell *matCellDef="let it">
+          {{ it.accountNo || it.accountId || '–' }}
+          @if (it.clientName) {
+            <span class="muted">{{ it.clientName }}</span>
+          }
+          @if (it.drawerAccountNumberMasked) {
+            <span class="muted">Drawer a/c {{ it.drawerAccountNumberMasked }}</span>
+          }
+          @if (it.draweeBankName) {
+            <span class="muted">{{ it.draweeBankName }}</span>
+          }
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="payeeName">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payee Name' | translate }}</th>
+        <td mat-cell *matCellDef="let it">{{ it.payeeName }}</td>
+      </ng-container>
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef class="num">{{ 'labels.inputs.Amount' | translate }}</th>
+        <td mat-cell *matCellDef="let it" class="num">
+          {{ it.amount }}
+          @if (it.amountInWords) {
+            <div class="muted">{{ it.amountInWords }}</div>
+          }
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="image">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Image' | translate }}</th>
+        <td mat-cell *matCellDef="let it">
+          <div class="image-cell">
+            @if (getItemImageUrl(it, 'front')) {
+              <img
+                [src]="getItemImageUrl(it, 'front')"
+                class="cheque-thumb"
+                alt="front"
+                matTooltip="Front image — click to zoom"
+                (click)="openImageZoom(it, 'front')"
+              />
+            } @else {
+              <input #frontFile type="file" accept="image/*" hidden (change)="uploadItemImage(it, 'front', $event)" />
+              <button mat-icon-button (click)="frontFile.click()" matTooltip="Upload front image">
+                <fa-icon icon="plus"></fa-icon>
+              </button>
+            }
+            @if (getItemImageUrl(it, 'back')) {
+              <img
+                [src]="getItemImageUrl(it, 'back')"
+                class="cheque-thumb"
+                alt="back"
+                matTooltip="Back image — click to zoom"
+                (click)="openImageZoom(it, 'back')"
+              />
+            } @else {
+              <input #backFile type="file" accept="image/*" hidden (change)="uploadItemImage(it, 'back', $event)" />
+              <button mat-icon-button (click)="backFile.click()" matTooltip="Upload back image">
+                <fa-icon icon="plus"></fa-icon>
+              </button>
+            }
+          </div>
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="checks">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Validation' | translate }}</th>
+        <td mat-cell *matCellDef="let it">
+          @if (isDecided(it)) {
+            <span class="pill" [ngClass]="hasFailedChecks(it) ? 'bad' : 'ok'">
+              {{ hasFailedChecks(it) ? 'Some checks failed' : 'All checks passed' }}
+            </span>
+            <div class="muted">See View → Comparison Details for the full breakdown.</div>
+          } @else {
+            <div class="check-badges">
+              @for (rule of rules; track rule.key) {
+                <span class="pill" [ngClass]="ruleClass(it, rule)" [title]="rule.label">{{ rule.label }}</span>
+              }
+            </div>
+            @if (it.validationDetail) {
+              <div class="validation-detail muted">{{ it.validationDetail }}</div>
+            }
+            @if (it.iqaStatus && it.iqaStatus !== 'NA') {
+              <span class="pill" [ngClass]="pillClass(it.iqaStatus)" matTooltip="Image Quality Assessment"
+                >IQA: {{ it.iqaStatus }}</span
+              >
+            }
+            @if (it.iqaDetail) {
+              <div class="muted">{{ it.iqaDetail }}</div>
+            }
+            @if (it.iqaSubChecks) {
+              <div class="muted">{{ it.iqaSubChecks }}</div>
+            }
+          }
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="decision">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Decision' | translate }}</th>
+        <td mat-cell *matCellDef="let it">
+          @if (isDecided(it)) {
+            <span class="pill" [ngClass]="pillClass(it.decision)">{{ it.decision }}</span>
+          } @else {
+            <span class="pill neutral">{{ it.itemStatus || 'PENDING' }}</span>
+          }
+          @if (it.returnReasonCode) {
+            <div class="muted">{{ it.returnReasonCode }}</div>
+          }
+          @if (isDecided(it) && it.decisionedOn) {
+            <div class="muted">{{ it.decisionedOn | dateFormat }}</div>
+          }
+          @if (isDecided(it) && it.decisionReason) {
+            <div class="muted">{{ it.decisionReason }}</div>
+          }
+          @if (isDecided(it)) {
+            @if (it.settlementBatchId) {
+              <div class="muted">Settlement #{{ it.settlementBatchId }}</div>
+            } @else {
+              <div class="muted">Awaiting settlement</div>
+            }
+          }
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="hold">
+        <th mat-header-cell *matHeaderCellDef class="num">{{ 'labels.inputs.Hold' | translate }}</th>
+        <td mat-cell *matCellDef="let it" class="num">
+          @if (it.holdPlaced) {
+            {{ it.holdAmount ?? '✓' }}
+          } @else {
+            –
+          }
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="returnDeadline">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Return Deadline' | translate }}</th>
+        <td mat-cell *matCellDef="let it">
+          {{ it.returnDeadline ? (it.returnDeadline | dateFormat) : '–' }}
+          @if (it.originalSerialNumber) {
+            <span class="muted">Orig # {{ it.originalSerialNumber }}</span>
+          }
+          @if (it.depositDate) {
+            <span class="muted">Deposited {{ it.depositDate | dateFormat }}</span>
+          }
+          @if (it.depositAccountNumber) {
+            <span class="muted">Deposit a/c {{ it.depositAccountNumber }}</span>
+          }
+          @if (it.presentingBranchCode) {
+            <span class="muted">Branch {{ it.presentingBranchCode }}</span>
+          }
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let it">
+          <button mat-button color="primary" (click)="decide(it)">
+            {{ (isDecided(it) ? 'labels.buttons.View' : 'labels.buttons.Decide') | translate }}
+          </button>
+        </td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="columns"></tr>
+      <tr mat-row *matRowDef="let row; columns: columns"></tr>
+    </table>
+    @if (items.length === 0) {
+      <div class="empty-state">{{ 'labels.text.No records to display' | translate }}</div>
+    }
+  </div>
+
+  <div #lightboxRoot style="display: none"></div>
+</div>

src/app/ctsclearing/inward-batch-detail/inward-batch-detail.component.scss

@@ -0,0 +1,127 @@
+/**
+ * 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/.
+ */
+
+.container {
+  padding: 16px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.info-card {
+  margin-bottom: 16px;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px 20px;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .k {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: rgb(0 0 0 / 50%);
+    margin-bottom: 2px;
+  }
+}
+
+.action-toolbar {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+  background: #fff;
+}
+
+table {
+  width: 100%;
+}
+
+td.num,
+th.num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.check-badges {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  max-width: 320px;
+}
+
+.validation-detail {
+  margin-top: 4px;
+  max-width: 320px;
+}
+
+.muted {
+  display: block;
+  color: rgb(0 0 0 / 50%);
+  font-size: 0.78rem;
+  margin-left: 0;
+}
+
+.pill {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-weight: 600;
+  white-space: nowrap;
+
+  &.ok {
+    background: #dff5e8;
+    color: #28c07a;
+  }
+
+  &.bad {
+    background: #fde3e3;
+    color: #d32f2f;
+  }
+
+  &.neutral {
+    background: #e0e0e0;
+    color: #757575;
+  }
+}
+
+.empty-state {
+  padding: 24px;
+  text-align: center;
+  color: rgb(0 0 0 / 50%);
+}
+
+.image-cell {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.cheque-thumb {
+  width: 40px;
+  height: 28px;
+  object-fit: cover;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  cursor: pointer;
+}

src/app/ctsclearing/inward-batch-detail/inward-batch-detail.component.ts

@@ -0,0 +1,269 @@
+/**
+ * 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, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatDialog } from '@angular/material/dialog';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import lightGallery from 'lightgallery';
+import lgZoom from 'lightgallery/plugins/zoom';
+import lgFullscreen from 'lightgallery/plugins/fullscreen';
+import type { LightGallery } from 'lightgallery/lightgallery';
+import type { GalleryItem } from 'lightgallery/lg-utils';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/** Custom Services */
+import { CtsClearingService } from '../ctsclearing.service';
+import { ClearingService } from '../../clearing-network/clearing.service';
+import { ItemDecisionDialogComponent } from './item-decision-dialog/item-decision-dialog.component';
+import { pillClass, clearingError } from '../../clearing-network/clearing-status';
+
+/**
+ * One inward CTS batch — its header, the per-cheque items table with a badge per validation rule, and the
+ * batch-level "Run Validation" and "Prepare Settlement" actions. Each item can be manually PASSed or
+ * RETURNed through the item-decision dialog.
+ */
+@Component({
+  selector: 'mifosx-inward-batch-detail',
+  templateUrl: './inward-batch-detail.component.html',
+  styleUrls: ['./inward-batch-detail.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    RouterLink,
+    MatButtonModule,
+    MatTableModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    FaIconComponent
+  ]
+})
+export class InwardBatchDetailComponent implements OnInit, OnDestroy {
+  private route = inject(ActivatedRoute);
+  private ctsService = inject(CtsClearingService);
+  private clearingService = inject(ClearingService);
+  private snackBar = inject(MatSnackBar);
+  private dialog = inject(MatDialog);
+
+  @ViewChild('lightboxRoot', { static: true }) lightboxRoot: ElementRef<HTMLElement>;
+  private lightboxInstance: LightGallery | null = null;
+  private readonly lightboxPlugins = [
+    lgZoom,
+    lgFullscreen
+  ];
+
+  pillClass = pillClass;
+
+  private notify(message: string, isError = false): void {
+    this.snackBar.open(message, 'Dismiss', { duration: isError ? 6000 : 3000 });
+  }
+
+  batchId!: string;
+  batch: any = {};
+  items: any[] = [];
+  busy = false;
+
+  /** Per-cheque validation rules — label + the item field, and whether "true" is the good outcome. */
+  readonly rules: { key: string; label: string; goodWhenTrue: boolean }[] = [
+    { key: 'accountCheckPassed', label: 'Account', goodWhenTrue: true },
+    { key: 'balanceCheckPassed', label: 'Balance', goodWhenTrue: true },
+    { key: 'signatureOk', label: 'Signature', goodWhenTrue: true },
+    { key: 'duplicateCheckPassed', label: 'Duplicate', goodWhenTrue: true },
+    { key: 'stopPaymentCheckPassed', label: 'Stop Pay', goodWhenTrue: true },
+    { key: 'amountWordsFiguresMatch', label: 'Amt Match', goodWhenTrue: true },
+    { key: 'staleOrPostdated', label: 'Stale/Postdated', goodWhenTrue: false }
+  ];
+
+  columns = [
+    'chequeNumber',
+    'drawer',
+    'payeeName',
+    'amount',
+    'image',
+    'checks',
+    'decision',
+    'hold',
+    'returnDeadline',
+    'actions'
+  ];
+
+  ngOnInit(): void {
+    this.batchId = this.route.snapshot.paramMap.get('id') as string;
+    this.loadAll();
+  }
+
+  ngOnDestroy(): void {
+    this.destroyLightbox();
+  }
+
+  /** Cheque image data URLs, keyed "<itemId>_<side>" — populated once fetched, absent means none uploaded (yet). */
+  imageUrls: { [key: string]: string } = {};
+
+  loadAll(): void {
+    this.ctsService.getInwardBatch(this.batchId).subscribe((data: any) => (this.batch = data || {}));
+    this.ctsService.getInwardBatchItems(this.batchId).subscribe((data: any) => {
+      this.items = data?.pageItems ?? (Array.isArray(data) ? data : []);
+      this.items.forEach((it: any) => {
+        this.loadItemImage(it, 'front');
+        this.loadItemImage(it, 'back');
+      });
+    });
+  }
+
+  /** Fetches the image as an authenticated base64 data URL and caches it for [src] binding — 404 (no upload yet) is expected and silent. */
+  loadItemImage(item: any, side: 'front' | 'back'): void {
+    this.ctsService.getInwardItemImage(item.id, side).subscribe({
+      next: (dataUrl: string) => (this.imageUrls[`${item.id}_${side}`] = dataUrl),
+      error: () => {
+        /* no image uploaded for this side yet */
+      }
+    });
+  }
+
+  getItemImageUrl(item: any, side: 'front' | 'back'): string | null {
+    return this.imageUrls[`${item.id}_${side}`] || null;
+  }
+
+  /** Opens the front/back cheque image(s) in a zoomable, pannable lightbox — same lightgallery setup used app-wide. */
+  openImageZoom(item: any, side: 'front' | 'back'): void {
+    const frontUrl = this.getItemImageUrl(item, 'front');
+    const backUrl = this.getItemImageUrl(item, 'back');
+    const items: GalleryItem[] = [];
+    if (frontUrl) {
+      items.push({
+        src: frontUrl,
+        thumb: frontUrl,
+        subHtml: `<div class="lg-caption"><h4>Front — Cheque ${item.chequeNumber}</h4></div>`
+      });
+    }
+    if (backUrl) {
+      items.push({
+        src: backUrl,
+        thumb: backUrl,
+        subHtml: `<div class="lg-caption"><h4>Back — Cheque ${item.chequeNumber}</h4></div>`
+      });
+    }
+    if (!items.length) {
+      return;
+    }
+    const startIndex = side === 'back' && frontUrl ? 1 : 0;
+    this.destroyLightbox();
+    this.lightboxInstance = lightGallery(this.lightboxRoot.nativeElement, {
+      dynamic: true,
+      dynamicEl: items,
+      plugins: this.lightboxPlugins,
+      download: false,
+      closable: true,
+      escKey: true,
+      zoomFromOrigin: true
+    });
+    this.lightboxInstance.openGallery(startIndex);
+  }
+
+  private destroyLightbox(): void {
+    if (this.lightboxInstance) {
+      this.lightboxInstance.destroy();
+      this.lightboxInstance = null;
+    }
+  }
+
+  uploadItemImage(item: any, side: 'front' | 'back', event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files && input.files[0];
+    if (!file) {
+      return;
+    }
+    this.ctsService.uploadInwardItemImage(item.id, side, file).subscribe({
+      next: () => {
+        this.notify(side === 'front' ? 'Front image uploaded' : 'Back image uploaded');
+        this.loadItemImage(item, side);
+      },
+      error: (err: any) => this.notify(clearingError(err, 'Image upload failed'), true)
+    });
+    input.value = '';
+  }
+
+  /** ok / bad / neutral for a single boolean validation rule, respecting whether true is the good outcome. */
+  ruleClass(item: any, rule: { key: string; goodWhenTrue: boolean }): 'ok' | 'bad' | 'neutral' {
+    const value = item?.[rule.key];
+    if (value === null || value === undefined) {
+      return 'neutral';
+    }
+    const good = rule.goodWhenTrue ? value === true : value === false;
+    return good ? 'ok' : 'bad';
+  }
+
+  /** Once a cheque is decided, the clerk doesn't need the full rule-by-rule checklist sitting in the table
+   *  row forever — a one-line outcome is enough, with the full breakdown one click away via View -> Comparison
+   *  Details. Kept for PENDING items, where the full checklist is exactly what's needed to decide. */
+  hasFailedChecks(item: any): boolean {
+    return this.rules.some((rule) => this.ruleClass(item, rule) === 'bad') || item?.iqaStatus === 'FAIL';
+  }
+
+  /** item.decision is NEVER null/empty — InwardClearingItem.java sets it to the literal string "PENDING" at
+   *  creation, then "PASS"/"RETURN" once decided. A plain truthy check on it.decision is always true, which
+   *  silently broke every "is this item decided yet" branch (View-vs-Decide, read-only summary, collapsed
+   *  validation) into always showing the decided state, even for a still-PENDING item. */
+  isDecided(item: any): boolean {
+    return item?.decision === 'PASS' || item?.decision === 'RETURN';
+  }
+
+  runValidation(): void {
+    if (this.busy) {
+      return;
+    }
+    this.busy = true;
+    this.ctsService.validateInwardBatch(this.batchId).subscribe({
+      next: () => {
+        this.busy = false;
+        this.notify('Validation run');
+        this.loadAll();
+      },
+      error: (err: any) => {
+        this.busy = false;
+        this.notify(clearingError(err, 'Validation failed'), true);
+      }
+    });
+  }
+
+  prepareSettlement(): void {
+    if (this.busy) {
+      return;
+    }
+    this.busy = true;
+    this.clearingService.prepareSettlement({ clearingType: 'CTS', sourceBatchId: this.batch.id }).subscribe({
+      next: () => {
+        this.busy = false;
+        this.notify('Settlement batch prepared — see Settlement');
+        this.loadAll();
+      },
+      error: (err: any) => {
+        this.busy = false;
+        this.notify(clearingError(err, 'Could not prepare settlement'), true);
+      }
+    });
+  }
+
+  decide(item: any): void {
+    const dialogRef = this.dialog.open(ItemDecisionDialogComponent, {
+      data: { item },
+      width: '760px',
+      maxWidth: '95vw',
+      maxHeight: '90vh'
+    });
+    dialogRef.afterClosed().subscribe((result: any) => {
+      if (result?.actioned) {
+        this.loadAll();
+      }
+    });
+  }
+}

src/app/ctsclearing/inward-batch-detail/item-decision-dialog/item-decision-dialog.component.html

@@ -0,0 +1,402 @@
+<!--
+  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/.
+-->
+
+<h1 mat-dialog-title>{{ 'labels.inputs.Cheque' | translate }} {{ item.chequeNumber }}</h1>
+
+<div mat-dialog-content>
+  <div class="info-grid">
+    <div>
+      <span class="k">{{ 'labels.inputs.Payee Name' | translate }}</span
+      ><span>{{ item.payeeName || '–' }}</span>
+    </div>
+    <div>
+      <span class="k">{{ 'labels.inputs.Amount' | translate }}</span
+      ><span>{{ item.amount }}</span>
+    </div>
+    <div>
+      <span class="k">{{ 'labels.inputs.Account' | translate }}</span
+      ><span>{{ item.accountNo || item.accountId || '–' }}</span>
+    </div>
+    @if (item.clientName) {
+      <div>
+        <span class="k">Account Holder</span><span>{{ item.clientName }}</span>
+      </div>
+    }
+    @if (accountInfo?.availableBalance !== null && accountInfo?.availableBalance !== undefined) {
+      <div>
+        <span class="k">Available Balance</span>
+        <span>
+          {{ accountInfo!.availableBalance }}
+          @if (balanceSufficient !== null) {
+            <span class="pill" [ngClass]="balanceSufficient ? 'ok' : 'bad'">
+              {{ balanceSufficient ? 'Sufficient' : 'Insufficient' }}
+            </span>
+          }
+        </span>
+      </div>
+    }
+    @if (
+      accountInfo?.onHoldAmount !== null && accountInfo?.onHoldAmount !== undefined && accountInfo!.onHoldAmount !== 0
+    ) {
+      <div>
+        <span class="k">Existing Holds on Account</span><span>{{ accountInfo!.onHoldAmount }}</span>
+      </div>
+    }
+    <div>
+      <span class="k">Hold Placed</span><span>{{ item.holdPlaced ? (item.holdAmount ?? item.amount) : '–' }}</span>
+    </div>
+  </div>
+
+  <h3 class="section-title">Cheque Image</h3>
+  <div class="muted">
+    Click the cheque to go fullscreen, then drag any signer's stored signature from the shelf onto it and resize for a
+    close match.
+  </div>
+  <div class="image-row">
+    <div #chequeStage class="cheque-stage" [class.fullscreen-stage]="fullscreenActive">
+      <div
+        #chequeImageWrap
+        class="cheque-image-wrap"
+        [style.transform]="fullscreenActive ? 'scale(' + chequeZoom + ')' : null"
+        (wheel)="onChequeWheel($event)"
+      >
+        @if (frontImageUrl) {
+          <img
+            [src]="frontImageUrl"
+            class="cheque-image"
+            alt="front"
+            matTooltip="Click to compare fullscreen"
+            (click)="toggleFullscreen()"
+          />
+        } @else {
+          <div class="no-image">No front image</div>
+        }
+        @if (fullscreenActive) {
+          @for (signer of requiredSigners; track $index) {
+            @if (signer.overlayVisible && signer.signatureUrl) {
+              <div
+                class="sig-overlay"
+                [style.left.px]="signer.overlayX"
+                [style.top.px]="signer.overlayY"
+                [style.width.px]="signer.overlayWidth"
+                [style.opacity]="signer.overlayOpacity"
+                (mousedown)="startOverlayDrag($event, signer)"
+              >
+                <div class="sig-overlay-handle">
+                  <span>{{ signer.name }}</span>
+                  <input
+                    type="range"
+                    class="sig-overlay-opacity"
+                    min="0.3"
+                    max="1"
+                    step="0.05"
+                    [(ngModel)]="signer.overlayOpacity"
+                    (mousedown)="$event.stopPropagation()"
+                    matTooltip="Overlay opacity"
+                  />
+                  <button
+                    type="button"
+                    class="sig-overlay-close"
+                    (mousedown)="$event.stopPropagation()"
+                    (click)="toggleOverlay(signer)"
+                    matTooltip="Hide overlay"
+                  >
+                    ✕
+                  </button>
+                </div>
+                <img [src]="signer.signatureUrl" class="sig-overlay-img" alt="signature overlay" draggable="false" />
+                <div
+                  class="sig-overlay-resize"
+                  (mousedown)="startOverlayResize($event, signer)"
+                  matTooltip="Drag to resize"
+                ></div>
+              </div>
+            }
+          }
+        }
+      </div>
+      @if (fullscreenActive) {
+        <button type="button" class="fullscreen-close" (click)="toggleFullscreen()" matTooltip="Exit fullscreen (Esc)">
+          ✕
+        </button>
+        <div class="fullscreen-zoom">
+          <button type="button" (click)="zoomOut()" matTooltip="Zoom out">−</button>
+          <span>{{ chequeZoom * 100 | number: '1.0-0' }}%</span>
+          <button type="button" (click)="zoomIn()" matTooltip="Zoom in">+</button>
+          @if (chequeZoom !== 1) {
+            <button type="button" (click)="resetZoom()" matTooltip="Reset zoom">⟲</button>
+          }
+        </div>
+        <div class="fullscreen-shelf">
+          @for (signer of requiredSigners; track $index) {
+            @if (signer.signatureUrl) {
+              <div
+                class="shelf-item"
+                [class.active]="signer.overlayVisible"
+                (mousedown)="onShelfItemMouseDown($event, signer)"
+                matTooltip="Drag onto the cheque"
+              >
+                <img [src]="signer.signatureUrl" alt="signature" draggable="false" />
+                <span>{{ signer.name }}</span>
+              </div>
+            }
+          }
+        </div>
+      }
+    </div>
+    @if (backImageUrl) {
+      <img
+        [src]="backImageUrl"
+        class="cheque-image"
+        alt="back"
+        matTooltip="Back — click to zoom"
+        (click)="openImageZoom('back')"
+      />
+    } @else {
+      <div class="no-image">No back image</div>
+    }
+  </div>
+
+  <h3 class="section-title">Instrument Details</h3>
+  <div class="info-grid">
+    @if (item.micrCode) {
+      <div>
+        <span class="k">MICR Code</span><span>{{ item.micrCode }}</span>
+      </div>
+    }
+    @if (item.ifsc) {
+      <div>
+        <span class="k">IFSC</span><span>{{ item.ifsc }}</span>
+      </div>
+    }
+    @if (item.instrumentDate) {
+      <div>
+        <span class="k">Instrument Date</span><span>{{ item.instrumentDate | dateFormat }}</span>
+      </div>
+    }
+    @if (item.amountInWords) {
+      <div>
+        <span class="k">Amount in Words</span><span>{{ item.amountInWords }}</span>
+      </div>
+    }
+    @if (item.drawerAccountNumberMasked) {
+      <div>
+        <span class="k">Drawer A/C (as on cheque)</span><span>{{ item.drawerAccountNumberMasked }}</span>
+      </div>
+    }
+    @if (item.draweeBankName) {
+      <div>
+        <span class="k">Drawee Bank</span><span>{{ item.draweeBankName }}</span>
+      </div>
+    }
+    @if (item.instrumentTypeDescription || item.instrumentType) {
+      <div>
+        <span class="k">Instrument Type</span><span>{{ item.instrumentTypeDescription || item.instrumentType }}</span>
+      </div>
+    }
+    @if (item.ctsReferenceNumber) {
+      <div>
+        <span class="k">CTS Reference</span><span>{{ item.ctsReferenceNumber }}</span>
+      </div>
+    }
+  </div>
+
+  <div class="section-header">
+    <h3 class="section-title">Automatic Validation</h3>
+    <button type="button" mat-stroked-button (click)="openValidationDetail()">Comparison Details</button>
+  </div>
+  @if (item.instrumentStopPaymentFlag) {
+    <div class="gate-warning">Stop payment was flagged on this instrument by the depositing bank.</div>
+  }
+  <div class="check-badges">
+    @for (rule of validationRules; track rule.key) {
+      <span class="pill" [ngClass]="ruleClass(rule)" [title]="rule.label">{{ rule.label }}</span>
+    }
+    @if (item.iqaStatus && item.iqaStatus !== 'NA') {
+      <span class="pill" [ngClass]="pillClass(item.iqaStatus)" matTooltip="Image Quality Assessment"
+        >IQA: {{ item.iqaStatus }}</span
+      >
+    }
+  </div>
+  @if (item.iqaDetail) {
+    <div class="muted">{{ item.iqaDetail }}</div>
+  }
+  @if (item.iqaSubChecks) {
+    <div class="muted">{{ item.iqaSubChecks }}</div>
+  }
+  @if (item.validationDetail) {
+    <div class="validation-detail muted">{{ item.validationDetail }}</div>
+  }
+
+  <h3 class="section-title">Signature Verification</h3>
+  @if (loadingAccountInfo) {
+    <div class="muted">Loading account signatories…</div>
+  } @else {
+    @if (accountInfo) {
+      <div class="mode-label muted">Mode of Operation: {{ modeOfOperationLabel }}</div>
+    }
+    @if (showManualOverride) {
+      <div class="signer-row">
+        <mat-checkbox [(ngModel)]="manualOverrideChecked">
+          Account/signatory details unavailable — I have manually verified this signature
+        </mat-checkbox>
+      </div>
+    } @else {
+      <div class="muted">
+        {{
+          signerSelectionMode === 'any'
+            ? 'Any one signatory below may sign — tick the one that matches.'
+            : 'Every mandatory signatory below must be individually confirmed.'
+        }}
+      </div>
+      @for (signer of requiredSigners; track $index) {
+        <div class="signer-row">
+          <div class="signer-signature">
+            @if (signer.loadingSignature) {
+              <div class="no-image small">Loading…</div>
+            } @else if (signer.signatureUrl) {
+              <img
+                [src]="signer.signatureUrl"
+                class="signature-image"
+                alt="signature"
+                matTooltip="Click to zoom"
+                (click)="openSignatureZoom(signer)"
+              />
+            } @else {
+              <div class="no-image small">No signature on file</div>
+            }
+          </div>
+          <div class="signer-info">
+            <div class="signer-name">
+              {{ signer.name }}
+              <span class="pill" [ngClass]="signer.mandatory ? 'bad' : 'neutral'">{{ signer.role }}</span>
+            </div>
+          </div>
+          <mat-checkbox [(ngModel)]="signer.checked">Signature Matches</mat-checkbox>
+        </div>
+      }
+    }
+  }
+
+  @if (isDecided) {
+    <h3 class="section-title">Decision</h3>
+    <div class="decided-summary" [ngClass]="pillClass(item.decision)">
+      <div class="decided-headline">
+        <span class="pill" [ngClass]="pillClass(item.decision)">{{ item.decision }}</span>
+        @if (item.decisionedOn) {
+          <span class="muted">on {{ item.decisionedOn | dateFormat }}</span>
+        }
+      </div>
+      @if (item.returnReasonCode) {
+        <div class="compare-row">
+          <span class="compare-label">Return Reason Code</span
+          ><span class="compare-value">{{ item.returnReasonCode }}</span>
+        </div>
+      }
+      @if (item.decisionReason) {
+        <div class="compare-row">
+          <span class="compare-label">Note</span><span class="compare-value">{{ item.decisionReason }}</span>
+        </div>
+      }
+      @if (item.settlementBatchId) {
+        <div class="compare-row">
+          <span class="compare-label">Settlement Batch</span
+          ><span class="compare-value">#{{ item.settlementBatchId }}</span>
+        </div>
+      } @else if (item.decision === 'PASS') {
+        <div class="compare-row">
+          <span class="compare-label">Settlement</span><span class="compare-value">Awaiting settlement</span>
+        </div>
+      }
+      <div class="muted">
+        This cheque has already been decided and cannot be decided again — this view is read-only.
+      </div>
+    </div>
+  } @else {
+    <div class="mode-toggle">
+      <button
+        mat-stroked-button
+        type="button"
+        [class.active]="mode === 'PASS'"
+        color="primary"
+        (click)="setMode('PASS')"
+      >
+        {{ 'labels.buttons.Pass' | translate }}
+      </button>
+      <button
+        mat-stroked-button
+        type="button"
+        [class.active]="mode === 'RETURN'"
+        color="warn"
+        (click)="setMode('RETURN')"
+      >
+        {{ 'labels.buttons.Return' | translate }}
+      </button>
+    </div>
+
+    @if (mode === 'PASS') {
+      <form [formGroup]="passForm">
+        @if (!signatureVerified) {
+          <div class="gate-warning">Signature verification required above before this cheque can be passed.</div>
+        }
+        <mat-form-field appearance="fill">
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
+          <input matInput formControlName="note" />
+        </mat-form-field>
+      </form>
+    } @else {
+      <form [formGroup]="returnForm">
+        <mat-form-field appearance="fill">
+          <mat-label>{{ 'labels.inputs.Return Reason Code' | translate }}</mat-label>
+          <mat-select formControlName="returnReasonCode" required>
+            @for (c of reasonCodes; track c.id) {
+              <mat-option [value]="c.code">{{ c.code }} — {{ c.description }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field appearance="fill">
+          <mat-label>{{ 'labels.inputs.Reason' | translate }}</mat-label>
+          <input matInput formControlName="reason" />
+        </mat-form-field>
+      </form>
+    }
+
+    <!-- Compliance / AML Action Triage -->
+    <div class="compliance-triage" style="margin-top: 16px; padding: 12px; background: #fff8f8; border: 1px dashed #f5c2c2; border-radius: 8px;">
+      <h4 style="margin: 0 0 8px; font-weight: 600; color: #b91c1c; display: flex; align-items: center; gap: 6px;">
+        Compliance & AML Triage
+      </h4>
+      <div style="display: flex; flex-direction: column; gap: 8px;">
+        <mat-checkbox [(ngModel)]="flagAsSuspicious" [ngModelOptions]="{standalone: true}">
+          Flag as suspicious (escalate to STR cases under RBI compliance)
+        </mat-checkbox>
+        <mat-checkbox [(ngModel)]="markAsWhitelisted" [ngModelOptions]="{standalone: true}">
+          Mark as whitelisted (prevent future AML alerts for this account)
+        </mat-checkbox>
+      </div>
+    </div>
+  }
+
+  <div #lightboxRoot style="display: none"></div>
+</div>
+
+<div mat-dialog-actions align="end">
+  <button mat-raised-button type="button" mat-dialog-close>
+    {{ (isDecided ? 'labels.buttons.Close' : 'labels.buttons.Cancel') | translate }}
+  </button>
+  @if (!isDecided) {
+    <button
+      mat-raised-button
+      [color]="mode === 'RETURN' ? 'warn' : 'primary'"
+      (click)="submit()"
+      [disabled]="busy || (mode === 'RETURN' ? returnForm.invalid : !signatureVerified)"
+    >
+      {{ (mode === 'PASS' ? 'labels.buttons.Pass' : 'labels.buttons.Return') | translate }}
+    </button>
+  }
+</div>

src/app/ctsclearing/inward-batch-detail/item-decision-dialog/item-decision-dialog.component.scss

@@ -0,0 +1,442 @@
+/**
+ * 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/.
+ */
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 10px 16px;
+  margin-bottom: 16px;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .k {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: rgb(0 0 0 / 50%);
+    margin-bottom: 2px;
+  }
+
+  .pill {
+    margin-left: 6px;
+    vertical-align: middle;
+  }
+}
+
+.mode-toggle {
+  display: flex;
+  gap: 8px;
+  margin: 16px 0 12px;
+
+  button.active {
+    background: rgb(25 118 210 / 12%);
+  }
+}
+
+.decided-summary {
+  padding: 14px 16px;
+  border-radius: 8px;
+  border-left: 4px solid rgb(0 0 0 / 30%);
+  background: rgb(0 0 0 / 4%);
+
+  &.ok {
+    border-left-color: #1a9c63;
+    background: #e8f8f0;
+  }
+
+  &.bad {
+    border-left-color: #d32f2f;
+    background: #fdeaea;
+  }
+}
+
+.decided-headline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.compare-row {
+  display: grid;
+  grid-template-columns: minmax(120px, 38%) 1fr;
+  gap: 6px 16px;
+  padding: 4px 0;
+  border-top: 1px solid rgb(255 255 255 / 60%);
+
+  &:first-of-type {
+    border-top: none;
+  }
+}
+
+.compare-label {
+  color: rgb(0 0 0 / 55%);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.compare-value {
+  font-size: 0.85rem;
+  word-break: break-word;
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+.section-title {
+  margin: 20px 0 8px;
+  font-size: 0.95rem;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+
+  .section-title {
+    margin: 20px 0 8px;
+  }
+}
+
+.muted {
+  color: rgb(0 0 0 / 50%);
+  font-size: 0.82rem;
+  margin-bottom: 8px;
+}
+
+.image-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.cheque-image {
+  max-width: 260px;
+  max-height: 140px;
+  object-fit: contain;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #fafafa;
+}
+
+// the overlay boxes are positioned absolute relative to THIS wrapper, not the (possibly flex-centered)
+// .cheque-stage — otherwise, once the stage centers the image via flexbox in fullscreen mode, the overlay's
+// left/top coordinates (measured from the stage's own top-left corner) land nowhere near the actual image
+.cheque-image-wrap {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
+  transform-origin: center center;
+}
+
+.cheque-stage {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
+
+  // fullscreen compare mode: the stage itself becomes a fixed, full-viewport backdrop so the cheque and
+  // every draggable signature overlay are shown as large as possible for a real side-by-side comparison
+  &.fullscreen-stage {
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    max-width: none;
+    overflow: auto;
+    background: rgb(0 0 0 / 92%);
+
+    .cheque-image {
+      width: auto;
+      max-width: 82vw;
+      max-height: 88vh;
+      cursor: zoom-in;
+    }
+  }
+
+  // matches the native fullscreen state directly (independent of Angular's class-binding timing), so the
+  // stage fills correctly the instant the browser promotes it to the top layer
+  &:fullscreen {
+    width: 100vw;
+    height: 100vh;
+    max-width: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(0 0 0 / 92%);
+  }
+}
+
+.fullscreen-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2010;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: rgb(255 255 255 / 15%);
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+
+  &:hover {
+    background: rgb(255 255 255 / 25%);
+  }
+}
+
+.fullscreen-zoom {
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2010;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  background: rgb(255 255 255 / 15%);
+  color: #fff;
+  font-size: 12px;
+
+  span {
+    min-width: 40px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  button {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    border: none;
+    background: rgb(255 255 255 / 15%);
+    color: #fff;
+    font-size: 14px;
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover {
+      background: rgb(255 255 255 / 25%);
+    }
+  }
+}
+
+.fullscreen-shelf {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 2010;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 88vh;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.shelf-item {
+  width: 150px;
+  padding: 4px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  text-align: center;
+
+  &.active {
+    border-color: #1976d2;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 54px;
+    object-fit: contain;
+  }
+
+  span {
+    display: block;
+    margin-top: 2px;
+    color: #333;
+    font-size: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.sig-overlay {
+  position: absolute;
+  // must beat the fullscreen shelf/close-button (z-index: 2010) — they share the same stacking context
+  // (the fullscreen-stage), so a low z-index here meant the overlay silently rendered BEHIND the shelf
+  // wherever the two visually overlapped, e.g. when dragging it toward the top-left where the shelf sits
+  z-index: 2020;
+  box-sizing: border-box;
+  border: 1px dashed rgb(25 118 210 / 70%);
+  background: rgb(255 255 255 / 40%);
+  cursor: move;
+  user-select: none;
+}
+
+.sig-overlay-handle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 1px 4px;
+  background: rgb(25 118 210 / 85%);
+  color: #fff;
+  font-size: 10px;
+  line-height: 1.6;
+  cursor: move;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sig-overlay-close {
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1;
+  padding: 0 2px;
+}
+
+.sig-overlay-img {
+  display: block;
+  width: 100%;
+  height: auto;
+  pointer-events: none;
+}
+
+.sig-overlay-resize {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 12px;
+  height: 12px;
+  cursor: nwse-resize;
+  background: repeating-linear-gradient(135deg, rgb(25 118 210 / 80%) 0 2px, transparent 2px 4px);
+}
+
+.sig-overlay-opacity {
+  width: 44px;
+  height: 10px;
+  margin: 0 4px;
+  cursor: pointer;
+}
+
+.no-image {
+  padding: 12px;
+  border: 1px dashed #ccc;
+  border-radius: 4px;
+  color: rgb(0 0 0 / 40%);
+  font-size: 0.82rem;
+
+  &.small {
+    padding: 6px 10px;
+    width: 120px;
+  }
+}
+
+.check-badges {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+
+.validation-detail {
+  margin-bottom: 8px;
+}
+
+.mode-label {
+  font-weight: 500;
+}
+
+.signer-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgb(0 0 0 / 6%);
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+}
+
+.signer-signature {
+  flex-shrink: 0;
+}
+
+.signature-image {
+  width: 140px;
+  height: 60px;
+  object-fit: contain;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #fafafa;
+}
+
+.signer-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.signer-name {
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.gate-warning {
+  color: #d32f2f;
+  font-size: 0.82rem;
+  margin-bottom: 8px;
+}
+
+.pill {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-weight: 600;
+  white-space: nowrap;
+
+  &.ok {
+    background: #dff5e8;
+    color: #28c07a;
+  }
+
+  &.bad {
+    background: #fde3e3;
+    color: #d32f2f;
+  }
+
+  &.neutral {
+    background: #e0e0e0;
+    color: #757575;
+  }
+}

src/app/ctsclearing/inward-batch-detail/item-decision-dialog/item-decision-dialog.component.ts

@@ -0,0 +1,775 @@
+/**
+ * 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, HostListener, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { FormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import lightGallery from 'lightgallery';
+import lgZoom from 'lightgallery/plugins/zoom';
+import lgFullscreen from 'lightgallery/plugins/fullscreen';
+import type { LightGallery } from 'lightgallery/lightgallery';
+import type { GalleryItem } from 'lightgallery/lg-utils';
+
+/** Custom Services */
+import { CtsClearingService } from '../../ctsclearing.service';
+import { ClearingService } from '../../../clearing-network/clearing.service';
+import { SignatoryService, AccountSignatoryInfo, JointHolder } from '../../../clearing-network/signatory.service';
+import { clearingError, pillClass } from '../../../clearing-network/clearing-status';
+import { ValidationDetailDialogComponent } from './validation-detail-dialog/validation-detail-dialog.component';
+
+interface RequiredSigner {
+  clientId: number;
+  name: string;
+  role: string;
+  mandatory: boolean;
+  isPrimary: boolean;
+  signatureUrl: string | null;
+  loadingSignature: boolean;
+  checked: boolean;
+  /** Draggable/resizable overlay state — lets the clerk place the stored signature directly over the
+   *  cheque's own signature area for a close visual comparison, at whatever size suits the cheque image. */
+  overlayVisible: boolean;
+  overlayX: number;
+  overlayY: number;
+  overlayWidth: number;
+  overlayOpacity: number;
+}
+
+const OVERLAY_MIN_WIDTH = 60;
+const OVERLAY_MAX_WIDTH = 420;
+const OVERLAY_DEFAULT_WIDTH = 160;
+
+/**
+ * Single-panel cheque verification for the clerk: the cheque image, every automatic validation result the
+ * backend already computes, the account's mode of operation and mandatory signatories (with their stored
+ * signature images to visually compare against the cheque), and finally the PASS/RETURN decision. PASS is
+ * blocked until the applicable signature rule is satisfied — see {@link signatureVerified}.
+ */
+@Component({
+  selector: 'mifosx-item-decision-dialog',
+  templateUrl: './item-decision-dialog.component.html',
+  styleUrls: ['./item-decision-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FormsModule,
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatTooltipModule
+  ]
+})
+export class ItemDecisionDialogComponent implements OnInit, OnDestroy {
+  dialogRef = inject<MatDialogRef<ItemDecisionDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
+  private formBuilder = inject(UntypedFormBuilder);
+  private ctsService = inject(CtsClearingService);
+  private clearingService = inject(ClearingService);
+  private signatoryService = inject(SignatoryService);
+  private snackBar = inject(MatSnackBar);
+  private dialog = inject(MatDialog);
+
+  @ViewChild('lightboxRoot', { static: true }) lightboxRoot: ElementRef<HTMLElement>;
+  @ViewChild('chequeStage') chequeStageEl?: ElementRef<HTMLElement>;
+  @ViewChild('chequeImageWrap') chequeImageWrapEl?: ElementRef<HTMLElement>;
+  private lightboxInstance: LightGallery | null = null;
+  private readonly lightboxPlugins = [
+    lgZoom,
+    lgFullscreen
+  ];
+
+  private notify(message: string, isError = false): void {
+    this.snackBar.open(message, 'Dismiss', { duration: isError ? 6000 : 3000 });
+  }
+
+  item: any = this.data?.item || {};
+  mode: 'PASS' | 'RETURN' = 'PASS';
+  busy = false;
+  reasonCodes: any[] = [];
+
+  /** Fullscreen compare mode: the cheque takes over the whole viewport with a shelf of every mandatory
+   *  signer's stored signature down the side, so any one of them can be dragged onto the cheque at a big,
+   *  workable size instead of squinting at a small inline image. */
+  fullscreenActive = false;
+
+  /** Zoom level applied to the cheque image itself while fullscreen — the clerk needs to zoom into fine
+   *  detail (MICR line, ink texture) independent of dragging a signature overlay around. */
+  chequeZoom = 1;
+  private static readonly ZOOM_MIN = 1;
+  private static readonly ZOOM_MAX = 4;
+  private static readonly ZOOM_STEP = 0.25;
+
+  frontImageUrl: string | null = null;
+  backImageUrl: string | null = null;
+
+  loadingAccountInfo = false;
+  accountInfo: AccountSignatoryInfo | null = null;
+  requiredSigners: RequiredSigner[] = [];
+  /** 'any' = mode of operation lets any one signer sign (Either/Anyone or Survivor); 'all' = every mandatory signer must sign. */
+  signerSelectionMode: 'any' | 'all' = 'any';
+  manualOverrideChecked = false;
+  flagAsSuspicious = false;
+  markAsWhitelisted = false;
+
+  handleComplianceActions(): void {
+    if (this.flagAsSuspicious) {
+      const existingStrData = localStorage.getItem('fiu_str_cases');
+      let cases: any[] = [];
+      if (existingStrData) {
+        try {
+          cases = JSON.parse(existingStrData);
+        } catch (e) {
+          cases = [];
+        }
+      }
+      
+      const newRef = 101 + cases.length;
+      const newCase: any = {
+        reportType: 'STR',
+        reportRefNo: newRef,
+        branchCode: this.item.presentingBranchCode || '1',
+        accountNumber: this.item.accountNo || this.item.accountId || '110001101000838',
+        txnBranchCode: this.item.presentingBranchCode || '1',
+        depositOrWithdrawal: 'Withdrawal',
+        txnId: this.item.id,
+        txnDate: new Date().toLocaleDateString('en-GB').replace(/\//g, '-'),
+        txnTime: new Date().toLocaleTimeString('en-US', { hour12: false }),
+        txnAmount: this.item.amount,
+        instrumentType: 'Cheque',
+        instrumentId: this.item.chequeNumber,
+        nonCustomerRef: '',
+        relationshipFlag: 'Customer',
+        thirdPartyPan: '',
+        declaration: 'NA',
+        customerName: this.item.clientName || 'UNKNOWN CLIENT',
+        detectedOn: new Date().toLocaleDateString('en-GB').replace(/\//g, '-'),
+        flaggedBy: 'CTS Clearing Officer',
+        riskCategory: 'unusual-pattern',
+        narrative: `CTS Cheque #${this.item.chequeNumber} for amount ₹${this.item.amount} flagged as suspicious by Clearing Officer during inward presentment review. Action: ${this.mode}. Reason/Notes: ${this.mode === 'RETURN' ? this.returnForm.value.reason : this.passForm.value.note || 'Manual compliance escalation'}`,
+        status: 'po-review'
+      };
+      
+      cases.unshift(newCase);
+      localStorage.setItem('fiu_str_cases', JSON.stringify(cases));
+      
+      const storedCtr = localStorage.getItem('fiu_ctr_txns');
+      if (storedCtr) {
+        try {
+          const ctrList = JSON.parse(storedCtr);
+          const matching = ctrList.find((t: any) => t.accountNumber === newCase.accountNumber);
+          if (matching) {
+            matching.complianceStatus = 'SUSPICIOUS';
+            localStorage.setItem('fiu_ctr_txns', JSON.stringify(ctrList));
+          }
+        } catch (e) {}
+      }
+    } else if (this.markAsWhitelisted) {
+      const existingWhitelist = localStorage.getItem('compliance_whitelisted_accounts');
+      let whitelisted: string[] = [];
+      if (existingWhitelist) {
+        try {
+          whitelisted = JSON.parse(existingWhitelist);
+        } catch (e) {
+          whitelisted = [];
+        }
+      }
+      const account = this.item.accountNo || this.item.accountId;
+      if (account && !whitelisted.includes(account.toString())) {
+        whitelisted.push(account.toString());
+        localStorage.setItem('compliance_whitelisted_accounts', JSON.stringify(whitelisted));
+      }
+      
+      const storedCtr = localStorage.getItem('fiu_ctr_txns');
+      if (storedCtr) {
+        try {
+          const ctrList = JSON.parse(storedCtr);
+          const matching = ctrList.find((t: any) => t.accountNumber === (account ? account.toString() : ''));
+          if (matching) {
+            matching.complianceStatus = 'WHITELISTED';
+            localStorage.setItem('fiu_ctr_txns', JSON.stringify(ctrList));
+          }
+        } catch (e) {}
+      }
+    }
+  }
+
+  /** Every automatic validation rule InwardClearingValidationService already computes, shown so the clerk sees WHY, not just a decision. */
+  readonly validationRules: { key: string; label: string; goodWhenTrue: boolean }[] = [
+    { key: 'accountCheckPassed', label: 'Account', goodWhenTrue: true },
+    { key: 'balanceCheckPassed', label: 'Balance', goodWhenTrue: true },
+    { key: 'duplicateCheckPassed', label: 'Duplicate', goodWhenTrue: true },
+    { key: 'stopPaymentCheckPassed', label: 'Stop Payment', goodWhenTrue: true },
+    { key: 'amountWordsFiguresMatch', label: 'Amount Match', goodWhenTrue: true },
+    { key: 'staleOrPostdated', label: 'Stale / Postdated', goodWhenTrue: false },
+    { key: 'positivePayCheck', label: 'Positive Pay', goodWhenTrue: true }
+  ];
+
+  passForm: UntypedFormGroup;
+  returnForm: UntypedFormGroup;
+
+  constructor() {
+    this.passForm = this.formBuilder.group({
+      note: ['']
+    });
+    this.returnForm = this.formBuilder.group({
+      returnReasonCode: [
+        '',
+        Validators.required
+      ],
+      reason: ['']
+    });
+  }
+
+  ngOnInit(): void {
+    this.clearingService.getReturnReasonCodes('CTS').subscribe((res: any) => {
+      const list = res?.pageItems ?? (Array.isArray(res) ? res : []);
+      this.reasonCodes = list.filter((c: any) => c.active !== false);
+    });
+    this.loadImages();
+    this.loadAccountInfo();
+  }
+
+  ngOnDestroy(): void {
+    this.destroyLightbox();
+  }
+
+  /** Shared status-string -> pill-color mapping, same one the batch list table already uses for iqaStatus/decision. */
+  pillClass = pillClass;
+
+  /** ok / bad / neutral for a single boolean validation rule, respecting whether true is the good outcome. */
+  ruleClass(rule: { key: string; goodWhenTrue: boolean }): 'ok' | 'bad' | 'neutral' {
+    const value = this.item?.[rule.key];
+    if (value === null || value === undefined) {
+      return 'neutral';
+    }
+    const good = rule.goodWhenTrue ? value === true : value === false;
+    return good ? 'ok' : 'bad';
+  }
+
+  /** item.decision is NEVER null — InwardClearingItem.java sets it to the literal string "PENDING" at creation,
+   *  then "PASS"/"RETURN" once decided. A plain truthy check on it is always true, which silently made this
+   *  dialog show the read-only decision summary (and hide the Pass/Return form) for every item, including ones
+   *  still genuinely PENDING. */
+  get isDecided(): boolean {
+    return this.item?.decision === 'PASS' || this.item?.decision === 'RETURN';
+  }
+
+  /** What each automatic rule actually compared (amount vs words, instrument date vs the valid-until window,
+   *  balance vs amount, etc.) instead of just the pass/fail pill — opened on demand, not always-on clutter. */
+  openValidationDetail(): void {
+    this.dialog.open(ValidationDetailDialogComponent, {
+      data: { item: this.item, accountInfo: this.accountInfo },
+      width: '560px',
+      maxWidth: '95vw',
+      maxHeight: '85vh'
+    });
+  }
+
+  private loadImages(): void {
+    this.ctsService.getInwardItemImage(this.item.id, 'front').subscribe({
+      next: (url: string) => (this.frontImageUrl = url),
+      error: () => {
+        /* no image uploaded for this side yet */
+      }
+    });
+    this.ctsService.getInwardItemImage(this.item.id, 'back').subscribe({
+      next: (url: string) => (this.backImageUrl = url),
+      error: () => {
+        /* no image uploaded for this side yet */
+      }
+    });
+  }
+
+  /** Opens the front/back cheque image in a zoomable, pannable lightbox — same lightgallery setup used app-wide. */
+  openImageZoom(side: 'front' | 'back'): void {
+    const url = side === 'front' ? this.frontImageUrl : this.backImageUrl;
+    if (!url) {
+      return;
+    }
+    this.destroyLightbox();
+    const items: GalleryItem[] = [
+      { src: url, thumb: url, subHtml: `<div class="lg-caption"><h4>Cheque ${side}</h4></div>` }];
+    this.lightboxInstance = lightGallery(this.lightboxRoot.nativeElement, {
+      dynamic: true,
+      dynamicEl: items,
+      plugins: this.lightboxPlugins,
+      download: false,
+      closable: true,
+      escKey: true,
+      zoomFromOrigin: true
+    });
+    this.lightboxInstance.openGallery(0);
+  }
+
+  /** Opens a signer's stored signature image in the same zoomable lightbox, for a closer visual comparison. */
+  openSignatureZoom(signer: RequiredSigner): void {
+    if (!signer.signatureUrl) {
+      return;
+    }
+    this.destroyLightbox();
+    const items: GalleryItem[] = [
+      {
+        src: signer.signatureUrl,
+        thumb: signer.signatureUrl,
+        subHtml: `<div class="lg-caption"><h4>${signer.name} — stored signature</h4></div>`
+      }
+    ];
+    this.lightboxInstance = lightGallery(this.lightboxRoot.nativeElement, {
+      dynamic: true,
+      dynamicEl: items,
+      plugins: this.lightboxPlugins,
+      download: false,
+      closable: true,
+      escKey: true,
+      zoomFromOrigin: true
+    });
+    this.lightboxInstance.openGallery(0);
+  }
+
+  private destroyLightbox(): void {
+    if (this.lightboxInstance) {
+      this.lightboxInstance.destroy();
+      this.lightboxInstance = null;
+    }
+  }
+
+  private loadAccountInfo(): void {
+    if (!this.item.accountType || !this.item.accountId) {
+      return;
+    }
+    this.loadingAccountInfo = true;
+    this.signatoryService.fetchAccountSignatories(this.item.accountType, this.item.accountId).subscribe({
+      next: (info: AccountSignatoryInfo) => {
+        this.accountInfo = info;
+        this.buildRequiredSigners(info);
+        this.loadingAccountInfo = false;
+      },
+      error: () => {
+        this.loadingAccountInfo = false;
+      }
+    });
+  }
+
+  /**
+   * The required-signer list, built from the account's already-captured mode of operation and each joint
+   * holder's mandatory flag: Either/Anyone-or-Survivor needs any ONE signer; anything else (Jointly, Former
+   * or Survivor) needs every mandatory signer individually checked.
+   */
+  private buildRequiredSigners(info: AccountSignatoryInfo): void {
+    const anyMode =
+      !info.modeOfOperation ||
+      info.modeOfOperation === 'EITHER_OR_SURVIVOR' ||
+      info.modeOfOperation === 'ANYONE_OR_SURVIVOR';
+    this.signerSelectionMode = anyMode ? 'any' : 'all';
+
+    const jointHolders = info.jointHolders || [];
+    // for a joint account the primary holder is already one of the joint-holder rows (isPrimary: true) —
+    // only fall back to the account-level clientId/name when no joint-holder rows exist at all (plain
+    // individual account), otherwise the primary would be added twice
+    const primaryAlreadyListed = jointHolders.some((h) => h.isPrimary);
+    // mandatory-ness is recorded two ways depending on how the account was set up: the isMandatory boolean
+    // column, or the signingAuthority text (the field the existing cashier joint-holder view keys off) —
+    // trust either signal rather than assuming both were populated consistently
+    const holderIsMandatory = (h: JointHolder): boolean =>
+      !!h.isMandatory || (h.signingAuthority ?? '').toLowerCase() === 'mandatory';
+
+    const signers: RequiredSigner[] = [];
+    if (!primaryAlreadyListed && info.primaryClientId) {
+      signers.push({
+        clientId: info.primaryClientId,
+        name: info.primaryName || 'Primary Holder',
+        role: 'Primary Holder',
+        mandatory: true,
+        isPrimary: true,
+        signatureUrl: null,
+        loadingSignature: true,
+        checked: false,
+        ...this.defaultOverlayPosition(signers.length)
+      });
+    }
+    jointHolders
+      .filter((h) => (this.signerSelectionMode === 'all' ? holderIsMandatory(h) : true))
+      .forEach((h) => {
+        signers.push({
+          clientId: h.clientId,
+          name: h.displayName,
+          role: h.role || (holderIsMandatory(h) ? 'Mandatory' : 'Optional'),
+          mandatory: holderIsMandatory(h),
+          isPrimary: !!h.isPrimary,
+          signatureUrl: null,
+          loadingSignature: true,
+          checked: false,
+          ...this.defaultOverlayPosition(signers.length)
+        });
+      });
+    this.requiredSigners = signers;
+    signers.forEach((s) => {
+      this.signatoryService.fetchClientSignature(s.clientId).subscribe({
+        next: (url: string | null) => {
+          s.signatureUrl = url;
+          s.loadingSignature = false;
+        },
+        error: () => {
+          s.loadingSignature = false;
+        }
+      });
+    });
+  }
+
+  /** Staggers each signer's initial overlay position so several stacked on the same cheque don't start exactly on top of each other. */
+  private defaultOverlayPosition(index: number): {
+    overlayVisible: boolean;
+    overlayX: number;
+    overlayY: number;
+    overlayWidth: number;
+    overlayOpacity: number;
+  } {
+    return {
+      overlayVisible: false,
+      overlayX: 12 + index * 28,
+      overlayY: 12 + index * 28,
+      overlayWidth: OVERLAY_DEFAULT_WIDTH,
+      overlayOpacity: 0.75
+    };
+  }
+
+  toggleOverlay(signer: RequiredSigner): void {
+    signer.overlayVisible = !signer.overlayVisible;
+  }
+
+  private dragState: {
+    signer: RequiredSigner;
+    startClientX: number;
+    startClientY: number;
+    startX: number;
+    startY: number;
+    elWidth: number;
+    elHeight: number;
+  } | null = null;
+  private resizeState: { signer: RequiredSigner; startClientX: number; startWidth: number } | null = null;
+
+  /** Drag begins anywhere on the overlay box (header, image, or body). Captures the overlay's own rendered
+   *  size so the move handler below can keep it from being dragged off the cheque entirely. */
+  startOverlayDrag(event: MouseEvent, signer: RequiredSigner): void {
+    event.preventDefault();
+    event.stopPropagation();
+    const rect = (event.currentTarget as HTMLElement)?.getBoundingClientRect();
+    this.dragState = {
+      signer,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startX: signer.overlayX,
+      startY: signer.overlayY,
+      elWidth: rect?.width ?? signer.overlayWidth,
+      elHeight: rect?.height ?? 80
+    };
+  }
+
+  startOverlayResize(event: MouseEvent, signer: RequiredSigner): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.resizeState = { signer, startClientX: event.clientX, startWidth: signer.overlayWidth };
+  }
+
+  /**
+   * The overlay's left/top are CSS-relative to .cheque-image-wrap (its positioned ancestor), but the clerk
+   * should be able to drag it above/left/right/below the cheque image too — not just within its own
+   * rectangle — so the true bound is the full fullscreen stage, not the (smaller) image. This converts the
+   * wrap-relative coordinate into the stage's frame, clamps against the stage's actual size, then converts
+   * back — allowing free placement anywhere on screen while still keeping it reachable/visible.
+   */
+  private clampToStage(value: number, elSize: number, wrapOffset: number, stageSize: number | undefined): number {
+    if (stageSize === undefined) {
+      return value;
+    }
+    const min = -wrapOffset;
+    const max = stageSize - wrapOffset - elSize;
+    return Math.min(Math.max(max, min), Math.max(min, value));
+  }
+
+  @HostListener('document:mousemove', ['$event'])
+  onDocumentMouseMove(event: MouseEvent): void {
+    if (this.dragState) {
+      const signer = this.dragState.signer;
+      const wrapRect = this.chequeImageWrapEl?.nativeElement.getBoundingClientRect();
+      const stageRect = this.chequeStageEl?.nativeElement.getBoundingClientRect();
+      const offsetX = wrapRect && stageRect ? wrapRect.left - stageRect.left : 0;
+      const offsetY = wrapRect && stageRect ? wrapRect.top - stageRect.top : 0;
+      const rawX = this.dragState.startX + (event.clientX - this.dragState.startClientX);
+      const rawY = this.dragState.startY + (event.clientY - this.dragState.startClientY);
+      signer.overlayX = this.clampToStage(rawX, this.dragState.elWidth, offsetX, stageRect?.width);
+      signer.overlayY = this.clampToStage(rawY, this.dragState.elHeight, offsetY, stageRect?.height);
+    } else if (this.resizeState) {
+      const signer = this.resizeState.signer;
+      signer.overlayWidth = Math.min(
+        OVERLAY_MAX_WIDTH,
+        Math.max(OVERLAY_MIN_WIDTH, this.resizeState.startWidth + (event.clientX - this.resizeState.startClientX))
+      );
+    }
+  }
+
+  @HostListener('document:mouseup')
+  onDocumentMouseUp(): void {
+    this.dragState = null;
+    this.resizeState = null;
+  }
+
+  /**
+   * Uses the real browser Fullscreen API (not just a CSS position:fixed simulation) — a CSS-only "fullscreen"
+   * div nested inside the Material dialog's animated container can end up sized/positioned relative to that
+   * ancestor instead of the true viewport (the dialog applies a CSS transform for its open/close animation,
+   * which becomes the containing block for any position:fixed descendant). Element.requestFullscreen() instead
+   * promotes the stage to the browser's top layer, fully independent of any ancestor transform.
+   */
+  toggleFullscreen(): void {
+    if (this.fullscreenActive) {
+      this.exitFullscreen();
+      return;
+    }
+    const el = this.chequeStageEl?.nativeElement;
+    if (el?.requestFullscreen) {
+      el.requestFullscreen().catch(() => this.enterFallbackFullscreen());
+    } else {
+      this.enterFallbackFullscreen();
+    }
+  }
+
+  private enterFallbackFullscreen(): void {
+    this.fullscreenActive = true;
+    this.resetOverlaysForFullscreenEntry();
+    this.chequeZoom = 1;
+  }
+
+  private exitFullscreen(): void {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      this.fullscreenActive = false;
+      this.chequeZoom = 1;
+    }
+  }
+
+  /** Keeps fullscreenActive in sync with real browser fullscreen state, including when the user exits via Esc
+   *  or the browser's own controls rather than our close button. */
+  @HostListener('document:fullscreenchange')
+  onFullscreenChange(): void {
+    const isNativeFullscreen = document.fullscreenElement === this.chequeStageEl?.nativeElement;
+    if (isNativeFullscreen) {
+      this.fullscreenActive = true;
+      this.resetOverlaysForFullscreenEntry();
+      this.chequeZoom = 1;
+    } else if (this.fullscreenActive) {
+      this.fullscreenActive = false;
+      this.chequeZoom = 1;
+    }
+  }
+
+  /** Ctrl/pinch-free scroll-to-zoom on the cheque itself — independent of dragging a signature overlay. */
+  onChequeWheel(event: WheelEvent): void {
+    if (!this.fullscreenActive) {
+      return;
+    }
+    event.preventDefault();
+    const delta = event.deltaY > 0 ? -ItemDecisionDialogComponent.ZOOM_STEP : ItemDecisionDialogComponent.ZOOM_STEP;
+    this.chequeZoom = Math.min(
+      ItemDecisionDialogComponent.ZOOM_MAX,
+      Math.max(ItemDecisionDialogComponent.ZOOM_MIN, Math.round((this.chequeZoom + delta) * 100) / 100)
+    );
+  }
+
+  zoomIn(): void {
+    this.chequeZoom = Math.min(
+      ItemDecisionDialogComponent.ZOOM_MAX,
+      this.chequeZoom + ItemDecisionDialogComponent.ZOOM_STEP
+    );
+  }
+
+  zoomOut(): void {
+    this.chequeZoom = Math.max(
+      ItemDecisionDialogComponent.ZOOM_MIN,
+      this.chequeZoom - ItemDecisionDialogComponent.ZOOM_STEP
+    );
+  }
+
+  resetZoom(): void {
+    this.chequeZoom = 1;
+  }
+
+  /** Escape only needs handling here for the CSS-fallback path — native fullscreen already exits itself on
+   *  Escape and reports back through fullscreenchange above. */
+  @HostListener('document:keydown.escape')
+  onEscapeKey(): void {
+    if (this.fullscreenActive && !document.fullscreenElement) {
+      this.fullscreenActive = false;
+    }
+  }
+
+  /** Fullscreen always starts with nothing placed on the cheque — only the shelf of stored signatures on the
+   *  side. A signature only appears on the cheque once it's actually dragged there from the shelf. */
+  private resetOverlaysForFullscreenEntry(): void {
+    this.requiredSigners.forEach((s) => {
+      s.overlayVisible = false;
+    });
+  }
+
+  /**
+   * Starting to drag a shelf thumbnail places that signature onto the cheque, right under the cursor, and
+   * immediately continues the same drag so it follows the mouse into position in one motion — rather than a
+   * separate "add" click followed by a second drag. Clicking an already-placed shelf item (no drag) just
+   * removes it instead, since there's nothing left to place.
+   */
+  onShelfItemMouseDown(event: MouseEvent, signer: RequiredSigner): void {
+    if (signer.overlayVisible) {
+      this.toggleOverlay(signer);
+      return;
+    }
+    event.preventDefault();
+    const wrapRect = this.chequeImageWrapEl?.nativeElement.getBoundingClientRect();
+    const stageRect = this.chequeStageEl?.nativeElement.getBoundingClientRect();
+    const offsetX = wrapRect && stageRect ? wrapRect.left - stageRect.left : 0;
+    const offsetY = wrapRect && stageRect ? wrapRect.top - stageRect.top : 0;
+    // the overlay doesn't exist in the DOM yet at this point (overlayVisible is only just being set below),
+    // so its rendered size can't be measured — a signature image's own aspect ratio plus the header bar height
+    // gives a reasonable estimate for keeping the initial drop clamped to the stage like every drag after it
+    const estimatedHeight = Math.round(signer.overlayWidth / 2.5) + 20;
+    const x = wrapRect ? event.clientX - wrapRect.left - signer.overlayWidth / 2 : 0;
+    const y = wrapRect ? event.clientY - wrapRect.top - 14 : 0;
+    signer.overlayVisible = true;
+    signer.overlayX = this.clampToStage(x, signer.overlayWidth, offsetX, stageRect?.width);
+    signer.overlayY = this.clampToStage(y, estimatedHeight, offsetY, stageRect?.height);
+    this.dragState = {
+      signer,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startX: signer.overlayX,
+      startY: signer.overlayY,
+      elWidth: signer.overlayWidth,
+      elHeight: estimatedHeight
+    };
+  }
+
+  /** null when the account's balance couldn't be resolved at all — the automatic "Balance" check pill already
+   *  covers that outcome, this just makes the actual sufficiency legible at a glance rather than requiring
+   *  the clerk to mentally subtract Available Balance minus Amount themselves. */
+  get balanceSufficient(): boolean | null {
+    const available = this.accountInfo?.availableBalance;
+    if (
+      available === null ||
+      available === undefined ||
+      this.item?.amount === null ||
+      this.item?.amount === undefined
+    ) {
+      return null;
+    }
+    return available >= this.item.amount;
+  }
+
+  get modeOfOperationLabel(): string {
+    const labels: { [key: string]: string } = {
+      EITHER_OR_SURVIVOR: 'Either or Survivor — any one signatory',
+      ANYONE_OR_SURVIVOR: 'Anyone or Survivor — any one signatory',
+      FORMER_OR_SURVIVOR: 'Former or Survivor — the mandatory signatory',
+      JOINTLY: 'Jointly — all mandatory signatories'
+    };
+    const mode = this.accountInfo?.modeOfOperation;
+    return (mode && labels[mode]) || mode || 'Not captured on the account';
+  }
+
+  /** True once account/signatory data couldn't be resolved at all — falls back to a manual override rather than a dead end. */
+  get showManualOverride(): boolean {
+    return !this.loadingAccountInfo && (!this.accountInfo || this.requiredSigners.length === 0);
+  }
+
+  get signatureVerified(): boolean {
+    if (this.showManualOverride) {
+      return this.manualOverrideChecked;
+    }
+    if (!this.requiredSigners.length) {
+      return false;
+    }
+    if (this.signerSelectionMode === 'any') {
+      return this.requiredSigners.some((s) => s.checked);
+    }
+    return this.requiredSigners.every((s) => s.checked);
+  }
+
+  setMode(mode: 'PASS' | 'RETURN'): void {
+    this.mode = mode;
+  }
+
+  submit(): void {
+    if (this.busy) {
+      return;
+    }
+    if (this.mode === 'PASS') {
+      if (!this.signatureVerified) {
+        this.notify('Confirm the required signature(s) before passing this cheque', true);
+        return;
+      }
+      this.busy = true;
+      this.ctsService.verifyInwardItemSignature(this.item.id, true).subscribe({
+        next: () => {
+          const payload = { note: this.passForm.value.note || undefined, locale: 'en' };
+          this.ctsService.passInwardItem(this.item.id, payload).subscribe({
+            next: () => {
+              this.busy = false;
+              this.handleComplianceActions();
+              this.notify('Cheque passed');
+              this.dialogRef.close({ actioned: true });
+            },
+            error: (err: any) => {
+              this.busy = false;
+              this.notify(clearingError(err, 'Could not pass the cheque'), true);
+            }
+          });
+        },
+        error: (err: any) => {
+          this.busy = false;
+          this.notify(clearingError(err, 'Could not record signature verification'), true);
+        }
+      });
+    } else {
+      if (this.returnForm.invalid) {
+        return;
+      }
+      this.busy = true;
+      const raw = this.returnForm.value;
+      const payload = { returnReasonCode: raw.returnReasonCode, reason: raw.reason || undefined, locale: 'en' };
+      this.ctsService.returnInwardItem(this.item.id, payload).subscribe({
+        next: () => {
+          this.busy = false;
+          this.handleComplianceActions();
+          this.notify('Cheque returned');
+          this.dialogRef.close({ actioned: true });
+        },
+        error: (err: any) => {
+          this.busy = false;
+          this.notify(clearingError(err, 'Could not return the cheque'), true);
+        }
+      });
+    }
+  }
+}