fix(bank-calendar): follow Admin > Working Days for weekly offs

The Bank Calendar never read the Working Days setting. It hard-coded Mon-Sat as working days and always marked only Sundays and the 2nd and 4th Saturday as off, so unticking Saturday (or any weekday) in Admin > Working Days changed nothing on the calendar. - Load the setting from /workingdays and parse its recurrence (BYDAY=MO,TU,...). Until it answers, or if it cannot be read, the old Mon-Sat default stays in place. - A weekday left out of Working Days is off every week. When Saturday is left out, every Saturday is off; when it is a working day, the RBI rule still keeps the 2nd and 4th Saturday off. Sunday shows as a working day if Working Days ticks it. - Month and year counts, the Saturday stat card label ("2nd & 4th Sat" or "Saturdays"), the legend, tooltips and the month summary tags ("N Sat Off", "N Weekly Off") follow the same rule. Verified with prettier, eslint, tsc and ng build. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Merge latest feature/advanceLoanProduct into feature/merge-dds-advance-loan-into-dev-latest
2026-10-13 10:57:06 +05:30 · 2026-10-12 16:29:09 +05:30 · 2026-10-12 15:53:43 +05:30 · 2026-10-12 15:52:11 +05:30 · 2026-10-12 15:28:44 +05:30 · 2026-10-12 15:10:37 +05:30
586 changed files with 86215 additions and 10200 deletions
@@ -1,302 +0,0 @@
 kind: pipeline
 type: docker
 name: auto-deploy
 trigger:
  branch:
    - dev
  event:
    - push
 steps:
  # ============================================================
  # DOCKER BUILD & PUSH
  #
  # Angular build (npm ci + ng build) Dockerfile ke andar
  # multi-stage me hota hai, isliye alag build step nahi chahiye.
  # ============================================================
  - name: docker-build-push
    image: docker
    volumes:
      - name: dockersock
        path: /var/run/docker.sock
    commands:
      - |
        set -e
        # --------------------------------------------------------
        # Repository name comes from Drone
        # --------------------------------------------------------
        REPO="$${DRONE_REPO_NAME}"
        REPO="$$(echo "$$REPO" | tr '[:upper:]' '[:lower:]')"
        IMAGE="harbor.lincpay:8082/lincpay/$$REPO:$${DRONE_BUILD_NUMBER}"
        echo "=========================================="
        echo "DOCKER BUILD & PUSH"
        echo "=========================================="
        echo "Repository : $$REPO"
        echo "Build      : $${DRONE_BUILD_NUMBER}"
        echo "Image      : $$IMAGE"
        echo "=========================================="
        # --------------------------------------------------------
        # Harbor login
        # --------------------------------------------------------
        echo 'QVgW5QbqlKKtBU2dYApTY28Dd6J36GK3' | \
          docker login harbor.lincpay:8082 \
          -u 'robot$lincpay+drone' \
          --password-stdin
        # --------------------------------------------------------
        # Build
        # --------------------------------------------------------
        echo "Building Docker image..."
        docker build \
          -t "$$IMAGE" \
          .
        # --------------------------------------------------------
        # Push
        # --------------------------------------------------------
        echo "Pushing Docker image..."
        docker push "$$IMAGE"
        echo "Docker image pushed successfully."
  # ============================================================
  # DEPLOY
  # ============================================================
  - name: deploy
    image: docker
    volumes:
      - name: dockersock
        path: /var/run/docker.sock
      - name: envfiles
        path: /platform-env
    commands:
      - |
        set -e
        # ========================================================
        # REPOSITORY / SERVICE / IMAGE
        # ========================================================
        REPO="$${DRONE_REPO_NAME}"
        REPO="$$(echo "$$REPO" | tr '[:upper:]' '[:lower:]')"
        SERVICE_NAME="$${REPO}_app"
        IMAGE="harbor.lincpay:8082/lincpay/$$REPO:$${DRONE_BUILD_NUMBER}"
        echo "=========================================="
        echo "DEPLOYMENT"
        echo "=========================================="
        echo "Repository : $$REPO"
        echo "Service    : $$SERVICE_NAME"
        echo "Image      : $$IMAGE"
        echo "Placement  : node.labels.environment == dev2"
        echo "=========================================="
        # ========================================================
        # VALIDATION
        # ========================================================
        if [ -z "$$REPO" ]; then
          echo "ERROR: DRONE_REPO_NAME is empty."
          exit 1
        fi
        if [ -z "$$SERVICE_NAME" ]; then
          echo "ERROR: Service name is empty."
          exit 1
        fi
        if [ -z "$$IMAGE" ]; then
          echo "ERROR: Docker image is empty."
          exit 1
        fi
        echo "Repository verified : $$REPO"
        echo "Service verified    : $$SERVICE_NAME"
        echo "Image verified      : $$IMAGE"
        # ========================================================
        # HARBOR LOGIN
        #
        # Zaroori hai taaki --with-registry-auth worker node (dev2) ko
        # valid Harbor credentials propagate kare — warna cross-node pull
        # "No such image" / "no basic auth credentials" se fail hota hai.
        # ========================================================
        echo 'QVgW5QbqlKKtBU2dYApTY28Dd6J36GK3' | \
          docker login harbor.lincpay:8082 \
          -u 'robot$lincpay+drone' \
          --password-stdin
        # ========================================================
        # EXISTING SERVICE
        # ========================================================
        if docker service ls --format '{{.Name}}' | grep -Fxq "$$SERVICE_NAME"; then
          echo ""
          echo "=========================================="
          echo "EXISTING SERVICE"
          echo "=========================================="
          echo "Service: $$SERVICE_NAME"
          # ------------------------------------------------------
          # Check whether dev constraint already exists
          # ------------------------------------------------------
          CONSTRAINT_EXISTS=$$(docker service inspect "$$SERVICE_NAME" \
            --format '{{range .Spec.TaskTemplate.Placement.Constraints}}{{println .}}{{end}}' \
            | grep -Fx 'node.labels.environment == dev2' || true)
          # ------------------------------------------------------
          # Add constraint if missing
          # ------------------------------------------------------
          if [ -z "$$CONSTRAINT_EXISTS" ]; then
            echo "Constraint missing."
            echo "Adding: node.labels.environment == dev2"
            docker service update \
              --constraint-add 'node.labels.environment == dev2' \
              "$$SERVICE_NAME"
          else
            echo "Constraint already exists."
          fi
          # ------------------------------------------------------
          # Update image
          # ------------------------------------------------------
          echo "Updating service image..."
          docker service update \
            --image "$$IMAGE" \
            --replicas 1 \
            --with-registry-auth \
            "$$SERVICE_NAME"
        # ========================================================
        # NEW SERVICE
        # ========================================================
        else
          echo ""
          echo "=========================================="
          echo "NEW SERVICE"
          echo "=========================================="
          echo "Creating: $$SERVICE_NAME"
          # ------------------------------------------------------
          # Traefik rule
          #
          # Construct it without allowing Drone to consume
          # the shell backticks.
          # ------------------------------------------------------
          TRAEFIK_RULE='Host(`'$$REPO'.lincpay`)'
          echo "Traefik rule: $$TRAEFIK_RULE"
          # ------------------------------------------------------
          # Create service
          # ------------------------------------------------------
          docker service create \
            --name "$$SERVICE_NAME" \
            --network edge-network \
            --replicas 1 \
            --constraint 'node.labels.environment == dev2' \
            --with-registry-auth \
            --env-file /platform-env/global.env \
            --env-file /platform-env/dev.env \
            --label traefik.enable=true \
            --label "traefik.docker.network=edge-network" \
            --label "traefik.http.routers.$$REPO.rule=$$TRAEFIK_RULE" \
            --label "traefik.http.services.$$REPO.loadbalancer.server.port=80" \
            "$$IMAGE"
        fi
        # ========================================================
        # FINAL STATUS
        # ========================================================
        echo ""
        echo "=========================================="
        echo "FINAL SERVICE STATUS"
        echo "=========================================="
        docker service ls \
          --filter "name=$$SERVICE_NAME"
        echo ""
        echo "=========================================="
        echo "PLACEMENT CONSTRAINT"
        echo "=========================================="
        docker service inspect "$$SERVICE_NAME" \
          --format '{{json .Spec.TaskTemplate.Placement}}'
        echo ""
        echo "=========================================="
        echo "SERVICE TASKS"
        echo "=========================================="
        docker service ps "$$SERVICE_NAME" --no-trunc
        echo ""
        echo "=========================================="
        echo "DEPLOYMENT COMPLETE"
        echo "=========================================="
 volumes:
  # ============================================================
  # DOCKER SOCKET
  # ============================================================
  - name: dockersock
    host:
      path: /var/run/docker.sock
  # ============================================================
  # ENVIRONMENT FILES
  # ============================================================
  - name: envfiles
    host:
      path: /opt/platform/env
@@ -31,6 +31,8 @@
              "@angular/localize/init"
            ],
            "assets": [
              "src/favicon.ico",
              "src/apple-touch-icon.png",
              "src/assets/images/cbsnexora-favicon.svg",
              "src/robots.txt",
              "src/manifest.json",
@@ -39,6 +41,11 @@
                "glob": "**/*",
                "input": "node_modules/tinymce",
                "output": "assets/tinymce"
              },
              {
                "glob": "lottie.min.js",
                "input": "node_modules/lottie-web/build/player",
                "output": "assets/js"
              }
            ],
            "styles": [
@@ -69,8 +76,8 @@
              "budgets": [
                {
                  "type": "initial",
-                  "maximumWarning": "15mb",
+                  "maximumWarning": "18mb",
-                  "maximumError": "17mb"
+                  "maximumError": "20mb"
                },
                {
                  "type": "anyComponentStyle",
@@ -41,6 +41,7 @@
        "jspdf-autotable": "^5.0.2",
        "lightgallery": "^2.9.0",
        "lodash": "4.17.23",
        "lottie-web": "^5.13.0",
        "moment": "^2.29.4",
        "ngx-image-cropper": "^9.1.6",
        "ngx-mat-select-search": "^8.0.2",
@@ -18380,6 +18381,12 @@
        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
      }
    },
    "node_modules/lottie-web": {
      "version": "5.13.0",
      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
      "integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
      "license": "MIT"
    },
    "node_modules/lru-cache": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -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",
@@ -71,6 +71,7 @@
    "jspdf-autotable": "^5.0.2",
    "lightgallery": "^2.9.0",
    "lodash": "4.17.23",
    "lottie-web": "^5.13.0",
    "moment": "^2.29.4",
    "ngx-image-cropper": "^9.1.6",
    "ngx-mat-select-search": "^8.0.2",
@@ -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) {
+      this.glAccountData = accountOptionsForActivity(
-        case 100:
+        this.financialActivityData,
-        case 101:
+        financialActivityId,
-        case 102:
+        this.glAccountOptions
-        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;
      }
    });
  }
@@ -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) {
+      this.glAccountData = accountOptionsForActivity(
-        case 100:
+        this.financialActivityData,
-        case 101:
+        financialActivityId,
-        case 102:
+        this.glAccountOptions
-        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;
      }
    });
  }
@@ -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`] ?? [];
 }
@@ -279,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>
@@ -288,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>
@@ -353,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
+          <input matInput [matDatepicker]="dpSubFrom" [min]="minDate" [formControl]="submittedOnDateFrom" />
            matInput
            [matDatepicker]="dpSubFrom"
            [min]="minDate"
            [max]="maxDate"
            [formControl]="submittedOnDateFrom"
          />
          <mat-datepicker-toggle matSuffix [for]="dpSubFrom"></mat-datepicker-toggle>
          <mat-datepicker #dpSubFrom></mat-datepicker>
        </mat-form-field>
@@ -368,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>
@@ -539,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>
@@ -90,7 +90,7 @@ 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;
@@ -208,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();
@@ -11,6 +11,14 @@ import { Routes, RouterModule } from '@angular/router';
 import { Route } from '../core/route/route.service';
 import { AccountsListComponent } from './accounts-list/accounts-list.component';
 import { PartyMasterComponent } from '../deposits/party-master/party-master.component';
 import { CreatePartyComponent } from '../deposits/party-master/create-party/create-party.component';
 import { DueForClosureComponent } from '../deposits/party-master/due-for-closure/due-for-closure.component';
 import { DailyTransactionEntryComponent } from '../deposits/daily-transaction-entry/daily-transaction-entry.component';
 import { DdsReportsComponent } from '../deposits/dds-reports/dds-reports.component';
 import { ReportViewerComponent } from '../deposits/dds-reports/report-viewer/report-viewer.component';
 import { DdsAccountsComponent } from '../deposits/dds-accounts/dds-accounts.component';
 import { DdsAccountViewComponent } from '../deposits/dds-accounts/dds-account-view/dds-account-view.component';
 const routes: Routes = [
  Route.withShell([
@@ -41,6 +49,59 @@ const routes: Routes = [
            title: 'Recurring Deposit Accounts',
            breadcrumb: 'Recurring Deposit Accounts'
          }
        },
        {
          path: 'dds',
          data: { title: 'Daily Deposit Scheme — Party Master', breadcrumb: 'Party Master' },
          children: [
            { path: '', component: PartyMasterComponent },
            {
              path: 'create',
              component: CreatePartyComponent,
              data: { title: 'Create Party', breadcrumb: 'Create' }
            },
            {
              // Ahead of the :partyId routes, so "dueforclosure" is not read as a party id.
              path: 'dueforclosure',
              component: DueForClosureComponent,
              data: { title: 'Accounts Due for Closure', breadcrumb: 'Due for Closure' }
            },
            {
              path: ':partyId/edit',
              component: CreatePartyComponent,
              data: { title: 'Edit Party', breadcrumb: 'Edit' }
            }
          ]
        },
        {
          // The DDS accounts listed like Savings Accounts, each opening onto its transactions.
          path: 'dds-accounts',
          data: { title: 'DDS Accounts', breadcrumb: 'DDS Accounts' },
          children: [
            { path: '', component: DdsAccountsComponent },
            {
              path: ':partyId',
              component: DdsAccountViewComponent,
              data: { title: 'DDS Account', breadcrumb: 'Account', routeParamBreadcrumb: false }
            }
          ]
        },
        {
          path: 'dds-collection',
          component: DailyTransactionEntryComponent,
          data: { title: 'Daily Transaction Entry', breadcrumb: 'Daily Transaction Entry' }
        },
        {
          path: 'dds-reports',
          data: { title: 'DDS Reports', breadcrumb: 'DDS Reports' },
          children: [
            { path: '', component: DdsReportsComponent },
            {
              path: 'view/:reportName',
              component: ReportViewerComponent,
              data: { title: 'DDS Report', breadcrumb: 'reportName', routeParamBreadcrumb: 'reportName' }
            }
          ]
        }
      ]
    }
@@ -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 ═══
  /**
@@ -141,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';
@@ -95,6 +97,7 @@ import { TokenInterceptor as ZitadelTokenInterceptor } from './zitadel/token.int
 import { AuthService } from './zitadel/auth.service';
 import { environment } from '../environments/environment';
 import { CallbackComponent } from './zitadel/callback/callback.component';
 import { LoadingScreenComponent } from './shared/loading-screen/loading-screen.component';
 import { OAuthModule } from 'angular-oauth2-oidc';
 export class CustomMissingTranslationHandler implements MissingTranslationHandler {
@@ -176,6 +179,8 @@ export function HttpLoaderFactory(http: HttpClient) {
    BankCalendarModule,
    DeafModule,
    SavingsDailyInterestModule,
    FdDashboardModule,
    RdDashboardModule,
    DicgcModule,
    FiuModule,
    GlReportsModule,
@@ -193,6 +198,7 @@ export function HttpLoaderFactory(http: HttpClient) {
    AppRoutingModule,
    NotFoundComponent,
    CallbackComponent,
    LoadingScreenComponent,
    OAuthModule.forRoot()
  ],
  providers: [
@@ -44,8 +44,11 @@
    <div class="cal-stat sat2nd4th">
      <fa-icon icon="calendar-times" class="cal-stat__icon"></fa-icon>
      <div class="cal-stat__info">
-        <div class="cal-stat__value">{{ overallStats.sat2nd4th }}</div>
+        <div class="cal-stat__value">{{ overallStats.sat2nd4th + overallStats.weeklyOff }}</div>
-        <div class="cal-stat__label">2nd &amp; 4th Sat</div>
+        <div class="cal-stat__label">
          {{ saturdayIsWorkingDay ? '2nd & 4th Sat' : 'Saturdays'
          }}{{ overallStats.weeklyOff > 0 ? ' / Weekly Off' : '' }}
        </div>
      </div>
    </div>
    <div class="cal-stat holidays">
@@ -69,7 +72,11 @@
    <div class="cal-legend__items">
      <div class="cal-legend__item"><span class="cal-legend__dot working"></span> Working Day</div>
      <div class="cal-legend__item"><span class="cal-legend__dot sunday"></span> Sunday</div>
-      <div class="cal-legend__item"><span class="cal-legend__dot sat2nd4th"></span> 2nd / 4th Saturday</div>
+      <div class="cal-legend__item">
        <span class="cal-legend__dot sat2nd4th"></span>
        {{ saturdayIsWorkingDay ? '2nd / 4th Saturday' : 'Saturday'
        }}{{ overallStats.weeklyOff > 0 ? ' / Weekly Off' : '' }}
      </div>
      <div class="cal-legend__item"><span class="cal-legend__dot holiday"></span> Holiday</div>
      <div class="cal-legend__item"><span class="cal-legend__dot today"></span> Today</div>
    </div>
@@ -319,7 +326,9 @@
              [class.cal-grid__day--other]="!day.isCurrentMonth"
              [class.cal-grid__day--today]="day.isToday"
              [class.cal-grid__day--sunday]="day.isSunday && day.isCurrentMonth"
-              [class.cal-grid__day--sat2nd4th]="(day.is2ndSaturday || day.is4thSaturday) && day.isCurrentMonth"
+              [class.cal-grid__day--sat2nd4th]="
                (day.is2ndSaturday || day.is4thSaturday || day.isWeeklyOff) && day.isCurrentMonth
              "
              [class.cal-grid__day--holiday]="day.isHoliday && day.isCurrentMonth"
              [class.cal-grid__day--working]="day.isWorking && day.isCurrentMonth"
              [matTooltip]="
@@ -328,9 +337,11 @@
                  ? '2nd Saturday Off'
                  : day.is4thSaturday
                    ? '4th Saturday Off'
-                    : day.isSunday && day.isCurrentMonth
+                    : day.isWeeklyOff && day.isCurrentMonth
-                      ? 'Sunday'
+                      ? weekDays[day.dayOfWeek] + ' Off (Working Days)'
-                      : '')
+                      : day.isSunday && day.isCurrentMonth
                        ? 'Sunday'
                        : '')
              "
            >
              {{ day.isCurrentMonth ? day.date : '' }}
@@ -343,10 +354,15 @@
          @if (month.holidays > 0) {
            <span class="summary-tag holiday">{{ month.holidays }} Holiday{{ month.holidays > 1 ? 's' : '' }}</span>
          }
-          <span class="summary-tag sun">{{ month.sundays }} Sun</span>
+          @if (month.sundays > 0) {
            <span class="summary-tag sun">{{ month.sundays }} Sun</span>
          }
          @if (month.secondFourthSat > 0) {
            <span class="summary-tag sat">{{ month.secondFourthSat }} Sat Off</span>
          }
          @if (month.weeklyOff > 0) {
            <span class="summary-tag sat">{{ month.weeklyOff }} Weekly Off</span>
          }
        </div>
      </div>
    }
@@ -63,6 +63,8 @@ interface CalendarDay {
  isSunday: boolean;
  is2ndSaturday: boolean;
  is4thSaturday: boolean;
  /** Off every week because Admin > Working Days leaves this weekday out (Sunday aside). */
  isWeeklyOff: boolean;
  holidayName?: string;
  dayOfWeek: number; // 0=Sun, 6=Sat
 }
@@ -76,9 +78,23 @@ interface MonthData {
  nonWorkingDays: number;
  holidays: number;
  sundays: number;
  /** Saturdays off: the 2nd and 4th when Saturday is a working day, every one when it is not. */
  secondFourthSat: number;
  /** Other weekdays off every week because Working Days leaves them out. */
  weeklyOff: number;
 }
 /** Weekday codes in Date#getDay() order, as used by the /workingdays recurrence (BYDAY=MO,TU,...). */
 const DAY_CODES = [
  'SU',
  'MO',
  'TU',
  'WE',
  'TH',
  'FR',
  'SA'
 ];
@Component({
  selector: 'mifosx-bank-calendar',
  templateUrl: './bank-calendar.component.html',
@@ -118,7 +134,7 @@ export class BankCalendarComponent implements OnInit {
  ];
  workingDaysConfig: string[] = [];
  holidays: any[] = [];
-  overallStats = { working: 0, nonWorking: 0, holidays: 0, sundays: 0, sat2nd4th: 0, totalDays: 0 };
+  overallStats = { working: 0, nonWorking: 0, holidays: 0, sundays: 0, sat2nd4th: 0, weeklyOff: 0, totalDays: 0 };
  // ───── Holiday list (office-wise) ─────
  offices: OfficeLite[] = [];
@@ -202,7 +218,8 @@ export class BankCalendarComponent implements OnInit {
  }
  private loadWorkingDays() {
-    // Default Indian banking working days: Mon-Sat (Sun off, 2nd & 4th Sat off)
+    // Default Indian banking working days: Mon-Sat (Sun off, 2nd & 4th Sat off), used until
    // Admin > Working Days answers, or if it cannot be read.
    this.workingDaysConfig = [
      'MO',
      'TU',
@@ -215,6 +232,19 @@ export class BankCalendarComponent implements OnInit {
    this.buildCalendar();
    this.rebuildHolidayRows();
    // The calendar has to agree with Admin > Working Days: a weekday unticked there is off every
    // week here too.
    this.organizationService.getWorkingDays().subscribe({
      next: (data: any) => {
        const configured = this.parseWorkingDays(data?.recurrence);
        if (configured.length > 0) {
          this.workingDaysConfig = configured;
          this.buildCalendar();
        }
      },
      error: () => {}
    });
    // Pull offices then fan-out a per-office holiday fetch so each office's
    // calendar entries are surfaced in the list panel (calendar grid still
    // unions everything for the year-at-a-glance view).
@@ -273,6 +303,23 @@ export class BankCalendarComponent implements OnInit {
    });
  }
  /** Weekday codes out of a recurrence such as "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR". */
  private parseWorkingDays(recurrence: string | undefined): string[] {
    const byDay = /BYDAY=([^;]*)/.exec(recurrence || '');
    if (!byDay) {
      return [];
    }
    return byDay[1]
      .split(',')
      .map((d) => d.trim().toUpperCase())
      .filter((d) => DAY_CODES.includes(d));
  }
  /** True when Admin > Working Days counts Saturday as a working day (so only the 2nd and 4th are off). */
  get saturdayIsWorkingDay(): boolean {
    return this.workingDaysConfig.includes('SA');
  }
  /** Flatten the holidays array into a presentable list with office labels. */
  private rebuildHolidayRows(): void {
    this.holidayRows = this.holidays.map((h: any) => {
@@ -511,7 +558,15 @@ export class BankCalendarComponent implements OnInit {
  buildCalendar() {
    this.months = [];
-    this.overallStats = { working: 0, nonWorking: 0, holidays: 0, sundays: 0, sat2nd4th: 0, totalDays: 0 };
+    this.overallStats = {
      working: 0,
      nonWorking: 0,
      holidays: 0,
      sundays: 0,
      sat2nd4th: 0,
      weeklyOff: 0,
      totalDays: 0
    };
    for (let m = 0; m < 12; m++) {
      const monthData = this.buildMonth(m, this.currentYear);
@@ -521,6 +576,7 @@ export class BankCalendarComponent implements OnInit {
      this.overallStats.holidays += monthData.holidays;
      this.overallStats.sundays += monthData.sundays;
      this.overallStats.sat2nd4th += monthData.secondFourthSat;
      this.overallStats.weeklyOff += monthData.weeklyOff;
    }
    this.overallStats.totalDays = this.overallStats.working + this.overallStats.nonWorking;
  }
@@ -552,6 +608,7 @@ export class BankCalendarComponent implements OnInit {
    let holidayCount = 0;
    let sundayCount = 0;
    let sat2nd4thCount = 0;
    let weeklyOffCount = 0;
    // Previous month padding
    const prevMonthDays = new Date(year, month, 0).getDate();
@@ -567,6 +624,7 @@ export class BankCalendarComponent implements OnInit {
        isSunday: false,
        is2ndSaturday: false,
        is4thSaturday: false,
        isWeeklyOff: false,
        dayOfWeek: (startDayOfWeek - i - 1 + 7) % 7
      });
    }
@@ -576,24 +634,29 @@ export class BankCalendarComponent implements OnInit {
    for (let d = 1; d <= daysInMonth; d++) {
      const date = new Date(year, month, d);
      const dow = date.getDay();
      const isSunday = dow === 0;
      const isSaturday = dow === 6;
      const isWorkingWeekday = this.workingDaysConfig.includes(DAY_CODES[dow]);
      const isSunday = dow === 0 && !isWorkingWeekday;
      if (isSaturday) saturdayCount++;
-      const is2ndSat = isSaturday && saturdayCount === 2;
+      // RBI: when Saturday is a working day the 2nd and 4th are still off. When Working Days leaves
-      const is4thSat = isSaturday && saturdayCount === 4;
+      // Saturday out, every Saturday is a weekly off instead.
      const is2ndSat = isSaturday && isWorkingWeekday && saturdayCount === 2;
      const is4thSat = isSaturday && isWorkingWeekday && saturdayCount === 4;
      const isWeeklyOff = dow !== 0 && !isWorkingWeekday;
      const isToday = date.toDateString() === today.toDateString();
      // Check if holiday
      const holiday = this.getHolidayForDate(year, month, d);
      const isHoliday = !!holiday;
-      // Non-working: Sunday, 2nd Sat, 4th Sat, or holiday
+      // Non-working: Sunday, 2nd Sat, 4th Sat, a weekly off from Working Days, or holiday
-      const isNonWorking = isSunday || is2ndSat || is4thSat || isHoliday;
+      const isNonWorking = isSunday || is2ndSat || is4thSat || isWeeklyOff || isHoliday;
      if (isSunday) sundayCount++;
-      if (is2ndSat || is4thSat) sat2nd4thCount++;
+      if (is2ndSat || is4thSat || (isSaturday && isWeeklyOff)) sat2nd4thCount++;
      if (isWeeklyOff && !isSaturday) weeklyOffCount++;
      if (isHoliday) holidayCount++;
      if (isNonWorking) {
@@ -613,6 +676,7 @@ export class BankCalendarComponent implements OnInit {
        isSunday,
        is2ndSaturday: is2ndSat,
        is4thSaturday: is4thSat,
        isWeeklyOff,
        holidayName: holiday?.name,
        dayOfWeek: dow
      });
@@ -632,6 +696,7 @@ export class BankCalendarComponent implements OnInit {
        isSunday: false,
        is2ndSaturday: false,
        is4thSaturday: false,
        isWeeklyOff: false,
        dayOfWeek: days.length % 7
      });
    }
@@ -645,7 +710,8 @@ export class BankCalendarComponent implements OnInit {
      nonWorkingDays: nonWorkingCount,
      holidays: holidayCount,
      sundays: sundayCount,
-      secondFourthSat: sat2nd4thCount
+      secondFourthSat: sat2nd4thCount,
      weeklyOff: weeklyOffCount
    };
  }
@@ -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')}`;
  }
@@ -107,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">
@@ -337,6 +352,51 @@
        </div>
      }
      <!-- Interest waiting to be posted as this branch closes. Posting runs as part of the close, so
           anything unapproved stops it: the branch sees here what it has to approve and where, rather
           than finding out from a refusal after filling in the whole count. -->
      @if (preview?.fdInterestDue?.length) {
        <div class="bd-calc bd-calc--fd">
          <div class="bd-calc__head">
            <mat-icon>savings</mat-icon>
            <strong>Fixed deposit interest due today</strong>
          </div>
          @for (d of preview.fdInterestDue; track d.productId) {
            <div class="bd-calc__row">
              <span>
                {{ d.productName }} · {{ d.fdType }} · {{ d.accountCount }} deposit(s)
                @if (d.reportStatus === 'APPROVED' || d.reportStatus === 'POSTED') {
                  <span class="bd-fd-ok">{{ d.reportStatus }}</span>
                } @else {
                  <span class="bd-fd-pending">{{ d.reportStatus === 'NONE' ? 'NO REPORT' : d.reportStatus }}</span>
                }
              </span>
              <span class="bd-calc__amt">₹{{ d.totalInterest | number: '1.2-2' }}</span>
            </div>
          }
        </div>
      }
      @if (preview?.fdInterestPending?.length) {
        <div class="bd-warn">
          <mat-icon>warning</mat-icon>
          <div>
            <strong>The day cannot be closed yet.</strong> Fixed deposit interest is not approved for:
            {{ preview.fdInterestPending.join(', ') }}. Approve it under Reports → FD Interest Posting Reports, then
            close the day. The user who generated a report cannot approve it.
          </div>
        </div>
      }
      @if (preview?.savingsInterestPending?.length) {
        <div class="bd-warn">
          <mat-icon>warning</mat-icon>
          <div>
            <strong>The day cannot be closed yet.</strong> Savings interest is not approved for:
            {{ preview.savingsInterestPending.join(', ') }}. Approve it under Reports → Interest Posting Reports, then
            close the day.
          </div>
        </div>
      }
      <!-- What every cash point under this branch is actually holding right now, fetched
           automatically — so closing the day doesn't mean separately checking Vault Position and
           every cashier's own Cashier Position screen by hand. -->
@@ -195,6 +195,75 @@
    font-size: 11px;
    color: #94a3b8;
  }
  /* Names the block, for the interest panels that sit beside the cash arithmetic. */
  &__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    color: #0d1b2a;
    mat-icon {
      font-size: 18px;
      width: 18px;
      height: 18px;
      color: #1d4ed8;
    }
  }
 }
 /* Interest is money leaving as the day closes, not cash counted in the drawer. */
 .bd-calc--fd {
  border-left: 3px solid #1d4ed8;
 }
 .bd-fd-ok,
 .bd-fd-pending {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
 }
 .bd-fd-ok {
  background: #dcfce7;
  color: #15803d;
 }
 .bd-fd-pending {
  background: #fef3c7;
  color: #b45309;
 }
 /* Why the close will be refused, said before the count is filled in rather than after. */
 .bd-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 640px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #78350f;
  mat-icon {
    flex-shrink: 0;
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: #b45309;
  }
 }
 .bd-hint {
@@ -372,3 +441,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;
  }
 }
@@ -189,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 = '';
@@ -210,6 +227,7 @@ export class BranchDayComponent implements OnInit {
        this.canOperate = !!res?.canOperate;
        this.openDate = this.today;
        this.checkFirstOpenCashMigration();
        this.checkInterestReports();
      });
    this.service
@@ -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,
+    ExcessTransactionReportComponent
    ShareCollectionComponent
  ]
 })
 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> {
+   * Everything an Apply screen needs, in one call: `own` is this member's own unapplied receipts,
-    const suffix = clientId ? `?clientId=${clientId}` : '';
+   * ready to tick; `rows` is every other Share Collection receipt still available — unclaimed GL
-    return this.http.get(`/shareadvancecollection${suffix}`);
+   * 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`, {});
  }
@@ -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.
+   * 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
-   * Was deposits minus withdrawals, which is the counter's movement rather than the drawer's
+   * row's own `netAmount` rather than re-deriving it from today's legs.
   * 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.
   */
  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. -->
+                   is when the heading has scrolled away. Clicking anywhere on the row opens the full
-                  <tr [class]="'mw-row mw-row--' + r.myRole">
+                   slip -- every line, not just the first debit and first credit this table has room
-                    <td class="mw-vno">{{ r.voucherNo }}</td>
+                   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 ·
+              @if (isSlip) {
-              {{ isAccountDebit ? 'Enter beneficiary details' : 'Enter purchaser &amp; beneficiary details' }}
+                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,41 +108,91 @@ export interface CashierIssueDdDialogData {
      </div>
      <mat-dialog-content class="dd-dialog-body">
-        <!-- Draft & Financials Summary Card -->
+        <!--
-        <div class="dd-summary-card">
+          Slip running total.
-          <!-- The number the customer will actually see printed on the instrument. "Auto-Selected
+
          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>
          <!--
            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>
        } @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">
+            <div class="summary-col">
-            <span class="label">DD Number Being Issued</span>
+              <span class="label">DD Number Being Issued</span>
-            <strong class="dd-number-highlight">{{ data.leaflet.ddNumber }}</strong>
+              <strong class="dd-number-highlight">{{ data.leaflet.ddNumber }}</strong>
-            <span class="sublabel">{{ data.sponsorBankName || 'Sponsor Bank' }} · {{ data.branchName }}</span>
+              <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">
            <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>
        <!--
          The account funding the draft, stated before the form.
@@ -121,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
+                @if (isSlip) {
-                approves. No cash is taken at the counter.
+                  ₹{{ 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) {
+            @if (!isAccountDebit) {
-            <div class="form-section-title">Walk-in Purchaser Details</div>
+              <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"
+                  formControlName="payableAtBranch"
-                  placeholder="e.g. RAMESH CHANDRA"
+                  placeholder="e.g. FORT BRANCH"
                  maxlength="150"
                  style="text-transform: uppercase;"
                />
-                <mat-error *ngIf="form.get('walkinPurchaserName')?.hasError('required')"
+                <mat-error *ngIf="form.get('payableAtBranch')?.hasError('required')"
-                  >Purchaser name is required</mat-error
+                  >Payable Branch 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>
+                <mat-label>Payable At - City *</mat-label>
                <input
                  matInput
-                  formControlName="walkinPurchaserAadhaar"
+                  formControlName="payableAtCity"
-                  placeholder="12-digit Aadhaar"
+                  placeholder="e.g. MUMBAI"
-                  maxlength="12"
+                  maxlength="100"
                  style="text-transform: uppercase;"
                />
-                <mat-hint>Masked to last 4 digits before storage</mat-hint>
+                <mat-error *ngIf="form.get('payableAtCity')?.hasError('required')">Payable City is required</mat-error>
                <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>
-
+          </form>
-            <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>
      </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()">
+        <button mat-flat-button color="primary" [disabled]="activeForm.invalid" (click)="onSubmit()">
-          Save DD Details
+          {{ isSlip ? 'Save Slip Details' : 'Save DD Details' }}
        </button>
      </mat-dialog-actions>
    </div>
@@ -395,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;
      }
    `
  ]
 })
@@ -404,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
@@ -477,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
+                      @if (acTypLockedByToken && row === selectedRow) {
-                        class="ws-f__ctl"
+                        <span
-                        [(ngModel)]="row.acTyp"
+                          class="ws-f__ctl ws-f__ctl--locked"
-                        (click)="$event.stopPropagation()"
+                          title="Locked — filled from a token-driven request, not a normal account entry"
-                        (change)="
+                          >{{ acTypLockedLabel }}</span
-                          row.acTyp === 'GL' &&
+                        >
-                            row.typ !== 'Disbursement' &&
+                      } @else {
-                            row.typ !== 'Fund Transfer' &&
+                        <select
-                            row.typ !== 'Enter Bank Transfer' &&
+                          class="ws-f__ctl"
-                            (row.dbCr = 'Cr')
+                          [(ngModel)]="row.acTyp"
-                        "
+                          (click)="$event.stopPropagation()"
-                      >
+                          (change)="
-                        @for (a of acTypOptionsFor(row); track a) {
+                            row.acTyp === 'GL' &&
-                          <option [value]="a">{{ a }}</option>
+                              row.typ !== 'Disbursement' &&
-                        }
+                              row.typ !== 'Fund Transfer' &&
-                      </select>
+                              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)"
+                        [readonly]="
-                        [class.ws-f__ctl--readonly]="row.typ === 'DD' && !isDdAccountDebitRow(row)"
+                          (row.typ === 'DD' && !isDdAccountDebitRow(row)) || (acTypLockedByToken && row === selectedRow)
                        "
                        [class.ws-f__ctl--readonly]="
                          (row.typ === 'DD' && !isDdAccountDebitRow(row)) || (acTypLockedByToken && row === selectedRow)
                        "
                        [title]="
-                          isDdAccountDebitRow(row)
+                          acTypLockedByToken && row === selectedRow
-                            ? 'Member account the draft is funded from'
+                            ? 'Locked — filled from a token-driven request, not a normal account entry'
-                            : row.typ === 'DD'
+                            : isDdAccountDebitRow(row)
-                              ? 'Configured Sponsor DD Payable GL (Auto-selected)'
+                              ? 'Member account the draft is funded from'
-                              : 'Account number'
+                              : 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'"
+                          [placeholder]="isMultiDdRow(row) ? 'Per draft' : row.acTyp === 'SHR' ? '0' : '0.00'"
-                          [readonly]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
+                          [readonly]="
-                          [class.ws-amt-input--locked]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
+                            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,18 +511,27 @@
                          [disabled]="saving"
                          (click)="openIssueWalkinDd(row); $event.stopPropagation()"
                          [title]="
-                            isDdAccountDebitRow(row)
+                            isMultiDdRow(row)
-                              ? 'Auto-selects next available leaflet and opens the beneficiary form'
+                              ? 'Opens one beneficiary form per draft; DD numbers are allocated on submission'
-                              : 'Auto-selects next available leaflet and opens walk-in purchaser form'
+                              : 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">{{
-                            row.ddDetails ? 'edit_note' : 'post_add'
+                            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. -->
+                               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.ddDetails ? 'DD ' + row.ddDetails.ddNumber + ' · Edit Details' : 'Fill DD Details'
+                            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>
@@ -1523,23 +1616,50 @@
                        </div>
                        <div class="ws-f ws-f--actyp">
                          <label class="ws-f__lbl">AC. TP.</label>
-                          <select
+                          @if (acTypLockedByToken && row === selectedRow) {
-                            class="ws-f__ctl"
+                            <span
-                            [(ngModel)]="row.acTyp"
+                              class="ws-f__ctl ws-f__ctl--locked"
-                            (click)="$event.stopPropagation()"
+                              title="Locked — filled from a token-driven request, not a normal account entry"
-                            (change)="
+                              >{{ acTypLockedLabel }}</span
-                              row.acTyp === 'GL' &&
+                            >
-                                row.typ !== 'Disbursement' &&
+                          } @else {
-                                row.typ !== 'Fund Transfer' &&
+                            <select
-                                row.typ !== 'Enter Bank Transfer' &&
+                              class="ws-f__ctl"
-                                (row.dbCr = 'Cr')
+                              [(ngModel)]="row.acTyp"
-                            "
+                              (click)="$event.stopPropagation()"
-                          >
+                              (change)="
-                            @for (a of acTypOptionsFor(row); track a) {
+                                row.acTyp === 'GL' &&
-                              <option [value]="a">{{ a }}</option>
+                                  row.typ !== 'Disbursement' &&
-                            }
+                                  row.typ !== 'Fund Transfer' &&
-                          </select>
+                                  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>
@@ -1556,10 +1676,16 @@
                            [placeholder]="
                              row.typ === 'DD' ? ddGlMapping?.ddPayableGlCode || 'Auto GL' : 'Account number'
                            "
-                            [readonly]="row.typ === 'DD'"
+                            [readonly]="row.typ === 'DD' || (acTypLockedByToken && row === selectedRow)"
-                            [class.ws-f__ctl--readonly]="row.typ === 'DD'"
+                            [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>
@@ -1628,10 +1754,12 @@
                              [value]="row.amount ?? ''"
                              (input)="row.amount = +$any($event.target).value; syncShareLinkedAmounts()"
                              (click)="$event.stopPropagation()"
-                              [placeholder]="row.acTyp === 'SHR' ? '0' : '0.00'"
+                              [placeholder]="isMultiDdRow(row) ? 'Per draft' : row.acTyp === 'SHR' ? '0' : '0.00'"
-                              [readonly]="!isClerk && !!(activeWithdrawalRequest || activeClosureRequest)"
+                              [readonly]="
                                isMultiDdRow(row) || (!isClerk && !!(activeWithdrawalRequest || activeClosureRequest))
                              "
                              [class.ws-amt-input--locked]="
-                                !isClerk && !!(activeWithdrawalRequest || activeClosureRequest)
+                                isMultiDdRow(row) || (!isClerk && !!(activeWithdrawalRequest || activeClosureRequest))
                              "
                            />
                          </div>
@@ -1642,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')
@@ -1706,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"
@@ -1717,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">
@@ -1729,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>
@@ -1743,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>
@@ -1756,13 +1933,28 @@
                              [disabled]="saving"
                              (click)="openIssueWalkinDd(row); $event.stopPropagation()"
                              [title]="
-                                isDdAccountDebitRow(row)
+                                isMultiDdRow(row)
-                                  ? 'Auto-selects next available leaflet and opens the beneficiary form'
+                                  ? 'Opens one beneficiary form per draft; DD numbers are allocated on submission'
-                                  : 'Auto-selects next available leaflet and opens walk-in purchaser form'
+                                  : 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>
+                              <mat-icon style="font-size: 18px; width: 18px; height: 18px">{{
-                              <span>Fill DD Details</span>
+                                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`
      },
-      {
+      this.settlementMode === 'GL'
-        label: 'Linked savings account confirmed',
+        ? {
-        pass: !!this.account?.savingsAccountNumber,
+            label: 'Settlement GL Account selected',
-        detail: this.account?.savingsAccountNumber || 'No linked savings account — settlement cannot run automatically'
+            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: () => {
@@ -643,8 +643,9 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy, OnChanges
          this.createClientForm.get('degreeQualificationId')?.setValue('');
        }
      });
-    // Fetch all constitution options from code ID 17
+    // Constitution options by code NAME, never by id: code ids differ per tenant (on abc_bank id 17 is the empty
-    this.clientService.getCodeValuesById(17).subscribe((options) => {
+    // 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
@@ -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>
@@ -8,7 +8,14 @@
 import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, inject } from '@angular/core';
 import { forkJoin, catchError, of } from 'rxjs';
-import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule } from '@angular/forms';
+import {
  UntypedFormBuilder,
  UntypedFormGroup,
  Validators,
  FormsModule,
  AbstractControl,
  ValidationErrors
 } from '@angular/forms';
 import {
  MatDialog,
  MAT_DIALOG_DATA,
@@ -567,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],
@@ -616,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: [''],
@@ -739,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,
@@ -1009,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 {
@@ -1189,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) {
@@ -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 }
            },
            {
@@ -202,9 +202,14 @@
                <div>
                  <strong>Already available</strong>
                  <span class="ckyc-existing__source">from {{ existing.ADDRESS_PROOF.source }}</span>
                  @if (existing.ADDRESS_PROOF.previewUnavailable) {
                    <span class="ckyc-existing__warn">stored file unavailable</span>
                  }
                </div>
              </div>
-              @if (existing.ADDRESS_PROOF.previewUrl || existing.ADDRESS_PROOF.previewUrlBack) {
+              @if (
                (existing.ADDRESS_PROOF.previewUrl || existing.ADDRESS_PROOF.previewUrlBack) && isImage('ADDRESS_PROOF')
              ) {
                <div class="ckyc-existing__thumbs">
                  @if (existing.ADDRESS_PROOF.previewUrl) {
                    <img
@@ -222,6 +227,17 @@
                  }
                </div>
              }
              @if (existing.ADDRESS_PROOF.previewUrl) {
                <button
                  mat-stroked-button
                  type="button"
                  class="ckyc-existing__view"
                  (click)="openDocument('ADDRESS_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.ADDRESS_PROOF.name }}</span>
@@ -299,9 +315,12 @@
                <div>
                  <strong>Already available</strong>
                  <span class="ckyc-existing__source">from {{ existing.PHOTO_PROOF.source }}</span>
                  @if (existing.PHOTO_PROOF.previewUnavailable) {
                    <span class="ckyc-existing__warn">stored file unavailable</span>
                  }
                </div>
              </div>
-              @if (existing.PHOTO_PROOF.previewUrl || existing.PHOTO_PROOF.previewUrlBack) {
+              @if ((existing.PHOTO_PROOF.previewUrl || existing.PHOTO_PROOF.previewUrlBack) && isImage('PHOTO_PROOF')) {
                <div class="ckyc-existing__thumbs">
                  @if (existing.PHOTO_PROOF.previewUrl) {
                    <img
@@ -319,6 +338,17 @@
                  }
                </div>
              }
              @if (existing.PHOTO_PROOF.previewUrl) {
                <button
                  mat-stroked-button
                  type="button"
                  class="ckyc-existing__view"
                  (click)="openDocument('PHOTO_PROOF')"
                >
                  <fa-icon icon="eye"></fa-icon>
                  &nbsp;View document
                </button>
              }
              <div class="ckyc-existing__meta">
                <fa-icon icon="id-card"></fa-icon>
                <span>{{ existing.PHOTO_PROOF.name }}</span>
@@ -393,11 +423,25 @@
                <div>
                  <strong>Already available</strong>
                  <span class="ckyc-existing__source">from {{ existing.CLIENT_IMAGE.source }}</span>
                  @if (existing.CLIENT_IMAGE.previewUnavailable) {
                    <span class="ckyc-existing__warn">stored file unavailable</span>
                  }
                </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"
                  class="ckyc-existing__view"
                  (click)="openDocument('CLIENT_IMAGE')"
                >
                  <fa-icon icon="eye"></fa-icon>
                  &nbsp;View document
                </button>
              }
              <button
                mat-stroked-button
                type="button"
@@ -448,15 +492,29 @@
                <div>
                  <strong>Already available</strong>
                  <span class="ckyc-existing__source">from {{ existing.CLIENT_SIGNATURE.source }}</span>
                  @if (existing.CLIENT_SIGNATURE.previewUnavailable) {
                    <span class="ckyc-existing__warn">stored file unavailable</span>
                  }
                </div>
              </div>
-              @if (existing.CLIENT_SIGNATURE.previewUrl) {
+              @if (existing.CLIENT_SIGNATURE.previewUrl && isImage('CLIENT_SIGNATURE')) {
                <img
                  [src]="existing.CLIENT_SIGNATURE.previewUrl"
                  alt="Client signature"
                  class="ckyc-existing__thumb ckyc-existing__thumb--wide"
                />
              }
              @if (existing.CLIENT_SIGNATURE.previewUrl) {
                <button
                  mat-stroked-button
                  type="button"
                  class="ckyc-existing__view"
                  (click)="openDocument('CLIENT_SIGNATURE')"
                >
                  <fa-icon icon="eye"></fa-icon>
                  &nbsp;View document
                </button>
              }
              <div class="ckyc-existing__meta">
                <fa-icon icon="file-signature"></fa-icon>
                <span>{{ existing.CLIENT_SIGNATURE.name }}</span>
@@ -623,6 +623,35 @@
  }
 }
 /* Opens the uploaded artefact full size in a new tab. Sits directly under the thumbnail, and is
   the only way to inspect a PDF - which cannot render as an inline <img>. */
 .ckyc-existing__view {
  align-self: flex-start;
  color: #1d6fd0;
  border-color: #bcd8f5;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  &:hover {
    background: #eef6ff;
  }
 }
 /* Shown when a document row exists but its file could not be fetched from the content store,
   so "Already available" is not silently misleading. */
 .ckyc-existing__warn {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: #fdecec;
  border: 1px solid #f3c2c2;
  color: #a12b2b;
  font-size: 11px;
  font-weight: 600;
 }
 .ckyc-existing {
  display: flex;
  flex-direction: column;
@@ -36,11 +36,41 @@ interface ExistingArtefact {
   *  already writes/reads for address proof; now shared by the photo/identity proof too. */
  description?: string;
  fileCount?: number;
  /** 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;
 }
 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
 * is not rejected server-side:
 *  - 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.
 * 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 = [
  'png',
  'jpeg',
  'jpg'
 ];
 const DOCUMENT_EXTENSIONS = [
  ...IMAGE_EXTENSIONS,
  'pdf'
 ];
 /** Cards that render an inline <img>, so a PDF would not display in them. */
 const IMAGE_ONLY_KINDS: CkycDocKind[] = [
  'CLIENT_IMAGE',
  'CLIENT_SIGNATURE'
 ];
@Component({
  selector: 'mifosx-ckyc-tab',
  templateUrl: './ckyc-tab.component.html',
@@ -150,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();
@@ -157,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;
@@ -280,19 +355,29 @@ export class CkycTabComponent implements OnInit, OnDestroy {
            present: true,
            source: 'Client registration',
            name: signatureDoc.fileName || 'Client signature',
-            documentId: signatureDoc.id
+            documentId: signatureDoc.id,
            mimeType: signatureDoc.type
          };
-          // Fetch blob for preview
+          // 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
-            .getClientSignatureImage(this.clientId, signatureDoc.id)
+            .downloadClientDocument(this.clientId, String(signatureDoc.id), true)
            .pipe(takeUntil(this.destroy$))
            .subscribe({
              next: (blob: any) => {
-                if (blob) {
+                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: () => undefined
+              error: () => {
                this.existing.CLIENT_SIGNATURE.previewUnavailable = true;
              }
            });
        }
@@ -364,6 +449,7 @@ export class CkycTabComponent implements OnInit, OnDestroy {
        const list = Array.isArray(docs) ? docs : [];
        if (!list.length) return;
        this.existing[kind].fileCount = list.length;
        this.existing[kind].previewUnavailable = false;
        const byNewest = (a: any, b: any) => b.id - a.id;
        const label = (d: any) => (d?.name || d?.fileName || '').toString();
@@ -372,6 +458,9 @@ export class CkycTabComponent implements OnInit, OnDestroy {
          [...list].filter((d: any) => /front/i.test(label(d))).sort(byNewest)[0] ||
          [...list].filter((d: any) => d.id !== back?.id).sort(byNewest)[0];
        // 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');
      });
@@ -388,12 +477,19 @@ export class CkycTabComponent implements OnInit, OnDestroy {
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (blob: any) => {
-          if (!blob) return;
+          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;
        },
-        error: () => undefined
+        // 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[kind].previewUnavailable = true;
        }
      });
  }
@@ -452,6 +548,18 @@ export class CkycTabComponent implements OnInit, OnDestroy {
    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;
@@ -470,6 +578,66 @@ export class CkycTabComponent implements OnInit, OnDestroy {
    });
  }
  /** Extensions a given card can both store and render. */
  private allowedExtensions(kind: CkycDocKind): string[] {
    return IMAGE_ONLY_KINDS.includes(kind) ? IMAGE_EXTENSIONS : DOCUMENT_EXTENSIONS;
  }
  /**
   * Rejects a file the backend would refuse (or the card could not render) before it is uploaded,
   * so the user gets a clear message instead of a raw server error. Returns null when the file is
   * acceptable.
   */
  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)) {
      return `Unsupported file type ".${extension}". Allowed: ${allowed.map((e) => e.toUpperCase()).join(', ')}.`;
    }
    if (file.size > MAX_UPLOAD_BYTES) {
      const mb = (file.size / (1024 * 1024)).toFixed(1);
      return `File is ${mb} MB. The maximum allowed size is 5 MB.`;
    }
    if (file.size === 0) {
      return 'The selected file is empty.';
    }
    return null;
  }
  /**
   * 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');
    }
  }
  /** 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 } {
@@ -533,6 +701,10 @@ export class CkycTabComponent implements OnInit, OnDestroy {
    request$.pipe(takeUntil(this.destroy$)).subscribe({
      next: () => {
        this.uploading[documentType] = false;
        // 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);
      },
@@ -653,13 +825,22 @@ export class CkycTabComponent implements OnInit, OnDestroy {
    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;
+            if (photo) {
              this.existing.CLIENT_IMAGE.previewUrl = photo;
            } else {
              this.existing.CLIENT_IMAGE.previewUnavailable = true;
            }
          });
        break;
      case 'CLIENT_SIGNATURE':
@@ -672,11 +853,21 @@ export class CkycTabComponent implements OnInit, OnDestroy {
              ?.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
-              .getClientSignatureImage(this.clientId, doc.id)
+              .downloadClientDocument(this.clientId, String(doc.id), true)
              .pipe(takeUntil(this.destroy$))
-              .subscribe((blob: any) => {
+              .subscribe({
-                if (blob) this.existing.CLIENT_SIGNATURE.previewUrl = URL.createObjectURL(blob);
+                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;
@@ -690,10 +881,6 @@ export class CkycTabComponent implements OnInit, OnDestroy {
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
-    // Release object URLs
+    this.revokePreviewUrls();
    Object.values(this.existing).forEach((e) => {
      if (e.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(e.previewUrl);
      if (e.previewUrlBack?.startsWith('blob:')) URL.revokeObjectURL(e.previewUrlBack);
    });
  }
 }
@@ -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
+            A declaration is on record for this year, but one or more deposits still carry a tax group. Those accounts
-            deposits. Turn it off on those accounts, or tax will keep being deducted.
+            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>
-          }
+            <div class="f121__kv-row">
-          @if (declarationOnRecord && !acceptanceDateKnown) {
+              <span>Accepted on</span>
            <div class="f121__kv-row f121__kv-row--muted">
              <span>Acceptance date</span>
              <span>
-                Not captured — the declaration is treated as covering the whole year. A mid-year acceptance would change
+                {{ d.acceptedOn | date: 'd MMM y' }} — no TDS on interest credited from this day to 31 March. Interest
-                the figures below.
+                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 ──
+  // ── Declarations on record ──
-  declarationOnRecord = false;
+  /**
   * 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';
+  // ── Recording a declaration ──
-  declarationFy = '';
+  showDeclarationForm = false;
-  /**
+  savingDeclaration = false;
-   * The KYC step records only the year, not the date the branch accepted the
+  declarationError = '';
-   * declaration, so it has to be treated as covering the whole year. Surfaced on
+  newDeclaration = { acceptedOn: '', uin: '', estimatedIncome: null as number | null };
   * screen rather than hidden — a mid-year acceptance would change the figures.
   */
  acceptanceDateKnown = false;
  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 })[] = [];
+  private accountInputs: (TdsAccountInput & { meta: Form121AccountRow; taxLines: InterestCredit[] })[] = [];
-  /** Withheld-tax postings by FY, from the ledger. */
+  /** This customer's FD/RD interest received in savings, and TDS taken there, per year. */
-  private actualTdsByFy = new Map<string, number>();
+  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.declarationForm =
-    this.declarationKind = kyc?.form15Type === '15H' ? '15H' : '15G';
+      this.fy && FY_TAX_CONFIG[normaliseFy(this.fy)] ? declarationFormFor(this.fy, this.dateOfBirth) : '121';
    this.declarationForm = this.fy ? declarationFormFor(this.fy, this.dateOfBirth) : '121';
    this.declarationFy = kyc?.form15FY ?? '';
    this.acceptanceDateKnown = false;
  }
  /** 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);
+          taxLines.push({ date: iso, amount, accountNo: ref.accountNo });
          this.actualTdsByFy.set(txnFy, (this.actualTdsByFy.get(txnFy) ?? 0) + amount);
        }
      }
@@ -310,12 +316,13 @@ 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 +340,37 @@ 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 +408,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 loadPlatformYear(year: string): void {
-  private declarationForSelectedFy(): Declaration | null {
+    this.tdsService
-    if (!this.declarationOnRecord || !this.fy) {
+      .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 {
+    const kind = d.formType === '15H' ? '15H' : d.formType === '15G' ? '15G' : formKindFor(this.dateOfBirth, d.fy);
-      kind: this.declarationKind,
+    return { kind, acceptedOn: d.acceptedOn, fy: d.fy, uin: d.uin || undefined };
-      // No acceptance date on record — treated as covering the whole year.
+  }
-      acceptedOn: `${year.slice(0, 4)}-04-01`,
+
-      fy: year
+  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 +515,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 +574,12 @@ export class Form121TabComponent implements OnInit, OnDestroy {
  }
  /**
-   * A declaration is on record but deposit accounts are still set to withhold —
+   * A declaration is on record but a deposit still carries a stock Fineract tax group. Those
-   * the branch has not switched them off.
+   * 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'] : []
+              (savingAccounts | accountsFilter: 'saving' : 'all' : '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'] : []
            "
          ></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';
@@ -1142,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. -->
@@ -1207,9 +1247,7 @@
                    </div>
                    @if (!docScansLoading && !docScans.front && !docScans.back) {
-                      <div class="kyc-doc-scans__empty">
+                      <div class="kyc-doc-scans__empty">No scan is on file for this document. Upload one below.</div>
                        No scan is on file for this document. Upload one below.
                      </div>
                    }
                    <div class="kyc-doc-scans__sides">
@@ -1807,3 +1807,28 @@
    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;
 }
@@ -140,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: [''],
@@ -175,7 +182,10 @@ export class KycTabComponent implements OnInit, OnDestroy {
  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'];
+  readonly docScanSlots: ('front' | 'back')[] = [
    'front',
    'back'
  ];
  docScanOf(slot: 'front' | 'back') {
    return this.docScans[slot];
@@ -221,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.
@@ -446,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;
@@ -484,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()
    };
@@ -530,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()
      };
@@ -729,6 +769,7 @@ export class KycTabComponent implements OnInit, OnDestroy {
      dateFormat,
      riskCategory: this.kycForm.value.riskCategory || 1,
      ...declarationFields,
      ...this.buildRiskProfileFields(),
      ...this.buildExceptionFields()
    };
@@ -889,6 +930,7 @@ export class KycTabComponent implements OnInit, OnDestroy {
      dateFormat,
      riskCategory: this.kycForm.value.riskCategory || 1,
      ...receiptFields,
      ...this.buildRiskProfileFields(),
      ...this.buildExceptionFields()
    };
@@ -1417,7 +1459,10 @@ I further confirm that:
      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]) {
+      for (const old of [
        this.docScans.front,
        this.docScans.back
      ]) {
        if (old?.previewUrl) {
          URL.revokeObjectURL(old.previewUrl);
        }
@@ -1459,7 +1504,10 @@ I further confirm that:
      }
      this.docScans = sides;
-      for (const key of ['front', 'back'] as const) {
+      for (const key of [
        'front',
        'back'
      ] as const) {
        if (sides[key]) {
          this.loadScanPreview(sides[key]!);
        }
@@ -1520,7 +1568,9 @@ I further confirm that:
      error: (err: any) => {
        this.docScanUploading = null;
        this.docScanError =
-          err?.error?.defaultUserMessage || err?.error?.developerMessage || `Could not replace the ${label.toLowerCase()} side.`;
+          err?.error?.defaultUserMessage ||
          err?.error?.developerMessage ||
          `Could not replace the ${label.toLowerCase()} side.`;
      }
    });
  }
@@ -1703,7 +1753,10 @@ I further confirm that:
    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]) {
+    for (const side of [
      this.docScans.front,
      this.docScans.back
    ]) {
      if (side?.previewUrl) {
        URL.revokeObjectURL(side.previewUrl);
      }
@@ -569,8 +569,19 @@ export class ClientsService {
    return this.http.get(`/clients/${clientId}/documents`);
  }
-  downloadClientDocument(parentEntityId: string, documentId: string) {
+  /**
-    return this.http.get(`/clients/${parentEntityId}/documents/${documentId}/attachment`, { responseType: 'blob' });
+   * Fetches a client document's stored file.
   *
   * `silent` opts the request out of ErrorHandlerInterceptor's alert. Pass it when the caller
   * renders its own failure state - notably thumbnail fetches, where a `m_document` row whose file
   * is no longer in the content store returns 500 and would otherwise pop a modal the user can do
   * nothing about. The interceptor still rethrows, so the caller's error callback continues to run.
   */
  downloadClientDocument(parentEntityId: string, documentId: string, silent = false) {
    return this.http.get(`/clients/${parentEntityId}/documents/${documentId}/attachment`, {
      responseType: 'blob',
      ...(silent ? { context: new HttpContext().set(SILENT_HTTP_ERROR, true) } : {})
    });
  }
  uploadClientDocument(clientId: string, documentData: any) {
@@ -992,12 +1003,28 @@ export class ClientsService {
    return this.http.post(`/clients/${clientId}/entityclassification/${category}`, data);
  }
-  getClientCkyc(clientId: string): Observable<any> {
+  /**
-    return this.http.get(`/clients/${clientId}/ckyc`);
+   * Uploads a single CKYC artefact against the client, using the platform's generic document
   * endpoint (DocumentApiResource, POST /v1/{entityType}/{entityId}/documents). There is no
   * CKYC-specific document API on the backend - the earlier `/clients/{id}/ckyc/documents` path
   * was never implemented and returned 404.
   *
   * The multipart body must carry `file`, `name` and `description`; the caller builds those so the
   * stored document stays identifiable by CKYC artefact type. See ckyc-tab.component.ts.
   */
  uploadCkycDocument(clientId: string, formData: FormData): Observable<any> {
    return this.http.post(`/clients/${clientId}/documents`, formData);
  }
-  uploadCkycDocument(clientId: string, formData: FormData): Observable<any> {
+  /**
-    return this.http.post(`/clients/${clientId}/ckyc/documents`, formData);
+   * Replaces the content of an existing client document in place (DocumentApiResource PUT
   * /v1/{entityType}/{entityId}/documents/{documentId}), keeping the same document id.
   *
   * Used by the CKYC screen's "Upload new version" so a re-upload updates the existing artefact
   * rather than adding another row. Takes the same multipart body as the create call.
   */
  replaceClientDocument(clientId: string, documentId: string, formData: FormData): Observable<any> {
    return this.http.put(`/clients/${clientId}/documents/${documentId}`, formData);
  }
  /**
@@ -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;
@@ -109,13 +109,7 @@
              </button>
            }
          </div>
-          <input
+          <input #sideInput type="file" hidden accept="image/*,application/pdf" (change)="onFilePicked($event, slot)" />
            #sideInput
            type="file"
            hidden
            accept="image/*,application/pdf"
            (change)="onFilePicked($event, slot)"
          />
        </div>
      }
    </div>
@@ -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
+    // Resolved once and emitted in one place below — see the severity decision there for which of
-    // as an error and therefore surfaces as a centred modal rather than a corner toast.
+    // 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;
@@ -266,7 +266,7 @@ $color: #e2e4ec;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
-    padding: 16px 28px;
+    padding: 10px 18px;
  }
 }
@@ -282,21 +282,15 @@ $gray-700: #334155;
 /* ============================================================
   Main header (top 2-row navigation)
   --------------------------------------------------------------
-   Redesigned 2026 — clean, modern enterprise SaaS feel:
+   Compact, modern enterprise SaaS navigation:
-   • Both rows live on the same white surface separated only by a
+   • Height reduced to 32px per row (64px total) to save screen space.
-     hairline; r2 has a barely-there blue-50 wash so frequent vs
+   • Smooth horizontal scrolling prevents menu items from getting cut off.
-     secondary menus read at a glance without dark/light contrast.
+   • Compact typography, icons and paddings fit all banking modules cleanly.
   • Items are now equal-width "tabs" with NO vertical dividers
     between them (the old cell borders made it look spreadsheet-y).
   • Hover / active = a 3 px brand-coloured TOP bar + brand text +
     coloured icon. Reads instantly without colour-flooding the row.
   • Icons larger (12.5 px) and full-opacity always — easier to scan
     during demos. Caret is subtle and rotates on open.
   ============================================================ */
 .main-header {
  background: #fff;
-  border-bottom: 2.5px solid $brand;
+  border-bottom: 2px solid $brand;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 7%);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
  position: sticky;
  /* Sit directly under the sticky toolbar (32px tall) so both stay visible. */
@@ -306,19 +300,19 @@ $gray-700: #334155;
 }
 .nav-row {
-  height: 44px;
+  height: 32px;
  display: flex;
  align-items: stretch;
-  overflow: visible;
+  overflow: auto visible;
  position: relative;
  /* Outer frame; vertical dividers between cells are drawn as `border-right`
     on each `.ni` below. Switched away from the equal-column grid so each
     cell can size to its own label — long names (General Ledger, Documents
     Hub) no longer overflow and short ones (Approvals, HRM) no longer waste
     space. */
  border: 1px solid $gray-200;
  background: #fff;
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
 }
 .r2.nav-row {
@@ -334,25 +328,17 @@ $gray-700: #334155;
  background: #f8fafc;
 }
-// ===== Nav Item — modern tab style =====
+// ===== Nav Item — compact modern tab style =====
 // Typography spec — same family / size / weight / color for BOTH rows.
 .ni {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  gap: 7px;
+  gap: 2.5px;
  height: 100%;
  /* Each cell sizes to its own label (min-width: max-content) and grows
     to share any leftover row width. Short labels stay compact, long ones
     get the room they need — no overlap, no wasted gap. */
  flex: 1 0 auto;
-  min-width: max-content;
+  min-width: 0;
-  padding: 0 14px;
+  padding: 0 4px;
  /* Vertical divider between adjacent cells; outer frame is the row's
     own border, and the last cell drops its right border below. */
  border-right: 1px solid $gray-200;
  cursor: pointer;
  white-space: nowrap;
@@ -360,11 +346,11 @@ $gray-700: #334155;
    'IBM Plex Sans',
    -apple-system,
    sans-serif;
-  font-size: 12px;
+  font-size: 10px;
  font-weight: 500;
  color: #0a1a2e;
-  line-height: 1.3;
+  line-height: 1.2;
-  letter-spacing: 0.01em;
+  letter-spacing: -0.015em;
  text-decoration: none;
  user-select: none;
  transition:
@@ -373,17 +359,15 @@ $gray-700: #334155;
    box-shadow 0.15s ease;
  border-radius: 0;
  /* 3px accent strip that fills on hover / active (uses ::before so we
     don't reflow the row when toggling). */
  &::before {
    content: '';
    position: absolute;
-    left: 4px;
+    left: 2px;
-    right: 4px;
+    right: 2px;
    top: 0;
-    height: 3px;
+    height: 2px;
    background: transparent;
-    border-radius: 0 0 3px 3px;
+    border-radius: 0 0 2px 2px;
    transition: background 0.15s ease;
  }
@@ -410,17 +394,19 @@ $gray-700: #334155;
    outline-offset: -2px;
  }
  /* Last cell in a row sits flush against the row's own right edge, so
     drop its divider to avoid a double 2 px line. */
  &:last-child {
    border-right: none;
  }
  .ni-short {
    display: none;
  }
 }
 .ni-ico {
-  width: 12px;
+  width: 9.5px;
-  height: 12px;
+  height: 9.5px;
-  font-size: 12px;
+  font-size: 9.5px;
  color: $gray-500;
  flex-shrink: 0;
  transition: color 0.15s ease;
@@ -432,11 +418,12 @@ $gray-700: #334155;
 }
 .ni-caret {
-  width: 7px;
+  width: 5px;
-  height: 7px;
+  height: 5px;
-  font-size: 7px;
+  font-size: 5px;
  color: $gray-400;
  flex-shrink: 0;
  margin-left: 0.5px;
  transition:
    transform 0.18s ease,
    color 0.18s ease;
@@ -447,17 +434,89 @@ $gray-700: #334155;
  }
 }
-@media (width <= 1200px) {
+@media (width >= 1400px) {
  .ni {
-    padding: 0 8px;
+    padding: 0 6px;
-    gap: 5px;
+    gap: 3.5px;
    font-size: 10.8px;
    letter-spacing: 0;
  }
  .ni-ico {
    width: 10px;
    height: 10px;
    font-size: 10px;
  }
  .ni-caret {
    width: 5.5px;
    height: 5.5px;
    font-size: 5.5px;
    margin-left: 1px;
  }
 }
-@media (width <= 980px) {
+@media (width <= 1200px) {
  .ni {
    padding: 0 3px;
    gap: 2px;
    font-size: 9.8px;
    letter-spacing: -0.02em;
  }
  .ni-ico {
    width: 9px;
    height: 9px;
    font-size: 9px;
  }
  .ni-caret {
    width: 4.5px;
    height: 4.5px;
    font-size: 4.5px;
  }
 }
@media (width <= 1080px) {
  .ni {
    padding: 0 2.5px;
    gap: 1.5px;
    font-size: 9.4px;
    letter-spacing: -0.025em;
    .ni-full {
      display: none;
    }
    .ni-short {
      display: inline;
    }
  }
  .ni-ico {
    width: 8.5px;
    height: 8.5px;
    font-size: 8.5px;
  }
  .ni-caret {
    width: 4px;
    height: 4px;
    font-size: 4px;
  }
 }
@media (width <= 880px) {
  .nav-row {
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .ni {
    flex: 0 0 auto;
    padding: 0 6px;
-    gap: 4px;
+    gap: 3px;
    font-size: 10px;
  }
 }
@@ -699,21 +758,29 @@ $gray-700: #334155;
 // ===== Nav Dropdown Menus =====
 ::ng-deep .nav-dropdown {
-  border-radius: 8px !important;
+  border-radius: 6px !important;
  border: 1px solid $gray-200 !important;
-  box-shadow: 0 6px 24px rgb(0 0 0 / 10%) !important;
+  box-shadow: 0 4px 16px rgb(0 0 0 / 12%) !important;
-  min-width: 180px !important;
+  min-width: 170px !important;
-  padding: 4px 0 !important;
+  padding: 3px 0 !important;
-  margin-top: 2px !important;
+  margin-top: 1px !important;
  .mat-mdc-menu-item {
-    font-size: 12.5px !important;
+    font-size: 10.5px !important;
    font-weight: 500 !important;
-    height: 34px !important;
+    height: 25px !important;
-    min-height: 34px !important;
+    min-height: 25px !important;
-    padding: 0 14px !important;
+    padding: 0 6px !important;
    line-height: 25px !important;
    color: $gray-700 !important;
-    font-family: 'DM Sans', Roboto, sans-serif !important;
+    font-family: 'IBM Plex Sans', Roboto, sans-serif !important;
    white-space: nowrap !important;
    .menu-item-icon {
      font-size: 10.5px !important;
      margin-right: 5px !important;
      opacity: 0.8;
    }
    &:hover {
      background: $brand-hover !important;
@@ -728,39 +795,44 @@ $gray-700: #334155;
 }
 /* Deposits Mega Panel (inside mat-menu overlay) */
-.deposit-menu-grid {
+::ng-deep .deposit-menu-grid {
  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  gap: 4px 12px;
-  gap: 8px 24px;
+  padding: 6px 10px;
-  padding: 8px 12px;
+  min-width: 0;
-  min-width: 600px;
+  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
 }
-.deposit-menu-group {
+::ng-deep .deposit-menu-group {
  .deposit-group-title {
    font-weight: 700;
-    font-size: 11px;
+    font-size: 9.5px;
    text-transform: uppercase;
-    letter-spacing: 0.6px;
+    letter-spacing: 0.5px;
    color: #1074b9;
-    padding: 4px 16px 6px;
+    padding: 2px 6px 3px;
    margin-bottom: 2px;
-    border-bottom: 2px solid #1074b9;
+    border-bottom: 1.5px solid #1074b9;
    white-space: nowrap;
  }
 }
-/* NPA Mega Panel — 4 columns (Reports / Analysis / Classification / Recovery Management) */
+/* NPA Mega Panel — 3 columns */
-.npa-grid {
+::ng-deep .npa-grid {
-  grid-template-columns: repeat(4, minmax(200px, 1fr));
+  grid-template-columns: repeat(3, minmax(210px, 1fr));
-  min-width: 880px;
+  min-width: 0;
-  max-width: 96vw;
+  max-width: 100%;
  overflow-x: hidden;
 }
-/* Reconciliation Mega Panel — 5 columns, teal accent to match the icon palette */
+/* Reconciliation Mega Panel — 5 columns */
-.reconciliation-grid {
+::ng-deep .reconciliation-grid {
-  grid-template-columns: repeat(5, minmax(190px, 1fr));
+  grid-template-columns: repeat(5, minmax(170px, 1fr));
-  min-width: 1040px;
+  min-width: 0;
-  max-width: 96vw;
+  max-width: 100%;
  overflow-x: hidden;
  .deposit-group-title {
    color: #0d9488;
@@ -780,47 +852,49 @@ $gray-700: #334155;
 .gl-mega-menu {
  position: absolute;
-  top: 100px;
+  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
-  width: 860px;
+  width: 760px;
-  max-width: 95vw;
+  max-width: 94vw;
-  padding: 20px 24px;
+  max-height: 72vh;
-  box-shadow: 0 6px 24px rgb(0 0 0 / 22%);
+  overflow-y: auto;
-  border-radius: 0 0 10px 10px;
+  padding: 12px 16px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
  border-radius: 0 0 8px 8px;
  z-index: 1000;
-  border-top: 3px solid #0d47a1;
+  border-top: 2.5px solid #0d47a1;
 }
 .gl-mega-menu-header {
  display: flex;
  align-items: center;
-  gap: 10px;
+  gap: 8px;
-  margin-bottom: 14px;
+  margin-bottom: 8px;
-  padding-bottom: 12px;
+  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
  span {
-    font-size: 18px;
+    font-size: 14px;
    font-weight: 700;
    color: #0d47a1;
-    letter-spacing: 0.02em;
+    letter-spacing: 0.01em;
  }
 }
 .gl-mega-menu-header-icon {
-  font-size: 18px;
+  font-size: 14px;
  color: #0d47a1;
 }
 .gl-search {
  width: 100%;
-  padding: 10px 14px;
+  padding: 6px 10px;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
  border: 1px solid #d0d5dd;
-  border-radius: 6px;
+  border-radius: 5px;
-  font-size: 14px;
+  font-size: 12px;
  box-sizing: border-box;
  background: #f9fafb;
@@ -828,36 +902,37 @@ $gray-700: #334155;
    outline: none;
    border-color: #0d47a1;
    background: #fff;
-    box-shadow: 0 0 0 3px rgb(13 71 161 / 10%);
+    box-shadow: 0 0 0 2px rgb(13 71 161 / 10%);
  }
 }
 .gl-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
-  gap: 24px;
+  gap: 10px 16px;
 }
 .gl-group-title {
  font-weight: 700;
-  font-size: 11px;
+  font-size: 10px;
  text-transform: uppercase;
-  letter-spacing: 0.8px;
+  letter-spacing: 0.6px;
  color: #0d47a1;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
-  padding-bottom: 6px;
+  padding-bottom: 3px;
-  border-bottom: 2px solid #0d47a1;
+  border-bottom: 1.5px solid #0d47a1;
 }
 .gl-link {
  display: flex;
  align-items: center;
-  padding: 7px 6px;
+  padding: 3.5px 5px;
  text-decoration: none;
  color: #344054;
-  font-size: 13px;
+  font-size: 11.5px;
  line-height: 1.3;
  cursor: pointer;
-  border-radius: 5px;
+  border-radius: 4px;
  transition:
    background 0.15s,
    color 0.15s;
@@ -873,23 +948,21 @@ $gray-700: #334155;
 }
 .gl-icon {
-  width: 18px;
+  width: 14px;
-  margin-right: 8px;
+  margin-right: 5px;
  color: #667085;
-  font-size: 13px;
+  font-size: 11px;
  flex-shrink: 0;
  .gl-link:hover & {
    color: #0d47a1;
  }
 }
 // Marks a menu link as actually wired to a working screen/dialog (vs a still-unwired
 // placeholder) — a small green dot at the end of the row, so a reviewer can tell at a glance
 // which items in a mega-menu are functional without having to click every one of them.
 .gl-link--live::after {
  content: '';
-  width: 6px;
+  width: 5px;
-  height: 6px;
+  height: 5px;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 50%;
@@ -899,9 +972,9 @@ $gray-700: #334155;
 /* RBI Mega Menu */
 .rbi-mega-menu {
-  width: 1100px;
+  width: 880px;
-  max-width: 97vw;
+  max-width: 94vw;
-  max-height: 80vh;
+  max-height: 72vh;
  overflow-y: auto;
  border-top-color: #b71c1c;
 }
@@ -909,7 +982,7 @@ $gray-700: #334155;
 .rbi-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
+  gap: 10px 16px;
 }
@keyframes move {
@@ -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. */
   * Toggles the current collapsed state of sidenav according to the emitted event.
   * @param {boolean} event denotes state of sidenav
   */
  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();
@@ -20,7 +20,9 @@
      <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>
@@ -522,7 +524,7 @@
 </mat-menu>
 <!-- Application User Help Menu -->
-<mat-menu #applicationMenu="matMenu" [overlapTrigger]="false">
+<mat-menu #applicationMenu="matMenu" [overlapTrigger]="false" class="t-user-menu" xPosition="before">
  <button mat-menu-item (click)="help()" tabindex="0">
    <mat-icon matListIcon>
      <fa-icon icon="question-circle" size="sm"></fa-icon>
@@ -390,6 +390,103 @@ $icon-hover-border: rgb(255 255 255 / 28%);
    max-height: 80vh;
    overflow-y: auto;
  }
  // Compact card per AI module
  .ai-card.mat-mdc-menu-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px !important;
    min-height: 52px !important;
    height: auto !important;
    border-radius: 9px !important;
    font-family: inherit !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    transition: background 0.16s ease !important;
    .mat-mdc-menu-item-text,
    .mdc-list-item__primary-text,
    .mdc-list-item__content {
      display: flex !important;
      align-items: flex-start !important;
      gap: 10px !important;
      width: 100% !important;
      white-space: normal !important;
      overflow: visible !important;
    }
    .ai-card-ic {
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 8px !important;
      font-size: 13px !important;
      flex-shrink: 0 !important;
      background: var(--c-bg) !important;
      color: var(--c-color) !important;
      margin: 0 !important;
      opacity: 1 !important;
      transition:
        background 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease !important;
      fa-icon {
        font-size: 13px !important;
        width: auto !important;
        min-width: auto !important;
        margin: 0 !important;
        color: inherit !important;
        opacity: 1 !important;
      }
    }
    .ai-card-body {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 !important;
      min-width: 0 !important;
      text-align: left !important;
      white-space: normal !important;
    }
    .ai-card-t {
      font-size: 12.5px !important;
      font-weight: 600 !important;
      color: #0f172a !important;
      line-height: 1.25 !important;
      white-space: normal !important;
      display: block !important;
    }
    .ai-card-d {
      font-size: 10.5px !important;
      color: #64748b !important;
      margin-top: 3px !important;
      line-height: 1.35 !important;
      white-space: normal !important;
      display: block !important;
    }
    &:hover {
      background: var(--c-bg) !important;
      .ai-card-ic {
        background: var(--c-hover) !important;
        color: #fff !important;
        transform: scale(1.06) !important;
      }
      .ai-card-t {
        color: var(--c-color) !important;
      }
    }
  }
 }
 .ai-menu-header {
@@ -488,70 +585,101 @@ $icon-hover-border: rgb(255 255 255 / 28%);
  font-size: 11px;
 }
-// Compact card per AI module
+// ===== User Account Dropdown Menu =====
-.ai-card.mat-mdc-menu-item {
+::ng-deep .t-user-menu.mat-mdc-menu-panel {
-  display: flex !important;
+  min-width: 190px !important;
-  align-items: flex-start;
+  border-radius: 10px !important;
-  gap: 10px;
+  box-shadow:
-  padding: 9px 10px;
+    0 10px 25px rgb(15 23 42 / 12%),
-  min-height: 0;
+    0 2px 6px rgb(15 23 42 / 6%) !important;
-  height: auto;
+  border: 1px solid #e2e8f0 !important;
-  border-radius: 9px;
+  padding: 6px 0 !important;
-  font-family: inherit;
+  background: #fff !important;
  line-height: 1.3;
  white-space: normal;
  transition: background 0.16s ease;
-  .ai-card-ic {
+  .mat-mdc-menu-content {
-    width: 32px;
+    padding: 4px 0 !important;
-    height: 32px;
+  }
-    display: inline-flex;
+
-    align-items: center;
+  .mat-mdc-menu-item {
-    justify-content: center;
+    height: 38px !important;
-    border-radius: 8px;
+    min-height: 38px !important;
-    font-size: 13px;
+    line-height: 38px !important;
-    flex-shrink: 0;
+    padding: 0 14px !important;
-    background: var(--c-bg);
+    display: flex !important;
-    color: var(--c-color);
+    align-items: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    transition:
-      background 0.16s ease,
+      background-color 0.15s ease,
-      color 0.16s ease,
+      color 0.15s ease !important;
      transform 0.16s ease;
  }
-  .ai-card-body {
+    .mat-mdc-menu-item-text {
-    display: flex;
+      display: inline-flex !important;
-    flex-direction: column;
+      align-items: center !important;
-    flex: 1;
+      width: 100% !important;
-    min-width: 0;
+      font-size: 13px !important;
-    text-align: left;
+      color: inherit !important;
-  }
+      font-weight: 500 !important;
  .ai-card-t {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
  }
  .ai-card-d {
    font-size: 10.5px;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
  }
  &:hover {
    background: var(--c-bg);
    .ai-card-ic {
      background: var(--c-hover);
      color: #fff;
      transform: scale(1.06);
    }
-    .ai-card-t {
+    mat-icon {
-      color: var(--c-color);
+      margin-right: 10px !important;
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #64748b !important;
      font-size: 14px !important;
      flex-shrink: 0 !important;
      fa-icon {
        font-size: 14px !important;
        width: 14px !important;
        min-width: 14px !important;
        text-align: center !important;
        margin-right: 0 !important;
        color: inherit !important;
        opacity: 1 !important;
      }
    }
    span {
      font-size: 13px !important;
      color: inherit !important;
      font-weight: 500 !important;
      white-space: nowrap !important;
    }
    &:hover {
      background-color: #f1f5f9 !important;
      color: #0d47a1 !important;
      mat-icon {
        color: #0d47a1 !important;
      }
    }
    &#logout {
      color: #dc2626 !important;
      border-top: 1px solid #f1f5f9 !important;
      margin-top: 4px !important;
      padding-top: 2px !important;
      mat-icon {
        color: #dc2626 !important;
      }
      &:hover {
        background-color: #fef2f2 !important;
        color: #b91c1c !important;
        mat-icon {
          color: #b91c1c !important;
        }
      }
    }
  }
 }
@@ -49,6 +49,7 @@ import { MatIcon } from '@angular/material/icon';
 import { NotificationsTrayComponent as NotificationsTrayComponent_1 } from '../../../shared/notifications-tray/notifications-tray.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { DocumentationLinksService } from 'app/shared/services/documentation-links.service';
 import { businessToday } from 'app/core/utils/business-today';
 /**
 * Toolbar component.
@@ -92,6 +93,14 @@ export class ToolbarComponent implements OnInit, AfterViewInit, AfterContentChec
  @ViewChild('templateAppMenu') templateAppMenu: TemplateRef<any>;
  @ViewChild('notificationsTray') notificationsTray: NotificationsTrayComponent;
  /** The signed-in user's office — this chip read "HO" for every login, branch staff included. */
  get officeLabel(): string {
    if (this.authenticationService.isHeadOfficeUser()) {
      return 'HO';
    }
    return this.authenticationService.getCredentials()?.officeName || '—';
  }
  /** Subscription to breakpoint observer for handset. */
  isHandset$: Observable<boolean> = this.breakpointObserver
    .observe(Breakpoints.Handset)
@@ -100,8 +109,10 @@ export class ToolbarComponent implements OnInit, AfterViewInit, AfterContentChec
  /** Sets the initial state of sidenav as collapsed. Not collapsed if false. */
  sidenavCollapsed = true;
-  /** Current date for top bar display */
+  /** The bank's "today" for the top bar — the business date when enabled, else the server date. */
-  today = new Date();
+  get today(): Date {
    return businessToday();
  }
  /** Last login time display */
  lastLoginTime = this.formatLastLogin();
@@ -0,0 +1,30 @@
 /**
 * 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 bank's "today": the business date while `enable-business-date` is on, the server's own date
 * while it is off. The server decides which (GET /branchday/today); the web app stores the answer
 * in `mifosXServerDate` at login and whenever the business date changes. Before that has happened
 * the browser clock is the only date there is, so it is the fallback.
 */
 export function businessToday(): Date {
  const stored = localStorage.getItem('mifosXServerDate');
  const match = stored ? /^(\d{4})-(\d{2})-(\d{2})$/.exec(stored) : null;
  if (!match) {
    return new Date();
  }
  // Built from parts so it is local midnight — new Date('yyyy-MM-dd') would be UTC midnight and
  // land on the previous day in any timezone behind UTC.
  return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
 }
 /** {@link businessToday} as yyyy-MM-dd. */
 export function businessTodayIso(): string {
  const d = businessToday();
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
 }
@@ -8,7 +8,10 @@
 <div class="cur-view">
  <!-- ─── Dormancy risk alert (only when subStatus has left Active) ──── -->
-  <mifosx-dormancy-alert-panel [accountData]="currentAccountData"></mifosx-dormancy-alert-panel>
+  <!-- Shown only when the account's product has Dormancy Alert = Yes -->
  @if (currentAccountData?.dormancyAlert) {
    <mifosx-dormancy-alert-panel [accountData]="currentAccountData"></mifosx-dormancy-alert-panel>
  }
  <!-- ─── Gradient hero header ─────────────────────────────────────── -->
  <header class="cur-hero">
@@ -59,16 +59,7 @@
                <span class="nx-mono">[{{ currentAccountData.currency.code }}]</span>
              </span>
            </div>
-            <div class="nx-row">
+            <!-- A current account earns no interest, so no interest rate is shown here; OD interest is under Overdraft. -->
              <span class="nx-row__label">{{ 'labels.inputs.Nominal Interest Rate' | translate }}</span>
              <span class="nx-row__value nx-row__value--amount">
                @if (currentAccountData.nominalAnnualInterestRate) {
                  {{ currentAccountData.nominalAnnualInterestRate | formatNumber }} %
                } @else {
                  0 %
                }
              </span>
            </div>
          } @else {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Field Officer' | translate }}</span>
@@ -102,17 +93,17 @@
                </span>
              </div>
            }
-            @if (currentAccountData.summary.totalInterestEarned >= 0) {
+            @if (currentAccountData.summary.totalWithdrawals) {
              <div class="nx-row">
-                <span class="nx-row__label">{{ 'labels.inputs.Total Interest Earned' | translate }}</span>
+                <span class="nx-row__label">{{ 'labels.inputs.Total Withdrawls' | translate }}</span>
-                <span class="nx-row__value nx-row__value--amount">
+                <span class="nx-row__value nx-row__value--amount nx-row__value--negative">
                  {{
-                    currentAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2'
+                    currentAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
-            @if (!currentAccountData.summary.totalDeposits && !(currentAccountData.summary.totalInterestEarned >= 0)) {
+            @if (!currentAccountData.summary.totalDeposits && !currentAccountData.summary.totalWithdrawals) {
              <div class="nx-empty">
                <fa-icon icon="inbox" class="nx-empty__ico"></fa-icon>
                <span>No activity yet.</span>
@@ -132,16 +123,7 @@
            <h3 class="nx-card__title">{{ 'labels.heading.Account Summary' | translate }}</h3>
          </header>
          <div class="nx-card__body">
-            @if (currentAccountData.summary.totalWithdrawals) {
+            <!-- A current account earns no interest: no interest earned/posted rows. OD interest has its own card. -->
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Total Withdrawls' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount nx-row__value--negative">
                  {{
                    currentAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.totalWithdrawalFees) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Withdrawals Fees' | translate }}</span>
@@ -160,89 +142,6 @@
                </span>
              </div>
            }
            @if (currentAccountData.summary.totalInterestEarned >= 0) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Interest Earned' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.totalInterestPosted) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Interest Posted' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.totalInterestPosted | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.interestNotPosted >= 0) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Interest Earned Not Posted' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.totalOverdraftInterestDerived) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Interest On Overdraft' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.totalOverdraftInterestDerived
                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.interestNotPosted < 0) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Overdraft Interest Not Posted' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.nominalAnnualInterestRate) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Nominal Interest Rate' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{ currentAccountData.nominalAnnualInterestRate | formatNumber }} %
                </span>
              </div>
            }
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Interest Compounding Period' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Interest Posting Period' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Interest Calculated Using' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.interestCalculationType.value | translateKey: 'catalogs' }}
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Days in Year' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
              </span>
            </div>
            @if (currentAccountData.withdrawalFee) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Withdrawal Fee' | translate }}</span>
@@ -289,37 +188,6 @@
                </span>
              </div>
            }
            @if (currentAccountData.allowOverdraft) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Overdraft Limit' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{ currentAccountData.overdraftLimit | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                </span>
              </div>
            }
            @if (currentAccountData.allowOverdraft) {
              <div class="nx-row">
                <span class="nx-row__label">
                  {{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}
                </span>
                <span class="nx-row__value">
                  {{
                    currentAccountData.minOverdraftForInterestCalculation
                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.minBalanceForInterestCalculation) {
              <div class="nx-row">
                <span class="nx-row__label">
                  {{ 'labels.inputs.Min Balance Required for Interest Calculation' | translate }}
                </span>
                <span class="nx-row__value">
                  {{ currentAccountData.minBalanceForInterestCalculation | formatNumber }}
                </span>
              </div>
            }
            @if (currentAccountData.minRequiredBalance) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Minimum Required Balance' | translate }}</span>
@@ -332,14 +200,6 @@
                <span class="nx-row__value">{{ currentAccountData.enforceMinRequiredBalance | yesNo }}</span>
              </div>
            }
            @if (currentAccountData.summary.lastInterestCalculationDate) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Interest Recalculation Date' | translate }}</span>
                <span class="nx-row__value">
                  {{ currentAccountData.summary.lastInterestCalculationDate | dateFormat }}
                </span>
              </div>
            }
            @if (currentAccountData.onHoldFunds) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.On Hold Funds' | translate }}</span>
@@ -350,14 +210,72 @@
                </span>
              </div>
            }
            @if (currentAccountData.withHoldTax) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Withhold Tax Group' | translate }}</span>
                <span class="nx-row__value">{{ currentAccountData.taxGroup.name }}</span>
              </div>
            }
          </div>
        </section>
        <!-- Overdraft: the only interest on a current account is what the customer pays on an OD. -->
        @if (currentAccountData.allowOverdraft) {
          <section class="nx-card">
            <header class="nx-card__head">
              <fa-icon icon="hand-holding-usd" class="nx-card__ico"></fa-icon>
              <h3 class="nx-card__title">Overdraft (OD)</h3>
            </header>
            <div class="nx-card__body">
              <div class="nx-row">
                <span class="nx-row__label">Maximum OD Limit (per product)</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{ currentAccountData.overdraftLimit | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                </span>
              </div>
              @if (currentAccountData.nominalAnnualInterestRateOverdraft) {
                <div class="nx-row">
                  <span class="nx-row__label">OD Interest Rate</span>
                  <span class="nx-row__value">
                    {{ currentAccountData.nominalAnnualInterestRateOverdraft | formatNumber }} % p.a.
                  </span>
                </div>
              }
              @if (currentAccountData.minOverdraftForInterestCalculation) {
                <div class="nx-row">
                  <span class="nx-row__label">Minimum OD for Interest</span>
                  <span class="nx-row__value">
                    {{
                      currentAccountData.minOverdraftForInterestCalculation
                        | currency: currency.code : 'symbol-narrow' : '1.2-2'
                    }}
                  </span>
                </div>
              }
              <div class="nx-row">
                <span class="nx-row__label">OD Interest Posting</span>
                <span class="nx-row__value">
                  {{ currentAccountData.interestPostingPeriodType?.value | translateKey: 'catalogs' }}
                </span>
              </div>
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Days in Year' | translate }}</span>
                <span class="nx-row__value">
                  {{ currentAccountData.interestCalculationDaysInYearType?.value | translateKey: 'catalogs' }}
                </span>
              </div>
              @if (currentAccountData.validForPeriod) {
                <div class="nx-row">
                  <span class="nx-row__label">Sanction Validity</span>
                  <span class="nx-row__value">{{ currentAccountData.validForPeriod }}</span>
                </div>
              }
              <div class="nx-row">
                <span class="nx-row__label">OD Interest Charged</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.totalOverdraftInterestDerived || 0
                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            </div>
          </section>
        }
      } @else {
        <section class="nx-card">
          <header class="nx-card__head">
@@ -54,8 +54,8 @@
          <mat-icon>account_balance</mat-icon>
        </div>
        <div class="bank-name-block">
-          <div class="bank-title">LincPay Co-operative Bank Ltd.</div>
+          <div class="bank-title">{{ bankName }}</div>
-          <div class="bank-subtitle">Current Account Statement</div>
+          <div class="bank-subtitle">{{ bankSubtitle }}</div>
        </div>
      </div>
      <div class="statement-label">
@@ -64,6 +64,25 @@
      </div>
    </div>
    <!-- Branch line — IFSC/MICR are how a UCB customer identifies which branch issued this, and are
         needed for NEFT/RTGS/cheque printing, so a real passbook always carries them. -->
    @if (branchName || ifscCode || micrCode) {
      <div class="branch-line">
        @if (branchName) {
          <span>{{ branchName }} Branch</span>
        }
        @if (branchAddress) {
          <span>{{ branchAddress }}</span>
        }
        @if (ifscCode) {
          <span>IFSC: {{ ifscCode }}</span>
        }
        @if (micrCode) {
          <span>MICR: {{ micrCode }}</span>
        }
      </div>
    }
    <!-- Account Details -->
    <div class="account-details-band">
      <div class="account-details-grid">
@@ -127,6 +127,18 @@ $header-text: #fff;
  }
 }
 // ─── Branch Identification Line ──────────────────────────────────────────────
 .branch-line {
  background: #e8edf5;
  border-bottom: 1px solid $border-color;
  padding: 6px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 11px;
  color: #4a5a7a;
 }
 // ─── Account Details Band ────────────────────────────────────────────────────
 .account-details-band {
  background: #f0f3f9;
@@ -11,11 +11,12 @@ import { Component, OnInit, OnDestroy, inject, ElementRef, ViewChild } from '@an
 import { ActivatedRoute } from '@angular/router';
 import { UntypedFormBuilder } from '@angular/forms';
 import { CurrencyPipe } from '@angular/common';
-import { Subject, takeUntil } from 'rxjs';
+import { Subject, takeUntil, catchError, forkJoin, of } from 'rxjs';
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
 import { OrganizationService } from '../../../organization/organization.service';
 import { Currency } from 'app/shared/models/general.model';
 import {
  CurrentAccountTransaction,
@@ -44,6 +45,7 @@ export class PassbookTabComponent implements OnInit, OnDestroy {
  private formBuilder = inject(UntypedFormBuilder);
  private settingsService = inject(SettingsService);
  private dateUtils = inject(Dates);
  private organizationService = inject(OrganizationService);
  private destroy$ = new Subject<void>();
@@ -60,6 +62,17 @@ export class PassbookTabComponent implements OnInit, OnDestroy {
  availableBalance: number = 0;
  activatedOnDate: any = null;
  /** Bank/branch letterhead — real values from Institution Profile + Branch Profile (Organization
   *  module) rather than a hardcoded name, so a printed passbook actually identifies which bank and
   *  branch issued it, the way a real UCB's core banking system does. Falls back to a generic label
   *  if the profile was never filled in, rather than showing a fabricated bank name. */
  bankName = 'Bank';
  bankSubtitle = 'Current Account Statement';
  branchName = '';
  branchAddress = '';
  ifscCode = '';
  micrCode = '';
  /** Transactions */
  allTransactions: CurrentAccountTransaction[] = [];
  filteredTransactions: CurrentAccountTransaction[] = [];
@@ -92,6 +105,33 @@ export class PassbookTabComponent implements OnInit, OnDestroy {
      fromDate: [''],
      toDate: ['']
    });
    this.loadLetterhead();
  }
  /** Institution Profile is the bank's own single record; Branch Profile is per-office. There is no
   *  office id on the current account data reaching this tab, and this deployment runs a single
   *  branch, so the first branch profile on record is the correct one here — a genuinely
   *  multi-branch deployment would need the account's own office id threaded through instead. */
  private loadLetterhead(): void {
    forkJoin({
      institution: this.organizationService.getInstitutionProfile().pipe(catchError(() => of(null))),
      branches: this.organizationService.getBranchProfiles().pipe(catchError(() => of([])))
    }).subscribe(({ institution, branches }: any) => {
      if (institution) {
        this.bankName = institution.passbookHeaderName || institution.bankName || institution.legalName || 'Bank';
        this.bankSubtitle = institution.licenseNumber
          ? `Lic. No. ${institution.licenseNumber}`
          : 'Current Account Statement';
      }
      const branch = Array.isArray(branches) ? branches[0] : null;
      if (branch) {
        this.branchName = branch.officeName || '';
        this.branchAddress = branch.address || '';
        this.ifscCode = branch.ifscCode || '';
        this.micrCode = branch.micrCode || '';
      }
    });
  }
  private computeRunningBalances(transactions: CurrentAccountTransaction[]): CurrentAccountTransaction[] {
@@ -279,6 +319,18 @@ export class PassbookTabComponent implements OnInit, OnDestroy {
      margin-top: 3px;
    }
    /* Branch identification line */
    .branch-line {
      background: #e8edf5;
      border-bottom: 1px solid #d0d7e3;
      padding: 5px 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px 16px;
      font-size: 9.5px;
      color: #4a5a7a;
    }
    /* Account details band */
    .account-details-band {
      background: #f0f3f9;
@@ -0,0 +1,381 @@
 <!--
  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="dialog-wrapper">
  <div class="dialog-header">
    <div class="header-icon">
      <mat-icon>account_balance_wallet</mat-icon>
    </div>
    <div class="header-text">
      <h2>Apply DDS Receipt</h2>
      <p>
        Agent <strong class="mono">{{ data.agentCode }}</strong> · {{ data.agentName }}
        @if (data.glCode) {
          · GL <strong class="mono">{{ data.glCode }}</strong>
        }
      </p>
    </div>
    <button type="button" mat-icon-button class="header-close" [mat-dialog-close]="false" aria-label="Close">
      <mat-icon>close</mat-icon>
    </button>
  </div>
  <mat-dialog-content class="dialog-body">
    @if (loading) {
      <div class="state-block">
        <mat-spinner diameter="30"></mat-spinner>
        <span>Loading entries and receipts…</span>
      </div>
    } @else {
      <!-- What the picked vouchers have to cover, and whether they do. -->
      <div class="sc-card">
        <div class="sc-row" [class.sc-ok]="canApply" [class.sc-bad]="pickedReceipts.size > 0 && difference !== 0">
          <div class="sc-left">
            <span class="sc-label">Collections up to {{ data.entryDate | date: 'dd/MM/yyyy' }}</span>
            <span class="sc-sub"
              >{{ pickedEntryCount }} {{ pickedEntryCount === 1 ? 'entry' : 'entries' }} to settle</span
            >
          </div>
          <div class="sc-right">
            <span class="sc-val">{{ required | number: '1.2-2' }}</span>
          </div>
        </div>
        <div
          class="sc-row sc-sep"
          [class.sc-ok]="canApply"
          [class.sc-bad]="pickedReceipts.size > 0 && difference !== 0"
        >
          <div class="sc-left">
            <span class="sc-label">Vouchers picked</span>
            <span class="sc-sub"
              >{{ pickedReceipts.size }} {{ pickedReceipts.size === 1 ? 'voucher' : 'vouchers' }}</span
            >
          </div>
          <div class="sc-right">
            <span
              class="sc-val"
              [class.sc-val-ok]="canApply"
              [class.sc-val-bad]="pickedReceipts.size > 0 && difference !== 0"
            >
              {{ received | number: '1.2-2' }}
            </span>
            @if (pickedReceipts.size > 0 && pickedDays.size > 0 && difference < 0) {
              <span class="sc-tag sc-tag-bad">Short {{ -difference | number: '1.2-2' }}</span>
            } @else if (pickedReceipts.size > 0 && pickedDays.size > 0 && difference > 0) {
              <span class="sc-tag sc-tag-bad">Over {{ difference | number: '1.2-2' }}</span>
            } @else if (canApply) {
              <span class="sc-tag sc-tag-ok">✓ Matches</span>
            }
          </div>
        </div>
        <div class="sc-total-row" [class.sc-total-ok]="canApply">
          <span class="sc-total-lbl">Total to Apply</span>
          <div class="sc-total-nums">
            <span class="sc-total-req mono">{{ required | number: '1.2-2' }}</span>
            <span class="sc-arrow">→</span>
            <span class="sc-total-got mono" [class.sc-total-got-ok]="canApply">{{ received | number: '1.2-2' }}</span>
            <span class="sc-status-pill" [class.sc-pill-ok]="canApply" [class.sc-pill-pending]="!canApply">
              {{ canApply ? '✓ Ready' : 'Pending' }}
            </span>
          </div>
        </div>
      </div>
      <!-- ── 1: the days the agent wrote down ──────────────────────────────────── -->
      <section class="slot">
        <header class="slot-head">
          <span class="slot-step">1</span>
          <div class="slot-title">
            <h3>Outstanding up to {{ data.entryDate | date: 'dd/MM/yyyy' }}</h3>
            <p>Everything the agent wrote down and has not handed in, day by day. Open a day to see its lines.</p>
          </div>
        </header>
        @if (days.length) {
          <ul class="options">
            @for (day of days; track day.date) {
              <li class="option" (click)="toggleOpen(day, $event)">
                <div class="option-main">
                  <span class="option-voucher mono">{{ day.date | date: 'dd/MM/yyyy' }}</span>
                  <span class="option-meta"
                    >{{ day.entries.length }} {{ day.entries.length === 1 ? 'entry' : 'entries' }}</span
                  >
                </div>
                <span class="option-amount mono">{{ day.total | number: '1.2-2' }}</span>
                <button
                  type="button"
                  class="option-info"
                  (click)="toggleOpen(day, $event)"
                  aria-label="Show the day's lines"
                >
                  <mat-icon>{{ openDay === day.date ? 'expand_less' : 'expand_more' }}</mat-icon>
                </button>
              </li>
              @if (openDay === day.date) {
                <li class="day-lines">
                  @if (day.entries.length > 8) {
                    <input
                      class="day-search"
                      type="text"
                      [(ngModel)]="daySearch"
                      placeholder="Search party code or name"
                      autocomplete="off"
                    />
                  }
                  <div class="day-scroll">
                    <table class="entries">
                      <tbody>
                        @for (entry of visibleEntries(day); track entry.id) {
                          <tr>
                            <td class="entry-code">{{ entry.partyCode }}</td>
                            <td class="entry-name">{{ entry.partyName }}</td>
                            <td>
                              {{ entry.transactionMode }}
                              @if (entry.advanceDays) {
                                · {{ entry.advanceDays }}d advance
                              }
                              @if (entry.arrearsDays) {
                                · {{ entry.arrearsDays }}d previous
                              }
                            </td>
                            <td class="num mono">{{ entry.amount | number: '1.2-2' }}</td>
                          </tr>
                        } @empty {
                          <tr>
                            <td colspan="4" class="entry-name">No line matches.</td>
                          </tr>
                        }
                      </tbody>
                    </table>
                  </div>
                </li>
              }
            }
          </ul>
        } @else {
          <p class="slot-empty">
            {{ data.agentName }} has nothing outstanding for {{ data.entryDate | date: 'dd/MM/yyyy' }}. Change the date
            on the screen to the day the entries were written.
          </p>
        }
      </section>
      <!-- ── 2: the cashier's receipts ─────────────────────────────────────────── -->
      <section class="slot">
        <header class="slot-head">
          <span class="slot-step">2</span>
          <div class="slot-title">
            <h3>DDS Cash Receipts</h3>
            <p>Tick the vouchers. Posts Dr Agent GL / Cr DDS Customer Deposits.</p>
          </div>
          <button type="button" class="slot-search" (click)="openSearch()">
            <mat-icon>search</mat-icon>
            <span>Find by voucher</span>
          </button>
        </header>
        @if (available.length) {
          <ul class="options">
            @for (option of available; track option.id) {
              <li class="option" [class.option-picked]="pickedReceipts.has(option.id)" (click)="toggleReceipt(option)">
                <mat-icon class="option-check">{{
                  pickedReceipts.has(option.id) ? 'check_box' : 'check_box_outline_blank'
                }}</mat-icon>
                <div class="option-main">
                  <span class="option-voucher mono">{{ option.voucherNo }}</span>
                  <span class="option-meta">{{ option.txnDate }} · {{ glLabel(option) }}</span>
                  @if (option.description) {
                    <span class="option-desc">{{ option.description }}</span>
                  }
                </div>
                <span class="option-amount mono">{{ option.amount | number: '1.2-2' }}</span>
                <button type="button" class="option-info" (click)="openDetail(option, $event)" aria-label="GL entries">
                  <mat-icon>receipt_long</mat-icon>
                </button>
              </li>
            }
          </ul>
        } @else {
          <p class="slot-empty">
            No DDS receipt is waiting on this agent's GL account. Collect the cash at
            <em>Cashier › Transaction Entry</em> with entry type <strong>DDS</strong> and have the manager approve it,
            or find an earlier voucher by number.
          </p>
        }
        @if (pickedReceipts.size > 0 && pickedDays.size > 0 && difference !== 0) {
          <p class="slot-note note-bad">
            The vouchers ({{ received | number: '1.2-2' }}) have to match the day's entries ({{
              required | number: '1.2-2'
            }}) exactly, so every customer is credited what the agent wrote down.
          </p>
        }
      </section>
      @if (errorMsg && !searchOpen) {
        <div class="alert">
          <mat-icon>error_outline</mat-icon>
          <span>{{ errorMsg }}</span>
        </div>
      }
    }
  </mat-dialog-content>
  <mat-dialog-actions class="dialog-actions">
    <button type="button" mat-stroked-button [mat-dialog-close]="false" [disabled]="submitting">Cancel</button>
    <button type="button" mat-flat-button color="primary" [disabled]="!canApply" (click)="apply()">
      @if (submitting) {
        <mat-spinner diameter="16"></mat-spinner>
        <span>Applying…</span>
      } @else {
        <mat-icon>check</mat-icon>
        <span>Apply Receipt</span>
      }
    </button>
  </mat-dialog-actions>
 </div>
 <!-- ── Find a voucher the list does not carry ───────────────────────────────── -->
@if (searchOpen) {
  <div class="overlay" (click)="closeSearch()">
    <div class="popup" (click)="$event.stopPropagation()">
      <header class="popup-head">
        <h3>Find a DDS receipt</h3>
        <button type="button" mat-icon-button (click)="closeSearch()" aria-label="Close">
          <mat-icon>close</mat-icon>
        </button>
      </header>
      <div class="popup-body">
        <label class="field">
          <span>GL Account</span>
          <div class="field-readonly mono">{{ data.glCode || '—' }} · {{ data.agentCode }}</div>
        </label>
        <label class="field">
          <span>Voucher No.</span>
          <input
            type="text"
            [(ngModel)]="searchVoucherNo"
            placeholder="CR/24092026/0001"
            (keyup.enter)="runSearch()"
            autocomplete="off"
          />
        </label>
        @if (errorMsg) {
          <div class="alert">
            <mat-icon>error_outline</mat-icon>
            <span>{{ errorMsg }}</span>
          </div>
        }
      </div>
      <footer class="popup-foot">
        <button type="button" mat-stroked-button (click)="closeSearch()">Cancel</button>
        <button
          type="button"
          mat-flat-button
          color="primary"
          [disabled]="!searchVoucherNo.trim() || searching"
          (click)="runSearch()"
        >
          @if (searching) {
            <mat-spinner diameter="16"></mat-spinner>
          } @else {
            <span>Find &amp; Use</span>
          }
        </button>
      </footer>
    </div>
  </div>
 }
 <!-- ── A receipt's own GL entries ───────────────────────────────────────────── -->
@if (viewing) {
  <div class="overlay" (click)="closeDetail()">
    <div class="popup" (click)="$event.stopPropagation()">
      <header class="popup-head">
        <h3>
          Voucher <span class="mono">{{ viewing.voucherNo }}</span>
        </h3>
        <button type="button" mat-icon-button (click)="closeDetail()" aria-label="Close">
          <mat-icon>close</mat-icon>
        </button>
      </header>
      <div class="popup-body">
        <dl class="detail-list">
          <div>
            <dt>Date</dt>
            <dd class="mono">{{ viewing.txnDate }}</dd>
          </div>
          <div>
            <dt>Amount</dt>
            <dd class="mono">{{ viewing.amount | number: '1.2-2' }}</dd>
          </div>
          <div>
            <dt>GL Account</dt>
            <dd>{{ glLabel(viewing) }}</dd>
          </div>
          @if (viewing.cashierName) {
            <div>
              <dt>Collected By</dt>
              <dd>{{ viewing.cashierName }}</dd>
            </div>
          }
          @if (viewing.managerName) {
            <div>
              <dt>Approved By</dt>
              <dd>{{ viewing.managerName }}</dd>
            </div>
          }
          @if (viewing.description) {
            <div>
              <dt>Description</dt>
              <dd>{{ viewing.description }}</dd>
            </div>
          }
        </dl>
        <h4 class="detail-heading">Journal Entries</h4>
        @if (loadingGlEntries) {
          <div class="state-block"><mat-spinner diameter="22"></mat-spinner></div>
        } @else if (viewingGlEntries?.length) {
          <table class="gl-table">
            <thead>
              <tr>
                <th>Account</th>
                <th class="num">Debit</th>
                <th class="num">Credit</th>
              </tr>
            </thead>
            <tbody>
              @for (entry of viewingGlEntries; track entry.id) {
                <tr>
                  <td>
                    <span class="mono">{{ entry.glCode }}</span> {{ entry.glName }}
                  </td>
                  <td class="num mono">{{ entry.drCr === 'DR' ? (entry.amount | number: '1.2-2') : '' }}</td>
                  <td class="num mono">{{ entry.drCr === 'CR' ? (entry.amount | number: '1.2-2') : '' }}</td>
                </tr>
              }
            </tbody>
          </table>
        } @else {
          <p class="slot-empty">No journal entries are recorded against this receipt.</p>
        }
      </div>
      <footer class="popup-foot">
        <button type="button" mat-stroked-button (click)="closeDetail()">Close</button>
      </footer>
    </div>
  </div>
 }
@@ -0,0 +1,95 @@
 /**
 * 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 same look as Apply Additional Shares, on purpose: both apply a cashier's receipt to what it was
 // collected for, and the counter should meet one screen, not two. Used as it is, never changed here.
@use '../../../shares/share-dialog.shared' as *;
 :host {
  display: block;
  width: 100%;
 }
 // The agent's outstanding lines - read only, what the receipt has to cover.
 .entries {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  td {
    padding: 7px 4px;
    border-bottom: 1px solid #eef2f7;
  }
  tr:last-child td {
    border-bottom: none;
  }
  .entry-date {
    color: #64748b;
    white-space: nowrap;
  }
  .entry-code {
    font-weight: 600;
    white-space: nowrap;
  }
  .entry-name {
    color: #475569;
  }
  .num {
    text-align: right;
    white-space: nowrap;
  }
 }
 // Days and vouchers are ticked, any number of each - a check box where the share dialog has a radio.
 .option-check {
  color: #94a3b8;
  flex-shrink: 0;
 }
 .option-picked {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  .option-check {
    color: #2563eb;
  }
 }
 // A day's own lines, opened under it. Scrolls inside itself, so a thousand customers do not make the
 // dialog a thousand lines tall.
 .day-lines {
  list-style: none;
  padding: 6px 10px 10px 42px;
 }
 .day-search {
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
 }
 .day-scroll {
  max-height: 240px;
  overflow-y: auto;
 }
 .field-readonly {
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
 }
@@ -0,0 +1,351 @@
 /**
 * 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 { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { catchError } from 'rxjs/operators';
 import { of } from 'rxjs';
 import { OrganizationService } from 'app/organization/organization.service';
 import { SettingsService } from 'app/settings/settings.service';
 /** One day of an agent's outstanding entries, as the dialog lists them. */
 export interface EntryDay {
  date: string;
  entries: any[];
  total: number;
 }
 /**
 * Applies the cashier's DDS receipts to an agent's outstanding collections.
 *
 * The agent's cash is already in the bank: the cashier took it at the counter into the agent's own GL
 * account, tagged DDS, and the manager approved it. Applying it here hands the money on to the
 * customers the agent wrote down - Dr the agent's GL, Cr DDS Customer Deposits - and each entry is
 * settled against the application. The same screen as Apply Additional Shares.
 *
 * Everything outstanding up to the day chosen on the screen, shown a day at a time - nothing to tick,
 * because what the agent wrote down is settled whole, and an agent who comes in after several days
 * brings several days' cash. The vouchers are ticked, since a day's
 * cash can come in more than one visit. They have to agree exactly: what the agent wrote down is what
 * each customer is owed, so vouchers short of it leave somebody uncredited and vouchers over it leave
 * money nobody can place.
 *
 * The day is shown totalled and its lines opened only when asked for - an agent with a thousand
 * customers is a thousand lines, and the day's total is what the counter is checking.
 */
@Component({
  selector: 'mifosx-apply-dds-receipt-dialog',
  templateUrl: './apply-dds-receipt-dialog.component.html',
  styleUrls: ['./apply-dds-receipt-dialog.component.scss'],
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatProgressSpinnerModule
  ]
 })
 export class ApplyDdsReceiptDialogComponent implements OnInit {
  private organizationService = inject(OrganizationService);
  private settingsService = inject(SettingsService);
  public dialogRef = inject(MatDialogRef<ApplyDdsReceiptDialogComponent>);
  public data = inject<{
    agentId: number;
    agentCode: string;
    agentName: string;
    glCode: string | null;
    entryDate: string;
  }>(MAT_DIALOG_DATA);
  loadingEntries = true;
  loadingReceipts = true;
  submitting = false;
  errorMsg = '';
  /** The chosen day's outstanding entries - one day, or none when nothing is outstanding on it. */
  days: EntryDay[] = [];
  /** DDS receipts on the agent's GL account, approved and not yet applied. */
  available: any[] = [];
  /**
   * The day is settled whole, so it is always included. The vouchers are the clerk's choice, and none
   * is picked for them even when only one is listed.
   */
  pickedDays = new Set<string>();
  pickedReceipts = new Set<number>();
  /** The day whose lines are open, and the search within it. */
  openDay: string | null = null;
  daySearch = '';
  get loading(): boolean {
    return this.loadingEntries || this.loadingReceipts;
  }
  ngOnInit(): void {
    // Everything outstanding up to the chosen date, whatever day it was written - an agent's cash for
    // several days arrives in one visit, and all of it is settled together.
    this.organizationService
      .getAgentPendingCollections(this.data.agentId)
      .pipe(
        catchError((err) => {
          this.errorMsg = this.readError(err, "Could not load the agent's entries.");
          return of(null);
        })
      )
      .subscribe((res: any) => {
        this.days = groupByDay(
          (res?.entries || []).filter(
            (entry: any) => entry.status === 'PENDING' && String(entry.entryDate) <= this.data.entryDate
          )
        );
        this.pickedDays = new Set(this.days.map((day) => day.date));
        this.loadingEntries = false;
      });
    this.organizationService
      .getAgentCashReceipts(this.data.agentId)
      .pipe(
        catchError((err) => {
          this.errorMsg = this.readError(err, 'Could not load the available receipts.');
          return of([]);
        })
      )
      .subscribe((rows: any) => {
        this.available = Array.isArray(rows) ? rows : [];
        this.loadingReceipts = false;
      });
  }
  // ── Picking ─────────────────────────────────────────────────────────────────────────────────
  toggleReceipt(receipt: any): void {
    if (this.submitting) {
      return;
    }
    this.pickedReceipts.has(receipt.id) ? this.pickedReceipts.delete(receipt.id) : this.pickedReceipts.add(receipt.id);
  }
  toggleOpen(day: EntryDay, event: Event): void {
    event.stopPropagation();
    this.openDay = this.openDay === day.date ? null : day.date;
    this.daySearch = '';
  }
  /** The open day's lines, narrowed by party code or name. */
  visibleEntries(day: EntryDay): any[] {
    const term = this.daySearch.trim().toLowerCase();
    if (!term) {
      return day.entries;
    }
    return day.entries.filter(
      (entry: any) =>
        String(entry.partyCode || '')
          .toLowerCase()
          .includes(term) ||
        String(entry.partyName || '')
          .toLowerCase()
          .includes(term)
    );
  }
  // ── What has to be covered ──────────────────────────────────────────────────────────────────
  get entryCount(): number {
    return this.days.reduce((sum, day) => sum + day.entries.length, 0);
  }
  get outstandingTotal(): number {
    return this.days.reduce((sum, day) => sum + day.total, 0);
  }
  get pickedEntryCount(): number {
    return this.days.filter((day) => this.pickedDays.has(day.date)).reduce((sum, day) => sum + day.entries.length, 0);
  }
  get required(): number {
    return round2(this.days.filter((day) => this.pickedDays.has(day.date)).reduce((sum, day) => sum + day.total, 0));
  }
  get received(): number {
    return round2(
      this.available.filter((r) => this.pickedReceipts.has(r.id)).reduce((sum, r) => sum + Number(r.amount || 0), 0)
    );
  }
  /** Vouchers less entries: below zero they are short, above zero they are over. */
  get difference(): number {
    return round2(this.received - this.required);
  }
  get canApply(): boolean {
    return this.pickedDays.size > 0 && this.pickedReceipts.size > 0 && this.difference === 0 && !this.submitting;
  }
  glLabel(option: any): string {
    return [
      option?.glCode,
      option?.glName
    ]
      .filter(Boolean)
      .join(' — ');
  }
  // ── Voucher search, for a receipt the list does not carry ───────────────────────────────────
  searching = false;
  searchOpen = false;
  searchVoucherNo = '';
  openSearch(): void {
    this.searchOpen = true;
    this.searchVoucherNo = '';
    this.errorMsg = '';
  }
  closeSearch(): void {
    this.searchOpen = false;
    this.errorMsg = '';
  }
  /**
   * Finds one voucher on the agent's GL account and, when it cannot be used, says why - not taken as
   * DDS, not approved yet, or already applied - rather than simply not finding it.
   */
  runSearch(): void {
    const voucher = this.searchVoucherNo.trim();
    if (!voucher || this.searching) {
      return;
    }
    this.searching = true;
    this.errorMsg = '';
    this.organizationService
      .getAgentCashReceipts(this.data.agentId, voucher)
      .pipe(
        catchError((err) => {
          this.errorMsg = this.readError(err, `Voucher ${voucher} could not be looked up.`);
          return of(null);
        })
      )
      .subscribe((rows: any) => {
        this.searching = false;
        if (rows === null) {
          return;
        }
        const found = (Array.isArray(rows) ? rows : [])[0];
        if (!found) {
          this.errorMsg = `Voucher ${voucher} is not on ${this.data.agentCode}'s GL account ${this.data.glCode || ''}.`;
        } else if (found.entryType !== 'DDS') {
          this.errorMsg = `Voucher ${voucher} was taken as "${found.entryType || 'untagged'}", not DDS. Ask the cashier to correct the entry type.`;
        } else if (found.status !== 'APPROVED') {
          this.errorMsg = `Voucher ${voucher} is ${found.status}. It can be applied once the manager approves it.`;
        } else if (found.applied) {
          this.errorMsg = `Voucher ${voucher} has already been applied.`;
        } else {
          this.available = [
            found,
            ...this.available.filter((entry) => entry.id !== found.id)
          ];
          this.pickedReceipts.add(found.id);
          this.searchOpen = false;
        }
      });
  }
  // ── A receipt's own GL entries ──────────────────────────────────────────────────────────────
  viewing: any = null;
  viewingGlEntries: any[] | null = null;
  loadingGlEntries = false;
  openDetail(option: any, event: Event): void {
    event.stopPropagation();
    this.viewing = option;
    this.viewingGlEntries = null;
    this.loadingGlEntries = true;
    this.organizationService
      .getCashReceiptGlEntries(option.id)
      .pipe(catchError(() => of([])))
      .subscribe((rows: any) => {
        this.viewingGlEntries = Array.isArray(rows) ? rows : [];
        this.loadingGlEntries = false;
      });
  }
  closeDetail(): void {
    this.viewing = null;
    this.viewingGlEntries = null;
  }
  // ── Submission ──────────────────────────────────────────────────────────────────────────────
  apply(): void {
    if (!this.canApply) {
      return;
    }
    this.submitting = true;
    this.errorMsg = '';
    const vouchers = this.available.filter((r) => this.pickedReceipts.has(r.id)).map((r) => r.voucherNo);
    const entries = this.pickedEntryCount;
    const amount = this.required;
    this.organizationService
      .settleAgentCollections({
        agentId: Number(this.data.agentId),
        cashierDepositRequestIds: Array.from(this.pickedReceipts),
        entryDates: Array.from(this.pickedDays),
        locale: this.settingsService.language.code
      })
      .pipe(
        catchError((err) => {
          this.errorMsg = this.readError(err, 'The receipts could not be applied.');
          this.submitting = false;
          return of(null);
        })
      )
      .subscribe((res: any) => {
        if (res) {
          this.dialogRef.close({ vouchers, entries, amount, response: res });
        }
      });
  }
  private readError(err: any, fallback: string): string {
    return (
      err?.error?.errors?.[0]?.defaultUserMessage ??
      err?.error?.defaultUserMessage ??
      err?.error?.developerMessage ??
      fallback
    );
  }
 }
 /** Entries grouped by the day they were collected, oldest first, each day totalled. */
 export function groupByDay(entries: any[]): EntryDay[] {
  const byDay = new Map<string, EntryDay>();
  for (const entry of entries) {
    const date = String(entry.entryDate);
    const day = byDay.get(date) ?? { date, entries: [], total: 0 };
    day.entries.push(entry);
    day.total = round2(day.total + Number(entry.amount || 0));
    byDay.set(date, day);
  }
  return Array.from(byDay.values()).sort((a, b) => a.date.localeCompare(b.date));
 }
 function round2(value: number): number {
  return Math.round(value * 100) / 100;
 }
@@ -0,0 +1,468 @@
 <!--
  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="dte-container">
  <div class="dte-header">
    <button mat-stroked-button [routerLink]="['../']" class="dte-back">
      <i class="fas fa-arrow-left"></i> Deposits
    </button>
    <h2 class="dte-header__title">Daily Transaction Detail</h2>
  </div>
  <div class="dte-card">
    <form [formGroup]="entryForm">
      <div class="dte-info-panels">
        <div class="dte-info-panel">
          <div class="dte-info-panel__title">Agent Information</div>
          <dl>
            <dt>Name</dt>
            <dd>{{ agentInfo.name || '—' }}</dd>
            <dt>Address</dt>
            <dd>{{ agentInfo.address || '—' }}</dd>
            <dt>City</dt>
            <dd>{{ agentInfo.city || '—' }}</dd>
            <dt>A/C</dt>
            <dd>{{ agentInfo.accountNo || '—' }}</dd>
            <dt>Guarantor</dt>
            <dd>{{ agentInfo.guarantor1 || '—' }}</dd>
            <dt>Guarantor</dt>
            <dd>{{ agentInfo.guarantor2 || '—' }}</dd>
            <dt>Curr Bal</dt>
            <dd>{{ agentInfo.currentBalance | number: '1.2-2' }}</dd>
          </dl>
        </div>
        <div class="dte-info-panel">
          <div class="dte-info-panel__title">Party Information</div>
          @if (partyInfo) {
            <dl>
              <dt>Client Id</dt>
              <dd>{{ partyInfo.clientId }}</dd>
              <dt>Name</dt>
              <dd>{{ partyInfo.partyName }}</dd>
              <dt>Address</dt>
              <dd>{{ partyInfo.address1 || '—' }}</dd>
              <dt>City</dt>
              <dd>{{ partyInfo.city || '—' }}</dd>
              <dt>Op. Date</dt>
              <dd>{{ partyInfo.openingDate ? (partyInfo.openingDate | dateFormat) : '—' }}</dd>
              <dt>Maturity</dt>
              <dd>{{ partyInfo.maturityDate ? (partyInfo.maturityDate | dateFormat) : '—' }}</dd>
              <dt>Daily Depo</dt>
              <dd>{{ partyInfo.dailyDepositAmount | number: '1.2-2' }}</dd>
              <dt>Ledger</dt>
              <dd>{{ partyInfo.ledgerNo || '—' }}</dd>
              <dt>Aadhar No</dt>
              <dd>{{ partyInfo.aadharNo || '—' }}</dd>
              <dt>Curr Bal</dt>
              <dd>{{ partyInfo.currentBalance | number: '1.2-2' }}</dd>
              <!--
                What should have been collected by today against what has been. Beside the balance
                rather than instead of it: the balance is what the customer holds, this is whether
                they have kept to the scheme.
              -->
              <dt>Due So Far</dt>
              <dd>{{ partyInfo.expectedToDate | number: '1.2-2' }}</dd>
              <dt>Collected</dt>
              <dd>{{ partyInfo.collectedToDate | number: '1.2-2' }}</dd>
              @if (schedule(partyInfo); as sched) {
                <dt [class]="'dte-sched dte-sched--' + sched.state">Schedule</dt>
                <dd [class]="'dte-sched dte-sched--' + sched.state">{{ sched.text }}</dd>
              }
              <dt class="dte-after">Bal. After This Tr</dt>
              <dd class="dte-after">{{ partyBalanceAfter | number: '1.2-2' }}</dd>
            </dl>
          } @else {
            <p class="dte-info-panel__hint">
              Pick a party in a collection row below — this panel shows whose account it is and what the balance
              becomes.
            </p>
          }
        </div>
      </div>
      <div class="dte-controls">
        <mat-form-field appearance="outline" class="dte-field dte-field--agent">
          <mat-label>Agent</mat-label>
          <mat-select required formControlName="agentId" (selectionChange)="loadAgent()">
            @for (agent of selectableAgents; track agent.id) {
              <mat-option [value]="agent.id">
                {{ agent.agentCode }} · {{ agent.agentNameId }}
                @if (!agent.active) {
                  <span class="dte-agent-off">— not collecting</span>
                }
              </mat-option>
            }
          </mat-select>
          @if (selectableAgents.length === 0) {
            <mat-hint class="dte-hint--missing">No active agent on file</mat-hint>
          } @else if (pickedAgentIsInactive) {
            <!-- Only reachable on a settlement: this agent no longer collects, but the cash they
                 already hold still has to be able to reach a branch. -->
            <mat-hint class="dte-hint--missing">This agent no longer collects — settling held cash only</mat-hint>
          } @else if (agentInfo.name) {
            <mat-hint class="dte-hint--found">
              {{ agentParties.length }} {{ agentParties.length === 1 ? 'party' : 'parties' }} to collect from
            </mat-hint>
          }
        </mat-form-field>
        <mat-form-field appearance="outline" class="dte-field">
          <mat-label>Date</mat-label>
          <!-- The date picks out a round, not just a posting date: a Party Tran settles whatever
               the agent wrote down for that day, so changing it has to fetch that day's list. -->
          <input
            matInput
            required
            [matDatepicker]="txnDatePicker"
            formControlName="transactionDate"
            (dateChange)="loadPendingEntries(); loadAgentMoney()"
          />
          <mat-datepicker-toggle matIconSuffix [for]="txnDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #txnDatePicker></mat-datepicker>
        </mat-form-field>
        <mat-form-field appearance="outline" class="dte-field">
          <mat-label>Tran. Type</mat-label>
          <mat-select required formControlName="transactionType">
            @for (type of transactionTypes; track type.label) {
              <mat-option [value]="type.label" [disabled]="!type.supported">
                {{ type.label }}
                @if (!type.supported) {
                  <span class="dte-soon"> — not available yet</span>
                }
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
      </div>
      <!--
        What the agent wrote down on their round, waiting to be counted.
        This used to be an empty grid the clerk typed the round into, and typing it posted it: a
        customer was credited the moment a line was keyed, whether or not the cash behind it ever
        reached the branch. The agent records their own collections now, and what the clerk does here
        is agree with them - so there is nothing to type, only a list to check against a bag of cash.
      -->
      @if (isPartyTran && agentInfo.name) {
        <div class="dte-section">
          <div class="dte-section__header">
            <i class="fas fa-list"></i>
            <h3>Collections up to {{ entryForm.get('transactionDate')?.value | dateFormat }}</h3>
            <button mat-stroked-button type="button" class="dte-add-row" (click)="loadPendingEntries()">
              <i class="fas fa-sync"></i> Refresh
            </button>
          </div>
          @if (pendingLoading) {
            <p class="dte-empty">Reading this agent's entries...</p>
          } @else if (pendingEntries.length === 0) {
            <p class="dte-empty">{{ agentInfo.name }} has nothing outstanding up to this date.</p>
          } @else {
            @for (entry of pendingEntries; track entry.id) {
              <div class="dte-pending-row">
                <!-- The day the agent took it, on the line itself. All the lines carry the date
                     chosen above, but a row that says so can be read, printed or shown to the agent
                     on its own without the header to explain it. -->
                <span class="dte-pending-row__date">{{ entry.entryDate | dateFormat }}</span>
                <span class="dte-pending-row__code">{{ entry.partyCode }}</span>
                <span class="dte-pending-row__name">{{ entry.partyName }}</span>
                <span class="dte-pending-row__mode"
                  >{{ entry.transactionMode }}
                  @if (entry.advanceDays) {
                    · {{ entry.advanceDays }}d advance
                  }
                  @if (entry.arrearsDays) {
                    · {{ entry.arrearsDays }}d previous
                  }
                </span>
                <span class="dte-pending-row__amount">{{ entry.amount | number: '1.2-2' }}</span>
              </div>
            }
            <div class="dte-total">
              <span>{{ pendingEntries.length }} {{ pendingEntries.length === 1 ? 'entry' : 'entries' }}</span>
              <strong>{{ pendingTotal | number: '1.2-2' }}</strong>
            </div>
            <!--
              The figure the clerk counts against, said in words rather than left as a column total -
              it is the one number they are acting on, and the rest of the panel is working out.
              It says what the agent wrote down and stops there. The money side - what is owed, what the
              cashier has taken in, and applying it - is Agent Tran, so each type has one job.
            -->
            <p class="dte-expected dte-expected--note">
              Everything {{ agentInfo.name }} wrote down and has not handed in yet, up to this date, customer by
              customer. The cash and its receipts are under Agent Tran.
            </p>
          }
        </div>
      }
      <!--
        The agent's money: what they owe on everything written down, what the cashier has taken in
        against it, and what is left.
        This used to be a form the clerk typed an amount into to take the agent's cash in here. The
        cash is taken at the cashier's counter now, into the agent's own GL account, and one way to take
        the same cash in is the only safe number of ways - so there is nothing to type. What is done here
        is applying the cashier's receipts to the customers, in Apply DDS Receipt.
      -->
      @if (isAgentTran && agentInfo.name) {
        <div class="dte-section">
          <div class="dte-section__header">
            <i class="fas fa-hand-holding-usd"></i>
            <h3>Agent's cash</h3>
            <button mat-stroked-button type="button" class="dte-add-row" (click)="loadAgentMoney()">
              <i class="fas fa-sync"></i> Refresh
            </button>
            <button
              mat-raised-button
              color="primary"
              type="button"
              class="dte-apply-receipt"
              (click)="openApplyReceipt()"
            >
              <i class="fas fa-receipt"></i> Apply DDS Receipt
            </button>
          </div>
          @if (!agentGlCode) {
            <p class="dte-expected dte-expected--note">
              {{ agentInfo.name }} has no GL account, so the cashier has nowhere to take their cash. Set one on Agent
              Master.
            </p>
          } @else {
            <!-- The GL the cashier takes this agent's cash into - the code to key at Transaction Entry. -->
            <p class="dte-expected">
              Agent GL: <strong>{{ agentGlCode }}{{ agentGlName ? ' · ' + agentGlName : '' }}</strong> — the cashier
              takes {{ agentInfo.name }}'s cash into this GL (Entry Type DDS).
            </p>
          }
          <div class="dte-money">
            <div class="dte-money__box">
              <span class="dte-money__label">To take</span>
              <strong>{{ agentOwed | number: '1.2-2' }}</strong>
            </div>
            <div class="dte-money__box">
              <span class="dte-money__label">Received (approved)</span>
              <strong>{{ agentReceived | number: '1.2-2' }}</strong>
            </div>
            <div class="dte-money__box" [class.dte-money__box--due]="agentBalance > 0">
              <span class="dte-money__label">Still to take</span>
              <strong>{{ agentBalance | number: '1.2-2' }}</strong>
            </div>
          </div>
          @if (agentReceivedBeyondDay > 0) {
            <p class="dte-expected dte-expected--note">
              {{ agentReceivedBeyondDay | number: '1.2-2' }} received at the counter is more than everything outstanding
              up to {{ entryForm.get('transactionDate')?.value | dateFormat }}. Check the voucher was taken for the
              right agent.
            </p>
          }
          @if (agentWaiting > 0) {
            <p class="dte-expected dte-expected--note">
              {{ agentWaiting | number: '1.2-2' }} more is at the counter awaiting the manager's approval.
            </p>
          }
          <h4 class="dte-subhead">
            Outstanding entries up to {{ entryForm.get('transactionDate')?.value | dateFormat }}
          </h4>
          @if (agentMoneyLoading) {
            <p class="dte-empty">Reading this agent's entries...</p>
          } @else if (agentDays.length === 0) {
            <p class="dte-empty">{{ agentInfo.name }} has nothing outstanding.</p>
          } @else {
            @for (day of agentDays; track day.date) {
              <div class="dte-pending-row dte-pending-row--day" (click)="toggleAgentDay(day.date)">
                <span class="dte-pending-row__date">{{ day.date | dateFormat }}</span>
                <span class="dte-pending-row__name">
                  {{ day.entries.length }} {{ day.entries.length === 1 ? 'entry' : 'entries' }}
                </span>
                <span class="dte-pending-row__amount">{{ day.total | number: '1.2-2' }}</span>
                <i [class]="agentOpenDay === day.date ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
              </div>
              @if (agentOpenDay === day.date) {
                <div class="dte-day-lines">
                  @for (entry of day.entries; track entry.id) {
                    <div class="dte-pending-row">
                      <span class="dte-pending-row__code">{{ entry.partyCode }}</span>
                      <span class="dte-pending-row__name">{{ entry.partyName }}</span>
                      <span class="dte-pending-row__mode"
                        >{{ entry.transactionMode }}
                        @if (entry.advanceDays) {
                          · {{ entry.advanceDays }}d advance
                        }
                        @if (entry.arrearsDays) {
                          · {{ entry.arrearsDays }}d previous
                        }
                      </span>
                      <span class="dte-pending-row__amount">{{ entry.amount | number: '1.2-2' }}</span>
                    </div>
                  }
                </div>
              }
            }
          }
          <h4 class="dte-subhead">Cashier receipts</h4>
          @if (agentReceipts.length === 0) {
            <p class="dte-empty">
              No DDS receipt on {{ agentInfo.name }}'s GL account{{ agentGlCode ? ' ' + agentGlCode : '' }} waiting to
              be applied.
            </p>
          } @else {
            @for (receipt of agentReceipts; track receipt.id) {
              <div class="dte-pending-row">
                <span class="dte-pending-row__code">{{ receipt.voucherNo }}</span>
                <span class="dte-pending-row__date">{{ receipt.txnDate | dateFormat }}</span>
                <span class="dte-pending-row__name">{{ receipt.cashierName || '—' }}</span>
                <span class="dte-status" [class.dte-status--ok]="receipt.status === 'APPROVED'">
                  {{ receipt.status === 'APPROVED' ? 'Approved' : 'Awaiting manager' }}
                </span>
                <span class="dte-pending-row__amount">{{ receipt.amount | number: '1.2-2' }}</span>
              </div>
            }
          }
        </div>
      }
      @if (isWithdrawDeposite) {
        <div class="dte-section">
          <div class="dte-section__header">
            <i class="fas fa-exchange-alt"></i>
            <h3>Withdraw Deposite</h3>
          </div>
          <div class="dte-grid">
            <mat-form-field appearance="outline" class="dte-field">
              <mat-label>Creditor Party Code</mat-label>
              <input
                matInput
                formControlName="creditorPartyCode"
                [matAutocomplete]="creditorAuto"
                #creditorTrigger="matAutocompleteTrigger"
                (click)="creditorTrigger.openPanel()"
                (focus)="creditorTrigger.openPanel()"
                (blur)="settleTransferParty('creditor')"
                placeholder="Search by code or name…"
                autocomplete="off"
              />
              <mat-icon matSuffix class="dte-list-arrow" (click)="$event.stopPropagation(); creditorTrigger.openPanel()"
                >arrow_drop_down</mat-icon
              >
              <mat-autocomplete #creditorAuto="matAutocomplete" panelWidth="min(30rem, 92vw)">
                @for (party of transferPartyOptions('creditor'); track party.id) {
                  <mat-option [value]="party.partyCode">
                    {{ party.partyCode }} · {{ party.partyName }} · ₹{{ party.currentBalance | number: '1.2-2' }}
                  </mat-option>
                }
                @if (transferPartyOptions('creditor').length === 0) {
                  <mat-option disabled>No open DDS account matches</mat-option>
                }
              </mat-autocomplete>
              <mat-hint>Account the money goes into</mat-hint>
            </mat-form-field>
            <mat-form-field appearance="outline" class="dte-field">
              <mat-label>Creditor Party Name</mat-label>
              <input matInput formControlName="creditorPartyName" readonly />
            </mat-form-field>
            <mat-form-field appearance="outline" class="dte-field">
              <mat-label>Creditor Curr Bal</mat-label>
              <input matInput formControlName="creditorPartyBalance" readonly />
            </mat-form-field>
            <mat-form-field appearance="outline" class="dte-field">
              <mat-label>Debit Party Code</mat-label>
              <input
                matInput
                formControlName="debitPartyCode"
                [matAutocomplete]="debitAuto"
                #debitTrigger="matAutocompleteTrigger"
                (click)="debitTrigger.openPanel()"
                (focus)="debitTrigger.openPanel()"
                (blur)="settleTransferParty('debit')"
                placeholder="Search by code or name…"
                autocomplete="off"
              />
              <mat-icon matSuffix class="dte-list-arrow" (click)="$event.stopPropagation(); debitTrigger.openPanel()"
                >arrow_drop_down</mat-icon
              >
              <mat-autocomplete #debitAuto="matAutocomplete" panelWidth="min(30rem, 92vw)">
                @for (party of transferPartyOptions('debit'); track party.id) {
                  <mat-option [value]="party.partyCode">
                    {{ party.partyCode }} · {{ party.partyName }} · ₹{{ party.currentBalance | number: '1.2-2' }}
                  </mat-option>
                }
                @if (transferPartyOptions('debit').length === 0) {
                  <mat-option disabled>No open DDS account matches</mat-option>
                }
              </mat-autocomplete>
              @if (transferToItself) {
                <mat-hint class="dte-same-party">Pick a different account - it cannot transfer to itself</mat-hint>
              } @else {
                <mat-hint>Account the money is taken from</mat-hint>
              }
            </mat-form-field>
            <mat-form-field appearance="outline" class="dte-field">
              <mat-label>Debit Party Name</mat-label>
              <input matInput formControlName="debitPartyName" readonly />
            </mat-form-field>
            <mat-form-field appearance="outline" class="dte-field">
              <mat-label>Debit Curr Bal</mat-label>
              <input matInput formControlName="debitPartyBalance" readonly />
            </mat-form-field>
            <mat-form-field appearance="outline" class="dte-field">
              <mat-label>Amount</mat-label>
              <input matInput type="number" formControlName="withdrawAmount" />
            </mat-form-field>
            <mat-form-field appearance="outline" class="dte-field dte-field--wide">
              <mat-label>Description</mat-label>
              <input matInput formControlName="withdrawDescription" />
            </mat-form-field>
          </div>
        </div>
      }
      @if (!isPartyTran && !isWithdrawDeposite && !isAgentTran) {
        <div class="dte-section">
          <p class="dte-empty">
            "{{ entryForm.get('transactionType').value }}" entry screen — same shape as Party Tran, to be filled in once
            the backend distinguishes these transaction types.
          </p>
        </div>
      }
      <div class="dte-action-bar">
        <button mat-raised-button type="button" (click)="exit()">Exit</button>
        <button mat-stroked-button type="button" (click)="cancel()">Cancel</button>
        <button mat-stroked-button type="button" (click)="retrieve()">Retrieve</button>
        <button mat-stroked-button type="button" (click)="viewLedger()">View Ledger</button>
        <button mat-stroked-button type="button" (click)="signature()">Signature</button>
        <!-- Party Tran and Agent Tran are read here, never saved: the agent writes the round down on
             their own screen and the cash is taken in at the cashier's counter. Agent Tran applies the
             cashier's receipts from its own Apply DDS Receipt. Only Withdraw Deposite still saves. -->
        @if (!isPartyTran && !isAgentTran) {
          <button
            mat-raised-button
            color="primary"
            type="button"
            [disabled]="entryForm.invalid || transferToItself"
            (click)="save()"
          >
            Save
          </button>
        }
      </div>
    </form>
  </div>
 </div>
@@ -0,0 +1,488 @@
 /**
 * 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/.
 */
 $primary: #0f766e;
 .dte-container {
  // Wider than a normal form page: a collection row carries six fields side by side, and a clerk
  // keying a round should see the whole of it.
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 16px;
 }
 .dte-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  &__title {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
  }
 }
 .dte-back {
  color: $primary;
 }
 .dte-card {
  background: var(--md-sys-color-surface, #fff);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
  padding: 20px 24px 24px;
 }
 .dte-info-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
 }
 .dte-info-panel {
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 8px;
  padding: 12px 16px;
  background: rgb(15 118 110 / 4%);
  &__title {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: $primary;
    margin-bottom: 8px;
  }
  &__hint {
    margin: 0;
    color: rgb(0 0 0 / 50%);
    font-size: 13px;
  }
  dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0;
  }
  dt {
    font-weight: 500;
    color: rgb(0 0 0 / 60%);
    font-size: 13px;
  }
  dd {
    margin: 0;
    font-size: 13px;
  }
 }
 .dte-controls {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
 }
 // A sensible floor for the fields laid out with flex in .dte-controls, where there is room to spare.
 .dte-field {
  min-width: 180px;
  &--wide {
    grid-column: span 2;
  }
 }
 // Inside the collection grid the track decides the width, not the field. Left to its own 180px
 // floor a field refuses to shrink into a narrower track and overruns the one beside it.
 .dte-collection-row .dte-field {
  width: 100%;
  min-width: 0;
 }
 .dte-section {
  padding: 16px 0;
  border-top: 1px solid rgb(0 0 0 / 8%);
  // A very narrow window scrolls the grid sideways rather than the whole page.
  overflow-x: auto;
  &__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    i {
      color: $primary;
    }
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      flex: 1;
    }
  }
 }
 .dte-add-row {
  color: $primary;
 }
 .dte-empty {
  color: rgb(0 0 0 / 50%);
  font-size: 14px;
  margin: 0;
 }
 .dte-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 16px;
 }
 /*
 * One collection per row. Fixed columns rather than an even split, so the row holds its shape as
 * fields come and go - Cheque No and Token No only appear for a non-cash entry - and the party
 * picker gets the width its "code · name · daily amount" needs.
 */
 .dte-collection-row {
  display: grid;
  grid-template-columns:
    minmax(0, 2.2fr) /* Party       */
    minmax(0, 1fr) /* TRTP        */
    minmax(0, 1fr) /* AC Type     */
    minmax(0, 1.4fr) /* A/C No.     */
    minmax(0, 1fr) /* Amount      */
    minmax(0, 1.6fr) /* Description */
    auto; /* remove      */
  gap: 8px 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px dashed rgb(0 0 0 / 10%);
  &:first-of-type {
    border-top: none;
  }
  // Cheque No and Token No push Description and the remove button onto a second line, which is
  // what a non-cash entry should look like rather than a row running off the screen.
  &:has(.dte-field--instrument) {
    grid-template-columns:
      minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr)
      minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) auto;
  }
 }
 .dte-collection-row .dte-field--wide {
  grid-column: span 2;
 }
@media (width <= 1200px) {
  .dte-collection-row,
  .dte-collection-row:has(.dte-field--instrument) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }
 }
 .dte-remove-row {
  color: #b91c1c;
  margin-top: 8px;
 }
 .dte-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgb(0 0 0 / 8%);
  flex-wrap: wrap;
 }
@media (width <= 1000px) {
  .dte-info-panels {
    grid-template-columns: 1fr;
  }
  .dte-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dte-collection-row {
    grid-template-columns: repeat(2, 1fr);
  }
 }
 /* Resolved name under an Agent / Party Code field — the check that the right record was found. */
 .dte-hint--found {
  color: #15803d;
  font-weight: 500;
 }
 .dte-hint--missing {
  color: #b91c1c;
  font-weight: 500;
 }
 /* Marks an agent in the list who is no longer collecting - only offered for settlement. */
 .dte-agent-off {
  color: #b45309;
  font-size: 12px;
  font-style: italic;
  margin-left: 6px;
 }
 /* The figure the clerk actually verifies against the passbook before saving. */
 .dte-after {
  font-weight: 600;
  color: #0f766e;
 }
 /* What the agent should be handing over for this round. */
 .dte-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 14px;
  padding: 10px 4px 2px;
  border-top: 1px solid rgb(0 0 0 / 10%);
  font-size: 0.88rem;
  color: rgb(0 0 0 / 60%);
  strong {
    font-size: 1.1rem;
    color: rgb(0 0 0 / 85%);
    font-variant-numeric: tabular-nums;
  }
 }
 /* Marks a transaction type the system does not handle yet, so it reads as pending rather than broken. */
 .dte-soon {
  font-size: 0.78rem;
  font-style: italic;
  color: rgb(0 0 0 / 45%);
 }
 /*
 * Marks a party this agent has already collected from today, on the row where it is picked.
 *
 * Amber, not red: a customer paying twice in a day is legitimate - arrears, or two days at once -
 * so this is a second look, not an error. Blocking it would stop real work; saying nothing lets a
 * whole round be credited twice.
 */
 .dte-hint--again {
  color: #b45309;
  font-weight: 500;
 }
 /*
 * Where a party stands against its instalments. Three states rather than one colour, because they
 * call for three different things from the clerk: ahead means take nothing, behind means take more
 * than the daily amount, level means take the daily amount as usual.
 *
 * Behind is amber, not red - falling a few days behind is ordinary in daily collection and is the
 * agent's job to recover, not an error. Red here would cry wolf on most rows.
 */
 .dte-hint--ahead,
 .dte-sched--ahead {
  color: #15803d;
  font-weight: 500;
 }
 .dte-hint--behind,
 .dte-sched--behind {
  color: #b45309;
  font-weight: 500;
 }
 .dte-hint--level,
 .dte-sched--level {
  color: rgb(0 0 0 / 55%);
 }
 /* In the party panel the schedule line carries more weight than the fields around it. */
 .dte-sched {
  font-weight: 500;
 }
 /* Says why a party in the list cannot be picked, beside the party rather than in a tooltip. */
 .dte-covered {
  color: #15803d;
  font-size: 0.8rem;
 }
 /*
 * An amount that looks like a slip. Red rather than the amber used for arrears: arrears are ordinary
 * and the agent's job to recover, while this is a figure that probably was not handed over at all,
 * and once saved it cannot be taken back. It still does not block - the clerk decides.
 */
 .dte-hint--overpay {
  color: #b91c1c;
  font-weight: 500;
 }
 /*
  The agent's written-down round, as the counter reads it.
  Laid out as lines rather than as the input grid this replaced: there is nothing to fill in here,
  only a list to check a bag of cash against, and controls would invite editing something the clerk
  has no business editing.
 */
 .dte-pending-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid rgb(0 0 0 / 8%);
  &:last-of-type {
    border-bottom: none;
  }
  /* First, and in the quieter weight: the date is context for the line, not what is being read. */
  &__date {
    min-width: 96px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }
  &__code {
    font-weight: 600;
    min-width: 84px;
  }
  &__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.75;
  }
  &__mode {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
  }
  /* Amounts are read down the column and compared, so the digits have to line up. */
  &__amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 96px;
    text-align: right;
  }
 }
 /* The one figure the clerk acts on, said as a sentence so it is not read as another column total. */
 .dte-expected {
  margin: 14px 2px 0;
  font-size: 14px;
  line-height: 1.5;
  strong {
    font-variant-numeric: tabular-nums;
  }
 }
 /* Quieter than the figure above it: a note about how the screen behaves, not part of the count. */
 .dte-expected--note {
  font-size: 13px;
  opacity: 0.65;
  margin-top: 4px;
 }
 .dte-apply-receipt {
  margin-left: 8px;
 }
 /* Agent Tran: what the agent owes, what the cashier has taken in, and what is left. */
 .dte-money {
  display: flex;
  gap: 12px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
  &__box {
    flex: 1;
    min-width: 160px;
    padding: 10px 14px;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    strong {
      font-size: 18px;
    }
    &--due {
      border-color: rgb(198 40 40 / 40%);
      background: rgb(198 40 40 / 4%);
    }
  }
  &__label {
    font-size: 12px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
 }
 .dte-subhead {
  margin: 16px 0 4px;
  font-size: 14px;
  font-weight: 600;
 }
 .dte-pending-row--day {
  cursor: pointer;
 }
 .dte-day-lines {
  margin-left: 24px;
  max-height: 280px;
  overflow-y: auto;
  border-left: 3px solid rgb(25 118 210 / 30%);
  padding-left: 10px;
 }
 .dte-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgb(237 108 2 / 12%);
  color: #b45309;
  &--ok {
    background: rgb(46 125 50 / 12%);
    color: #2e7d32;
  }
 }
 .dte-list-arrow {
  cursor: pointer;
 }
 .dte-same-party {
  color: #c62828;
  font-weight: 600;
 }
@@ -0,0 +1,56 @@
 <!--
  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>{{ title }}</h2>
 <mat-dialog-content>
  <mat-form-field appearance="outline" class="dcd-field">
    <mat-label>Party</mat-label>
    <mat-select [(ngModel)]="partyCode" (selectionChange)="partyChanged()">
      @for (p of eligibleParties; track p.id) {
        <mat-option [value]="p.partyCode">
          {{ p.partyCode }} · {{ p.partyName }} · Daily {{ p.dailyDepositAmount | number: '1.0-0' }}
        </mat-option>
      }
    </mat-select>
    @if (eligibleParties.length === 0) {
      <!-- Only reachable on the arrears side: nobody is behind within the window. -->
      <mat-hint class="dcd-none">No party has recoverable days</mat-hint>
    }
  </mat-form-field>
  <mat-form-field appearance="outline" class="dcd-field">
    <mat-label>Days</mat-label>
    <mat-select [(ngModel)]="days" [disabled]="!partyCode">
      @for (d of dayOptions; track d) {
        <mat-option [value]="d">{{ d }} {{ d === 1 ? 'day' : 'days' }}</mat-option>
      }
    </mat-select>
    @if (isAdvance) {
      <mat-hint>Up to 5 days</mat-hint>
    } @else if (partyCode) {
      <mat-hint>Only days still within the catch-up window</mat-hint>
    }
  </mat-form-field>
  <!--
    What it comes to, shown before it is added rather than after. The clerk quotes this to the
    customer, so it has to be the scheme's own figure and has to be visible while deciding.
  -->
  @if (amount > 0) {
    <div class="dcd-amount">
      <span class="dcd-amount__figure">{{ amount | number: '1.2-2' }}</span>
      <span class="dcd-amount__basis"> {{ days }} × {{ party?.dailyDepositAmount | number: '1.2-2' }} daily </span>
    </div>
  }
 </mat-dialog-content>
 <mat-dialog-actions align="end">
  <button mat-button mat-dialog-close type="button">Cancel</button>
  <button mat-raised-button color="primary" type="button" [disabled]="!canAdd" (click)="add()">Add</button>
 </mat-dialog-actions>
@@ -0,0 +1,42 @@
 /**
 * 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/.
 */
 .dcd-field {
  width: 100%;
 }
 .dcd-none {
  color: #b45309;
 }
 /*
 * The figure the clerk quotes at the counter. Larger than the fields above it because it is the one
 * thing the customer is told, and it is shown with its basis so the clerk can say where it came from
 * rather than just naming a number.
 */
 .dcd-amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 6px;
  background: rgb(15 118 110 / 8%);
  &__figure {
    font-size: 1.3rem;
    font-weight: 600;
    color: #0f766e;
    font-variant-numeric: tabular-nums;
  }
  &__basis {
    font-size: 0.8rem;
    color: rgb(0 0 0 / 60%);
  }
 }
@@ -0,0 +1,115 @@
 /**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 /** Angular Imports */
 import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 /**
 * Collecting for days other than today - either paid ahead, or owed from days gone by.
 *
 * Both are the same act from the counter's side: the customer is paying for a number of days, and
 * what that comes to is the scheme's business, not the clerk's. So the clerk picks days and the
 * amount follows. Typing an amount instead would let the daily figure be worked around a little at a
 * time, and would quote the customer something the scheme does not charge.
 *
 * The two differ only in how many days are on offer. Paying ahead is capped by the bank's allowance.
 * Paying arrears is capped by what is still inside the catch-up window - older instalments are gone,
 * and offering them would have the clerk asking for money the bank has already written off.
 */
@Component({
  selector: 'mifosx-day-collection-dialog',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    MatDialogModule,
    MatButtonModule,
    MatSelectModule,
    MatFormFieldModule,
    MatInputModule
  ],
  templateUrl: './day-collection-dialog.component.html',
  styleUrls: ['./day-collection-dialog.component.scss']
 })
 export class DayCollectionDialogComponent {
  private dialogRef = inject(MatDialogRef<DayCollectionDialogComponent>);
  /** { mode: 'advance' | 'previous', parties: [] } - the agent's parties, as the screen already has them. */
  data = inject<any>(MAT_DIALOG_DATA);
  partyCode = '';
  days: number | '' = '';
  get isAdvance(): boolean {
    return this.data?.mode === 'advance';
  }
  get title(): string {
    return this.isAdvance ? 'Collect in advance' : 'Collect previous days';
  }
  get party(): any {
    return (this.data?.parties || []).find((p: any) => String(p.partyCode) === this.partyCode) || null;
  }
  /**
   * The parties this can be used on.
   *
   * Paying ahead is offered to anyone. Paying arrears is offered only where there are arrears still
   * inside the window - on an account that is up to date there is nothing to collect for past days,
   * and listing it would invite an entry that is really an advance in disguise.
   */
  get eligibleParties(): any[] {
    const parties = this.data?.parties || [];
    return this.isAdvance ? parties : parties.filter((p: any) => Number(p.recoverableAmount || 0) > 0);
  }
  /**
   * How many days may be picked. Five ahead, matching the bank's allowance and the server's own
   * check; for arrears, only what has not yet fallen out of the catch-up window.
   */
  get dayOptions(): number[] {
    const daily = Number(this.party?.dailyDepositAmount || 0);
    if (!this.party || daily <= 0) {
      return [];
    }
    const limit = this.isAdvance ? 5 : Math.floor(Number(this.party.recoverableAmount || 0) / daily);
    return Array.from({ length: Math.max(0, limit) }, (_, index) => index + 1);
  }
  get amount(): number {
    return Number(this.party?.dailyDepositAmount || 0) * Number(this.days || 0);
  }
  /** Clearing the days when the party changes - a count valid for one account is not for another. */
  partyChanged(): void {
    this.days = '';
  }
  get canAdd(): boolean {
    return !!this.partyCode && Number(this.days) > 0 && this.amount > 0;
  }
  add(): void {
    this.dialogRef.close({
      partyCode: this.partyCode,
      days: Number(this.days),
      amount: this.amount,
      // Sent as days, not just an amount: the server recomputes what they come to and checks it
      // against this account, so the figure quoted here is the one that gets posted.
      advanceDays: this.isAdvance ? Number(this.days) : undefined,
      arrearsDays: this.isAdvance ? undefined : Number(this.days)
    });
  }
 }
@@ -0,0 +1,21 @@
 <!--
  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="nd-head">
  <span class="nd-head__ic"><fa-icon icon="info-circle"></fa-icon></span>
  <h2 class="nd-head__title">{{ data.heading }}</h2>
 </div>
 <mat-dialog-content>
  <p class="nd-message">{{ data.message }}</p>
 </mat-dialog-content>
 <!-- One button, because there is nothing here to agree to or call off. -->
 <mat-dialog-actions align="end">
  <button mat-flat-button color="primary" mat-dialog-close>OK</button>
 </mat-dialog-actions>
@@ -0,0 +1,44 @@
 /**
 * 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/.
 */
 .nd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 4px;
  /*
   * Teal rather than the amber or red the platform's other dialogs use. Nothing has gone wrong here
   * and nothing is at risk - the clerk is being told a fact about the agent they picked, and a
   * warning colour would send them looking for a fault that is not there.
   */
  &__ic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgb(15 118 110 / 10%);
    color: #0f766e;
    flex: none;
  }
  &__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
  }
 }
 .nd-message {
  margin: 0;
  max-width: 44ch; /* stylelint-disable-line unit-allowed-list */
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgb(0 0 0 / 70%);
 }
@@ -0,0 +1,39 @@
 /**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 /** Angular Imports */
 import { Component, inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 /**
 * Something the clerk needs told, with nothing to decide.
 *
 * The platform's confirmation dialog asks a question - Cancel or Confirm - and its buttons imply a
 * choice. Used for a plain statement it leaves the clerk hunting for what they are agreeing to, and
 * "Cancel" reads as though the thing being described could be undone. The error dialog has the right
 * single button but dresses the message in red, which turns "this agent has no parties" into a fault.
 *
 * So: one button, and the message stands on its own.
 */
@Component({
  selector: 'mifosx-notice-dialog',
  standalone: true,
  imports: [
    MatDialogModule,
    MatButtonModule,
    FaIconComponent
  ],
  templateUrl: './notice-dialog.component.html',
  styleUrls: ['./notice-dialog.component.scss']
 })
 export class NoticeDialogComponent {
  /** { heading, message } */
  data = inject<any>(MAT_DIALOG_DATA);
 }
@@ -0,0 +1,557 @@
 <!--
  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="dav-page">
  @if (isLoading) {
    <div class="dav-card dav-state">
      <mat-spinner diameter="32"></mat-spinner>
      <span>Loading account…</span>
    </div>
  } @else if (!account) {
    <div class="dav-card dav-state">
      <fa-icon icon="inbox" size="2x"></fa-icon>
      <span>DDS account not found</span>
      <button class="dav-btn" (click)="back()"><fa-icon icon="arrow-left"></fa-icon> DDS Accounts</button>
    </div>
  } @else {
    <!-- Banner, as the savings account page opens -->
    <div class="dav-banner">
      <div class="dav-banner__icon"><fa-icon icon="coins"></fa-icon></div>
      <div class="dav-banner__text">
        <span class="dav-pill" [ngClass]="'dav-pill--' + (account.status || '').toLowerCase()"
          >● {{ account.status }}</span
        >
        <h2 class="dav-banner__title">{{ account.subType }}</h2>
        <div class="dav-banner__meta">
          <span class="dav-banner__label">Account Number</span>
          <span class="dav-banner__value dav-mono">{{ account.accountNo }}</span>
          <span class="dav-banner__label">Client Name</span>
          <span class="dav-banner__value">{{ account.clientName || account.partyName }}</span>
        </div>
      </div>
      <div class="dav-banner__boxes">
        <div class="dav-box">
          <span class="dav-box__label">Current Balance</span>
          <span class="dav-box__value">₹{{ account.currentBalance || 0 | formatNumber }}</span>
        </div>
        <div class="dav-box">
          <span class="dav-box__label">Maturity Amount</span>
          <span class="dav-box__value">₹{{ account.maturityAmount || 0 | formatNumber }}</span>
        </div>
      </div>
      <div class="dav-banner__actions">
        <button class="dav-icon-btn" (click)="back()" matTooltip="Back to DDS Accounts">
          <fa-icon icon="arrow-left"></fa-icon>
        </button>
        <button class="dav-icon-btn" (click)="openInPartyMaster()" matTooltip="Open in DDS Party Master">
          <fa-icon icon="pen"></fa-icon>
        </button>
      </div>
    </div>
    <!-- Tabs -->
    <div class="dav-tabs">
      <button class="dav-tab" [class.dav-tab--on]="tab === 'general'" (click)="tab = 'general'">
        <fa-icon icon="info-circle"></fa-icon> General
      </button>
      <button class="dav-tab" [class.dav-tab--on]="tab === 'transactions'" (click)="tab = 'transactions'">
        <fa-icon icon="exchange-alt"></fa-icon> Transactions
      </button>
      <button class="dav-tab" [class.dav-tab--on]="tab === 'passbook'" (click)="tab = 'passbook'">
        <fa-icon icon="book"></fa-icon> Passbook
      </button>
      <button class="dav-tab" [class.dav-tab--on]="tab === 'nominees'" (click)="tab = 'nominees'">
        <fa-icon icon="user"></fa-icon> Nominees
      </button>
      @if (account.status === 'CLOSED') {
        <button class="dav-tab" [class.dav-tab--on]="tab === 'closure'" (click)="tab = 'closure'">
          <fa-icon icon="lock"></fa-icon> Closure
        </button>
      }
    </div>
    <!-- Closure: how a closed account was closed and where its money went -->
    @if (tab === 'closure') {
      @if (!closure) {
        <div class="dav-card">
          <div class="dav-row"><span>Loading closure details…</span></div>
        </div>
      } @else {
        <div class="dav-columns">
          <div class="dav-column">
            <div class="dav-card">
              <div class="dav-card__head"><span class="dav-card__dot"></span> How It Closed</div>
              <div class="dav-row">
                <span>Type</span>
                <strong>
                  {{ closureLabels[closure.closureType] || closure.closureType }}
                  @if (closure.withinLockin) {
                    <em class="dav-closure-tag">within lock-in</em>
                  }
                </strong>
              </div>
              <div class="dav-row">
                <span>Closed On</span><strong>{{ closure.closeDate | date: 'dd MMMM yyyy' }}</strong>
              </div>
              @if (closure.paidOutBy) {
                <div class="dav-row">
                  <span>Paid Out By</span><strong>{{ closure.paidOutBy }}</strong>
                </div>
              }
              <div class="dav-row">
                <span>Closed By</span><strong>{{ closure.closedBy || '—' }}</strong>
              </div>
              <div class="dav-row">
                <span>Approved By</span><strong>{{ closure.approvedBy || '—' }}</strong>
              </div>
              @if (closure.lockinOverrideReason) {
                <div class="dav-row">
                  <span>Reason</span><strong>{{ closure.lockinOverrideReason }}</strong>
                </div>
              }
              @if (closure.shortfallBorneBy) {
                <div class="dav-row">
                  <span>Cost Borne By</span>
                  <strong>{{
                    closure.shortfallBorneBy === 'AGENT' ? 'Agent — ' + closure.agentCode : 'Customer'
                  }}</strong>
                </div>
              }
            </div>
            <div class="dav-card">
              <div class="dav-card__head"><span class="dav-card__dot"></span> The Money</div>
              <div class="dav-row">
                <span>Balance at Close</span><strong>₹{{ closure.balanceAtClose || 0 | formatNumber }}</strong>
              </div>
              @if (closure.interestRecovered > 0) {
                <div class="dav-row">
                  <span>Interest Recovered</span
                  ><strong class="dav-dr">− ₹{{ closure.interestRecovered | formatNumber }}</strong>
                </div>
              }
              @if (closure.interestToppedUpByAgent > 0) {
                <div class="dav-row">
                  <span>Interest Funded by Agent</span
                  ><strong class="dav-cr">+ ₹{{ closure.interestToppedUpByAgent | formatNumber }}</strong>
                </div>
              }
              <div class="dav-row dav-closure-total">
                <span>Paid Out</span><strong>₹{{ closure.paidOut || 0 | formatNumber }}</strong>
              </div>
              @if (closure.closureType === 'PREMATURE') {
                <div class="dav-row">
                  <span>Agent Penalty ({{ closure.agentCode }})</span
                  ><strong>₹{{ closure.agentCommissionPenalty || 0 | formatNumber }}</strong>
                </div>
              }
            </div>
          </div>
          <div class="dav-column">
            <div class="dav-card">
              <div class="dav-card__head"><span class="dav-card__dot"></span> Where It Went</div>
              @if (closure.destination === 'OWN_ACCOUNT') {
                <div class="dav-row"><span>Paid Into</span><strong>Customer's own account</strong></div>
                <div class="dav-row">
                  <span>Account</span><strong class="dav-mono">{{ closure.creditedAccount?.accountNo }}</strong>
                </div>
                @if (closure.creditedAccount?.productName) {
                  <div class="dav-row">
                    <span>Product</span><strong>{{ closure.creditedAccount.productName }}</strong>
                  </div>
                }
                @if (closure.creditedAccount?.owner) {
                  <div class="dav-row">
                    <span>Holder</span><strong>{{ closure.creditedAccount.owner }}</strong>
                  </div>
                }
              } @else if (closure.destination === 'SUNDRY') {
                <div class="dav-row"><span>Parked In</span><strong>Sundry (customer has no account here)</strong></div>
                <div class="dav-row">
                  <span>GL Account</span
                  ><strong class="dav-mono">{{ closure.sundryGl?.glCode }} · {{ closure.sundryGl?.glName }}</strong>
                </div>
              } @else {
                <div class="dav-row"><span>Paid Out</span><strong>Nothing - the balance was nil</strong></div>
              }
              @if (closure.voucherNo) {
                <div class="dav-row">
                  <span>Voucher</span><strong class="dav-mono">{{ closure.voucherNo }}</strong>
                </div>
              }
              @if (closure.payoutDate) {
                <div class="dav-row">
                  <span>Paid On</span><strong>{{ closure.payoutDate | date: 'dd MMMM yyyy' }}</strong>
                </div>
              }
              @if (closure.passbookNote) {
                <div class="dav-row">
                  <span>Passbook Note</span><strong>{{ closure.passbookNote }}</strong>
                </div>
              }
            </div>
            @if (closure.ledgerEntries?.length) {
              <div class="dav-card">
                <div class="dav-card__head"><span class="dav-card__dot"></span> Ledger Entry</div>
                <div class="dav-row">
                  <span>Transaction ID</span><strong class="dav-mono">{{ closure.ledgerTransactionId }}</strong>
                </div>
                @for (leg of closure.ledgerEntries; track $index) {
                  <div class="dav-row">
                    <span>{{ leg.glCode }} · {{ leg.glName }}</span>
                    <strong [class.dav-dr]="leg.side === 'DR'" [class.dav-cr]="leg.side === 'CR'">
                      {{ leg.side }} ₹{{ leg.amount | formatNumber }}
                    </strong>
                  </div>
                }
              </div>
            }
          </div>
        </div>
      }
    }
    <!-- General -->
    @if (tab === 'general') {
      <div class="dav-columns">
        <div class="dav-column">
          <div class="dav-card">
            <div class="dav-card__head"><span class="dav-card__dot"></span> DDS Details</div>
            <div class="dav-row">
              <span>Account Number</span><strong class="dav-mono">{{ account.accountNo }}</strong>
            </div>
            <div class="dav-row">
              <span>Party Code</span><strong>{{ account.partyCode }}</strong>
            </div>
            <div class="dav-row">
              <span>Client Name</span><strong>{{ account.clientName }} ({{ account.clientId }})</strong>
            </div>
            <div class="dav-row">
              <span>Agent</span><strong>{{ account.agentCode }} · {{ account.agentName }}</strong>
            </div>
            <div class="dav-row">
              <span>Branch</span><strong>{{ account.officeName }}</strong>
            </div>
            <div class="dav-row">
              <span>Product</span><strong>{{ account.subType }}</strong>
            </div>
            <div class="dav-row">
              <span>Opened On</span><strong>{{ account.openingDate | date: 'dd MMMM yyyy' }}</strong>
            </div>
            <div class="dav-row">
              <span>Matures On</span><strong>{{ account.maturityDate | date: 'dd MMMM yyyy' }}</strong>
            </div>
            <div class="dav-row">
              <span>Daily Deposit</span><strong>₹{{ account.dailyDepositAmount || 0 | formatNumber }}</strong>
            </div>
            <div class="dav-row">
              <span>Term</span><strong>{{ account.month }} months · {{ account.days }} days</strong>
            </div>
            <div class="dav-row">
              <span>Interest Rate</span><strong>{{ account.interestRate }} %</strong>
            </div>
            <div class="dav-row">
              <span>Currency</span><strong>Indian Rupee <em class="dav-mono">[INR]</em></strong>
            </div>
          </div>
          <div class="dav-card">
            <div class="dav-card__head"><span class="dav-card__dot"></span> Performance History</div>
            <div class="dav-row">
              <span>Total Collected</span><strong class="dav-cr">₹{{ totalOf('PARTY_TRAN') | formatNumber }}</strong>
            </div>
            <div class="dav-row">
              <span>Total Interest Earned</span><strong>₹{{ interestEarned | formatNumber }}</strong>
            </div>
            <div class="dav-row">
              <span>Total Paid Out</span><strong class="dav-dr">₹{{ totalDebitsAll | formatNumber }}</strong>
            </div>
          </div>
        </div>
        <div class="dav-column">
          <div class="dav-card">
            <div class="dav-card__head"><span class="dav-card__dot"></span> Account Summary</div>
            <div class="dav-row">
              <span>Collected to Date</span><strong>₹{{ account.collectedToDate || 0 | formatNumber }}</strong>
            </div>
            <div class="dav-row">
              <span>Expected to Date</span><strong>₹{{ account.expectedToDate || 0 | formatNumber }}</strong>
            </div>
            <div class="dav-row">
              <span>Standing</span>
              <strong>
                @if (account.advanceDays > 0) {
                  {{ account.advanceDays }} days ahead
                } @else if (account.arrearsDays > 0) {
                  <span class="dav-dr">{{ account.arrearsDays }} days behind</span>
                } @else {
                  Up to date
                }
              </strong>
            </div>
            <div class="dav-row">
              <span>Instalments Due</span><strong>{{ account.instalmentsDue ?? 0 }}</strong>
            </div>
            <div class="dav-row">
              <span>Interest Earned</span><strong>₹{{ interestEarned | formatNumber }}</strong>
            </div>
            <div class="dav-row">
              <span>Interest Calculated, Not Posted</span
              ><strong>₹{{ account.interestCalc || 0 | formatNumber }}</strong>
            </div>
            <div class="dav-row"><span>Interest Calculated Using</span><strong>Daily Balance</strong></div>
            <div class="dav-row"><span>Days in Year</span><strong>365 Days</strong></div>
            <div class="dav-row">
              <span>Last Interest Date</span
              ><strong>{{ account.interestDate ? (account.interestDate | date: 'dd MMMM yyyy') : '—' }}</strong>
            </div>
            <div class="dav-row">
              <span>Last Transaction Date</span
              ><strong>{{ lastTransactionDate ? (lastTransactionDate | date: 'dd MMMM yyyy') : '—' }}</strong>
            </div>
            <div class="dav-row">
              <span>Maturity Amount</span><strong>₹{{ account.maturityAmount || 0 | formatNumber }}</strong>
            </div>
            <div class="dav-row">
              <span>Lien</span>
              <strong>{{ account.lien ? 'Yes — ₹' + (account.amountHeldUnderLien || 0) : 'No' }}</strong>
            </div>
            <div class="dav-row">
              <span>Freeze</span><strong>{{ account.freezeCode || 'Normal' }}</strong>
            </div>
            @if (account.closeDate) {
              <div class="dav-row">
                <span>Closed On</span><strong>{{ account.closeDate | date: 'dd MMMM yyyy' }}</strong>
              </div>
            }
          </div>
        </div>
      </div>
    }
    <!-- Transactions -->
    @if (tab === 'transactions') {
      <div class="dav-card">
        <div class="dav-toolbar">
          <div class="dav-datepick">
            <span>From</span>
            <input type="date" [formControl]="fromDateControl" [max]="today" />
          </div>
          <div class="dav-datepick">
            <span>To</span>
            <input type="date" [formControl]="toDateControl" [max]="today" />
          </div>
          <button class="dav-btn" (click)="showToday()"><fa-icon icon="clock"></fa-icon> Today</button>
          @if (hasDateFilters) {
            <button class="dav-btn" (click)="clearDateFilters()"><fa-icon icon="times"></fa-icon> Clear</button>
          }
          <div class="dav-totals">
            <span class="dav-cr">Credits ₹{{ totalCredits | formatNumber }}</span>
            <span class="dav-dr">Debits ₹{{ totalDebits | formatNumber }}</span>
          </div>
          <button class="dav-btn dav-btn--primary" (click)="exportCsv()" [disabled]="shownTransactions.length === 0">
            Export
          </button>
        </div>
        @if (shownTransactions.length === 0) {
          <div class="dav-state">
            <fa-icon icon="inbox" size="2x"></fa-icon>
            <span>{{
              hasDateFilters
                ? 'Nothing moved on this account in these dates'
                : 'Nothing has been credited to this account yet'
            }}</span>
          </div>
        } @else {
          <div class="dav-table-wrap">
            <table class="dav-table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>ID</th>
                  <th>Transaction Date</th>
                  <th>Transaction Type</th>
                  <th>Voucher</th>
                  <th>Description</th>
                  <th class="dav-right">Debit</th>
                  <th class="dav-right">Credit</th>
                  <th class="dav-right">Balance</th>
                </tr>
              </thead>
              <tbody>
                @for (txn of shownTransactions; track txn.id; let i = $index) {
                  <tr>
                    <td>{{ i + 1 }}</td>
                    <td>{{ txn.id }}</td>
                    <td>{{ txn.transactionDate | date: 'dd MMMM yyyy' }}</td>
                    <td>{{ label(txn.transactionType) }}</td>
                    <td class="dav-mono">{{ txn.voucherNo || '—' }}</td>
                    <td class="dav-desc">{{ txn.description }}</td>
                    <td class="dav-right">
                      {{ txn.direction === 'DEBIT' ? '₹' + (txn.amount | formatNumber) : 'N/A' }}
                    </td>
                    <td class="dav-right">
                      {{ txn.direction === 'CREDIT' ? '₹' + (txn.amount | formatNumber) : 'N/A' }}
                    </td>
                    <td class="dav-right">
                      <strong>₹{{ txn.balanceAfterTransaction || 0 | formatNumber }}</strong>
                    </td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
        }
      </div>
    }
    <!-- Passbook: the same entries oldest first, the way a passbook is written up, and printable -->
    @if (tab === 'passbook') {
      <div class="dav-card">
        <div class="dav-toolbar dav-noprint">
          <div class="dav-datepick">
            <span>From</span>
            <input type="date" [formControl]="fromDateControl" [max]="today" />
          </div>
          <div class="dav-datepick">
            <span>To</span>
            <input type="date" [formControl]="toDateControl" [max]="today" />
          </div>
          @if (hasDateFilters) {
            <button class="dav-btn" (click)="clearDateFilters()"><fa-icon icon="times"></fa-icon> Clear</button>
          }
          <button class="dav-btn dav-btn--primary dav-push" (click)="printPassbook()">
            <fa-icon icon="print"></fa-icon> Print
          </button>
        </div>
        <div class="dav-passbook" id="dds-passbook">
          <div class="dav-pb-head">
            <div>
              <div class="dav-pb-title">DDS Passbook</div>
              <div class="dav-pb-sub">{{ account.officeName }}</div>
            </div>
            <div class="dav-pb-grid">
              <span>Account No</span><strong class="dav-mono">{{ account.accountNo }}</strong> <span>Party Code</span
              ><strong>{{ account.partyCode }}</strong> <span>Name</span
              ><strong>{{ account.clientName || account.partyName }}</strong> <span>Product</span
              ><strong>{{ account.subType }} · {{ account.interestRate }} %</strong> <span>Opened On</span
              ><strong>{{ account.openingDate | date: 'dd/MM/yyyy' }}</strong> <span>Agent</span
              ><strong>{{ account.agentCode }}</strong>
            </div>
          </div>
          @if (passbookEntries.length === 0) {
            <div class="dav-state">
              <span>{{ hasDateFilters ? 'No entries in these dates' : 'No entries yet' }}</span>
            </div>
          } @else {
            <table class="dav-table dav-pb-table">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Voucher</th>
                  <th>Particulars</th>
                  <th class="dav-right">Withdrawals</th>
                  <th class="dav-right">Deposits</th>
                  <th class="dav-right">Balance</th>
                </tr>
              </thead>
              <tbody>
                @for (txn of passbookEntries; track txn.id) {
                  <tr>
                    <td>{{ txn.transactionDate | date: 'dd/MM/yyyy' }}</td>
                    <td class="dav-mono">{{ txn.voucherNo || '' }}</td>
                    <td>
                      {{ label(txn.transactionType) }}
                      @if (txn.description) {
                        <span class="dav-pb-note">{{ txn.description }}</span>
                      }
                    </td>
                    <td class="dav-right">{{ txn.direction === 'DEBIT' ? (txn.amount | formatNumber) : '' }}</td>
                    <td class="dav-right">{{ txn.direction === 'CREDIT' ? (txn.amount | formatNumber) : '' }}</td>
                    <td class="dav-right">
                      <strong>{{ txn.balanceAfterTransaction || 0 | formatNumber }}</strong>
                    </td>
                  </tr>
                }
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="3"><strong>Total</strong></td>
                  <td class="dav-right">
                    <strong>{{ totalDebits | formatNumber }}</strong>
                  </td>
                  <td class="dav-right">
                    <strong>{{ totalCredits | formatNumber }}</strong>
                  </td>
                  <td class="dav-right">
                    <strong>{{ passbookClosingBalance | formatNumber }}</strong>
                  </td>
                </tr>
              </tfoot>
            </table>
          }
        </div>
      </div>
    }
    <!-- Nominees -->
    @if (tab === 'nominees') {
      <div class="dav-card">
        @if (!account.nominees || account.nominees.length === 0) {
          <div class="dav-state">
            <fa-icon icon="user" size="2x"></fa-icon>
            <span>No nominee on this account</span>
          </div>
        } @else {
          <div class="dav-table-wrap">
            <table class="dav-table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Relation</th>
                  <th>Gender</th>
                  <th>Mobile</th>
                  <th>Birth Date</th>
                  <th>Nominated On</th>
                  <th>Guardian</th>
                  <th class="dav-right">{{ account.nomineeSplitMode === 'Sequence' ? 'Order' : 'Share %' }}</th>
                </tr>
              </thead>
              <tbody>
                @for (nominee of account.nominees; track nominee.id; let i = $index) {
                  <tr>
                    <td>{{ i + 1 }}</td>
                    <td>
                      <strong>{{ nominee.name }}</strong>
                    </td>
                    <td>{{ nominee.relation }}</td>
                    <td>{{ nominee.gender }}</td>
                    <td>{{ nominee.mobileNo || '—' }}</td>
                    <td>{{ nominee.birthDate ? (nominee.birthDate | date: 'dd MMM yyyy') : '—' }}</td>
                    <td>{{ nominee.nominationDate ? (nominee.nominationDate | date: 'dd MMM yyyy') : '—' }}</td>
                    <td>{{ nominee.guardianName || '—' }}</td>
                    <td class="dav-right">
                      {{ account.nomineeSplitMode === 'Sequence' ? nominee.sequenceNo : (nominee.sharePercent ?? '—') }}
                    </td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
        }
      </div>
    }
  }
 </div>
@@ -0,0 +1,459 @@
 /**
 * 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/.
 */
 /* One DDS account's page, laid out the way the savings account page is: a banner, tabs, cards. */
 .dav-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 32px;
 }
 .dav-mono {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
  font-style: normal;
 }
 .dav-cr {
  color: #047857;
 }
 .dav-dr {
  color: #b91c1c;
 }
 .dav-right {
  text-align: right !important;
 }
 /* ── Banner ───────────────────────────────────────────────────────────── */
 .dav-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(90deg, #1e3a8a 0%, #2d3fb4 55%, #5b47d6 100%);
  box-shadow: 0 8px 24px rgb(30 58 138 / 25%);
 }
 .dav-banner__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  background: rgb(255 255 255 / 16%);
  border: 1px solid rgb(255 255 255 / 25%);
 }
 .dav-banner__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
 }
 .dav-pill {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgb(16 185 129 / 25%);
  color: #a7f3d0;
  border: 1px solid rgb(167 243 208 / 40%);
 }
 .dav-pill--closed {
  background: rgb(148 163 184 / 25%);
  color: #e2e8f0;
  border-color: rgb(226 232 240 / 40%);
 }
 .dav-banner__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
 }
 .dav-banner__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
 }
 .dav-banner__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 60%);
 }
 .dav-banner__value {
  font-size: 0.9rem;
  font-weight: 600;
 }
 .dav-banner__boxes {
  margin-left: auto;
  display: flex;
  gap: 12px;
 }
 .dav-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 25%);
 }
 .dav-box__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 70%);
 }
 .dav-box__value {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
 }
 .dav-banner__actions {
  display: flex;
  gap: 8px;
 }
 .dav-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 35%);
  background: rgb(255 255 255 / 12%);
  color: #fff;
  cursor: pointer;
  &:hover {
    background: rgb(255 255 255 / 22%);
  }
 }
 /* ── Tabs ─────────────────────────────────────────────────────────────── */
 .dav-tabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 7%);
 }
 .dav-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  &:hover {
    background: #f1f5f9;
  }
 }
 .dav-tab--on {
  color: #fff;
  background: linear-gradient(90deg, #1d4ed8, #2563eb);
  box-shadow: 0 4px 12px rgb(37 99 235 / 30%);
  &:hover {
    background: linear-gradient(90deg, #1d4ed8, #2563eb);
  }
 }
 /* ── Cards ────────────────────────────────────────────────────────────── */
 .dav-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
  align-items: start;
 }
 .dav-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
 }
 .dav-card {
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 7%);
  overflow: hidden;
 }
 .dav-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 700;
  background: #f8fafc;
  border-bottom: 1px solid rgb(0 0 0 / 7%);
 }
 .dav-card__dot {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
 }
 .dav-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px dashed rgb(0 0 0 / 7%);
  font-size: 0.92rem;
  &:last-child {
    border-bottom: 0;
  }
  span {
    color: #334155;
  }
  strong {
    text-align: right;
    font-weight: 600;
  }
 }
 .dav-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 16px;
  color: rgb(0 0 0 / 50%);
 }
 /* ── Transactions ─────────────────────────────────────────────────────── */
 .dav-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid rgb(0 0 0 / 7%);
 }
 .dav-datepick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(0 0 0 / 45%);
  }
  input {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgb(0 0 0 / 15%);
    font: inherit;
  }
 }
 .dav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgb(0 0 0 / 15%);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
 }
 .dav-btn--primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg, #1d4ed8, #2563eb);
 }
 .dav-totals {
  margin-left: auto;
  display: flex;
  gap: 16px;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
 }
 .dav-table-wrap {
  overflow-x: auto;
 }
 .dav-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  th {
    padding: 14px 16px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
    white-space: nowrap;
  }
  td {
    padding: 16px;
    border-bottom: 1px solid rgb(0 0 0 / 5%);
    font-variant-numeric: tabular-nums;
  }
  tbody tr:nth-child(odd) {
    background: #f8fafc;
  }
 }
 .dav-desc {
  max-width: 320px;
  color: rgb(0 0 0 / 65%);
 }
@media (width <= 720px) {
  .dav-page {
    padding: 16px;
  }
  .dav-banner__boxes {
    margin-left: 0;
    width: 100%;
  }
  .dav-tab {
    font-size: 0.85rem;
    padding: 8px;
  }
 }
 /* ── Passbook ─────────────────────────────────────────────────────────── */
 .dav-push {
  margin-left: auto;
 }
 .dav-passbook {
  padding: 20px;
 }
 .dav-pb-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #1e3a8a;
 }
 .dav-pb-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e3a8a;
 }
 .dav-pb-sub {
  font-size: 0.85rem;
  color: rgb(0 0 0 / 55%);
 }
 .dav-pb-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 16px;
  font-size: 0.88rem;
  span {
    color: rgb(0 0 0 / 55%);
  }
 }
 .dav-pb-table {
  tfoot td {
    padding: 14px 16px;
    border-top: 2px solid rgb(0 0 0 / 15%);
  }
 }
 .dav-pb-note {
  display: block;
  font-size: 0.78rem;
  color: rgb(0 0 0 / 50%);
 }
 /* Closure tab */
 .dav-closure-tag {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fff3e0;
  color: #e65100;
  font-size: 0.75rem;
  font-style: normal;
 }
 .dav-closure-total {
  border-top: 1px solid rgb(0 0 0 / 10%);
  font-weight: 600;
 }
@@ -0,0 +1,297 @@
 /**
 * 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 { ActivatedRoute, Router } from '@angular/router';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { NgClass } from '@angular/common';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { forkJoin, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { FormatNumberPipe } from 'app/pipes/format-number.pipe';
 import { OrganizationService } from 'app/organization/organization.service';
 /** What each DDS transaction type is called on screen. */
 const TRANSACTION_LABELS: Record<string, string> = {
  PARTY_TRAN: 'Collection',
  INTEREST_POST: 'Interest',
  OD_INTEREST_POST: 'OD Interest',
  MATURITY_PAYOUT: 'Maturity Payout',
  PREMATURE_PAYOUT: 'Premature Payout',
  PREMATURE_INT_RECOVERY: 'Interest Recovered (Premature)',
  PREMATURE_AGENT_TOP_UP: 'Interest Funded by Agent',
  WITHDRAW_DEPOSITE: 'Transfer (Withdraw Deposite)',
  TRANSFER: 'Transfer'
 };
 /**
 * One DDS account and everything that has moved on it, as the savings account page shows a savings
 * account: the account's terms and where it stands, then its transactions with the balance after
 * each, narrowed to a day or a range.
 *
 * Read-only. The account is changed from DDS Party Master; its money moves through collections, the
 * cashier and the batch runs.
 */
@Component({
  selector: 'mifosx-dds-account-view',
  templateUrl: './dds-account-view.component.html',
  styleUrls: ['./dds-account-view.component.scss'],
  standalone: true,
  imports: [
    ...STANDALONE_SHARED_IMPORTS,
    ReactiveFormsModule,
    NgClass,
    FaIconComponent,
    MatTooltipModule,
    MatProgressSpinnerModule,
    FormatNumberPipe
  ]
 })
 export class DdsAccountViewComponent implements OnInit {
  private route = inject(ActivatedRoute);
  private router = inject(Router);
  private organizationService = inject(OrganizationService);
  isLoading = true;
  account: any = null;
  private transactions: any[] = [];
  /** The page's tabs, as the savings account page has them - only those that apply to DDS. */
  tab: 'general' | 'transactions' | 'passbook' | 'nominees' | 'closure' = 'general';
  /** How a closed account was closed - read only for closed accounts, for the Closure tab. */
  closure: any = null;
  /** What each kind of closure is called on screen. */
  readonly closureLabels: Record<string, string> = {
    PREMATURE: 'Premature Close',
    MATURITY_PAYOUT_AND_CLOSE: 'Maturity Payout & Close',
    MATURITY_PAYOUT_THEN_CLOSE: 'Maturity Payout, then Closed',
    MATURITY_AUTO_CLOSE: 'Maturity Auto Close (night job)',
    CLOSED_NIL_BALANCE: 'Closed with nil balance'
  };
  /** The passbook reads oldest first, as it is written up. */
  get passbookEntries(): any[] {
    return [...this.shownTransactions].reverse();
  }
  /** The balance after the last entry shown. */
  get passbookClosingBalance(): number {
    const entries = this.passbookEntries;
    return entries.length > 0 ? Number(entries[entries.length - 1].balanceAfterTransaction || 0) : 0;
  }
  /**
   * Prints the passbook alone. It is copied into a window of its own with only its own styles, so the
   * page's menus, banner and tabs do not come out on the paper.
   */
  printPassbook(): void {
    const passbook = document.getElementById('dds-passbook');
    const popup = window.open('', '_blank', 'width=900,height=700');
    if (!passbook || !popup) {
      return;
    }
    popup.document.write(`<html><head><title>${this.account?.accountNo || 'DDS'} Passbook</title><style>
      body { font-family: Arial, sans-serif; margin: 24px; color: #111; }
      .dav-pb-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
      .dav-pb-title { font-size: 20px; font-weight: 700; }
      .dav-pb-sub { color: #555; }
      .dav-pb-grid { display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-size: 13px; }
      .dav-pb-grid span { color: #555; }
      table { width: 100%; border-collapse: collapse; font-size: 13px; }
      th, td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
      .dav-right { text-align: right; }
      .dav-pb-note { display: block; font-size: 11px; color: #555; }
    </style></head><body>${passbook.innerHTML}</body></html>`);
    popup.document.close();
    popup.focus();
    popup.print();
  }
  fromDateControl = new FormControl('');
  toDateControl = new FormControl('');
  readonly today = new Date().toISOString().split('T')[0];
  ngOnInit(): void {
    const partyId = this.route.snapshot.paramMap.get('partyId');
    if (!partyId) {
      this.isLoading = false;
      return;
    }
    forkJoin({
      account: this.organizationService.getParty(partyId).pipe(catchError(() => of(null))),
      transactions: this.organizationService.getPartyTransactionsOfParty(partyId).pipe(catchError(() => of([])))
    }).subscribe(({ account, transactions }) => {
      this.account = account;
      if (account?.status === 'CLOSED') {
        this.organizationService.getPartyClosure(partyId).subscribe({
          next: (closure: any) => (this.closure = closure),
          error: () => (this.closure = null)
        });
      }
      // Newest first, and within a day the later entry first - the order a passbook is read back in.
      this.transactions = (Array.isArray(transactions) ? transactions : []).sort(
        (a: any, b: any) =>
          String(b.transactionDate).localeCompare(String(a.transactionDate)) || Number(b.id) - Number(a.id)
      );
      this.isLoading = false;
    });
  }
  /** The transactions in the chosen range - all of them when no range is set. */
  get shownTransactions(): any[] {
    const from = this.fromDateControl.value;
    const to = this.toDateControl.value;
    return this.transactions.filter((txn: any) => {
      const day = String(txn.transactionDate || '');
      if (from && day < String(from)) {
        return false;
      }
      if (to && day > String(to)) {
        return false;
      }
      return true;
    });
  }
  get totalCredits(): number {
    return this.sumOf('CREDIT');
  }
  get totalDebits(): number {
    return this.sumOf('DEBIT');
  }
  private sumOf(direction: string): number {
    return this.shownTransactions
      .filter((txn: any) => txn.direction === direction)
      .reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
  }
  /** Everything of one type ever credited, whatever the date filter says - for the summary cards. */
  totalOf(type: string): number {
    return this.transactions
      .filter((txn: any) => txn.transactionType === type && txn.direction === 'CREDIT')
      .reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
  }
  /** Interest credited, less any taken back on an early closure. */
  get interestEarned(): number {
    const recovered = this.transactions
      .filter((txn: any) => txn.transactionType === 'PREMATURE_INT_RECOVERY')
      .reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
    return (
      this.totalOf('INTEREST_POST') +
      this.totalOf('OD_INTEREST_POST') +
      this.totalOf('PREMATURE_AGENT_TOP_UP') -
      recovered
    );
  }
  /** Money that has left the account - payouts, withdrawals, transfers out. */
  get totalDebitsAll(): number {
    return this.transactions
      .filter((txn: any) => txn.direction === 'DEBIT' && txn.transactionType !== 'PREMATURE_INT_RECOVERY')
      .reduce((sum: number, txn: any) => sum + Number(txn.amount || 0), 0);
  }
  get lastTransactionDate(): string | null {
    return this.transactions.length > 0 ? this.transactions[0].transactionDate : null;
  }
  /** The rows on screen, as a spreadsheet the branch can keep or send on. */
  exportCsv(): void {
    const header = [
      '#',
      'ID',
      'Transaction Date',
      'Transaction Type',
      'Voucher',
      'Description',
      'Account',
      'Debit',
      'Credit',
      'Balance'
    ];
    const quote = (value: any) => `"${String(value ?? '').replace(/"/g, '""')}"`;
    const lines = this.shownTransactions.map((txn: any, index: number) =>
      [
        index + 1,
        txn.id,
        txn.transactionDate,
        this.label(txn.transactionType),
        txn.voucherNo,
        txn.description,
        txn.accountNo,
        txn.direction === 'DEBIT' ? txn.amount : '',
        txn.direction === 'CREDIT' ? txn.amount : '',
        txn.balanceAfterTransaction
      ]
        .map(quote)
        .join(',')
    );
    const blob = new Blob(
      [[
          header.map(quote).join(','),
          ...lines
        ].join('\r\n')],
      { type: 'text/csv;charset=utf-8' }
    );
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `${this.account?.accountNo || 'dds-account'}-transactions.csv`;
    link.click();
    URL.revokeObjectURL(link.href);
  }
  get hasDateFilters(): boolean {
    return !!(this.fromDateControl.value || this.toDateControl.value);
  }
  showToday(): void {
    this.fromDateControl.setValue(this.today);
    this.toDateControl.setValue(this.today);
  }
  clearDateFilters(): void {
    this.fromDateControl.setValue('');
    this.toDateControl.setValue('');
  }
  label(type: string): string {
    return TRANSACTION_LABELS[type] || String(type || '').replace(/_/g, ' ');
  }
  statusClass(): string {
    switch (this.account?.status) {
      case 'ACTIVE':
        return 'status--active';
      case 'CLOSED':
        return 'status--closed';
      default:
        return 'status--default';
    }
  }
  back(): void {
    this.router.navigate(['/accounts/dds-accounts']);
  }
  openInPartyMaster(): void {
    this.router.navigate([
      '/accounts/dds',
      this.account.id,
      'edit'
    ]);
  }
 }
--- a/Show More
+++ b/Show More