Merge branch 'dev-latest' of https://git.lincpay.tech/CBSNexora/cbsnexora into dev-latest

feat: recurring deposit enhancements, dashboard, chart, and account view updates
2026-10-12 10:23:26 +05:30 · 2026-10-12 10:23:10 +05:30 · 2026-10-07 10:19:26 +05:30 · 2026-10-07 10:13:37 +05:30 · 2026-10-07 10:13:28 +05:30 · 2026-10-06 22:36:15 +05:30
457 changed files with 50931 additions and 9422 deletions
@@ -1,3 +1,4 @@
+# syntax=docker/dockerfile:1
 ###############
 ### STAGE 1: Build app
 ###############
@@ -9,10 +10,13 @@ ARG NPM_REGISTRY_URL=https://registry.npmjs.org/
 ARG BUILD_ENVIRONMENT_OPTIONS="--configuration production"
 ARG PUPPETEER_DOWNLOAD_HOST_ARG=https://storage.googleapis.com
 ARG PUPPETEER_CHROMIUM_REVISION_ARG=1011831
-ARG PUPPETEER_SKIP_DOWNLOAD_ARG
+# Build ko Chromium nahi chahiye — skip (warna npm ci Chromium download par atak jata hai).
+ARG PUPPETEER_SKIP_DOWNLOAD_ARG=true

 # Set the environment variable to increase Node.js memory limit
-ENV NODE_OPTIONS="--max-old-space-size=4096"
+# (Mifos web-app ka production build memory-heavy hai; upstream build:prod
+#  16384 use karta hai. 4096 par 'ng build' OOM ho jata hai.)
+ENV NODE_OPTIONS="--max-old-space-size=8192"

 RUN apk add --no-cache git

@@ -25,14 +29,22 @@ ENV PUPPETEER_DOWNLOAD_HOST=$PUPPETEER_DOWNLOAD_HOST_ARG
 ENV PUPPETEER_CHROMIUM_REVISION=$PUPPETEER_CHROMIUM_REVISION_ARG
 ENV PUPPETEER_SKIP_DOWNLOAD=$PUPPETEER_SKIP_DOWNLOAD_ARG

+# Test/e2e tooling ke bhaari binary downloads skip karo — build inhe use nahi
+# karta, aur inke bina npm ci turant complete ho jata hai.
+#   Cypress   -> ~250MB binary (CI me sabse zyada atakta hai)
+#   Playwright-> browser binaries
+ENV CYPRESS_INSTALL_BINARY=0
+ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
+
 COPY ./ /usr/src/app/

-RUN npm cache clear --force
+RUN npm config set fetch-retry-maxtimeout 120000 \
+ && npm config set registry $NPM_REGISTRY_URL --location=global

-RUN npm config set fetch-retry-maxtimeout 120000
-RUN npm config set registry $NPM_REGISTRY_URL --location=global
-
-RUN npm ci
+# BuildKit cache mount: npm ka download cache builds ke beech persist hota hai,
+# isliye har build par saare packages dobara download nahi hote (bahut fast).
+# 'npm cache clear --force' hata diya — wo har build par cache wipe kar deta tha.
+RUN --mount=type=cache,target=/root/.npm npm ci --no-audit --no-fund

 RUN sh -c "ng build --output-path=/dist $BUILD_ENVIRONMENT_OPTIONS"

@@ -41,6 +53,14 @@ RUN sh -c "ng build --output-path=/dist $BUILD_ENVIRONMENT_OPTIONS"
 ###############
 FROM $NGINX_IMAGE

+# envsubst (gettext) alpine-slim me nahi hota — runtime env.js generation ke
+# liye zaroori hai, isliye explicitly install kar rahe hain.
+RUN apk add --no-cache gettext
+
+# Static-only nginx config (SPA fallback, no API proxy). Stock default.conf
+# ko replace karta hai taaki deep-link refresh par 404 na aaye.
+COPY nginx.spa.conf /etc/nginx/conf.d/default.conf
+
 COPY --from=builder /dist/browser /usr/share/nginx/html

 EXPOSE 80
@@ -0,0 +1,45 @@
+# Static-only nginx config for the CBSNexora Angular UI.
+# NOTE: No API reverse-proxy here by design — the browser calls the Fineract
+# backend directly via FINERACT_API_URL (env.js). nginx sirf static files
+# serve karta hai + Angular SPA routing handle karta hai.
+
+server {
+    listen       80;
+    server_name  _;
+
+    root   /usr/share/nginx/html;
+    index  index.html;
+
+    # ---- Compression ----
+    gzip              on;
+    gzip_comp_level   6;
+    gzip_min_length   1024;
+    gzip_proxied      any;
+    gzip_types        text/plain text/css application/javascript application/json
+                      application/xml image/svg+xml font/woff font/woff2;
+
+    # ---- Runtime env: env.js aur index.html kabhi cache na ho ----
+    # (env.js har container start par envsubst se regenerate hoti hai;
+    #  index.html hashed asset filenames point karti hai)
+    location = /assets/env.js {
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+        expires -1;
+    }
+
+    location = /index.html {
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+        expires -1;
+    }
+
+    # ---- Hashed static assets: lambe time cache ----
+    location ~* \.(?:js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 7d;
+        add_header Cache-Control "public";
+        try_files $uri =404;
+    }
+
+    # ---- Angular SPA fallback: har route index.html par ----
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
@@ -15,7 +15,7 @@
    "ng": "ng",
    "build": "node version.js && npm run env -s && ng build --configuration production --output-hashing=none",
    "build:prod": "node version.js && node --max-old-space-size=16384 ./node_modules/@angular/cli/bin/ng build --configuration production --output-hashing=none --base-href=/web-app/",
-    "start": "npm run env -s && cross-env NODE_OPTIONS=\"--max_old_space_size=16384\" ng serve --proxy-config proxy.localhost.conf.js",
+    "start": "npm run env -s && cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" ng serve --proxy-config proxy.localhost.conf.js",
    "start:share": "npm run env -s && cross-env NODE_OPTIONS=\"--max_old_space_size=16384\" ng serve --host 0.0.0.0 --proxy-config proxy.localhost.conf.js",
    "start:demo": "npm run env -s && cross-env NODE_OPTIONS=\"--max_old_space_size=16384\" ng serve --proxy-config proxy.conf.js",
    "serve:dev": "npm run env -s && cross-env NODE_OPTIONS=\"--max_old_space_size=16384\" ng serve --source-map --proxy-config proxy.localhost.conf.js",
@@ -72,6 +72,7 @@ import { ViewJournalEntryTransactionComponent } from 'app/shared/accounting/view
 import { JournalEntryTransactionResolver } from './common-resolvers/journal-entry-transaction.resolver';
 import { ExternalAssetOwnerJournalEntryResolver } from 'app/loans/common-resolvers/external-asset-owner-journal-entry.resolver';
 import { ExternalAssetConfigurationResolver } from './common-resolvers/external-asset-configuration.resolver';
+import { accountingFeatureEnabledGuard } from './disabled-features';

 /** Accounting Routes */
 const routes: Routes = [
@@ -99,7 +100,8 @@ const routes: Routes = [
            {
              path: 'frequent-postings',
              component: FrequentPostingsComponent,
-              data: { title: 'Frequent Postings', breadcrumb: 'Frequent Postings' },
+              canActivate: [accountingFeatureEnabledGuard],
+              data: { title: 'Frequent Postings', breadcrumb: 'Frequent Postings', feature: 'frequentPostings' },
              resolve: {
                offices: OfficesResolver,
                accountingRules: AccountingRulesAssociationsResolver,
@@ -110,7 +112,8 @@ const routes: Routes = [
            {
              path: 'create',
              component: CreateJournalEntryComponent,
-              data: { title: 'Create Journal Entry', breadcrumb: 'Create' },
+              canActivate: [accountingFeatureEnabledGuard],
+              data: { title: 'Create Journal Entry', breadcrumb: 'Create', feature: 'createJournalEntries' },
              resolve: {
                offices: OfficesResolver,
                currencies: CurrenciesResolver,
@@ -194,6 +197,11 @@ const routes: Routes = [
            offices: OfficesResolver
          }
        },
+        {
+          path: 'balance-sheet',
+          loadComponent: () => import('./balance-sheet/balance-sheet.component').then((c) => c.BalanceSheetComponent),
+          data: { title: 'Balance Sheet', breadcrumb: 'Balance Sheet' }
+        },
        {
          path: 'chart-of-accounts',
          data: { title: 'Chart of Accounts', breadcrumb: 'Chart of Accounts' },
@@ -244,7 +252,8 @@ const routes: Routes = [
        },
        {
          path: 'closing-entries',
-          data: { title: 'Accounting Closures', breadcrumb: 'Closing Entries' },
+          canActivate: [accountingFeatureEnabledGuard],
+          data: { title: 'Accounting Closures', breadcrumb: 'Closing Entries', feature: 'closingEntries' },
          children: [
            {
              path: '',
@@ -285,7 +294,8 @@ const routes: Routes = [
        },
        {
          path: 'accounting-rules',
-          data: { title: 'Accounting Rules', breadcrumb: 'Accounting Rules' },
+          canActivate: [accountingFeatureEnabledGuard],
+          data: { title: 'Accounting Rules', breadcrumb: 'Accounting Rules', feature: 'accountingRules' },
          children: [
            {
              path: '',
@@ -332,11 +342,17 @@ const routes: Routes = [
        {
          path: 'periodic-accruals',
          component: PeriodicAccrualsComponent,
-          data: { title: 'Periodic Accrual Accounting', breadcrumb: 'Execute Periodic Accrual Accounting' }
+          canActivate: [accountingFeatureEnabledGuard],
+          data: {
+            title: 'Periodic Accrual Accounting',
+            breadcrumb: 'Execute Periodic Accrual Accounting',
+            feature: 'accruals'
+          }
        },
        {
          path: 'provisioning-entries',
-          data: { title: 'Provisioning Entries', breadcrumb: 'Provisioning Entries' },
+          canActivate: [accountingFeatureEnabledGuard],
+          data: { title: 'Provisioning Entries', breadcrumb: 'Provisioning Entries', feature: 'provisioningEntries' },
          children: [
            {
              path: '',
@@ -17,35 +17,39 @@

  <!-- Cards Grid -->
  <div class="acc-grid">
-    <!-- Frequent Postings -->
-    <a
-      class="acc-card"
-      [routerLink]="['journal-entries/frequent-postings']"
-      *mifosxHasPermission="'CREATE_JOURNALENTRY'"
-      #frequentPostings
-    >
-      <div class="acc-card__icon blue"><i class="fas fa-sync-alt"></i></div>
-      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Frequent Postings' | translate }}</span>
-        <span class="acc-card__desc">{{ 'labels.text.These are predefined postings' | translate }}</span>
-      </div>
-    </a>
+    <!-- Frequent Postings — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.frequentPostings) {
+      <a
+        class="acc-card"
+        [routerLink]="['journal-entries/frequent-postings']"
+        *mifosxHasPermission="'CREATE_JOURNALENTRY'"
+        #frequentPostings
+      >
+        <div class="acc-card__icon blue"><i class="fas fa-sync-alt"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Frequent Postings' | translate }}</span>
+          <span class="acc-card__desc">{{ 'labels.text.These are predefined postings' | translate }}</span>
+        </div>
+      </a>
+    }

-    <!-- Create Journal Entries -->
-    <a
-      class="acc-card"
-      [routerLink]="['journal-entries/create']"
-      *mifosxHasPermission="'CREATE_JOURNALENTRY'"
-      #createJournalEntries
-    >
-      <div class="acc-card__icon green"><i class="fas fa-plus-circle"></i></div>
-      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Create Journal Entries' | translate }}</span>
-        <span class="acc-card__desc">{{
-          'labels.text.Manual journal entry transactions recorded in a journal' | translate
-        }}</span>
-      </div>
-    </a>
+    <!-- Create Journal Entries — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.createJournalEntries) {
+      <a
+        class="acc-card"
+        [routerLink]="['journal-entries/create']"
+        *mifosxHasPermission="'CREATE_JOURNALENTRY'"
+        #createJournalEntries
+      >
+        <div class="acc-card__icon green"><i class="fas fa-plus-circle"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Create Journal Entries' | translate }}</span>
+          <span class="acc-card__desc">{{
+            'labels.text.Manual journal entry transactions recorded in a journal' | translate
+          }}</span>
+        </div>
+      </a>
+    }

    <!-- Search Journal Entries -->
    <a class="acc-card" [routerLink]="['journal-entries']" *mifosxHasPermission="'READ_JOURNALENTRY'">
@@ -113,43 +117,64 @@
      </div>
    </a>

-    <!-- Closing Entries -->
-    <a class="acc-card" [routerLink]="['closing-entries']" *mifosxHasPermission="'READ_GLCLOSURE'" #closingEntries>
-      <div class="acc-card__icon red"><i class="fas fa-archive"></i></div>
+    <!-- Balance Sheet -->
+    <a class="acc-card" [routerLink]="['balance-sheet']" *mifosxHasPermission="'READ_GLACCOUNT'" #balanceSheet>
+      <div class="acc-card__icon teal"><i class="fas fa-balance-scale"></i></div>
      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Closing Entries' | translate }}</span>
-        <span class="acc-card__desc">{{
-          'labels.text.Journal entries made at the end of accounting period' | translate
-        }}</span>
+        <span class="acc-card__title">Balance Sheet</span>
+        <span class="acc-card__desc">Header/Detail balances as on any date</span>
      </div>
    </a>

-    <!-- Accounting Rules -->
-    <a class="acc-card" [routerLink]="['accounting-rules']" *mifosxHasPermission="'READ_ACCOUNTINGRULE'">
-      <div class="acc-card__icon purple"><i class="fas fa-list-ul"></i></div>
-      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Accounting Rules' | translate }}</span>
-        <span class="acc-card__desc">{{ 'labels.text.List of all accounting rules' | translate }}</span>
-      </div>
-    </a>
+    <!-- Closing Entries — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.closingEntries) {
+      <a class="acc-card" [routerLink]="['closing-entries']" *mifosxHasPermission="'READ_GLCLOSURE'" #closingEntries>
+        <div class="acc-card__icon red"><i class="fas fa-archive"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Closing Entries' | translate }}</span>
+          <span class="acc-card__desc">{{
+            'labels.text.Journal entries made at the end of accounting period' | translate
+          }}</span>
+        </div>
+      </a>
+    }

-    <!-- Accruals -->
-    <a class="acc-card" [routerLink]="['periodic-accruals']" *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
-      <div class="acc-card__icon green"><i class="fas fa-calendar-check"></i></div>
-      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Accruals' | translate }}</span>
-        <span class="acc-card__desc">{{ 'labels.text.Accrues income, expenses and liabilities' | translate }}</span>
-      </div>
-    </a>
+    <!-- Accounting Rules — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.accountingRules) {
+      <a class="acc-card" [routerLink]="['accounting-rules']" *mifosxHasPermission="'READ_ACCOUNTINGRULE'">
+        <div class="acc-card__icon purple"><i class="fas fa-list-ul"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Accounting Rules' | translate }}</span>
+          <span class="acc-card__desc">{{ 'labels.text.List of all accounting rules' | translate }}</span>
+        </div>
+      </a>
+    }

-    <!-- Provisioning Entries -->
-    <a class="acc-card" [routerLink]="['provisioning-entries']" *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'">
-      <div class="acc-card__icon amber"><i class="fas fa-cogs"></i></div>
-      <div class="acc-card__info">
-        <span class="acc-card__title">{{ 'labels.heading.Provisioning Entries' | translate }}</span>
-        <span class="acc-card__desc">{{ 'labels.text.Create provisioning entries' | translate }}</span>
-      </div>
-    </a>
+    <!-- Accruals — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.accruals) {
+      <a
+        class="acc-card"
+        [routerLink]="['periodic-accruals']"
+        *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'"
+      >
+        <div class="acc-card__icon green"><i class="fas fa-calendar-check"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Accruals' | translate }}</span>
+          <span class="acc-card__desc">{{ 'labels.text.Accrues income, expenses and liabilities' | translate }}</span>
+        </div>
+      </a>
+    }
+
+    <!-- Provisioning Entries — hidden while disabled, see disabled-features.ts -->
+    @if (!disabledFeatures.provisioningEntries) {
+      <a class="acc-card" [routerLink]="['provisioning-entries']" *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'">
+        <div class="acc-card__icon amber"><i class="fas fa-cogs"></i></div>
+        <div class="acc-card__info">
+          <span class="acc-card__title">{{ 'labels.heading.Provisioning Entries' | translate }}</span>
+          <span class="acc-card__desc">{{ 'labels.text.Create provisioning entries' | translate }}</span>
+        </div>
+      </a>
+    }
  </div>
 </div>

@@ -18,6 +18,7 @@ import { MatIcon } from '@angular/material/icon';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatLine } from '@angular/material/grid-list';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { DISABLED_ACCOUNTING_FEATURES } from './disabled-features';

 /**
 * Accounting component.
@@ -63,6 +64,9 @@ export class AccountingComponent implements AfterViewInit {
  // Initialize an array of 10 boolean values, all set to false
  arrowBooleans: boolean[] = new Array(10).fill(false);

+  /** Which accounting tiles are switched off for this installation — see disabled-features.ts. */
+  disabledFeatures = DISABLED_ACCOUNTING_FEATURES;
+
  /**
   * Popover function
   * @param template TemplateRef<any>.
@@ -104,12 +108,15 @@ export class AccountingComponent implements AfterViewInit {
        );
      });
    }
-    if (this.configurationWizardService.showClosingEntries) {
+    // Closing Entries and Create Journal Entries can be switched off (see disabled-features.ts), in
+    // which case their tiles never render and these refs stay undefined — the wizard simply has no
+    // step to point at, rather than throwing on a missing element.
+    if (this.configurationWizardService.showClosingEntries && this.closingEntries) {
      setTimeout(() => {
        this.showPopover(this.templateClosingEntries, this.closingEntries.nativeElement, 'bottom', true);
      });
    }
-    if (this.configurationWizardService.showCreateJournalEntries) {
+    if (this.configurationWizardService.showCreateJournalEntries && this.createJournalEntries) {
      setTimeout(() => {
        this.showPopover(this.templateCreateJournalEntries, this.createJournalEntries.nativeElement, 'bottom', true);
      });
@@ -116,6 +116,22 @@ export class AccountingService {
    return this.http.get(`/glaccounts`, { params: httpParams });
  }

+  /**
+   * As-on-date balance sheet, grouped by Header/Detail hierarchy — see BalanceSheetApiResource.
+   * @param asOnDate yyyy-MM-dd. Defaults to today on the backend when omitted.
+   * @param officeId Optional — scopes every balance to one office instead of the whole organization.
+   */
+  getBalanceSheet(asOnDate?: string, officeId?: number): Observable<any> {
+    let httpParams = new HttpParams();
+    if (asOnDate) {
+      httpParams = httpParams.set('asOnDate', asOnDate);
+    }
+    if (officeId != null) {
+      httpParams = httpParams.set('officeId', officeId.toString());
+    }
+    return this.http.get('/accounting/balancesheet', { params: httpParams });
+  }
+
  /**
   * @param transactionId Transaction ID of journal entries.
   * @returns {Observable<any>} Journal Entries.
@@ -0,0 +1,363 @@
+/**
+ * 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/.
+ */
+
+/*
+ * Builds the Consolidated Balance Sheet PDF, laid out like the bank's printed report: liabilities
+ * on the left, assets on the right, each top-level group a named block with its accounts listed
+ * under it and a subtotal in the TOTAL column.
+ *
+ * Drawn directly with jsPDF rather than printed from the DOM: window.print() carries the whole app
+ * shell (sidenav, toolbar, ticker) into the output and gives no control over where a page breaks,
+ * which is what made the printed sheet unreadable. Here each column is paginated on its own, the
+ * way the printed report does it — the left side can run onto page 2 while the right side is still
+ * on page 1 — and every page repeats the heading.
+ */
+
+import { jsPDF } from 'jspdf';
+
+export interface BalanceSheetPdfNode {
+  name: string;
+  glCode: string;
+  usage: 'HEADER' | 'DETAIL';
+  balance: number;
+  children: BalanceSheetPdfNode[];
+}
+
+export interface BalanceSheetPdfSide {
+  label: string;
+  total: number;
+  groups: { classification: string; total: number; nodes: BalanceSheetPdfNode[] }[];
+}
+
+export interface BalanceSheetPdfInput {
+  bankName: string;
+  officeLabel: string;
+  /** yyyy-MM-dd */
+  asOnDate: string;
+  creditSide: BalanceSheetPdfSide;
+  debitSide: BalanceSheetPdfSide;
+}
+
+// ── Page geometry, in mm on A4 portrait ─────────────────────────────────────
+const PAGE_W = 210;
+const PAGE_H = 297;
+const MARGIN = 8;
+const COL_W = (PAGE_W - MARGIN * 2) / 2;
+const COL_X = [
+  MARGIN,
+  MARGIN + COL_W
+];
+/** Right edges of the BALANCE and TOTAL columns, relative to a column's left edge. */
+const BALANCE_R = COL_W - 26;
+const TOTAL_R = COL_W - 2;
+/** Name text wraps within this width so it never runs under the BALANCE column. */
+const NAME_W = COL_W - 30;
+
+const BODY_TOP = 36;
+/** Leaves room under the body for the sign-off row and the print-date footer. */
+const BODY_BOTTOM = PAGE_H - 21;
+const LINE_H = 3.1;
+
+const INK: [number, number, number] = [
+  20,
+  20,
+  20
+];
+const MUTED: [number, number, number] = [
+  90,
+  90,
+  90
+];
+
+type Line =
+  | { kind: 'block'; text: string }
+  | { kind: 'subhead'; text: string; depth: number }
+  | { kind: 'detail'; lines: string[]; amount: string; depth: number }
+  | { kind: 'subsubtotal'; amount: string }
+  | { kind: 'subtotal'; amount: string }
+  | { kind: 'standalone'; lines: string[]; amount: string }
+  | { kind: 'grand'; amount: string }
+  | { kind: 'gap' };
+
+function money(value: number): string {
+  return new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value ?? 0);
+}
+
+function ddmmyyyy(iso: string): string {
+  if (!iso) {
+    return '';
+  }
+  const [
+    y,
+    m,
+    d
+  ] = iso.split('-');
+  return `${d}/${m}/${y}`;
+}
+
+function heightOf(line: Line): number {
+  switch (line.kind) {
+    case 'block':
+      // Heading plus the short dashed rule beneath it.
+      return LINE_H + 1.8;
+    case 'detail':
+    case 'standalone':
+      return LINE_H * line.lines.length;
+    case 'gap':
+      return 2.4;
+    case 'grand':
+      // Rule above, the figure, and the double rule beneath it.
+      return LINE_H + 6;
+    default:
+      return LINE_H;
+  }
+}
+
+/**
+ * Flattens one side into the exact sequence of printed lines. Done up front so pagination is a
+ * matter of measuring heights, with no recursion happening mid-page.
+ */
+function flatten(doc: jsPDF, side: BalanceSheetPdfSide): Line[] {
+  const out: Line[] = [];
+  // splitTextToSize measures with whatever font is currently set, so it has to match the font the
+  // detail lines are actually drawn in — otherwise names wrap at the wrong width.
+  doc.setFont('helvetica', 'normal').setFontSize(6.8);
+
+  const pushNode = (node: BalanceSheetPdfNode, depth: number): void => {
+    if (node.usage === 'DETAIL') {
+      const indent = depth * 2;
+      const wrapped: string[] = doc.splitTextToSize(node.name, NAME_W - indent);
+      out.push({ kind: 'detail', lines: wrapped, amount: money(node.balance), depth });
+      return;
+    }
+    out.push({ kind: 'subhead', text: node.name, depth });
+    node.children.forEach((child) => pushNode(child, depth + 1));
+    out.push({ kind: 'subsubtotal', amount: money(node.balance) });
+  };
+
+  for (const group of side.groups) {
+    for (const root of group.nodes) {
+      if (root.usage === 'DETAIL') {
+        // A Detail account sitting under no group at all: a group of one, printed on a single line
+        // carrying both its balance and its total, rather than a heading and a figure on separate
+        // rows with the BALANCE column left empty.
+        out.push({
+          kind: 'standalone',
+          lines: doc.splitTextToSize(root.name.toUpperCase(), NAME_W),
+          amount: money(root.balance)
+        });
+        out.push({ kind: 'gap' });
+        continue;
+      }
+      out.push({ kind: 'block', text: root.name });
+      root.children.forEach((child) => pushNode(child, 0));
+      out.push({ kind: 'subtotal', amount: money(root.balance) });
+      out.push({ kind: 'gap' });
+    }
+  }
+  // Carried as a line of its own so pagination reserves room for it, rather than squeezing it
+  // against the bottom margin under the last block.
+  out.push({ kind: 'grand', amount: money(side.total) });
+  return out;
+}
+
+function dottedLine(doc: jsPDF, x1: number, y: number, x2: number): void {
+  doc.setLineDashPattern(
+    [
+      0.4,
+      0.6
+    ],
+    0
+  );
+  doc.setLineWidth(0.15);
+  doc.line(x1, y, x2, y);
+  doc.setLineDashPattern([], 0);
+}
+
+function drawPageFrame(doc: jsPDF, input: BalanceSheetPdfInput, page: number, pageCount: number): void {
+  doc.setTextColor(...INK);
+
+  doc.setFont('helvetica', 'bold').setFontSize(9.5);
+  doc.text(`${input.bankName.toUpperCase()} , HEAD OFFICE`, PAGE_W / 2, 11, { align: 'center' });
+
+  doc.setFontSize(8);
+  doc.text(`CONSOLIDATED BALANCE SHEET (SUB GROUP WISE) AS ON : ${ddmmyyyy(input.asOnDate)}`, PAGE_W / 2, 16, {
+    align: 'center'
+  });
+  doc.setFont('helvetica', 'normal').setFontSize(7);
+  doc.text(`Page ${page} of ${pageCount}`, PAGE_W - MARGIN, 16, { align: 'right' });
+  doc.text(`FOR BRANCHES : ${input.officeLabel}`, PAGE_W / 2, 20, { align: 'center' });
+
+  dottedLine(doc, MARGIN, 23, PAGE_W - MARGIN);
+
+  // Side titles and column headings, drawn per column.
+  const titles = [
+    'LIABILITIES ( CREDIT )',
+    'ASSETS ( DEBIT )'
+  ];
+  for (let c = 0; c < 2; c++) {
+    const x = COL_X[c];
+    doc.setFont('helvetica', 'bold').setFontSize(7.5);
+    doc.text(titles[c], x + 1, 27.5);
+    doc.setFontSize(6.5);
+    doc.text('ACCOUNT NAME', x + 1, 32);
+    doc.text('BALANCE', x + BALANCE_R, 32, { align: 'right' });
+    doc.text('TOTAL', x + TOTAL_R, 32, { align: 'right' });
+    dottedLine(doc, x + 1, 33.4, x + COL_W - 2);
+  }
+
+  // The divider between the two sides.
+  doc.setLineWidth(0.15);
+  doc.setDrawColor(150, 150, 150);
+  doc.line(COL_X[1], 24, COL_X[1], BODY_BOTTOM + 2);
+  doc.setDrawColor(0, 0, 0);
+
+  // Footer.
+  dottedLine(doc, MARGIN, BODY_BOTTOM + 6, PAGE_W - MARGIN);
+  doc
+    .setFont('helvetica', 'normal')
+    .setFontSize(6.5)
+    .setTextColor(...MUTED);
+  const now = new Date();
+  const stamp =
+    `${`${now.getDate()}`.padStart(2, '0')}/${`${now.getMonth() + 1}`.padStart(2, '0')}/${now.getFullYear()} ` +
+    `${`${now.getHours()}`.padStart(2, '0')}:${`${now.getMinutes()}`.padStart(2, '0')}:${`${now.getSeconds()}`.padStart(2, '0')}`;
+  doc.text(`Print Date : ${stamp}`, MARGIN, BODY_BOTTOM + 10);
+  doc.text('Consolidated Balance Sheet (Sub Group Wise)', PAGE_W - MARGIN, BODY_BOTTOM + 10, { align: 'right' });
+  doc.setTextColor(...INK);
+}
+
+/** Draws one line into a column at y, and returns the y the next line starts at. */
+function drawLine(doc: jsPDF, line: Line, x: number, y: number): number {
+  switch (line.kind) {
+    case 'block': {
+      doc.setFont('helvetica', 'bold').setFontSize(7);
+      doc.text(line.text.toUpperCase(), x + 1, y);
+      dottedLine(doc, x + 1, y + 1.1, x + 34);
+      return y + heightOf(line);
+    }
+    case 'subhead': {
+      doc.setFont('helvetica', 'bold').setFontSize(6.8);
+      doc.text(line.text, x + 1 + line.depth * 2, y);
+      return y + heightOf(line);
+    }
+    case 'detail': {
+      doc.setFont('helvetica', 'normal').setFontSize(6.8);
+      const indent = x + 2 + line.depth * 2;
+      line.lines.forEach((text, i) => doc.text(text, indent, y + i * LINE_H));
+      // The amount sits on the first line of a wrapped name, as the printed report has it.
+      doc.text(line.amount, x + BALANCE_R, y, { align: 'right' });
+      return y + heightOf(line);
+    }
+    case 'subsubtotal': {
+      doc.setFont('helvetica', 'bold').setFontSize(6.8);
+      dottedLine(doc, x + BALANCE_R - 22, y - 2.2, x + BALANCE_R);
+      doc.text(line.amount, x + BALANCE_R, y, { align: 'right' });
+      return y + heightOf(line);
+    }
+    case 'subtotal': {
+      doc.setFont('helvetica', 'bold').setFontSize(7);
+      doc.text(line.amount, x + TOTAL_R, y, { align: 'right' });
+      return y + heightOf(line);
+    }
+    case 'standalone': {
+      doc.setFont('helvetica', 'bold').setFontSize(7);
+      line.lines.forEach((text, i) => doc.text(text, x + 1, y + i * LINE_H));
+      doc.text(line.amount, x + BALANCE_R, y, { align: 'right' });
+      doc.text(line.amount, x + TOTAL_R, y, { align: 'right' });
+      return y + heightOf(line);
+    }
+    case 'grand': {
+      const top = y + 1.5;
+      doc.setLineWidth(0.3);
+      doc.line(x + 1, top, x + COL_W - 2, top);
+      doc.setFont('helvetica', 'bold').setFontSize(7.5);
+      doc.text(line.amount, x + TOTAL_R, top + 3.6, { align: 'right' });
+      doc.setLineWidth(0.2);
+      doc.line(x + 1, top + 5, x + COL_W - 2, top + 5);
+      doc.line(x + 1, top + 5.7, x + COL_W - 2, top + 5.7);
+      return y + heightOf(line);
+    }
+    default:
+      return y + heightOf(line);
+  }
+}
+
+/** Splits one side's lines into per-page chunks that fit between BODY_TOP and BODY_BOTTOM. */
+function paginate(lines: Line[]): Line[][] {
+  const pages: Line[][] = [];
+  let current: Line[] = [];
+  let y = BODY_TOP;
+
+  for (const line of lines) {
+    const h = heightOf(line);
+    if (y + h > BODY_BOTTOM) {
+      pages.push(current);
+      current = [];
+      y = BODY_TOP;
+    }
+    current.push(line);
+    y += h;
+  }
+  // Keep the trailing chunk only if it has something on it, but always return at least one page so
+  // a side with no balances still gets its heading and a zero total.
+  if (current.length > 0 || pages.length === 0) {
+    pages.push(current);
+  }
+  return pages;
+}
+
+export function buildBalanceSheetPdf(input: BalanceSheetPdfInput): jsPDF {
+  const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4', compress: true });
+
+  const creditPages = paginate(flatten(doc, input.creditSide));
+  const debitPages = paginate(flatten(doc, input.debitSide));
+  // Both sides print side by side, so the sheet runs as long as the longer of the two, plus a
+  // final page for the grand totals when they would not fit under the last block.
+  const pageCount = Math.max(creditPages.length, debitPages.length);
+
+  for (let p = 0; p < pageCount; p++) {
+    if (p > 0) {
+      doc.addPage();
+    }
+    drawPageFrame(doc, input, p + 1, pageCount);
+
+    const sides = [
+      creditPages[p] ?? [],
+      debitPages[p] ?? []
+    ];
+
+    for (let c = 0; c < 2; c++) {
+      const x = COL_X[c];
+      let y = BODY_TOP;
+      for (const line of sides[c]) {
+        y = drawLine(doc, line, x, y);
+      }
+    }
+
+    // Sign-off row, on the closing page only.
+    if (p === pageCount - 1) {
+      doc
+        .setFont('helvetica', 'normal')
+        .setFontSize(6.5)
+        .setTextColor(...MUTED);
+      const roles = [
+        'CLERK',
+        'ACCOUNTANT / OFFICER',
+        'ASST. GEN MANAGER',
+        'GENERAL MANAGER',
+        'CHAIRMAN'
+      ];
+      const step = (PAGE_W - MARGIN * 2) / roles.length;
+      roles.forEach((role, i) => doc.text(role, MARGIN + step * i + step / 2, BODY_BOTTOM + 2, { align: 'center' }));
+      doc.setTextColor(...INK);
+    }
+  }
+
+  return doc;
+}
@@ -0,0 +1,182 @@
+<!--
+  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="bs-page">
+  <!-- Controls — not part of the printed sheet. -->
+  <div class="bs-controls">
+    <label class="bs-field">
+      <span>As on date</span>
+      <input type="date" [(ngModel)]="asOnDate" (change)="load()" />
+    </label>
+    <label class="bs-field">
+      <span>Branch</span>
+      <select [(ngModel)]="officeId" (ngModelChange)="load()">
+        <option [ngValue]="null">All branches</option>
+        @for (office of offices; track office.id) {
+          <option [ngValue]="office.id">{{ office.name }}</option>
+        }
+      </select>
+    </label>
+    <label class="bs-check">
+      <input type="checkbox" [(ngModel)]="hideZeroBalances" (ngModelChange)="applyZeroFilter()" />
+      <span>Hide nil balances</span>
+    </label>
+    <span class="bs-controls__spacer"></span>
+    @if (!loading && debitSide && creditSide) {
+      <span class="bs-tally" [class.bs-tally--off]="!tallied">
+        {{ tallied ? 'Balanced' : 'Out of balance by ' + fmt(difference) }}
+      </span>
+    }
+    <button type="button" class="bs-btn" (click)="load()" [disabled]="loading">
+      {{ loading ? 'Loading…' : 'Refresh' }}
+    </button>
+    <button type="button" class="bs-btn bs-btn--primary" (click)="downloadPdf()" [disabled]="loading || !debitSide">
+      Download PDF
+    </button>
+  </div>
+
+  @if (error) {
+    <div class="bs-alert">{{ error }}</div>
+  }
+
+  @if (loading) {
+    <div class="bs-loading">Loading balance sheet…</div>
+  }
+
+  @if (!loading && debitSide && creditSide) {
+    <!-- The sheet itself — this block is what prints. -->
+    <div class="bs-sheet">
+      <header class="bs-sheet__head">
+        <h2>CONSOLIDATED BALANCE SHEET (SUB GROUP WISE)</h2>
+        <p>AS ON : {{ displayDate(asOnDateLoaded) }}</p>
+        <p class="bs-sheet__branches">FOR BRANCHES : {{ officeLabel }}</p>
+      </header>
+
+      <div class="bs-sheet__body">
+        <!-- Liabilities (credit) on the left, assets (debit) on the right — as the printed sheet reads. -->
+        <section class="bs-col">
+          <div class="bs-col__title">LIABILITIES ( CREDIT )</div>
+          <div class="bs-row bs-row--colhead">
+            <span>ACCOUNT NAME</span>
+            <span>BALANCE</span>
+            <span>TOTAL</span>
+          </div>
+          @for (group of creditSide.groups; track group.classification) {
+            @for (root of group.nodes; track root.id) {
+              <ng-container *ngTemplateOutlet="block; context: { $implicit: root }"></ng-container>
+            }
+          }
+          @if (creditSide.groups.length === 0) {
+            <div class="bs-empty">No liability, equity or income balances as on this date.</div>
+          }
+          <div class="bs-row bs-row--grand">
+            <span></span>
+            <span></span>
+            <span>{{ fmt(creditSide.total) }}</span>
+          </div>
+        </section>
+
+        <section class="bs-col">
+          <div class="bs-col__title">ASSETS ( DEBIT )</div>
+          <div class="bs-row bs-row--colhead">
+            <span>ACCOUNT NAME</span>
+            <span>BALANCE</span>
+            <span>TOTAL</span>
+          </div>
+          @for (group of debitSide.groups; track group.classification) {
+            @for (root of group.nodes; track root.id) {
+              <ng-container *ngTemplateOutlet="block; context: { $implicit: root }"></ng-container>
+            }
+          }
+          @if (debitSide.groups.length === 0) {
+            <div class="bs-empty">No asset or expense balances as on this date.</div>
+          }
+          <div class="bs-row bs-row--grand">
+            <span></span>
+            <span></span>
+            <span>{{ fmt(debitSide.total) }}</span>
+          </div>
+        </section>
+      </div>
+
+      <footer class="bs-sheet__foot">
+        <span>CLERK</span>
+        <span>ACCOUNTANT / OFFICER</span>
+        <span>ASST. GEN MANAGER</span>
+        <span>GENERAL MANAGER</span>
+        <span>CHAIRMAN</span>
+      </footer>
+    </div>
+  }
+</div>
+
+<!--
+  One top-level block: the Header account's name, a rule, its lines, then its subtotal in the TOTAL
+  column.
+-->
+<ng-template #block let-root>
+  @if (root.usage === 'DETAIL') {
+    <!-- A Detail account with no Header of its own: a group of one, so it gets a single line
+         carrying both its balance and its total rather than a heading repeating its own name. -->
+    <div class="bs-block bs-block--single">
+      <div class="bs-row bs-row--standalone">
+        <span class="bs-name" [title]="root.glCode">{{ root.name }}</span>
+        <span class="bs-amt">{{ fmt(root.balance) }}</span>
+        <span class="bs-amt">{{ fmt(root.balance) }}</span>
+      </div>
+    </div>
+  } @else {
+    <div class="bs-block">
+      <div class="bs-block__name" [title]="root.glCode">{{ root.name }}</div>
+      <div class="bs-block__rule"></div>
+      @for (child of root.children; track child.id) {
+        <ng-container *ngTemplateOutlet="lines; context: { $implicit: child, depth: 0 }"></ng-container>
+      }
+      @if (root.children.length === 0) {
+        <div class="bs-row bs-row--line">
+          <span class="bs-name bs-name--muted">No accounts under this group</span>
+          <span></span>
+          <span></span>
+        </div>
+      }
+      <div class="bs-row bs-row--subtotal">
+        <span></span>
+        <span></span>
+        <span>{{ fmt(root.balance) }}</span>
+      </div>
+    </div>
+  }
+</ng-template>
+
+<!--
+  Everything below a top-level block. A nested Header keeps its own name and its own subtotal, so a
+  Header inside a Header still reads as its own sub-group rather than flattening into the parent.
+-->
+<ng-template #lines let-node let-depth="depth">
+  @if (node.usage === 'DETAIL') {
+    <div class="bs-row bs-row--line">
+      <span class="bs-name" [style.paddingLeft.px]="depth * 14" [title]="node.glCode">{{ node.name }}</span>
+      <span class="bs-amt">{{ fmt(node.balance) }}</span>
+      <span></span>
+    </div>
+  } @else {
+    <div class="bs-row bs-row--subhead">
+      <span class="bs-name" [style.paddingLeft.px]="depth * 14" [title]="node.glCode">{{ node.name }}</span>
+      <span></span>
+      <span></span>
+    </div>
+    @for (child of node.children; track child.id) {
+      <ng-container *ngTemplateOutlet="lines; context: { $implicit: child, depth: depth + 1 }"></ng-container>
+    }
+    <div class="bs-row bs-row--subsubtotal">
+      <span></span>
+      <span class="bs-amt">{{ fmt(node.balance) }}</span>
+      <span></span>
+    </div>
+  }
+</ng-template>
@@ -0,0 +1,372 @@
+/**
+ * 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/.
+ */
+
+$ink: #111827;
+$ink-soft: #374151;
+$ink-faint: #9ca3af;
+$rule: #cbd5e1;
+$border: #e2e8f0;
+$accent: #1d4ed8;
+$ok: #15803d;
+$ok-soft: #f0fdf4;
+$danger: #b91c1c;
+$danger-soft: #fef2f2;
+
+// Amount columns share one width so BALANCE and TOTAL line up down the whole sheet.
+$amt-col: 128px;
+
+.bs-page {
+  padding: 20px 24px 40px;
+  background: #f1f5f9;
+  min-height: 100%;
+}
+
+// ── Controls (screen only) ────────────────────────────────────────────────
+.bs-controls {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+
+  &__spacer {
+    flex: 1 1 auto;
+  }
+}
+
+.bs-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $ink-soft;
+
+  input,
+  select {
+    height: 36px;
+    padding: 0 10px;
+    border: 1px solid $border;
+    border-radius: 6px;
+    background: #fff;
+    font-size: 13px;
+    font-weight: 500;
+    text-transform: none;
+    letter-spacing: normal;
+    color: $ink;
+  }
+}
+
+.bs-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: $ink-soft;
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    accent-color: $accent;
+  }
+}
+
+.bs-btn {
+  height: 36px;
+  padding: 0 16px;
+  border: 1px solid $border;
+  border-radius: 6px;
+  background: #fff;
+  color: $ink-soft;
+  font-size: 12.5px;
+  font-weight: 700;
+  cursor: pointer;
+
+  &--primary {
+    background: $ink;
+    border-color: $ink;
+    color: #fff;
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.bs-tally {
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: $ok-soft;
+  color: $ok;
+  font-size: 12px;
+  font-weight: 700;
+
+  &--off {
+    background: $danger-soft;
+    color: $danger;
+  }
+}
+
+.bs-alert {
+  padding: 10px 14px;
+  border-radius: 6px;
+  background: $danger-soft;
+  color: $danger;
+  border: 1px solid #fecaca;
+  font-size: 13px;
+  margin-bottom: 14px;
+}
+
+.bs-loading {
+  padding: 48px 0;
+  text-align: center;
+  color: $ink-faint;
+  font-size: 13.5px;
+}
+
+// ── The printed sheet ─────────────────────────────────────────────────────
+.bs-sheet {
+  background: #fff;
+  border: 1px solid $border;
+  padding: 22px 26px 18px;
+  // The ledger reads as a printed report, so the whole sheet is set in a mono face with
+  // figures on tabular numerals — columns stay aligned however long the names run.
+  font-family: 'DejaVu Sans Mono', 'Liberation Mono', Consolas, 'Courier New', monospace;
+  font-variant-numeric: tabular-nums;
+  color: $ink;
+
+  &__head {
+    text-align: center;
+    border-bottom: 1px dotted $rule;
+    padding-bottom: 10px;
+    margin-bottom: 12px;
+
+    h2 {
+      margin: 0;
+      font-size: 13.5px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+    }
+
+    p {
+      margin: 4px 0 0;
+      font-size: 11.5px;
+      color: $ink-soft;
+    }
+  }
+
+  &__branches {
+    letter-spacing: 0.05em;
+  }
+
+  &__body {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+  }
+
+  &__foot {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    margin-top: 26px;
+    padding-top: 10px;
+    border-top: 1px dotted $rule;
+    font-size: 10px;
+    letter-spacing: 0.05em;
+    color: $ink-soft;
+  }
+}
+
+.bs-col {
+  padding: 0 16px;
+  min-width: 0;
+
+  &:first-child {
+    border-right: 1px dotted $rule;
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  &__title {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    padding-bottom: 6px;
+  }
+}
+
+// ── Rows: one grid so name / BALANCE / TOTAL align across every block ──────
+.bs-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) $amt-col $amt-col;
+  gap: 8px;
+  align-items: baseline;
+  font-size: 11.5px;
+  line-height: 1.55;
+
+  > span:nth-child(2),
+  > span:nth-child(3) {
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  &--colhead {
+    font-weight: 700;
+    font-size: 10.5px;
+    letter-spacing: 0.05em;
+    border-bottom: 1px dotted $rule;
+    padding-bottom: 4px;
+    margin-bottom: 6px;
+    color: $ink-soft;
+  }
+
+  &--line {
+    color: $ink-soft;
+  }
+
+  // A nested Header inside a block: its own named sub-group.
+  &--subhead {
+    font-weight: 700;
+    color: $ink;
+    padding-top: 3px;
+  }
+
+  // Sub-group subtotal sits in the BALANCE column, so it never collides with the
+  // block's own figure in TOTAL.
+  &--subsubtotal {
+    border-top: 1px dotted $rule;
+    font-weight: 700;
+    color: $accent;
+  }
+
+  // Top-level block subtotal, in the TOTAL column.
+  &--subtotal {
+    font-weight: 700;
+    color: $ink;
+    padding-top: 2px;
+  }
+
+  // A Header-less Detail account: its own one-line group.
+  &--standalone {
+    font-weight: 700;
+    color: $ink;
+
+    .bs-name {
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+  }
+
+  &--grand {
+    margin-top: 14px;
+    padding-top: 8px;
+    border-top: 1px solid $ink;
+    border-bottom: 3px double $ink;
+    font-weight: 700;
+    font-size: 12.5px;
+  }
+}
+
+.bs-name {
+  overflow-wrap: anywhere;
+
+  &--muted {
+    color: $ink-faint;
+    font-style: italic;
+  }
+}
+
+.bs-amt {
+  font-variant-numeric: tabular-nums;
+}
+
+.bs-block {
+  margin-bottom: 14px;
+
+  &--single {
+    margin-bottom: 10px;
+  }
+
+  &__name {
+    font-size: 11.5px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+  }
+
+  // The short dashed rule the printed sheet puts under every group heading.
+  &__rule {
+    width: 130px;
+    border-top: 1px dotted $ink-faint;
+    margin: 2px 0 4px;
+  }
+}
+
+.bs-empty {
+  padding: 14px 0;
+  font-size: 11.5px;
+  color: $ink-faint;
+}
+
+// ── Narrow screens: stack the two sides instead of squeezing the columns ───
+@media (width <= 1100px) {
+  .bs-sheet__body {
+    grid-template-columns: 1fr;
+  }
+
+  .bs-col {
+    padding: 0;
+
+    &:first-child {
+      border-right: none;
+      border-bottom: 1px dotted $rule;
+      padding-bottom: 16px;
+      margin-bottom: 16px;
+    }
+  }
+}
+
+// ── Print: only the sheet, at report proportions ───────────────────────────
+@media print {
+  .bs-controls,
+  .bs-alert,
+  .bs-loading {
+    display: none !important;
+  }
+
+  .bs-page {
+    padding: 0;
+    background: #fff;
+  }
+
+  .bs-sheet {
+    border: none;
+    padding: 0;
+    font-size: 10px;
+  }
+
+  .bs-sheet__body {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .bs-block {
+    break-inside: avoid;
+  }
+}
@@ -0,0 +1,218 @@
+/**
+ * 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 { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AccountingService } from '../accounting.service';
+import { OrganizationService } from '../../organization/organization.service';
+import { buildBalanceSheetPdf } from './balance-sheet-pdf';
+
+interface BalanceSheetNode {
+  id: number;
+  name: string;
+  glCode: string;
+  usage: 'HEADER' | 'DETAIL';
+  balance: number;
+  children: BalanceSheetNode[];
+}
+
+interface BalanceSheetGroup {
+  classification: string;
+  total: number;
+  nodes: BalanceSheetNode[];
+}
+
+interface BalanceSheetSide {
+  label: string;
+  total: number;
+  groups: BalanceSheetGroup[];
+}
+
+/**
+ * Consolidated Balance Sheet (sub-group wise), laid out the way the bank's own printed balance
+ * sheet reads: liabilities on the left, assets on the right, each top-level Header account a named
+ * block whose Detail accounts are listed under it and subtotalled in the TOTAL column.
+ *
+ * Balances come from BalanceSheetApiResource, which reads the live ledger - a Detail account's own
+ * postings, and a Header's as the recursive sum of its children (a Header never carries a posting
+ * of its own). A Detail account that sits under no Header at all is shown as its own one-line block
+ * rather than being dropped.
+ */
+@Component({
+  selector: 'mifosx-balance-sheet',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  templateUrl: './balance-sheet.component.html',
+  styleUrl: './balance-sheet.component.scss'
+})
+export class BalanceSheetComponent implements OnInit {
+  private accountingService = inject(AccountingService);
+  private organizationService = inject(OrganizationService);
+
+  /** Printed at the head of the PDF. Falls back to a neutral title if the profile is not set up. */
+  bankName = 'Bank';
+
+  asOnDate: string = new Date().toISOString().slice(0, 10);
+  officeId: number | null = null;
+  offices: { id: number; name: string }[] = [];
+
+  loading = false;
+  error = '';
+  asOnDateLoaded = '';
+
+  /** What the server returned, kept whole so the zero-balance toggle never needs a refetch. */
+  private rawDebitSide: BalanceSheetSide | null = null;
+  private rawCreditSide: BalanceSheetSide | null = null;
+
+  debitSide: BalanceSheetSide | null = null;
+  creditSide: BalanceSheetSide | null = null;
+
+  /**
+   * A working chart of accounts carries far more accounts than a bank actually operates, and a
+   * printed balance sheet lists only the ones carrying a balance — leaving every nil line in makes
+   * the sheet unreadable. On by default for that reason; switch it off to audit the full chart.
+   */
+  hideZeroBalances = true;
+
+  /** Both sides are derived from the same double-entry ledger, so they can only disagree if a
+   *  posting is missing a leg — worth surfacing rather than hiding. */
+  get tallied(): boolean {
+    if (!this.debitSide || !this.creditSide) {
+      return true;
+    }
+    return Math.abs(this.debitSide.total - this.creditSide.total) < 0.01;
+  }
+
+  get difference(): number {
+    if (!this.debitSide || !this.creditSide) {
+      return 0;
+    }
+    return Math.abs(this.debitSide.total - this.creditSide.total);
+  }
+
+  get officeLabel(): string {
+    if (this.officeId == null) {
+      return 'ALL BRANCHES';
+    }
+    return (this.offices.find((o) => o.id === this.officeId)?.name ?? '').toUpperCase();
+  }
+
+  ngOnInit(): void {
+    this.accountingService.getOffices().subscribe({
+      next: (offices) => (this.offices = offices || []),
+      error: () => (this.offices = [])
+    });
+    this.organizationService.getInstitutionProfile().subscribe({
+      next: (profile: any) => {
+        this.bankName = profile?.statementHeaderName || profile?.bankName || this.bankName;
+      },
+      // A missing institution profile must not stop the sheet from loading — the PDF just carries
+      // the fallback title.
+      error: () => undefined
+    });
+    this.load();
+  }
+
+  load(): void {
+    this.loading = true;
+    this.error = '';
+    this.accountingService.getBalanceSheet(this.asOnDate, this.officeId ?? undefined).subscribe({
+      next: (res: any) => {
+        this.rawDebitSide = res.debitSide;
+        this.rawCreditSide = res.creditSide;
+        this.asOnDateLoaded = res.asOnDate;
+        this.applyZeroFilter();
+        this.loading = false;
+      },
+      error: () => {
+        this.error = 'Could not load the balance sheet for this date.';
+        this.loading = false;
+      }
+    });
+  }
+
+  /**
+   * Rebuilds the displayed sides from what the server sent, dropping nil lines when asked. The
+   * totals are deliberately left as the server computed them — hiding a nil line must never change
+   * a figure, and a group total is unaffected by removing children that summed to nothing.
+   */
+  applyZeroFilter(): void {
+    this.debitSide = this.filterSide(this.rawDebitSide);
+    this.creditSide = this.filterSide(this.rawCreditSide);
+  }
+
+  private filterSide(side: BalanceSheetSide | null): BalanceSheetSide | null {
+    if (!side) {
+      return null;
+    }
+    if (!this.hideZeroBalances) {
+      return side;
+    }
+    const groups = side.groups
+      .map((group) => ({
+        ...group,
+        nodes: group.nodes
+          .map((node) => this.pruneZeros(node))
+          .filter((node): node is BalanceSheetNode => node !== null)
+      }))
+      .filter((group) => group.nodes.length > 0);
+    return { ...side, groups };
+  }
+
+  /** Drops a node whose balance is nil, and any Header left with nothing under it. */
+  private pruneZeros(node: BalanceSheetNode): BalanceSheetNode | null {
+    if (Math.abs(node.balance) < 0.005) {
+      return null;
+    }
+    const children = node.children
+      .map((child) => this.pruneZeros(child))
+      .filter((child): child is BalanceSheetNode => child !== null);
+    return { ...node, children };
+  }
+
+  /** Indian grouping with two decimals, matching the printed report (2,76,92,608.00). */
+  fmt(value: number): string {
+    return new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value ?? 0);
+  }
+
+  /** dd/MM/yyyy, as the printed report dates it. */
+  displayDate(iso: string): string {
+    if (!iso) {
+      return '';
+    }
+    const [
+      y,
+      m,
+      d
+    ] = iso.split('-');
+    return `${d}/${m}/${y}`;
+  }
+
+  /**
+   * Builds the report as a real PDF rather than printing the page: window.print() takes the whole
+   * app shell with it and breaks pages wherever they happen to fall, which is what made the earlier
+   * output unusable.
+   */
+  downloadPdf(): void {
+    if (!this.debitSide || !this.creditSide) {
+      return;
+    }
+    const doc = buildBalanceSheetPdf({
+      bankName: this.bankName,
+      officeLabel: this.officeLabel,
+      asOnDate: this.asOnDateLoaded || this.asOnDate,
+      creditSide: this.creditSide,
+      debitSide: this.debitSide
+    });
+    doc.save(`balance-sheet-${this.asOnDateLoaded || this.asOnDate}.pdf`);
+  }
+}
@@ -0,0 +1,43 @@
+/**
+ * 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 { inject } from '@angular/core';
+import { Router, CanActivateFn } from '@angular/router';
+
+/**
+ * Accounting features switched off for this installation.
+ *
+ * Nothing is deleted — the components, routes and services all stay in place, and flipping a flag
+ * back to `false` brings the feature back with its tile and its route. The matching API block lives
+ * in DisabledFeatureApiFilter on the backend, so a hidden feature cannot be reached by calling the
+ * endpoint directly either.
+ */
+export const DISABLED_ACCOUNTING_FEATURES = {
+  createJournalEntries: true,
+  frequentPostings: true,
+  closingEntries: true,
+  accruals: true,
+  provisioningEntries: true,
+  accountingRules: true
+};
+
+/**
+ * Blocks a route belonging to a disabled feature, for anyone who reaches it by typing the URL
+ * rather than through a tile. `data.feature` names the flag to check.
+ */
+export const accountingFeatureEnabledGuard: CanActivateFn = (route) => {
+  const router = inject(Router);
+  const feature = route.data?.['feature'] as keyof typeof DISABLED_ACCOUNTING_FEATURES | undefined;
+
+  if (!feature || !DISABLED_ACCOUNTING_FEATURES[feature]) {
+    return true;
+  }
+
+  router.navigate(['/accounting'], { replaceUrl: true });
+  return false;
+};
@@ -16,6 +16,7 @@ import { AccountingService } from '../../accounting.service';
 import { GLAccount } from 'app/shared/models/general.model';
 import { GlAccountSelectorComponent } from '../../../shared/accounting/gl-account-selector/gl-account-selector.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { accountOptionsForActivity } from '../financial-activity-account-options';

 /**
 * Create financial activity mapping component.
@@ -87,21 +88,11 @@ export class CreateFinancialActivityMappingComponent implements OnInit {
   */
  setGlAccountData() {
    this.financialActivityMappingForm.get('financialActivityId').valueChanges.subscribe((financialActivityId) => {
-      switch (financialActivityId) {
-        case 100:
-        case 101:
-        case 102:
-        case 103:
-          this.glAccountData = this.glAccountOptions.assetAccountOptions;
-          break;
-        case 200:
-        case 201:
-          this.glAccountData = this.glAccountOptions.liabilityAccountOptions;
-          break;
-        case 300:
-          this.glAccountData = this.glAccountOptions.equityAccountOptions;
-          break;
-      }
+      this.glAccountData = accountOptionsForActivity(
+        this.financialActivityData,
+        financialActivityId,
+        this.glAccountOptions
+      );
    });
  }

@@ -16,6 +16,7 @@ import { AccountingService } from '../../accounting.service';
 import { GLAccount } from 'app/shared/models/general.model';
 import { GlAccountSelectorComponent } from '../../../shared/accounting/gl-account-selector/gl-account-selector.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { accountOptionsForActivity } from '../financial-activity-account-options';

 /**
 * Edit financial activity mapping component.
@@ -98,21 +99,11 @@ export class EditFinancialActivityMappingComponent implements OnInit {
   */
  setGLAccountData() {
    this.financialActivityMappingForm.get('financialActivityId').valueChanges.subscribe((financialActivityId) => {
-      switch (financialActivityId) {
-        case 100:
-        case 101:
-        case 102:
-        case 103:
-          this.glAccountData = this.glAccountOptions.assetAccountOptions;
-          break;
-        case 200:
-        case 201:
-          this.glAccountData = this.glAccountOptions.liabilityAccountOptions;
-          break;
-        case 300:
-          this.glAccountData = this.glAccountOptions.equityAccountOptions;
-          break;
-      }
+      this.glAccountData = accountOptionsForActivity(
+        this.financialActivityData,
+        financialActivityId,
+        this.glAccountOptions
+      );
    });
  }

@@ -0,0 +1,38 @@
+/**
+ * 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/.
+ */
+
+/**
+ * The GL accounts a financial activity may be mapped to.
+ *
+ * The activity itself says which kind of account it needs — the template returns `mappedGLAccountType` on every
+ * option — so the answer is read from the activity rather than worked out from its id. The screens used to switch on
+ * the id instead, listing the ones they knew:
+ *
+ *     case 100, 101, 102, 103 → asset
+ *     case 200, 201           → liability
+ *     case 300                → equity
+ *
+ * Every activity added since fell through that switch and left the account dropdown empty, which is how dividendPaid
+ * (202), reserveForDividend (301), distributableProfit (302), retainedProfit (303) and dividendRoundOff (304) became
+ * unmappable — the screen offered no accounts and gave no reason. A list keyed on ids has to be extended by hand for
+ * each new activity, and is silently wrong until someone notices; asking the activity what it needs cannot fall out
+ * of step with the backend.
+ *
+ * @param activities the template's financialActivityOptions
+ * @param activityId the activity the user picked
+ * @param glAccountOptions the template's glAccountOptions, keyed assetAccountOptions / liabilityAccountOptions / …
+ */
+export function accountOptionsForActivity(activities: any[], activityId: number, glAccountOptions: any): any[] {
+  const activity = (activities || []).find((a) => a?.id === activityId);
+  const accountType = activity?.mappedGLAccountType;
+  if (!accountType || !glAccountOptions) {
+    return [];
+  }
+  // ASSET → assetAccountOptions, and so on for LIABILITY, EQUITY, INCOME and EXPENSE.
+  return glAccountOptions[`${accountType.toLowerCase()}AccountOptions`] ?? [];
+}
@@ -49,119 +49,144 @@
  }

  @if (glStatus && !glError) {
-    <!-- Step 2: what the ledger already says, so the count is counted against something concrete. -->
-    <div class="mcd-gl" [class.mcd-gl--fresh]="!glHasBalance">
-      <mat-icon>account_balance</mat-icon>
-      <div>
-        <div class="mcd-gl__label">Cash GL Account</div>
-        <div class="mcd-gl__value">({{ glStatus.glCode }}) {{ glStatus.glAccountName }}</div>
-        @if (glHasBalance) {
+    @if (todayAlreadyOpen) {
+      <!-- This screen is a one-time "day 1" tool - today's business day already exists, so counting
+           a drawer here would only be rejected at submit (BranchDayRegisterApiResource rejects
+           reopening an already-open day). Day Register is where every day after the first belongs. -->
+      <div class="mcd-gl mcd-gl--error">
+        <mat-icon>lock</mat-icon>
+        <div>
+          <div class="mcd-gl__label">Business Day Already Open</div>
+          <div class="mcd-gl__value">
+            {{ todayOpenInfo.businessDate }} — opened by {{ todayOpenInfo.openedByName }}, opening cash ₹{{
+              todayOpenInfo.openingCash | number: '1.2-2'
+            }}
+          </div>
          <div class="mcd-gl__hint">
-            Already holds
-            <strong>₹{{ glTarget.toLocaleString('en-IN') }}</strong>
-            — count the drawer to exactly this amount.
+            This branch has already opened today's business day — counting the drawer again here would only be rejected
+            on submit. Deposits, withdrawals and closing today's day happen from Day Register instead.
          </div>
-        } @else {
-          <div class="mcd-gl__hint">
-            No opening balance posted yet — whatever you count below becomes this account's opening balance.
-          </div>
-        }
-      </div>
-    </div>
-
-    <!-- Step 3: the actual count. -->
-    <mat-card class="mcd-card mcd-card--flush">
-      <mat-card-content>
-        <div class="mcd-grid mcd-grid--head">
-          <div class="mcd-grid__denom">Denomination</div>
-          <div class="mcd-grid__count">Count</div>
-          <div class="mcd-grid__amt">Amount</div>
+          <button type="button" mat-stroked-button (click)="goToBranchDay()">Go to Day Register</button>
        </div>
-        @for (d of allDenoms; track d.id) {
-          <div class="mcd-grid mcd-grid--row">
-            <div class="mcd-grid__denom">
-              {{ d.label }} <span class="mcd-grid__kind">{{ d.kind }}</span>
-            </div>
-            <div class="mcd-grid__count">
-              <button type="button" mat-icon-button (click)="bumpCount(d, -1)"><mat-icon>remove</mat-icon></button>
-              <input
-                type="number"
-                min="0"
-                class="mcd-grid__input"
-                [ngModel]="countFor(d)"
-                (ngModelChange)="onCountChange(d, $event)"
-              />
-              <button type="button" mat-icon-button (click)="bumpCount(d, 1)"><mat-icon>add</mat-icon></button>
-            </div>
-            <div class="mcd-grid__amt">₹{{ subtotalFor(d).toLocaleString('en-IN') }}</div>
-          </div>
-        }
-      </mat-card-content>
-    </mat-card>
-
-    <!-- The one number that matters. -->
-    <div class="mcd-balance" [class.mcd-balance--ok]="isReconciled">
-      <div class="mcd-balance__figure">
-        <span class="mcd-balance__label">Counted Total</span>
-        <span class="mcd-balance__amt">₹{{ countedTotal.toLocaleString('en-IN') }}</span>
      </div>
-      @if (glHasBalance) {
-        <div class="mcd-balance__figure">
-          <span class="mcd-balance__label">GL Target</span>
-          <span class="mcd-balance__amt">₹{{ glTarget.toLocaleString('en-IN') }}</span>
+    } @else {
+      <!-- Step 2: what the ledger already says, so the count is counted against something concrete. -->
+      <div class="mcd-gl" [class.mcd-gl--fresh]="!glHasBalance">
+        <mat-icon>account_balance</mat-icon>
+        <div>
+          <div class="mcd-gl__label">Cash GL Account</div>
+          <div class="mcd-gl__value">({{ glStatus.glCode }}) {{ glStatus.glAccountName }}</div>
+          @if (glHasBalance) {
+            <div class="mcd-gl__hint">
+              Already holds
+              <strong>₹{{ glTarget.toLocaleString('en-IN') }}</strong>
+              — count the drawer to exactly this amount.
+            </div>
+          } @else {
+            <div class="mcd-gl__hint">
+              No opening balance posted yet — whatever you count below becomes this account's opening balance.
+            </div>
+          }
        </div>
-      }
-      <div class="mcd-balance__status">
-        @if (countedTotal <= 0) {
-          <mat-icon>edit_note</mat-icon>
-          <span>Count each denomination above</span>
-        } @else if (isReconciled) {
-          <mat-icon>check_circle</mat-icon>
-          <span>{{ glHasBalance ? 'Matches the GL balance' : 'Will define the GL opening balance' }}</span>
-        } @else {
-          <mat-icon>error</mat-icon>
-          <span
-            >Off by ₹{{
-              (countedTotal - glTarget < 0 ? glTarget - countedTotal : countedTotal - glTarget).toLocaleString('en-IN')
-            }}</span
-          >
-        }
      </div>
-    </div>

-    @if (needsDifferenceReason) {
-      <mat-card class="mcd-card">
+      <!-- Step 3: the actual count. -->
+      <mat-card class="mcd-card mcd-card--flush">
        <mat-card-content>
-          <mat-form-field class="mcd-reason">
-            <mat-label>Why does the count differ from the GL balance?</mat-label>
-            <input matInput [(ngModel)]="differenceReason" />
-          </mat-form-field>
+          <div class="mcd-grid mcd-grid--head">
+            <div class="mcd-grid__denom">Denomination</div>
+            <div class="mcd-grid__count">Count</div>
+            <div class="mcd-grid__amt">Amount</div>
+          </div>
+          @for (d of allDenoms; track d.id) {
+            <div class="mcd-grid mcd-grid--row">
+              <div class="mcd-grid__denom">
+                {{ d.label }} <span class="mcd-grid__kind">{{ d.kind }}</span>
+              </div>
+              <div class="mcd-grid__count">
+                <button type="button" mat-icon-button (click)="bumpCount(d, -1)"><mat-icon>remove</mat-icon></button>
+                <input
+                  type="number"
+                  min="0"
+                  class="mcd-grid__input"
+                  [style.width.ch]="countInputWidthCh(d)"
+                  [ngModel]="countFor(d)"
+                  (ngModelChange)="onCountChange(d, $event)"
+                />
+                <button type="button" mat-icon-button (click)="bumpCount(d, 1)"><mat-icon>add</mat-icon></button>
+              </div>
+              <div class="mcd-grid__amt">₹{{ subtotalFor(d).toLocaleString('en-IN') }}</div>
+            </div>
+          }
        </mat-card-content>
      </mat-card>
-    }

-    @if (errorMsg) {
-      <div class="mcd-error">{{ errorMsg }}</div>
-    }
-
-    @if (successMsg) {
-      <div class="mcd-success">
-        <mat-icon>check_circle</mat-icon>
-        <div>
-          {{ successMsg }}
-          <div class="mcd-success__actions">
-            <button type="button" mat-stroked-button (click)="goToBranchDay()">Go to Day Register</button>
+      <!-- The one number that matters. -->
+      <div class="mcd-balance" [class.mcd-balance--ok]="isReconciled">
+        <div class="mcd-balance__figure">
+          <span class="mcd-balance__label">Counted Total</span>
+          <span class="mcd-balance__amt">₹{{ countedTotal.toLocaleString('en-IN') }}</span>
+        </div>
+        @if (glHasBalance) {
+          <div class="mcd-balance__figure">
+            <span class="mcd-balance__label">GL Target</span>
+            <span class="mcd-balance__amt">₹{{ glTarget.toLocaleString('en-IN') }}</span>
          </div>
+        }
+        <div class="mcd-balance__status">
+          @if (countedTotal <= 0) {
+            <mat-icon>edit_note</mat-icon>
+            <span>Count each denomination above</span>
+          } @else if (isReconciled) {
+            <mat-icon>check_circle</mat-icon>
+            <span>{{ glHasBalance ? 'Matches the GL balance' : 'Will define the GL opening balance' }}</span>
+          } @else {
+            <mat-icon>error</mat-icon>
+            <span
+              >Off by ₹{{
+                (countedTotal - glTarget < 0 ? glTarget - countedTotal : countedTotal - glTarget).toLocaleString(
+                  'en-IN'
+                )
+              }}</span
+            >
+          }
        </div>
      </div>
-    }

-    @if (!successMsg) {
-      <div class="mcd-actions">
-        <button mat-raised-button color="primary" [disabled]="!canSubmit" (click)="submit()">
-          {{ submitting ? 'Submitting…' : 'Migrate & Open Business Day' }}
-        </button>
-      </div>
+      @if (needsDifferenceReason) {
+        <mat-card class="mcd-card">
+          <mat-card-content>
+            <mat-form-field class="mcd-reason">
+              <mat-label>Why does the count differ from the GL balance?</mat-label>
+              <input matInput [(ngModel)]="differenceReason" />
+            </mat-form-field>
+          </mat-card-content>
+        </mat-card>
+      }
+
+      @if (errorMsg) {
+        <div class="mcd-error">{{ errorMsg }}</div>
+      }
+
+      @if (successMsg) {
+        <div class="mcd-success">
+          <mat-icon>check_circle</mat-icon>
+          <div>
+            {{ successMsg }}
+            <div class="mcd-success__actions">
+              <button type="button" mat-stroked-button (click)="goToBranchDay()">Go to Day Register</button>
+            </div>
+          </div>
+        </div>
+      }
+
+      @if (!successMsg) {
+        <div class="mcd-actions">
+          <button mat-raised-button color="primary" [disabled]="!canSubmit" (click)="submit()">
+            {{ submitting ? 'Submitting…' : 'Migrate & Open Business Day' }}
+          </button>
+        </div>
+      }
    }
  }
 </div>
@@ -115,6 +115,10 @@
    color: #64748b;
    line-height: 1.4;
  }
+
+  button {
+    margin-top: 10px;
+  }
 }

 .mcd-grid {
@@ -171,7 +175,11 @@
  }

  &__input {
-    width: 48px;
+    /* Width is set inline per row (see countInputWidthCh()), growing with the digit count typed —
+       min-width here only covers the fallback before Angular has bound anything. */
+    min-width: 48px;
+    max-width: 96px;
+    transition: width 0.1s ease-out;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid #e2e8f0;
@@ -66,6 +66,14 @@ export class MigrateCashDenominationComponent implements OnInit {
  glStatus: any = null;
  glError = '';

+  /** Set once per office change: whether TODAY's business day is already open for this office. This
+   *  screen is a one-time "day 1" tool (see the class doc) - once a day has actually been opened,
+   *  reopening the same one is exactly what BranchDayRegisterApiResource#migrateCashDenomination
+   *  itself refuses (its own openDayInternal call rejects a day that is already open), so this is
+   *  checked here too, before the user counts an entire drawer only to have the submit rejected. */
+  todayAlreadyOpen = false;
+  todayOpenInfo: any = null;
+
  notes: Denom[] = [];
  coins: Denom[] = [];
  counts: Record<number, number> = {};
@@ -118,6 +126,8 @@ export class MigrateCashDenominationComponent implements OnInit {
    this.result = null;
    this.successMsg = '';
    this.errorMsg = '';
+    this.todayAlreadyOpen = false;
+    this.todayOpenInfo = null;
    if (!this.officeId) return;

    this.glLoading = true;
@@ -131,6 +141,15 @@ export class MigrateCashDenominationComponent implements OnInit {
          this.glError = res.message || 'No cash GL account is configured for this tenant yet.';
        }
      });
+
+    this.service
+      .branchDayRegister(this.officeId)
+      .pipe(catchError(() => of(null)))
+      .subscribe((res: any) => {
+        const openDay = res?.openDay;
+        this.todayAlreadyOpen = !!openDay && openDay.businessDate === res?.today;
+        this.todayOpenInfo = this.todayAlreadyOpen ? openDay : null;
+      });
  }

  countFor(d: Denom): number {
@@ -149,6 +168,12 @@ export class MigrateCashDenominationComponent implements OnInit {
    this.counts[d.id] = Math.max(0, (this.counts[d.id] || 0) + delta);
  }

+  /** Widens the count box as the typed count grows more digits, so a large count (hundreds,
+   *  thousands) is never clipped or hard to read inside a field sized for one or two digits. */
+  countInputWidthCh(d: Denom): number {
+    return Math.max(3, String(this.countFor(d)).length + 2);
+  }
+
  get countedTotal(): number {
    return this.allDenoms.reduce((s, d) => s + this.subtotalFor(d), 0);
  }
@@ -162,7 +162,18 @@
            <div class="mob-grid mob-grid--data" formArrayName="glAccountEntries">
              <div class="mob-grid__row" [formGroupName]="i">
                <div class="mob-grid__code">{{ openingBalancesData.glAccounts[i].glAccountCode }}</div>
-                <div class="mob-grid__name">{{ openingBalancesData.glAccounts[i].glAccountName }}</div>
+                <div class="mob-grid__name">
+                  {{ openingBalancesData.glAccounts[i].glAccountName }}
+                  @if (isDenominationManaged(openingBalancesData.glAccounts[i].glAccountId)) {
+                    <span
+                      class="mob-grid__lock"
+                      matTooltip="Set by Migrate Cash Denomination — use that screen to change it"
+                    >
+                      <mat-icon inline="true">lock</mat-icon>
+                      <a [routerLink]="['/accounting/migrate-cash-denomination']">Migrate Cash Denomination</a>
+                    </span>
+                  }
+                </div>
                <div class="mob-grid__amt">
                  <mat-form-field class="mob-grid__input">
                    <input matInput type="number" min="0" formControlName="debit" placeholder="0.00" />
@@ -219,6 +219,33 @@
    word-break: break-word;
  }

+  /* Cash at Vault / Cash at Teller — locked, see MigrateOpeningBalancesComponent.isDenominationManaged. */
+  &__lock {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 8px;
+    padding: 1px 8px 1px 6px;
+    border-radius: 999px;
+    background: #fff7ed;
+    color: #9a3412;
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap;
+    vertical-align: middle;
+
+    mat-icon {
+      font-size: 13px;
+      width: 13px;
+      height: 13px;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+
  &__amt {
    text-align: right;
  }
@@ -17,6 +17,7 @@ import {
 } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';

 /** Custom Services */
 import { AccountingService } from '../accounting.service';
@@ -43,7 +44,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
    ...STANDALONE_SHARED_IMPORTS,
    GlAccountDisplayComponent,
    CurrencyPipe,
-    MatIconModule
+    MatIconModule,
+    MatTooltipModule
  ]
 })
 export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
@@ -74,6 +76,13 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
  debitsSum = 0;
  /** Sum total of credits. */
  creditsSum = 0;
+  /** GL account ids mapped to Financial Activity 101 (Cash at Vault) / 102 (Cash at Teller) — the
+   *  account(s) Migrate Cash Denomination owns. Their opening balance is shown here for visibility
+   *  but locked against editing: redefining it as a bare number here, instead of through a counted
+   *  denomination breakdown, would let the GL figure drift away from what is physically in the till.
+   *  The backend enforces the same rule independently (see defineOpeningBalance's
+   *  validateNoDenominationManagedCashAccounts) — this is a convenience, not the source of truth. */
+  denominationManagedGlAccountIds: number[] = [];

  /* Reference of search form */
  @ViewChild('searchFormRef') searchFormRef: ElementRef<any>;
@@ -95,6 +104,22 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
      this.officeData = data.offices;
      this.currencyData = data.currencies.selectedCurrencyOptions;
    });
+    // Office-independent: which GL account(s) this tenant has mapped to Cash at Vault / Cash at
+    // Teller, so their row can be locked the moment the office's accounts are drawn.
+    this.accountingService.getFinancialActivityAccounts().subscribe((mappings: any[]) => {
+      this.denominationManagedGlAccountIds = (mappings || [])
+        .filter((mapping) => mapping.financialActivityData?.id === 101 || mapping.financialActivityData?.id === 102)
+        .map((mapping) => mapping.glAccountData?.id)
+        .filter((id) => id != null);
+      // Retrieve may already have run before this (fast) request came back — lock any row it
+      // missed rather than leaving it editable for the rest of this visit.
+      this.glAccountEntries?.controls.forEach((control) => {
+        const glAccountId = control.get('glAccountId')?.value;
+        if (this.isDenominationManaged(glAccountId) && control.enabled) {
+          control.disable();
+        }
+      });
+    });
  }

  /**
@@ -136,14 +161,31 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
   * @returns {FormGroup} GL Account entry form.
   */
  createGLAccountEntryForm(glAccount: any): UntypedFormGroup {
-    return this.formBuilder.group(
+    // A never-touched account arrives as a placeholder row (amount/entryType both null); one that
+    // already carries an opening balance arrives with its real, committed figure — show that
+    // instead of leaving the field looking blank.
+    const existingDebit = glAccount.entryType?.value === 'DEBIT' ? glAccount.amount : null;
+    const existingCredit = glAccount.entryType?.value === 'CREDIT' ? glAccount.amount : null;
+    const group = this.formBuilder.group(
      {
        glAccountId: [glAccount.glAccountId],
-        debit: [null],
-        credit: [null]
+        debit: [existingDebit],
+        credit: [existingCredit]
      },
      { validator: onlyOneOfTheFieldsIsRequiredValidator }
    );
+    if (this.isDenominationManaged(glAccount.glAccountId)) {
+      // Disabling excludes this row from the form's own .value, so it is never resubmitted here —
+      // the account keeps whatever Migrate Cash Denomination last set it to.
+      group.disable();
+    }
+    return group;
+  }
+
+  /** Whether this GL account is Cash at Vault / Cash at Teller — locked here, see
+   *  denominationManagedGlAccountIds. */
+  isDenominationManaged(glAccountId: number): boolean {
+    return this.denominationManagedGlAccountIds.includes(glAccountId);
  }

  /**
@@ -176,17 +218,30 @@ export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {

        this.openingBalancesData = openingBalancesData;

-        entry.valueChanges.subscribe(() => {
-          this.debitsSum = 0;
-          this.creditsSum = 0;
-          entry.controls.forEach((value) => {
-            this.debitsSum += value.value.debit;
-            this.creditsSum += value.value.credit;
-          });
-        });
+        entry.valueChanges.subscribe(() => this.recomputeSums());
+        // Runs once immediately too: valueChanges only fires on a later edit, and the locked cash
+        // row's own prefilled figure (set once, above, never through a further value change) would
+        // otherwise never be reflected in the banner at all.
+        this.recomputeSums();
      });
  }

+  /** Total Debit / Total Credit shown in the balance banner. A locked (denomination-managed) row is
+   *  excluded here exactly as it is excluded from the form's own .value used at submit time — this
+   *  screen only needs to balance the accounts it is itself about to (re)define, not the one
+   *  Migrate Cash Denomination already settled and this form can never touch. */
+  private recomputeSums(): void {
+    this.debitsSum = 0;
+    this.creditsSum = 0;
+    this.glAccountEntries.controls.forEach((control) => {
+      if (control.disabled) {
+        return;
+      }
+      this.debitsSum += control.value.debit || 0;
+      this.creditsSum += control.value.credit || 0;
+    });
+  }
+
  /**
   * Submits the opening balances form and defines opening balances,
   * if successful redirects to view created transaction.
@@ -53,10 +53,13 @@
        <fa-icon icon="sync" [class.fa-spin]="ledgerLoading"></fa-icon>
        Refresh
      </button>
-      <button class="gl-hero-btn gl-hero-btn--primary" [routerLink]="['/accounting/journal-entries/create']">
-        <fa-icon icon="plus"></fa-icon>
-        New Entry
-      </button>
+      <!-- New Entry — hidden while Create Journal Entries is disabled, see disabled-features.ts -->
+      @if (!disabledFeatures.createJournalEntries) {
+        <button class="gl-hero-btn gl-hero-btn--primary" [routerLink]="['/accounting/journal-entries/create']">
+          <fa-icon icon="plus"></fa-icon>
+          New Entry
+        </button>
+      }
    </div>
  </div>
 </div>
@@ -276,7 +279,7 @@
    <div class="gl-fgroup">
      <label class="gl-flabel"><fa-icon icon="calendar-alt"></fa-icon> From Date</label>
      <mat-form-field appearance="outline" class="gl-ffield">
-        <input matInput [matDatepicker]="dpFrom" [min]="minDate" [max]="maxDate" [formControl]="transactionDateFrom" />
+        <input matInput [matDatepicker]="dpFrom" [min]="minDate" [formControl]="transactionDateFrom" />
        <mat-datepicker-toggle matSuffix [for]="dpFrom"></mat-datepicker-toggle>
        <mat-datepicker #dpFrom></mat-datepicker>
      </mat-form-field>
@@ -285,7 +288,7 @@
    <div class="gl-fgroup">
      <label class="gl-flabel"><fa-icon icon="calendar-alt"></fa-icon> To Date</label>
      <mat-form-field appearance="outline" class="gl-ffield">
-        <input matInput [matDatepicker]="dpTo" [min]="minDate" [max]="maxDate" [formControl]="transactionDateTo" />
+        <input matInput [matDatepicker]="dpTo" [min]="minDate" [formControl]="transactionDateTo" />
        <mat-datepicker-toggle matSuffix [for]="dpTo"></mat-datepicker-toggle>
        <mat-datepicker #dpTo></mat-datepicker>
      </mat-form-field>
@@ -350,13 +353,7 @@
      <div class="gl-fgroup">
        <label class="gl-flabel"><fa-icon icon="calendar-check"></fa-icon> Submitted From</label>
        <mat-form-field appearance="outline" class="gl-ffield">
-          <input
-            matInput
-            [matDatepicker]="dpSubFrom"
-            [min]="minDate"
-            [max]="maxDate"
-            [formControl]="submittedOnDateFrom"
-          />
+          <input matInput [matDatepicker]="dpSubFrom" [min]="minDate" [formControl]="submittedOnDateFrom" />
          <mat-datepicker-toggle matSuffix [for]="dpSubFrom"></mat-datepicker-toggle>
          <mat-datepicker #dpSubFrom></mat-datepicker>
        </mat-form-field>
@@ -365,7 +362,7 @@
      <div class="gl-fgroup">
        <label class="gl-flabel"><fa-icon icon="calendar-check"></fa-icon> Submitted To</label>
        <mat-form-field appearance="outline" class="gl-ffield">
-          <input matInput [matDatepicker]="dpSubTo" [min]="minDate" [max]="maxDate" [formControl]="submittedOnDateTo" />
+          <input matInput [matDatepicker]="dpSubTo" [min]="minDate" [formControl]="submittedOnDateTo" />
          <mat-datepicker-toggle matSuffix [for]="dpSubTo"></mat-datepicker-toggle>
          <mat-datepicker #dpSubTo></mat-datepicker>
        </mat-form-field>
@@ -536,7 +533,7 @@
  </div>

  <div class="gl-table-shell">
-    <mat-table [dataSource]="dataSource" matSort class="gl-mat-table">
+    <mat-table [dataSource]="dataSource" matSort matSortActive="id" matSortDirection="desc" class="gl-mat-table">
      <!-- #ID -->
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th">#</mat-header-cell>
@@ -715,7 +712,10 @@
      ></mat-row>
    </mat-table>

-    @if (totalEntries === 0) {
+    <!-- Keyed off the rows actually rendered, not totalEntries: that count comes from the ledger
+         summary, which only reports a figure once a GL account is chosen, so the search view would
+         otherwise show "No entries found" above a full table. -->
+    @if (((dataSource?.entries$ | async) || []).length === 0) {
      <div class="gl-empty">
        <div class="gl-empty__icon"><fa-icon icon="search"></fa-icon></div>
        <div class="gl-empty__title">No entries found</div>
@@ -724,7 +724,11 @@
    }

    <div class="gl-pager-wrap">
-      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+      <mat-paginator
+        [length]="(dataSource?.records$ | async) || 0"
+        [pageSizeOptions]="[10, 25, 50, 100]"
+        showFirstLastButtons
+      ></mat-paginator>
    </div>
  </div>
 </div>
@@ -14,6 +14,7 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
 import { merge } from 'rxjs';
 import { tap, startWith, map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { AccountingService } from '../accounting.service';
+import { DISABLED_ACCOUNTING_FEATURES } from '../disabled-features';
 import { SettingsService } from 'app/settings/settings.service';
 import { JournalEntriesDataSource } from './journal-entry.datasource';
 import { Dates } from 'app/core/utils/dates';
@@ -89,7 +90,9 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView

  // ── Misc ──────────────────────────────────────────────────────────────────
  minDate = new Date(2000, 0, 1);
-  maxDate = new Date();
+  maxDate: Date = null;
+  /** Accounting features switched off for this installation — see disabled-features.ts. */
+  disabledFeatures = DISABLED_ACCOUNTING_FEATURES;

  // ── Filter controls ───────────────────────────────────────────────────────
  officeName = new UntypedFormControl();
@@ -205,7 +208,7 @@ export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterView
  }

  ngOnInit() {
-    this.maxDate = this.settingsService.businessDate;
+    this.maxDate = null;
    this.paginator.pageSize = 10;
    this.restoreState();
    this.setFilteredOffices();
@@ -74,6 +74,22 @@ export class AccountsService {
    return this.http.get('/fixeddepositaccounts', { params: httpParams });
  }

+  /**
+   * FD Dashboard's data source: every ACTIVE FD, id/account/client/product identity, maturity date
+   * and deposit/maturity amounts only. Deliberately a separate, narrow endpoint rather than
+   * getFixedDepositAccounts() above -- that one's backend query joins in six more tables (audit
+   * who-did-what-when, currency, tax group) an unbounded dashboard fetch does not need, over columns
+   * that had no index until this feature added one (see backend migration 0571).
+   */
+  getFixedDepositMaturityDashboard(): Observable<any> {
+    return this.http.get('/fixeddepositaccounts/maturity-dashboard');
+  }
+
+  /** RD Dashboard: running RDs with their installment position, closures and penalty income for the month. */
+  getRecurringDepositDashboard(): Observable<any> {
+    return this.http.get('/recurringdepositaccounts/dashboard');
+  }
+
  getRecurringDepositAccounts(params: AccountListParams = {}): Observable<any> {
    let httpParams = new HttpParams()
      .set('paged', 'true')
@@ -34,6 +34,17 @@ export class AmlService {
    return this.http.post(`/aml/alerts/${alertId}/review`, { disposition, notes });
  }

+  /**
+   * Decides named rules within one alert, leaving its other rules open.
+   *
+   * <p>
+   * The alert's own status follows from what is left undecided, so it is not sent: whitelisting five of six rules
+   * leaves the alert open on the sixth.
+   */
+  reviewAlertRules(alertId: number, ruleCodes: string[], disposition: string, notes: string): Observable<any> {
+    return this.http.post(`/aml/alerts/${alertId}/review`, { disposition, notes, ruleCodes });
+  }
+
  // ═══ Recurring-alert review queue ═══

  /**
@@ -122,6 +133,15 @@ export class AmlService {
    return this.http.get<any[]>('/aml/ctr-reports');
  }

+  /**
+   * The reportable lines behind the generated CTRs, each resolved to the account, customer, branch
+   * and date a FIU-IND filing names. Omit `reportId` for every generated month.
+   */
+  getCtrReportLines(reportId?: number): Observable<any[]> {
+    const params = reportId ? new HttpParams().set('reportId', String(reportId)) : undefined;
+    return this.http.get<any[]>('/aml/ctr-reports/lines', { params });
+  }
+
  /** month format: yyyy-MM */
  generateCtrReport(month: string): Observable<any> {
    return this.http.post('/aml/ctr-reports/generate', { month });
@@ -132,4 +152,38 @@ export class AmlService {
  getRiskCategoryHistory(clientId: number): Observable<any[]> {
    return this.http.get<any[]>(`/clients/${clientId}/risk-category-history`);
  }
+
+  // ═══ Risk-category changes (maker-checker) ═══
+  //
+  // The rating decides how often a customer is re-KYC'd and what AML thresholds apply to them, so
+  // it moves only once a checker agrees rather than on one officer's say-so.
+
+  /** @param requestedCategory 1 Low, 2 Medium, 3 High */
+  requestRiskChange(clientId: number, requestedCategory: number, reason: string): Observable<any> {
+    return this.http.post('/aml/risk-change-requests', { clientId, requestedCategory, reason });
+  }
+
+  getRiskChangeRequests(status?: string): Observable<any[]> {
+    const params = status ? new HttpParams().set('status', status) : undefined;
+    return this.http.get<any[]>('/aml/risk-change-requests', { params });
+  }
+
+  approveRiskChange(requestId: number): Observable<any> {
+    return this.http.post(`/aml/risk-change-requests/${requestId}/approve`, {});
+  }
+
+  rejectRiskChange(requestId: number, rejectionReason: string): Observable<any> {
+    return this.http.post(`/aml/risk-change-requests/${requestId}/reject`, { rejectionReason });
+  }
+
+  /**
+   * The latest behaviour window for each customer, as the nightly job computed it.
+   *
+   * One row per customer carrying the review period's figures and the rating they suggest. The Risk Review report
+   * prefers these over its own per-alert reckoning, because a rating describes a period rather than the handful of
+   * transactions that happened to trip a rule.
+   */
+  getBehaviourWindows(): Observable<any[]> {
+    return this.http.get<any[]>('/risk-review/behaviour-windows');
+  }
 }
@@ -63,6 +63,8 @@ import { CfcfrmsModule } from './cfcfrms/cfcfrms.module';
 import { BankCalendarModule } from './bank-calendar/bank-calendar.module';
 import { DeafModule } from './deaf/deaf.module';
 import { SavingsDailyInterestModule } from './savings-daily-interest/savings-daily-interest.module';
+import { FdDashboardModule } from './fd-dashboard/fd-dashboard.module';
+import { RdDashboardModule } from './rd-dashboard/rd-dashboard.module';
 import { DicgcModule } from './dicgc/dicgc.module';
 import { FiuModule } from './fiu/fiu.module';
 import { GlReportsModule } from './gl-reports/gl-reports.module';
@@ -176,6 +178,8 @@ export function HttpLoaderFactory(http: HttpClient) {
    BankCalendarModule,
    DeafModule,
    SavingsDailyInterestModule,
+    FdDashboardModule,
+    RdDashboardModule,
    DicgcModule,
    FiuModule,
    GlReportsModule,
@@ -0,0 +1,154 @@
+<!--
+  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="bor-root">
+  <div class="bor-head">
+    <div class="bor-head-left">
+      <fa-icon icon="gavel" class="bor-head-ic"></fa-icon>
+      <div>
+        <h2 class="bor-head-t">Board of Resolution Register — Share Capital</h2>
+        <p class="bor-head-s">
+          Every share account with the board resolution that authorised the allotment. Accounts with no resolution on
+          record sort to the top.
+        </p>
+      </div>
+    </div>
+    <button
+      class="bor-btn bor-btn--xls"
+      type="button"
+      [disabled]="exporting || !filtered.length"
+      (click)="exportExcel()"
+    >
+      <fa-icon icon="file-excel"></fa-icon>
+      {{ exporting ? 'Exporting…' : 'Export' }}
+    </button>
+  </div>
+
+  @if (loading) {
+    <div class="bor-note">Loading the register…</div>
+  } @else if (loadError) {
+    <div class="bor-note bor-note--warn"><fa-icon icon="exclamation-triangle"></fa-icon> {{ loadError }}</div>
+  }
+
+  @if (!loading && !loadError) {
+    <!-- Counted over the whole register, not the filtered view: it is a standing figure the
+         secretary acts on, and hiding it behind a filter would hide the problem. -->
+    @if (missingResolutionCount > 0) {
+      <div class="bor-note bor-note--warn">
+        <fa-icon icon="exclamation-triangle"></fa-icon>
+        {{ missingResolutionCount }} share account{{ missingResolutionCount === 1 ? '' : 's' }} carr{{
+          missingResolutionCount === 1 ? 'ies' : 'y'
+        }}
+        no resolution number. Share capital allotted without a board resolution cannot be evidenced to the Registrar.
+      </div>
+    }
+
+    <div class="bor-kpis">
+      <div class="bor-kpi">
+        <div class="bor-kpi-n">{{ filtered.length | number }}</div>
+        <div class="bor-kpi-l">Share Accounts</div>
+      </div>
+      <div class="bor-kpi bor-kpi--blue">
+        <div class="bor-kpi-n">{{ distinctResolutions | number }}</div>
+        <div class="bor-kpi-l">Resolutions</div>
+      </div>
+      <div class="bor-kpi bor-kpi--green">
+        <div class="bor-kpi-n">{{ totalShares | number }}</div>
+        <div class="bor-kpi-l">Shares Allotted</div>
+      </div>
+      <div class="bor-kpi bor-kpi--amber">
+        <div class="bor-kpi-n">&#8377;{{ totalValue | number: '1.0-0' }}</div>
+        <div class="bor-kpi-l">Share Value</div>
+      </div>
+    </div>
+
+    <div class="bor-filters">
+      <div class="bor-filter">
+        <label>Resolution No.</label>
+        <input class="bor-inp" type="text" [(ngModel)]="filterResolution" placeholder="e.g. BOR/2026-27/001" />
+      </div>
+      <div class="bor-filter">
+        <label>Branch</label>
+        <select class="bor-inp" [(ngModel)]="filterBranch">
+          <option value="">All branches</option>
+          @for (b of branches; track b) {
+            <option [value]="b">{{ b }}</option>
+          }
+        </select>
+      </div>
+      <div class="bor-filter">
+        <label>Status</label>
+        <select class="bor-inp" [(ngModel)]="filterStatus">
+          <option [ngValue]="''">Any status</option>
+          @for (s of statuses; track s) {
+            <option [ngValue]="s">{{ statusText(s) }}</option>
+          }
+        </select>
+      </div>
+      <div class="bor-filter bor-filter--grow">
+        <label>Search</label>
+        <input class="bor-inp" type="text" [(ngModel)]="search" placeholder="Member name, share A/c or CIF…" />
+      </div>
+      <label class="bor-check">
+        <input type="checkbox" [(ngModel)]="missingOnly" />
+        No resolution only
+      </label>
+      <button class="bor-btn" type="button" (click)="resetFilters()"><fa-icon icon="undo"></fa-icon> Reset</button>
+    </div>
+
+    <div class="bor-table-wrap">
+      <table class="bor-table">
+        <thead>
+          <tr>
+            <th>Resolution No.</th>
+            <th>Resolution Date</th>
+            <th>Share A/c No.</th>
+            <th>CIF No.</th>
+            <th>Member Name</th>
+            <th>Branch</th>
+            <th>Product</th>
+            <th class="num">Shares</th>
+            <th class="num">Share Value</th>
+            <th class="num">Tranches</th>
+            <th>Status</th>
+            <th>Activated On</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (r of filtered; track r.shareAccountId) {
+            <tr [class.bor-row--missing]="!r.resolutionNumber">
+              <td>
+                @if (r.resolutionNumber) {
+                  <strong class="bor-res">{{ r.resolutionNumber }}</strong>
+                } @else {
+                  <span class="bor-missing">Not recorded</span>
+                }
+              </td>
+              <td class="mono">{{ r.resolutionDate || '—' }}</td>
+              <td class="mono">{{ r.accountNo }}</td>
+              <td class="mono">{{ r.cifNumber || '—' }}</td>
+              <td>{{ r.clientName }}</td>
+              <td>{{ r.officeName || '—' }}</td>
+              <td>{{ r.productName || '—' }}</td>
+              <td class="num">{{ r.approvedShares | number }}</td>
+              <td class="num strong">{{ r.shareValue | number: '1.2-2' }}</td>
+              <td class="num">{{ r.trancheCount }}</td>
+              <td>
+                <span [class]="statusClass(r.statusEnum)">{{ statusText(r.statusEnum) }}</span>
+              </td>
+              <td class="mono">{{ r.activatedDate || '—' }}</td>
+            </tr>
+          } @empty {
+            <tr>
+              <td colspan="12" class="bor-empty">No share account matches the filters.</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  }
+</div>
@@ -0,0 +1,313 @@
+/**
+ * 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/.
+ */
+
+.bor-root {
+  padding: 20px 24px 40px;
+  background: #f8fafc;
+  min-height: 100%;
+}
+
+.bor-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.bor-head-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.bor-head-ic {
+  font-size: 26px;
+  color: #0f4f3c;
+  margin-top: 2px;
+}
+
+.bor-head-t {
+  margin: 0 0 3px;
+  font-size: 20px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.bor-head-s {
+  margin: 0;
+  max-width: 780px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #64748b;
+}
+
+.bor-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  padding: 11px 14px;
+  margin-bottom: 14px;
+  border: 1px solid #bfdbfe;
+  border-radius: 9px;
+  background: #eff6ff;
+  color: #1e3a8a;
+  font-size: 12.5px;
+  line-height: 1.55;
+
+  fa-icon {
+    flex: 0 0 auto;
+    margin-top: 1px;
+  }
+
+  /* An allotment with no resolution behind it is the finding, not a detail. */
+  &--warn {
+    border-color: #fde68a;
+    background: #fffbeb;
+    color: #92400e;
+
+    fa-icon {
+      color: #d97706;
+    }
+  }
+}
+
+.bor-kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.bor-kpi {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-left: 4px solid #0f4f3c;
+  border-radius: 11px;
+  padding: 12px 16px;
+
+  &--blue {
+    border-left-color: #2563eb;
+  }
+
+  &--green {
+    border-left-color: #15803d;
+  }
+
+  &--amber {
+    border-left-color: #d97706;
+  }
+}
+
+.bor-kpi-n {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1e293b;
+  line-height: 1.2;
+}
+
+.bor-kpi-l {
+  font-size: 12px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.bor-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 12px;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 11px;
+}
+
+.bor-filter {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: #64748b;
+  }
+
+  &--grow {
+    flex: 1 1 240px;
+  }
+}
+
+.bor-inp {
+  height: 34px;
+  min-width: 170px;
+  padding: 0 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 7px;
+  font: inherit;
+  font-size: 13px;
+  color: #1e293b;
+  background: #fff;
+
+  &:focus {
+    outline: 2px solid #2563eb;
+    outline-offset: -1px;
+  }
+}
+
+.bor-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  font-size: 12.5px;
+  color: #334155;
+  cursor: pointer;
+}
+
+.bor-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid #cbd5e1;
+  border-radius: 7px;
+  background: #fff;
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #334155;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: #f1f5f9;
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: default;
+  }
+
+  &--xls {
+    border-color: #15803d;
+    background: #16a34a;
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background: #15803d;
+    }
+  }
+}
+
+.bor-table-wrap {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 11px;
+  overflow-x: auto;
+}
+
+.bor-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+
+  th {
+    text-align: left;
+    padding: 10px;
+    background: #f1f5f9;
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #475569;
+    white-space: nowrap;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  td {
+    padding: 11px 10px;
+    border-bottom: 1px solid #f1f5f9;
+    vertical-align: middle;
+    color: #334155;
+  }
+
+  .num {
+    text-align: right;
+    font-family: 'DM Mono', monospace;
+  }
+
+  .mono {
+    font-family: 'DM Mono', monospace;
+  }
+
+  .strong {
+    font-weight: 700;
+  }
+
+  tbody tr:hover {
+    background: #f8fafc;
+  }
+}
+
+/* The row an auditor is looking for, marked in the table as well as counted above it. */
+.bor-row--missing {
+  background: #fffbeb;
+}
+
+.bor-res {
+  color: #0f4f3c;
+  font-family: 'DM Mono', monospace;
+}
+
+.bor-missing {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #fef3c7;
+  color: #92400e;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.bor-status {
+  display: inline-block;
+  padding: 2px 9px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  background: #f1f5f9;
+  color: #475569;
+
+  &--active {
+    background: #dcfce7;
+    color: #15803d;
+  }
+
+  &--submitted,
+  &--approved {
+    background: #fef3c7;
+    color: #b45309;
+  }
+
+  &--rejected,
+  &--closed {
+    background: #fee2e2;
+    color: #b91c1c;
+  }
+}
+
+.bor-empty {
+  padding: 30px;
+  text-align: center;
+  color: #94a3b8;
+}
@@ -0,0 +1,221 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, OnInit, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+import { exportWorkbook } from '../cashier/cashier-export';
+import { BorRegisterRow, BorReportService } from './bor-report.service';
+
+/** m_share_account.status_enum, as the register labels it. */
+const STATUS_LABEL: Record<number, string> = {
+  100: 'Submitted',
+  200: 'Approved',
+  300: 'Active',
+  400: 'Rejected',
+  500: 'Closed',
+  600: 'Inactive'
+};
+
+/**
+ * The Board of Resolution register for share capital.
+ *
+ * A co-operative allots shares only under a board resolution, and this is the list the Registrar or
+ * an auditor asks for: every member's holding against the resolution that authorised it. The
+ * account with no resolution recorded is the point of the register, so it sorts to the top and is
+ * counted on its own rather than being left to be noticed.
+ */
+@Component({
+  selector: 'mifosx-bor-report',
+  templateUrl: './bor-report.component.html',
+  styleUrls: ['./bor-report.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    FormsModule
+  ]
+})
+export class BorReportComponent implements OnInit {
+  private borService = inject(BorReportService);
+
+  readonly statusLabel = STATUS_LABEL;
+
+  rows: BorRegisterRow[] = [];
+  loading = false;
+  loadError = '';
+
+  /** '' = every status. */
+  filterStatus: number | '' = '';
+  filterBranch = '';
+  filterResolution = '';
+  search = '';
+  /** Only the accounts with no resolution on file — the ones that need chasing. */
+  missingOnly = false;
+
+  exporting = false;
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.loading = true;
+    this.loadError = '';
+    this.borService.getRegister().subscribe({
+      next: (rows) => {
+        this.loading = false;
+        this.rows = rows;
+      },
+      error: (err: any) => {
+        this.loading = false;
+        this.rows = [];
+        this.loadError = err?.error?.defaultUserMessage || 'Could not load the BOR register.';
+      }
+    });
+  }
+
+  /** Branches present in the data, so the filter offers only what can actually be selected. */
+  get branches(): string[] {
+    return [...new Set(this.rows.map((r) => r.officeName).filter(Boolean))].sort();
+  }
+
+  get statuses(): number[] {
+    return [...new Set(this.rows.map((r) => r.statusEnum))].sort((a, b) => a - b);
+  }
+
+  get filtered(): BorRegisterRow[] {
+    const needle = this.search.trim().toLowerCase();
+    const resolutionNeedle = this.filterResolution.trim().toLowerCase();
+    return this.rows.filter((r) => {
+      if (this.filterStatus !== '' && r.statusEnum !== this.filterStatus) {
+        return false;
+      }
+      if (this.filterBranch && r.officeName !== this.filterBranch) {
+        return false;
+      }
+      if (this.missingOnly && r.resolutionNumber) {
+        return false;
+      }
+      if (resolutionNeedle && !r.resolutionNumber.toLowerCase().includes(resolutionNeedle)) {
+        return false;
+      }
+      if (
+        needle &&
+        !(
+          r.clientName.toLowerCase().includes(needle) ||
+          r.accountNo.toLowerCase().includes(needle) ||
+          r.cifNumber.toLowerCase().includes(needle)
+        )
+      ) {
+        return false;
+      }
+      return true;
+    });
+  }
+
+  get totalShares(): number {
+    return this.filtered.reduce((s, r) => s + r.approvedShares, 0);
+  }
+
+  get totalValue(): number {
+    return this.filtered.reduce((s, r) => s + r.shareValue, 0);
+  }
+
+  /** How many resolutions the filtered holdings were authorised under. */
+  get distinctResolutions(): number {
+    return new Set(this.filtered.map((r) => r.resolutionNumber).filter(Boolean)).size;
+  }
+
+  get missingResolutionCount(): number {
+    return this.rows.filter((r) => !r.resolutionNumber).length;
+  }
+
+  statusText(statusEnum: number): string {
+    return STATUS_LABEL[statusEnum] || '—';
+  }
+
+  statusClass(statusEnum: number): string {
+    return 'bor-status bor-status--' + (STATUS_LABEL[statusEnum] || 'unknown').toLowerCase();
+  }
+
+  resetFilters(): void {
+    this.filterStatus = '';
+    this.filterBranch = '';
+    this.filterResolution = '';
+    this.search = '';
+    this.missingOnly = false;
+  }
+
+  async exportExcel(): Promise<void> {
+    this.exporting = true;
+    try {
+      const rows = this.filtered;
+      await exportWorkbook(
+        [
+          {
+            sheetName: 'BOR Register',
+            title: 'Board of Resolution Register — Share Capital',
+            subtitle: `${rows.length} share account(s) · ${this.distinctResolutions} resolution(s) · ${this.totalShares} shares`,
+            headers: [
+              'Resolution No.',
+              'Resolution Date',
+              'Share A/c No.',
+              'CIF No.',
+              'Member Name',
+              'Branch',
+              'Product',
+              'Shares',
+              'Unit Price',
+              'Share Value',
+              'Tranches',
+              'Status',
+              'Activated On'
+            ],
+            widths: [
+              20,
+              16,
+              18,
+              16,
+              30,
+              18,
+              18,
+              10,
+              12,
+              14,
+              10,
+              12,
+              14
+            ],
+            rows: rows.map((r) => [
+              // Named rather than left blank, because an empty cell in a filing reads as an
+              // oversight in the export rather than a gap in the register.
+              r.resolutionNumber || 'NOT RECORDED',
+              r.resolutionDate || '—',
+              r.accountNo,
+              r.cifNumber,
+              r.clientName,
+              r.officeName,
+              r.productName,
+              r.approvedShares,
+              r.unitPrice,
+              r.shareValue,
+              r.trancheCount,
+              this.statusText(r.statusEnum),
+              r.activatedDate || '—'
+            ])
+          }
+        ],
+        'BOR-Register'
+      );
+    } finally {
+      this.exporting = false;
+    }
+  }
+}
@@ -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/.
+ */
+
+/** Angular Imports */
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable, map } from 'rxjs';
+
+/** Custom Helpers */
+import { toIsoDate } from '../core/utils/api-date';
+
+/** One share account and the board resolution that authorised it. */
+export interface BorRegisterRow {
+  shareAccountId: number;
+  accountNo: string;
+  clientId: number;
+  cifNumber: string;
+  clientName: string;
+  officeId: number | null;
+  officeName: string;
+  productName: string;
+  currencyCode: string;
+  statusEnum: number;
+  approvedShares: number;
+  pendingShares: number;
+  unitPrice: number;
+  shareValue: number;
+  resolutionNumber: string;
+  /** ISO date, or '' where no meeting date was ever recorded against the allotment. */
+  resolutionDate: string;
+  /** How many purchase tranches make up the holding. */
+  trancheCount: number;
+  submittedDate: string;
+  approvedDate: string;
+  activatedDate: string;
+  closedDate: string;
+}
+
+/**
+ * The BOR register.
+ *
+ * One call returns every account with its resolution. The share allotment report next door fetches
+ * each account separately and stops at two hundred, which is a limit on a register rather than on a
+ * page of one.
+ */
+@Injectable({ providedIn: 'root' })
+export class BorReportService {
+  private http = inject(HttpClient);
+
+  getRegister(status?: number, officeId?: number): Observable<BorRegisterRow[]> {
+    let params = new HttpParams();
+    if (status != null) {
+      params = params.set('status', String(status));
+    }
+    if (officeId != null) {
+      params = params.set('officeId', String(officeId));
+    }
+    return this.http
+      .get<any[]>('/shareaccounts/bor-register', { params })
+      .pipe(map((rows) => (rows || []).map((r) => this.toRow(r))));
+  }
+
+  /** Dates arrive as [y, M, d] arrays; flattened to ISO so they sort and filter as strings. */
+  private toRow(r: any): BorRegisterRow {
+    return {
+      shareAccountId: r.shareAccountId,
+      accountNo: r.accountNo || '',
+      clientId: r.clientId,
+      cifNumber: r.cifNumber || '',
+      clientName: r.clientName || '',
+      officeId: r.officeId ?? null,
+      officeName: r.officeName || '',
+      productName: r.productName || '',
+      currencyCode: r.currencyCode || 'INR',
+      statusEnum: Number(r.statusEnum) || 0,
+      approvedShares: Number(r.approvedShares) || 0,
+      pendingShares: Number(r.pendingShares) || 0,
+      unitPrice: Number(r.unitPrice) || 0,
+      shareValue: Number(r.shareValue) || 0,
+      resolutionNumber: (r.resolutionNumber || '').trim(),
+      resolutionDate: toIsoDate(r.resolutionDate),
+      trancheCount: Number(r.trancheCount) || 0,
+      submittedDate: toIsoDate(r.submittedDate),
+      approvedDate: toIsoDate(r.approvedDate),
+      activatedDate: toIsoDate(r.activatedDate),
+      closedDate: toIsoDate(r.closedDate)
+    };
+  }
+}
@@ -12,6 +12,7 @@ import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { catchError, of } from 'rxjs';
 import { CashierService } from '../cashier.service';
+import { businessToday } from 'app/core/utils/business-today';

 interface RegisterRow {
  accountId: number;
@@ -83,7 +84,7 @@ export class AccountRegisterComponent implements OnInit {

  /** Local date — toISOString() would shift the day in any timezone behind UTC. */
  private today(): string {
-    const d = new Date();
+    const d = businessToday();
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
  }

@@ -49,6 +49,18 @@
    </div>
  }

+  @if (firstOpenNeedsCashMigration && !missedOnly) {
+    <div class="bd-locked">
+      <mat-icon>lock</mat-icon>
+      <span>
+        This branch has never opened a business day, and its Cash at Vault GL account has no opening balance yet. Count
+        the vault and open the first business day together from
+        <a [routerLink]="['/accounting/migrate-cash-denomination']">Migrate Cash Denomination</a> — Open Day here is
+        locked until that is done, so today's cash tracking never starts out of step with the ledger.
+      </span>
+    </div>
+  }
+
  <!-- Missed closes first: these are the ones that need action. -->
  @if (missed.length > 0) {
    <div class="db-exceptions">
@@ -95,11 +107,26 @@
        </span>
      </div>
      @if (canOperate) {
-        <button type="button" class="pg-btn pg-btn--primary" (click)="startClose(openDay)">
+        <button
+          type="button"
+          class="pg-btn pg-btn--primary"
+          (click)="startClose(openDay)"
+          [disabled]="interestPending.length > 0"
+        >
          <mat-icon>lock</mat-icon> Close Day
        </button>
      }
    </div>
+    @if (interestPending.length > 0) {
+      <div class="bd-interest-alert">
+        <mat-icon>warning</mat-icon>
+        <span>
+          Savings interest posting report is not approved for <strong>{{ interestPending.join(', ') }}</strong
+          >. Approve it in <a routerLink="/reports/interest-posting">Reports → Interest Posting Reports</a> before
+          closing the day.
+        </span>
+      </div>
+    }
  } @else if (loaded && canOperate) {
    <div class="bd-current bd-current--shut">
      <div class="bd-current__main">
@@ -703,10 +730,10 @@
                  <span class="db-muted">· {{ timeOnly(d.closedAt) }}</span>
                }
              </td>
-              <td class="num">{{ d.closingCash != null ? '₹' + (d.closingCash | number: '1.2-2') : '—' }}</td>
-              <td class="num">{{ d.bookCash != null ? '₹' + (d.bookCash | number: '1.2-2') : '—' }}</td>
+              <td class="num">{{ hasValue(d.closingCash) ? '₹' + (d.closingCash | number: '1.2-2') : '—' }}</td>
+              <td class="num">{{ hasValue(d.bookCash) ? '₹' + (d.bookCash | number: '1.2-2') : '—' }}</td>
              <td>
-                @if (d.cashDifference == null) {
+                @if (!hasValue(d.cashDifference)) {
                  —
                } @else if (d.cashDifference === 0) {
                  <span class="db-badge db-badge--ok">Tallied</span>
@@ -30,6 +30,36 @@
  }
 }

+/* Blocks Open Day until the branch's first-ever open has gone through Migrate Cash Denomination —
+   see BranchDayComponent.checkFirstOpenCashMigration(). Same shape as .ve-note, in the error palette
+   the rest of this screen already uses for a missed close (.bd-missed). */
+.bd-locked {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  color: #b91c1c;
+  font-size: 12px;
+  line-height: 1.5;
+
+  mat-icon {
+    flex: none;
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+
+  a {
+    color: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+  }
+}
+
 .bd-success {
  padding: 10px 14px;
  margin-bottom: 14px;
@@ -342,3 +372,30 @@
    color: #d97706;
  }
 }
+
+// Shown under the open day while a savings interest posting report due today is unapproved.
+.bd-interest-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 8px 0 12px;
+  padding: 10px 14px;
+  border: 1px solid #f59e0b;
+  border-radius: 8px;
+  background: #fef3c7;
+  color: #92400e;
+  font-size: 13px;
+
+  mat-icon {
+    flex-shrink: 0;
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+
+  a {
+    color: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+  }
+}
@@ -10,7 +10,7 @@ import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { catchError, forkJoin, map, of, switchMap } from 'rxjs';
 import { CashierService } from '../cashier.service';

@@ -61,7 +61,8 @@ interface BranchDay {
  imports: [
    CommonModule,
    FormsModule,
-    MatIconModule
+    MatIconModule,
+    RouterLink
  ]
 })
 export class BranchDayComponent implements OnInit {
@@ -85,6 +86,12 @@ export class BranchDayComponent implements OnInit {
  loaded = false;
  errorMsg = '';
  successMsg = '';
+  /** True only for a branch that has never opened a business day and whose Cash at Vault / Cash at
+   *  Teller GL account has never had anything posted to it — Open Day here would let day-to-day cash
+   *  tracking begin while the ledger silently stays wherever it already was. The backend enforces
+   *  this independently too (see BranchDayRegisterApiResource#requireCashMigrationBeforeFirstEverOpen);
+   *  this flag only steers the user to the right screen before they hit that rejection. */
+  firstOpenNeedsCashMigration = false;

  // Open-day form
  showOpenForm = false;
@@ -182,6 +189,23 @@ export class BranchDayComponent implements OnInit {
    return this.totalOf(this.closeCounts);
  }

+  /**
+   * Savings products whose interest posting report is due today and not yet approved. The close is
+   * refused by the backend while any is pending; this only says so before the user tries.
+   */
+  interestPending: string[] = [];
+
+  private checkInterestReports(): void {
+    if (!this.openDay?.businessDate) {
+      this.interestPending = [];
+      return;
+    }
+    this.service
+      .interestDayCloseCheck(this.openDay.businessDate, this.openDay.officeId)
+      .pipe(catchError(() => of(null)))
+      .subscribe((res) => (this.interestPending = res?.pendingProducts ?? []));
+  }
+
  load(): void {
    this.loading = true;
    this.errorMsg = '';
@@ -202,6 +226,8 @@ export class BranchDayComponent implements OnInit {
        this.today = res?.today ?? '';
        this.canOperate = !!res?.canOperate;
        this.openDate = this.today;
+        this.checkFirstOpenCashMigration();
+        this.checkInterestReports();
      });

    this.service
@@ -212,9 +238,42 @@ export class BranchDayComponent implements OnInit {
      });
  }

+  /**
+   * Only relevant the moment this branch has never opened a business day before — every later
+   * open/close on this screen is untouched, so there is nothing to re-check once history exists.
+   */
+  private checkFirstOpenCashMigration(): void {
+    if (this.days.length > 0 || this.openDay) {
+      this.firstOpenNeedsCashMigration = false;
+      return;
+    }
+    this.service.cashGlStatus().subscribe({
+      next: (status: any) => {
+        // configured === false means this tenant has no Cash at Vault / Cash at Teller account
+        // mapped at all — nothing for this check to reconcile against, so it does not block.
+        this.firstOpenNeedsCashMigration = status?.configured !== false && !status?.hasBalance;
+      },
+      error: () => {
+        this.firstOpenNeedsCashMigration = false;
+      }
+    });
+  }
+
  /** True when the branch has no open day at all, so today can be opened. */
  get canOpenToday(): boolean {
-    return this.canOperate && !this.openDay;
+    return this.canOperate && !this.openDay && !this.firstOpenNeedsCashMigration;
+  }
+
+  /**
+   * A still-open day's closing/book figures are dropped from the API response entirely (the
+   * backend's Gson instance omits a null map value rather than sending it as JSON null), so the
+   * field arrives as undefined, not null. Checking only `!== null` against that — which a stricter
+   * pass of this file made the mistake of doing — leaves undefined on the "has a value" branch,
+   * which then renders `'₹' + null` (the number pipe's own null output, string-concatenated) as the
+   * literal text "₹null". This checks for either, the way an open day actually shows up.
+   */
+  hasValue(value: number | null | undefined): boolean {
+    return value !== null && value !== undefined;
  }

  startOpen(): void {
@@ -11,6 +11,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { AuthenticationService } from '../../core/authentication/authentication.service';
 import { ExportSheetSpec, exportWorkbook } from '../cashier-export';
+import { businessToday } from 'app/core/utils/business-today';

 interface SummaryRow {
  code: string;
@@ -1316,7 +1317,7 @@ export class CashClearingTransferSummaryComponent {
  private dateTag = '2607';

  constructor() {
-    const d = new Date();
+    const d = businessToday();
    this.asOnDate = `${String(d.getDate()).padStart(2, '0')}-${String(d.getMonth() + 1).padStart(2, '0')}-${d.getFullYear()}`;
    this.dateTag = `${String(d.getFullYear()).slice(-2)}${String(d.getMonth() + 1).padStart(2, '0')}`;

@@ -12,6 +12,7 @@ import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { CashierService } from '../cashier.service';
+import { businessToday } from 'app/core/utils/business-today';

 interface Denom {
  id: number;
@@ -63,7 +64,7 @@ export class CashExchangeEntryComponent implements OnInit {
  }

  ngOnInit(): void {
-    const d = new Date();
+    const d = businessToday();
    this.exchangeDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    this.service.getActiveDenominations().subscribe({
      next: (list) => {
@@ -18,6 +18,7 @@ import { MatInputModule } from '@angular/material/input';
 import { forkJoin, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { CashierService } from '../cashier.service';
+import { businessToday } from 'app/core/utils/business-today';

 type PageState = 'loading' | 'no-cashier' | 'needs-reconciliation' | 'already-settled' | 'form';

@@ -90,7 +91,7 @@ export class CashSettlementComponent implements OnInit {
  saving = false;

  ngOnInit(): void {
-    const d = new Date();
+    const d = businessToday();
    this.settlementDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    this.service
      .getTellers()
@@ -17,6 +17,7 @@ import { MatInputModule } from '@angular/material/input';
 import { of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { CashierService } from '../cashier.service';
+import { businessToday } from 'app/core/utils/business-today';

 interface Denom {
  id: number;
@@ -82,7 +83,7 @@ export class CashTransferComponent implements OnInit {
  loadingVault = false;

  ngOnInit(): void {
-    const d = new Date();
+    const d = businessToday();
    this.transferDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    this.service.getActiveDenominations().subscribe({
      next: (list) => {
@@ -17,6 +17,7 @@ import { forkJoin, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { CashierService } from '../cashier.service';
 import { AuthenticationService } from '../../core/authentication/authentication.service';
+import { businessToday } from 'app/core/utils/business-today';

 interface DenomRow {
  denominationId: number;
@@ -71,7 +72,7 @@ export class CashierPositionComponent implements OnInit {
  isCashierMode = false;

  ngOnInit(): void {
-    const d = new Date();
+    const d = businessToday();
    this.asOfDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;

    this.isCashierMode = this.authService.isCashierUser();
@@ -26,7 +26,6 @@ import { VaultPositionComponent } from './vault-position/vault-position.componen
 import { AccountRegisterComponent } from './account-register/account-register.component';
 import { ClosingCashReportComponent } from './closing-cash-report/closing-cash-report.component';
 import { ExcessTransactionReportComponent } from './excess-transaction-report/excess-transaction-report.component';
-import { ShareCollectionComponent } from './share-collection/share-collection.component';

 const routes: Routes = [
  Route.withShell([
@@ -345,11 +344,6 @@ const routes: Routes = [
          component: ExcessTransactionReportComponent,
          data: { title: 'Excess Transaction Report', breadcrumb: 'Excess Transaction Report' }
        },
-        {
-          path: 'share-collection',
-          component: ShareCollectionComponent,
-          data: { title: 'Share Collection', breadcrumb: 'Share Collection' }
-        },
        {
          path: 'transaction-entry',
          canActivate: [CashierOnlyGuard],
@@ -20,7 +20,6 @@ import { ReconciliationComponent } from './reconciliation/reconciliation.compone
 import { CashHistoryComponent } from './cash-history/cash-history.component';
 import { ClosingCashReportComponent } from './closing-cash-report/closing-cash-report.component';
 import { ExcessTransactionReportComponent } from './excess-transaction-report/excess-transaction-report.component';
-import { ShareCollectionComponent } from './share-collection/share-collection.component';

@NgModule({
  imports: [
@@ -35,8 +34,7 @@ import { ShareCollectionComponent } from './share-collection/share-collection.co
    ReconciliationComponent,
    CashHistoryComponent,
    ClosingCashReportComponent,
-    ExcessTransactionReportComponent,
-    ShareCollectionComponent
+    ExcessTransactionReportComponent
  ]
 })
 export class CashierModule {}
@@ -178,6 +178,13 @@ export class CashierService {
    return this.http.get('/vouchers/my-work', { params });
  }

+  /** One voucher and every debit/credit line it is made of — the full slip behind a summarised
+   *  row (a "+2 more" badge in a register only ever shows the first side of each). */
+  voucherDetail(voucherNo: string): Observable<any> {
+    const params = new HttpParams().set('voucherNo', voucherNo);
+    return this.http.get('/vouchers/detail', { params });
+  }
+
  /**
   * Account register for one date: what opened and closed that day, each account's balance as it
   * stood then, and what it holds now.
@@ -198,6 +205,23 @@ export class CashierService {
    return this.http.get('/branchday', { params });
  }

+  /**
+   * The savings products whose interest posting report is due for the date and not yet approved —
+   * the backend refuses to close any branch's day while one is pending.
+   */
+  interestDayCloseCheck(
+    date?: string,
+    officeId?: number
+  ): Observable<{ businessDate: string; canClose: boolean; pendingProducts: string[] }> {
+    let params = new HttpParams();
+    if (date) params = params.set('date', date);
+    if (officeId) params = params.set('officeId', String(officeId));
+    return this.http.get<{ businessDate: string; canClose: boolean; pendingProducts: string[] }>(
+      '/savingsinterestpostingreports/day-close-check',
+      { params }
+    );
+  }
+
  /** Days opened and never closed — today's own open day excluded. */
  branchDayMissed(officeId?: number): Observable<any> {
    let params = new HttpParams();
@@ -357,19 +381,6 @@ export class CashierService {
    return this.http.get<any[]>('/paymenttypes');
  }

-  // ── Share Collection ──
-  getShareAccountForCollection(accountId: string): Observable<any> {
-    return this.http.get(`/accounts/share/${accountId}`);
-  }
-
-  collectSharePayment(data: any): Observable<any> {
-    return this.http.post('/cashier/sharecollection', data);
-  }
-
-  getShareCollectionStatus(shareAccountId: number): Observable<any> {
-    return this.http.get(`/cashier/sharecollection/${shareAccountId}`);
-  }
-
  /** One unapplied Share Sundry receipt, found by the voucher number the member quotes. */
  getShareAdvanceByVoucher(voucherNo: string, glAccountNo: string, clientId?: number): Observable<any> {
    // The voucher travels as a query parameter, not a path segment: numbers are formatted
@@ -396,10 +407,18 @@ export class CashierService {
    return this.http.get('/shareadvancecollection/requirement', { params: { shareAccountId: String(shareAccountId) } });
  }

-  /** Receipts still sitting in Share Sundry, optionally for a single member. */
-  getUnappliedShareAdvances(clientId?: number): Observable<any> {
-    const suffix = clientId ? `?clientId=${clientId}` : '';
-    return this.http.get(`/shareadvancecollection${suffix}`);
+  /**
+   * Everything an Apply screen needs, in one call: `own` is this member's own unapplied receipts,
+   * ready to tick; `rows` is every other Share Collection receipt still available — unclaimed GL
+   * deposits and receipts linked to another member — which attach by voucher instead.
+   *
+   * One request rather than two: both lists come from the same table under the same filters, and
+   * splitting them across endpoints only meant the same rows were fetched twice and, where they
+   * overlapped, drawn twice on the same screen.
+   */
+  getShareCollectionReceipts(clientId?: number): Observable<any> {
+    const params = clientId ? new HttpParams().set('clientId', String(clientId)) : undefined;
+    return this.http.get('/shareadvancecollection/unattributed', { params });
  }

  /** Moves a receipt out of Sundry into share capital for an activated account. */
@@ -407,6 +426,12 @@ export class CashierService {
    return this.http.post(`/shareadvancecollection/${collectionId}/apply`, data);
  }

+  /** The receipt's own real Dr/Cr GL legs — never the GL account currently picked in a search box,
+   *  which is unrelated screen state that can name a different account than this receipt sits in. */
+  getShareAdvanceGlEntries(collectionId: number): Observable<any> {
+    return this.http.get(`/shareadvancecollection/${collectionId}/gl-entries`);
+  }
+
  /** Every additional-share tranche awaiting approval, across every share account. */
  getShareAdditionRequests(): Observable<any> {
    return this.http.get('/shareadditionrequests');
@@ -419,4 +444,14 @@ export class CashierService {
  getShareAdditionRequest(transactionId: number): Observable<any> {
    return this.http.get(`/shareadditionrequests/${transactionId}`);
  }
+
+  /**
+   * Entry Type options for a GL credit (General / Share Collection / DD Issue / …) — the
+   * "GLEntryType" code under Admin > System > Manage Codes, so an admin can add another type later
+   * without a deployment. Empty on failure rather than erroring, since a row missing this dropdown's
+   * options should still be usable for every other field.
+   */
+  getEntryTypeOptions(): Observable<any[]> {
+    return this.http.get<any[]>('/codes/name/GLEntryType/codevalues').pipe(catchError(() => of([])));
+  }
 }
@@ -51,6 +51,12 @@ export class ClerkShareWithdrawalService {
    return this.http.post(`/clerk/share-withdrawal-requests/${id}/validate`, {});
  }

+  /** Runs the exact same checklist approve() will run, against a draft that hasn't been submitted
+   *  yet — so the clerk sees it in the confirm dialog, before committing to the request. */
+  previewValidate(data: any): Observable<any> {
+    return this.http.post('/clerk/share-withdrawal-requests/preview-validate', data);
+  }
+
  approve(id: number): Observable<any> {
    return this.http.post(`/clerk/share-withdrawal-requests/${id}/approve`, {});
  }
@@ -303,8 +303,8 @@
            <tr>
              <th class="gl-th--voucher">Voucher No</th>
              <th class="gl-th--date">Date</th>
-              <th>A/C No</th>
-              <th>A/C Name</th>
+              <th>Debit</th>
+              <th>Credit</th>
              <th class="gl-th--pt">Payment Type</th>
              <th class="gl-th--teller">Teller</th>
              <th class="num gl-th--dr">DR (₹)</th>
@@ -326,8 +326,25 @@
                    <div class="gl-time">{{ r.txnTime }}</div>
                  }
                </td>
-                <td class="gl-acno">{{ r.acNo }}</td>
-                <td class="gl-acname">{{ r.acName }}</td>
+                <!-- Both legs of the voucher, the same pair My Vouchers shows — not just the one
+                     side this row's own denomination breakdown happens to know about. Falls back
+                     to that one side (acNo/acName) when the voucher predates m_voucher_line. -->
+                <td class="gl-acname">
+                  <div>{{ r.debitParty || r.acName }}</div>
+                  @if (r.debitAccount || r.acNo) {
+                    <div class="gl-acno">{{ r.debitAccount || r.acNo }}</div>
+                  }
+                </td>
+                <td class="gl-acname">
+                  @if (r.creditParty) {
+                    <div>{{ r.creditParty }}</div>
+                    @if (r.creditAccount) {
+                      <div class="gl-acno">{{ r.creditAccount }}</div>
+                    }
+                  } @else {
+                    <span class="gl-pt-none">—</span>
+                  }
+                </td>
                <td class="gl-pt">
                  @if (r.paymentType) {
                    <span class="gl-pt-badge">{{ r.paymentType }}</span>
@@ -12,6 +12,7 @@ import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { CashierService } from '../cashier.service';
+import { businessToday } from 'app/core/utils/business-today';

 /** Day-wise denomination-wise closing cash collected from deposits. */
@Component({
@@ -174,19 +175,24 @@ export class ClosingCashReportComponent implements OnInit {
    return this.noteRows.reduce((s, r) => s + Number(r.settledOutAmount ?? 0), 0);
  }

+  /**
+   * Summed from each row's own `netCount`, not re-derived from today's legs — a row's `netCount`
+   * already carries forward what a cashier was holding from before today (`openingCount`), for the
+   * force-closed-day/late-settlement case. Recomputing here from only today's vaultIn/deposit/
+   * withdrawal/settledOut dropped that carry-forward and put the Total row back into negative
+   * numbers a cashier had already reconciled.
+   */
  get noteNetCount(): number {
-    return this.noteVaultInCount + this.noteDepositCount - this.noteWithdrawalCount - this.noteSettledOutCount;
+    return this.noteRows.reduce((s, r) => s + Number(r.netCount ?? 0), 0);
  }

  /**
-   * What is left in the drawer in notes: everything that came in, less everything that went out.
-   *
-   * Was deposits minus withdrawals, which is the counter's movement rather than the drawer's
-   * contents — it left out the cash drawn from the vault, so a teller holding a ₹500 note saw a net
-   * of zero and had nothing to count against.
+   * What is left in the drawer in notes: everything that came in, less everything that went out —
+   * including cash carried forward from before today. See `noteNetCount` for why this sums each
+   * row's own `netAmount` rather than re-deriving it from today's legs.
   */
  get noteNetAmount(): number {
-    return this.noteVaultInAmount + this.noteDepositAmount - this.noteWithdrawalAmount - this.noteSettledOutAmount;
+    return this.noteRows.reduce((s, r) => s + Number(r.netAmount ?? 0), 0);
  }
  get coinRows(): any[] {
    return this.rows.filter((r) => r.kind === 'coin');
@@ -199,7 +205,7 @@ export class ClosingCashReportComponent implements OnInit {
  }

  ngOnInit(): void {
-    const d = new Date();
+    const d = businessToday();
    this.date = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    this.load();
    this.service.getTellers().subscribe({ next: (t: any[]) => (this.tellers = t || []), error: () => {} });
@@ -13,6 +13,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { Router } from '@angular/router';
 import { catchError, of } from 'rxjs';
 import { CashierService } from '../cashier.service';
+import { businessToday } from 'app/core/utils/business-today';

 /**
 * Which part of the day's work a row came from. Set by the server, one per source register.
@@ -95,7 +96,7 @@ export class DayBookComponent implements OnInit {

  /** Local date as yyyy-MM-dd — toISOString() would shift the day in any timezone behind UTC. */
  private today(): string {
-    const d = new Date();
+    const d = businessToday();
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
  }

@@ -17,6 +17,7 @@ import { MatInputModule } from '@angular/material/input';
 import { of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { CashierService } from '../cashier.service';
+import { businessToday } from 'app/core/utils/business-today';

 interface Denom {
  id: number;
@@ -79,7 +80,7 @@ export class InterCashierTransferComponent implements OnInit {
  }

  ngOnInit(): void {
-    const d = new Date();
+    const d = businessToday();
    this.transferDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    this.service.getActiveDenominations().subscribe({
      next: (list) => {
@@ -152,9 +152,21 @@
              <tbody>
                @for (r of g.rows; track r.voucherNo) {
                  <!-- The left edge repeats the section's own colour, so a row still says which part it
-                   is when the heading has scrolled away. -->
-                  <tr [class]="'mw-row mw-row--' + r.myRole">
-                    <td class="mw-vno">{{ r.voucherNo }}</td>
+                   is when the heading has scrolled away. Clicking anywhere on the row opens the full
+                   slip -- every line, not just the first debit and first credit this table has room
+                   to show. -->
+                  <tr
+                    [class]="'mw-row mw-row--' + r.myRole"
+                    class="mw-row--clickable"
+                    (click)="openDetail(r.voucherNo)"
+                    [attr.aria-busy]="loadingDetailFor === r.voucherNo"
+                  >
+                    <td class="mw-vno">
+                      {{ r.voucherNo }}
+                      @if (loadingDetailFor === r.voucherNo) {
+                        <mat-icon class="mw-vno__spinner" inline>hourglass_empty</mat-icon>
+                      }
+                    </td>
                    <td>
                      <span class="mw-badge" [class]="'mw-badge--' + (r.side || 'JV')">{{ sideLabel(r.side) }}</span>
                    </td>
@@ -171,7 +183,7 @@
                        <span class="mw-acct">{{ r.creditAccount }}</span>
                      }
                      @if (r.extraLines > 0) {
-                        <span class="mw-more">+{{ r.extraLines }} more</span>
+                        <span class="mw-more" title="Click the row to see every line">+{{ r.extraLines }} more</span>
                      }
                    </td>
                    <td class="num">₹{{ r.amount | number: '1.2-2' }}</td>
@@ -178,6 +178,21 @@
  }
 }

+.mw-row--clickable {
+  cursor: pointer;
+
+  &:hover {
+    background: #f8fafc;
+  }
+}
+
+.mw-vno__spinner {
+  margin-left: 4px;
+  font-size: 14px;
+  vertical-align: middle;
+  color: #94a3b8;
+}
+
 /* One section per part played. The heading carries the section's own count and total, so a maker's
   tally and a checker's are each readable without adding rows up. */
 .mw-group {
@@ -10,8 +10,11 @@ import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
-import { catchError, of } from 'rxjs';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { catchError, finalize, of } from 'rxjs';
 import { CashierService } from '../cashier.service';
+import { VoucherDetailDialogComponent } from './voucher-detail-dialog.component';
+import { businessToday } from 'app/core/utils/business-today';

 /** What the signed-in user's part in a voucher was. */
 export type MyRole = 'RAISED' | 'VERIFIED' | 'RAISED_AND_VERIFIED';
@@ -72,11 +75,17 @@ interface MyWorkReport {
  imports: [
    CommonModule,
    FormsModule,
-    MatIconModule
+    MatIconModule,
+    MatDialogModule
  ]
 })
 export class MyWorkComponent implements OnInit {
  private service = inject(CashierService);
+  private dialog = inject(MatDialog);
+
+  /** Which voucher's detail is currently being fetched, so the row that was clicked can show its
+   *  own spinner instead of a page-wide one for what is a small, single-row lookup. */
+  loadingDetailFor: string | null = null;

  /** Day is the working default; a month is what a close or an audit asks for. */
  period: 'DAY' | 'MONTH' = 'DAY';
@@ -323,8 +332,33 @@ export class MyWorkComponent implements OnInit {
    return { from: first, to: lastIso };
  }

+  /** Opens the full slip for one voucher — every debit and credit line, not just the first side of
+   *  each a table row has room to show. */
+  openDetail(voucherNo: string): void {
+    if (this.loadingDetailFor) {
+      return;
+    }
+    this.loadingDetailFor = voucherNo;
+    this.service
+      .voucherDetail(voucherNo)
+      .pipe(
+        catchError(() => of(null)),
+        finalize(() => (this.loadingDetailFor = null))
+      )
+      .subscribe((detail: any) => {
+        if (!detail) {
+          return;
+        }
+        this.dialog.open(VoucherDetailDialogComponent, {
+          data: { detail },
+          width: '600px',
+          autoFocus: false
+        });
+      });
+  }
+
  private todayIso(): string {
-    const d = new Date();
+    const d = businessToday();
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
  }
 }
@@ -0,0 +1,320 @@
+/**
+ * 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 { CommonModule } from '@angular/common';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+export interface VoucherDetailDialogData {
+  /** Already-loaded detail from CashierService.voucherDetail() — the caller fetches, this dialog
+   *  only renders, so one loading state lives in the row's own click handler rather than being
+   *  duplicated inside every dialog that could ever show a voucher. */
+  detail: {
+    voucherNo: string;
+    voucherType: string | null;
+    amount: number | null;
+    branchName: string | null;
+    createdBy: string | null;
+    createdAt: string | null;
+    totalDebit: number;
+    totalCredit: number;
+    balanced: boolean;
+    lines: {
+      lineNo: number;
+      entryType: 'DR' | 'CR';
+      partyName: string | null;
+      accountNo: string | null;
+      amount: number;
+      description: string | null;
+    }[];
+    /** GL entries a native platform command posted for the same underlying event, outside this
+     *  voucher entirely — a share redemption's Dr Share Capital / Cr Share Sundry pair, posted at
+     *  manager approval, before this voucher's own Dr Sundry / Cr Cash at Vault settlement leg even
+     *  exists. Empty for every voucher that already is the whole transaction on its own. */
+    relatedLines: {
+      stage: string;
+      entryType: 'DR' | 'CR';
+      partyName: string | null;
+      accountNo: string | null;
+      amount: number;
+      description: string | null;
+    }[];
+  };
+}
+
+/** The full slip behind a summarised register row — every debit and credit line a voucher is
+ *  made of, not just the first side of each that a table row has room for. */
+@Component({
+  selector: 'mifosx-voucher-detail-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatIconModule
+  ],
+  template: `
+    <div class="vd-shell">
+      <div class="vd-header">
+        <div class="vd-header__title">
+          <mat-icon class="vd-icon">receipt_long</mat-icon>
+          <div>
+            <h2>{{ detail.voucherNo }}</h2>
+            <p>{{ detail.voucherType || 'Voucher' }} &middot; {{ detail.branchName || 'Head Office' }}</p>
+          </div>
+        </div>
+        <button mat-icon-button mat-dialog-close aria-label="Close">
+          <mat-icon>close</mat-icon>
+        </button>
+      </div>
+
+      <div class="vd-meta">
+        <span
+          >Raised by <strong>{{ detail.createdBy || '—' }}</strong></span
+        >
+        @if (detail.createdAt) {
+          <span>{{ detail.createdAt | date: 'dd MMM yyyy, h:mm a' }}</span>
+        }
+        @if (!detail.balanced) {
+          <span class="vd-unbalanced">
+            <mat-icon inline>warning</mat-icon>
+            Debit and credit do not balance
+          </span>
+        }
+      </div>
+
+      <table class="vd-table">
+        <thead>
+          <tr>
+            <th>Side</th>
+            <th>Party</th>
+            <th>Account No.</th>
+            <th class="num">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (line of detail.lines; track line.lineNo) {
+            <tr>
+              <td>
+                <span
+                  class="vd-side"
+                  [class.vd-side--dr]="line.entryType === 'DR'"
+                  [class.vd-side--cr]="line.entryType === 'CR'"
+                >
+                  {{ line.entryType === 'DR' ? 'Debit' : 'Credit' }}
+                </span>
+              </td>
+              <td>{{ line.partyName || '—' }}</td>
+              <td class="vd-acct">{{ line.accountNo || '—' }}</td>
+              <td class="num">₹{{ line.amount | number: '1.2-2' }}</td>
+            </tr>
+            @if (line.description) {
+              <tr class="vd-desc-row">
+                <td></td>
+                <td colspan="3" class="vd-desc">{{ line.description }}</td>
+              </tr>
+            }
+          } @empty {
+            <tr>
+              <td colspan="4" class="vd-empty">This voucher's individual lines were not recorded.</td>
+            </tr>
+          }
+        </tbody>
+        @if (detail.lines.length > 0) {
+          <tfoot>
+            <tr>
+              <td colspan="3">Total</td>
+              <td class="num">
+                ₹{{ detail.totalDebit | number: '1.2-2' }} / ₹{{ detail.totalCredit | number: '1.2-2' }}
+              </td>
+            </tr>
+          </tfoot>
+        }
+      </table>
+
+      @if (detail.relatedLines.length > 0) {
+        <div class="vd-related">
+          <div class="vd-related__title">
+            <mat-icon inline>link</mat-icon>
+            Also posted for this transaction — not part of this voucher
+          </div>
+          <table class="vd-table vd-table--related">
+            <tbody>
+              @for (line of detail.relatedLines; track $index) {
+                <tr>
+                  <td>
+                    <span
+                      class="vd-side"
+                      [class.vd-side--dr]="line.entryType === 'DR'"
+                      [class.vd-side--cr]="line.entryType === 'CR'"
+                    >
+                      {{ line.entryType === 'DR' ? 'Debit' : 'Credit' }}
+                    </span>
+                  </td>
+                  <td>{{ line.partyName || '—' }}</td>
+                  <td class="vd-acct">{{ line.accountNo || '—' }}</td>
+                  <td class="num">₹{{ line.amount | number: '1.2-2' }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+          <p class="vd-related__hint">
+            {{ detail.relatedLines[0].stage }} — this and the lines above are the same transaction's full accounting.
+          </p>
+        </div>
+      }
+
+      <div class="vd-actions">
+        <button mat-flat-button color="primary" mat-dialog-close>Close</button>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .vd-shell {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 20px 24px 16px;
+        min-width: 420px;
+        max-width: 560px;
+      }
+      .vd-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+      }
+      .vd-header__title {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .vd-header__title h2 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+      }
+      .vd-header__title p {
+        margin: 2px 0 0;
+        font-size: 13px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+      .vd-icon {
+        color: #1976d2;
+      }
+      .vd-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px 16px;
+        font-size: 13px;
+        color: rgba(0, 0, 0, 0.65);
+      }
+      .vd-unbalanced {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: #b91c1c;
+        font-weight: 600;
+      }
+      .vd-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 13px;
+      }
+      .vd-table th {
+        text-align: left;
+        text-transform: uppercase;
+        font-size: 11px;
+        letter-spacing: 0.03em;
+        color: rgba(0, 0, 0, 0.5);
+        padding: 6px 8px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      }
+      .vd-table td {
+        padding: 8px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      }
+      .vd-table .num {
+        text-align: right;
+        font-variant-numeric: tabular-nums;
+      }
+      .vd-acct {
+        color: rgba(0, 0, 0, 0.55);
+      }
+      .vd-side {
+        display: inline-block;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 600;
+      }
+      .vd-side--dr {
+        background: #fee2e2;
+        color: #b91c1c;
+      }
+      .vd-side--cr {
+        background: #dcfce7;
+        color: #15803d;
+      }
+      .vd-desc-row td {
+        padding-top: 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      }
+      .vd-desc {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.5);
+        font-style: italic;
+      }
+      .vd-empty {
+        text-align: center;
+        color: rgba(0, 0, 0, 0.5);
+        padding: 16px 8px;
+      }
+      .vd-table tfoot td {
+        font-weight: 600;
+        border-bottom: none;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+      }
+      .vd-related {
+        border-top: 1px dashed rgba(0, 0, 0, 0.15);
+        padding-top: 12px;
+      }
+      .vd-related__title {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        color: #6d28d9;
+        margin-bottom: 8px;
+      }
+      .vd-table--related td {
+        background: #faf5ff;
+      }
+      .vd-related__hint {
+        margin: 6px 0 0;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.5);
+      }
+      .vd-actions {
+        display: flex;
+        justify-content: flex-end;
+      }
+    `
+  ]
+})
+export class VoucherDetailDialogComponent {
+  dialogRef = inject(MatDialogRef<VoucherDetailDialogComponent>);
+  private data = inject<VoucherDetailDialogData>(MAT_DIALOG_DATA);
+
+  detail = this.data.detail;
+}
@@ -18,6 +18,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { forkJoin, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { CashierService } from '../cashier.service';
+import { businessToday } from 'app/core/utils/business-today';

 interface DenomRow {
  denominationId: number;
@@ -85,7 +86,7 @@ export class ReconciliationComponent implements OnInit {
  loadingHistory = false;

  ngOnInit(): void {
-    const d = new Date();
+    const d = businessToday();
    this.reconDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    this.service
      .getTellers()
@@ -1,375 +0,0 @@
-<!--
-  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 ── -->
-  <header class="pg-head">
-    <div>
-      <div class="pg-eyebrow">CASHIER · SHARE COLLECTION</div>
-      <h1 class="pg-title">Share Collection</h1>
-      <p class="pg-sub">
-        Collect cash from member for share purchase — amounts are held in Sundry GL until the account is activated.
-      </p>
-    </div>
-  </header>
-
-  <!-- ── SEARCH BAR ── -->
-  @if (pageState !== 'success') {
-    <div class="sc-search-bar">
-      <div class="sc-search-bar__input-wrap">
-        <mat-icon class="sc-search-bar__icon">search</mat-icon>
-        <input
-          class="sc-search-bar__input"
-          type="text"
-          placeholder="Enter Share Account ID or Account No."
-          [(ngModel)]="accountInput"
-          (keyup.enter)="searchAccount()"
-        />
-      </div>
-      <button
-        type="button"
-        class="pg-btn pg-btn--primary"
-        [disabled]="pageState === 'searching' || !accountInput.trim()"
-        (click)="searchAccount()"
-      >
-        <mat-icon>manage_search</mat-icon>
-        {{ pageState === 'searching' ? 'Searching…' : 'Search' }}
-      </button>
-    </div>
-  }
-
-  <!-- ── ERROR ── -->
-  @if (errorMsg) {
-    <div class="sc-alert sc-alert--error">
-      <mat-icon>error_outline</mat-icon>
-      <span>{{ errorMsg }}</span>
-    </div>
-  }
-
-  <!-- ── SEARCHING SPINNER ── -->
-  @if (pageState === 'searching') {
-    <div class="pg-empty">
-      <mat-icon class="sc-spin">hourglass_empty</mat-icon>
-      <p>Looking up account…</p>
-    </div>
-  }
-
-  <!-- ── ACCOUNT LOADED ── -->
-  @if (pageState === 'loaded') {
-    <!-- Member Card -->
-    <div class="sc-member-card">
-      <div class="sc-member-card__avatar">
-        <mat-icon>person</mat-icon>
-      </div>
-      <div class="sc-member-card__info">
-        <div class="sc-member-card__name">{{ account.clientName }}</div>
-        <div class="sc-member-card__meta">
-          <span class="sc-badge sc-badge--account">{{ account.accountNo }}</span>
-          <span class="sc-badge sc-badge--product">{{ account.productName }}</span>
-          <span
-            class="sc-badge"
-            [class.sc-badge--pending]="account.status?.code?.includes('pending')"
-            [class.sc-badge--active]="account.status?.code?.includes('active')"
-            >{{ account.status?.value }}</span
-          >
-        </div>
-      </div>
-
-      <!-- Editable Shares + Price -->
-      <div class="sc-member-card__shares">
-        <div class="sc-shares-inputs">
-          <div class="sc-shares-field">
-            <label class="sc-shares-label">No. of Shares</label>
-            <input
-              class="sc-shares-input"
-              type="number"
-              min="0"
-              [(ngModel)]="requestedSharesInput"
-              (input)="recalc()"
-              placeholder="0"
-            />
-          </div>
-          <div class="sc-shares-sep">×</div>
-          <div class="sc-shares-field">
-            <label class="sc-shares-label">Price / Share (₹)</label>
-            <input
-              class="sc-shares-input"
-              type="number"
-              min="0"
-              [(ngModel)]="pricePerShare"
-              (input)="recalc()"
-              placeholder="0.00"
-            />
-          </div>
-          <div class="sc-shares-sep">=</div>
-          <div class="sc-shares-result">
-            <div class="sc-shares-label">Share Amount</div>
-            <div class="sc-shares-total">{{ currencySymbol }}{{ shareAmount | number: '1.2-2' }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Amount Breakdown + GL Preview -->
-    <div class="sc-split">
-      <!-- LEFT: Amount Breakdown -->
-      <div class="pg-card sc-breakdown">
-        <div class="sc-breakdown__header">
-          <mat-icon>receipt_long</mat-icon>
-          <span>Amount Breakdown</span>
-        </div>
-        <table class="pg-table">
-          <thead>
-            <tr>
-              <th>Description</th>
-              <th class="num">Amount</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                Share Amount
-                <span class="sc-dim">
-                  ({{ requestedSharesInput }} shares × {{ currencySymbol }}{{ pricePerShare | number: '1.2-2' }})
-                </span>
-              </td>
-              <td class="num">{{ currencySymbol }}{{ shareAmount | number: '1.2-2' }}</td>
-            </tr>
-            @for (charge of charges; track charge.id) {
-              <tr>
-                <td>{{ charge.name }}</td>
-                <td class="num sc-charge-amount">
-                  <input class="sc-charge-input" type="number" min="0" [(ngModel)]="charge.amount" (input)="recalc()" />
-                </td>
-              </tr>
-            }
-            @if (charges.length === 0) {
-              <tr>
-                <td colspan="2">
-                  <span class="sc-dim">No charges applicable</span>
-                </td>
-              </tr>
-            }
-          </tbody>
-          <tfoot>
-            <tr class="sc-total-row">
-              <td><strong>Total Payable</strong></td>
-              <td class="num sc-total-amount">
-                <strong>{{ currencySymbol }}{{ totalAmount | number: '1.2-2' }}</strong>
-              </td>
-            </tr>
-          </tfoot>
-        </table>
-      </div>
-
-      <!-- RIGHT: GL Preview -->
-      <div class="pg-card sc-gl-preview">
-        <div class="sc-breakdown__header">
-          <mat-icon>account_tree</mat-icon>
-          <span>GL Entries Preview</span>
-        </div>
-        <table class="pg-table">
-          <thead>
-            <tr>
-              <th>Account</th>
-              <th>Dr / Cr</th>
-              <th class="num">Amount</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr class="gl-row--dr">
-              <td class="gl-acname">Cash Vault GL</td>
-              <td><span class="sc-dr-badge">Dr</span></td>
-              <td class="num gl-amt--dr">{{ currencySymbol }}{{ totalAmount | number: '1.2-2' }}</td>
-            </tr>
-            <tr class="gl-row--cr">
-              <td class="gl-acname">Share Sundry GL</td>
-              <td><span class="sc-cr-badge">Cr</span></td>
-              <td class="num gl-amt--cr">{{ currencySymbol }}{{ shareAmount | number: '1.2-2' }}</td>
-            </tr>
-            @if (totalChargeAmount > 0) {
-              <tr class="gl-row--cr">
-                <td class="gl-acname">Charge Receivable GL</td>
-                <td><span class="sc-cr-badge">Cr</span></td>
-                <td class="num gl-amt--cr">{{ currencySymbol }}{{ totalChargeAmount | number: '1.2-2' }}</td>
-              </tr>
-            }
-          </tbody>
-        </table>
-        <div class="sc-gl-note">
-          <mat-icon>info_outline</mat-icon>
-          Funds move to Share GL &amp; Income GL when account is <strong>activated</strong>.
-        </div>
-      </div>
-    </div>
-
-    <!-- ── DENOMINATION (Cash Only) ── -->
-    @if (isCashPayment && allDenominations.length > 0) {
-      <div class="pg-card sc-denom">
-        <div class="sc-breakdown__header">
-          <mat-icon>payments</mat-icon>
-          <span>Denomination Entry</span>
-          @if (denominationTotal > 0) {
-            <span
-              class="sc-denom-badge"
-              [class.sc-denom-badge--match]="denomMatchesTotal"
-              [class.sc-denom-badge--mismatch]="!denomMatchesTotal"
-            >
-              ₹{{ denominationTotal | number: '1.2-2' }}
-              {{ denomMatchesTotal ? '✓ Matches' : '≠ Mismatch' }}
-            </span>
-          }
-          @if (denominationTotal === 0) {
-            <span class="sc-denom-required">⚠ Required for Cash</span>
-          }
-        </div>
-        <div class="sc-denom-body">
-          <table class="pg-table sc-denom-table">
-            <thead>
-              <tr>
-                <th>Denomination</th>
-                <th class="num">Count</th>
-                <th class="num">Amount</th>
-              </tr>
-            </thead>
-            <tbody>
-              @for (d of allDenominations; track d.id) {
-                <tr>
-                  <td>
-                    <span class="sc-denom-chip" [class.sc-denom-chip--coin]="d.kind === 'coin'">{{ d.label }}</span>
-                  </td>
-                  <td class="num">
-                    <div class="sc-denom-stepper">
-                      <button type="button" (click)="bumpDenom(d, -1)" [disabled]="countFor(d) === 0">−</button>
-                      <input
-                        type="number"
-                        min="0"
-                        [value]="countFor(d) || ''"
-                        placeholder="0"
-                        (input)="onDenomChange(d, $any($event.target).value)"
-                      />
-                      <button type="button" (click)="bumpDenom(d, 1)">+</button>
-                    </div>
-                  </td>
-                  <td class="num">{{ subtotalFor(d) > 0 ? (subtotalFor(d) | number: '1.2-2') : '—' }}</td>
-                </tr>
-              }
-            </tbody>
-            <tfoot>
-              <tr>
-                <td><strong>Total</strong></td>
-                <td></td>
-                <td class="num">
-                  <strong>₹{{ denominationTotal | number: '1.2-2' }}</strong>
-                </td>
-              </tr>
-            </tfoot>
-          </table>
-          @if (!denomMatchesTotal && denominationTotal > 0) {
-            <div class="sc-denom-mismatch">
-              <mat-icon>warning</mat-icon>
-              Denomination ₹{{ denominationTotal | number: '1.2-2' }} must equal Total Payable ₹{{
-                totalAmount | number: '1.2-2'
-              }}.
-            </div>
-          }
-          @if (denominationTotal > 0) {
-            <div class="sc-denom-actions">
-              <button type="button" class="pg-btn pg-btn--ghost" (click)="clearDenominations()">
-                <mat-icon>clear</mat-icon> Clear
-              </button>
-            </div>
-          }
-        </div>
-      </div>
-    }
-
-    <!-- Transaction Details -->
-    <div class="pg-toolbar pg-toolbar--mat">
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <mat-label>Transaction Date *</mat-label>
-        <input matInput type="date" [(ngModel)]="transactionDate" />
-      </mat-form-field>
-
-      <mat-form-field appearance="outline" subscriptSizing="dynamic">
-        <mat-label>Payment Mode</mat-label>
-        <mat-select [(ngModel)]="paymentTypeId">
-          <mat-option [value]="null">— Cash (Default) —</mat-option>
-          @for (pt of paymentTypes; track pt.id) {
-            <mat-option [value]="pt.id">{{ pt.name }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field appearance="outline" subscriptSizing="dynamic" class="pg-note-field">
-        <mat-label>Note (Optional)</mat-label>
-        <input matInput type="text" [(ngModel)]="note" placeholder="e.g. Share purchase for 100 shares" />
-      </mat-form-field>
-    </div>
-
-    <!-- Footer Submit Bar -->
-    <div class="pg-total-bar sc-footer">
-      <div class="sc-footer__summary">
-        <span class="sc-footer__label">Total to Collect</span>
-        <span class="sc-footer__amount">{{ currencySymbol }}{{ totalAmount | number: '1.2-2' }}</span>
-      </div>
-      <div class="sc-footer__actions">
-        <button type="button" class="pg-btn pg-btn--ghost" (click)="reset()"><mat-icon>close</mat-icon> Cancel</button>
-        <button type="button" class="pg-btn pg-btn--primary" [disabled]="!isValid || saving" (click)="submit()">
-          <mat-icon>payments</mat-icon>
-          {{ saving ? 'Posting…' : 'Collect & Post' }}
-        </button>
-      </div>
-    </div>
-  }
-
-  <!-- ── SUCCESS ── -->
-  @if (pageState === 'success' && collectionResult) {
-    <div class="sc-success">
-      <div class="sc-success__icon-wrap">
-        <mat-icon>check_circle</mat-icon>
-      </div>
-      <h2 class="sc-success__title">Collection Posted Successfully</h2>
-      <p class="sc-success__sub">
-        Cash of
-        <strong>{{ collectionResult.currencyCode }} {{ collectionResult.totalAmount | number: '1.2-2' }}</strong>
-        collected from <strong>{{ collectionResult.clientName }}</strong> on
-        <strong>{{ collectionResult.collectionDate }}</strong> by <strong>{{ collectionResult.collectedBy }}</strong
-        >.
-      </p>
-
-      <!-- Transaction reference -->
-      <div class="sc-success__ref">
-        <span class="sc-success__ref-label">Transaction ID</span>
-        <span class="sc-success__ref-val">{{ collectionResult.transactionId }}</span>
-      </div>
-
-      <!-- GL entries from backend -->
-      <div class="sc-success__gl">
-        @for (entry of collectionResult.glEntries; track entry.account) {
-          <div
-            class="sc-success__gl-row"
-            [class.sc-success__gl-row--dr]="entry.type === 'Dr'"
-            [class.sc-success__gl-row--cr]="entry.type === 'Cr'"
-          >
-            <span>{{ entry.type }}. {{ entry.account }}</span>
-            <span>{{ entry.currency }} {{ entry.amount | number: '1.2-2' }}</span>
-          </div>
-        }
-      </div>
-
-      <p class="sc-success__note">
-        Funds are held in Sundry GL. They will move to Share Equity GL when the account is activated.
-      </p>
-
-      <button type="button" class="pg-btn pg-btn--primary" (click)="reset()">
-        <mat-icon>add</mat-icon> New Collection
-      </button>
-    </div>
-  }
-</div>
@@ -1,701 +0,0 @@
-/**
- * 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/.
- */
-
-// ── Search Bar ───────────────────────────────────────────────────────────────
-
-.sc-search-bar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  padding: 10px 14px;
-
-  &__input-wrap {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex: 1 1 auto;
-  }
-
-  &__icon {
-    color: #94a3b8;
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-  }
-
-  &__input {
-    flex: 1 1 auto;
-    border: none;
-    outline: none;
-    font-size: 14px;
-    font-family: inherit;
-    color: #0d1b2a;
-    background: transparent;
-
-    &::placeholder {
-      color: #94a3b8;
-    }
-  }
-}
-
-// ── Alert ────────────────────────────────────────────────────────────────────
-
-.sc-alert {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-  border-radius: 10px;
-  font-size: 13px;
-  font-weight: 500;
-
-  mat-icon {
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-  }
-
-  &--error {
-    background: #fef2f2;
-    border: 1px solid #fecaca;
-    color: #dc2626;
-  }
-}
-
-// ── Spinner ──────────────────────────────────────────────────────────────────
-
-.sc-spin {
-  animation: sc-spin 1.2s linear infinite;
-  display: block;
-  margin: 0 auto 8px;
-  font-size: 32px !important;
-  width: 32px !important;
-  height: 32px !important;
-  color: #94a3b8;
-}
-
-@keyframes sc-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// ── Member Card ──────────────────────────────────────────────────────────────
-
-.sc-member-card {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  padding: 16px 20px;
-
-  &__avatar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: #eff6ff;
-    flex-shrink: 0;
-
-    mat-icon {
-      color: #2563eb;
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  &__info {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  &__name {
-    font-size: 16px;
-    font-weight: 700;
-    color: #1e293b;
-    margin-bottom: 6px;
-  }
-
-  &__meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  &__shares {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-  }
-}
-
-// ── Badges ───────────────────────────────────────────────────────────────────
-
-.sc-badge {
-  display: inline-flex;
-  align-items: center;
-  height: 22px;
-  padding: 0 8px;
-  border-radius: 5px;
-  font-size: 11px;
-  font-weight: 700;
-  background: #f1f5f9;
-  color: #475569;
-  border: 1px solid #e2e8f0;
-
-  &--account {
-    background: #eff6ff;
-    color: #1d4ed8;
-    border-color: #bfdbfe;
-    font-family: 'Roboto Mono', monospace;
-  }
-
-  &--product {
-    background: #f0fdf4;
-    color: #15803d;
-    border-color: #bbf7d0;
-  }
-
-  &--pending {
-    background: #fffbeb;
-    color: #d97706;
-    border-color: #fde68a;
-  }
-
-  &--active {
-    background: #f0fdf4;
-    color: #15803d;
-    border-color: #bbf7d0;
-  }
-}
-
-// ── Editable Share Inputs ────────────────────────────────────────────────────
-
-.sc-shares-inputs {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.sc-shares-field {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.sc-shares-label {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
-  color: #94a3b8;
-}
-
-.sc-shares-input {
-  width: 110px;
-  height: 38px;
-  border: 1.5px solid #e2e8f0;
-  border-radius: 8px;
-  padding: 0 10px;
-  font-size: 14px;
-  font-weight: 700;
-  font-family: inherit;
-  color: #1353a0;
-  text-align: right;
-  outline: none;
-  background: #f8fafc;
-  transition: border-color 0.15s;
-
-  &:focus {
-    border-color: #1353a0;
-    background: #fff;
-  }
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    appearance: none;
-  }
-}
-
-.sc-shares-sep {
-  font-size: 20px;
-  font-weight: 300;
-  color: #94a3b8;
-  padding-top: 16px;
-}
-
-.sc-shares-result {
-  text-align: right;
-}
-
-.sc-shares-total {
-  font-size: 20px;
-  font-weight: 800;
-  color: #0f4f3c;
-  font-variant-numeric: tabular-nums;
-}
-
-// ── Editable Charge Amount ───────────────────────────────────────────────────
-
-.sc-charge-amount {
-  padding: 4px 14px !important;
-}
-
-.sc-charge-input {
-  width: 100px;
-  height: 32px;
-  border: 1.5px solid #e2e8f0;
-  border-radius: 6px;
-  padding: 0 8px;
-  font-size: 13px;
-  font-weight: 700;
-  font-family: inherit;
-  color: #1353a0;
-  text-align: right;
-  outline: none;
-  background: #f8fafc;
-  transition: border-color 0.15s;
-
-  &:focus {
-    border-color: #1353a0;
-    background: #fff;
-  }
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    appearance: none;
-  }
-}
-
-// ── Split Layout ─────────────────────────────────────────────────────────────
-
-.sc-split {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-
-  @media (width <= 900px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-// ── Breakdown Card ───────────────────────────────────────────────────────────
-
-.sc-breakdown {
-  &__header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    background: #f8fafc;
-    border-bottom: 1px solid #e2e8f0;
-    font-size: 13px;
-    font-weight: 700;
-    color: #334155;
-
-    mat-icon {
-      font-size: 18px;
-      width: 18px;
-      height: 18px;
-      color: #0f4f3c;
-    }
-  }
-}
-
-.sc-gl-preview {
-  .sc-breakdown__header {
-    mat-icon {
-      color: #1d4ed8;
-    }
-  }
-}
-
-.sc-gl-note {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 10px 14px;
-  font-size: 12px;
-  color: #64748b;
-  background: #f8fafc;
-  border-top: 1px solid #e2e8f0;
-
-  mat-icon {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    margin-top: 1px;
-    color: #94a3b8;
-  }
-}
-
-// ── Table helpers ────────────────────────────────────────────────────────────
-
-.sc-dim {
-  color: #94a3b8;
-  font-size: 12px;
-}
-
-.sc-total-row td {
-  background: #f8fafc;
-  border-top: 2px solid #e2e8f0;
-  font-size: 14px;
-}
-
-.sc-total-amount {
-  color: #0f4f3c;
-}
-
-// ── Dr / Cr badges ───────────────────────────────────────────────────────────
-
-.sc-dr-badge,
-.sc-cr-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 20px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-}
-
-.sc-dr-badge {
-  background: #fef2f2;
-  color: #dc2626;
-  border: 1px solid #fecaca;
-}
-
-.sc-cr-badge {
-  background: #f0fdf4;
-  color: #15803d;
-  border: 1px solid #bbf7d0;
-}
-
-// ── Footer ───────────────────────────────────────────────────────────────────
-
-.sc-footer {
-  justify-content: space-between !important;
-
-  &__summary {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  &__label {
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.07em;
-    color: #64748b;
-  }
-
-  &__amount {
-    font-size: 22px;
-    font-weight: 800;
-    color: #0f4f3c;
-    font-variant-numeric: tabular-nums;
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-}
-
-// ── Denomination Panel ────────────────────────────────────────────────────────
-
-.sc-denom {
-  padding: 0;
-  overflow: hidden;
-}
-
-.sc-denom-body {
-  padding: 14px 16px;
-}
-
-.sc-denom-table {
-  width: 100%;
-
-  th,
-  td {
-    padding: 7px 10px;
-    font-size: 13px;
-  }
-
-  tfoot td {
-    border-top: 2px solid #e2e8f0;
-    background: #f8fafc;
-    font-size: 14px;
-  }
-}
-
-.sc-denom-chip {
-  display: inline-flex;
-  align-items: center;
-  height: 24px;
-  padding: 0 10px;
-  border-radius: 5px;
-  font-size: 12px;
-  font-weight: 700;
-  background: #eff6ff;
-  color: #1d4ed8;
-  border: 1px solid #bfdbfe;
-
-  &--coin {
-    background: #fffbeb;
-    color: #d97706;
-    border-color: #fde68a;
-  }
-}
-
-.sc-denom-stepper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  justify-content: flex-end;
-
-  button {
-    width: 26px;
-    height: 26px;
-    border: 1.5px solid #e2e8f0;
-    border-radius: 5px;
-    background: #f8fafc;
-    color: #475569;
-    font-size: 16px;
-    line-height: 1;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-
-    &:hover:not(:disabled) {
-      background: #e0f2fe;
-      border-color: #7dd3fc;
-      color: #0369a1;
-    }
-
-    &:disabled {
-      opacity: 0.35;
-      cursor: not-allowed;
-    }
-  }
-
-  input {
-    width: 62px;
-    height: 28px;
-    border: 1.5px solid #e2e8f0;
-    border-radius: 6px;
-    padding: 0 6px;
-    font-size: 13px;
-    font-weight: 600;
-    font-family: inherit;
-    text-align: right;
-    outline: none;
-    background: #fff;
-
-    &:focus {
-      border-color: #1353a0;
-    }
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      appearance: none;
-    }
-  }
-}
-
-.sc-denom-badge {
-  margin-left: auto;
-  display: inline-flex;
-  align-items: center;
-  height: 22px;
-  padding: 0 10px;
-  border-radius: 5px;
-  font-size: 12px;
-  font-weight: 700;
-
-  &--match {
-    background: #f0fdf4;
-    color: #15803d;
-    border: 1px solid #bbf7d0;
-  }
-
-  &--mismatch {
-    background: #fef2f2;
-    color: #dc2626;
-    border: 1px solid #fecaca;
-  }
-}
-
-.sc-denom-required {
-  margin-left: auto;
-  font-size: 12px;
-  font-weight: 700;
-  color: #d97706;
-}
-
-.sc-denom-mismatch {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 10px;
-  padding: 9px 12px;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  border-radius: 8px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #dc2626;
-
-  mat-icon {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-  }
-}
-
-.sc-denom-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
-}
-
-// ── Success ──────────────────────────────────────────────────────────────────
-
-.sc-success {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  padding: 40px 24px;
-  gap: 16px;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 16px;
-
-  &__icon-wrap {
-    width: 72px;
-    height: 72px;
-    border-radius: 50%;
-    background: #f0fdf4;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    mat-icon {
-      font-size: 40px;
-      width: 40px;
-      height: 40px;
-      color: #16a34a;
-    }
-  }
-
-  &__title {
-    font-size: 22px;
-    font-weight: 700;
-    color: #1e293b;
-    margin: 0;
-  }
-
-  &__sub {
-    font-size: 14px;
-    color: #64748b;
-    max-width: 480px;
-    margin: 0;
-  }
-
-  &__ref {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    background: #f1f5f9;
-    border: 1px solid #e2e8f0;
-    border-radius: 8px;
-    padding: 8px 16px;
-  }
-
-  &__ref-label {
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.07em;
-    color: #94a3b8;
-    white-space: nowrap;
-  }
-
-  &__ref-val {
-    font-family: 'Roboto Mono', 'Courier New', monospace;
-    font-size: 13px;
-    font-weight: 600;
-    color: #1353a0;
-  }
-
-  &__note {
-    font-size: 12px;
-    color: #94a3b8;
-    max-width: 420px;
-    margin: 0;
-    text-align: center;
-  }
-
-  &__gl {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    width: 100%;
-    max-width: 400px;
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 10px;
-    padding: 14px 16px;
-  }
-
-  &__gl-row {
-    display: flex;
-    justify-content: space-between;
-    font-size: 13px;
-    font-weight: 600;
-    padding: 4px 0;
-    border-bottom: 1px dotted #e2e8f0;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &--dr {
-      color: #dc2626;
-    }
-
-    &--cr {
-      color: #15803d;
-    }
-  }
-}
@@ -1,282 +0,0 @@
-/**
- * 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 { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { MatInputModule } from '@angular/material/input';
-import { catchError } from 'rxjs/operators';
-import { of } from 'rxjs';
-import { CashierService } from '../cashier.service';
-
-type PageState = 'idle' | 'searching' | 'loaded' | 'submitting' | 'success';
-
-interface Denomination {
-  id: number;
-  value: number;
-  kind: 'note' | 'coin';
-  label: string;
-}
-
-interface ShareCharge {
-  id: number;
-  name: string;
-  amount: number;
-  currencySymbol: string;
-}
-
-@Component({
-  selector: 'mifosx-share-collection',
-  templateUrl: './share-collection.component.html',
-  styleUrls: [
-    '../cashier-shared.scss',
-    './share-collection.component.scss'
-  ],
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    RouterModule,
-    MatIconModule,
-    MatSnackBarModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    MatInputModule
-  ]
-})
-export class ShareCollectionComponent implements OnInit {
-  private service = inject(CashierService);
-  private snackBar = inject(MatSnackBar);
-
-  pageState: PageState = 'idle';
-  accountInput = '';
-  transactionDate = '';
-  paymentTypeId: number | null = null;
-  paymentTypes: any[] = [];
-  note = '';
-  errorMsg = '';
-  saving = false;
-
-  account: any = null;
-  charges: ShareCharge[] = [];
-  collectionResult: any = null; // filled after successful POST
-
-  // Editable fields — cashier can override if API returns 0
-  requestedSharesInput = 0;
-  pricePerShare = 0;
-
-  // ── Denomination ────────────────────────────────────────────────────────────
-  notes: Denomination[] = [];
-  coins: Denomination[] = [];
-  denominationCounts: Record<string, number> = {};
-
-  get shareAmount(): number {
-    return this.requestedSharesInput * this.pricePerShare;
-  }
-
-  get totalChargeAmount(): number {
-    return this.charges.reduce((s, c) => s + c.amount, 0);
-  }
-
-  get totalAmount(): number {
-    return this.shareAmount + this.totalChargeAmount;
-  }
-
-  get currencySymbol(): string {
-    return this.account?.currency?.displaySymbol ?? '₹';
-  }
-
-  get isCashPayment(): boolean {
-    if (this.paymentTypeId === null) return true;
-    const pt = this.paymentTypes.find((p: any) => p.id === this.paymentTypeId);
-    return !!pt?.isCashPayment;
-  }
-
-  get allDenominations(): Denomination[] {
-    const desc = (a: Denomination, b: Denomination) => b.value - a.value;
-    return [
-      ...[...this.notes].sort(desc),
-      ...[...this.coins].sort(desc)
-    ];
-  }
-
-  get denominationTotal(): number {
-    return this.allDenominations.reduce((s, d) => s + this.subtotalFor(d), 0);
-  }
-
-  get denomMatchesTotal(): boolean {
-    return this.denominationTotal === this.totalAmount;
-  }
-
-  get isValid(): boolean {
-    if (!this.account || this.totalAmount <= 0 || !this.transactionDate) return false;
-    if (this.isCashPayment && this.allDenominations.length > 0) {
-      return this.denomMatchesTotal;
-    }
-    return true;
-  }
-
-  ngOnInit(): void {
-    const d = new Date();
-    this.transactionDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-    this.service
-      .getPaymentTypes()
-      .pipe(catchError(() => of([])))
-      .subscribe((types: any[]) => (this.paymentTypes = types || []));
-    this.loadDenominations();
-  }
-
-  private loadDenominations(): void {
-    this.service
-      .getActiveDenominations()
-      .pipe(catchError(() => of([])))
-      .subscribe((list: any[]) => {
-        const rows: Denomination[] = (list || []).map((d: any) => ({
-          id: d.id,
-          value: d.denomination ?? d.value,
-          kind: d.type === 'coin' ? 'coin' : 'note',
-          label: '₹' + (d.denomination ?? d.value)
-        }));
-        const order = (a: Denomination, b: Denomination) => b.value - a.value;
-        this.notes = rows.filter((r) => r.kind === 'note').sort(order);
-        this.coins = rows.filter((r) => r.kind === 'coin').sort(order);
-      });
-  }
-
-  // ── Denomination helpers ──────────────────────────────────────────────────
-
-  denomKey(d: Denomination): string {
-    return `${d.kind}:${d.value}`;
-  }
-
-  countFor(d: Denomination): number {
-    return this.denominationCounts[this.denomKey(d)] || 0;
-  }
-
-  subtotalFor(d: Denomination): number {
-    return this.countFor(d) * d.value;
-  }
-
-  onDenomChange(d: Denomination, raw: any): void {
-    this.denominationCounts[this.denomKey(d)] = Math.max(0, Math.floor(Number(raw) || 0));
-  }
-
-  bumpDenom(d: Denomination, delta: number): void {
-    this.denominationCounts[this.denomKey(d)] = Math.max(0, this.countFor(d) + delta);
-  }
-
-  clearDenominations(): void {
-    this.denominationCounts = {};
-  }
-
-  searchAccount(): void {
-    const query = this.accountInput.trim();
-    if (!query) return;
-    this.pageState = 'searching';
-    this.account = null;
-    this.charges = [];
-    this.errorMsg = '';
-
-    this.service
-      .getShareAccountForCollection(query)
-      .pipe(
-        catchError((err) => {
-          this.errorMsg =
-            err?.error?.errors?.[0]?.defaultUserMessage ||
-            err?.error?.developerMessage ||
-            'Account not found. Please check the account ID and try again.';
-          this.pageState = 'idle';
-          return of(null);
-        })
-      )
-      .subscribe((acc: any) => {
-        if (!acc) return;
-        this.account = acc;
-
-        // Auto-detect shares from summary or first pending purchasedShares entry
-        const pendingTx = (acc.purchasedShares || []).find(
-          (t: any) =>
-            t.status?.code === 'purchasedSharesStatusType.applied' && t.type?.code === 'purchasedSharesType.purchased'
-        );
-        this.requestedSharesInput = Number(
-          acc.summary?.totalPendingForApprovalShares || pendingTx?.numberOfShares || acc.requestedShares || 0
-        );
-        this.pricePerShare = Number(pendingTx?.purchasedPrice || acc.currentMarketPrice || acc.unitPrice || 0);
-
-        // Show ALL charges on the account — no type filtering
-        this.charges = (acc.charges || []).map((c: any) => ({
-          id: c.chargeId ?? c.id,
-          name: c.name,
-          amount: Number(c.amount ?? c.amountOutstanding ?? 0),
-          currencySymbol: c.currency?.displaySymbol ?? '₹'
-        }));
-
-        this.pageState = 'loaded';
-      });
-  }
-
-  recalc(): void {
-    // triggered by input changes — nothing extra needed, getters auto-recalculate
-  }
-
-  submit(): void {
-    if (!this.isValid || this.saving) return;
-    this.saving = true;
-    const payload = {
-      shareAccountId: this.account.id,
-      accountNo: this.account.accountNo,
-      clientName: this.account.clientName,
-      transactionDate: this.transactionDate,
-      requestedShares: this.requestedSharesInput,
-      pricePerShare: this.pricePerShare,
-      shareAmount: this.shareAmount,
-      chargeAmount: this.totalChargeAmount,
-      totalAmount: this.totalAmount,
-      paymentTypeId: this.paymentTypeId || null,
-      note: this.note || null
-    };
-
-    this.service.collectSharePayment(payload).subscribe({
-      next: (result: any) => {
-        this.collectionResult = result;
-        this.snackBar.open('Share collection posted successfully.', 'Close', { duration: 3000 });
-        this.pageState = 'success';
-        this.saving = false;
-      },
-      error: (err: any) => {
-        const msg =
-          err?.error?.errors?.[0]?.defaultUserMessage ||
-          err?.error?.developerMessage ||
-          err?.error?.defaultUserMessage ||
-          'Collection failed. Please try again.';
-        this.snackBar.open(msg, 'Close', { duration: 8000 });
-        this.saving = false;
-      }
-    });
-  }
-
-  reset(): void {
-    this.pageState = 'idle';
-    this.accountInput = '';
-    this.account = null;
-    this.charges = [];
-    this.errorMsg = '';
-    this.note = '';
-    this.paymentTypeId = null;
-    this.requestedSharesInput = 0;
-    this.pricePerShare = 0;
-    this.collectionResult = null;
-    this.saving = false;
-    this.clearDenominations();
-  }
-}
@@ -8,7 +8,7 @@

 import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
 import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -35,6 +35,35 @@ export interface CashierIssueDdDialogData {
  accountNo?: string;
  /** The account holder, for the same reason. */
  accountHolderName?: string;
+  /**
+   * How many drafts this slip raises. Absent or 1 is the ordinary single draft and the dialog is
+   * unchanged; 2 or more turns it into a slip, asking for a face value, charge and beneficiary per
+   * draft and reporting the combined total the account will be debited for.
+   */
+  ddCount?: number;
+  /**
+   * Whether the funding account is a GL account rather than a member's. Only affects wording: a GL
+   * account has no passbook, so it is not promised one.
+   */
+  glFunded?: boolean;
+  /**
+   * The leaflets provisionally shown against each line of a slip.
+   *
+   * Only ever indicative. The server allocates the real numbers inside the locked transaction that
+   * submits the slip, so what is shown here is the next-available run at the moment the dialog was
+   * opened — accurate unless another clerk submits first, which is precisely why the numbers cannot
+   * be promised until submit returns them.
+   */
+  previewDdNumbers?: string[];
+}
+
+/** One captured draft on a multi-DD slip. */
+export interface DdSlipLineResult {
+  beneficiaryName: string;
+  payableAtBranch: string;
+  payableAtCity: string;
+  faceValue: number;
+  chargesAmount: number;
 }

@Component({
@@ -56,10 +85,20 @@ export interface CashierIssueDdDialogData {
        <div class="dd-dialog-header__title">
          <mat-icon class="dd-icon">receipt_long</mat-icon>
          <div>
-            <h2>{{ isAccountDebit ? 'Account-Debit Demand Draft (DD)' : 'Walk-in Cash Demand Draft (DD)' }}</h2>
+            <h2>
+              @if (isSlip) {
+                Multi-DD Slip · {{ lineCount }} Demand Drafts
+              } @else {
+                {{ isAccountDebit ? 'Account-Debit Demand Draft (DD)' : 'Walk-in Cash Demand Draft (DD)' }}
+              }
+            </h2>
            <p>
-              Next available DD leaflet auto-selected ·
-              {{ isAccountDebit ? 'Enter beneficiary details' : 'Enter purchaser &amp; beneficiary details' }}
+              @if (isSlip) {
+                One debit funds all {{ lineCount }} drafts · Enter each draft's beneficiary and amount
+              } @else {
+                Next available DD leaflet auto-selected ·
+                {{ isAccountDebit ? 'Enter beneficiary details' : 'Enter purchaser &amp; beneficiary details' }}
+              }
            </p>
          </div>
        </div>
@@ -69,38 +108,91 @@ export interface CashierIssueDdDialogData {
      </div>

      <mat-dialog-content class="dd-dialog-body">
-        <!-- Draft & Financials Summary Card -->
-        <div class="dd-summary-card">
-          <div class="summary-col">
-            <span class="label">Auto-Selected Leaflet</span>
-            <strong class="dd-number-highlight">{{ data.leaflet.ddNumber }}</strong>
-            <span class="sublabel">{{ data.sponsorBankName || 'Sponsor Bank' }} · {{ data.branchName }}</span>
+        <!--
+          Slip running total.
+
+          A slip's figures are not known until every line is typed — different drafts carry different
+          face values and different charges — so the total the account will be debited for is built
+          up here as the clerk works, rather than shown as a fixed figure up front. Answering "what
+          is this going to cost my member" without it would mean adding the lines by hand.
+        -->
+        @if (isSlip) {
+          <div class="dd-summary-card">
+            <div class="summary-col">
+              <span class="label">Drafts On This Slip</span>
+              <strong class="dd-number-highlight">{{ lineCount }}</strong>
+              <span class="sublabel">{{ data.sponsorBankName || 'Sponsor Bank' }} · {{ data.branchName }}</span>
+            </div>
+            <div class="summary-divider"></div>
+            <div class="summary-col">
+              <span class="label">Total Face Value</span>
+              <strong class="amount">₹{{ slipFaceValue | number: '1.2-2' }}</strong>
+              <span class="sublabel">+ Charges ₹{{ slipCharges | number: '1.2-2' }}</span>
+            </div>
+            <div class="summary-divider"></div>
+            <div class="summary-col">
+              <span class="label">GST ({{ data.gstPercentage }}%)</span>
+              <strong class="amount">₹{{ slipGst | number: '1.2-2' }}</strong>
+              <span class="sublabel">on charges only</span>
+            </div>
+            <div class="summary-divider"></div>
+            <div class="summary-col highlight-col">
+              <span class="label">Total To Debit</span>
+              <strong class="total-amount">₹{{ slipTotal | number: '1.2-2' }}</strong>
+              <span class="sublabel">{{ data.accountNo || 'Account' }} · one debit</span>
+            </div>
          </div>
-          <div class="summary-divider"></div>
-          <div class="summary-col">
-            <span class="label">Face Value</span>
-            <strong class="amount">₹{{ data.faceValue | number: '1.2-2' }}</strong>
-            <span class="sublabel">+ Charges ₹{{ data.chargesAmount | number: '1.2-2' }}</span>
+
+          <!--
+            Said plainly because the numbers on screen are the one thing in this dialog the clerk
+            cannot rely on. They are the next-available run as it stood when the dialog opened; the
+            binding allocation happens inside the submit transaction, so a slip filed after another
+            clerk's gets the following numbers instead.
+          -->
+          <div class="dd-preview-note">
+            <mat-icon>info</mat-icon>
+            <div>
+              DD numbers below are <strong>provisional</strong>. The final numbers are allocated when the slip is
+              submitted and will be confirmed on the receipt.
+            </div>
          </div>
-          <div class="summary-divider"></div>
-          <div class="summary-col">
-            <span class="label">GST ({{ data.gstPercentage }}%)</span>
-            <strong class="amount">₹{{ data.gstAmount | number: '1.2-2' }}</strong>
-            <span class="sublabel">on charges only</span>
+        } @else {
+          <!-- Draft & Financials Summary Card -->
+          <div class="dd-summary-card">
+            <!-- The number the customer will actually see printed on the instrument. "Auto-Selected
+               Leaflet" named the stock item rather than the draft, so it was not obvious that this
+               is the DD number being issued. -->
+            <div class="summary-col">
+              <span class="label">DD Number Being Issued</span>
+              <strong class="dd-number-highlight">{{ data.leaflet.ddNumber }}</strong>
+              <span class="sublabel">{{ data.sponsorBankName || 'Sponsor Bank' }} · {{ data.branchName }}</span>
+            </div>
+            <div class="summary-divider"></div>
+            <div class="summary-col">
+              <span class="label">Face Value</span>
+              <strong class="amount">₹{{ data.faceValue | number: '1.2-2' }}</strong>
+              <span class="sublabel">+ Charges ₹{{ data.chargesAmount | number: '1.2-2' }}</span>
+            </div>
+            <div class="summary-divider"></div>
+            <div class="summary-col">
+              <span class="label">GST ({{ data.gstPercentage }}%)</span>
+              <strong class="amount">₹{{ data.gstAmount | number: '1.2-2' }}</strong>
+              <span class="sublabel">on charges only</span>
+            </div>
+            <div class="summary-divider"></div>
+            <div class="summary-col highlight-col">
+              <span class="label">{{ isAccountDebit ? 'Total Debited' : 'Total Cash Collected' }}</span>
+              <strong class="total-amount">₹{{ data.totalCashPayable | number: '1.2-2' }}</strong>
+              <span class="sublabel">
+                @if (isAccountDebit) {
+                  {{ data.accountNo || 'Account' }}
+                } @else {
+                  Denominations verified
+                }
+              </span>
+            </div>
          </div>
-          <div class="summary-divider"></div>
-          <div class="summary-col highlight-col">
-            <span class="label">{{ isAccountDebit ? 'Total Debited' : 'Total Cash Collected' }}</span>
-            <strong class="total-amount">₹{{ data.totalCashPayable | number: '1.2-2' }}</strong>
-            <span class="sublabel">
-              @if (isAccountDebit) {
-                {{ data.accountNo || 'Account' }}
-              } @else {
-                Denominations verified
-              }
-            </span>
-          </div>
-        </div>
+        }

        <!--
          The account funding the draft, stated before the form.
@@ -118,123 +210,237 @@ export interface CashierIssueDdDialogData {
                · {{ data.accountHolderName }}
              }
              <div class="dd-funding-sub">
-                ₹{{ data.totalCashPayable | number: '1.2-2' }} will be debited from this account when a checker
-                approves. No cash is taken at the counter.
+                @if (isSlip) {
+                  ₹{{ slipTotal | number: '1.2-2' }} will be debited from this account as a
+                  <strong>single transaction</strong> covering all {{ lineCount }} drafts, when a checker approves the
+                  slip —
+                  <!-- A GL account has no passbook, so the reassurance a member gets is phrased for
+                       the ledger instead of promising a statement line that does not exist. -->
+                  @if (isGlFunded) {
+                    one journal entry against this GL account, not {{ lineCount }}.
+                  } @else {
+                    the member's passbook shows one entry, not {{ lineCount }}.
+                  }
+                } @else {
+                  ₹{{ data.totalCashPayable | number: '1.2-2' }} will be debited from this account when a checker
+                  approves. No cash is taken at the counter.
+                }
              </div>
            </div>
          </div>
        }

-        <form [formGroup]="form" class="dd-form">
-          <!--
+        <!--
+          A slip's drafts, one card each.
+
+          Face value and charge sit on the line rather than on the slip because that is how the bank
+          actually uses this: three drafts to three institutions are three different amounts, and the
+          charge is levied per draft. The server stores and posts them per line for the same reason.
+        -->
+        @if (isSlip) {
+          <form [formGroup]="slipForm" class="dd-form">
+            <div formArrayName="lines">
+              @for (lineCtrl of slipLines.controls; track $index) {
+                <div class="dd-line-card" [formGroupName]="$index">
+                  <div class="dd-line-head">
+                    <span class="dd-line-badge">DD {{ $index + 1 }} of {{ lineCount }}</span>
+                    @if (previewNumberAt($index)) {
+                      <span class="dd-line-number">No. {{ previewNumberAt($index) }} <em>(provisional)</em></span>
+                    }
+                    <span class="dd-line-total"> Debit ₹{{ lineTotalAt($index) | number: '1.2-2' }} </span>
+                  </div>
+
+                  <mat-form-field appearance="outline" class="full-width">
+                    <mat-label>Beneficiary Name (In Favour Of) *</mat-label>
+                    <input
+                      matInput
+                      formControlName="beneficiaryName"
+                      placeholder="e.g. UNIVERSITY OF MUMBAI"
+                      maxlength="120"
+                      style="text-transform: uppercase;"
+                    />
+                    <mat-error *ngIf="lineCtrl.get('beneficiaryName')?.hasError('required')"
+                      >Beneficiary name is required</mat-error
+                    >
+                    <mat-error *ngIf="lineCtrl.get('beneficiaryName')?.hasError('maxlength')"
+                      >Max 120 characters</mat-error
+                    >
+                  </mat-form-field>
+
+                  <div class="form-row">
+                    <mat-form-field appearance="outline" class="form-field-flex">
+                      <mat-label>Payable At - Branch *</mat-label>
+                      <input
+                        matInput
+                        formControlName="payableAtBranch"
+                        placeholder="e.g. FORT BRANCH"
+                        maxlength="150"
+                        style="text-transform: uppercase;"
+                      />
+                      <mat-error *ngIf="lineCtrl.get('payableAtBranch')?.hasError('required')"
+                        >Payable Branch is required</mat-error
+                      >
+                    </mat-form-field>
+
+                    <mat-form-field appearance="outline" class="form-field-flex">
+                      <mat-label>Payable At - City *</mat-label>
+                      <input
+                        matInput
+                        formControlName="payableAtCity"
+                        placeholder="e.g. MUMBAI"
+                        maxlength="100"
+                        style="text-transform: uppercase;"
+                      />
+                      <mat-error *ngIf="lineCtrl.get('payableAtCity')?.hasError('required')"
+                        >Payable City is required</mat-error
+                      >
+                    </mat-form-field>
+                  </div>
+
+                  <div class="form-row">
+                    <mat-form-field appearance="outline" class="form-field-flex">
+                      <mat-label>Face Value *</mat-label>
+                      <input matInput type="number" formControlName="faceValue" placeholder="0.00" />
+                      <span matPrefix>₹&nbsp;</span>
+                      <mat-error *ngIf="lineCtrl.get('faceValue')?.hasError('required')"
+                        >Face value is required</mat-error
+                      >
+                      <mat-error *ngIf="lineCtrl.get('faceValue')?.hasError('min')"
+                        >Face value must be greater than zero</mat-error
+                      >
+                    </mat-form-field>
+
+                    <mat-form-field appearance="outline" class="form-field-flex">
+                      <mat-label>Charges</mat-label>
+                      <input matInput type="number" formControlName="chargesAmount" placeholder="0.00" />
+                      <span matPrefix>₹&nbsp;</span>
+                      <mat-hint>GST ₹{{ lineGstAt($index) | number: '1.2-2' }} at {{ data.gstPercentage }}%</mat-hint>
+                      <mat-error *ngIf="lineCtrl.get('chargesAmount')?.hasError('min')"
+                        >Charges cannot be negative</mat-error
+                      >
+                    </mat-form-field>
+                  </div>
+                </div>
+              }
+            </div>
+          </form>
+        } @else {
+          <form [formGroup]="form" class="dd-form">
+            <!--
            Purchaser identity is asked for only when the bank has none: a walk-in paying cash. On an
            account debit the purchaser IS the account holder, already identified and KYC'd, and
            re-capturing a name and Aadhaar here would invite a mismatch against the account on record.
          -->
-          @if (!isAccountDebit) {
-            <div class="form-section-title">Walk-in Purchaser Details</div>
+            @if (!isAccountDebit) {
+              <div class="form-section-title">Walk-in Purchaser Details</div>
+
+              <div class="form-row">
+                <mat-form-field appearance="outline" class="form-field-flex">
+                  <mat-label>Walk-in Purchaser Name *</mat-label>
+                  <input
+                    matInput
+                    formControlName="walkinPurchaserName"
+                    placeholder="e.g. RAMESH CHANDRA"
+                    style="text-transform: uppercase;"
+                  />
+                  <mat-error *ngIf="form.get('walkinPurchaserName')?.hasError('required')"
+                    >Purchaser name is required</mat-error
+                  >
+                  <mat-error *ngIf="form.get('walkinPurchaserName')?.hasError('minlength')"
+                    >Must be at least 3 characters</mat-error
+                  >
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" class="form-field-flex">
+                  <mat-label>12-Digit Aadhaar Number *</mat-label>
+                  <input
+                    matInput
+                    formControlName="walkinPurchaserAadhaar"
+                    placeholder="12-digit Aadhaar"
+                    maxlength="12"
+                  />
+                  <mat-hint>Masked to last 4 digits before storage</mat-hint>
+                  <mat-error *ngIf="form.get('walkinPurchaserAadhaar')?.hasError('required')"
+                    >Aadhaar number is required</mat-error
+                  >
+                  <mat-error *ngIf="form.get('walkinPurchaserAadhaar')?.hasError('pattern')"
+                    >Must be exactly 12 numeric digits</mat-error
+                  >
+                </mat-form-field>
+              </div>
+
+              <mat-form-field appearance="outline" class="full-width">
+                <mat-label>Purchaser Address / Location *</mat-label>
+                <input
+                  matInput
+                  formControlName="walkinPurchaserAddress"
+                  placeholder="e.g. 14, SECTOR 5, MAIN ROAD, MUMBAI"
+                  style="text-transform: uppercase;"
+                />
+                <mat-error *ngIf="form.get('walkinPurchaserAddress')?.hasError('required')"
+                  >Address is required</mat-error
+                >
+              </mat-form-field>
+            }
+
+            <!-- Beneficiary Section -->
+            <div class="form-section-title">Beneficiary & Payment Details</div>
+
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Beneficiary Name (In Favour Of) *</mat-label>
+              <input
+                matInput
+                formControlName="beneficiaryName"
+                placeholder="e.g. UNIVERSITY OF MUMBAI"
+                maxlength="120"
+                style="text-transform: uppercase;"
+              />
+              <mat-error *ngIf="form.get('beneficiaryName')?.hasError('required')"
+                >Beneficiary name is required</mat-error
+              >
+              <mat-error *ngIf="form.get('beneficiaryName')?.hasError('maxlength')">Max 120 characters</mat-error>
+            </mat-form-field>

            <div class="form-row">
              <mat-form-field appearance="outline" class="form-field-flex">
-                <mat-label>Walk-in Purchaser Name *</mat-label>
+                <mat-label>Payable At - Branch *</mat-label>
                <input
                  matInput
-                  formControlName="walkinPurchaserName"
-                  placeholder="e.g. RAMESH CHANDRA"
+                  formControlName="payableAtBranch"
+                  placeholder="e.g. FORT BRANCH"
+                  maxlength="150"
                  style="text-transform: uppercase;"
                />
-                <mat-error *ngIf="form.get('walkinPurchaserName')?.hasError('required')"
-                  >Purchaser name is required</mat-error
-                >
-                <mat-error *ngIf="form.get('walkinPurchaserName')?.hasError('minlength')"
-                  >Must be at least 3 characters</mat-error
+                <mat-error *ngIf="form.get('payableAtBranch')?.hasError('required')"
+                  >Payable Branch is required</mat-error
                >
              </mat-form-field>

              <mat-form-field appearance="outline" class="form-field-flex">
-                <mat-label>12-Digit Aadhaar Number *</mat-label>
+                <mat-label>Payable At - City *</mat-label>
                <input
                  matInput
-                  formControlName="walkinPurchaserAadhaar"
-                  placeholder="12-digit Aadhaar"
-                  maxlength="12"
+                  formControlName="payableAtCity"
+                  placeholder="e.g. MUMBAI"
+                  maxlength="100"
+                  style="text-transform: uppercase;"
                />
-                <mat-hint>Masked to last 4 digits before storage</mat-hint>
-                <mat-error *ngIf="form.get('walkinPurchaserAadhaar')?.hasError('required')"
-                  >Aadhaar number is required</mat-error
-                >
-                <mat-error *ngIf="form.get('walkinPurchaserAadhaar')?.hasError('pattern')"
-                  >Must be exactly 12 numeric digits</mat-error
-                >
+                <mat-error *ngIf="form.get('payableAtCity')?.hasError('required')">Payable City is required</mat-error>
              </mat-form-field>
            </div>
-
-            <mat-form-field appearance="outline" class="full-width">
-              <mat-label>Purchaser Address / Location *</mat-label>
-              <input
-                matInput
-                formControlName="walkinPurchaserAddress"
-                placeholder="e.g. 14, SECTOR 5, MAIN ROAD, MUMBAI"
-                style="text-transform: uppercase;"
-              />
-              <mat-error *ngIf="form.get('walkinPurchaserAddress')?.hasError('required')"
-                >Address is required</mat-error
-              >
-            </mat-form-field>
-          }
-
-          <!-- Beneficiary Section -->
-          <div class="form-section-title">Beneficiary & Payment Details</div>
-
-          <mat-form-field appearance="outline" class="full-width">
-            <mat-label>Beneficiary Name (In Favour Of) *</mat-label>
-            <input
-              matInput
-              formControlName="beneficiaryName"
-              placeholder="e.g. UNIVERSITY OF MUMBAI"
-              maxlength="120"
-              style="text-transform: uppercase;"
-            />
-            <mat-error *ngIf="form.get('beneficiaryName')?.hasError('required')"
-              >Beneficiary name is required</mat-error
-            >
-            <mat-error *ngIf="form.get('beneficiaryName')?.hasError('maxlength')">Max 120 characters</mat-error>
-          </mat-form-field>
-
-          <div class="form-row">
-            <mat-form-field appearance="outline" class="form-field-flex">
-              <mat-label>Payable At - Branch *</mat-label>
-              <input
-                matInput
-                formControlName="payableAtBranch"
-                placeholder="e.g. FORT BRANCH"
-                maxlength="150"
-                style="text-transform: uppercase;"
-              />
-              <mat-error *ngIf="form.get('payableAtBranch')?.hasError('required')"
-                >Payable Branch is required</mat-error
-              >
-            </mat-form-field>
-
-            <mat-form-field appearance="outline" class="form-field-flex">
-              <mat-label>Payable At - City *</mat-label>
-              <input
-                matInput
-                formControlName="payableAtCity"
-                placeholder="e.g. MUMBAI"
-                maxlength="100"
-                style="text-transform: uppercase;"
-              />
-              <mat-error *ngIf="form.get('payableAtCity')?.hasError('required')">Payable City is required</mat-error>
-            </mat-form-field>
-          </div>
-        </form>
+          </form>
+        }
      </mat-dialog-content>

      <mat-dialog-actions class="dd-dialog-actions" align="end">
+        @if (isSlip) {
+          <span class="dd-actions-total">
+            {{ lineCount }} drafts · <strong>₹{{ slipTotal | number: '1.2-2' }}</strong> to debit
+          </span>
+        }
        <button mat-button type="button" (click)="onClose()">Cancel</button>
-        <button mat-flat-button color="primary" [disabled]="form.invalid" (click)="onSubmit()">
-          Submit for Manager Approval
+        <button mat-flat-button color="primary" [disabled]="activeForm.invalid" (click)="onSubmit()">
+          {{ isSlip ? 'Save Slip Details' : 'Save DD Details' }}
        </button>
      </mat-dialog-actions>
    </div>
@@ -392,6 +598,81 @@ export interface CashierIssueDdDialogData {
        line-height: 1.5;
        color: #64748b;
      }
+      /* One card per draft on a slip — the boundary is what stops a clerk typing line 2's
+         beneficiary against line 1's amount. */
+      .dd-line-card {
+        border: 1px solid #e2e8f0;
+        border-left: 3px solid #0369a1;
+        border-radius: 8px;
+        padding: 14px 16px 4px;
+        margin-bottom: 14px;
+        background: #fcfdff;
+      }
+      .dd-line-head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: wrap;
+        margin-bottom: 12px;
+      }
+      .dd-line-badge {
+        font-size: 11px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.4px;
+        color: #ffffff;
+        background: #0369a1;
+        padding: 3px 9px;
+        border-radius: 999px;
+      }
+      .dd-line-number {
+        font-family: monospace;
+        font-size: 12px;
+        color: #475569;
+      }
+      .dd-line-number em {
+        font-style: normal;
+        color: #94a3b8;
+        font-size: 11px;
+      }
+      .dd-line-total {
+        margin-left: auto;
+        font-size: 12px;
+        font-weight: 600;
+        color: #065f46;
+        background: #ecfdf5;
+        border: 1px solid #a7f3d0;
+        padding: 3px 10px;
+        border-radius: 6px;
+      }
+      .dd-preview-note {
+        display: flex;
+        gap: 8px;
+        align-items: flex-start;
+        margin: 0 0 16px;
+        padding: 9px 12px;
+        background: #fffbeb;
+        border: 1px solid #fde68a;
+        border-radius: 6px;
+        font-size: 12px;
+        line-height: 1.5;
+        color: #78350f;
+      }
+      .dd-preview-note mat-icon {
+        color: #b45309;
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+      }
+      .dd-actions-total {
+        margin-right: auto;
+        font-size: 13px;
+        color: #475569;
+      }
+      .dd-actions-total strong {
+        color: #065f46;
+      }
    `
  ]
 })
@@ -401,13 +682,127 @@ export class CashierIssueDdDialogComponent implements OnInit {
  public data: CashierIssueDdDialogData = inject(MAT_DIALOG_DATA);

  form!: FormGroup;
+  /** Built only in slip mode; `form` stays untouched so the single-draft path is unchanged. */
+  slipForm!: FormGroup;

  /** Whether the draft is funded by debiting a member's account rather than by cash at the counter. */
  get isAccountDebit(): boolean {
    return this.data.paymentMethod === 'ACCOUNT_DEBIT';
  }

+  /** How many drafts this dialog is capturing — 1 unless the clerk asked for a slip. */
+  get lineCount(): number {
+    const n = Number(this.data.ddCount) || 1;
+    return n > 1 ? n : 1;
+  }
+
+  /** Whether this dialog is capturing a multi-DD slip rather than a single draft. */
+  get isSlip(): boolean {
+    return this.lineCount > 1;
+  }
+
+  /** Whether the debit lands on a GL account rather than a member's — wording only. */
+  get isGlFunded(): boolean {
+    return !!this.data.glFunded;
+  }
+
+  /** The form the Save button validates against — whichever of the two was built. */
+  get activeForm(): FormGroup {
+    return this.isSlip ? this.slipForm : this.form;
+  }
+
+  get slipLines(): FormArray {
+    return this.slipForm.get('lines') as FormArray;
+  }
+
+  /** The provisional leaflet number shown against a line, if the caller supplied a run of them. */
+  previewNumberAt(index: number): string | null {
+    return this.data.previewDdNumbers?.[index] ?? null;
+  }
+
+  private lineValueAt(index: number, field: string): number {
+    return Number(this.slipLines.at(index)?.get(field)?.value) || 0;
+  }
+
+  /**
+   * GST on one line's charge.
+   *
+   * Rounded per line, matching the server, which computes and stores GST against each draft rather
+   * than once for the slip. Summing rounded lines and rounding a summed charge can differ by a
+   * paisa, and it is the per-line figure that ends up on the draft.
+   */
+  lineGstAt(index: number): number {
+    const charges = this.lineValueAt(index, 'chargesAmount');
+    if (charges <= 0) return 0;
+    return Math.round(charges * (Number(this.data.gstPercentage) || 0)) / 100;
+  }
+
+  /** What one line adds to the debit — its face value, its charge and the GST on that charge. */
+  lineTotalAt(index: number): number {
+    return this.lineValueAt(index, 'faceValue') + this.lineValueAt(index, 'chargesAmount') + this.lineGstAt(index);
+  }
+
+  get slipFaceValue(): number {
+    return this.slipLines.controls.reduce((sum, _c, i) => sum + this.lineValueAt(i, 'faceValue'), 0);
+  }
+
+  get slipCharges(): number {
+    return this.slipLines.controls.reduce((sum, _c, i) => sum + this.lineValueAt(i, 'chargesAmount'), 0);
+  }
+
+  get slipGst(): number {
+    return this.slipLines.controls.reduce((sum, _c, i) => sum + this.lineGstAt(i), 0);
+  }
+
+  /** The figure the account is debited for — rounded up to the whole rupee, as the single flow does. */
+  get slipTotal(): number {
+    return Math.ceil(this.slipFaceValue + this.slipCharges + this.slipGst - 1e-9);
+  }
+
  ngOnInit(): void {
+    if (this.isSlip) {
+      this.slipForm = this.fb.group({
+        lines: this.fb.array(
+          Array.from({ length: this.lineCount }, () =>
+            this.fb.group({
+              beneficiaryName: [
+                '',
+                [
+                  Validators.required,
+                  Validators.maxLength(120)
+                ]
+              ],
+              payableAtBranch: [
+                '',
+                [Validators.required]
+              ],
+              payableAtCity: [
+                '',
+                [Validators.required]
+              ],
+              // Zero is rejected rather than merely warned about: the server refuses a line with a
+              // face value at or below zero, and a slip that fails there has already cost the clerk
+              // every other line they typed.
+              faceValue: [
+                null as
+                  | number
+                  | null,
+                [
+                  Validators.required,
+                  Validators.min(0.01)
+                ]
+              ],
+              chargesAmount: [
+                0,
+                [Validators.min(0)]
+              ]
+            })
+          )
+        )
+      });
+      return;
+    }
+
    // Walk-in identity is required for cash and rejected outright for an account debit — the server
    // refuses a walk-in name alongside an account — so the controls are only built when they apply.
    // Registering them unconditionally and merely hiding them would hold the form invalid on a
@@ -474,7 +869,25 @@ export class CashierIssueDdDialogComponent implements OnInit {
  }

  onSubmit(): void {
-    if (this.form.invalid) return;
+    if (this.activeForm.invalid) return;
+
+    // A slip closes with its lines. There is no walk-in branch here: a slip is only ever offered on
+    // a member-account debit, where the purchaser is the account holder already on record.
+    if (this.isSlip) {
+      const lines: DdSlipLineResult[] = this.slipLines.controls.map((c) => {
+        const v = c.value;
+        return {
+          beneficiaryName: (v.beneficiaryName || '').trim().toUpperCase(),
+          payableAtBranch: (v.payableAtBranch || '').trim().toUpperCase(),
+          payableAtCity: (v.payableAtCity || '').trim().toUpperCase(),
+          faceValue: Number(v.faceValue) || 0,
+          chargesAmount: Number(v.chargesAmount) || 0
+        };
+      });
+      this.dialogRef.close({ lines });
+      return;
+    }
+
    const val = this.form.value;
    const beneficiary = {
      beneficiaryName: (val.beneficiaryName || '').trim().toUpperCase(),
@@ -166,23 +166,50 @@
                    </div>
                    <div class="ws-f ws-f--actyp">
                      <label class="ws-f__lbl" title="Account Type">AC. TP.</label>
-                      <select
-                        class="ws-f__ctl"
-                        [(ngModel)]="row.acTyp"
-                        (click)="$event.stopPropagation()"
-                        (change)="
-                          row.acTyp === 'GL' &&
-                            row.typ !== 'Disbursement' &&
-                            row.typ !== 'Fund Transfer' &&
-                            row.typ !== 'Enter Bank Transfer' &&
-                            (row.dbCr = 'Cr')
-                        "
-                      >
-                        @for (a of acTypOptions; track a) {
-                          <option [value]="a">{{ a }}</option>
-                        }
-                      </select>
+                      @if (acTypLockedByToken && row === selectedRow) {
+                        <span
+                          class="ws-f__ctl ws-f__ctl--locked"
+                          title="Locked — filled from a token-driven request, not a normal account entry"
+                          >{{ acTypLockedLabel }}</span
+                        >
+                      } @else {
+                        <select
+                          class="ws-f__ctl"
+                          [(ngModel)]="row.acTyp"
+                          (click)="$event.stopPropagation()"
+                          (change)="
+                            row.acTyp === 'GL' &&
+                              row.typ !== 'Disbursement' &&
+                              row.typ !== 'Fund Transfer' &&
+                              row.typ !== 'Enter Bank Transfer' &&
+                              (row.dbCr = 'Cr')
+                          "
+                        >
+                          @for (a of acTypOptionsFor(row); track a) {
+                            <option [value]="a">{{ a }}</option>
+                          }
+                        </select>
+                      }
                    </div>
+                    @if (showsEntryType(row)) {
+                      <div class="ws-f ws-f--paytype">
+                        <label
+                          class="ws-f__lbl ws-f__lbl--accent"
+                          title="What this money was actually collected for — checked before a share application or DD issuance can adopt this voucher"
+                          >ENTRY TYPE</label
+                        >
+                        <select
+                          class="ws-f__ctl ws-f__ctl--accent"
+                          [(ngModel)]="row.entryTypeCvId"
+                          (click)="$event.stopPropagation()"
+                        >
+                          <option [ngValue]="null">Select…</option>
+                          @for (t of entryTypeOptions; track t.id) {
+                            <option [ngValue]="t.id">{{ t.name }}</option>
+                          }
+                        </select>
+                      </div>
+                    }
                  </div>
                </div>

@@ -206,14 +233,20 @@
                              ? ddGlMapping?.ddPayableGlCode || 'Auto GL'
                              : 'Account number'
                        "
-                        [readonly]="row.typ === 'DD' && !isDdAccountDebitRow(row)"
-                        [class.ws-f__ctl--readonly]="row.typ === 'DD' && !isDdAccountDebitRow(row)"
+                        [readonly]="
+                          (row.typ === 'DD' && !isDdAccountDebitRow(row)) || (acTypLockedByToken && row === selectedRow)
+                        "
+                        [class.ws-f__ctl--readonly]="
+                          (row.typ === 'DD' && !isDdAccountDebitRow(row)) || (acTypLockedByToken && row === selectedRow)
+                        "
                        [title]="
-                          isDdAccountDebitRow(row)
-                            ? 'Member account the draft is funded from'
-                            : row.typ === 'DD'
-                              ? 'Configured Sponsor DD Payable GL (Auto-selected)'
-                              : 'Account number'
+                          acTypLockedByToken && row === selectedRow
+                            ? 'Locked — filled from a token-driven request, not a normal account entry'
+                            : isDdAccountDebitRow(row)
+                              ? 'Member account the draft is funded from'
+                              : row.typ === 'DD'
+                                ? 'Configured Sponsor DD Payable GL (Auto-selected)'
+                                : 'Account number'
                        "
                      />
                    </div>
@@ -286,9 +319,13 @@
                          [value]="row.amount ?? ''"
                          (input)="row.amount = +$any($event.target).value; syncShareLinkedAmounts()"
                          (click)="$event.stopPropagation()"
-                          [placeholder]="row.acTyp === 'SHR' ? '0' : '0.00'"
-                          [readonly]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
-                          [class.ws-amt-input--locked]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
+                          [placeholder]="isMultiDdRow(row) ? 'Per draft' : row.acTyp === 'SHR' ? '0' : '0.00'"
+                          [readonly]="
+                            isMultiDdRow(row) || (!isClerk && !!(activeWithdrawalRequest || activeClosureRequest))
+                          "
+                          [class.ws-amt-input--locked]="
+                            isMultiDdRow(row) || (!isClerk && !!(activeWithdrawalRequest || activeClosureRequest))
+                          "
                        />
                      </div>
                      @if (row.acTyp === 'SHR' && rowSharePrices[row.acNo]) {
@@ -298,6 +335,19 @@
                          }}/share</span
                        >
                      }
+                      <!-- On a slip the face value belongs to each draft, so the row total is the sum of
+                           them and is filled in by the dialog rather than typed here. A clerk-typed
+                           figure could disagree with the drafts, and the account would be debited for
+                           a total the drafts do not add up to. -->
+                      @if (isMultiDdRow(row)) {
+                        <span class="ws-f__hint">
+                          {{
+                            row.ddLines?.length
+                              ? 'Total of ' + row.ddLines?.length + ' drafts'
+                              : 'Set per draft in Fill DD Details'
+                          }}
+                        </span>
+                      }
                    </div>
                    @if (row.acTyp === 'SHR' && (row.typ === 'Enter Bank Transfer' || row.typ === 'Fund Transfer')) {
                      <div class="ws-f ws-f--cheqno">
@@ -377,9 +427,36 @@
                  <div class="ws-group ws-group--flex">
                    <span class="ws-caption">DD Charges &amp; GST — Admin Rate {{ ddGstPercentage }}%</span>
                    <div class="ws-group__fields">
+                      <!-- How many drafts this one debit funds. Typed before the details are filled in,
+                           because it is what decides how many beneficiary forms the dialog presents.
+                           Offered only where the server can honour it: a member savings/current
+                           account debit, never a GL or cash draft. -->
+                      @if (canRowBeMultiDd(row)) {
+                        <div class="ws-f ws-f--amt">
+                          <label class="ws-f__lbl" title="Number of demand drafts to raise against this single debit"
+                            >NO. OF DD</label
+                          >
+                          <div class="ws-amt-wrap">
+                            <input
+                              class="ws-f__ctl ws-amt-input"
+                              type="number"
+                              min="1"
+                              [max]="maxDdSlipLines"
+                              step="1"
+                              [value]="ddCountFor(row)"
+                              (input)="onDdCountChange(row, +$any($event.target).value)"
+                              (click)="$event.stopPropagation()"
+                              placeholder="1"
+                            />
+                          </div>
+                          @if (isMultiDdRow(row)) {
+                            <span class="ws-f__hint">One debit · {{ ddCountFor(row) }} drafts</span>
+                          }
+                        </div>
+                      }
                      <div class="ws-f ws-f--amt">
                        <label class="ws-f__lbl" title="DD issuance charges / commission">CHARGES</label>
-                        <div class="ws-amt-wrap">
+                        <div class="ws-amt-wrap" [class.ws-amt-wrap--locked]="isMultiDdRow(row)">
                          <span class="ws-amt-prefix">₹</span>
                          <input
                            class="ws-f__ctl ws-amt-input"
@@ -388,8 +465,15 @@
                            (input)="row.ddCharges = +$any($event.target).value"
                            (click)="$event.stopPropagation()"
                            placeholder="0.00"
+                            [readonly]="isMultiDdRow(row)"
+                            [class.ws-amt-input--locked]="isMultiDdRow(row)"
                          />
                        </div>
+                        <!-- Charges are levied per draft and can differ between them, so on a slip they
+                             are entered against each draft and totalled here. -->
+                        @if (isMultiDdRow(row)) {
+                          <span class="ws-f__hint">Set per draft</span>
+                        }
                      </div>
                      <div class="ws-f ws-f--amt">
                        <label class="ws-f__lbl" title="GST on charges, at the admin-configured rate">
@@ -400,7 +484,7 @@
                          <input
                            class="ws-f__ctl ws-amt-input ws-amt-input--locked"
                            type="text"
-                            [value]="ddGstAmountFor(row) | number: '1.2-2'"
+                            [value]="ddGstDisplayFor(row)"
                            readonly
                          />
                        </div>
@@ -414,7 +498,7 @@
                          <input
                            class="ws-f__ctl ws-amt-input ws-amt-input--locked"
                            type="text"
-                            [value]="ddTotalPayableFor(row)"
+                            [value]="ddTotalDisplayFor(row)"
                            readonly
                          />
                        </div>
@@ -427,13 +511,28 @@
                          [disabled]="saving"
                          (click)="openIssueWalkinDd(row); $event.stopPropagation()"
                          [title]="
-                            isDdAccountDebitRow(row)
-                              ? 'Auto-selects next available leaflet and opens the beneficiary form'
-                              : 'Auto-selects next available leaflet and opens walk-in purchaser form'
+                            isMultiDdRow(row)
+                              ? 'Opens one beneficiary form per draft; DD numbers are allocated on submission'
+                              : isDdAccountDebitRow(row)
+                                ? 'Auto-selects next available leaflet and opens the beneficiary form'
+                                : 'Auto-selects next available leaflet and opens walk-in purchaser form'
                          "
                        >
-                          <mat-icon style="font-size: 18px; width: 18px; height: 18px">post_add</mat-icon>
-                          <span>Fill DD Details &amp; Send for Approval</span>
+                          <mat-icon style="font-size: 18px; width: 18px; height: 18px">{{
+                            row.ddDetails || row.ddLines?.length ? 'edit_note' : 'post_add'
+                          }}</mat-icon>
+                          <!-- Names the leaflet once details are captured, so the clerk can see at a
+                               glance which rows are ready before pressing Save. A slip names the count
+                               instead: its numbers are not allocated until it is submitted. -->
+                          <span>{{
+                            row.ddLines?.length
+                              ? row.ddLines?.length + ' Drafts Captured · Edit Slip'
+                              : row.ddDetails
+                                ? 'DD ' + row.ddDetails.ddNumber + ' · Edit Details'
+                                : isMultiDdRow(row)
+                                  ? 'Fill ' + ddCountFor(row) + ' DD Details'
+                                  : 'Fill DD Details'
+                          }}</span>
                        </button>
                      </div>
                    </div>
@@ -1517,23 +1616,50 @@
                        </div>
                        <div class="ws-f ws-f--actyp">
                          <label class="ws-f__lbl">AC. TP.</label>
-                          <select
-                            class="ws-f__ctl"
-                            [(ngModel)]="row.acTyp"
-                            (click)="$event.stopPropagation()"
-                            (change)="
-                              row.acTyp === 'GL' &&
-                                row.typ !== 'Disbursement' &&
-                                row.typ !== 'Fund Transfer' &&
-                                row.typ !== 'Enter Bank Transfer' &&
-                                (row.dbCr = 'Cr')
-                            "
-                          >
-                            @for (a of acTypOptions; track a) {
-                              <option [value]="a">{{ a }}</option>
-                            }
-                          </select>
+                          @if (acTypLockedByToken && row === selectedRow) {
+                            <span
+                              class="ws-f__ctl ws-f__ctl--locked"
+                              title="Locked — filled from a token-driven request, not a normal account entry"
+                              >{{ acTypLockedLabel }}</span
+                            >
+                          } @else {
+                            <select
+                              class="ws-f__ctl"
+                              [(ngModel)]="row.acTyp"
+                              (click)="$event.stopPropagation()"
+                              (change)="
+                                row.acTyp === 'GL' &&
+                                  row.typ !== 'Disbursement' &&
+                                  row.typ !== 'Fund Transfer' &&
+                                  row.typ !== 'Enter Bank Transfer' &&
+                                  (row.dbCr = 'Cr')
+                              "
+                            >
+                              @for (a of acTypOptionsFor(row); track a) {
+                                <option [value]="a">{{ a }}</option>
+                              }
+                            </select>
+                          }
                        </div>
+                        @if (showsEntryType(row)) {
+                          <div class="ws-f ws-f--paytype">
+                            <label
+                              class="ws-f__lbl ws-f__lbl--accent"
+                              title="What this money was actually collected for — checked before a share application or DD issuance can adopt this voucher"
+                              >ENTRY TYPE</label
+                            >
+                            <select
+                              class="ws-f__ctl ws-f__ctl--accent"
+                              [(ngModel)]="row.entryTypeCvId"
+                              (click)="$event.stopPropagation()"
+                            >
+                              <option [ngValue]="null">Select…</option>
+                              @for (t of entryTypeOptions; track t.id) {
+                                <option [ngValue]="t.id">{{ t.name }}</option>
+                              }
+                            </select>
+                          </div>
+                        }
                      </div>
                    </div>
                    <div class="ws-vdivider"></div>
@@ -1550,10 +1676,16 @@
                            [placeholder]="
                              row.typ === 'DD' ? ddGlMapping?.ddPayableGlCode || 'Auto GL' : 'Account number'
                            "
-                            [readonly]="row.typ === 'DD'"
-                            [class.ws-f__ctl--readonly]="row.typ === 'DD'"
+                            [readonly]="row.typ === 'DD' || (acTypLockedByToken && row === selectedRow)"
+                            [class.ws-f__ctl--readonly]="
+                              row.typ === 'DD' || (acTypLockedByToken && row === selectedRow)
+                            "
                            [title]="
-                              row.typ === 'DD' ? 'Configured Sponsor DD Payable GL (Auto-selected)' : 'Account number'
+                              acTypLockedByToken && row === selectedRow
+                                ? 'Locked — filled from a token-driven request, not a normal account entry'
+                                : row.typ === 'DD'
+                                  ? 'Configured Sponsor DD Payable GL (Auto-selected)'
+                                  : 'Account number'
                            "
                          />
                        </div>
@@ -1622,10 +1754,12 @@
                              [value]="row.amount ?? ''"
                              (input)="row.amount = +$any($event.target).value; syncShareLinkedAmounts()"
                              (click)="$event.stopPropagation()"
-                              [placeholder]="row.acTyp === 'SHR' ? '0' : '0.00'"
-                              [readonly]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
+                              [placeholder]="isMultiDdRow(row) ? 'Per draft' : row.acTyp === 'SHR' ? '0' : '0.00'"
+                              [readonly]="
+                                isMultiDdRow(row) || (!isClerk && !!(activeWithdrawalRequest || activeClosureRequest))
+                              "
                              [class.ws-amt-input--locked]="
-                                !isClerk && !!(activeWithdrawalRequest || activeClosureRequest)
+                                isMultiDdRow(row) || (!isClerk && !!(activeWithdrawalRequest || activeClosureRequest))
                              "
                            />
                          </div>
@@ -1636,6 +1770,19 @@
                              }}/share</span
                            >
                          }
+                          <!-- On a slip the face value belongs to each draft, so the row total is the
+                               sum of them and is filled in by the dialog rather than typed here. A
+                               clerk-typed figure could disagree with the drafts, and the account would
+                               be debited for a total the drafts do not add up to. -->
+                          @if (isMultiDdRow(row)) {
+                            <span class="ws-f__hint">
+                              {{
+                                row.ddLines?.length
+                                  ? 'Total of ' + row.ddLines?.length + ' drafts'
+                                  : 'Set per draft in Fill DD Details'
+                              }}
+                            </span>
+                          }
                        </div>
                        @if (
                          row.acTyp === 'SHR' && (row.typ === 'Enter Bank Transfer' || row.typ === 'Fund Transfer')
@@ -1700,9 +1847,38 @@
                      <div class="ws-group ws-group--flex">
                        <span class="ws-caption">DD Charges &amp; GST — Admin Rate {{ ddGstPercentage }}%</span>
                        <div class="ws-group__fields">
+                          <!-- How many drafts this one debit funds. Typed before the details are filled
+                               in, because it is what decides how many beneficiary forms the dialog
+                               presents. Offered only where the server can honour it: a member
+                               savings/current account debit, never a GL or cash draft. -->
+                          @if (canRowBeMultiDd(row)) {
+                            <div class="ws-f ws-f--amt">
+                              <label
+                                class="ws-f__lbl"
+                                title="Number of demand drafts to raise against this single debit"
+                                >NO. OF DD</label
+                              >
+                              <div class="ws-amt-wrap">
+                                <input
+                                  class="ws-f__ctl ws-amt-input"
+                                  type="number"
+                                  min="1"
+                                  [max]="maxDdSlipLines"
+                                  step="1"
+                                  [value]="ddCountFor(row)"
+                                  (input)="onDdCountChange(row, +$any($event.target).value)"
+                                  (click)="$event.stopPropagation()"
+                                  placeholder="1"
+                                />
+                              </div>
+                              @if (isMultiDdRow(row)) {
+                                <span class="ws-f__hint">One debit · {{ ddCountFor(row) }} drafts</span>
+                              }
+                            </div>
+                          }
                          <div class="ws-f ws-f--amt">
                            <label class="ws-f__lbl" title="DD issuance charges / commission">CHARGES</label>
-                            <div class="ws-amt-wrap">
+                            <div class="ws-amt-wrap" [class.ws-amt-wrap--locked]="isMultiDdRow(row)">
                              <span class="ws-amt-prefix">₹</span>
                              <input
                                class="ws-f__ctl ws-amt-input"
@@ -1711,8 +1887,15 @@
                                (input)="row.ddCharges = +$any($event.target).value"
                                (click)="$event.stopPropagation()"
                                placeholder="0.00"
+                                [readonly]="isMultiDdRow(row)"
+                                [class.ws-amt-input--locked]="isMultiDdRow(row)"
                              />
                            </div>
+                            <!-- Charges are levied per draft and can differ between them, so on a slip
+                                 they are entered against each draft and totalled here. -->
+                            @if (isMultiDdRow(row)) {
+                              <span class="ws-f__hint">Set per draft</span>
+                            }
                          </div>
                          <div class="ws-f ws-f--amt">
                            <label class="ws-f__lbl" title="GST on charges, at the admin-configured rate">
@@ -1723,7 +1906,7 @@
                              <input
                                class="ws-f__ctl ws-amt-input ws-amt-input--locked"
                                type="text"
-                                [value]="ddGstAmountFor(row) | number: '1.2-2'"
+                                [value]="ddGstDisplayFor(row)"
                                readonly
                              />
                            </div>
@@ -1737,7 +1920,7 @@
                              <input
                                class="ws-f__ctl ws-amt-input ws-amt-input--locked"
                                type="text"
-                                [value]="ddTotalPayableFor(row)"
+                                [value]="ddTotalDisplayFor(row)"
                                readonly
                              />
                            </div>
@@ -1750,13 +1933,28 @@
                              [disabled]="saving"
                              (click)="openIssueWalkinDd(row); $event.stopPropagation()"
                              [title]="
-                                isDdAccountDebitRow(row)
-                                  ? 'Auto-selects next available leaflet and opens the beneficiary form'
-                                  : 'Auto-selects next available leaflet and opens walk-in purchaser form'
+                                isMultiDdRow(row)
+                                  ? 'Opens one beneficiary form per draft; DD numbers are allocated on submission'
+                                  : isDdAccountDebitRow(row)
+                                    ? 'Auto-selects next available leaflet and opens the beneficiary form'
+                                    : 'Auto-selects next available leaflet and opens walk-in purchaser form'
                              "
                            >
-                              <mat-icon style="font-size: 18px; width: 18px; height: 18px">post_add</mat-icon>
-                              <span>Fill DD Details &amp; Send for Approval</span>
+                              <mat-icon style="font-size: 18px; width: 18px; height: 18px">{{
+                                row.ddDetails || row.ddLines?.length ? 'edit_note' : 'post_add'
+                              }}</mat-icon>
+                              <!-- Names what has been captured, so the clerk can see at a glance which
+                                   rows are ready before pressing Save. A slip names its count instead:
+                                   its numbers are not allocated until it is submitted. -->
+                              <span>{{
+                                row.ddLines?.length
+                                  ? row.ddLines?.length + ' Drafts Captured · Edit Slip'
+                                  : row.ddDetails
+                                    ? 'DD ' + row.ddDetails.ddNumber + ' · Edit Details'
+                                    : isMultiDdRow(row)
+                                      ? 'Fill ' + ddCountFor(row) + ' DD Details'
+                                      : 'Fill DD Details'
+                              }}</span>
                            </button>
                          </div>
                        </div>
@@ -916,6 +916,20 @@ input.ws-f__ctl--readonly {
  font-size: 11px;
 }

+/* AC.TP shown as a locked label instead of the normal editable select, while the row is filled
+   from a token-driven request whose real account type row.acTyp cannot show (see
+   acTypLockedByToken in the component). */
+span.ws-f__ctl--locked {
+  display: inline-flex;
+  align-items: center;
+  background: #f1f5f9;
+  color: #475569;
+  cursor: not-allowed;
+  user-select: none;
+  font-size: 11px;
+  font-weight: 600;
+}
+
 input.ws-amt-input--locked {
  background: #fef9c3;
  color: #713f12;
@@ -16,6 +16,7 @@ import { MatInputModule } from '@angular/material/input';
 import { of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { CashierService } from '../cashier.service';
+import { businessToday } from 'app/core/utils/business-today';

 interface DenomRow {
  denominationId: number;
@@ -67,7 +68,7 @@ export class VaultPositionComponent implements OnInit {
  errorMsg = '';

  ngOnInit(): void {
-    const d = new Date();
+    const d = businessToday();
    this.asOfDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;

    this.service
@@ -13,6 +13,7 @@ import { ActivatedRoute } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 import { catchError, of } from 'rxjs';
 import { CashierService } from '../cashier.service';
+import { businessToday } from 'app/core/utils/business-today';

 /**
 * Which side of the register a screen shows.
@@ -227,7 +228,7 @@ export class VoucherReportComponent implements OnInit {
  }

  private todayIso(): string {
-    const now = new Date();
+    const now = businessToday();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
  }

@@ -129,6 +129,31 @@
          <span>* Date of Meeting</span>
          <input type="date" [(ngModel)]="meetingDate" [disabled]="isReview" />
        </label>
+        <label class="inv-form-field">
+          <span>* Settlement Destination</span>
+          @if (!isReview) {
+            <select [ngModel]="settlementMode" (ngModelChange)="onSettlementModeChange($event)">
+              <option value="SAVINGS">Member's Linked Savings Account</option>
+              <option value="GL">GL Account</option>
+            </select>
+          } @else {
+            <input
+              type="text"
+              [value]="reviewRequest?.settlement_mode === 'GL' ? 'GL Account' : 'Linked Savings Account'"
+              readonly
+            />
+          }
+        </label>
+        @if (!isReview && settlementMode === 'GL') {
+          <label class="inv-form-field">
+            <span>* Settlement GL Account</span>
+            <mifosx-gl-account-selector
+              [inputFormControl]="toGlAccountControl"
+              [glAccountList]="glAccountsData"
+              [required]="true"
+            ></mifosx-gl-account-selector>
+          </label>
+        }
        <label class="inv-form-field">
          <span>* Settlement Payment Type</span>
          @if (!isReview) {
@@ -386,14 +411,25 @@
              <td>Date of Meeting</td>
              <td>{{ meetingDate }}</td>
            </tr>
+            <tr>
+              <td>Settlement Destination</td>
+              <td>{{ settlementMode === 'GL' ? 'GL Account' : 'Linked Savings Account' }}</td>
+            </tr>
+            @if (settlementMode === 'GL') {
+              <tr>
+                <td>Settlement GL Account</td>
+                <td>{{ selectedSettlementGlName }}</td>
+              </tr>
+            } @else {
+              <tr>
+                <td>Linked Savings Account</td>
+                <td>{{ account?.savingsAccountNumber || 'None — settlement will not run automatically' }}</td>
+              </tr>
+            }
            <tr>
              <td>Settlement Payment Type</td>
              <td>{{ settlementPaymentTypeName }}</td>
            </tr>
-            <tr>
-              <td>Linked Savings Account</td>
-              <td>{{ account?.savingsAccountNumber || 'None — settlement will not run automatically' }}</td>
-            </tr>
          </tbody>
        </table>

@@ -8,7 +8,7 @@

 import { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
@@ -19,6 +19,9 @@ import { SharesService } from '../../shares/shares.service';
 import { ClerkShareWithdrawalService } from '../../cashier/clerk-share-withdrawal.service';
 import { CashierService } from '../../cashier/cashier.service';
 import { SearchSelectComponent, SearchSelectOption } from '../../shared/search-select/search-select.component';
+import { GlAccountSelectorComponent } from '../../shared/accounting/gl-account-selector/gl-account-selector.component';
+import { AccountingService } from '../../accounting/accounting.service';
+import { GLAccount } from '../../shared/models/general.model';

 export type ShareWdMode = 'create' | 'review';

@@ -51,7 +54,8 @@ interface ActivityEntry {
    RouterModule,
    MatIconModule,
    MatSnackBarModule,
-    SearchSelectComponent
+    SearchSelectComponent,
+    GlAccountSelectorComponent
  ]
 })
 export class ShareWithdrawalRequestComponent implements OnInit {
@@ -60,6 +64,7 @@ export class ShareWithdrawalRequestComponent implements OnInit {
  private sharesService = inject(SharesService);
  private wdService = inject(ClerkShareWithdrawalService);
  private cashierService = inject(CashierService);
+  private accountingService = inject(AccountingService);
  private snackBar = inject(MatSnackBar);

  /** When embedded (e.g. opened as a popup from a list screen instead of routed to directly), mode
@@ -91,6 +96,17 @@ export class ShareWithdrawalRequestComponent implements OnInit {
  paymentTypes: any[] = [];
  settlementPaymentTypeId: number | null = null;

+  /** Where the redeemed value goes. 'SAVINGS' (the long-standing default) credits the member's
+   *  linked savings account. 'GL' lets the clerk pick any postable GL account directly — same
+   *  option the Cashier's Transaction Entry screen already offers on its CR row, now available
+   *  here too so both entry points behave the same way. Naming the product's own Share Sundry GL
+   *  here is still fine: the backend recognises it and books straight to Sundry with no further
+   *  settlement leg (see ClerkShareWithdrawalRequestApiResource#submit). */
+  settlementMode: 'SAVINGS' | 'GL' = 'SAVINGS';
+  settlementGlAccountId: number | null = null;
+  glAccountsData: GLAccount[] = [];
+  toGlAccountControl = new UntypedFormControl('');
+
  activityLog: ActivityEntry[] = [];
  reviewRequest: any = null;
  showRejectDialog = false;
@@ -132,6 +148,17 @@ export class ShareWithdrawalRequestComponent implements OnInit {
    return this.selectedSettlementPaymentType?.name || '—';
  }

+  /** The chosen GL account's display name, for the confirm dialog and the checklist. Falls back to
+   *  the raw id while the GL account list is still loading. */
+  get selectedSettlementGlName(): string {
+    if (!this.settlementGlAccountId) {
+      return '—';
+    }
+    return (
+      this.glAccountsData.find((g) => g.id === this.settlementGlAccountId)?.name || `GL #${this.settlementGlAccountId}`
+    );
+  }
+
  get isFormValid(): boolean {
    if (!this.account) return false;
    if (!this.requestedShares || this.requestedShares <= 0) return false;
@@ -141,6 +168,7 @@ export class ShareWithdrawalRequestComponent implements OnInit {
    if (!this.resolutionNumber.trim()) return false;
    if (!this.meetingDate) return false;
    if (!this.settlementPaymentTypeId) return false;
+    if (this.settlementMode === 'GL' && !this.settlementGlAccountId) return false;
    return true;
  }

@@ -160,11 +188,18 @@ export class ShareWithdrawalRequestComponent implements OnInit {
        pass: shares > 0 && shares <= held,
        detail: `${shares} of ${held} shares held`
      },
-      {
-        label: 'Linked savings account confirmed',
-        pass: !!this.account?.savingsAccountNumber,
-        detail: this.account?.savingsAccountNumber || 'No linked savings account — settlement cannot run automatically'
-      },
+      this.settlementMode === 'GL'
+        ? {
+            label: 'Settlement GL Account selected',
+            pass: !!this.settlementGlAccountId,
+            detail: this.settlementGlAccountId ? this.selectedSettlementGlName : 'Missing'
+          }
+        : {
+            label: 'Linked savings account confirmed',
+            pass: !!this.account?.savingsAccountNumber,
+            detail:
+              this.account?.savingsAccountNumber || 'No linked savings account — settlement cannot run automatically'
+          },
      {
        label: 'Settlement Payment Type selected (non-cash)',
        pass: this.settlementPaymentTypeName !== '—',
@@ -214,11 +249,37 @@ export class ShareWithdrawalRequestComponent implements OnInit {
      .pipe(catchError(() => of([])))
      .subscribe((types: any[]) => (this.paymentTypes = types ?? []));

+    this.toGlAccountControl.valueChanges.subscribe((id: any) => {
+      this.settlementGlAccountId = id ? Number(id) : null;
+    });
+
    if (this.requestId && this.mode === 'review') {
      this.loadReviewRequest(this.requestId);
    }
  }

+  /** Flips the settlement destination. Switching away from GL clears whatever was picked so a
+   *  stale GL id can never ride along on a SAVINGS submission. */
+  onSettlementModeChange(mode: 'SAVINGS' | 'GL'): void {
+    this.settlementMode = mode;
+    if (mode === 'GL') {
+      this.loadGlAccounts();
+    } else {
+      this.settlementGlAccountId = null;
+      this.toGlAccountControl.setValue('');
+    }
+  }
+
+  /** Fetched on first use rather than with the page, since most withdrawals settle to savings. */
+  private loadGlAccounts(): void {
+    if (this.glAccountsData.length) {
+      return;
+    }
+    this.accountingService.getGlAccounts().subscribe((accounts: GLAccount[]) => {
+      this.glAccountsData = accounts ?? [];
+    });
+  }
+
  onAccountSelected(accountId: string): void {
    this.selectedAccountId = accountId;
    if (!accountId) {
@@ -246,6 +307,11 @@ export class ShareWithdrawalRequestComponent implements OnInit {
        this.resolutionNumber = req.resolution_number ?? '';
        this.meetingDate = req.meeting_date ? String(req.meeting_date).split('T')[0].split(' ')[0] : this.meetingDate;
        this.description = req.description ?? '';
+        this.settlementMode = req.settlement_mode === 'GL' ? 'GL' : 'SAVINGS';
+        this.settlementGlAccountId = req.settlement_gl_account_id ? Number(req.settlement_gl_account_id) : null;
+        if (this.settlementMode === 'GL') {
+          this.loadGlAccounts();
+        }

        if (req.activity_log) {
          try {
@@ -289,7 +355,9 @@ export class ShareWithdrawalRequestComponent implements OnInit {
      resolutionNumber: this.resolutionNumber.trim(),
      meetingDate: this.meetingDate,
      description: this.description,
-      settlementPaymentTypeId: this.settlementPaymentTypeId
+      settlementPaymentTypeId: this.settlementPaymentTypeId,
+      settlementMode: this.settlementMode,
+      ...(this.settlementMode === 'GL' ? { settlementGlAccountId: this.settlementGlAccountId } : {})
    };
    this.wdService.submit(payload).subscribe({
      next: () => {
@@ -969,6 +969,11 @@
          createClientForm.get('alternateMobileNo')?.touched
        ) {
          <mat-error>Enter valid 10-digit number (starts with 6-9)</mat-error>
+        } @else if (
+          createClientForm.get('alternateMobileNo')?.hasError('sameAsMobile') &&
+          createClientForm.get('alternateMobileNo')?.touched
+        ) {
+          <mat-error>Alternate number can't be the same as Mobile No</mat-error>
        }
      </mat-form-field>

@@ -979,7 +984,11 @@
            color="primary"
            type="button"
            class="verify-btn"
-            [disabled]="readOnly || createClientForm.get('alternateMobileNo')?.value?.length !== 10"
+            [disabled]="
+              readOnly ||
+              createClientForm.get('alternateMobileNo')?.value?.length !== 10 ||
+              createClientForm.get('alternateMobileNo')?.hasError('sameAsMobile')
+            "
            (click)="verifyAlternateDIP()"
          >
            <fa-icon icon="shield-alt" class="m-r-10"></fa-icon>
@@ -25,7 +25,10 @@ import {
  UntypedFormGroup,
  Validators,
  UntypedFormControl,
-  ReactiveFormsModule
+  ReactiveFormsModule,
+  ValidatorFn,
+  AbstractControl,
+  ValidationErrors
 } from '@angular/forms';
 import { Subject, Subscription, merge } from 'rxjs';
 import { filter, switchMap, takeUntil } from 'rxjs/operators';
@@ -640,8 +643,9 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
          this.createClientForm.get('degreeQualificationId')?.setValue('');
        }
      });
-    // Fetch all constitution options from code ID 17
-    this.clientService.getCodeValuesById(17).subscribe((options) => {
+    // Constitution options by code NAME, never by id: code ids differ per tenant (on abc_bank id 17 is the empty
+    // ClientClassification code and Constitution is id 24), so a hardcoded id left the dropdown empty.
+    this.clientService.getCodeValuesByName('Constitution').subscribe((options) => {
      if (options?.length) {
        this.constitutionOptions = options;
        // Sort master by value length descending so longer/more-specific keys match first
@@ -922,6 +926,16 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
    }
  }

+  /** Alternate Mobile No must differ from Mobile No — the same number saved in both fields is
+   *  meaningless (there's no second contact route) and the DIP checks would just repeat. */
+  private notSameAsMobileNoValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const value = control.value;
+      const mobileNo = control.parent?.get('mobileNo')?.value;
+      return value && mobileNo && value === mobileNo ? { sameAsMobile: true } : null;
+    };
+  }
+
  /**
   * Creates the client form.
   */
@@ -961,7 +975,8 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
        '',
        [
          Validators.pattern(/^[6-9]\d{9}$/),
-          Validators.maxLength(10)
+          Validators.maxLength(10),
+          this.notSameAsMobileNoValidator()
        ]
      ],
      emailAddress: [
@@ -1334,6 +1349,10 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
        // invalid) and its own reset never had a chance to run.
        this.mobileOtpVerified = false;
        this.mobileNewOtpId = null;
+        // Alternate Mobile No's "not same as Mobile No" validator reads mobileNo's current
+        // value, so re-run it here too — otherwise fixing mobileNo away from a clash leaves
+        // the alternate field's error stuck until the user also edits that field.
+        this.createClientForm.get('alternateMobileNo')?.updateValueAndValidity({ emitEvent: false });
      });

    this.createClientForm
@@ -221,6 +221,22 @@
                <mat-datepicker #addrIssueDatePicker></mat-datepicker>
              </mat-form-field>
            }
+            <mat-form-field appearance="outline" class="addr-ff">
+              <mat-label>Expiry date (optional)</mat-label>
+              <span matPrefix class="addr-prefix"><mat-icon>event_busy</mat-icon></span>
+              <input
+                matInput
+                [matDatepicker]="addrExpiryDatePicker"
+                formControlName="expiryDate"
+                [readonly]="readOnly || isAddressProofLinkedToKyc"
+              />
+              <mat-datepicker-toggle
+                matSuffix
+                [for]="addrExpiryDatePicker"
+                [disabled]="readOnly || isAddressProofLinkedToKyc"
+              ></mat-datepicker-toggle>
+              <mat-datepicker #addrExpiryDatePicker></mat-datepicker>
+            </mat-form-field>
          </div>

          <div class="addr-upload-grid" [class.addr-upload-grid--two]="selectedAddrProof.sides === 2">
@@ -238,14 +254,18 @@
              @if (existingAddressProofDocuments.length > 0 && !addrFiles.front && readOnly) {
                <div class="addr-dropzone addr-dropzone--has addr-dropzone--locked">
                  <div class="addr-dropzone__existing">
-                    @if (addrMergedPreview) {
-                      <img [src]="addrMergedPreview" alt="Saved address proof" class="addr-dropzone__thumb" />
+                    @if (existingAddrFrontSlotPreview) {
+                      <img
+                        [src]="existingAddrFrontSlotPreview"
+                        alt="Saved address proof"
+                        class="addr-dropzone__thumb"
+                      />
                    } @else {
                      <mat-icon class="addr-dropzone__doc-ic">description</mat-icon>
                    }
                    <div class="addr-dropzone__existing-meta">
                      <span class="addr-dropzone__existing-name">
-                        {{ existingAddressProofDocuments[0].fileName || existingAddressProofDocuments[0].name }}
+                        {{ existingAddrFrontSlotName }}
                      </span>
                      <button type="button" class="addr-dropzone__view" (click)="viewExistingAddressProof()">
                        <mat-icon>visibility</mat-icon>
@@ -278,14 +298,18 @@
                    <!-- Edit mode WITH existing doc — let the user view it OR
                         click anywhere to replace. -->
                    <div class="addr-dropzone__existing">
-                      @if (addrMergedPreview) {
-                        <img [src]="addrMergedPreview" alt="Saved address proof" class="addr-dropzone__thumb" />
+                      @if (existingAddrFrontSlotPreview) {
+                        <img
+                          [src]="existingAddrFrontSlotPreview"
+                          alt="Saved address proof"
+                          class="addr-dropzone__thumb"
+                        />
                      } @else {
                        <mat-icon class="addr-dropzone__doc-ic">description</mat-icon>
                      }
                      <div class="addr-dropzone__existing-meta">
                        <span class="addr-dropzone__existing-name">
-                          {{ existingAddressProofDocuments[0].fileName || existingAddressProofDocuments[0].name }}
+                          {{ existingAddrFrontSlotName }}
                        </span>
                        <div class="addr-dropzone__existing-actions">
                          <button
@@ -327,14 +351,18 @@
                @if (existingAddressProofDocuments.length > 0 && !addrFiles.back && readOnly) {
                  <div class="addr-dropzone addr-dropzone--has addr-dropzone--locked">
                    <div class="addr-dropzone__existing">
-                      @if (addrMergedPreview) {
-                        <img [src]="addrMergedPreview" alt="Saved address proof" class="addr-dropzone__thumb" />
+                      @if (existingAddrBackSlotPreview) {
+                        <img
+                          [src]="existingAddrBackSlotPreview"
+                          alt="Saved address proof"
+                          class="addr-dropzone__thumb"
+                        />
                      } @else {
                        <mat-icon class="addr-dropzone__doc-ic">description</mat-icon>
                      }
                      <div class="addr-dropzone__existing-meta">
                        <span class="addr-dropzone__existing-name">
-                          {{ existingAddressProofDocuments[0].fileName || existingAddressProofDocuments[0].name }}
+                          {{ existingAddrBackSlotName }}
                        </span>
                        <button type="button" class="addr-dropzone__view" (click)="viewExistingAddressProof()">
                          <mat-icon>visibility</mat-icon>
@@ -367,14 +395,18 @@
                      <!-- Edit mode WITH existing combined doc — same view + replace
                           pattern as the front slot, anchored to the saved file. -->
                      <div class="addr-dropzone__existing">
-                        @if (addrMergedPreview) {
-                          <img [src]="addrMergedPreview" alt="Saved address proof" class="addr-dropzone__thumb" />
+                        @if (existingAddrBackSlotPreview) {
+                          <img
+                            [src]="existingAddrBackSlotPreview"
+                            alt="Saved address proof"
+                            class="addr-dropzone__thumb"
+                          />
                        } @else {
                          <mat-icon class="addr-dropzone__doc-ic">description</mat-icon>
                        }
                        <div class="addr-dropzone__existing-meta">
                          <span class="addr-dropzone__existing-name">
-                            {{ existingAddressProofDocuments[0].fileName || existingAddressProofDocuments[0].name }}
+                            {{ existingAddrBackSlotName }}
                          </span>
                          <div class="addr-dropzone__existing-actions">
                            <button
@@ -102,7 +102,8 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
      Validators.required
    ],
    documentKey: [''],
-    issueDate: ['']
+    issueDate: [''],
+    expiryDate: ['']
  });

  currentForm: UntypedFormGroup = this.fb.group({
@@ -222,6 +223,12 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
    size: number;
    previewUrl: string | null;
  }[] = [];
+  /** Set only when the saved documents are separately-uploaded "<Proof> — Front"/"— Back"
+   *  files (the CKYC tab / client-kyc-step convention) rather than this component's own single
+   *  merged-PNG upload — lets the two slots show their own file instead of both showing
+   *  whichever one happened to be first. */
+  private existingAddrFrontPreview: string | null = null;
+  private existingAddrBackPreview: string | null = null;

  residenceTypes = [
    'Owned',
@@ -307,11 +314,10 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
          this.existingAddressProofDocuments = [];
          if (this.existingKycDocSides.front) this.existingAddressProofDocuments.push(this.existingKycDocSides.front);
          if (this.existingKycDocSides.back) this.existingAddressProofDocuments.push(this.existingKycDocSides.back);
-          if (this.existingKycDocSides.front?.previewUrl) {
-            this.addrMergedPreview = this.existingKycDocSides.front.previewUrl;
-          } else if (this.existingKycDocSides.back?.previewUrl) {
-            this.addrMergedPreview = this.existingKycDocSides.back.previewUrl;
-          }
+          // These already carry their own per-side preview from the KYC step's own mapping —
+          // keep the two slots distinct rather than collapsing them into one shared preview.
+          this.existingAddrFrontPreview = this.existingKycDocSides.front?.previewUrl || null;
+          this.existingAddrBackPreview = this.existingKycDocSides.back?.previewUrl || null;
          this.existingAddressProofIdentifierId = this.existingKycIdentifierId;
        }
      } else if (this.isAddressProofLinkedToKyc) {
@@ -327,6 +333,8 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
    this.currentForm.patchValue({ documentKey: '', issueDate: null });
    this.addrFiles = { front: null, back: null };
    this.addrMergedPreview = null;
+    this.existingAddrFrontPreview = null;
+    this.existingAddrBackPreview = null;
  }

  /**
@@ -356,6 +364,8 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
    this.addrFiles = { front: null, back: null };
    this.addrMergedFile = null;
    this.addrMergedPreview = null;
+    this.existingAddrFrontPreview = null;
+    this.existingAddrBackPreview = null;
    this.existingAddressProofIdentifierId = null;
    this.existingAddressProofDocuments = [];
    this.addressLoaded = false;
@@ -488,6 +498,7 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
    proofId: any;
    documentKey: string;
    issueDate: string;
+    expiryDate: string;
    files: { slot: string; file: File }[];
  } {
    const files: { slot: string; file: File }[] = [];
@@ -500,11 +511,13 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
      }
    }
    const rawIssueDate = this.permanentForm.get('issueDate')?.value;
+    const rawExpiryDate = this.permanentForm.get('expiryDate')?.value;
    return {
      proof: this.selectedAddrProof,
      proofId: this.permanentForm.get('proofId')?.value || '',
      documentKey: this.permanentForm.get('documentKey')?.value || '',
      issueDate: rawIssueDate ? this.dates.getDate(rawIssueDate) : '',
+      expiryDate: rawExpiryDate ? this.dates.getDate(rawExpiryDate) : '',
      files
    };
  }
@@ -644,7 +657,14 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
          this.tryLinkKycData();
          return;
        }
-        const identifier = identifiers.find((i: any) => this.findMatchingProof(i?.documentType?.name));
+        // Aadhaar, Passport, Voter ID and Driving Licence are valid OVDs for both this slot and
+        // the separate identity-proof one (client-kyc-step) — when a client has two such
+        // dual-purpose identifiers, that step always runs first and picks the OLDEST match (the
+        // one on file first, historically the identity proof), so picking the NEWEST match here
+        // lands this step on the other row without the two steps needing to coordinate.
+        const identifier = [...identifiers]
+          .sort((a: any, b: any) => (b?.id ?? 0) - (a?.id ?? 0))
+          .find((i: any) => this.findMatchingProof(i?.documentType?.name));
        if (!identifier?.id) {
          this.existingAddressProofCheckComplete = true;
          this.tryLinkKycData();
@@ -664,14 +684,19 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
            proofId: matchedProof.id,
            documentKey: identifier.documentKey || ''
          });
-          // 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.
+          // The description carries "Issue date: yyyy-MM-dd, Expiry date: yyyy-MM-dd" when set on
+          // create (see create-client.saveAddressProof / CkycTabComponent) — pull both out so the
+          // form's date fields show what was previously entered. Each match stops at the next
+          // comma so adding expiry after issue doesn't get swallowed into the issue-date capture.
          const desc: string = identifier.description || '';
-          const issueMatch = desc.match(/Issue date:\s*(.+)$/i);
+          const issueMatch = desc.match(/Issue date:\s*([^,|]+)/i);
+          const expiryMatch = desc.match(/Expiry date:\s*([^,|]+)/i);
          if (issueMatch) {
            this.permanentForm.patchValue({ issueDate: this.dates.parseDate(issueMatch[1].trim()) });
          }
+          if (expiryMatch) {
+            this.permanentForm.patchValue({ expiryDate: this.dates.parseDate(expiryMatch[1].trim()) });
+          }
        }

        this.clientsService.getClientIdentificationDocuments(this.existingAddressProofIdentifierId).subscribe({
@@ -685,6 +710,29 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
              size: d.size || 0,
              previewUrl: null as string | null
            }));
+
+            const sideOf = (d: { name: string; fileName: string }): 'front' | 'back' | null => {
+              const text = `${d.name || ''} ${d.fileName || ''}`.toLowerCase();
+              if (text.includes('back')) return 'back';
+              if (text.includes('front')) return 'front';
+              return null;
+            };
+            // Changing the document type (e.g. Aadhaar -> Passport) keeps the old front/back
+            // files attached to this same identifier rather than removing them, so there can be
+            // more than one "— Front"/"— Back" pair on file — sort newest-first before matching
+            // or this would keep showing the very first scan ever uploaded here.
+            const byNewest = [...this.existingAddressProofDocuments].sort((a, b) => Number(b.id) - Number(a.id));
+            const frontDoc = byNewest.find((d) => sideOf(d) === 'front');
+            const backDoc = byNewest.find((d) => sideOf(d) === 'back');
+
+            if (frontDoc || backDoc) {
+              // Separately-uploaded front/back — each side gets its own preview.
+              if (frontDoc) this.downloadAddrSidePreview(frontDoc, 'front');
+              if (backDoc) this.downloadAddrSidePreview(backDoc, 'back');
+              return;
+            }
+
+            // Legacy/single-file case: one combined (or unlabelled) document covers both slots.
            const firstImage = this.existingAddressProofDocuments.find((d) =>
              (d.type || '').toLowerCase().startsWith('image/')
            );
@@ -715,6 +763,50 @@ export class ClientIndiaAddressStepComponent implements OnInit, OnChanges {
    });
  }

+  private downloadAddrSidePreview(doc: { id: string; fileName: string; name: string }, slot: 'front' | 'back'): void {
+    this.clientsService.downloadClientIdentificationDocument(this.existingAddressProofIdentifierId!, doc.id).subscribe({
+      next: async (blob: any) => {
+        const buffer = await blob.arrayBuffer();
+        const bytes = new Uint8Array(buffer);
+        let binary = '';
+        for (let i = 0; i < bytes.length; i++) {
+          binary += String.fromCharCode(bytes[i]);
+        }
+        const url = 'data:' + blob.type + ';base64,' + btoa(binary);
+        if (slot === 'front') this.existingAddrFrontPreview = url;
+        else this.existingAddrBackPreview = url;
+      },
+      error: () => {}
+    });
+  }
+
+  /** What the Front slot should show: its own saved file when front/back were uploaded
+   *  separately, falling back to the single combined preview for legacy/merged uploads. */
+  get existingAddrFrontSlotPreview(): string | null {
+    return this.existingAddrFrontPreview || this.addrMergedPreview;
+  }
+
+  get existingAddrFrontSlotName(): string {
+    const front = this.existingAddressProofDocuments.find((d) =>
+      `${d.name} ${d.fileName}`.toLowerCase().includes('front')
+    );
+    const doc = front || this.existingAddressProofDocuments[0];
+    return doc?.fileName || doc?.name || '';
+  }
+
+  /** Same as above, for the Back slot. */
+  get existingAddrBackSlotPreview(): string | null {
+    return this.existingAddrBackPreview || this.addrMergedPreview;
+  }
+
+  get existingAddrBackSlotName(): string {
+    const back = this.existingAddressProofDocuments.find((d) =>
+      `${d.name} ${d.fileName}`.toLowerCase().includes('back')
+    );
+    const doc = back || this.existingAddressProofDocuments[0];
+    return doc?.fileName || doc?.name || '';
+  }
+
  onPinInput(tab: string) {
    const form = this.getForm(tab);
    const pin = form.get('pinCode')?.value?.replace(/\D/g, '') || '';
@@ -1321,6 +1321,11 @@
          kycForm.get('kycDocumentNumber')?.hasError('pattern') && kycForm.get('kycDocumentNumber')?.touched
        ) {
          <mat-error>Only letters, numbers, hyphens and slashes allowed</mat-error>
+        } @else if (
+          kycForm.get('kycDocumentNumber')?.hasError('aadhaarLast4Mismatch') &&
+          kycForm.get('kycDocumentNumber')?.touched
+        ) {
+          <mat-error>Last 4 digits do not match the Aadhaar number entered above</mat-error>
        }
      </mat-form-field>

@@ -7,7 +7,15 @@
 */

 import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, inject } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule } from '@angular/forms';
+import { forkJoin, catchError, of } from 'rxjs';
+import {
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  Validators,
+  FormsModule,
+  AbstractControl,
+  ValidationErrors
+} from '@angular/forms';
 import {
  MatDialog,
  MAT_DIALOG_DATA,
@@ -566,6 +574,28 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
  /** Existing signature document ID (for re-upload/delete) */
  existingSignatureDocId: string = '';

+  /**
+   * Cross-field check for the OVD "Document Number" field (kycDocumentNumber): when Aadhaar Card
+   * is the selected KYC document, its value must identify the same Aadhaar as the aadhaarNumber
+   * field captured earlier in this step - the last 4 digits are what's compared, since
+   * aadhaarNumber may hold either the raw 12-digit number or a masked value (masking only ever
+   * obscures the first 8 digits - see aadhaarMasked in the kycData getter below - so the last 4
+   * characters are always the real digits either way). Not applicable to any other document type,
+   * where kycDocumentNumber is unrelated to Aadhaar entirely.
+   */
+  private aadhaarLast4MatchValidator = (control: AbstractControl): ValidationErrors | null => {
+    if (this.selectedKycDoc?.code !== 'AADHAAR') {
+      return null;
+    }
+    const docNumber = (control.value || '').toString().trim();
+    const aadhaarValue = (control.parent?.get('aadhaarNumber')?.value || '').toString().trim();
+    if (docNumber.length < 4 || aadhaarValue.length < 4) {
+      // Required/pattern validators already flag an empty or too-short value on their own.
+      return null;
+    }
+    return docNumber.slice(-4) === aadhaarValue.slice(-4) ? null : { aadhaarLast4Mismatch: true };
+  };
+
  /** KYC Form */
  kycForm: UntypedFormGroup = this.formBuilder.group({
    hasPan: [true],
@@ -615,7 +645,8 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
      [
        Validators.required,
        Validators.pattern(/^[A-Za-z0-9\-\/\s]+$/),
-        Validators.maxLength(30)
+        Validators.maxLength(30),
+        this.aadhaarLast4MatchValidator
      ]
    ],
    kycDocIssueDate: [''],
@@ -738,6 +769,14 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
      this.kycForm.get('ecgcSalFlag')?.disable();
      this.kycForm.get('dormantFlag')?.disable();
    }
+
+    // aadhaarLast4MatchValidator (on kycDocumentNumber) reads this control's value directly rather
+    // than through its own valueChanges, so a re-check has to be triggered explicitly whenever the
+    // Aadhaar field itself changes - otherwise fixing aadhaarNumber after kycDocumentNumber was
+    // already entered would leave a stale mismatch error in place.
+    this.kycForm.get('aadhaarNumber')?.valueChanges.subscribe(() => {
+      this.kycForm.get('kycDocumentNumber')?.updateValueAndValidity({ onlySelf: true });
+    });
  }

  /** Seed the document-type picker from defaults (entity RBI docs vs. individual OVDs,
@@ -1008,6 +1047,9 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
    // Reset uploads + merged preview when document type changes
    this.kycDocFiles = { front: null, back: null };
    this.kycDocMergedPreview = null;
+    // aadhaarLast4MatchValidator only applies while Aadhaar Card is selected - re-check so switching
+    // to/away from it immediately picks up (or clears) the mismatch error.
+    this.kycForm.get('kycDocumentNumber')?.updateValueAndValidity({ onlySelf: true });
  }

  isKycDocSelected(proof: ProofType): boolean {
@@ -1188,6 +1230,9 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
          // Sync chip-picker selection with the prefilled document name
          if (data.kycDocumentName) {
            this.selectedKycDoc = this.findKycDocProofByName(data.kycDocumentName);
+            // patchValue above ran kycDocumentNumber's validators before selectedKycDoc was known,
+            // so aadhaarLast4MatchValidator needs a fresh check now that it is.
+            this.kycForm.get('kycDocumentNumber')?.updateValueAndValidity({ onlySelf: true });
          }
          // Set verification statuses from existing data
          if (data.panVerified) {
@@ -1266,8 +1311,14 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
        this.loadExistingKycIdentifier(data?.kycDocumentName);
      },
      error: () => {
-        // No existing KYC — that's fine for new clients
+        // No m_client_kyc row yet (e.g. CERSAI sync hasn't run) — that's fine, but the client
+        // can still have a KYC-type identifier already on file (uploaded via the CKYC tab,
+        // which writes straight to client_identifier and never touches this record). Look it
+        // up the same way the success branch does, just without a document-name hint.
        this.kycLoaded = true;
+        this.loadExistingPhoto();
+        this.loadExistingSignature();
+        this.loadExistingKycIdentifier(undefined);
      }
    });
  }
@@ -1283,8 +1334,13 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
   */
  private loadExistingKycIdentifier(kycDocumentName: string | undefined): void {
    if (!this.clientId) return;
-    this.clientsService.getClientIdentifiers(this.clientId).subscribe({
-      next: (identifiers: any[]) => {
+    forkJoin({
+      identifiers: this.clientsService.getClientIdentifiers(this.clientId),
+      // Only needed to spot the dual-purpose OVD types (Aadhaar/Passport/Voter ID/Driving
+      // Licence) below — a failure here just means that disambiguation step is skipped.
+      proofTypes: this.clientsService.getKycProofTypes().pipe(catchError(() => of({ addressProofs: [] })))
+    }).subscribe({
+      next: ({ identifiers, proofTypes }: { identifiers: any[]; proofTypes: any }) => {
        if (!identifiers || identifiers.length === 0) return;
        const cleanStr = (s: string) => (s || '').toLowerCase().replace(/[^a-z0-9]/g, '');
        const isKycType = (i: any) => {
@@ -1297,6 +1353,13 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
            })
          );
        };
+        // Aadhaar, Passport, Voter ID and Driving Licence are valid OVDs for BOTH this slot and
+        // the separate address-proof one (client-india-address-step) — a client with, say, a PAN
+        // identity proof and an Aadhaar address proof has two client_identifier rows that both
+        // pass isKycType. Without a name to go on, prefer whichever candidate is NOT also an
+        // address-proof type, so this slot doesn't grab the other step's file.
+        const addressTypeNames = new Set<string>((proofTypes?.addressProofs || []).map((p: any) => cleanStr(p?.name)));
+        const isAddressType = (i: any) => addressTypeNames.has(cleanStr(i?.documentType?.name));
        // 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
@@ -1311,7 +1374,15 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
              return name === kName || name.includes(kName) || kName.includes(name);
            })
          : null;
-        const identifier = match || sorted.find(isKycType);
+        // Last resort, when EVERY kyc-type candidate is also address-eligible (e.g. a client
+        // whose identity proof and address proof are both Aadhaar/Passport/Voter ID/Driving
+        // Licence): this stepper always runs before the address step in both the create and
+        // edit wizards, so the identity proof is the one that was on file first — pick the
+        // OLDEST match here, and the address step (client-india-address-step) picks the NEWEST
+        // among ITS own address-eligible candidates, so the two steps land on different rows
+        // without needing to coordinate at runtime.
+        const identifier =
+          match || sorted.find((i) => isKycType(i) && !isAddressType(i)) || [...sorted].reverse().find(isKycType);
        if (!identifier?.id) return;

        this.existingKycIdentifierId = identifier.id.toString();
@@ -1327,6 +1398,19 @@ export class ClientKycStepComponent implements OnInit, OnChanges, OnDestroy {
            kycDocumentNumber: identifier.documentKey || ''
          });
        }
+        // Same for issue/expiry date — the CKYC tab (and client-india-address-step, for address
+        // proof) write "Issue date: yyyy-MM-dd, Expiry date: yyyy-MM-dd" into the identifier's
+        // description; read it back here only to fill in whatever the KYC record itself doesn't
+        // already have, same as the documentKey backfill above.
+        const desc: string = identifier?.description || '';
+        const issueMatch = desc.match(/Issue date:\s*([^,|]+)/i);
+        const expiryMatch = desc.match(/Expiry date:\s*([^,|]+)/i);
+        if (issueMatch && !this.kycForm.get('kycDocIssueDate')?.value) {
+          this.kycForm.patchValue({ kycDocIssueDate: this.parseApiDate(issueMatch[1].trim()) });
+        }
+        if (expiryMatch && !this.kycForm.get('kycDocExpiryDate')?.value) {
+          this.kycForm.patchValue({ kycDocExpiryDate: this.parseApiDate(expiryMatch[1].trim()) });
+        }

        this.clientsService.getClientIdentificationDocuments(this.existingKycIdentifierId).subscribe({
          next: (docs: any[]) => {
@@ -61,6 +61,7 @@ import { KycTabComponent } from './clients-view/kyc-tab/kyc-tab.component';
 import { CkycTabComponent } from './clients-view/ckyc-tab/ckyc-tab.component';
 import { Form60TabComponent } from './clients-view/form60-tab/form60-tab.component';
 import { Form121TabComponent } from './clients-view/form121-tab/form121-tab.component';
+import { tdsConfigResolver } from '../letter-mgmt/certificates/form-15gh/tds-config.service';
 import { EntityClassificationTabComponent } from './clients-view/entity-classification-tab/entity-classification-tab.component';
 import { AuthorizedSignatoriesTabComponent } from './clients-view/authorized-signatories-tab/authorized-signatories-tab.component';
 import { familyAllowedGuard, nomineeAllowedGuard } from './utils/family-nominee.guard';
@@ -198,6 +199,7 @@ const routes: Routes = [
            {
              path: 'form121',
              component: Form121TabComponent,
+              resolve: { tdsConfig: tdsConfigResolver },
              data: { title: 'Form 121 / TDS', breadcrumb: 'Form 121 / TDS', routeParamBreadcrumb: false }
            },
            {
@@ -187,124 +187,6 @@
    }

    <div class="ckyc-upload-grid">
-      <!-- ID Proof Document -->
-      <mat-card class="ckyc-upload-card">
-        <mat-card-content>
-          <div class="ckyc-upload-header">
-            <mat-icon class="ckyc-upload-icon">badge</mat-icon>
-            <span>{{ 'labels.inputs.ID Proof Document' | translate }}</span>
-          </div>
-
-          @if (existing.ID_PROOF.present) {
-            <div class="ckyc-existing">
-              <div class="ckyc-existing__head">
-                <fa-icon icon="check-circle" class="ckyc-existing__ok"></fa-icon>
-                <div>
-                  <strong>Already available</strong>
-                  <span class="ckyc-existing__source">from {{ existing.ID_PROOF.source }}</span>
-                  @if (existing.ID_PROOF.previewUnavailable) {
-                    <span class="ckyc-existing__warn">stored file unavailable</span>
-                  }
-                </div>
-              </div>
-              @if (existing.ID_PROOF.previewUrl && isImage('ID_PROOF')) {
-                <img [src]="existing.ID_PROOF.previewUrl" alt="ID proof" class="ckyc-existing__thumb" />
-              }
-              @if (existing.ID_PROOF.previewUrl) {
-                <button mat-stroked-button type="button" class="ckyc-existing__view" (click)="openDocument('ID_PROOF')">
-                  <fa-icon icon="eye"></fa-icon>
-                  &nbsp;View document
-                </button>
-              }
-              <div class="ckyc-existing__meta">
-                <fa-icon icon="file-alt"></fa-icon>
-                <span>{{ existing.ID_PROOF.name }}</span>
-                @if (existing.ID_PROOF.documentKey) {
-                  <span class="ckyc-existing__key">{{ existing.ID_PROOF.documentKey }}</span>
-                }
-                @if (existing.ID_PROOF.fileCount && existing.ID_PROOF.fileCount > 0) {
-                  <span class="ckyc-existing__count">
-                    {{ existing.ID_PROOF.fileCount }}
-                    {{ existing.ID_PROOF.fileCount === 1 ? 'file' : 'files' }}
-                  </span>
-                }
-              </div>
-              <button
-                mat-stroked-button
-                type="button"
-                class="ckyc-existing__replace"
-                (click)="toggleReplace('ID_PROOF')"
-              >
-                <fa-icon [icon]="existing.ID_PROOF.expanded ? 'times' : 'upload'"></fa-icon>
-                {{ existing.ID_PROOF.expanded ? 'Cancel replace' : 'Upload new version' }}
-              </button>
-            </div>
-          }
-
-          @if (!existing.ID_PROOF.present || existing.ID_PROOF.expanded) {
-            <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
-            <div class="ckyc-file-row">
-              <input
-                type="file"
-                #idProofInput
-                accept=".png,.jpeg,.jpg,.pdf"
-                (change)="onFileSelect($event, 'ID_PROOF')"
-                [style.display]="'none'"
-              />
-              <mat-form-field appearance="outline" class="ckyc-file-name-field">
-                <input
-                  matInput
-                  [readonly]="true"
-                  [value]="idProofFile?.name || ''"
-                  [placeholder]="'labels.text.NoFileSelected' | translate"
-                />
-              </mat-form-field>
-              <button mat-stroked-button type="button" (click)="idProofInput.click()">
-                <fa-icon icon="folder-open" size="lg"></fa-icon>
-                &nbsp;{{ 'labels.buttons.Browse' | translate }}
-              </button>
-            </div>
-            <button
-              mat-raised-button
-              color="primary"
-              type="button"
-              [disabled]="!idProofFile || uploading['ID_PROOF']"
-              (click)="uploadDocument('ID_PROOF')"
-            >
-              @if (uploading['ID_PROOF']) {
-                <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
-              } @else {
-                {{ 'labels.buttons.Upload' | translate }}
-              }
-            </button>
-            @if (uploadErrors['ID_PROOF']) {
-              <div class="ckyc-upload-error">
-                <mat-icon>error_outline</mat-icon>
-                <span>{{ uploadErrors['ID_PROOF'] }}</span>
-              </div>
-            }
-            @if (uploadResponses['ID_PROOF']) {
-              <div class="ckyc-upload-response">
-                <p>
-                  <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['ID_PROOF'].status }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['ID_PROOF'].requestId }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
-                  {{ uploadResponses['ID_PROOF'].acknowledgementNumber }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
-                  {{ uploadResponses['ID_PROOF'].processingStatus }}
-                </p>
-              </div>
-            }
-          }
-        </mat-card-content>
-      </mat-card>
-
      <!-- Address Proof Document -->
      <mat-card class="ckyc-upload-card">
        <mat-card-content>
@@ -325,8 +207,25 @@
                  }
                </div>
              </div>
-              @if (existing.ADDRESS_PROOF.previewUrl && isImage('ADDRESS_PROOF')) {
-                <img [src]="existing.ADDRESS_PROOF.previewUrl" alt="Address proof" class="ckyc-existing__thumb" />
+              @if (
+                (existing.ADDRESS_PROOF.previewUrl || existing.ADDRESS_PROOF.previewUrlBack) && isImage('ADDRESS_PROOF')
+              ) {
+                <div class="ckyc-existing__thumbs">
+                  @if (existing.ADDRESS_PROOF.previewUrl) {
+                    <img
+                      [src]="existing.ADDRESS_PROOF.previewUrl"
+                      alt="Address proof scan - front"
+                      class="ckyc-existing__thumb"
+                    />
+                  }
+                  @if (existing.ADDRESS_PROOF.previewUrlBack) {
+                    <img
+                      [src]="existing.ADDRESS_PROOF.previewUrlBack"
+                      alt="Address proof scan - back"
+                      class="ckyc-existing__thumb"
+                    />
+                  }
+                </div>
              }
              @if (existing.ADDRESS_PROOF.previewUrl) {
                <button
@@ -352,78 +251,51 @@
                  </span>
                }
              </div>
+              @if (cardDate('ADDRESS_PROOF', 'issue') || cardDate('ADDRESS_PROOF', 'expiry')) {
+                <div class="ckyc-existing__dates">
+                  @if (cardDate('ADDRESS_PROOF', 'issue')) {
+                    <span
+                      ><fa-icon icon="calendar-check"></fa-icon> Issued {{ cardDate('ADDRESS_PROOF', 'issue') }}</span
+                    >
+                  }
+                  @if (cardDate('ADDRESS_PROOF', 'expiry')) {
+                    <span
+                      ><fa-icon icon="calendar-check"></fa-icon> Expires {{ cardDate('ADDRESS_PROOF', 'expiry') }}</span
+                    >
+                  }
+                </div>
+              }
              <button
                mat-stroked-button
                type="button"
                class="ckyc-existing__replace"
-                (click)="toggleReplace('ADDRESS_PROOF')"
+                (click)="openUploadDialog('ADDRESS_PROOF')"
              >
-                <fa-icon [icon]="existing.ADDRESS_PROOF.expanded ? 'times' : 'upload'"></fa-icon>
-                {{ existing.ADDRESS_PROOF.expanded ? 'Cancel replace' : 'Upload new version' }}
+                <fa-icon icon="upload"></fa-icon>
+                Upload new version
+              </button>
+            </div>
+          } @else {
+            <div class="ckyc-missing">
+              <p class="ckyc-upload-hint">Not uploaded yet. Accepted formats: PNG, JPEG, JPG, PDF</p>
+              <button mat-raised-button color="primary" type="button" (click)="openUploadDialog('ADDRESS_PROOF')">
+                <fa-icon icon="upload"></fa-icon>
+                &nbsp;{{ 'labels.buttons.Upload' | translate }}
              </button>
            </div>
          }

-          @if (!existing.ADDRESS_PROOF.present || existing.ADDRESS_PROOF.expanded) {
-            <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
-            <div class="ckyc-file-row">
-              <input
-                type="file"
-                #addressProofInput
-                accept=".png,.jpeg,.jpg,.pdf"
-                (change)="onFileSelect($event, 'ADDRESS_PROOF')"
-                [style.display]="'none'"
-              />
-              <mat-form-field appearance="outline" class="ckyc-file-name-field">
-                <input
-                  matInput
-                  [readonly]="true"
-                  [value]="addressProofFile?.name || ''"
-                  [placeholder]="'labels.text.NoFileSelected' | translate"
-                />
-              </mat-form-field>
-              <button mat-stroked-button type="button" (click)="addressProofInput.click()">
-                <fa-icon icon="folder-open" size="lg"></fa-icon>
-                &nbsp;{{ 'labels.buttons.Browse' | translate }}
-              </button>
+          @if (uploading['ADDRESS_PROOF']) {
+            <div class="ckyc-uploading">
+              <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
+              <span>Uploading…</span>
+            </div>
+          }
+          @if (uploadErrors['ADDRESS_PROOF']) {
+            <div class="ckyc-upload-error">
+              <mat-icon>error_outline</mat-icon>
+              <span>{{ uploadErrors['ADDRESS_PROOF'] }}</span>
            </div>
-            <button
-              mat-raised-button
-              color="primary"
-              type="button"
-              [disabled]="!addressProofFile || uploading['ADDRESS_PROOF']"
-              (click)="uploadDocument('ADDRESS_PROOF')"
-            >
-              @if (uploading['ADDRESS_PROOF']) {
-                <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
-              } @else {
-                {{ 'labels.buttons.Upload' | translate }}
-              }
-            </button>
-            @if (uploadErrors['ADDRESS_PROOF']) {
-              <div class="ckyc-upload-error">
-                <mat-icon>error_outline</mat-icon>
-                <span>{{ uploadErrors['ADDRESS_PROOF'] }}</span>
-              </div>
-            }
-            @if (uploadResponses['ADDRESS_PROOF']) {
-              <div class="ckyc-upload-response">
-                <p>
-                  <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['ADDRESS_PROOF'].status }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['ADDRESS_PROOF'].requestId }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
-                  {{ uploadResponses['ADDRESS_PROOF'].acknowledgementNumber }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
-                  {{ uploadResponses['ADDRESS_PROOF'].processingStatus }}
-                </p>
-              </div>
-            }
          }
        </mat-card-content>
      </mat-card>
@@ -448,8 +320,23 @@
                  }
                </div>
              </div>
-              @if (existing.PHOTO_PROOF.previewUrl && isImage('PHOTO_PROOF')) {
-                <img [src]="existing.PHOTO_PROOF.previewUrl" alt="Photo proof" class="ckyc-existing__thumb" />
+              @if ((existing.PHOTO_PROOF.previewUrl || existing.PHOTO_PROOF.previewUrlBack) && isImage('PHOTO_PROOF')) {
+                <div class="ckyc-existing__thumbs">
+                  @if (existing.PHOTO_PROOF.previewUrl) {
+                    <img
+                      [src]="existing.PHOTO_PROOF.previewUrl"
+                      alt="ID proof scan - front"
+                      class="ckyc-existing__thumb"
+                    />
+                  }
+                  @if (existing.PHOTO_PROOF.previewUrlBack) {
+                    <img
+                      [src]="existing.PHOTO_PROOF.previewUrlBack"
+                      alt="ID proof scan - back"
+                      class="ckyc-existing__thumb"
+                    />
+                  }
+                </div>
              }
              @if (existing.PHOTO_PROOF.previewUrl) {
                <button
@@ -474,78 +361,49 @@
                  </span>
                }
              </div>
+              @if (cardDate('PHOTO_PROOF', 'issue') || cardDate('PHOTO_PROOF', 'expiry')) {
+                <div class="ckyc-existing__dates">
+                  @if (cardDate('PHOTO_PROOF', 'issue')) {
+                    <span><fa-icon icon="calendar-check"></fa-icon> Issued {{ cardDate('PHOTO_PROOF', 'issue') }}</span>
+                  }
+                  @if (cardDate('PHOTO_PROOF', 'expiry')) {
+                    <span
+                      ><fa-icon icon="calendar-check"></fa-icon> Expires {{ cardDate('PHOTO_PROOF', 'expiry') }}</span
+                    >
+                  }
+                </div>
+              }
              <button
                mat-stroked-button
                type="button"
                class="ckyc-existing__replace"
-                (click)="toggleReplace('PHOTO_PROOF')"
+                (click)="openUploadDialog('PHOTO_PROOF')"
              >
-                <fa-icon [icon]="existing.PHOTO_PROOF.expanded ? 'times' : 'upload'"></fa-icon>
-                {{ existing.PHOTO_PROOF.expanded ? 'Cancel replace' : 'Upload new version' }}
+                <fa-icon icon="upload"></fa-icon>
+                Upload new version
+              </button>
+            </div>
+          } @else {
+            <div class="ckyc-missing">
+              <p class="ckyc-upload-hint">Not uploaded yet. Accepted formats: PNG, JPEG, JPG, PDF</p>
+              <button mat-raised-button color="primary" type="button" (click)="openUploadDialog('PHOTO_PROOF')">
+                <fa-icon icon="upload"></fa-icon>
+                &nbsp;{{ 'labels.buttons.Upload' | translate }}
              </button>
            </div>
          }

-          @if (!existing.PHOTO_PROOF.present || existing.PHOTO_PROOF.expanded) {
-            <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
-            <div class="ckyc-file-row">
-              <input
-                type="file"
-                #photoProofInput
-                accept=".png,.jpeg,.jpg,.pdf"
-                (change)="onFileSelect($event, 'PHOTO_PROOF')"
-                [style.display]="'none'"
-              />
-              <mat-form-field appearance="outline" class="ckyc-file-name-field">
-                <input
-                  matInput
-                  [readonly]="true"
-                  [value]="photoProofFile?.name || ''"
-                  [placeholder]="'labels.text.NoFileSelected' | translate"
-                />
-              </mat-form-field>
-              <button mat-stroked-button type="button" (click)="photoProofInput.click()">
-                <fa-icon icon="folder-open" size="lg"></fa-icon>
-                &nbsp;{{ 'labels.buttons.Browse' | translate }}
-              </button>
+          @if (uploading['PHOTO_PROOF']) {
+            <div class="ckyc-uploading">
+              <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
+              <span>Uploading…</span>
+            </div>
+          }
+          @if (uploadErrors['PHOTO_PROOF']) {
+            <div class="ckyc-upload-error">
+              <mat-icon>error_outline</mat-icon>
+              <span>{{ uploadErrors['PHOTO_PROOF'] }}</span>
            </div>
-            <button
-              mat-raised-button
-              color="primary"
-              type="button"
-              [disabled]="!photoProofFile || uploading['PHOTO_PROOF']"
-              (click)="uploadDocument('PHOTO_PROOF')"
-            >
-              @if (uploading['PHOTO_PROOF']) {
-                <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
-              } @else {
-                {{ 'labels.buttons.Upload' | translate }}
-              }
-            </button>
-            @if (uploadErrors['PHOTO_PROOF']) {
-              <div class="ckyc-upload-error">
-                <mat-icon>error_outline</mat-icon>
-                <span>{{ uploadErrors['PHOTO_PROOF'] }}</span>
-              </div>
-            }
-            @if (uploadResponses['PHOTO_PROOF']) {
-              <div class="ckyc-upload-response">
-                <p>
-                  <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['PHOTO_PROOF'].status }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['PHOTO_PROOF'].requestId }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
-                  {{ uploadResponses['PHOTO_PROOF'].acknowledgementNumber }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
-                  {{ uploadResponses['PHOTO_PROOF'].processingStatus }}
-                </p>
-              </div>
-            }
          }
        </mat-card-content>
      </mat-card>
@@ -570,8 +428,10 @@
                  }
                </div>
              </div>
-              @if (existing.CLIENT_IMAGE.previewUrl) {
+              @if (existing.CLIENT_IMAGE.previewUrl && isImage('CLIENT_IMAGE')) {
                <img [src]="existing.CLIENT_IMAGE.previewUrl" alt="Client photo" class="ckyc-existing__thumb" />
+              }
+              @if (existing.CLIENT_IMAGE.previewUrl) {
                <button
                  mat-stroked-button
                  type="button"
@@ -586,74 +446,33 @@
                mat-stroked-button
                type="button"
                class="ckyc-existing__replace"
-                (click)="toggleReplace('CLIENT_IMAGE')"
+                (click)="openUploadDialog('CLIENT_IMAGE')"
              >
-                <fa-icon [icon]="existing.CLIENT_IMAGE.expanded ? 'times' : 'upload'"></fa-icon>
-                {{ existing.CLIENT_IMAGE.expanded ? 'Cancel replace' : 'Upload new version' }}
+                <fa-icon icon="upload"></fa-icon>
+                Upload new version
+              </button>
+            </div>
+          } @else {
+            <div class="ckyc-missing">
+              <p class="ckyc-upload-hint">Not uploaded yet. Accepted formats: PNG, JPEG, JPG</p>
+              <button mat-raised-button color="primary" type="button" (click)="openUploadDialog('CLIENT_IMAGE')">
+                <fa-icon icon="upload"></fa-icon>
+                &nbsp;{{ 'labels.buttons.Upload' | translate }}
              </button>
            </div>
          }

-          @if (!existing.CLIENT_IMAGE.present || existing.CLIENT_IMAGE.expanded) {
-            <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG</p>
-            <div class="ckyc-file-row">
-              <input
-                type="file"
-                #clientImageInput
-                accept=".png,.jpeg,.jpg"
-                (change)="onFileSelect($event, 'CLIENT_IMAGE')"
-                [style.display]="'none'"
-              />
-              <mat-form-field appearance="outline" class="ckyc-file-name-field">
-                <input
-                  matInput
-                  [readonly]="true"
-                  [value]="clientImageFile?.name || ''"
-                  [placeholder]="'labels.text.NoFileSelected' | translate"
-                />
-              </mat-form-field>
-              <button mat-stroked-button type="button" (click)="clientImageInput.click()">
-                <fa-icon icon="folder-open" size="lg"></fa-icon>
-                &nbsp;{{ 'labels.buttons.Browse' | translate }}
-              </button>
+          @if (uploading['CLIENT_IMAGE']) {
+            <div class="ckyc-uploading">
+              <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
+              <span>Uploading…</span>
+            </div>
+          }
+          @if (uploadErrors['CLIENT_IMAGE']) {
+            <div class="ckyc-upload-error">
+              <mat-icon>error_outline</mat-icon>
+              <span>{{ uploadErrors['CLIENT_IMAGE'] }}</span>
            </div>
-            <button
-              mat-raised-button
-              color="primary"
-              type="button"
-              [disabled]="!clientImageFile || uploading['CLIENT_IMAGE']"
-              (click)="uploadDocument('CLIENT_IMAGE')"
-            >
-              @if (uploading['CLIENT_IMAGE']) {
-                <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
-              } @else {
-                {{ 'labels.buttons.Upload' | translate }}
-              }
-            </button>
-            @if (uploadErrors['CLIENT_IMAGE']) {
-              <div class="ckyc-upload-error">
-                <mat-icon>error_outline</mat-icon>
-                <span>{{ uploadErrors['CLIENT_IMAGE'] }}</span>
-              </div>
-            }
-            @if (uploadResponses['CLIENT_IMAGE']) {
-              <div class="ckyc-upload-response">
-                <p>
-                  <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['CLIENT_IMAGE'].status }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['CLIENT_IMAGE'].requestId }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
-                  {{ uploadResponses['CLIENT_IMAGE'].acknowledgementNumber }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
-                  {{ uploadResponses['CLIENT_IMAGE'].processingStatus }}
-                </p>
-              </div>
-            }
          }
        </mat-card-content>
      </mat-card>
@@ -678,7 +497,7 @@
                  }
                </div>
              </div>
-              @if (existing.CLIENT_SIGNATURE.previewUrl) {
+              @if (existing.CLIENT_SIGNATURE.previewUrl && isImage('CLIENT_SIGNATURE')) {
                <img
                  [src]="existing.CLIENT_SIGNATURE.previewUrl"
                  alt="Client signature"
@@ -704,75 +523,33 @@
                mat-stroked-button
                type="button"
                class="ckyc-existing__replace"
-                (click)="toggleReplace('CLIENT_SIGNATURE')"
+                (click)="openUploadDialog('CLIENT_SIGNATURE')"
              >
-                <fa-icon [icon]="existing.CLIENT_SIGNATURE.expanded ? 'times' : 'upload'"></fa-icon>
-                {{ existing.CLIENT_SIGNATURE.expanded ? 'Cancel replace' : 'Upload new version' }}
+                <fa-icon icon="upload"></fa-icon>
+                Upload new version
+              </button>
+            </div>
+          } @else {
+            <div class="ckyc-missing">
+              <p class="ckyc-upload-hint">Not uploaded yet. Accepted formats: PNG, JPEG, JPG</p>
+              <button mat-raised-button color="primary" type="button" (click)="openUploadDialog('CLIENT_SIGNATURE')">
+                <fa-icon icon="upload"></fa-icon>
+                &nbsp;{{ 'labels.buttons.Upload' | translate }}
              </button>
            </div>
          }

-          @if (!existing.CLIENT_SIGNATURE.present || existing.CLIENT_SIGNATURE.expanded) {
-            <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG</p>
-            <div class="ckyc-file-row">
-              <input
-                type="file"
-                #clientSignatureInput
-                accept=".png,.jpeg,.jpg"
-                (change)="onFileSelect($event, 'CLIENT_SIGNATURE')"
-                [style.display]="'none'"
-              />
-              <mat-form-field appearance="outline" class="ckyc-file-name-field">
-                <input
-                  matInput
-                  [readonly]="true"
-                  [value]="clientSignatureFile?.name || ''"
-                  [placeholder]="'labels.text.NoFileSelected' | translate"
-                />
-              </mat-form-field>
-              <button mat-stroked-button type="button" (click)="clientSignatureInput.click()">
-                <fa-icon icon="folder-open" size="lg"></fa-icon>
-                &nbsp;{{ 'labels.buttons.Browse' | translate }}
-              </button>
+          @if (uploading['CLIENT_SIGNATURE']) {
+            <div class="ckyc-uploading">
+              <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
+              <span>Uploading…</span>
+            </div>
+          }
+          @if (uploadErrors['CLIENT_SIGNATURE']) {
+            <div class="ckyc-upload-error">
+              <mat-icon>error_outline</mat-icon>
+              <span>{{ uploadErrors['CLIENT_SIGNATURE'] }}</span>
            </div>
-            <button
-              mat-raised-button
-              color="primary"
-              type="button"
-              [disabled]="!clientSignatureFile || uploading['CLIENT_SIGNATURE']"
-              (click)="uploadDocument('CLIENT_SIGNATURE')"
-            >
-              @if (uploading['CLIENT_SIGNATURE']) {
-                <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
-              } @else {
-                {{ 'labels.buttons.Upload' | translate }}
-              }
-            </button>
-            @if (uploadErrors['CLIENT_SIGNATURE']) {
-              <div class="ckyc-upload-error">
-                <mat-icon>error_outline</mat-icon>
-                <span>{{ uploadErrors['CLIENT_SIGNATURE'] }}</span>
-              </div>
-            }
-            @if (uploadResponses['CLIENT_SIGNATURE']) {
-              <div class="ckyc-upload-response">
-                <p>
-                  <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['CLIENT_SIGNATURE'].status }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Request ID' | translate }}:</b>
-                  {{ uploadResponses['CLIENT_SIGNATURE'].requestId }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
-                  {{ uploadResponses['CLIENT_SIGNATURE'].acknowledgementNumber }}
-                </p>
-                <p>
-                  <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
-                  {{ uploadResponses['CLIENT_SIGNATURE'].processingStatus }}
-                </p>
-              </div>
-            }
          }
        </mat-card-content>
      </mat-card>
@@ -553,15 +553,21 @@
  margin: 0 0 12px;
 }

-.ckyc-file-row {
+.ckyc-missing {
+  margin-top: 14px;
  display: flex;
+  flex-direction: column;
+  gap: 10px;
  align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 12px;
 }

-.ckyc-file-name-field {
-  flex: 1;
+.ckyc-uploading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  font-size: 12px;
+  color: #5f6368;
 }

 .ckyc-upload-error {
@@ -583,19 +589,6 @@
  }
 }

-.ckyc-upload-response {
-  margin-top: 12px;
-  padding: 10px 14px;
-  background-color: #e8f5e9;
-  border: 1px solid #a5d6a7;
-  border-radius: 8px;
-  font-size: 12px;
-
-  p {
-    margin: 4px 0;
-  }
-}
-
@media (width <= 900px) {
  .ckyc-upload-grid {
    grid-template-columns: 1fr;
@@ -610,14 +603,6 @@
  .ckyc-upload-grid {
    grid-template-columns: 1fr;
  }
-
-  .ckyc-file-row {
-    flex-direction: column;
-  }
-
-  .ckyc-file-name-field {
-    width: 100%;
-  }
 }

 /* ===================== Already-available banners ===================== */
@@ -760,6 +745,34 @@
    letter-spacing: 0.3px;
  }

+  &__thumbs {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  &__dates {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 11px;
+    color: #0f6e56;
+    flex-wrap: wrap;
+
+    span {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    fa-icon {
+      color: #1d9e75;
+      font-size: 11px;
+    }
+  }
+
  &__thumb {
    width: 100px;
    height: 100px;
@@ -9,52 +9,41 @@
 /** Angular Imports */
 import { Component, OnInit, OnDestroy, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subject, takeUntil, catchError, of } from 'rxjs';
+import { Subject, Observable, takeUntil, catchError, of, forkJoin } from 'rxjs';

 /** Custom Services */
 import { ClientsService } from '../../clients.service';
 import { AlertService } from 'app/core/alert/alert.service';
 import { MatIcon } from '@angular/material/icon';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatDialog } from '@angular/material/dialog';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { Dates } from 'app/core/utils/dates';
+import { ProofType, normalizeProofType } from '../../shared/kyc-proof-types';
+import { CkycUploadDialogComponent, CkycUploadDialogResult } from './ckyc-upload-dialog/ckyc-upload-dialog.component';

 interface ExistingArtefact {
  present: boolean;
  name?: string;
  source?: string;
  previewUrl?: string;
+  previewUrlBack?: string;
  documentId?: string;
+  documentTypeId?: string;
  documentKey?: string;
+  /** "Issue date: yyyy-MM-dd, Expiry date: yyyy-MM-dd" — same convention client-india-address-step
+   *  already writes/reads for address proof; now shared by the photo/identity proof too. */
+  description?: string;
  fileCount?: number;
-  expanded?: boolean;
  /** Set when the stored file could not be fetched - the row exists but its content is gone. */
  previewUnavailable?: boolean;
  /** Stored MIME type, so the card knows whether it can render an inline thumbnail. */
  mimeType?: string;
 }

-/**
- * Multipart `name` / `description` sent for each CKYC artefact type.
- *
- * The platform has no CKYC-specific document API; these are stored through the generic
- * DocumentApiResource, whose contract carries no document-type field. The artefact type therefore
- * travels in `name`, which is the same mechanism the client signature already uses - so
- * `CLIENT_SIGNATURE` deliberately reuses the existing `clientSignature` value that
- * loadExistingArtefacts() (and uploadClientSignatureImage()) match on. Changing that string would
- * orphan every previously uploaded signature.
- */
-export type CkycDocumentType = 'ID_PROOF' | 'ADDRESS_PROOF' | 'PHOTO_PROOF' | 'CLIENT_IMAGE' | 'CLIENT_SIGNATURE';
-
-const CKYC_DOCUMENT_META: Record<CkycDocumentType, { name: string; description: string }> = {
-  ID_PROOF: { name: 'ckycIdProof', description: 'CKYC ID proof' },
-  ADDRESS_PROOF: { name: 'ckycAddressProof', description: 'CKYC address proof' },
-  PHOTO_PROOF: { name: 'ckycPhotoProof', description: 'CKYC photo proof' },
-  CLIENT_IMAGE: { name: 'ckycClientImage', description: 'CKYC client photograph' },
-  CLIENT_SIGNATURE: { name: 'clientSignature', description: 'Client signature' }
-};
-
-const CKYC_DOCUMENT_TYPES = Object.keys(CKYC_DOCUMENT_META) as CkycDocumentType[];
+type ProofKind = 'ADDRESS_PROOF' | 'PHOTO_PROOF';
+type CkycDocKind = ProofKind | 'CLIENT_IMAGE' | 'CLIENT_SIGNATURE';

 /**
 * Client-side upload guards, kept deliberately in step with the backend so a file that passes here
@@ -62,8 +51,8 @@ const CKYC_DOCUMENT_TYPES = Object.keys(CKYC_DOCUMENT_META) as CkycDocumentType[
 *  - 5 MB matches `spring.servlet.multipart.max-file-size`
 *  - the extension list is the intersection of the backend `fineract.content.regex-whitelist`
 *    with what these cards can actually render.
- * `accept=` on the input is only a file-picker hint and is trivially bypassed, so the real check
- * lives in onFileSelect().
+ * The dialog's `accept=` is only a file-picker hint and is trivially bypassed, so the real check
+ * runs here, on the file the dialog hands back, before anything is sent.
 */
 const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
 const IMAGE_EXTENSIONS = [
@@ -76,8 +65,8 @@ const DOCUMENT_EXTENSIONS = [
  'pdf'
 ];

-/** Types whose card renders an inline <img> preview, so a PDF would not display. */
-const IMAGE_ONLY_TYPES: CkycDocumentType[] = [
+/** Cards that render an inline <img>, so a PDF would not display in them. */
+const IMAGE_ONLY_KINDS: CkycDocKind[] = [
  'CLIENT_IMAGE',
  'CLIENT_SIGNATURE'
 ];
@@ -98,6 +87,8 @@ export class CkycTabComponent implements OnInit, OnDestroy {
  private route = inject(ActivatedRoute);
  private clientsService = inject(ClientsService);
  private alertService = inject(AlertService);
+  private dialog = inject(MatDialog);
+  private dates = inject(Dates);

  private destroy$ = new Subject<void>();

@@ -131,37 +122,55 @@ export class CkycTabComponent implements OnInit, OnDestroy {
    return this.panVerified && this.aadhaarVerified;
  }

-  /** CKYC artefacts already uploaded for this client, keyed by artefact type. */
-  existing: Record<CkycDocumentType, ExistingArtefact> = {
-    ID_PROOF: { present: false },
+  /** Pre-existing artefacts detected from client data */
+  existing: Record<CkycDocKind, ExistingArtefact> = {
    ADDRESS_PROOF: { present: false },
    PHOTO_PROOF: { present: false },
    CLIENT_IMAGE: { present: false },
    CLIENT_SIGNATURE: { present: false }
  };

+  /** Document-type options for the proof pickers, fetched once from /kyc/proof-types */
+  addressProofOptions: ProofType[] = [];
+  idProofOptions: ProofType[] = [];
+
+  /** Document type currently selected in each proof card's picker */
+  selectedProofType: Record<ProofKind, ProofType | null> = {
+    ADDRESS_PROOF: null,
+    PHOTO_PROOF: null
+  };
+
+  /** Front/back files staged for the two proof cards; other cards keep a single file each */
+  docFiles: Record<ProofKind, { front: File | null; back: File | null }> = {
+    ADDRESS_PROOF: { front: null, back: null },
+    PHOTO_PROOF: { front: null, back: null }
+  };
+
+  /** Document number + issue/expiry dates staged from the upload dialog, same fields client
+   *  creation collects for a KYC/address proof — persisted onto the identifier's documentKey
+   *  and description ("Issue date: yyyy-MM-dd, Expiry date: yyyy-MM-dd"). */
+  private documentDetails: Record<
+    ProofKind,
+    { documentKey: string; issueDate: string | null; expiryDate: string | null }
+  > = {
+    ADDRESS_PROOF: { documentKey: '', issueDate: null, expiryDate: null },
+    PHOTO_PROOF: { documentKey: '', issueDate: null, expiryDate: null }
+  };
+
  /** File references */
-  idProofFile: File | null = null;
-  addressProofFile: File | null = null;
-  photoProofFile: File | null = null;
  clientImageFile: File | null = null;
  clientSignatureFile: File | null = null;

  /** Per-document upload state */
  uploading: { [key: string]: boolean } = {
-    ID_PROOF: false,
    ADDRESS_PROOF: false,
    PHOTO_PROOF: false,
    CLIENT_IMAGE: false,
    CLIENT_SIGNATURE: false
  };

-  /** Per-document upload response */
-  uploadResponses: { [key: string]: any } = {};
-
  /** Per-document error messages */
  uploadErrors: { [key: string]: string | null } = {
-    ID_PROOF: null,
    ADDRESS_PROOF: null,
    PHOTO_PROOF: null,
    CLIENT_IMAGE: null,
@@ -171,6 +180,11 @@ export class CkycTabComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    this.route.parent.params.subscribe((params: any) => {
      this.clientId = params['clientId'];
+      // Angular reuses this component when only the clientId in the route changes, and
+      // loadExistingArtefacts() only ever *assigns* what it finds - it has no "not found" branch.
+      // Without clearing first, a client with no photo (or no signature, or no proof) keeps showing
+      // the previous client's card.
+      this.resetArtefactState();
      this.loadClientInfo();
      this.loadAccounts();
      this.loadCkycData();
@@ -178,6 +192,46 @@ export class CkycTabComponent implements OnInit, OnDestroy {
    });
  }

+  /**
+   * Returns every per-client card to its empty state, so nothing from the client just viewed can
+   * survive into the next one. Covers all four cards plus the details staged for an upload - a file
+   * or document number left over from another client must never be submitted against this one.
+   */
+  private resetArtefactState(): void {
+    this.revokePreviewUrls();
+    this.existing = {
+      ADDRESS_PROOF: { present: false },
+      PHOTO_PROOF: { present: false },
+      CLIENT_IMAGE: { present: false },
+      CLIENT_SIGNATURE: { present: false }
+    };
+    this.selectedProofType = { ADDRESS_PROOF: null, PHOTO_PROOF: null };
+    this.docFiles = {
+      ADDRESS_PROOF: { front: null, back: null },
+      PHOTO_PROOF: { front: null, back: null }
+    };
+    this.documentDetails = {
+      ADDRESS_PROOF: { documentKey: '', issueDate: null, expiryDate: null },
+      PHOTO_PROOF: { documentKey: '', issueDate: null, expiryDate: null }
+    };
+    this.clientImageFile = null;
+    this.clientSignatureFile = null;
+    this.uploadErrors = {
+      ADDRESS_PROOF: null,
+      PHOTO_PROOF: null,
+      CLIENT_IMAGE: null,
+      CLIENT_SIGNATURE: null
+    };
+  }
+
+  /** Frees the blob URLs held by the current cards before their references are dropped. */
+  private revokePreviewUrls(): void {
+    Object.values(this.existing).forEach((e) => {
+      if (e.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(e.previewUrl);
+      if (e.previewUrlBack?.startsWith('blob:')) URL.revokeObjectURL(e.previewUrlBack);
+    });
+  }
+
  private loadClientInfo(): void {
    this.route.parent.data.subscribe((data: any) => {
      const cv = data?.clientViewData;
@@ -263,123 +317,270 @@ export class CkycTabComponent implements OnInit, OnDestroy {
  }

  /**
-   * Loads every CKYC artefact from the client's documents (`m_document`), which is the single
-   * source of truth for this screen: each card matches the `name` its own upload writes, so what
-   * the checker sees is exactly what CKYC stored.
-   *
-   * Deliberately does NOT read the profile image or client identifiers any more. Those belong to
-   * client registration and the Identities section; reading them here showed artefacts this screen
-   * had never uploaded, and hid the ones it had. Those other screens are untouched.
-   *
-   * A client can accumulate several rows for one artefact (older uploads pre-date replacement, and
-   * the signature is also written by client registration), so the newest row - highest `id` - wins.
+   * Fetch photo (profile image), signature (client document),
+   * ID proof and address proof (client identifiers) so already-uploaded
+   * artefacts are shown here instead of forcing re-upload.
   */
  private loadExistingArtefacts(): void {
    this.checkingExisting = true;

+    forkJoin({
+      photo: this.clientsService.getClientProfileImage(this.clientId).pipe(catchError(() => of(null))),
+      documents: this.clientsService.getClientDocuments(this.clientId).pipe(catchError(() => of([]))),
+      identifiers: this.clientsService.getClientIdentifiers(this.clientId).pipe(catchError(() => of([]))),
+      proofTypes: this.clientsService.getKycProofTypes().pipe(catchError(() => of({ idProofs: [], addressProofs: [] })))
+    })
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(({ photo, documents, identifiers, proofTypes }) => {
+        this.checkingExisting = false;
+
+        // 1. Photo / image of client — from m_client.image_id
+        if (photo && typeof photo === 'string' && photo.length > 0) {
+          this.existing.CLIENT_IMAGE = {
+            present: true,
+            source: 'Client registration',
+            previewUrl: photo,
+            name: 'Profile photo'
+          };
+        }
+
+        // 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,
+            source: 'Client registration',
+            name: signatureDoc.fileName || 'Client signature',
+            documentId: signatureDoc.id,
+            mimeType: signatureDoc.type
+          };
+          // Same endpoint getClientSignatureImage() uses, but opted out of the global error alert:
+          // a m_document row whose file is no longer in the content store returns 500, and the card
+          // below reports that itself. Without `silent` the interceptor pops an "Internal Server
+          // Error" modal on every page load, for a failure the user cannot act on.
+          this.clientsService
+            .downloadClientDocument(this.clientId, String(signatureDoc.id), true)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+              next: (blob: any) => {
+                if (blob && blob.size > 0) {
+                  this.existing.CLIENT_SIGNATURE.previewUrl = URL.createObjectURL(blob);
+                } else {
+                  // A 200 with an empty body still means there is nothing to show. Without this the
+                  // card would claim "Already available" with no thumbnail and no explanation.
+                  this.existing.CLIENT_SIGNATURE.previewUnavailable = true;
+                }
+              },
+              error: () => {
+                this.existing.CLIENT_SIGNATURE.previewUnavailable = true;
+              }
+            });
+        }
+
+        // 3 & 4. ID proof + Address proof — client identifiers classified via proof-types
+        this.idProofOptions = (proofTypes?.idProofs || []).map((p: any) => normalizeProofType(p));
+        this.addressProofOptions = (proofTypes?.addressProofs || []).map((p: any) => normalizeProofType(p));
+        const idProofIds = new Set<string>((proofTypes?.idProofs || []).map((p: any) => String(p.id)));
+        const addressProofIds = new Set<string>((proofTypes?.addressProofs || []).map((p: any) => String(p.id)));
+
+        const idList = Array.isArray(identifiers) ? identifiers : (identifiers as any)?.pageItems || [];
+
+        for (const identity of idList) {
+          const docTypeId = String(identity?.documentType?.id ?? '');
+          const isActive =
+            !identity?.status ||
+            identity?.status?.code === 'clientIdentifierStatusType.active' ||
+            identity?.status === 'clientIdentifierStatusType.active' ||
+            identity?.status === 'Active';
+          if (!isActive) continue;
+
+          const proofName = identity?.documentType?.name || 'Identifier';
+          // Address proof documentKey is auto-generated as "<ProofName> - <clientId>"
+          // in identities-tab; hide it when it's just that synthetic key.
+          const rawKey = identity?.documentKey || '';
+          const isSyntheticKey = rawKey.startsWith(`${proofName} - `);
+          const common = {
+            present: true,
+            source: 'Identities section',
+            name: proofName,
+            documentKey: isSyntheticKey ? '' : rawKey,
+            documentId: identity?.id,
+            documentTypeId: docTypeId,
+            description: identity?.description || '',
+            fileCount: (identity?.documents || []).length
+          };
+
+          if (idProofIds.has(docTypeId) && !this.existing.PHOTO_PROOF.present) {
+            this.existing.PHOTO_PROOF = common;
+            this.selectedProofType.PHOTO_PROOF = this.idProofOptions.find((p) => String(p.id) === docTypeId) || null;
+            this.loadIdentifierDocPreview('PHOTO_PROOF', identity.id);
+          } else if (addressProofIds.has(docTypeId) && !this.existing.ADDRESS_PROOF.present) {
+            this.existing.ADDRESS_PROOF = common;
+            this.selectedProofType.ADDRESS_PROOF =
+              this.addressProofOptions.find((p) => String(p.id) === docTypeId) || null;
+            this.loadIdentifierDocPreview('ADDRESS_PROOF', identity.id);
+          }
+        }
+      });
+  }
+
+  /**
+   * The scanned ID/address-proof card only showed its file name and key — never the scan
+   * itself, unlike the photo and signature cards right beside it. Mirrors those two: fetch
+   * the identifier's own attached document(s) (m_client_identifier -> m_document, the same
+   * chain the Identities tab and the create-client stepper read) and download the latest for
+   * an inline preview. Two-sided proof types (Aadhaar, Passport, Voter ID, Driving Licence)
+   * store front/back as two separate documents named "<Proof> — Front"/"— Back" (the same
+   * convention the create-client stepper writes), so both are matched and previewed here;
+   * a legacy single upload with no such marker just shows as the one preview.
+   */
+  private loadIdentifierDocPreview(kind: ProofKind, identifierId: string): void {
    this.clientsService
-      .getClientDocuments(this.clientId)
+      .getClientIdentificationDocuments(identifierId)
      .pipe(
        takeUntil(this.destroy$),
        catchError(() => of([]))
      )
-      .subscribe((documents: any) => {
-        this.checkingExisting = false;
+      .subscribe((docs: any) => {
+        const list = Array.isArray(docs) ? docs : [];
+        if (!list.length) return;
+        this.existing[kind].fileCount = list.length;
+        this.existing[kind].previewUnavailable = false;

-        const list: any[] = Array.isArray(documents) ? documents : (documents?.pageItems ?? []);
+        const byNewest = (a: any, b: any) => b.id - a.id;
+        const label = (d: any) => (d?.name || d?.fileName || '').toString();
+        const back = [...list].filter((d: any) => /back/i.test(label(d))).sort(byNewest)[0];
+        const front =
+          [...list].filter((d: any) => /front/i.test(label(d))).sort(byNewest)[0] ||
+          [...list].filter((d: any) => d.id !== back?.id).sort(byNewest)[0];

-        for (const type of CKYC_DOCUMENT_TYPES) {
-          const expectedName = CKYC_DOCUMENT_META[type].name;
-
-          const doc = list
-            .filter((d: any) => d?.name === expectedName)
-            .sort((a: any, b: any) => (b?.id ?? 0) - (a?.id ?? 0))[0];
-
-          if (!doc) {
-            // No upload yet for this artefact - leave the card in its empty state.
-            this.existing[type] = { present: false };
-            continue;
-          }
-
-          this.existing[type] = {
-            present: true,
-            source: 'CKYC upload',
-            name: doc.fileName || expectedName,
-            documentId: doc.id,
-            mimeType: doc.type
-          };
-
-          this.loadPreview(type, doc.id);
-        }
+        // A proof can be scanned to PDF, which no <img> can render - remember what was stored so the
+        // card offers "View document" instead of a broken thumbnail.
+        if (front) this.existing[kind].mimeType = front.type;
+        if (front) this.downloadIdentifierDocPreview(identifierId, front.id, kind, 'front');
+        if (back && back.id !== front?.id) this.downloadIdentifierDocPreview(identifierId, back.id, kind, 'back');
      });
  }

-  /**
-   * Fetches the stored file so the card can show a thumbnail. A failure here is reported on the
-   * card rather than swallowed: the usual cause is a `m_document` row whose file is no longer in
-   * the content store, and silently showing "Already available" with no image hides that.
-   */
-  private loadPreview(type: CkycDocumentType, documentId: string | number): void {
+  private downloadIdentifierDocPreview(
+    identifierId: string,
+    documentId: string,
+    kind: ProofKind,
+    slot: 'front' | 'back'
+  ): void {
    this.clientsService
-      // silent: a missing stored file returns 500, and the card below already reports that. Without
-      // this the global error interceptor pops an "Internal Server Error" modal on every page load
-      // and after every upload, for a failure the user cannot act on.
-      .downloadClientDocument(this.clientId, String(documentId), true)
+      .downloadClientIdentificationDocument(identifierId, documentId)
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (blob: any) => {
-          if (blob && blob.size > 0) {
-            this.existing[type].previewUrl = URL.createObjectURL(blob);
-          } else {
-            // A 200 with an empty body still means there is nothing to show. Without this the card
-            // would sit there claiming "Already available" with no thumbnail and no explanation.
-            this.existing[type].previewUnavailable = true;
+          if (!blob || blob.size === 0) {
+            this.existing[kind].previewUnavailable = true;
+            return;
          }
+          const url = URL.createObjectURL(blob);
+          if (slot === 'front') this.existing[kind].previewUrl = url;
+          else this.existing[kind].previewUrlBack = url;
        },
+        // The row exists but its file is gone from the content store. Saying so on the card beats
+        // showing "Already available" next to a blank space.
        error: () => {
-          this.existing[type].previewUnavailable = true;
+          this.existing[kind].previewUnavailable = true;
        }
      });
  }

-  /**
-   * True when the stored file can be shown as an inline thumbnail. A PDF cannot, so its card falls
-   * back to the "View document" button alone rather than rendering a broken image.
-   */
-  isImage(documentType: CkycDocumentType): boolean {
-    const entry = this.existing[documentType];
-    if (entry?.mimeType) {
-      return entry.mimeType.startsWith('image/');
-    }
-    // Older rows can have no stored MIME type - fall back to the file extension.
-    const extension = (entry?.name?.split('.').pop() || '').toLowerCase();
-    return IMAGE_EXTENSIONS.includes(extension);
-  }
-
-  /**
-   * Opens the uploaded document full size in a new tab. Uses the blob already fetched for the
-   * thumbnail, so it works for PDFs too and costs no extra request.
-   */
-  openDocument(documentType: CkycDocumentType): void {
-    const url = this.existing[documentType]?.previewUrl;
-    if (url) {
-      window.open(url, '_blank', 'noopener');
-    }
-  }
-
-  toggleReplace(documentType: string): void {
-    const entry = (this.existing as any)[documentType];
-    if (entry) entry.expanded = !entry.expanded;
-  }
-
  onAccountSelect(accountNo: string): void {
    this.selectedAccount = this.allAccounts.find((a) => a.accountNo === accountNo) || null;
    this.selectedAccountType = this.selectedAccount?.accountType || '';
  }

+  getFile(documentType: string): File | null {
+    switch (documentType) {
+      case 'CLIENT_IMAGE':
+        return this.clientImageFile;
+      case 'CLIENT_SIGNATURE':
+        return this.clientSignatureFile;
+      default:
+        return null;
+    }
+  }
+
+  private static readonly CARD_TITLES: Record<CkycDocKind, string> = {
+    ADDRESS_PROOF: 'Address Proof Document',
+    PHOTO_PROOF: 'Photo Proof Document',
+    CLIENT_IMAGE: 'Image of Client',
+    CLIENT_SIGNATURE: 'Signature of Client'
+  };
+
+  /** Opens the picker/preview popup for one card and, once the user confirms a file there, feeds
+   *  the picked type/file(s) into the same upload path the card always used. Picking and preview
+   *  now live entirely in the dialog — this screen only stages the result and re-runs upload. */
+  openUploadDialog(kind: CkycDocKind): void {
+    const isProofKind = kind === 'ADDRESS_PROOF' || kind === 'PHOTO_PROOF';
+    const action = this.existing[kind].present ? 'Replace' : 'Upload';
+    const existingDates = isProofKind
+      ? this.parseDescriptionDates(this.existing[kind].description)
+      : { issueDate: null, expiryDate: null };
+
+    const ref = this.dialog.open(CkycUploadDialogComponent, {
+      width: '480px',
+      maxWidth: '95vw',
+      data: {
+        title: `${action} ${CkycTabComponent.CARD_TITLES[kind]}`,
+        isProofKind,
+        accept: isProofKind ? '.png,.jpeg,.jpg,.pdf' : '.png,.jpeg,.jpg',
+        proofOptions:
+          kind === 'PHOTO_PROOF'
+            ? this.idProofOptions
+            : kind === 'ADDRESS_PROOF'
+              ? this.addressProofOptions
+              : undefined,
+        initialProofType: isProofKind ? this.selectedProofType[kind as ProofKind] : undefined,
+        initialDocumentKey: isProofKind ? this.existing[kind].documentKey || '' : undefined,
+        initialIssueDate: existingDates.issueDate,
+        initialExpiryDate: existingDates.expiryDate
+      }
+    });
+
+    ref.afterClosed().subscribe((result: CkycUploadDialogResult | null) => {
+      if (!result) return;
+
+      // The dialog's `accept=` filter is only a hint to the file picker and is trivially bypassed,
+      // so the size/type guard runs here on what actually came back. Catching it now turns a raw
+      // server rejection into a message on the card.
+      const rejection =
+        this.validationError(result.front, kind) ?? (result.back ? this.validationError(result.back, kind) : null);
+      if (rejection) {
+        this.uploadErrors[kind] = rejection;
+        return;
+      }
+      this.uploadErrors[kind] = null;
+
+      if (isProofKind) {
+        const proofKind = kind as ProofKind;
+        this.selectedProofType[proofKind] = result.proofType || null;
+        this.docFiles[proofKind] = { front: result.front, back: result.back || null };
+        this.documentDetails[proofKind] = {
+          documentKey: result.documentKey || '',
+          issueDate: result.issueDate || null,
+          expiryDate: result.expiryDate || null
+        };
+      } else if (kind === 'CLIENT_IMAGE') {
+        this.clientImageFile = result.front;
+      } else {
+        this.clientSignatureFile = result.front;
+      }
+      this.uploadDocument(kind);
+    });
+  }
+
  /** Extensions a given card can both store and render. */
-  private allowedExtensions(documentType: string): string[] {
-    return IMAGE_ONLY_TYPES.includes(documentType as CkycDocumentType) ? IMAGE_EXTENSIONS : DOCUMENT_EXTENSIONS;
+  private allowedExtensions(kind: CkycDocKind): string[] {
+    return IMAGE_ONLY_KINDS.includes(kind) ? IMAGE_EXTENSIONS : DOCUMENT_EXTENSIONS;
  }

  /**
@@ -387,8 +588,11 @@ export class CkycTabComponent implements OnInit, OnDestroy {
   * so the user gets a clear message instead of a raw server error. Returns null when the file is
   * acceptable.
   */
-  private validationError(file: File, documentType: string): string | null {
-    const allowed = this.allowedExtensions(documentType);
+  private validationError(file: File | null | undefined, kind: CkycDocKind): string | null {
+    if (!file) {
+      return null;
+    }
+    const allowed = this.allowedExtensions(kind);
    const extension = (file.name.split('.').pop() || '').toLowerCase();

    if (!allowed.includes(extension)) {
@@ -404,125 +608,279 @@ export class CkycTabComponent implements OnInit, OnDestroy {
    return null;
  }

-  private setFile(documentType: string, file: File | null): void {
-    switch (documentType) {
-      case 'ID_PROOF':
-        this.idProofFile = file;
-        break;
-      case 'ADDRESS_PROOF':
-        this.addressProofFile = file;
-        break;
-      case 'PHOTO_PROOF':
-        this.photoProofFile = file;
-        break;
-      case 'CLIENT_IMAGE':
-        this.clientImageFile = file;
-        break;
-      case 'CLIENT_SIGNATURE':
-        this.clientSignatureFile = file;
-        break;
+  /**
+   * True when the stored file can be shown as an inline thumbnail. A PDF cannot, so its card falls
+   * back to the "View document" button alone rather than rendering a broken image.
+   */
+  isImage(kind: CkycDocKind): boolean {
+    const entry = this.existing[kind];
+    // The profile image arrives as a `data:image/...;base64,` URL, which declares its own type -
+    // it has neither a stored MIME type nor a file extension for the checks below to read.
+    if (entry?.previewUrl?.startsWith('data:')) {
+      return entry.previewUrl.startsWith('data:image/');
+    }
+    if (entry?.mimeType) {
+      return entry.mimeType.startsWith('image/');
+    }
+    // Older rows can have no stored MIME type - fall back to the file extension.
+    const extension = (entry?.name?.split('.').pop() || '').toLowerCase();
+    return IMAGE_EXTENSIONS.includes(extension);
+  }
+
+  /**
+   * Opens the uploaded document full size in a new tab. Uses the blob already fetched for the
+   * thumbnail, so it works for PDFs too and costs no extra request.
+   */
+  openDocument(kind: CkycDocKind): void {
+    const url = this.existing[kind]?.previewUrl;
+    if (url) {
+      window.open(url, '_blank', 'noopener');
    }
  }

-  onFileSelect(event: any, documentType: string): void {
-    const file = event.target?.files?.[0];
-    if (!file) return;
+  /** Reads back the "Issue date: yyyy-MM-dd, Expiry date: yyyy-MM-dd" convention this tab (and
+   *  client-india-address-step, for address proof) writes into the identifier's description. */
+  private parseDescriptionDates(description: string | undefined): { issueDate: Date | null; expiryDate: Date | null } {
+    const issueMatch = (description || '').match(/Issue date:\s*([^,|]+)/i);
+    const expiryMatch = (description || '').match(/Expiry date:\s*([^,|]+)/i);
+    return {
+      issueDate: issueMatch ? this.dates.parseDate(issueMatch[1].trim()) : null,
+      expiryDate: expiryMatch ? this.dates.parseDate(expiryMatch[1].trim()) : null
+    };
+  }

-    const error = this.validationError(file, documentType);
-    if (error) {
-      this.setFile(documentType, null);
-      this.uploadErrors[documentType] = error;
-      event.target.value = '';
+  private buildDescription(issueDate: string | null, expiryDate: string | null): string {
+    const parts: string[] = [];
+    if (issueDate) parts.push(`Issue date: ${issueDate}`);
+    if (expiryDate) parts.push(`Expiry date: ${expiryDate}`);
+    return parts.join(', ');
+  }
+
+  /** Issue/expiry date for display on the card, formatted dd-MM-yyyy — parsed from the same
+   *  description text the upload dialog writes. */
+  cardDate(kind: ProofKind, which: 'issue' | 'expiry'): string {
+    const parsed = this.parseDescriptionDates(this.existing[kind].description);
+    const value = which === 'issue' ? parsed.issueDate : parsed.expiryDate;
+    return value ? this.dates.formatDate(value, 'dd-MM-yyyy') : '';
+  }
+
+  /**
+   * Routes each card to whichever real endpoint that artefact is actually stored through — there
+   * is no single "/clients/{id}/ckyc/documents" resource on the backend, so posting every card to
+   * one made-up URL 404'd for all four. A photo goes to the image endpoint, a signature to the
+   * client's own documents, and an ID/address proof to the m_client_identifier it already belongs
+   * to (the same one the Identities tab and create-client stepper post to) — never a fresh,
+   * type-less upload, since which identifier a proof belongs to is exactly what makes it that
+   * proof rather than some other file on the client's record.
+   */
+  uploadDocument(documentType: string): void {
+    if (documentType === 'PHOTO_PROOF' || documentType === 'ADDRESS_PROOF') {
+      this.uploadProofDocument(documentType);
      return;
    }

-    this.setFile(documentType, file);
-    this.uploadErrors[documentType] = null;
-  }
-
-  getFile(documentType: string): File | null {
-    switch (documentType) {
-      case 'ID_PROOF':
-        return this.idProofFile;
-      case 'ADDRESS_PROOF':
-        return this.addressProofFile;
-      case 'PHOTO_PROOF':
-        return this.photoProofFile;
-      case 'CLIENT_IMAGE':
-        return this.clientImageFile;
-      case 'CLIENT_SIGNATURE':
-        return this.clientSignatureFile;
-      default:
-        return null;
-    }
-  }
-
-  uploadDocument(documentType: CkycDocumentType): void {
    const file = this.getFile(documentType);
    if (!file) return;

    this.uploading[documentType] = true;
    this.uploadErrors[documentType] = null;
+    const key = documentType as keyof typeof this.existing;

-    // DocumentApiResource consumes multipart/form-data with body parts `file`, `name` and
-    // `description` (file + description mandatory). There is no document-type field in that
-    // contract, so the artefact type is carried in `name` - which is also the key
-    // loadExistingArtefacts() matches on when reading the document back.
-    const meta = CKYC_DOCUMENT_META[documentType];
-
-    const formData = new FormData();
-    formData.append('file', file);
-    formData.append('name', meta.name);
-    formData.append('description', meta.description);
-
-    // Replace in place when this artefact already has a usable document, so a re-upload updates the
-    // existing row (same document id, same content-store location) instead of stacking up another
-    // copy. Falls back to create for the first upload of an artefact.
-    //
-    // Deliberately create instead of replace when the stored file is missing: the backend's update
-    // path writes the new content relative to the row's existing `location` and never calls
-    // setLocation(), so replacing a row whose file is already gone writes the upload to a fresh
-    // folder while the row keeps pointing at the missing one - the artefact would stay broken and
-    // the user would get a success message. Creating a new row repairs the card instead.
-    const entry = this.existing[documentType];
-    const replacing = !!entry?.documentId && !entry?.previewUnavailable;
-    const existingId = entry?.documentId;
-
-    const request$ = replacing
-      ? this.clientsService.replaceClientDocument(this.clientId, String(existingId), formData)
-      : this.clientsService.uploadCkycDocument(this.clientId, formData);
+    let request$: Observable<any>;
+    switch (documentType) {
+      case 'CLIENT_IMAGE':
+        request$ = this.clientsService.uploadClientProfileImage(this.clientId, file);
+        break;
+      case 'CLIENT_SIGNATURE':
+        request$ = this.clientsService.uploadClientSignatureImage(this.clientId, file);
+        break;
+      default:
+        return;
+    }

    request$.pipe(takeUntil(this.destroy$)).subscribe({
-      next: (response: any) => {
+      next: () => {
        this.uploading[documentType] = false;
-        this.uploadResponses[documentType] = response;
-        this.setFile(documentType, null);
-        this.alertService.alert({
-          type: 'success',
-          message:
-            response?.message || (replacing ? 'Document replaced successfully.' : 'Document uploaded successfully.')
-        });
-        // Re-read from m_document so the card reflects what was actually stored, rather than
-        // assuming the write succeeded exactly as sent.
-        this.loadExistingArtefacts();
+        // The card is gated on `present`; without this a successful upload left it reading
+        // "Not uploaded yet". uploadProofDocument() sets the same flag for the proof cards.
+        this.existing[key].present = true;
+        this.existing[key].source = this.existing[key].source || 'CKYC upload';
+        this.alertService.alert({ type: 'success', message: 'Document uploaded successfully.' });
+        this.refreshPreview(documentType);
      },
      error: (err: any) => {
        this.uploading[documentType] = false;
-        this.uploadErrors[documentType] =
-          err?.error?.developerMessage ||
-          err?.error?.defaultUserMessage ||
-          err?.message ||
-          'Failed to upload document.';
+        this.uploadErrors[documentType] = this.extractErrorMessage(err);
      }
    });
  }

+  /**
+   * Proof cards work like the create-client KYC step: pick a document type first (its `sides`
+   * decides whether one image or a front+back pair is required), then upload. Reuses the same
+   * identifier the Identities tab manages — updates its documentTypeId if the picked type
+   * changed, or creates a fresh identifier when none exists yet, so this card never depends on
+   * a separate trip to the Identities tab.
+   */
+  private uploadProofDocument(kind: ProofKind): void {
+    const proof = this.selectedProofType[kind];
+    if (!proof) {
+      this.uploadErrors[kind] = 'Select a document type first.';
+      return;
+    }
+    const files = this.docFiles[kind];
+    if (!files.front || (proof.sides === 2 && !files.back)) {
+      this.uploadErrors[kind] =
+        proof.sides === 2
+          ? 'Both front and back images are required for this document type.'
+          : 'Select a file to upload.';
+      return;
+    }
+
+    this.uploading[kind] = true;
+    this.uploadErrors[kind] = null;
+
+    const existingId = this.existing[kind].documentId;
+    const details = this.documentDetails[kind];
+    const documentKey = details.documentKey || `${proof.name} - ${this.clientId}`;
+    const description = this.buildDescription(details.issueDate, details.expiryDate);
+
+    const identifier$: Observable<any> = !existingId
+      ? this.clientsService.addClientIdentifier(this.clientId, {
+          documentTypeId: proof.id,
+          status: 'ACTIVE',
+          documentKey,
+          description: description || 'KYC document'
+        })
+      : this.clientsService.updateClientIdentifier(this.clientId, existingId, {
+          documentTypeId: proof.id,
+          status: 'ACTIVE',
+          documentKey,
+          description
+        });
+
+    identifier$.pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        const identifierId = existingId || res?.resourceId;
+        const uploads: Observable<any>[] = [];
+
+        const front = new FormData();
+        front.append('name', proof.sides === 2 ? `${proof.name} — Front` : proof.name);
+        front.append('file', files.front!);
+        uploads.push(this.clientsService.uploadClientIdentifierDocument(identifierId, front));
+
+        if (proof.sides === 2 && files.back) {
+          const back = new FormData();
+          back.append('name', `${proof.name} — Back`);
+          back.append('file', files.back);
+          uploads.push(this.clientsService.uploadClientIdentifierDocument(identifierId, back));
+        }
+
+        forkJoin(uploads)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe({
+            next: () => {
+              this.uploading[kind] = false;
+              this.existing[kind].present = true;
+              this.existing[kind].documentId = identifierId;
+              this.existing[kind].documentTypeId = String(proof.id);
+              this.existing[kind].documentKey = details.documentKey || '';
+              this.existing[kind].description = description;
+              this.existing[kind].name = proof.name;
+              this.existing[kind].source = this.existing[kind].source || 'Identities section';
+              this.docFiles[kind] = { front: null, back: null };
+              this.alertService.alert({ type: 'success', message: 'Document uploaded successfully.' });
+              this.refreshPreview(kind);
+            },
+            error: (err: any) => {
+              this.uploading[kind] = false;
+              this.uploadErrors[kind] = this.extractErrorMessage(err);
+            }
+          });
+      },
+      error: (err: any) => {
+        this.uploading[kind] = false;
+        this.uploadErrors[kind] = this.extractErrorMessage(err);
+      }
+    });
+  }
+
+  private extractErrorMessage(err: any): string {
+    return (
+      err?.error?.errors?.[0]?.defaultUserMessage ||
+      err?.error?.developerMessage ||
+      err?.error?.defaultUserMessage ||
+      err?.message ||
+      'Failed to upload document.'
+    );
+  }
+
+  /** Re-fetches whichever artefact was just replaced, so its preview reflects the new file
+   *  immediately instead of the one this screen loaded on entry. */
+  private refreshPreview(documentType: string): void {
+    const staleKey = documentType as keyof typeof this.existing;
+    if (this.existing[staleKey].previewUrl?.startsWith('blob:')) {
+      URL.revokeObjectURL(this.existing[staleKey].previewUrl!);
+    }
+    if (this.existing[staleKey].previewUrlBack?.startsWith('blob:')) {
+      URL.revokeObjectURL(this.existing[staleKey].previewUrlBack!);
+    }
+    // The upload that triggered this refresh is what repairs a previously missing file, so the
+    // warning has to be cleared before the re-read - otherwise a fixed card keeps the old badge.
+    this.existing[staleKey].previewUrl = undefined;
+    this.existing[staleKey].previewUrlBack = undefined;
+    this.existing[staleKey].previewUnavailable = false;
+    switch (documentType) {
+      case 'CLIENT_IMAGE':
+        this.clientsService
+          .getClientProfileImage(this.clientId)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((photo: any) => {
+            if (photo) {
+              this.existing.CLIENT_IMAGE.previewUrl = photo;
+            } else {
+              this.existing.CLIENT_IMAGE.previewUnavailable = true;
+            }
+          });
+        break;
+      case 'CLIENT_SIGNATURE':
+        this.clientsService
+          .getClientDocuments(this.clientId)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((documents: any) => {
+            const doc = (documents as any[])
+              ?.filter((d: any) => d?.name === 'clientSignature')
+              ?.sort((a: any, b: any) => b.id - a.id)?.[0];
+            if (!doc) return;
+            this.existing.CLIENT_SIGNATURE.documentId = doc.id;
+            this.existing.CLIENT_SIGNATURE.mimeType = doc.type;
+            this.clientsService
+              .downloadClientDocument(this.clientId, String(doc.id), true)
+              .pipe(takeUntil(this.destroy$))
+              .subscribe({
+                next: (blob: any) => {
+                  if (blob && blob.size > 0) {
+                    this.existing.CLIENT_SIGNATURE.previewUrl = URL.createObjectURL(blob);
+                  } else {
+                    this.existing.CLIENT_SIGNATURE.previewUnavailable = true;
+                  }
+                },
+                error: () => {
+                  this.existing.CLIENT_SIGNATURE.previewUnavailable = true;
+                }
+              });
+          });
+        break;
+      case 'PHOTO_PROOF':
+      case 'ADDRESS_PROOF':
+        this.loadIdentifierDocPreview(documentType, this.existing[documentType].documentId!);
+        break;
+    }
+  }
+
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
-    // Release object URLs
-    Object.values(this.existing).forEach((e) => {
-      if (e.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(e.previewUrl);
-    });
+    this.revokePreviewUrls();
  }
 }
@@ -0,0 +1,167 @@
+<!--
+  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="cud-header">
+  <div class="cud-header__badge">
+    <fa-icon icon="folder-open"></fa-icon>
+  </div>
+  <div class="cud-header__text">
+    <h2 mat-dialog-title class="cud-title">{{ data.title }}</h2>
+    <p class="cud-subtitle">Fill in the document details, then attach the scan.</p>
+  </div>
+  <button mat-icon-button mat-dialog-close class="cud-close" aria-label="Close">
+    <fa-icon icon="times"></fa-icon>
+  </button>
+</div>
+
+<mat-dialog-content class="cud-body">
+  @if (data.isProofKind) {
+    <div class="cud-section">
+      <span class="cud-section__label"><fa-icon icon="id-card"></fa-icon> Document type</span>
+      <mat-form-field appearance="outline" class="cud-field" subscriptSizing="dynamic">
+        <mat-select
+          [value]="selectedProofType"
+          [compareWith]="compareProofType"
+          placeholder="Select document type"
+          (selectionChange)="onProofTypeChange($event.value)"
+        >
+          @for (p of data.proofOptions; track p.id) {
+            <mat-option [value]="p">{{ p.name }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <p class="cud-hint">Upload requirements will update automatically based on the type you pick.</p>
+    </div>
+
+    @if (selectedProofType) {
+      @if (selectedProofType.info) {
+        <div class="cud-banner">
+          <fa-icon icon="check-circle"></fa-icon>
+          <span>{{ selectedProofType.info }}</span>
+        </div>
+      }
+
+      <div class="cud-section">
+        <span class="cud-section__label">
+          <fa-icon icon="hashtag"></fa-icon>
+          {{ selectedProofType.documentKeyLabel || 'Document number' }}
+        </span>
+        <mat-form-field appearance="outline" class="cud-field" subscriptSizing="dynamic">
+          <input
+            matInput
+            [(ngModel)]="documentKey"
+            [ngModelOptions]="{ standalone: true }"
+            [placeholder]="selectedProofType.documentKeyPlaceholder || 'Enter document number'"
+          />
+        </mat-form-field>
+      </div>
+
+      <div class="cud-section cud-section--dates">
+        <div class="cud-date-field">
+          <span class="cud-section__label"><fa-icon icon="calendar-check"></fa-icon> Issue date</span>
+          <mat-form-field appearance="outline" class="cud-field" subscriptSizing="dynamic">
+            <input
+              matInput
+              readonly
+              [matDatepicker]="issuePicker"
+              [(ngModel)]="issueDate"
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="Optional"
+              (click)="issuePicker.open()"
+            />
+            <mat-datepicker-toggle matSuffix [for]="issuePicker"></mat-datepicker-toggle>
+            <mat-datepicker #issuePicker></mat-datepicker>
+          </mat-form-field>
+        </div>
+        <div class="cud-date-field">
+          <span class="cud-section__label"><fa-icon icon="calendar-check"></fa-icon> Expiry date</span>
+          <mat-form-field appearance="outline" class="cud-field" subscriptSizing="dynamic">
+            <input
+              matInput
+              readonly
+              [matDatepicker]="expiryPicker"
+              [(ngModel)]="expiryDate"
+              [ngModelOptions]="{ standalone: true }"
+              placeholder="Optional"
+              (click)="expiryPicker.open()"
+            />
+            <mat-datepicker-toggle matSuffix [for]="expiryPicker"></mat-datepicker-toggle>
+            <mat-datepicker #expiryPicker></mat-datepicker>
+          </mat-form-field>
+        </div>
+      </div>
+
+      <div class="cud-divider"><span>Scan</span></div>
+
+      <div class="cud-grid" [class.cud-grid--two]="sides === 2">
+        <div class="cud-slot">
+          <span class="cud-slot__label">{{ sides === 2 ? 'Front side' : 'Document' }}</span>
+          <label class="cud-dropzone" [class.cud-dropzone--has]="front">
+            <input type="file" [attr.accept]="data.accept" hidden (change)="onFilePick('front', $event)" />
+            @if (frontPreview) {
+              <img [src]="frontPreview" alt="Front side preview" class="cud-dropzone__img" />
+            } @else if (front) {
+              <fa-icon icon="file-alt" class="cud-dropzone__icon"></fa-icon>
+              <p class="cud-dropzone__name">{{ front.name }}</p>
+            } @else {
+              <fa-icon icon="cloud-upload-alt" class="cud-dropzone__icon"></fa-icon>
+              <p class="cud-dropzone__text">Click to choose file</p>
+            }
+          </label>
+        </div>
+
+        @if (sides === 2) {
+          <div class="cud-slot">
+            <span class="cud-slot__label">Back side</span>
+            <label class="cud-dropzone" [class.cud-dropzone--has]="back">
+              <input type="file" [attr.accept]="data.accept" hidden (change)="onFilePick('back', $event)" />
+              @if (backPreview) {
+                <img [src]="backPreview" alt="Back side preview" class="cud-dropzone__img" />
+              } @else if (back) {
+                <fa-icon icon="file-alt" class="cud-dropzone__icon"></fa-icon>
+                <p class="cud-dropzone__name">{{ back.name }}</p>
+              } @else {
+                <fa-icon icon="cloud-upload-alt" class="cud-dropzone__icon"></fa-icon>
+                <p class="cud-dropzone__text">Click to choose file</p>
+              }
+            </label>
+          </div>
+        }
+      </div>
+    }
+  } @else {
+    <div class="cud-grid">
+      <div class="cud-slot">
+        <span class="cud-slot__label">Document</span>
+        <label class="cud-dropzone" [class.cud-dropzone--has]="front">
+          <input type="file" [attr.accept]="data.accept" hidden (change)="onFilePick('front', $event)" />
+          @if (frontPreview) {
+            <img [src]="frontPreview" alt="Preview" class="cud-dropzone__img" />
+          } @else if (front) {
+            <fa-icon icon="file-alt" class="cud-dropzone__icon"></fa-icon>
+            <p class="cud-dropzone__name">{{ front.name }}</p>
+          } @else {
+            <fa-icon icon="cloud-upload-alt" class="cud-dropzone__icon"></fa-icon>
+            <p class="cud-dropzone__text">Click to choose file</p>
+          }
+        </label>
+      </div>
+    </div>
+  }
+</mat-dialog-content>
+
+<mat-dialog-actions class="cud-actions" align="end">
+  <button mat-stroked-button type="button" (click)="cancel()">
+    <fa-icon icon="times"></fa-icon>
+    &nbsp;Cancel
+  </button>
+  <button mat-flat-button color="primary" type="button" [disabled]="!canSubmit" (click)="submit()">
+    <fa-icon icon="upload"></fa-icon>
+    &nbsp;Upload
+  </button>
+</mat-dialog-actions>
@@ -0,0 +1,270 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+:host {
+  display: block;
+  max-width: 100%;
+}
+
+/* ===================== Header ===================== */
+.cud-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid #eef1f4;
+
+  &__badge {
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 9px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    color: #fff;
+    background: linear-gradient(135deg, #1a73e8, #4285f4);
+    box-shadow: 0 3px 10px rgb(26 115 232 / 28%);
+  }
+
+  &__text {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.cud-title {
+  margin: 0 !important;
+  padding: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1a1d21;
+  line-height: 1.3;
+}
+
+.cud-subtitle {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.cud-close {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin: -4px -4px 0 0;
+  color: #9aa0a6;
+
+  &:hover {
+    color: #3c4043;
+  }
+}
+
+/* ===================== Body / sections ===================== */
+.cud-body.mat-mdc-dialog-content {
+  padding: 18px 24px !important;
+  max-height: 70vh;
+}
+
+.cud-section {
+  margin-bottom: 14px;
+
+  &--dates {
+    display: flex;
+    gap: 14px;
+
+    .cud-date-field {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 11px;
+    font-weight: 700;
+    color: #475569;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 6px;
+
+    fa-icon {
+      color: #1a73e8;
+      font-size: 10.5px;
+    }
+  }
+}
+
+.cud-field {
+  width: 100%;
+}
+
+.cud-hint {
+  font-size: 12px;
+  color: #6b7280;
+  margin: 6px 0 0;
+  line-height: 1.4;
+}
+
+.cud-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: #f0fbf6;
+  border: 1px solid #cfecdd;
+  border-radius: 10px;
+  font-size: 12.5px;
+  color: #085041;
+  line-height: 1.45;
+
+  fa-icon {
+    margin-top: 2px;
+    color: #1d9e75;
+    flex-shrink: 0;
+  }
+}
+
+.cud-divider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 16px 0 12px;
+  font-size: 10.5px;
+  font-weight: 700;
+  color: #9aa0a6;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #eef1f4;
+  }
+}
+
+/* ===================== Front/back scan grid ===================== */
+.cud-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+
+  &--two {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.cud-slot {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  &__label {
+    font-size: 10.5px;
+    font-weight: 700;
+    color: #5f6368;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+}
+
+.cud-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 130px;
+  padding: 16px;
+  border: 2px dashed #cbd5e1;
+  border-radius: 12px;
+  cursor: pointer;
+  text-align: center;
+  background: #fafbfc;
+  transition:
+    border-color 0.15s,
+    background 0.15s,
+    box-shadow 0.15s;
+
+  &:hover {
+    border-color: #1a73e8;
+    background: #f5f9ff;
+    box-shadow: 0 2px 10px rgb(26 115 232 / 10%);
+  }
+
+  &--has {
+    border-style: solid;
+    border-color: #1d9e75;
+    background: #f0fbf6;
+  }
+
+  &__icon {
+    font-size: 22px;
+    color: #9aa5b1;
+  }
+
+  &--has &__icon {
+    color: #1d9e75;
+  }
+
+  &__text {
+    font-size: 12px;
+    color: #64748b;
+    margin: 0;
+    font-weight: 500;
+  }
+
+  &__name {
+    font-size: 11.5px;
+    color: #085041;
+    font-weight: 600;
+    margin: 0;
+    word-break: break-all;
+    padding: 0 8px;
+  }
+
+  &__img {
+    max-width: 100%;
+    max-height: 150px;
+    border-radius: 8px;
+    object-fit: contain;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+  }
+}
+
+/* ===================== Actions ===================== */
+.cud-actions {
+  padding: 12px 24px !important;
+  margin: 0 !important;
+  border-top: 1px solid #eef1f4;
+
+  fa-icon {
+    font-size: 12px;
+  }
+}
+
+@media (width <= 560px) {
+  :host {
+    width: 100%;
+  }
+
+  .cud-section--dates {
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .cud-grid--two {
+    grid-template-columns: 1fr;
+  }
+}
@@ -0,0 +1,155 @@
+/**
+ * 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, OnDestroy, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { MatIconButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { Dates } from 'app/core/utils/dates';
+import { ProofType } from '../../../shared/kyc-proof-types';
+
+export interface CkycUploadDialogData {
+  title: string;
+  isProofKind: boolean;
+  accept: string;
+  proofOptions?: ProofType[];
+  initialProofType?: ProofType | null;
+  initialDocumentKey?: string;
+  initialIssueDate?: Date | null;
+  initialExpiryDate?: Date | null;
+}
+
+export interface CkycUploadDialogResult {
+  proofType?: ProofType | null;
+  front: File;
+  back?: File;
+  /** Document number (Aadhaar/PAN/Passport number, etc.) — same field client creation collects. */
+  documentKey?: string;
+  /** 'yyyy-MM-dd', same as the rest of this app's date fields. */
+  issueDate?: string | null;
+  expiryDate?: string | null;
+}
+
+/**
+ * A focused popup for replacing/uploading one CKYC artefact at a time — opened from each card on
+ * the CKYC tab instead of expanding a form inline underneath it. Collects the same details
+ * client creation does for an identity/address proof (document type, number, issue + expiry
+ * date) and shows a client-side preview of whatever image is picked before it's ever sent to the
+ * server; the actual upload still happens back in CkycTabComponent (this dialog only collects
+ * the type, number, dates and file(s), then hands them back).
+ */
+@Component({
+  selector: 'mifosx-ckyc-upload-dialog',
+  templateUrl: './ckyc-upload-dialog.component.html',
+  styleUrls: ['./ckyc-upload-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FormsModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatIconButton,
+    FaIconComponent
+  ]
+})
+export class CkycUploadDialogComponent implements OnDestroy {
+  private dates = inject(Dates);
+  dialogRef = inject<MatDialogRef<CkycUploadDialogComponent, CkycUploadDialogResult | null>>(MatDialogRef);
+  data = inject<CkycUploadDialogData>(MAT_DIALOG_DATA);
+
+  selectedProofType: ProofType | null = this.data.initialProofType || null;
+  documentKey = this.data.initialDocumentKey || '';
+  issueDate: Date | null = this.data.initialIssueDate || null;
+  expiryDate: Date | null = this.data.initialExpiryDate || null;
+
+  front: File | null = null;
+  back: File | null = null;
+  frontPreview: string | null = null;
+  backPreview: string | null = null;
+
+  get sides(): number {
+    return this.data.isProofKind ? (this.selectedProofType?.sides ?? 1) : 1;
+  }
+
+  get canSubmit(): boolean {
+    if (this.data.isProofKind) {
+      if (!this.selectedProofType) return false;
+      if (!this.documentKey.trim()) return false;
+    }
+    if (!this.front) return false;
+    if (this.sides === 2 && !this.back) return false;
+    return true;
+  }
+
+  compareProofType = (a: ProofType | null, b: ProofType | null): boolean => (a?.id ?? null) === (b?.id ?? null);
+
+  onProofTypeChange(proof: ProofType | null): void {
+    this.selectedProofType = proof;
+    this.clearSlot('front');
+    this.clearSlot('back');
+  }
+
+  onFilePick(slot: 'front' | 'back', event: any): void {
+    const file = event?.target?.files?.[0];
+    if (event?.target) event.target.value = '';
+    if (!file) return;
+
+    this.clearSlot(slot);
+    const preview = file.type?.startsWith('image/') ? URL.createObjectURL(file) : null;
+    if (slot === 'front') {
+      this.front = file;
+      this.frontPreview = preview;
+    } else {
+      this.back = file;
+      this.backPreview = preview;
+    }
+  }
+
+  private clearSlot(slot: 'front' | 'back'): void {
+    if (slot === 'front') {
+      if (this.frontPreview) URL.revokeObjectURL(this.frontPreview);
+      this.front = null;
+      this.frontPreview = null;
+    } else {
+      if (this.backPreview) URL.revokeObjectURL(this.backPreview);
+      this.back = null;
+      this.backPreview = null;
+    }
+  }
+
+  submit(): void {
+    if (!this.canSubmit) return;
+    this.dialogRef.close({
+      proofType: this.selectedProofType,
+      front: this.front!,
+      back: this.sides === 2 ? this.back! : undefined,
+      documentKey: this.data.isProofKind ? this.documentKey.trim() : undefined,
+      issueDate: this.issueDate ? this.dates.getDate(this.issueDate) : null,
+      expiryDate: this.expiryDate ? this.dates.getDate(this.expiryDate) : null
+    });
+  }
+
+  cancel(): void {
+    this.dialogRef.close(null);
+  }
+
+  ngOnDestroy(): void {
+    if (this.frontPreview) URL.revokeObjectURL(this.frontPreview);
+    if (this.backPreview) URL.revokeObjectURL(this.backPreview);
+  }
+}
@@ -55,7 +55,10 @@
      <div class="f121__note">
        <mat-icon>info_outline</mat-icon>
        <div>
-          @if (!dateOfBirth) {
+          @if (configMissing) {
+            TDS rates for FY {{ fy }} are not configured, so the tax cannot be computed. Set them up under Organization
+            › TDS Configuration.
+          } @else if (!dateOfBirth) {
            Date of birth is not on record, so the senior-citizen threshold cannot be determined. Add it on the Personal
            Data tab.
          } @else {
@@ -113,8 +116,8 @@
        <div class="f121__note f121__note--warn">
          <mat-icon>warning_amber</mat-icon>
          <div>
-            A Form 121 declaration is on record for this year, but withholding is still switched on for one or more
-            deposits. Turn it off on those accounts, or tax will keep being deducted.
+            A declaration is on record for this year, but one or more deposits still carry a tax group. Those accounts
+            deduct on their own and ignore the declaration — remove the tax group from them.
          </div>
        </div>
      }
@@ -189,20 +192,90 @@
              }
            </span>
          </div>
-          @if (declarationOnRecord && declarationFy) {
+          @if (declarationRecord; as d) {
            <div class="f121__kv-row">
              <span>Declared for</span>
-              <span>FY {{ declarationFy }}</span>
+              <span>FY {{ d.fy }} · Form {{ d.formType }}</span>
            </div>
-          }
-          @if (declarationOnRecord && !acceptanceDateKnown) {
-            <div class="f121__kv-row f121__kv-row--muted">
-              <span>Acceptance date</span>
+            <div class="f121__kv-row">
+              <span>Accepted on</span>
              <span>
-                Not captured — the declaration is treated as covering the whole year. A mid-year acceptance would change
-                the figures below.
+                {{ d.acceptedOn | date: 'd MMM y' }} — no TDS on interest credited from this day to 31 March. Interest
+                credited before it is taxed as usual.
              </span>
            </div>
+            @if (d.uin) {
+              <div class="f121__kv-row">
+                <span>UIN</span>
+                <span class="f121__mono">{{ d.uin }}</span>
+              </div>
+            }
+            <div class="f121__kv-row">
+              <span></span>
+              <span>
+                <button type="button" class="f121__btn f121__btn--warn" (click)="revokeDeclaration()">
+                  Withdraw declaration
+                </button>
+              </span>
+            </div>
+          } @else if (fy && !configMissing) {
+            <div class="f121__kv-row">
+              <span></span>
+              <span>
+                @if (!showDeclarationForm) {
+                  <button type="button" class="f121__btn" (click)="openDeclarationForm()" [disabled]="!panWellFormed">
+                    Record {{ formLabel }} for FY {{ fy }}
+                  </button>
+                  @if (!panWellFormed) {
+                    <div class="muted">A valid PAN must be on the KYC first — a declaration without one is void.</div>
+                  }
+                }
+              </span>
+            </div>
+            @if (showDeclarationForm) {
+              <div class="f121__decl-form">
+                <label>
+                  <span>Accepted on *</span>
+                  <input type="date" [(ngModel)]="newDeclaration.acceptedOn" />
+                </label>
+                <label>
+                  <span>UIN</span>
+                  <input type="text" [(ngModel)]="newDeclaration.uin" placeholder="Allotted on acceptance" />
+                </label>
+                <label>
+                  <span>Estimated income for the year (₹)</span>
+                  <input type="number" min="0" [(ngModel)]="newDeclaration.estimatedIncome" />
+                </label>
+                @if (declarationError) {
+                  <div class="f121__note f121__note--warn">
+                    <mat-icon>error_outline</mat-icon>
+                    <div>{{ declarationError }}</div>
+                  </div>
+                }
+                <div class="f121__decl-actions">
+                  <button type="button" class="f121__btn" (click)="showDeclarationForm = false">Cancel</button>
+                  <button
+                    type="button"
+                    class="f121__btn f121__btn--primary"
+                    (click)="saveDeclaration()"
+                    [disabled]="savingDeclaration"
+                  >
+                    {{ savingDeclaration ? 'Saving…' : 'Save declaration' }}
+                  </button>
+                </div>
+              </div>
+            }
+          }
+          @for (old of declarations; track old.id) {
+            @if (old.revoked && old.fy === fy) {
+              <div class="f121__kv-row f121__kv-row--muted">
+                <span>Withdrawn</span>
+                <span>
+                  Form {{ old.formType }} accepted {{ old.acceptedOn | date: 'd MMM y' }}, withdrawn
+                  {{ old.revokedOn | date: 'd MMM y' }} — {{ old.revokeReason }}
+                </span>
+              </div>
+            }
          }
          @if (eligibility) {
            @for (reason of eligibility.reasons; track reason) {
@@ -332,3 +332,61 @@
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
 }
+
+/* ── Recording a declaration ── */
+.f121__btn {
+  padding: 6px 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: #fff;
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  &--primary {
+    border-color: #1d4ed8;
+    background: #1d4ed8;
+    color: #fff;
+  }
+
+  &--warn {
+    border-color: #b45309;
+    color: #b45309;
+  }
+}
+
+.f121__decl-form {
+  display: grid;
+  gap: 10px;
+  padding: 12px 16px;
+
+  label {
+    display: grid;
+    gap: 4px;
+    font-size: 12px;
+
+    span {
+      color: #6b7280;
+      font-weight: 600;
+    }
+
+    input {
+      max-width: 280px;
+      padding: 6px 8px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      font: inherit;
+    }
+  }
+}
+
+.f121__decl-actions {
+  display: flex;
+  gap: 8px;
+}
@@ -23,6 +23,8 @@ import { SavingsService } from 'app/savings/savings.service';
 import { FixedDepositsService } from 'app/deposits/fixed-deposits/fixed-deposits.service';
 import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { TdsDeclarationRecord, TdsReportsService } from 'app/tds-reports/tds-reports.service';
+import { TdsDeductee } from 'app/tds-reports/tds-reports-data';

 /** Domain logic */
 import {
@@ -111,6 +113,7 @@ export class Form121TabComponent implements OnInit, OnDestroy {
  private savingsService = inject(SavingsService);
  private fixedDepositsService = inject(FixedDepositsService);
  private recurringDepositsService = inject(RecurringDepositsService);
+  private tdsService = inject(TdsReportsService);

  private destroy$ = new Subject<void>();

@@ -124,23 +127,25 @@ export class Form121TabComponent implements OnInit, OnDestroy {
  pan = '';
  panWellFormed = false;

-  // ── Declaration on record ──
-  declarationOnRecord = false;
+  // ── Declarations on record ──
+  /**
+   * Every declaration the customer has given, each for one year and from the day the branch
+   * accepted it. The KYC record only ever held a type and a year, which made a September
+   * declaration shield interest back to April and let last year's form run on.
+   */
+  declarations: TdsDeclarationRecord[] = [];
  /**
   * The form actually in force for the selected year. From FY 2026-27 a single
   * Form 121 replaced the 15G/15H split, so this is derived from the year rather
   * than from the payee's age.
   */
  declarationForm: DeclarationForm = '121';
-  /** Kind recorded at KYC, meaningful only for a pre-2026 year. */
-  declarationKind: '15G' | '15H' = '15G';
-  declarationFy = '';
-  /**
-   * The KYC step records only the year, not the date the branch accepted the
-   * declaration, so it has to be treated as covering the whole year. Surfaced on
-   * screen rather than hidden — a mid-year acceptance would change the figures.
-   */
-  acceptanceDateKnown = false;
+
+  // ── Recording a declaration ──
+  showDeclarationForm = false;
+  savingDeclaration = false;
+  declarationError = '';
+  newDeclaration = { acceptedOn: '', uin: '', estimatedIncome: null as number | null };

  eligibility: EligibilityResult | null = null;

@@ -153,11 +158,13 @@ export class Form121TabComponent implements OnInit, OnDestroy {
  schedule: TdsSchedule | null = null;
  actualTds = 0;
  tdsSaved = 0;
+  /** The selected year has no entry on Organization › TDS Configuration. */
+  configMissing = false;

  /** Raw account inputs, kept so the year selector can recompute cheaply. */
-  private accountInputs: (TdsAccountInput & { meta: Form121AccountRow })[] = [];
-  /** Withheld-tax postings by FY, from the ledger. */
-  private actualTdsByFy = new Map<string, number>();
+  private accountInputs: (TdsAccountInput & { meta: Form121AccountRow; taxLines: InterestCredit[] })[] = [];
+  /** This customer's FD/RD interest received in savings, and TDS taken there, per year. */
+  private platformByFy = new Map<string, TdsDeductee | null>();

  ngOnInit(): void {
    this.route.parent.params.pipe(takeUntil(this.destroy$)).subscribe((params: any) => {
@@ -180,13 +187,15 @@ export class Form121TabComponent implements OnInit, OnDestroy {
    forkJoin({
      client: this.clientsService.getClientData(this.clientId, true).pipe(catchError(() => of(null))),
      kyc: this.clientsService.getClientKyc(this.clientId, true).pipe(catchError(() => of(null))),
-      accounts: this.clientsService.getClientAccountData(this.clientId).pipe(catchError(() => of(null)))
+      accounts: this.clientsService.getClientAccountData(this.clientId).pipe(catchError(() => of(null))),
+      declarations: this.tdsService.getDeclarations(Number(this.clientId)).pipe(catchError(() => of([])))
    })
      .pipe(
        takeUntil(this.destroy$),
-        switchMap(({ client, kyc, accounts }) => {
+        switchMap(({ client, kyc, accounts, declarations }) => {
          this.applyClient(client);
          this.applyKyc(kyc);
+          this.declarations = declarations || [];
          const deposits = this.depositAccountsOf(accounts);
          return deposits.length ? forkJoin(deposits.map((a) => this.fetchAccount(a))) : of([] as any[]);
        }),
@@ -210,11 +219,8 @@ export class Form121TabComponent implements OnInit, OnDestroy {
  private applyKyc(kyc: any): void {
    this.pan = (kyc?.panNumber ?? '').toUpperCase();
    this.panWellFormed = isWellFormedPan(this.pan);
-    this.declarationOnRecord = !!kyc?.form15Applicable;
-    this.declarationKind = kyc?.form15Type === '15H' ? '15H' : '15G';
-    this.declarationForm = this.fy ? declarationFormFor(this.fy, this.dateOfBirth) : '121';
-    this.declarationFy = kyc?.form15FY ?? '';
-    this.acceptanceDateKnown = false;
+    this.declarationForm =
+      this.fy && FY_TAX_CONFIG[normaliseFy(this.fy)] ? declarationFormFor(this.fy, this.dateOfBirth) : '121';
  }

  /** Savings, FD and RD accounts — everything that can credit interest. */
@@ -248,7 +254,7 @@ export class Form121TabComponent implements OnInit, OnDestroy {
   */
  private ingest(details: any[]): void {
    this.accountInputs = [];
-    this.actualTdsByFy = new Map<string, number>();
+    this.platformByFy = new Map<string, TdsDeductee | null>();
    const fys = new Set<string>();
    const clientIdNum = Number(this.clientId);

@@ -269,6 +275,7 @@ export class Form121TabComponent implements OnInit, OnDestroy {
      };

      const credits: InterestCredit[] = [];
+      const taxLines: InterestCredit[] = [];
      let tdsDeducted = 0;

      for (const t of d.transactions ?? []) {
@@ -286,8 +293,7 @@ export class Form121TabComponent implements OnInit, OnDestroy {
        } else if (t.transactionType?.withholdTax) {
          const amount = t.amount ?? 0;
          tdsDeducted += amount;
-          const txnFy = fyOf(iso);
-          this.actualTdsByFy.set(txnFy, (this.actualTdsByFy.get(txnFy) ?? 0) + amount);
+          taxLines.push({ date: iso, amount, accountNo: ref.accountNo });
        }
      }

@@ -310,12 +316,12 @@ export class Form121TabComponent implements OnInit, OnDestroy {
        deducteeClientId: deductee
      };

-      this.accountInputs.push({ ...ref, credits, meta });
+      this.accountInputs.push({ ...ref, credits, taxLines, meta });
    }

    this.availableFys = [...fys].sort().reverse();
    if (!this.availableFys.includes(this.fy)) {
-      this.fy = this.availableFys[0] ?? (this.declarationFy ? normaliseFy(this.declarationFy) : '');
+      this.fy = this.availableFys[0] ?? this.declarations[0]?.fy ?? Object.keys(FY_TAX_CONFIG).sort().reverse()[0] ?? '';
    }
  }

@@ -333,14 +339,39 @@ export class Form121TabComponent implements OnInit, OnDestroy {
    }

    const year = normaliseFy(this.fy);
+    this.configMissing = !FY_TAX_CONFIG[year];
+
+    // TDS is tracked on FD/RD interest once it reaches savings, and deducted there. Those figures live
+    // on the platform, not in the deposit's own transactions, so they are fetched once per year and
+    // the computation waits for them.
+    if (!this.platformByFy.has(year)) {
+      this.loadPlatformYear(year);
+      return;
+    }
+    const platform = this.platformByFy.get(year);
+    for (const a of this.accountInputs) {
+      if (!a.meta.tdsApplicable) {
+        continue;
+      }
+      const match = platform?.accounts.find((p) => p.accountNo === a.accountNo);
+      a.credits = match?.credits ?? [];
+      a.taxLines = match?.deductions ?? [];
+    }

    // Per-account interest for the selected year, for the three lists.
    for (const a of this.accountInputs) {
      a.meta.interest = a.credits.filter((c) => fyOf(c.date) === year).reduce((s, c) => s + c.amount, 0);
+      // The selected year only - this used to total every year the account had ever been taxed in.
+      a.meta.tdsDeducted = a.meta.tdsApplicable
+        ? a.taxLines.filter((c) => fyOf(c.date) === year).reduce((s, c) => s + c.amount, 0)
+        : 0;
    }
-    this.actualTds = this.actualTdsByFy.get(year) ?? 0;
+    // What was actually debited for this customer as deductee, wherever the savings account sits.
+    this.actualTds = this.accountInputs
+      .filter((a) => a.meta.tdsApplicable)
+      .reduce((s, a) => s + a.meta.tdsDeducted, 0);

-    if (!this.dateOfBirth) {
+    if (!this.dateOfBirth || this.configMissing) {
      return;
    }

@@ -378,21 +409,95 @@ export class Form121TabComponent implements OnInit, OnDestroy {
    return applicable.some((a) => a.meta.mode === 'QUARTERLY') ? 'QUARTERLY' : 'ANNUAL';
  }

-  /** The declaration, but only when it was filed for the year being shown. */
-  private declarationForSelectedFy(): Declaration | null {
-    if (!this.declarationOnRecord || !this.fy) {
+  private loadPlatformYear(year: string): void {
+    this.tdsService
+      .getDepositInterest(Number(year.slice(0, 4)), Number(this.clientId))
+      .pipe(
+        catchError(() => of([])),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((rows) => {
+        this.platformByFy.set(year, rows.find((r) => `${r.clientId}` === `${this.clientId}`) ?? null);
+        this.recompute();
+      });
+  }
+
+  /** The live declaration recorded for the year being shown, if any. */
+  get declarationRecord(): TdsDeclarationRecord | null {
+    if (!this.fy) {
      return null;
    }
    const year = normaliseFy(this.fy);
-    if (this.declarationFy && normaliseFy(this.declarationFy) !== year) {
+    return this.declarations.find((d) => d.fy === year && !d.revoked) ?? null;
+  }
+
+  get declarationOnRecord(): boolean {
+    return !!this.declarationRecord;
+  }
+
+  /** The declaration as the engine takes it — operative from the day it was accepted. */
+  private declarationForSelectedFy(): Declaration | null {
+    const d = this.declarationRecord;
+    if (!d) {
      return null;
    }
-    return {
-      kind: this.declarationKind,
-      // No acceptance date on record — treated as covering the whole year.
-      acceptedOn: `${year.slice(0, 4)}-04-01`,
-      fy: year
-    };
+    const kind = d.formType === '15H' ? '15H' : d.formType === '15G' ? '15G' : formKindFor(this.dateOfBirth, d.fy);
+    return { kind, acceptedOn: d.acceptedOn, fy: d.fy, uin: d.uin || undefined };
+  }
+
+  openDeclarationForm(): void {
+    this.newDeclaration = { acceptedOn: new Date().toISOString().slice(0, 10), uin: '', estimatedIncome: null };
+    this.declarationError = '';
+    this.showDeclarationForm = true;
+  }
+
+  saveDeclaration(): void {
+    if (!this.newDeclaration.acceptedOn) {
+      this.declarationError = 'Enter the date the branch accepted the form.';
+      return;
+    }
+    this.savingDeclaration = true;
+    this.declarationError = '';
+    this.tdsService
+      .createDeclaration({
+        clientId: Number(this.clientId),
+        fy: normaliseFy(this.fy),
+        formType: declarationFormFor(this.fy, this.dateOfBirth),
+        acceptedOn: this.newDeclaration.acceptedOn,
+        uin: this.newDeclaration.uin || undefined,
+        estimatedIncome: this.newDeclaration.estimatedIncome
+      })
+      .subscribe({
+        next: (rows) => {
+          this.savingDeclaration = false;
+          this.showDeclarationForm = false;
+          this.declarations = rows || [];
+          this.recompute();
+        },
+        error: (err: any) => {
+          this.savingDeclaration = false;
+          this.declarationError =
+            err?.error?.errors?.[0]?.defaultUserMessage || err?.error?.defaultUserMessage || 'Could not save.';
+        }
+      });
+  }
+
+  revokeDeclaration(): void {
+    const d = this.declarationRecord;
+    if (!d) {
+      return;
+    }
+    const reason = prompt('Why is this declaration being withdrawn? From today, TDS will be deducted again.');
+    if (!reason) {
+      return;
+    }
+    this.tdsService.revokeDeclaration(d.id, reason).subscribe({
+      next: (rows) => {
+        this.declarations = rows || [];
+        this.recompute();
+      },
+      error: (err: any) => alert(err?.error?.defaultUserMessage || 'Could not revoke the declaration.')
+    });
  }

  // ───────────────────────── Template helpers ─────────────────────────
@@ -411,7 +516,7 @@ export class Form121TabComponent implements OnInit, OnDestroy {

  /** The form the payee would file for the selected year. */
  get formLabel(): string {
-    if (!this.fy) {
+    if (!this.fy || this.configMissing) {
      return '—';
    }
    const form = declarationFormFor(this.fy, this.dateOfBirth);
@@ -470,11 +575,12 @@ export class Form121TabComponent implements OnInit, OnDestroy {
  }

  /**
-   * A declaration is on record but deposit accounts are still set to withhold —
-   * the branch has not switched them off.
+   * A declaration is on record but a deposit still carries a stock Fineract tax group. Those
+   * accounts withhold on their own rules and never consult the declaration record, so the form
+   * does not stop their deduction until the tax group is removed.
   */
  get declarationNotAppliedToAccounts(): boolean {
-    return !!this.declarationForSelectedFy() && this.liableAccounts.some((a) => a.withHoldTax);
+    return !!this.declarationForSelectedFy() && this.liableAccounts.some((a) => !!a.taxGroup);
  }

  /**
@@ -591,16 +591,13 @@
        <i class="fa fa-calendar section-header__icon"></i>
        <h3 class="section-header__title">{{ 'labels.heading.Recurring Deposit Accounts' | translate }}</h3>
      </div>
-      <div class="section-header__right">
-        <button mat-raised-button color="primary" (click)="toggleRecurringAccountsOverview()">
-          {{ viewAccountsLabel(showClosedRecurringAccounts) | translate }}
-        </button>
-      </div>
    </div>

-    @if (!showClosedRecurringAccounts) {
+    <!-- Active and ended recurring deposits share one table; the Status column says how each one ended (matured or
+         closed early), so the client's RD history stays visible without switching views. -->
+    @if (savingAccounts) {
      <div class="table-wrapper">
-        <table mat-table [dataSource]="savingAccounts | accountsFilter: 'saving' : 'open' : 'isRecurring'">
+        <table mat-table [dataSource]="savingAccounts | accountsFilter: 'saving' : 'all' : 'isRecurring'">
          <ng-container matColumnDef="Account No">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
            <td mat-cell *matCellDef="let element">
@@ -614,6 +611,15 @@
              <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
            </td>
          </ng-container>
+          <ng-container matColumnDef="Status">
+            <th mat-header-cell *matHeaderCellDef>Status</th>
+            <td mat-cell *matCellDef="let element">
+              <span class="rd-status" [class.rd-status--ended]="element.timeline?.closedOnDate">{{ rdStatusLabel(element) }}</span>
+              @if (element.timeline?.closedOnDate) {
+                <div class="rd-status__date">on {{ element.timeline.closedOnDate | dateFormat }}</div>
+              }
+            </td>
+          </ng-container>
          <ng-container matColumnDef="Last Active">
            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
            <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
@@ -638,7 +644,7 @@
                  <i class="fa fa-check"></i>
                </button>
              }
-              @if (!element.status.submittedAndPendingApproval && !element.status.active) {
+              @if (element.status.approved) {
                <button
                  class="account-action-button"
                  mat-raised-button
@@ -664,7 +670,7 @@
          </ng-container>

          <ng-container matColumnDef="no-data">
-            <td mat-footer-cell *matFooterCellDef [attr.colspan]="openSavingsColumns.length">
+            <td mat-footer-cell *matFooterCellDef [attr.colspan]="recurringColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
                <p class="table-empty-state__text">
@@ -674,67 +680,17 @@
            </td>
          </ng-container>

-          <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
+          <tr mat-header-row *matHeaderRowDef="recurringColumns"></tr>
          <tr
            mat-row
-            *matRowDef="let row; columns: openSavingsColumns"
+            *matRowDef="let row; columns: recurringColumns"
            [routerLink]="['../', 'recurring-deposits-accounts', row.id, 'general']"
            class="select-row"
          ></tr>
          <tr
            mat-footer-row
            *matFooterRowDef="
-              (savingAccounts | accountsFilter: 'saving' : 'open' : 'isRecurring')?.length === 0 ? ['no-data'] : []
-            "
-          ></tr>
-        </table>
-      </div>
-    }
-
-    <!-- Closed Recurring Deposit Accounts -->
-    @if (showClosedRecurringAccounts) {
-      <div class="table-wrapper">
-        <table mat-table [dataSource]="savingAccounts | accountsFilter: 'saving' : 'closed' : 'isRecurring'">
-          <ng-container matColumnDef="Account No">
-            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
-            <td mat-cell *matCellDef="let element">
-              <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
-              <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
-            </td>
-          </ng-container>
-          <ng-container matColumnDef="Saving Account">
-            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Recurring Deposit Product' | translate }}</th>
-            <td mat-cell *matCellDef="let element">
-              <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
-            </td>
-          </ng-container>
-          <ng-container matColumnDef="Closed Date">
-            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Closed Date' | translate }}</th>
-            <td mat-cell *matCellDef="let element">{{ element.timeline.closedOnDate | dateFormat }}</td>
-          </ng-container>
-
-          <ng-container matColumnDef="no-data">
-            <td mat-footer-cell *matFooterCellDef [attr.colspan]="closedSavingsColumns.length">
-              <div class="table-empty-state">
-                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">
-                  {{ 'labels.messages.No Closed Recurring Deposit Accounts Available' | translate }}
-                </p>
-              </div>
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
-          <tr
-            mat-row
-            *matRowDef="let row; columns: closedSavingsColumns"
-            [routerLink]="['../', 'recurring-deposits-accounts', row.id, 'general']"
-            class="select-row"
-          ></tr>
-          <tr
-            mat-footer-row
-            *matFooterRowDef="
-              (savingAccounts | accountsFilter: 'saving' : 'closed' : 'isRecurring')?.length === 0 ? ['no-data'] : []
+              (savingAccounts | accountsFilter: 'saving' : 'all' : 'isRecurring')?.length === 0 ? ['no-data'] : []
            "
          ></tr>
        </table>
@@ -419,3 +419,24 @@ table[mat-table] {
  font-size: 24px;
  z-index: 1;
 }
+
+.rd-status {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  background: #dcfce7;
+  color: #166534;
+
+  &--ended {
+    background: #e2e8f0;
+    color: #475569;
+  }
+}
+
+.rd-status__date {
+  margin-top: 2px;
+  font-size: 11px;
+  color: #64748b;
+}
@@ -187,6 +187,15 @@ export class GeneralTabComponent implements OnDestroy {
    'Saving Account',
    'Closed Date'
  ];
+  /** Closed Recurring Deposit Accounts Columns - with how each one ended, for tracking. */
+  recurringColumns: string[] = [
+    'Account No',
+    'Saving Account',
+    'Status',
+    'Last Active',
+    'Balance',
+    'Actions'
+  ];
  /** Open Shares Accounts Columns */
  openSharesColumns: string[] = [
    'Account No',
@@ -475,6 +484,30 @@ export class GeneralTabComponent implements OnDestroy {
    );
  }

+  /** Where a recurring deposit stands - for one that has ended, how it ended. */
+  rdStatusLabel(account: any): string {
+    switch (account?.status?.code) {
+      case 'savingsAccountStatusType.active':
+        return 'Active';
+      case 'savingsAccountStatusType.matured':
+        return 'Matured (not closed)';
+      case 'savingsAccountStatusType.submitted.and.pending.approval':
+        return 'Pending Approval';
+      case 'savingsAccountStatusType.approved':
+        return 'Approved';
+      case 'savingsAccountStatusType.closed':
+        return 'Matured & Closed';
+      case 'savingsAccountStatusType.pre.mature.closure':
+        return 'Premature Closed';
+      case 'savingsAccountStatusType.rejected':
+        return 'Rejected';
+      case 'savingsAccountStatusType.withdrawn.by.applicant':
+        return 'Withdrawn by Client';
+      default:
+        return account?.status?.value ?? '';
+    }
+  }
+
  viewAccountsLabel(closed: boolean): string {
    if (closed) {
      return 'labels.buttons.View Active Accounts';
@@ -229,7 +229,7 @@ export class IdentitiesTabComponent implements OnDestroy {
      }
      const identifierData = {
        documentTypeId,
-        status: 'Active',
+        status: 'ACTIVE',
        documentKey: kind === 'id' ? section.documentKey : `${proofName} - ${this.clientId}`,
        description: kind === 'address' && section.address ? section.address : description
      };
@@ -82,12 +82,13 @@
            <strong class="kyc-doc-alert__title">{{ kycDocumentAlertTitle }}</strong>
            <p class="kyc-doc-alert__text">{{ kycDocumentAlertMessage }}</p>
          </div>
+          <!-- Same dialog as the document's own row: the banner is asking for exactly that. -->
          <button
            mat-flat-button
            color="primary"
            type="button"
            class="kyc-doc-alert__action"
-            (click)="toggleEditMode()"
+            (click)="updateKycDocument()"
          >
            Update Document
          </button>
@@ -470,7 +471,11 @@
              }
            </span>
            <span class="kv-table__col kv-table__col--action">
-              <button mat-stroked-button class="kv-action-btn" type="button" (click)="toggleEditMode()">Update</button>
+              <!-- The document is re-collected in its own dialog, the way PAN and Aadhaar are dealt
+                   with on their rows, rather than by opening the whole KYC form for editing. -->
+              <button mat-stroked-button class="kv-action-btn" type="button" (click)="updateKycDocument()">
+                Update
+              </button>
            </span>
          </div>
        }
@@ -1137,6 +1142,46 @@
                </mat-select>
              </mat-form-field>

+              <!-- Risk profile. These are determinations about the customer rather than about anything they
+                   transacted, and the re-rating policy reads them directly: a PEP or a sanctions match holds the
+                   rating at High however ordinary the period's activity looks, and the declared income is what
+                   turnover is measured against. Until they are recorded the policy has nothing to test. -->
+              <div class="full-span kyc-doc-fields">
+                <div class="kyc-doc-fields__head">
+                  <h4 class="kyc-doc-fields__title">Risk Profile</h4>
+                  <span class="kyc-doc-fields__hint">Used by the periodic risk review</span>
+                </div>
+
+                <div class="kyc-risk-flags">
+                  <mat-checkbox formControlName="isPep">
+                    Politically Exposed Person
+                    <span class="kyc-risk-hint">Holds the rating at High; never lowered on ordinary activity</span>
+                  </mat-checkbox>
+                  <mat-checkbox formControlName="sanctionsMatch">
+                    Sanctions / watch-list match
+                    <span class="kyc-risk-hint">UNSC, MHA or internal watch list</span>
+                  </mat-checkbox>
+                  <mat-checkbox formControlName="adverseMediaMatch">
+                    Adverse media / regulatory action
+                    <span class="kyc-risk-hint">FIR, court proceedings or published action</span>
+                  </mat-checkbox>
+                </div>
+
+                <div class="kyc-doc-fields__grid">
+                  <mat-form-field appearance="outline">
+                    <mat-label>Declared annual income (₹)</mat-label>
+                    <input matInput type="number" min="0" formControlName="declaredAnnualIncome" />
+                    <mat-hint>As stated by the customer</mat-hint>
+                  </mat-form-field>
+
+                  <mat-form-field appearance="outline">
+                    <mat-label>Declared annual turnover (₹)</mat-label>
+                    <input matInput type="number" min="0" formControlName="declaredAnnualTurnover" />
+                    <mat-hint>For a business customer</mat-hint>
+                  </mat-form-field>
+                </div>
+              </div>
+
              <!-- Officially Valid Document. Shown when one is on file or the alert is asking for
                   it, so re-collecting an expired document is done on this form rather than
                   sending the officer somewhere else. -->
@@ -1188,15 +1233,81 @@
                    </mat-form-field>
                  </div>

-                  <!-- The scans live with the document itself, on the identifier the customer's
-                       original was attached to. Re-scanning is done there rather than duplicated
-                       here, so both sides, the cropper and the replace-in-place all behave the
-                       same way they did when the document was first collected. -->
-                  <a class="kyc-doc-scans-link" [routerLink]="['/clients', clientId, 'edit']">
-                    <mat-icon>photo_library</mat-icon>
-                    <span>Replace the scanned front / back of this document</span>
-                    <mat-icon class="kyc-doc-scans-link__go">chevron_right</mat-icon>
-                  </a>
+                  <!-- The scan, where the document it belongs to is. Re-collecting an expiring
+                       document is what this panel is for, so sending the officer to the client
+                       edit screen to change the image made them leave the record they were
+                       working on and find the same document again. -->
+                  <div class="kyc-doc-scans">
+                    <div class="kyc-doc-scans__head">
+                      <mat-icon>photo_library</mat-icon>
+                      <span>Scanned document</span>
+                      @if (docScansLoading) {
+                        <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
+                      }
+                    </div>
+
+                    @if (!docScansLoading && !docScans.front && !docScans.back) {
+                      <div class="kyc-doc-scans__empty">No scan is on file for this document. Upload one below.</div>
+                    }
+
+                    <div class="kyc-doc-scans__sides">
+                      @for (slot of docScanSlots; track slot) {
+                        <div class="kyc-doc-side">
+                          <div class="kyc-doc-side__label">{{ slot === 'front' ? 'Front' : 'Back' }}</div>
+
+                          <div class="kyc-doc-side__frame">
+                            @if (docScanOf(slot)?.previewUrl) {
+                              <img
+                                [src]="docScanOf(slot)!.previewUrl"
+                                [alt]="slot === 'front' ? 'Front of document' : 'Back of document'"
+                              />
+                            } @else if (docScanOf(slot)) {
+                              <!-- On file but not an image (a PDF, say) — named rather than shown. -->
+                              <div class="kyc-doc-side__file">
+                                <mat-icon>description</mat-icon>
+                                <span>{{ docScanOf(slot)!.fileName }}</span>
+                              </div>
+                            } @else {
+                              <div class="kyc-doc-side__none">Not on file</div>
+                            }
+                          </div>
+
+                          <button
+                            type="button"
+                            mat-stroked-button
+                            class="kyc-doc-side__btn"
+                            [disabled]="!!docScanUploading || docScansLoading"
+                            (click)="scanInput.click()"
+                          >
+                            @if (docScanUploading === slot) {
+                              <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
+                              Uploading…
+                            } @else {
+                              {{ docScanOf(slot) ? 'Replace' : 'Upload' }}
+                            }
+                          </button>
+                          <input
+                            #scanInput
+                            type="file"
+                            hidden
+                            accept="image/*,application/pdf"
+                            (change)="onDocScanSelected($event, slot)"
+                          />
+                        </div>
+                      }
+                    </div>
+
+                    @if (docScanError) {
+                      <div class="kyc-doc-scans__msg kyc-doc-scans__msg--err">
+                        <mat-icon>error_outline</mat-icon><span>{{ docScanError }}</span>
+                      </div>
+                    }
+                    @if (docScanSuccess) {
+                      <div class="kyc-doc-scans__msg kyc-doc-scans__msg--ok">
+                        <mat-icon>check_circle</mat-icon><span>{{ docScanSuccess }}</span>
+                      </div>
+                    }
+                  </div>
                </div>
              }

@@ -1681,3 +1681,154 @@
 .kyc-doc-scans-link__go {
  margin-left: auto;
 }
+
+/* The scan itself, beside the number and dates it belongs to. */
+.kyc-doc-scans {
+  margin-top: 10px;
+  padding: 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.kyc-doc-scans__head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: #475569;
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: #64748b;
+  }
+}
+
+.kyc-doc-scans__empty {
+  margin-bottom: 10px;
+  font-size: 12.5px;
+  color: #64748b;
+}
+
+.kyc-doc-scans__sides {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+}
+
+.kyc-doc-side {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 190px;
+}
+
+.kyc-doc-side__label {
+  font-size: 11.5px;
+  font-weight: 700;
+  color: #334155;
+}
+
+/* Fixed height so front and back line up whatever the scan's aspect ratio is. */
+.kyc-doc-side__frame {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 118px;
+  padding: 6px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #f8fafc;
+  overflow: hidden;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 3px;
+  }
+}
+
+.kyc-doc-side__none {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.kyc-doc-side__file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px;
+  font-size: 11px;
+  color: #475569;
+  text-align: center;
+  word-break: break-word;
+
+  mat-icon {
+    color: #64748b;
+  }
+}
+
+.kyc-doc-side__btn {
+  font-size: 12px;
+
+  mat-progress-spinner {
+    display: inline-block;
+    margin-right: 6px;
+    vertical-align: middle;
+  }
+}
+
+.kyc-doc-scans__msg {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
+  font-size: 12.5px;
+
+  mat-icon {
+    font-size: 17px;
+    width: 17px;
+    height: 17px;
+  }
+
+  &--err {
+    color: #b91c1c;
+  }
+
+  &--ok {
+    color: #15803d;
+  }
+}
+
+/* ── Risk profile ────────────────────────────────────────────────────────────
+   Determinations about the customer, which the periodic risk review reads directly. Grouped with
+   the document block so the form reads as "what we know about them" rather than scattering a PEP
+   flag among the identifier fields. */
+
+.kyc-doc-fields__hint {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.kyc-risk-flags {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 4px 0 14px;
+}
+
+/* Sits under its checkbox label: the consequence of ticking the box matters more than the box. */
+.kyc-risk-hint {
+  display: block;
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.4;
+}
@@ -11,7 +11,7 @@ import { Component, OnInit, OnDestroy, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
-import { catchError, of, Subject, takeUntil } from 'rxjs';
+import { catchError, forkJoin, map, of, Subject, takeUntil } from 'rxjs';

 /** Custom Services */
 import { ClientsService } from '../../clients.service';
@@ -30,6 +30,11 @@ import {
  AadhaarReceiptDialogComponent,
  AadhaarReceiptResult
 } from '../../shared/aadhaar-receipt-dialog/aadhaar-receipt-dialog.component';
+import {
+  KycDocumentUpdateDialogComponent,
+  KycDocumentUpdateData,
+  KycDocumentUpdateResult
+} from '../../shared/kyc-document-update-dialog/kyc-document-update-dialog.component';
 import { Dates } from 'app/core/utils/dates';
 import { jsPDF } from 'jspdf';
 import { MatIcon } from '@angular/material/icon';
@@ -38,6 +43,15 @@ import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';

+/** One side of the scanned KYC document, with the preview once it has been fetched. */
+interface DocScanSide {
+  documentId: string;
+  /** The identifier row this scan hangs off; the two sides can sit on different rows. */
+  identifierId: string;
+  fileName: string;
+  previewUrl: string | null;
+}
+
 /**
 * KYC Tab Component.
 * Displays and manages KYC (Know Your Customer) details for an existing client.
@@ -126,6 +140,13 @@ export class KycTabComponent implements OnInit, OnDestroy {
      1,
      [Validators.required]
    ],
+    // Risk profile. Determinations about the customer, which the periodic risk review reads directly - a PEP or a
+    // sanctions match holds the rating at High whatever the period's activity looks like.
+    isPep: [false],
+    sanctionsMatch: [false],
+    adverseMediaMatch: [false],
+    declaredAnnualIncome: [null],
+    declaredAnnualTurnover: [null],
    // The officially valid document, so a lapsed one can be re-collected on this form. The
    // backend has always accepted these four; only the fields were missing.
    kycDocumentName: [''],
@@ -149,9 +170,42 @@ export class KycTabComponent implements OnInit, OnDestroy {
    exceptionReason: [[]]
  });

+  // ── Officially valid document scans ────────────────────────────────────────
+
+  /**
+   * The scans of the document named above, by side.
+   *
+   * The screen used to show the document's number and dates but not the image behind them, and
+   * sent the officer to the client edit screen to change it. Re-collecting an expiring document is
+   * the one thing this panel exists for, so the scan is shown and replaced here.
+   */
+  docScans: { front: DocScanSide | null; back: DocScanSide | null } = { front: null, back: null };
+
+  /** The two sides, in display order, so the template loops rather than repeating itself. */
+  readonly docScanSlots: ('front' | 'back')[] = [
+    'front',
+    'back'
+  ];
+
+  docScanOf(slot: 'front' | 'back') {
+    return this.docScans[slot];
+  }
+
+  /** Identifier row replacements are filed against. Null when the document has no identifier. */
+  private docIdentifierId: string | null = null;
+  /** Every identifier row carrying this document, since the sides can be split across them. */
+  private docIdentifierIds: string[] = [];
+  docScansLoading = false;
+  /** Which side is mid-upload, so only that button shows a spinner. */
+  docScanUploading: 'front' | 'back' | null = null;
+  docScanError: string | null = null;
+  docScanSuccess: string | null = null;
+
  ngOnInit(): void {
    this.route.parent.params.subscribe((params: any) => {
      this.clientId = params['clientId'];
+      // Scans are matched against the document number on the KYC record, so they are loaded once
+      // that record has arrived rather than alongside it.
      this.loadKycData();
      this.loadClientDateOfBirth();
    });
@@ -177,6 +231,11 @@ export class KycTabComponent implements OnInit, OnDestroy {
          this.kycForm.patchValue({
            kycType: data.kycType || 1,
            riskCategory: data.riskCategory || 1,
+            isPep: !!data.isPep,
+            sanctionsMatch: !!data.sanctionsMatch,
+            adverseMediaMatch: !!data.adverseMediaMatch,
+            declaredAnnualIncome: data.declaredAnnualIncome ?? null,
+            declaredAnnualTurnover: data.declaredAnnualTurnover ?? null,
            panNumber: data.panNumber || '',
            // Aadhaar is stored masked on the server; user must re-enter
            // the full 12-digit number to re-verify, so don't pre-fill.
@@ -190,6 +249,8 @@ export class KycTabComponent implements OnInit, OnDestroy {
            isException: data.isException || false,
            exceptionReason: data.exceptionReason ? data.exceptionReason.split(', ') : []
          });
+          // Now that the document number is known, the scans filed under it can be found.
+          this.loadDocumentScans();
        }
      });
  }
@@ -400,6 +461,29 @@ export class KycTabComponent implements OnInit, OnDestroy {
    return new Date();
  }

+  /**
+   * The customer's risk profile, as every save has to carry it.
+   *
+   * <p>
+   * Sent from every path that writes the KYC record rather than only the main Save, because the form holds one set of
+   * values: a save triggered from the PAN declaration or the Aadhaar receipt would otherwise write the record without
+   * these and silently clear a PEP flag the officer had just ticked.
+   */
+  private buildRiskProfileFields() {
+    const v = this.kycForm.value;
+    return {
+      isPep: !!v.isPep,
+      sanctionsMatch: !!v.sanctionsMatch,
+      adverseMediaMatch: !!v.adverseMediaMatch,
+      // Blank stays null rather than becoming zero: an income nobody asked for is unknown, and a zero would read as a
+      // customer who declared no income at all.
+      declaredAnnualIncome:
+        v.declaredAnnualIncome === '' || v.declaredAnnualIncome == null ? null : v.declaredAnnualIncome,
+      declaredAnnualTurnover:
+        v.declaredAnnualTurnover === '' || v.declaredAnnualTurnover == null ? null : v.declaredAnnualTurnover
+    };
+  }
+
  private buildExceptionFields() {
    const panVerified = this.verificationStatus.pan === 'VERIFIED' || this.kycData?.panVerified === true;
    const aadhaarVerified = this.verificationStatus.aadhaar === 'VERIFIED' || this.kycData?.aadhaarVerified === true;
@@ -438,6 +522,7 @@ export class KycTabComponent implements OnInit, OnDestroy {
      // dateFormat is required so the backend can parse exceptionResolvedOn when an exception closes.
      dateFormat: 'dd MMMM yyyy',
      ...this.buildDocumentFields(),
+      ...this.buildRiskProfileFields(),
      ...this.buildExceptionFields()
    };

@@ -484,6 +569,7 @@ export class KycTabComponent implements OnInit, OnDestroy {
        remarks: this.kycForm.value.remarks || null,
        riskCategory: this.kycForm.value.riskCategory || 1,
        dateFormat: 'dd MMMM yyyy',
+        ...this.buildRiskProfileFields(),
        ...this.buildExceptionFields()
      };

@@ -683,6 +769,7 @@ export class KycTabComponent implements OnInit, OnDestroy {
      dateFormat,
      riskCategory: this.kycForm.value.riskCategory || 1,
      ...declarationFields,
+      ...this.buildRiskProfileFields(),
      ...this.buildExceptionFields()
    };

@@ -843,6 +930,7 @@ export class KycTabComponent implements OnInit, OnDestroy {
      dateFormat,
      riskCategory: this.kycForm.value.riskCategory || 1,
      ...receiptFields,
+      ...this.buildRiskProfileFields(),
      ...this.buildExceptionFields()
    };

@@ -1307,6 +1395,305 @@ I further confirm that:
    doc.save(`Self_Declaration_${cifNumber}_${clientName.replace(/\s/g, '_')}.pdf`);
  }

+  // ── Document scans ─────────────────────────────────────────────────────────
+
+  /**
+   * Finds the identifier the KYC document was filed under and loads its scans.
+   *
+   * The KYC record keeps the document's name and number but not the identifier id, so the two are
+   * matched on the number — that is what makes them the same document, and it survives the client
+   * holding several identifiers of the same type.
+   */
+  private loadDocumentScans(): void {
+    if (!this.clientId) {
+      return;
+    }
+    this.docScansLoading = true;
+    this.clientsService
+      .getClientIdentifiers(this.clientId)
+      .pipe(catchError(() => of([] as any[])))
+      .subscribe((identifiers: any[]) => {
+        const wantedKey = (this.kycData?.kycDocumentNumber || '').toString().trim();
+        const wantedName = (this.kycData?.kycDocumentName || '').toString().trim().toLowerCase();
+        const norm = (s: any) => (s || '').toString().trim().toLowerCase();
+
+        // Every identifier carrying this document number, not just the first. The onboarding step
+        // files each side against its own identifier row, so this client's Aadhaar front sits on
+        // one row and the back on another under the same number - taking only the first match
+        // showed the front and reported the back as missing.
+        let matches = (identifiers || []).filter((i) => wantedKey && norm(i.documentKey) === norm(wantedKey));
+        if (!matches.length) {
+          matches = (identifiers || []).filter((i) => wantedName && norm(i.documentType?.name) === wantedName);
+        }
+
+        if (!matches.length) {
+          this.docScansLoading = false;
+          this.docIdentifierId = null;
+          this.docIdentifierIds = [];
+          this.docScans = { front: null, back: null };
+          return;
+        }
+        // Replacements are filed against the first row, so the sides stay together from here on.
+        this.docIdentifierId = String(matches[0].id);
+        this.docIdentifierIds = matches.map((m: any) => String(m.id));
+        this.fetchScansFor(this.docIdentifierIds);
+      });
+  }
+
+  /**
+   * Sides are read off the document name, which is how they were written at upload
+   * ("<Proof> — Front" / "— Back"). Where the name says nothing, upload order stands in, front
+   * first, rather than leaving a scan the officer cannot see.
+   */
+  private fetchScansFor(identifierIds: string[]): void {
+    forkJoin(
+      identifierIds.map((id) =>
+        this.clientsService.getClientIdentificationDocuments(id).pipe(
+          // Tagged with the row it came from, because the download call needs the parent id and
+          // the sides can be spread across more than one.
+          map((docs: any) => ((docs as any[]) || []).map((d) => ({ ...d, identifierId: id }))),
+          catchError(() => of([] as any[]))
+        )
+      )
+    ).subscribe((perIdentifier: any[][]) => {
+      this.docScansLoading = false;
+      // This runs again after every replace, so the previews being thrown away are revoked
+      // rather than left holding their blobs.
+      for (const old of [
+        this.docScans.front,
+        this.docScans.back
+      ]) {
+        if (old?.previewUrl) {
+          URL.revokeObjectURL(old.previewUrl);
+        }
+      }
+
+      // Oldest first by document id, so the newest upload for a side is the last one written and
+      // therefore the one that stands. Identifier order cannot do this job: a replacement is filed
+      // against the first row while the original sits on the second, so reading the rows in order
+      // let a document uploaded months ago overwrite the scan collected a moment ago - the officer
+      // pressed Replace, saw "replaced", and the old image came straight back.
+      const docs = perIdentifier.flat().sort((a, b) => Number(a.id) - Number(b.id));
+      const sides: typeof this.docScans = { front: null, back: null };
+      const unlabelled: any[] = [];
+
+      const entryOf = (d: any): DocScanSide => ({
+        documentId: String(d.id),
+        identifierId: String(d.identifierId),
+        fileName: d.fileName || d.name,
+        previewUrl: null
+      });
+
+      for (const d of docs) {
+        const text = `${d.name || ''} ${d.fileName || ''}`.toLowerCase();
+        // Later uploads win, so a replaced side shows the new scan rather than the original.
+        if (text.includes('back')) {
+          sides.back = entryOf(d);
+        } else if (text.includes('front')) {
+          sides.front = entryOf(d);
+        } else {
+          unlabelled.push(d);
+        }
+      }
+      for (const d of unlabelled) {
+        if (!sides.front) {
+          sides.front = entryOf(d);
+        } else if (!sides.back) {
+          sides.back = entryOf(d);
+        }
+      }
+
+      this.docScans = sides;
+      for (const key of [
+        'front',
+        'back'
+      ] as const) {
+        if (sides[key]) {
+          this.loadScanPreview(sides[key]!);
+        }
+      }
+    });
+  }
+
+  private loadScanPreview(side: DocScanSide): void {
+    this.clientsService
+      .downloadClientIdentificationDocument(side.identifierId, side.documentId)
+      .pipe(catchError(() => of(null)))
+      .subscribe((blob: Blob | null) => {
+        if (!blob || !blob.type?.startsWith('image/')) {
+          return;
+        }
+        // Revoked in ngOnDestroy; a preview left behind holds the blob in memory for the life of
+        // the tab.
+        side.previewUrl = URL.createObjectURL(blob);
+      });
+  }
+
+  /**
+   * Replaces one side with a freshly collected scan.
+   *
+   * The new file is uploaded under the same side name, which is what the readers here and on the
+   * client screen key on, so the latest upload becomes the scan on show. The old file is left in
+   * place deliberately: a KYC document that has been re-collected is a record of what was held
+   * before and when it changed, and destroying it would leave the audit trail with a gap.
+   */
+  onDocScanSelected(event: Event, slot: 'front' | 'back'): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    // Cleared so choosing the same filename twice still fires a change event.
+    input.value = '';
+    if (!file || !this.docIdentifierId) {
+      return;
+    }
+
+    this.docScanError = null;
+    this.docScanSuccess = null;
+    this.docScanUploading = slot;
+
+    const label = slot === 'front' ? 'Front' : 'Back';
+    const docName = this.kycForm.get('kycDocumentName')?.value || this.kycData?.kycDocumentName || 'KYC document';
+
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('name', `${docName} — ${label}`);
+    formData.append('description', `Re-collected on ${new Date().toLocaleDateString('en-IN')}`);
+
+    this.clientsService.uploadClientIdentifierDocument(this.docIdentifierId, formData).subscribe({
+      next: () => {
+        this.docScanUploading = null;
+        this.docScanSuccess = `${label} side replaced.`;
+        // Re-read every row, not just the one written to: the other side still lives on its own.
+        this.fetchScansFor(this.docIdentifierIds);
+      },
+      error: (err: any) => {
+        this.docScanUploading = null;
+        this.docScanError =
+          err?.error?.defaultUserMessage ||
+          err?.error?.developerMessage ||
+          `Could not replace the ${label.toLowerCase()} side.`;
+      }
+    });
+  }
+
+  /**
+   * A verified record only accepts an amendment with a reason on it, so the dialog has to ask for
+   * one. 300 is VERIFIED; the code form is checked too, since either can arrive on the payload.
+   */
+  private get isKycVerified(): boolean {
+    return this.kycData?.kycStatus === 300 || this.kycData?.kycStatusCode === 'clientKycStatus.verified';
+  }
+
+  /**
+   * Re-collects the officially valid document from its own row.
+   *
+   * PAN and Aadhaar are each handled on their row; this one sent the officer into edit mode on the
+   * whole KYC form to do the same job. The dialog asks for the number, the dates and each side of
+   * the scan together, which is what re-collecting a document actually is.
+   */
+  updateKycDocument(): void {
+    if (!this.kycId) {
+      this.docScanError = 'KYC record not found. Save KYC details first.';
+      return;
+    }
+
+    this.dialog
+      .open(KycDocumentUpdateDialogComponent, {
+        width: '640px',
+        maxWidth: '95vw',
+        disableClose: true,
+        data: {
+          documentName: this.kycData?.kycDocumentName || 'KYC document',
+          documentNumber: this.kycData?.kycDocumentNumber || '',
+          issueDate: this.parseApiDate(this.kycData?.kycDocIssueDate),
+          expiryDate: this.parseApiDate(this.kycData?.kycDocExpiryDate),
+          reason: this.showKycDocumentAlert ? this.kycDocumentAlertMessage : '',
+          currentFront: this.docScans.front?.previewUrl || null,
+          currentBack: this.docScans.back?.previewUrl || null,
+          requiresRemarks: this.isKycVerified
+        } as KycDocumentUpdateData
+      })
+      .afterClosed()
+      .subscribe((result: KycDocumentUpdateResult | undefined) => {
+        if (result) {
+          this.persistKycDocument(result);
+        }
+      });
+  }
+
+  /**
+   * Saves the corrected details, then uploads whichever sides were re-scanned.
+   *
+   * The details go first: they are the record, and a scan attached to a document whose number was
+   * never corrected would file the new image under the old identity.
+   */
+  private persistKycDocument(result: KycDocumentUpdateResult): void {
+    this.saving = true;
+    this.docScanError = null;
+    this.docScanSuccess = null;
+
+    const dateFormat = 'dd MMMM yyyy';
+    const payload: any = {
+      locale: 'en',
+      dateFormat,
+      kycDocumentName: this.kycData?.kycDocumentName || null,
+      kycDocumentNumber: result.documentNumber || null,
+      kycDocIssueDate: result.issueDate ? this.dateUtils.formatDate(result.issueDate, dateFormat) : null,
+      kycDocExpiryDate: result.expiryDate ? this.dateUtils.formatDate(result.expiryDate, dateFormat) : null
+    };
+    // The server refuses an amendment to a verified record without one, and records it as the
+    // reason the document changed.
+    if (result.remarks) {
+      payload.remarks = result.remarks;
+    }
+
+    this.clientsService.updateClientKyc(this.clientId, this.kycId!, payload).subscribe({
+      next: () => {
+        this.saving = false;
+        this.docScanSuccess = 'Document updated.';
+        this.loadKycData();
+        this.uploadReplacedSides(result);
+      },
+      error: (err: any) => {
+        this.saving = false;
+        this.docScanError =
+          err?.error?.defaultUserMessage || err?.error?.developerMessage || 'Could not update the document.';
+      }
+    });
+  }
+
+  /** Sends each re-scanned side through the same upload path the panel below uses. */
+  private uploadReplacedSides(result: KycDocumentUpdateResult): void {
+    if (!this.docIdentifierId) {
+      return;
+    }
+    const sides: { slot: 'front' | 'back'; file: File }[] = [];
+    if (result.front) {
+      sides.push({ slot: 'front', file: result.front });
+    }
+    if (result.back) {
+      sides.push({ slot: 'back', file: result.back });
+    }
+    if (!sides.length) {
+      return;
+    }
+
+    const docName = this.kycData?.kycDocumentName || 'KYC document';
+    forkJoin(
+      sides.map(({ slot, file }) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('name', `${docName} — ${slot === 'front' ? 'Front' : 'Back'}`);
+        formData.append('description', `Re-collected on ${new Date().toLocaleDateString('en-IN')}`);
+        return this.clientsService
+          .uploadClientIdentifierDocument(this.docIdentifierId!, formData)
+          .pipe(catchError(() => of(null)));
+      })
+    ).subscribe(() => {
+      this.docScanSuccess = 'Document and scan updated.';
+      this.fetchScansFor(this.docIdentifierIds);
+    });
+  }
+
  /** Handle file selection for signed declaration upload */
  onDeclarationFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
@@ -1365,5 +1752,14 @@ I further confirm that:
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
+    // Object URLs are held by the browser until revoked, so the scan blobs would outlive the tab.
+    for (const side of [
+      this.docScans.front,
+      this.docScans.back
+    ]) {
+      if (side?.previewUrl) {
+        URL.revokeObjectURL(side.previewUrl);
+      }
+    }
  }
 }
@@ -840,6 +840,15 @@ export class CreateClientComponent {
    this.saveAddressProof(clientId);
  }

+  /** "Issue date: yyyy-MM-dd, Expiry date: yyyy-MM-dd" — same convention the CKYC tab and
+   *  client-india-address-step's own "load existing" parsing both read back. */
+  private buildProofDescription(issueDate: string | null | undefined, expiryDate: string | null | undefined): string {
+    const parts: string[] = [];
+    if (issueDate) parts.push(`Issue date: ${issueDate}`);
+    if (expiryDate) parts.push(`Expiry date: ${expiryDate}`);
+    return parts.join(', ');
+  }
+
  /**
   * Save the address-proof picked on the permanent tab as a client identifier
   * + upload each selected file as a document attached to that identifier.
@@ -855,9 +864,9 @@ export class CreateClientComponent {
    const proofName = payload.proof?.name || 'Address Proof';
    const identifierData: any = {
      documentTypeId: payload.proofId,
-      status: 'Active',
+      status: 'ACTIVE',
      documentKey: payload.documentKey || `${proofName} - ${clientId}`,
-      description: payload.issueDate ? `Issue date: ${payload.issueDate}` : ''
+      description: this.buildProofDescription(payload.issueDate, payload.expiryDate)
    };

    this.clientsService.addClientIdentifier(clientId, identifierData).subscribe({
@@ -904,7 +913,7 @@ export class CreateClientComponent {
      }
      const identifierData: any = {
        documentTypeId,
-        status: 'Active',
+        status: 'ACTIVE',
        documentKey: payload.documentKey || `${proofName} - ${clientId}`,
        description: 'KYC document'
      };
@@ -164,6 +164,13 @@ export class ContactOtpBlockComponent implements OnChanges, OnDestroy {
    request$.subscribe({
      next: (res: any) => {
        this.sending = false;
+        // The backend reports failure to actually dispatch the OTP (gateway error, flagged
+        // number, SMTP failure...) as a 200 response with success:false and a real reason in
+        // `message` — never a thrown error. Surface that reason instead of treating it as sent.
+        if (res?.success === false) {
+          this.errorMessage = res?.message || 'Could not send OTP.';
+          return;
+        }
        this.otpId = res?.otpId ?? res?.resourceId ?? null;
        this.otpSent = true;
        this.clearAllDigits();
@@ -377,6 +377,8 @@
        </button>
      }
      @if (selectedTabIndex < totalTabs - 1) {
+        <!-- Tooltip sits on a wrapper: a disabled button fires no mouse events, so it can't host it. -->
+        <span [matTooltip]="currentStepBlockerMessage" [matTooltipDisabled]="!currentStepBlockerMessage">
        <button mat-raised-button color="primary" (click)="onNext()" [disabled]="savingClient || !currentStepValid">
          @if (savingClient) {
            <mat-progress-spinner diameter="18" mode="indeterminate" class="m-r-10"></mat-progress-spinner>
@@ -390,6 +392,7 @@
            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
          }
        </button>
+        </span>
      }
      @if (selectedTabIndex === totalTabs - 1) {
        <button mat-raised-button color="primary" [routerLink]="['../']">
@@ -393,6 +393,12 @@ export class EditClientComponent {
    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 === 0 && this.clientGeneralForm && !this.clientGeneralForm.valid) {
+      const labels = this.invalidGeneralFieldLabels();
+      if (labels.length) {
+        return `Please fill/correct: ${labels.join(', ')}.`;
+      }
+    }
    if (this.selectedTabIndex === 1) {
      const labels = this.clientKycStep?.invalidFieldLabels || [];
      if (labels.length) {
@@ -408,6 +414,42 @@ export class EditClientComponent {
    return 'Please fill all mandatory fields on this tab to continue.';
  }

+  /**
+   * Readable names of the General-tab controls that are invalid. Older clients can be missing
+   * fields that are now mandatory (e.g. mobile/email), which leaves Save disabled with nothing
+   * on screen saying why — this feeds the button tooltip.
+   */
+  private invalidGeneralFieldLabels(): string[] {
+    const labels: Record<string, string> = {
+      officeId: 'Office',
+      legalFormId: 'Legal Form',
+      genderId: 'Gender',
+      mobileNo: 'Mobile No',
+      alternateMobileNo: 'Alternate Mobile No',
+      emailAddress: 'Email',
+      dateOfBirth: 'Date of Birth',
+      submittedOnDate: 'Submitted On',
+      activationDate: 'Activation Date',
+      savingsProductId: 'Savings Product',
+      firstname: 'First Name',
+      middlename: 'Middle Name',
+      lastname: 'Last Name',
+      fullname: 'Name',
+      monthlyIncome: 'Monthly Income',
+      annualIncome: 'Annual Income',
+      monthlyTurnover: 'Monthly Turnover',
+      annualTurnover: 'Yearly Turnover',
+      agricultureIncome: 'Agriculture Income',
+      nonAgricultureIncome: 'Non-Agriculture Income',
+      guardianDetails: 'Guardian',
+      clientNonPersonDetails: 'Entity Details'
+    };
+    const controls = this.clientGeneralForm?.controls || {};
+    return Object.keys(controls)
+      .filter((name) => controls[name].invalid)
+      .map((name) => labels[name] || name);
+  }
+
  /** Whether the current tab has unsaved edits */
  isCurrentTabEdited(): boolean {
    return this.tabEditMode[this.selectedTabIndex] === true;
@@ -1035,6 +1077,15 @@ export class EditClientComponent {
    this.saveAddressProof(clientId);
  }

+  /** "Issue date: yyyy-MM-dd, Expiry date: yyyy-MM-dd" — same convention the CKYC tab and
+   *  client-india-address-step's own "load existing" parsing both read back. */
+  private buildProofDescription(issueDate: string | null | undefined, expiryDate: string | null | undefined): string {
+    const parts: string[] = [];
+    if (issueDate) parts.push(`Issue date: ${issueDate}`);
+    if (expiryDate) parts.push(`Expiry date: ${expiryDate}`);
+    return parts.join(', ');
+  }
+
  /**
   * Save the address-proof picked on the permanent tab as a client identifier
   * + upload each selected file as a document attached to that identifier.
@@ -1050,9 +1101,9 @@ export class EditClientComponent {
    const proofName = payload.proof?.name || 'Address Proof';
    const identifierData: any = {
      documentTypeId: payload.proofId,
-      status: 'Active',
+      status: 'ACTIVE',
      documentKey: payload.documentKey || `${proofName} - ${clientId}`,
-      description: payload.issueDate ? `Issue date: ${payload.issueDate}` : ''
+      description: this.buildProofDescription(payload.issueDate, payload.expiryDate)
    };

    this.clientsService.addClientIdentifier(clientId, identifierData).subscribe({
@@ -1105,7 +1156,7 @@ export class EditClientComponent {
    const existingId = this.clientKycStep?.existingKycIdentifierId;
    if (existingId) {
      this.resolveDocumentTypeId(payload.proofId, proofName).subscribe((documentTypeId: number | null) => {
-        const update: any = { documentKey: payload.documentKey || `${proofName} - ${clientId}`, status: 'Active' };
+        const update: any = { documentKey: payload.documentKey || `${proofName} - ${clientId}`, status: 'ACTIVE' };
        if (documentTypeId != null) {
          update.documentTypeId = documentTypeId;
        }
@@ -1128,7 +1179,7 @@ export class EditClientComponent {
      }
      const identifierData: any = {
        documentTypeId,
-        status: 'Active',
+        status: 'ACTIVE',
        documentKey: payload.documentKey || `${proofName} - ${clientId}`,
        description: 'KYC document'
      };
@@ -0,0 +1,131 @@
+<!--
+  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 class="kdu-title">
+  <mat-icon>description</mat-icon>
+  Update {{ data.documentName }}
+</h2>
+
+<mat-dialog-content class="kdu-body">
+  <!-- Why this is being asked for, in the words the alert used. -->
+  @if (data.reason) {
+    <div class="kdu-reason">
+      <mat-icon>schedule</mat-icon>
+      <span>{{ data.reason }}</span>
+    </div>
+  }
+
+  <form [formGroup]="form" class="kdu-form">
+    <mat-form-field appearance="outline" class="kdu-field kdu-field--wide">
+      <mat-label>Document Number</mat-label>
+      <input matInput formControlName="documentNumber" autocomplete="off" />
+      @if (form.get('documentNumber')?.hasError('required') && form.get('documentNumber')?.touched) {
+        <mat-error>Document number is required</mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="kdu-field">
+      <mat-label>Issued On</mat-label>
+      <input matInput [matDatepicker]="issuePicker" formControlName="issueDate" />
+      <mat-datepicker-toggle matSuffix [for]="issuePicker"></mat-datepicker-toggle>
+      <mat-datepicker #issuePicker></mat-datepicker>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="kdu-field">
+      <mat-label>Valid Till</mat-label>
+      <input matInput [matDatepicker]="expiryPicker" formControlName="expiryDate" />
+      <mat-datepicker-toggle matSuffix [for]="expiryPicker"></mat-datepicker-toggle>
+      <mat-datepicker #expiryPicker></mat-datepicker>
+      <mat-hint>Blank if it does not expire</mat-hint>
+    </mat-form-field>
+
+    <!-- Only where the KYC record is already verified. Changing what a verified record holds is an
+         amendment, and the reason goes on the record with it. -->
+    @if (data.requiresRemarks) {
+      <mat-form-field appearance="outline" class="kdu-field kdu-field--wide">
+        <mat-label>Reason for update</mat-label>
+        <textarea
+          matInput
+          formControlName="remarks"
+          rows="2"
+          placeholder="e.g. Document expired — fresh copy collected from the customer"
+        ></textarea>
+        <mat-hint>Recorded against the verified KYC record</mat-hint>
+        @if (form.get('remarks')?.hasError('required') && form.get('remarks')?.touched) {
+          <mat-error>A reason is required to change a verified KYC record</mat-error>
+        }
+      </mat-form-field>
+    }
+  </form>
+
+  <div class="kdu-scans">
+    <div class="kdu-scans__head">Scanned copy</div>
+    <p class="kdu-scans__hint">
+      Leave a side untouched to keep the scan already on file. The previous copy is kept either way.
+    </p>
+
+    <div class="kdu-sides">
+      @for (slot of slots; track slot) {
+        <div class="kdu-side">
+          <div class="kdu-side__label">
+            {{ slot === 'front' ? 'Front' : 'Back' }}
+            @if (isReplaced(slot)) {
+              <span class="kdu-side__new">New</span>
+            }
+          </div>
+
+          <div class="kdu-side__frame" [class.kdu-side__frame--new]="isReplaced(slot)">
+            @if (previewOf(slot)) {
+              <img [src]="previewOf(slot)" [alt]="slot === 'front' ? 'Front of document' : 'Back of document'" />
+            } @else if (isReplaced(slot)) {
+              <!-- Picked, but not an image (a PDF, say) — named rather than shown. -->
+              <div class="kdu-side__file">
+                <mat-icon>insert_drive_file</mat-icon>
+                <span>{{ pickedName(slot) }}</span>
+              </div>
+            } @else {
+              <div class="kdu-side__none">Not on file</div>
+            }
+          </div>
+
+          <div class="kdu-side__actions">
+            <button type="button" mat-stroked-button class="kdu-side__btn" (click)="sideInput.click()">
+              {{ previewOf(slot) || isReplaced(slot) ? 'Choose new scan' : 'Upload scan' }}
+            </button>
+            @if (isReplaced(slot)) {
+              <button
+                type="button"
+                mat-icon-button
+                class="kdu-side__undo"
+                matTooltip="Keep the scan already on file"
+                (click)="clearPick(slot)"
+              >
+                <mat-icon>undo</mat-icon>
+              </button>
+            }
+          </div>
+          <input #sideInput type="file" hidden accept="image/*,application/pdf" (change)="onFilePicked($event, slot)" />
+        </div>
+      }
+    </div>
+  </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end" class="kdu-actions">
+  <button mat-stroked-button type="button" (click)="cancel()">Cancel</button>
+  <button
+    mat-flat-button
+    color="primary"
+    type="button"
+    [disabled]="form.invalid || !hasChanges"
+    [matTooltip]="!hasChanges ? 'Change a detail or add a scan first' : ''"
+    (click)="submit()"
+  >
+    Save Document
+  </button>
+</mat-dialog-actions>
@@ -0,0 +1,172 @@
+/**
+ * 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/.
+ */
+
+.kdu-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  mat-icon {
+    color: #64748b;
+  }
+}
+
+.kdu-body {
+  padding-top: 4px;
+}
+
+.kdu-reason {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding: 10px 12px;
+  border: 1px solid #fde68a;
+  border-radius: 6px;
+  background: #fffbeb;
+  color: #92400e;
+  font-size: 13px;
+  line-height: 1.5;
+
+  mat-icon {
+    flex: 0 0 auto;
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    color: #d97706;
+  }
+}
+
+.kdu-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.kdu-field {
+  flex: 1 1 180px;
+}
+
+.kdu-field--wide {
+  flex: 1 1 100%;
+}
+
+.kdu-scans {
+  margin-top: 8px;
+  padding: 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.kdu-scans__head {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: #475569;
+}
+
+.kdu-scans__hint {
+  margin: 4px 0 12px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.kdu-sides {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.kdu-side {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 210px;
+}
+
+.kdu-side__label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #334155;
+}
+
+/* Marks the side the officer has just re-scanned, so it is obvious what will change on save. */
+.kdu-side__new {
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: #dcfce7;
+  color: #15803d;
+  font-size: 10.5px;
+  font-weight: 700;
+}
+
+.kdu-side__frame {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 132px;
+  padding: 6px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #fff;
+  overflow: hidden;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 3px;
+  }
+
+  &--new {
+    border-color: #86efac;
+    box-shadow: 0 0 0 1px #86efac;
+  }
+}
+
+.kdu-side__none {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.kdu-side__file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px;
+  font-size: 11px;
+  color: #475569;
+  text-align: center;
+  word-break: break-word;
+
+  mat-icon {
+    color: #64748b;
+  }
+}
+
+.kdu-side__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.kdu-side__btn {
+  flex: 1;
+  font-size: 12px;
+}
+
+.kdu-actions {
+  padding: 8px 24px 20px;
+  gap: 8px;
+}
@@ -0,0 +1,215 @@
+/**
+ * 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 { CommonModule } from '@angular/common';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/** What the caller hands in: the document as it stands, and the scans already on file. */
+export interface KycDocumentUpdateData {
+  documentName: string;
+  documentNumber: string;
+  issueDate: Date | string | null;
+  expiryDate: Date | string | null;
+  /** Why the document is being asked for, shown at the top so the officer sees the reason. */
+  reason: string;
+  /** Previews of what is currently held, so the officer can see what they are replacing. */
+  currentFront: string | null;
+  currentBack: string | null;
+  /**
+   * True when the KYC record is already verified. Changing data on one of those needs a reason on
+   * the record, which the server enforces - so the dialog asks for it rather than letting the
+   * officer fill the whole form in and be refused on submit.
+   */
+  requiresRemarks: boolean;
+}
+
+/** What the caller gets back: the corrected details, plus whichever sides were re-scanned. */
+export interface KycDocumentUpdateResult {
+  documentNumber: string;
+  issueDate: Date | null;
+  expiryDate: Date | null;
+  front: File | null;
+  back: File | null;
+  /** Why the document was re-collected. Blank unless the record was already verified. */
+  remarks: string;
+}
+
+/**
+ * Re-collects an officially valid document without leaving the KYC record.
+ *
+ * PAN and Aadhaar are each dealt with on their own row of the verification table. The OVD was the
+ * exception: its Update button put the whole KYC form into edit mode, so re-collecting one expiring
+ * document meant scrolling a form of unrelated fields and finding the same document again. The work
+ * is the same either way - a new number, new dates, a fresh scan of each side - so it is asked for
+ * in one place.
+ */
+@Component({
+  selector: 'mifosx-kyc-document-update-dialog',
+  templateUrl: './kyc-document-update-dialog.component.html',
+  styleUrls: ['./kyc-document-update-dialog.component.scss'],
+  standalone: true,
+  // The shared set carries the date adapter the two datepickers below need; the sibling dialogs
+  // pull it in the same way.
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    CommonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule
+  ]
+})
+export class KycDocumentUpdateDialogComponent implements OnDestroy {
+  private formBuilder = inject(UntypedFormBuilder);
+  private dialogRef = inject<MatDialogRef<KycDocumentUpdateDialogComponent>>(MatDialogRef);
+  data = inject<KycDocumentUpdateData>(MAT_DIALOG_DATA);
+
+  form: UntypedFormGroup;
+
+  /** Newly chosen files, with a local preview so the officer sees what they picked. */
+  picked: { front: File | null; back: File | null } = { front: null, back: null };
+  pickedPreview: { front: string | null; back: string | null } = { front: null, back: null };
+
+  readonly slots: ('front' | 'back')[] = [
+    'front',
+    'back'
+  ];
+
+  constructor() {
+    this.form = this.formBuilder.group({
+      documentNumber: [
+        this.data.documentNumber || '',
+        [Validators.required]
+      ],
+      issueDate: [this.toDate(this.data.issueDate)],
+      // Left free rather than required: a passport expires, a PAN card does not.
+      expiryDate: [this.toDate(this.data.expiryDate)],
+      // Required only where the server requires it, so completing a record that was never verified
+      // does not demand a justification for filling in blanks.
+      remarks: [
+        '',
+        this.data.requiresRemarks ? [Validators.required] : []
+      ]
+    });
+  }
+
+  private toDate(value: Date | string | null): Date | null {
+    if (!value) {
+      return null;
+    }
+    const d = value instanceof Date ? value : new Date(value);
+    return isNaN(d.getTime()) ? null : d;
+  }
+
+  previewOf(slot: 'front' | 'back'): string | null {
+    return this.pickedPreview[slot] || (slot === 'front' ? this.data.currentFront : this.data.currentBack);
+  }
+
+  /** True once this side has been re-scanned in this dialog, so the label can say so. */
+  isReplaced(slot: 'front' | 'back'): boolean {
+    return !!this.picked[slot];
+  }
+
+  pickedName(slot: 'front' | 'back'): string {
+    return this.picked[slot]?.name || '';
+  }
+
+  onFilePicked(event: Event, slot: 'front' | 'back'): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0] || null;
+    // Cleared so re-picking the same filename still fires a change event.
+    input.value = '';
+    if (!file) {
+      return;
+    }
+    if (this.pickedPreview[slot]) {
+      URL.revokeObjectURL(this.pickedPreview[slot]!);
+    }
+    this.picked[slot] = file;
+    this.pickedPreview[slot] = file.type.startsWith('image/') ? URL.createObjectURL(file) : null;
+  }
+
+  clearPick(slot: 'front' | 'back'): void {
+    if (this.pickedPreview[slot]) {
+      URL.revokeObjectURL(this.pickedPreview[slot]!);
+    }
+    this.picked[slot] = null;
+    this.pickedPreview[slot] = null;
+  }
+
+  /**
+   * Something has to change for the update to mean anything - either a corrected detail or a fresh
+   * scan. Submitting an untouched form would reopen a verified KYC record for no reason.
+   */
+  get hasChanges(): boolean {
+    if (this.picked.front || this.picked.back) {
+      return true;
+    }
+    const v = this.form.value;
+    const sameNumber = (v.documentNumber || '').trim() === (this.data.documentNumber || '').trim();
+    const sameIssue = this.sameDay(v.issueDate, this.toDate(this.data.issueDate));
+    const sameExpiry = this.sameDay(v.expiryDate, this.toDate(this.data.expiryDate));
+    return !(sameNumber && sameIssue && sameExpiry);
+  }
+
+  private sameDay(a: Date | null, b: Date | null): boolean {
+    if (!a && !b) {
+      return true;
+    }
+    if (!a || !b) {
+      return false;
+    }
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  }
+
+  submit(): void {
+    if (this.form.invalid || !this.hasChanges) {
+      this.form.markAllAsTouched();
+      return;
+    }
+    const v = this.form.value;
+    const result: KycDocumentUpdateResult = {
+      documentNumber: (v.documentNumber || '').trim(),
+      issueDate: v.issueDate || null,
+      expiryDate: v.expiryDate || null,
+      front: this.picked.front,
+      back: this.picked.back,
+      remarks: (v.remarks || '').trim()
+    };
+    this.dialogRef.close(result);
+  }
+
+  cancel(): void {
+    this.dialogRef.close();
+  }
+
+  ngOnDestroy(): void {
+    // Only the previews this dialog created; the caller owns the ones it passed in.
+    for (const slot of this.slots) {
+      if (this.pickedPreview[slot]) {
+        URL.revokeObjectURL(this.pickedPreview[slot]!);
+      }
+    }
+  }
+}
@@ -25,6 +25,41 @@ import { environment } from '../../../environments/environment';
 export class CacheInterceptor implements HttpInterceptor {
  private forceUpdate = false;

+  /**
+   * Endpoints that compute a live figure from the current ledger/configuration and must never be
+   * served from cache. Caching them meant a report kept showing a stale response after its
+   * underlying GL mapping changed — the request was answered from cachedData and the backend was
+   * never hit again. Matched as a substring of the request URL.
+   */
+  private static readonly NEVER_CACHE = [
+    '/rbireservereturn',
+    '/rbireserveconfig',
+    '/tdsconfig',
+    '/tds/deposit-interest',
+    // Declarations and challans are entered on the very screens that read them back.
+    '/tds/declarations',
+    '/tds/challans',
+    '/tds/deducted',
+    '/savingsinterestpostingreports',
+    // Cash in vaults and drawers changes with every transaction; a cached teller list or position
+    // kept showing a branch's old tellers and figures at day close.
+    '/tellers',
+    '/cashreports',
+    '/cashreconciliation',
+    '/cashsettlement',
+    '/cashtransfer',
+    '/branchday',
+    // A deposit's lien moves with every repayment of the loan it secures, and decides whether the
+    // deposit may be closed at all - a stale copy would show a released lien as still blocking.
+    '/liens',
+    // The RD Dashboard counts late installments as of today; a cached copy would hide a payment just taken.
+    '/recurringdepositaccounts/dashboard'
+  ];
+
+  private isCacheable(url: string): boolean {
+    return !CacheInterceptor.NEVER_CACHE.some((fragment) => url.includes(fragment));
+  }
+
  // eslint-disable-next-line @angular-eslint/prefer-inject
  constructor(private httpCacheService: HttpCacheService) {}

@@ -42,7 +77,7 @@ export class CacheInterceptor implements HttpInterceptor {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    if (request.method !== 'GET') {
+    if (request.method !== 'GET' || !this.isCacheable(request.urlWithParams)) {
      return next.handle(request);
    }

@@ -67,12 +67,18 @@ export class ErrorHandlerInterceptor implements HttpInterceptor {
    // 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');
+    // A document's own file can be missing from the content store (a database copied between
+    // environments without its file store is the usual cause) even though its m_document row
+    // survives — the backend reports that as a 404, same as a client with no photo, and every
+    // caller that fetches a signature/attachment image already recovers with its own catchError.
+    const isDocumentAttachmentRequest = request.url.match(/\/documents\/\d+\/attachment$/);
    const isSilentRequest =
      isClientImageRequest ||
      isClientKycRequest ||
      isDirectorRequest ||
      isClientPendingEditRequest ||
-      isKycRiskRulesRequest;
+      isKycRiskRulesRequest ||
+      isDocumentAttachmentRequest;

    // 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
@@ -93,8 +99,8 @@ export class ErrorHandlerInterceptor implements HttpInterceptor {
      throw response;
    }

-    // Resolved once and emitted in one place below, so every failure here is consistently tagged
-    // as an error and therefore surfaces as a centred modal rather than a corner toast.
+    // Resolved once and emitted in one place below — see the severity decision there for which of
+    // these surfaces as a centred modal versus a corner toast.
    let alert: { type: string; message: string } | null = null;
    if (status === 401 || (environment.oauth.enabled && status === 400)) {
      alert = { type: 'Authentication Error', message: 'Invalid User Details. Please try again!' };
@@ -119,7 +125,13 @@ export class ErrorHandlerInterceptor implements HttpInterceptor {
        message: errorMessage || 'This action is not allowed in the current state.'
      };
    } else if (status === 500) {
-      alert = { type: 'Internal Server Error', message: 'Internal Server Error. Please try again later.' };
+      // errorMessage carries the backend's actual explanation (defaultUserMessage/developerMessage)
+      // when one is present; the generic sentence is only a last resort for a response with no body
+      // at all (a proxy timeout, a stack trace the server never wrapped into JSON).
+      alert = {
+        type: 'Internal Server Error',
+        message: errorMessage || 'Internal Server Error. Please try again later.'
+      };
    } else if (status === 501) {
      alert = {
        type: this.translate.instant('error.resource.notImplemented.type'),
@@ -133,7 +145,17 @@ export class ErrorHandlerInterceptor implements HttpInterceptor {
    }

    if (alert) {
-      this.alertService.alert({ ...alert, severity: 'error' });
+      // A GET is the page reading data it did not ask the user for, in the background — a photo,
+      // an attachment, a notes list, a standing-instructions panel. Every one of those already has
+      // its own catchError fallback at the call site (see transaction-entry.component.ts and
+      // similar account-overview loaders), so the page keeps working regardless. Blocking the whole
+      // screen on a dialog the user has to click "OK" on, for data that was never more than a
+      // secondary panel, is the "irritate na ho" complaint this guards against — it goes to the
+      // corner toast instead, same place a non-error alert already goes. A write (POST/PUT/PATCH/
+      // DELETE) is different: that is the one action the user was waiting on, so its failure still
+      // needs the centred, must-acknowledge dialog.
+      const isBackgroundRead = request.method === 'GET' && (status === 500 || status === 501 || status === 503);
+      this.alertService.alert({ ...alert, severity: isBackgroundRead ? undefined : 'error' });
    }

    throw response;
@@ -65,6 +65,14 @@
          <span class="cashier-nav__esc-hint" (click)="onEscapeKey()"> <kbd>ESC</kbd> Show Header </span>
        </nav>
      }
+      <!-- FD Dashboard fullscreen — ESC hint bar -->
+      @else if (currentUrl.includes('/fd-dashboard')) {
+        <nav class="cashier-nav cashier-nav--election">
+          <span class="cashier-nav__esc-hint" (click)="onEscapeKey()">
+            <kbd>ESC</kbd> Exit Fullscreen (Show Header &amp; Footer)
+          </span>
+        </nav>
+      }
      <!-- Clerk Dashboard fullscreen nav — only visible at /clerk/* -->
      @else if (currentUrl.includes('/clerk/')) {
        <nav class="cashier-nav cashier-nav--clerk">
@@ -310,41 +318,6 @@
        </nav>
      }
    }
-
-    <!-- Live KPI ticker items — referenced twice below for seamless marquee loop -->
-    <ng-template #kpiTickerItems>
-      <span class="ti"><span class="ti-k">CASH</span><span class="ti-v amber">₹14,82,500</span></span>
-      <span class="ti-d">│</span>
-      <span class="ti">
-        <span class="ti-k">TXN TODAY</span>
-        <span class="ti-v">1,247</span>
-        <span class="ti-v up">↑ 8.2%</span>
-      </span>
-      <span class="ti-d">│</span>
-      <span class="ti"><span class="ti-k">CLEARING IN</span><span class="ti-v">42</span></span>
-      <span class="ti-d">│</span>
-      <span class="ti"><span class="ti-k">CLEARING OUT</span><span class="ti-v">38</span></span>
-      <span class="ti-d">│</span>
-      <span class="ti">
-        <span class="ti-k">NPA·GROSS</span>
-        <span class="ti-v amber">3.47%</span>
-        <span class="ti-v down">↑ 0.12</span>
-      </span>
-      <span class="ti-d">│</span>
-      <span class="ti"><span class="ti-k">CASA</span><span class="ti-v">58.2%</span></span>
-      <span class="ti-d">│</span>
-      <span class="ti"><span class="ti-k">CD RATIO</span><span class="ti-v">71.8%</span></span>
-      <span class="ti-d">│</span>
-      <span class="ti">
-        <span class="ti-k">RBI CIRC</span>
-        <span class="ti-v">DBR.AML.NO.4/14.01.001</span>
-        <span class="ti-v amber">NEW</span>
-      </span>
-      <span class="ti-d">│</span>
-      <span class="ti"><span class="ti-k">REPO</span><span class="ti-v">6.50%</span></span>
-      <span class="ti-d">│</span>
-    </ng-template>
-
    <!-- ============================================================
         Main Header — 2-Row Navigation
         ============================================================
@@ -623,18 +596,11 @@
        </div>
      </div>

-      <!-- LIVE KPI TICKER (below the menu — pauses on hover) -->
-      <div class="kpi-ticker" role="marquee" aria-label="Live key-performance ticker">
-        <span class="kpi-live">
-          <span class="kpi-live-dot"></span>
-          LIVE
-        </span>
-        <div class="kpi-track">
-          <!-- Render the item block twice so the marquee loops seamlessly. -->
-          <ng-container *ngTemplateOutlet="kpiTickerItems"></ng-container>
-          <ng-container *ngTemplateOutlet="kpiTickerItems"></ng-container>
-        </div>
-      </div>
+      <!-- The KPI ticker that sat here has been removed. Every figure in it was written into the template — cash on
+           hand, transactions today, CASA, CD ratio, gross NPA, a circular reference — and none came from the bank's
+           own books. Under a "LIVE" badge on every screen in the application, that is not decoration: a figure a
+           branch manager can read as the day's cash position, or an inspector as the NPA ratio, has to be the real
+           one or must not be shown. The band returns when there is a source behind it. -->
    }
    <!-- end @if (!hideShellLayout) -->

@@ -697,6 +663,12 @@
      <button mat-menu-item routerLink="/reports/savings-interest" tabindex="0">
        <i class="fa fa-percentage menu-item-icon"></i> Savings Interest Posted
      </button>
+      <button mat-menu-item routerLink="/reports/interest-posting" tabindex="0">
+        <i class="fa fa-clipboard-check menu-item-icon"></i> Interest Posting Reports
+      </button>
+      <button mat-menu-item routerLink="/reports/interest-posting-summary" tabindex="0">
+        <i class="fa fa-table menu-item-icon"></i> Interest Posting Summary (Branch-wise)
+      </button>
      <!--
        The Principal Officer clears flagged UNSC screenings here. It is not a runnable report,
        so it never shows up under the report categories above and had no nav entry at all.
@@ -713,6 +685,9 @@
      <button mat-menu-item routerLink="/reports/tds-remittance" tabindex="0">
        <i class="fa fa-landmark menu-item-icon"></i> TDS Remitted to Government
      </button>
+      <button mat-menu-item routerLink="/reports/bor" tabindex="0">
+        <i class="fa fa-gavel menu-item-icon"></i> BOR Register &mdash; Share Capital
+      </button>
    </mat-menu>

    <!-- Admin Mega Menu — 3-column rectangular panel grouping Setup,
@@ -1242,8 +1217,11 @@
          <button mat-menu-item tabindex="0">
            <fa-icon icon="clock" class="menu-item-icon"></fa-icon> Account Expiry
          </button>
-          <button mat-menu-item tabindex="0">
-            <fa-icon icon="file-alt" class="menu-item-icon"></fa-icon> FD Maturity Report
+          <button mat-menu-item tabindex="0" [routerLink]="['/fd-dashboard']">
+            <fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> FD Dashboard
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/rd-dashboard']">
+            <fa-icon icon="piggy-bank" class="menu-item-icon"></fa-icon> RD Dashboard
          </button>
          <button mat-menu-item tabindex="0">
            <fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> FD Interest Report
@@ -1339,72 +1317,79 @@
        <!-- Share Operations -->
        <div class="deposit-menu-group">
          <div class="deposit-group-title">Share Operations</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/nominal-shares']">
            <fa-icon icon="coins" class="menu-item-icon"></fa-icon> Nominal Share Report
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/share-wise']">
            <fa-icon icon="file-alt" class="menu-item-icon"></fa-icon> Share Wise Report
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/guarantor-detail']">
            <fa-icon icon="user-shield" class="menu-item-icon"></fa-icon> Guarantor Detail
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/member-interest']">
            <fa-icon icon="calculator" class="menu-item-icon"></fa-icon> Total Int Rec
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/enquiry']">
            <fa-icon icon="search" class="menu-item-icon"></fa-icon> Share Enquiry
          </button>
        </div>
        <!-- Share Documents -->
        <div class="deposit-menu-group">
          <div class="deposit-group-title">Share Documents</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/payment-certificate']">
            <fa-icon icon="file-signature" class="menu-item-icon"></fa-icon> Share Payment Certificate
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/share-detail']">
            <fa-icon icon="list-alt" class="menu-item-icon"></fa-icon> Share Detail
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/dividend-statement']">
            <fa-icon icon="dollar-sign" class="menu-item-icon"></fa-icon> Dividend Statement
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/transfers']">
            <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Share Transfer
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/folio-statement']">
            <fa-icon icon="file-alt" class="menu-item-icon"></fa-icon> Folio Statement
          </button>
        </div>
        <!-- Share Reports -->
        <div class="deposit-menu-group">
          <div class="deposit-group-title">Share Reports</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/final-balance']">
            <fa-icon icon="chart-line" class="menu-item-icon"></fa-icon> Final Balance
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/account-statement']">
            <fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Account Statement
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/share-issued']">
            <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Share Issued
          </button>
          <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">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/share-status']">
            <fa-icon icon="info-circle" class="menu-item-icon"></fa-icon> Share Status
          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/product-summary']">
+            <fa-icon icon="layer-group" class="menu-item-icon"></fa-icon> Product Summary
+          </button>
        </div>
        <!-- Share Admin -->
        <div class="deposit-menu-group">
          <div class="deposit-group-title">Share Admin</div>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/distinctive-numbers']">
            <fa-icon icon="tag" class="menu-item-icon"></fa-icon> Share Devede No Detail
          </button>
-          <button mat-menu-item tabindex="0"><fa-icon icon="map" class="menu-item-icon"></fa-icon> Area Wise</button>
-          <button mat-menu-item tabindex="0"><fa-icon icon="tag" class="menu-item-icon"></fa-icon> Share Label</button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/area-wise']">
+            <fa-icon icon="map" class="menu-item-icon"></fa-icon> Area Wise
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/labels']">
+            <fa-icon icon="tag" class="menu-item-icon"></fa-icon> Share Label
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/shares/reports/letters']">
            <fa-icon icon="envelope" class="menu-item-icon"></fa-icon> Share Letter
          </button>
-          <button mat-menu-item tabindex="0">
+          <button mat-menu-item tabindex="0" [routerLink]="['/letter-mgmt/share-member']">
            <fa-icon icon="id-card" class="menu-item-icon"></fa-icon> Share Member Details
          </button>
        </div>
@@ -2095,6 +2080,35 @@
              <fa-icon icon="users" class="gl-icon" style="color: #4f46e5"></fa-icon> Members &amp; Share Capital
            </a>
          </div>
+          <!-- Reserve Returns — CRR and SLR, computed live from the ledger. Grouped apart from the
+               OSS returns because they are filed on their own cycles: Form 1 twice a month, Form 9
+               at month end. -->
+          <div class="gl-group">
+            <div class="gl-group-title">Reserve Returns</div>
+            <!-- The statutory form is a tab on Form 1 rather than an entry of its own: two menu
+                 items for one return had a filer guessing which one they were looking at. -->
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesRbiSearch('Form 1 CRR Cash Reserve Ratio')"
+              routerLink="/rbi/form1"
+              (click)="rbiMenuOpen = false"
+            >
+              <fa-icon icon="percentage" class="gl-icon" style="color: #b45309"></fa-icon> Form 1 — CRR (fortnightly)
+            </a>
+            <!-- Form 9 (SLR) has no entry of its own. Section 24 is settled on the statutory Form 1,
+                 at Part C, on the same liabilities Part B charges the cash reserve on — so the SLR
+                 position is read there rather than on a second screen that computed it from a
+                 differently drawn base and disagreed. -->
+            <a
+              class="gl-link"
+              [class.hidden]="!matchesRbiSearch('Form IX R408 Return on Assets and Liabilities balance sheet')"
+              routerLink="/rbi/form9-return"
+              (click)="rbiMenuOpen = false"
+            >
+              <fa-icon icon="percentage" class="gl-icon" style="color: #b45309"></fa-icon> Form IX — Assets &amp;
+              Liabilities (R408)
+            </a>
+          </div>
          <!-- CIMS / XBRL Returns -->
          <div class="gl-group">
            <div class="gl-group-title">CIMS / XBRL Returns</div>
@@ -167,7 +167,9 @@ export class ShellComponent implements OnInit, OnDestroy {
        url.includes('/clerk/withdrawal-request') ||
        url.includes('/clerk/my-disbursement-requests');
      const isElectionRoute = url.includes('/election');
-      this.hideShellLayout = isCashierOnly || isClerkRoute || isElectionRoute || this.isWithdrawalReviewUrl;
+      const isFdDashboardRoute = url.includes('/fd-dashboard');
+      this.hideShellLayout =
+        isCashierOnly || isClerkRoute || isElectionRoute || isFdDashboardRoute || this.isWithdrawalReviewUrl;
      this.cdr.detectChanges();
    };
    this.routeSub = this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => checkLayout());
@@ -180,10 +182,7 @@ export class ShellComponent implements OnInit, OnDestroy {
    });
  }

-  /**
-   * Toggles the current collapsed state of sidenav according to the emitted event.
-   * @param {boolean} event denotes state of sidenav
-   */
+  /** Toggles the current collapsed state of sidenav according to the emitted event. */
  toggleCollapse($event: boolean) {
    this.sidenavCollapsed = $event;
    this.cdr.detectChanges();
@@ -204,12 +203,15 @@ export class ShellComponent implements OnInit, OnDestroy {
    return /\/checker-inbox-and-tasks\/(share-)?withdrawal-requests\/\d+\/review/.test(this.router.url);
  }

-  /** ESC key — exit fullscreen at Clerk Dashboard / Election / review screen, restoring full shell header. */
+  /** ESC key — exit fullscreen at Clerk Dashboard / Election / FD Dashboard / review screen, restoring full shell header. */
  @HostListener('document:keydown.escape')
  onEscapeKey(): void {
    if (
      this.hideShellLayout &&
-      (this.router.url.includes('/clerk/') || this.router.url.includes('/election') || this.isWithdrawalReviewUrl)
+      (this.router.url.includes('/clerk/') ||
+        this.router.url.includes('/election') ||
+        this.router.url.includes('/fd-dashboard') ||
+        this.isWithdrawalReviewUrl)
    ) {
      this.hideShellLayout = false;
      this.cdr.detectChanges();
@@ -299,32 +299,38 @@
          </mat-icon>
          <a matLine>{{ 'labels.menus.Notifications' | translate }}</a>
        </mat-list-item>
-        <mat-list-item
-          [routerLink]="['/accounting/journal-entries/frequent-postings']"
-          [matTooltipPosition]="tooltipPosition"
-          matTooltip="{{ 'tooltips.Frequent Postings' | translate }}"
-          routerLinkActive="active-menu"
-          [routerLinkActiveOptions]="{ exact: false }"
-          *mifosxHasPermission="'SIDEBAR_FREQUENT_POSTINGS'"
-        >
-          <mat-icon matListIcon>
-            <fa-icon icon="sync" size="sm"></fa-icon>
-          </mat-icon>
-          <a matLine #frequentPostings>{{ 'labels.menus.Frequent Postings' | translate }}</a>
-        </mat-list-item>
-        <mat-list-item
-          [routerLink]="['/accounting/journal-entries/create']"
-          [matTooltipPosition]="tooltipPosition"
-          matTooltip="{{ 'tooltips.Create Journal Entry' | translate }}"
-          routerLinkActive="active-menu"
-          [routerLinkActiveOptions]="{ exact: false }"
-          *mifosxHasPermission="'SIDEBAR_JOURNAL_ENTRY'"
-        >
-          <mat-icon matListIcon>
-            <fa-icon icon="plus" size="sm"></fa-icon>
-          </mat-icon>
-          <a matLine #createJournalEntry>{{ 'labels.menus.Create Journal Entry' | translate }}</a>
-        </mat-list-item>
+        <!-- Frequent Postings / Create Journal Entry — hidden while disabled, see
+             accounting/disabled-features.ts -->
+        @if (!disabledFeatures.frequentPostings) {
+          <mat-list-item
+            [routerLink]="['/accounting/journal-entries/frequent-postings']"
+            [matTooltipPosition]="tooltipPosition"
+            matTooltip="{{ 'tooltips.Frequent Postings' | translate }}"
+            routerLinkActive="active-menu"
+            [routerLinkActiveOptions]="{ exact: false }"
+            *mifosxHasPermission="'SIDEBAR_FREQUENT_POSTINGS'"
+          >
+            <mat-icon matListIcon>
+              <fa-icon icon="sync" size="sm"></fa-icon>
+            </mat-icon>
+            <a matLine #frequentPostings>{{ 'labels.menus.Frequent Postings' | translate }}</a>
+          </mat-list-item>
+        }
+        @if (!disabledFeatures.createJournalEntries) {
+          <mat-list-item
+            [routerLink]="['/accounting/journal-entries/create']"
+            [matTooltipPosition]="tooltipPosition"
+            matTooltip="{{ 'tooltips.Create Journal Entry' | translate }}"
+            routerLinkActive="active-menu"
+            [routerLinkActiveOptions]="{ exact: false }"
+            *mifosxHasPermission="'SIDEBAR_JOURNAL_ENTRY'"
+          >
+            <mat-icon matListIcon>
+              <fa-icon icon="plus" size="sm"></fa-icon>
+            </mat-icon>
+            <a matLine #createJournalEntry>{{ 'labels.menus.Create Journal Entry' | translate }}</a>
+          </mat-list-item>
+        }
        <mat-list-item
          [routerLink]="['/accounting/chart-of-accounts']"
          [matTooltipPosition]="tooltipPosition"
@@ -33,6 +33,7 @@ import { MatIcon } from '@angular/material/icon';
 import { MatLine } from '@angular/material/grid-list';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { remittanceConfig } from '../../../remittances/remittance.config';
+import { DISABLED_ACCOUNTING_FEATURES } from '../../../accounting/disabled-features';
 import { environment } from '../../../../environments/environment';

 import { catchError, finalize, of, take } from 'rxjs';
@@ -81,6 +82,8 @@ export class SidenavComponent implements OnInit, AfterViewInit {
  frequentActivities: any[] = frequentActivities;
  /** Whether remittance feature is enabled */
  mifosRemittanceEnabled = remittanceConfig.isRemittanceEnabled;
+  /** Accounting features switched off for this installation — see accounting/disabled-features.ts. */
+  disabledFeatures = DISABLED_ACCOUNTING_FEATURES;
  /** Whether Superset Analytics is enabled */
  supersetEnabled = environment.supersetEnabled;

@@ -20,7 +20,7 @@
      <div class="t-live"></div>
      &nbsp;LIVE
    </div>
-    <div class="t-chip">Branch:&nbsp;<strong>HO</strong></div>
+    <div class="t-chip">Branch:&nbsp;<strong>{{ officeLabel }}</strong></div>
    <div class="t-chip">
      Date:&nbsp;<strong>{{ today | date: 'dd MMM yyyy' }}</strong>
    </div>
--- a/Show More
+++ b/Show More