feat(deposits): FD Renewal History tab, redesigned Payment action, and renewal-aware Transactions/certificate

WHAT THIS CHANGES
==================
Frontend counterpart to the backend FD in-place renewal, senior-citizen
rate, and Payment action work.

1. RENEWAL HISTORY TAB (new) -- fixed-deposit-account-view/renewal-history-tab/.
   A vertical timeline, one card per term of the FD, oldest first. Backend
   data arrives as a list of lowercase-keyed maps (Postgres unquoted SQL
   aliases), which the component normalises. Includes term-rate-chart-dialog,
   a popup showing one term's full rate-by-tenure chart, including the
   senior-citizen column, with an "Applied" badge on the rate that was
   actually used. Route added in fixed-deposits-routing.module.ts, tab
   link added in fixed-deposit-account-view.component.html (shown only
   when the account has renewal history).

2. PAYMENT DIALOG (new) -- fixed-deposit-account-view/custom-dialogs/payment-dialog/.
   Card-based picker for the four supported closure types (Transfer to
   Savings, Re-Invest Principal and Interest, Re-Invest Principal Only,
   Partial Re-Invest), with Withdraw Deposit filtered out client-side.
   Fetches its own template via a new fixedDepositsService method
   (getFixedDepositsAccountPaymentTemplate, command=payment) rather than
   reusing the Close template, since the Payment template is the only one
   the backend includes PARTIAL_REINVEST in.
   The Partial Re-Invest amount cap is date-dependent: the backend bounds
   it against the account balance AFTER posting interest to the chosen
   closed-on date, which lands on the maturity amount on or after
   maturity and on the current balance before it. The dialog mirrors this
   (reinvestCap / processingOnOrAfterMaturity) so the shown split actually
   adds up and the client-side validator agrees with the server. This was
   wrong in an earlier pass of this work (compared against a fixed figure
   regardless of date) and was caught and fixed via a real reconciliation
   check (77000 + 23000 did not equal the displayed total) before this
   commit.
   Added: a loading-failure state (previously the spinner ran forever on
   a failed template fetch), an inline submit-error message (previously a
   failed POST left the dialog open with no feedback), an empty-savings-
   accounts hint, and accessibility attributes on the option cards
   (role="radio", aria-checked, a visible check icon, focus-visible
   outline) since selection was previously colour-only.

3. TRANSACTIONS TAB -- merges synthetic "FD Renewed" marker rows into the
   real transaction list, since an in-place renewal posts no actual
   ledger transaction and would otherwise look like the balance changed
   for no reason.

4. INTEREST RATE CHART TAB -- added the senior-citizen rate column.

5. DEPOSIT CERTIFICATE DIALOG -- lists the full renewal history on FD
   certificates. renewalCount is renewalHistory.length - 1 (the first
   row is the original term, not a renewal); an earlier version of this
   used the raw row count and overstated the renewal count by one on a
   customer-facing document, caught and fixed before this commit.

6. CLIENTS GENERAL TAB -- fixedDepositAccountsForDisplay folds a renewed
   FD's superseded terms out of the account list (each renewal used to
   show as two unrelated accounts, one Closed and one Active). Memoised
   on the source array's identity so it does not rebuild, and rebind the
   table, on every change-detection tick. Only rewrites FD rows; Savings,
   RD, Current, and Share account rows pass through this getter
   untouched, and the RD/Savings sections of the template were left
   bound directly to the original savingAccounts array.

KNOWN CAVEATS
=============
  - This depends on the paired backend commit (same date, "feat(deposits):
    FD in-place renewal, senior-citizen rate persistence, and Payment
    action"). Deploying this frontend without that backend change means
    the Payment dialog and Renewal History tab will call endpoints that
    do not exist yet.
  - Renewal-history rows rely on the backend returning lowercase column
    keys (a Postgres-specific behaviour of unquoted SQL aliases via
    JdbcTemplate). Confirmed correct against this project's Postgres
    dev database; if this project ever runs on a different database
    engine, that assumption would need re-checking.
  - src/environments/.env.ts is intentionally excluded from this commit;
    it is a local build-version stamp file that should never be
    committed.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html

@@ -119,7 +119,7 @@
         <button
           mat-raised-button
           color="primary"
-          [disabled]="!glAccountForm.valid || submitting"
+          [disabled]="!glAccountForm.valid"
           *mifosxHasPermission="'CREATE_GLACCOUNT'"
         >
           {{ 'labels.buttons.Submit' | translate }}

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts

@@ -14,7 +14,6 @@ import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
 import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
 
@@ -43,7 +42,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateGlAccountComponent implements OnInit, AfterViewInit {
   private formBuilder = inject(UntypedFormBuilder);
   private accountingService = inject(AccountingService);
-  private alertService = inject(AlertService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private configurationWizardService = inject(ConfigurationWizardService);
@@ -52,8 +50,6 @@ export class CreateGlAccountComponent implements OnInit, AfterViewInit {
 
   /** GL account form. */
   glAccountForm: UntypedFormGroup;
-  /** Submitting state to prevent duplicate submissions. */
-  submitting = false;
   /** Chart of accounts data. */
   chartOfAccountsData: any;
   /** Account type data. */
@@ -170,40 +166,24 @@ export class CreateGlAccountComponent implements OnInit, AfterViewInit {
 
   /**
    * Submits the gl account form and creates gl account,
-   * if successful redirects to view created account or back to list if awaiting approval.
+   * if successful redirects to view created account.
    */
   submit() {
-    if (this.glAccountForm.invalid || this.submitting) {
+    if (this.glAccountForm.invalid) {
       return;
     }
-    this.submitting = true;
-    this.accountingService.createGlAccount(this.glAccountForm.value).subscribe({
-      next: (response: any) => {
-        if (response?.resourceId) {
-          if (this.configurationWizardService.showChartofAccounts) {
-            this.configurationWizardService.showChartofAccounts = false;
-            this.openDialog();
-          } else {
-            this.router.navigate(
-              [
-                '../view',
-                response.resourceId
-              ],
-              { relativeTo: this.route }
-            );
-          }
-        } else if (response?.rollbackTransaction) {
-          this.alertService.alert({
-            type: 'Success',
-            message: 'GL Account submitted successfully for approval.'
-          });
-          this.router.navigate([this.cancelRoute], { relativeTo: this.route });
-        } else {
-          this.router.navigate([this.cancelRoute], { relativeTo: this.route });
-        }
-      },
-      error: () => {
-        this.submitting = false;
+    this.accountingService.createGlAccount(this.glAccountForm.value).subscribe((response: any) => {
+      if (this.configurationWizardService.showChartofAccounts) {
+        this.configurationWizardService.showChartofAccounts = false;
+        this.openDialog();
+      } else {
+        this.router.navigate(
+          [
+            '../view',
+            response.resourceId
+          ],
+          { relativeTo: this.route }
+        );
       }
     });
   }

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

@@ -435,12 +435,17 @@
 
     @if (!showClosedFixedAccounts) {
       <div class="table-wrapper">
-        <table mat-table [dataSource]="savingAccounts | accountsFilter: 'saving' : 'open' : 'isFixed'">
+        <table mat-table [dataSource]="fixedDepositAccountsForDisplay | accountsFilter: 'saving' : 'open' : 'isFixed'">
           <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>
+              <mifosx-account-number
+                accountNo="{{ element.fdAccountNumber || element.accountNo }}"
+              ></mifosx-account-number>
+              @if (element.renewalCycleNo) {
+                <span class="fd-renewal-badge">Renewal {{ element.renewalCycleNo }}</span>
+              }
             </td>
           </ng-container>
           <ng-container matColumnDef="Saving Account">
@@ -524,12 +529,20 @@
     <!-- Closed Fixed Deposit Accounts -->
     @if (showClosedFixedAccounts) {
       <div class="table-wrapper">
-        <table mat-table [dataSource]="savingAccounts | accountsFilter: 'saving' : 'closed' : 'isFixed'">
+        <table
+          mat-table
+          [dataSource]="fixedDepositAccountsForDisplay | accountsFilter: 'saving' : 'closed' : 'isFixed'"
+        >
           <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>
+              <mifosx-account-number
+                accountNo="{{ element.fdAccountNumber || element.accountNo }}"
+              ></mifosx-account-number>
+              @if (element.renewalCycleNo) {
+                <span class="fd-renewal-badge">Renewal {{ element.renewalCycleNo }}</span>
+              }
             </td>
           </ng-container>
           <ng-container matColumnDef="Saving Account">

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

@@ -209,6 +209,20 @@ $red: #d93025;
   gap: 0;
 }
 
+// Marks an FD row that is a renewal of an earlier term, since the row shows the original FD number
+// rather than this term's own account number.
+.fd-renewal-badge {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 1px 7px;
+  border-radius: 10px;
+  background-color: $gray-200;
+  color: $gray-700;
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
 // ── Table Wrapper ──
 .table-wrapper {
   border-radius: 0 0 8px 8px;

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

@@ -234,7 +234,57 @@ export class GeneralTabComponent implements OnDestroy {
   }
 
   get fixedDepositCount(): number {
-    return this.savingAccounts.filter((a: any) => a.depositType?.code === 'depositAccountType.fixedDeposit').length;
+    return this.fixedDepositAccountsForDisplay.filter(
+      (a: any) => a.depositType?.code === 'depositAccountType.fixedDeposit'
+    ).length;
+  }
+
+  /**
+   * Accounts for the Fixed Deposit sections, with superseded renewal cycles folded away.
+   *
+   * An FD renewal closes one account and opens the next term as its own account row, so a renewed FD
+   * would otherwise appear twice on this page -- the matured term under Closed and the new term under
+   * Active -- reading as two unrelated deposits. A closed term is therefore dropped whenever a later
+   * cycle of the same FD (same `fdAccountNumber`) exists, leaving one row per FD that shows its
+   * current term. A chain that has genuinely ended keeps its final term, so it still lists as closed.
+   *
+   * Only FD rows are rewritten; savings, RD, current and share accounts pass through untouched.
+   */
+  get fixedDepositAccountsForDisplay(): any[] {
+    // Memoised on the source array's identity. This getter is bound straight to two [dataSource] inputs, so
+    // returning a freshly built array on every change-detection pass would make the table re-bind and
+    // re-render its rows on every tick -- mouse moves included.
+    if (this.fdDisplayCacheSource !== this.savingAccounts) {
+      this.fdDisplayCacheSource = this.savingAccounts;
+      this.fdDisplayCache = this.foldSupersededFdCycles(this.savingAccounts);
+    }
+    return this.fdDisplayCache;
+  }
+
+  private fdDisplayCacheSource: any[] = null;
+  private fdDisplayCache: any[] = [];
+
+  private foldSupersededFdCycles(accounts: any[]): any[] {
+    const latestCycleByFd = new Map<string, number>();
+    for (const account of accounts) {
+      if (account?.depositType?.code !== 'depositAccountType.fixedDeposit') {
+        continue;
+      }
+      const fdNumber = account.fdAccountNumber ?? account.accountNo;
+      const cycle = account.renewalCycleNo ?? 0;
+      if (cycle > (latestCycleByFd.get(fdNumber) ?? -1)) {
+        latestCycleByFd.set(fdNumber, cycle);
+      }
+    }
+
+    return accounts.filter((account: any) => {
+      if (account?.depositType?.code !== 'depositAccountType.fixedDeposit') {
+        return true;
+      }
+      const fdNumber = account.fdAccountNumber ?? account.accountNo;
+      const cycle = account.renewalCycleNo ?? 0;
+      return cycle === latestCycleByFd.get(fdNumber);
+    });
   }
 
   get recurringDepositCount(): number {

src/app/clients/clients.service.ts

@@ -16,7 +16,7 @@ import { Observable, of, throwError } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { map, catchError } from 'rxjs/operators';
 
-import { environment } from '../../environments/environment';
+import { environment } from 'environments/environment';
 import { dataUrlToFile } from 'app/shared/utils/data-url.util';
 
 /**

src/app/clients/services/external-national-id.service.ts

@@ -11,7 +11,7 @@ import { UntypedFormGroup } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter, switchMap, takeUntil, timeout, catchError } from 'rxjs/operators';
 import { of } from 'rxjs';
-import { environment } from '../../../environments/environment';
+import { environment } from 'environments/environment';
 import { ClientsService } from '../clients.service';
 import {
   EXTERNAL_ID_STATUS_KEYS,

src/app/core/services/keyboard-shortcut.service.ts

@@ -1,228 +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 { Injectable, inject, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { fromEvent, Subscription, BehaviorSubject } from 'rxjs';
-import { KeyboardShortcutsConfiguration } from '../../keyboards-shortcut-config';
-import { AuthenticationService } from '../authentication/authentication.service';
-import { UserPreferenceService } from './user-preference.service';
-import { DocumentationLinksService } from '../../shared/services/documentation-links.service';
-
-export interface ShortcutItem {
-  title: string;
-  ctrlKey: boolean;
-  shiftKey: boolean;
-  altKey: boolean;
-  key: string;
-  route: string;
-  id?: string;
-  custom?: boolean;
-  action?: string;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class KeyboardShortcutService implements OnDestroy {
-  private router = inject(Router);
-  private activatedRoute = inject(ActivatedRoute);
-  private authenticationService = inject(AuthenticationService);
-  private userPreferenceService = inject(UserPreferenceService);
-  private documentationLinks = inject(DocumentationLinksService);
-
-  private keydownSubscription: Subscription;
-  private activeShortcutsSubject = new BehaviorSubject<ShortcutItem[]>([]);
-  public activeShortcuts$ = this.activeShortcutsSubject.asObservable();
-
-  constructor() {
-    this.keydownSubscription = fromEvent<KeyboardEvent>(window, 'keydown').subscribe((event) => {
-      this.handleKeydown(event);
-    });
-  }
-
-  ngOnDestroy(): void {
-    if (this.keydownSubscription) {
-      this.keydownSubscription.unsubscribe();
-    }
-  }
-
-  public initShortcuts(): void {
-    const credentials = this.authenticationService.getCredentials();
-    if (!credentials || !credentials.userId) {
-      this.loadDefaults();
-      return;
-    }
-
-    this.userPreferenceService.getPreference(credentials.userId, 'keyboard_shortcuts').subscribe({
-      next: (data) => {
-        if (data && data.value) {
-          try {
-            const parsed = JSON.parse(data.value);
-            if (Array.isArray(parsed)) {
-              parsed.forEach((shortcut: ShortcutItem) => {
-                if (shortcut.custom && shortcut.action === 'navigate' && shortcut.route) {
-                  shortcut.route = this.normalizeRouteStr(shortcut.route);
-                }
-              });
-            }
-            this.activeShortcutsSubject.next(parsed);
-          } catch (e) {
-            console.error('Error parsing shortcuts', e);
-            this.loadDefaults();
-          }
-        } else {
-          this.loadDefaults();
-        }
-      },
-      error: () => {
-        this.loadDefaults();
-      }
-    });
-  }
-
-  public loadDefaults(): void {
-    const config = new KeyboardShortcutsConfiguration();
-    this.activeShortcutsSubject.next(config.buttonsArray);
-  }
-
-  public updateShortcuts(shortcuts: ShortcutItem[]): void {
-    const credentials = this.authenticationService.getCredentials();
-    if (credentials && credentials.userId) {
-      const cleanedShortcuts = shortcuts.map((s) => {
-        const clean: any = {
-          title: s.title,
-          ctrlKey: s.ctrlKey,
-          shiftKey: s.shiftKey,
-          altKey: s.altKey,
-          key: s.key,
-          route: s.route
-        };
-        if (s.id !== undefined) clean.id = s.id;
-        if (s.custom !== undefined) clean.custom = s.custom;
-        if (s.action !== undefined) clean.action = s.action;
-        return clean;
-      });
-
-      this.userPreferenceService
-        .updatePreference(credentials.userId, 'keyboard_shortcuts', JSON.stringify(cleanedShortcuts))
-        .subscribe(() => {
-          this.activeShortcutsSubject.next(shortcuts);
-        });
-    } else {
-      this.activeShortcutsSubject.next(shortcuts);
-    }
-  }
-
-  public resetToDefaults(): void {
-    const credentials = this.authenticationService.getCredentials();
-    const config = new KeyboardShortcutsConfiguration();
-    if (credentials && credentials.userId) {
-      this.userPreferenceService
-        .updatePreference(credentials.userId, 'keyboard_shortcuts', JSON.stringify(config.buttonsArray))
-        .subscribe(() => {
-          this.activeShortcutsSubject.next(config.buttonsArray);
-        });
-    } else {
-      this.activeShortcutsSubject.next(config.buttonsArray);
-    }
-  }
-
-  private handleKeydown(event: KeyboardEvent): void {
-    const activeShortcuts = this.activeShortcutsSubject.getValue();
-    const routeD = activeShortcuts.find(
-      (x) =>
-        x.ctrlKey === event.ctrlKey &&
-        x.shiftKey === event.shiftKey &&
-        x.altKey === event.altKey &&
-        x.key.toLowerCase() === event.key.toLowerCase()
-    );
-
-    if (routeD !== undefined) {
-      event.preventDefault(); // Prevent default browser actions for matched shortcuts
-
-      if (routeD.custom) {
-        if (routeD.action === 'navigate' && routeD.route) {
-          this.router.navigate([routeD.route]);
-        }
-      } else {
-        switch (routeD.id) {
-          case 'logout':
-            this.authenticationService.logout().subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
-            break;
-          case 'help':
-            this.documentationLinks.open('userManual');
-            break;
-          case 'runReport':
-            const runReportElement = document.getElementById('runReport');
-            if (runReportElement) runReportElement.click();
-            break;
-          case 'cancel':
-            const cancelEl = document.querySelector('[data-shortcut-action="cancel"]') as HTMLElement;
-            if (cancelEl) {
-              cancelEl.click();
-            } else {
-              const cancelButtons = Array.from(document.querySelectorAll('button')).filter(
-                (el) => el.textContent && el.textContent.trim() === 'Cancel'
-              );
-              if (cancelButtons.length > 0) cancelButtons[0].click();
-            }
-            break;
-          case 'submit':
-            const submitEl = document.querySelector('[data-shortcut-action="submit"]') as HTMLElement;
-            if (submitEl) {
-              submitEl.click();
-            } else {
-              const submitButtons = Array.from(document.querySelectorAll('button')).filter(
-                (el) => el.textContent && el.textContent.trim() === 'Submit'
-              );
-              if (submitButtons.length > 0) submitButtons[0].click();
-            }
-            break;
-          default:
-            this.router.navigate([routeD.route], { relativeTo: this.activatedRoute });
-        }
-      }
-    }
-  }
-
-  public normalizeRouteStr(route: string | undefined | null): string {
-    if (!route) return '';
-    let r = route.trim();
-
-    try {
-      if (r.startsWith('http://') || r.startsWith('https://')) {
-        const url = new URL(r);
-        if (url.hash && url.hash.startsWith('#')) {
-          let path = url.hash.substring(1);
-          if (!path.startsWith('/')) {
-            path = '/' + path;
-          }
-          return path;
-        }
-        return url.pathname + url.search;
-      }
-    } catch (e) {
-      // Ignore
-    }
-
-    if (r.includes('#/')) {
-      r = r.substring(r.indexOf('#/') + 1);
-    }
-
-    if (/^[a-zA-Z0-9]+:/.test(r)) {
-      return '/';
-    }
-
-    if (!r.startsWith('/')) {
-      r = '/' + r;
-    }
-
-    return r;
-  }
-}

src/app/core/services/shortcut-suggestion.service.ts

@@ -1,161 +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 { Injectable, inject, OnDestroy } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
-import { Title } from '@angular/platform-browser';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatDialog } from '@angular/material/dialog';
-import { AuthenticationService } from '../authentication/authentication.service';
-import { KeyboardShortcutService } from './keyboard-shortcut.service';
-import { UserPreferenceService } from './user-preference.service';
-import { KeyboardShortcutsDialogComponent } from '../../shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
-import { filter, take } from 'rxjs/operators';
-import { Subscription } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ShortcutSuggestionService implements OnDestroy {
-  private router = inject(Router);
-  private titleService = inject(Title);
-  private snackBar = inject(MatSnackBar);
-  private dialog = inject(MatDialog);
-  private authenticationService = inject(AuthenticationService);
-  private keyboardShortcutService = inject(KeyboardShortcutService);
-  private userPreferenceService = inject(UserPreferenceService);
-
-  private readonly FREQUENCY_THRESHOLD = 5;
-  private readonly PREF_KEY = 'shortcut_suggestions_state';
-  private routerSubscription!: Subscription;
-
-  private state: { dismissed: string[] } = { dismissed: [] };
-
-  private get userId(): number | null {
-    const creds = this.authenticationService.getCredentials();
-    return creds ? creds.userId : null;
-  }
-
-  private getVisitsKey(): string {
-    return `route_visits_${this.userId}`;
-  }
-
-  private getVisits(): Record<string, number> {
-    const key = this.getVisitsKey();
-    if (!key) return {};
-    const val = localStorage.getItem(key);
-    return val ? JSON.parse(val) : {};
-  }
-
-  private saveVisits(visits: Record<string, number>) {
-    const key = this.getVisitsKey();
-    if (key) {
-      localStorage.setItem(key, JSON.stringify(visits));
-    }
-  }
-
-  private isSuggestionOpen = false;
-
-  public init() {
-    const uid = this.userId;
-    if (uid) {
-      this.userPreferenceService.getPreference(uid, this.PREF_KEY).subscribe({
-        next: (data) => {
-          if (data && data.value) {
-            try {
-              this.state = JSON.parse(data.value);
-              if (!this.state.dismissed) this.state.dismissed = [];
-            } catch (e) {
-              this.state = { dismissed: [] };
-            }
-          }
-        },
-        error: () => {}
-      });
-    }
-
-    this.routerSubscription = this.router.events
-      .pipe(filter((event) => event instanceof NavigationEnd))
-      .subscribe((event: any) => {
-        this.handleNavigation(event.urlAfterRedirects);
-      });
-  }
-
-  private handleNavigation(url: string) {
-    if (!this.userId) return;
-
-    let path = url.split('?')[0];
-    path = this.keyboardShortcutService.normalizeRouteStr(path);
-
-    const visits = this.getVisits();
-    visits[path] = (visits[path] || 0) + 1;
-    this.saveVisits(visits);
-  }
-
-  public getUsageData(): { route: string; pageName: string; visits: number; hasShortcut: boolean }[] {
-    const visits = this.getVisits();
-    const result: { route: string; pageName: string; visits: number; hasShortcut: boolean }[] = [];
-
-    // Get current shortcuts (sync)
-    let currentShortcuts: any[] = [];
-    this.keyboardShortcutService.activeShortcuts$.pipe(take(1)).subscribe((s) => (currentShortcuts = s));
-
-    for (const route of Object.keys(visits)) {
-      const count = visits[route];
-      const hasShortcut = currentShortcuts.some(
-        (s) =>
-          (s.custom && s.action === 'navigate' && this.keyboardShortcutService.normalizeRouteStr(s.route) === route) ||
-          (!s.custom && this.keyboardShortcutService.normalizeRouteStr(s.route) === route)
-      );
-
-      let pageName = route.split('/').pop() || route;
-      // Capitalize and clean
-      pageName = pageName.replace(/-/g, ' ');
-      pageName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
-
-      result.push({ route, pageName, visits: count, hasShortcut });
-    }
-
-    return result.sort((a, b) => b.visits - a.visits);
-  }
-
-  public markAsDismissed(route: string) {
-    if (!this.state.dismissed.includes(route)) {
-      this.state.dismissed.push(route);
-      const uid = this.userId;
-      if (uid) {
-        this.userPreferenceService.updatePreference(uid, this.PREF_KEY, JSON.stringify(this.state)).subscribe();
-      }
-    }
-  }
-
-  public openCreateShortcutDialog(pageName: string, route: string) {
-    this.dialog
-      .open(KeyboardShortcutsDialogComponent, {
-        data: {
-          prefill: {
-            title: pageName,
-            route: route,
-            action: 'navigate'
-          }
-        }
-      })
-      .afterClosed()
-      .subscribe((saved) => {
-        if (saved) {
-          this.markAsDismissed(route);
-        }
-      });
-  }
-
-  ngOnDestroy() {
-    if (this.routerSubscription) {
-      this.routerSubscription.unsubscribe();
-    }
-  }
-}

src/app/core/services/user-preference.service.ts

@@ -1,28 +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 { Injectable, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-@Injectable({
-  providedIn: 'root'
-})
-export class UserPreferenceService {
-  private http = inject(HttpClient);
-
-  getPreference(userId: number, preferenceName: string): Observable<{ name: string; value: string }> {
-    const timestamp = new Date().getTime();
-    return this.http.get<{ name: string; value: string }>(
-      `/users/${userId}/preferences/${preferenceName}?_t=${timestamp}`
-    );
-  }
-
-  updatePreference(userId: number, preferenceName: string, value: string): Observable<{ name: string; value: string }> {
-    return this.http.put<{ name: string; value: string }>(`/users/${userId}/preferences/${preferenceName}`, { value });
-  }
-}

src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html

@@ -33,6 +33,7 @@
         <mifosx-fixed-deposit-account-details-step
           [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
           (fixedDepositsAccountProductTemplate)="setTemplate($event)"
+          [externalLinkedAccountId]="fixedDepositAccountMaturityTermsStep?.selectedTransferAccount?.id ?? null"
           [hideButtons]="true"
         >
         </mifosx-fixed-deposit-account-details-step>
@@ -107,7 +108,40 @@
       </div>
     </mat-tab>
 
-    <!-- Tab 4: Preview -->
+    <!-- Tab 4: Terms -->
+    <mat-tab [disabled]="!fixedDepositsAccountProductTemplate">
+      <ng-template mat-tab-label>
+        <fa-icon icon="file-alt" class="cfa-tab__icon"></fa-icon>
+        Terms
+      </ng-template>
+      <div class="cfa-tab-body">
+        @if (fixedDepositsAccountProductTemplate) {
+          <mifosx-fixed-deposit-account-maturity-terms-step
+            [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
+            [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+            [linkedSavingsAccountId]="
+              fixedDepositsAccountDetailsStep?.selectedLinkedAccount?.accountType === 'SAVINGS'
+                ? fixedDepositsAccountDetailsStep?.selectedLinkedAccount?.id
+                : null
+            "
+          ></mifosx-fixed-deposit-account-maturity-terms-step>
+        }
+
+        <div class="cfa-actions">
+          <button mat-stroked-button (click)="prev()">
+            <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.Previous' | translate }}
+          </button>
+          <span class="cfa-actions__spacer"></span>
+          <button mat-raised-button color="primary" (click)="next()">
+            {{ 'labels.buttons.Next' | translate }}
+            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+          </button>
+        </div>
+      </div>
+    </mat-tab>
+
+    <!-- Tab 5: Preview -->
     <mat-tab [disabled]="!fixedDepositsAccountProductTemplate">
       <ng-template mat-tab-label>
         <fa-icon icon="eye" class="cfa-tab__icon"></fa-icon>
@@ -121,6 +155,7 @@
             [fixedDepositAccountData]="fixedDepositAccount"
             [selectedTenure]="selectedTenure"
             [fdNominees]="fixedDepositAccountCurrencyStep?.nominees ?? []"
+            [closureSettings]="fixedDepositAccountMaturityTermsStep?.closureSettings ?? {}"
             [hideButtons]="true"
             (submitEvent)="submit()"
           ></mifosx-fixed-deposit-account-preview-step>

src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.ts

@@ -24,6 +24,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { FixedDepositAccountInterestRateChartStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component';
 import { FixedDepositAccountPreviewStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component';
+import { FixedDepositAccountMaturityTermsStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-maturity-terms-step/fixed-deposit-account-maturity-terms-step.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -40,6 +41,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     FixedDepositAccountDetailsStepComponent,
     FixedDepositAccountInterestRateChartStepComponent,
     FixedDepositAccountCurrencyStepComponent,
+    FixedDepositAccountMaturityTermsStepComponent,
     FixedDepositAccountPreviewStepComponent
   ]
 })
@@ -56,6 +58,10 @@ export class CreateFixedDepositAccountComponent {
   fixedDepositsAccountDetailsStep: FixedDepositAccountDetailsStepComponent;
   @ViewChild(FixedDepositAccountCurrencyStepComponent)
   fixedDepositAccountCurrencyStep: FixedDepositAccountCurrencyStepComponent;
+  @ViewChild(FixedDepositAccountPreviewStepComponent)
+  fixedDepositAccountPreviewStep: FixedDepositAccountPreviewStepComponent;
+  @ViewChild(FixedDepositAccountMaturityTermsStepComponent)
+  fixedDepositAccountMaturityTermsStep: FixedDepositAccountMaturityTermsStepComponent;
 
   /** Fixed Deposits Account Template */
   fixedDepositsAccountTemplate: any;
@@ -63,8 +69,8 @@ export class CreateFixedDepositAccountComponent {
   fixedDepositsAccountProductTemplate: any;
   /** Currently visible wizard tab (0-indexed). */
   selectedTabIndex = 0;
-  /** Total wizard tabs — Product, Currency, Chart, Preview. */
-  private readonly totalTabs = 4;
+  /** Total wizard tabs — Product, Currency, Chart, Terms, Preview. */
+  private readonly totalTabs = 5;
   /** Active CBS base interest rate versions for the selected product's FD type */
   cbsBaseRates: any[] = [];
   /** Tenure selected from the interest rate chart step */
@@ -243,6 +249,7 @@ export class CreateFixedDepositAccountComponent {
       ...this.fixedDepositAccount,
       ...terms,
       ...settings,
+      ...(this.fixedDepositAccountMaturityTermsStep?.closureSettings ?? {}),
       ...(this.selectedTenure
         ? {
             depositPeriod: this.selectedTenure.depositPeriod,

src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html

@@ -35,6 +35,7 @@
         <mifosx-fixed-deposit-account-details-step
           [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
           (fixedDepositsAccountProductTemplate)="setTemplate($event)"
+          [externalLinkedAccountId]="fixedDepositAccountMaturityTermsStep?.selectedTransferAccount?.id ?? null"
           [hideButtons]="true"
         >
         </mifosx-fixed-deposit-account-details-step>
@@ -111,7 +112,40 @@
       </div>
     </mat-tab>
 
-    <!-- Tab 4: Preview -->
+    <!-- Tab 4: Terms -->
+    <mat-tab [disabled]="!fixedDepositsAccountProductTemplate">
+      <ng-template mat-tab-label>
+        <fa-icon icon="file-alt" class="cfa-tab__icon"></fa-icon>
+        Terms
+      </ng-template>
+      <div class="cfa-tab-body">
+        @if (fixedDepositsAccountProductTemplate) {
+          <mifosx-fixed-deposit-account-maturity-terms-step
+            [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
+            [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
+            [linkedSavingsAccountId]="
+              fixedDepositsAccountDetailsStep?.selectedLinkedAccount?.accountType === 'SAVINGS'
+                ? fixedDepositsAccountDetailsStep?.selectedLinkedAccount?.id
+                : null
+            "
+          ></mifosx-fixed-deposit-account-maturity-terms-step>
+        }
+
+        <div class="cfa-actions">
+          <button mat-stroked-button (click)="prev()">
+            <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.Previous' | translate }}
+          </button>
+          <span class="cfa-actions__spacer"></span>
+          <button mat-raised-button color="primary" (click)="next()">
+            {{ 'labels.buttons.Next' | translate }}
+            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+          </button>
+        </div>
+      </div>
+    </mat-tab>
+
+    <!-- Tab 5: Preview -->
     <mat-tab [disabled]="!fixedDepositsAccountProductTemplate">
       <ng-template mat-tab-label>
         <fa-icon icon="eye" class="cfa-tab__icon"></fa-icon>
@@ -125,6 +159,7 @@
             [fixedDepositAccountData]="fixedDepositAccount"
             [selectedTenure]="selectedTenure"
             [fdNominees]="fixedDepositAccountCurrencyStep?.nominees ?? []"
+            [closureSettings]="fixedDepositAccountMaturityTermsStep?.closureSettings ?? {}"
             [hideButtons]="true"
             (submitEvent)="submit()"
           ></mifosx-fixed-deposit-account-preview-step>

src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.ts

@@ -25,6 +25,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { FixedDepositAccountInterestRateChartStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component';
 import { FixedDepositAccountPreviewStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component';
+import { FixedDepositAccountMaturityTermsStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-maturity-terms-step/fixed-deposit-account-maturity-terms-step.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -41,6 +42,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     FixedDepositAccountDetailsStepComponent,
     FixedDepositAccountInterestRateChartStepComponent,
     FixedDepositAccountCurrencyStepComponent,
+    FixedDepositAccountMaturityTermsStepComponent,
     FixedDepositAccountPreviewStepComponent
   ]
 })
@@ -58,6 +60,10 @@ export class EditFixedDepositAccountComponent {
   fixedDepositsAccountDetailsStep: FixedDepositAccountDetailsStepComponent;
   @ViewChild(FixedDepositAccountCurrencyStepComponent)
   fixedDepositAccountCurrencyStep: FixedDepositAccountCurrencyStepComponent;
+  @ViewChild(FixedDepositAccountPreviewStepComponent)
+  fixedDepositAccountPreviewStep: FixedDepositAccountPreviewStepComponent;
+  @ViewChild(FixedDepositAccountMaturityTermsStepComponent)
+  fixedDepositAccountMaturityTermsStep: FixedDepositAccountMaturityTermsStepComponent;
 
   /** Full account data + template from resolver */
   fixedDepositsAccountAndTemplate: any;
@@ -65,7 +71,7 @@ export class EditFixedDepositAccountComponent {
   fixedDepositsAccountProductTemplate: any;
   /** Currently visible wizard tab (0-indexed). */
   selectedTabIndex = 0;
-  private readonly totalTabs = 4;
+  private readonly totalTabs = 5;
   /** Active CBS base interest rate versions for the selected product's FD type */
   cbsBaseRates: any[] = [];
   /** Tenure selected from the interest rate chart step */
@@ -236,6 +242,7 @@ export class EditFixedDepositAccountComponent {
       ...this.fixedDepositAccount,
       ...terms,
       ...settings,
+      ...(this.fixedDepositAccountMaturityTermsStep?.closureSettings ?? {}),
       ...(this.selectedTenure
         ? {
             depositPeriod: this.selectedTenure.depositPeriod,

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.ts

@@ -7,7 +7,17 @@
  */
 
 /** Angular Imports */
-import { Component, OnInit, Input, Output, EventEmitter, inject, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  Input,
+  Output,
+  EventEmitter,
+  inject,
+  ChangeDetectorRef
+} from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, FormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
@@ -43,7 +53,7 @@ import { IntroducerSearchComponent } from 'app/shared/introducer-search/introduc
     IntroducerSearchComponent
   ]
 })
-export class FixedDepositAccountDetailsStepComponent implements OnInit {
+export class FixedDepositAccountDetailsStepComponent implements OnInit, OnChanges {
   private formBuilder = inject(UntypedFormBuilder);
   private fixedDepositsService = inject(FixedDepositsService);
   private settingsService = inject(SettingsService);
@@ -56,6 +66,9 @@ export class FixedDepositAccountDetailsStepComponent implements OnInit {
   /** Fixed Deposits Account Template */
   @Input() fixedDepositsAccountTemplate: any;
   @Input() hideButtons = false;
+  /** Linked-account id picked elsewhere in the wizard (e.g. the Terms step's Transfer to Savings
+   * account) -- pre-fills this card so the officer doesn't have to pick the same account twice. */
+  @Input() externalLinkedAccountId: number | null = null;
 
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
@@ -222,6 +235,23 @@ export class FixedDepositAccountDetailsStepComponent implements OnInit {
     this.dalSearch = '';
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!changes.externalLinkedAccountId || this.selectedLinkedAccount) {
+      return;
+    }
+    const id = this.externalLinkedAccountId;
+    if (!id) return;
+    const savings = this.dalAllSavings.find((a: any) => a.id === id);
+    const current = this.dalAllCurrent.find((a: any) => a.id === id);
+    if (savings) {
+      this.dalSelectedType = 'SAVINGS';
+      this.selectedLinkedAccount = savings;
+    } else if (current) {
+      this.dalSelectedType = 'CURRENT';
+      this.selectedLinkedAccount = current;
+    }
+  }
+
   private loadClientAccounts(): void {
     const clientId = String(this.fixedDepositsAccountTemplate?.clientId);
     if (!clientId) return;

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-maturity-terms-step/fixed-deposit-account-maturity-terms-step.component.html

@@ -0,0 +1,108 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<form [formGroup]="closureSettingsForm" class="layout-row-wrap gap-2px responsive-column">
+  <h4 class="mat-h4 flex-98">{{ 'labels.heading.For Pre-mature closure' | translate }}</h4>
+
+  <mat-form-field class="flex-48">
+    <mat-label>{{ 'labels.inputs.Maturity Instructions' | translate }}</mat-label>
+    <mat-select formControlName="maturityInstructionId">
+      @for (maturityInstruction of maturityInstructionOptions; track maturityInstruction) {
+        <mat-option [value]="maturityInstruction.id">
+          {{ maturityInstruction.value | translateKey: 'catalogs' }}
+        </mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  @if (closureSettingsForm.contains('transferToSavingsId')) {
+    <div class="dal-card flex-98">
+      <div class="dal-card__header">
+        <div class="dal-card__header-left">
+          <div class="dal-card__icon">
+            <mat-icon>savings</mat-icon>
+          </div>
+          <div>
+            <h3 class="dal-card__title">{{ 'labels.inputs.Transfer to savings account' | translate }}</h3>
+            <span class="dal-card__sub">Maturity proceeds will be credited to this account</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="dal-card__body">
+        @if (selectedTransferAccount) {
+          <div class="dal-selected">
+            <div class="dal-selected__info">
+              <span class="dal-type-badge dal-type-badge--savings">
+                <mat-icon>savings</mat-icon>
+                Savings
+              </span>
+              <div class="dal-selected__details">
+                <span class="dal-selected__accno">{{ selectedTransferAccount.accountNo }}</span>
+                <span class="dal-selected__product">{{ selectedTransferAccount.savingsProductName }}</span>
+              </div>
+              @if (selectedTransferAccount.summary?.accountBalance != null) {
+                <div class="dal-selected__balance">
+                  <span class="dal-selected__bal-label">Balance</span>
+                  <span class="dal-selected__bal-amount">
+                    {{ selectedTransferAccount.currency?.code }}
+                    {{ selectedTransferAccount.summary.accountBalance | number: '1.2-2' }}
+                  </span>
+                </div>
+              }
+            </div>
+            <button
+              mat-stroked-button
+              color="primary"
+              type="button"
+              class="dal-change-btn"
+              (click)="clearTransferAccount()"
+            >
+              <mat-icon>swap_horiz</mat-icon>
+              Change
+            </button>
+          </div>
+        } @else {
+          <mat-form-field appearance="outline" class="flex-98">
+            <mat-label>{{ 'labels.inputs.Transfer to savings account' | translate }}</mat-label>
+            <mat-select formControlName="transferToSavingsId" required>
+              @for (account of savingsAccountsData; track account) {
+                <mat-option [value]="account.id">
+                  ({{ account.accountNo }}) {{ account.savingsProductName }}
+                </mat-option>
+              }
+            </mat-select>
+            <mat-error>Transfer to savings account is required</mat-error>
+          </mat-form-field>
+        }
+      </div>
+    </div>
+  }
+
+  <mat-checkbox class="flex-98 margin-v" labelPosition="before" formControlName="preClosurePenalApplicable">
+    {{ 'labels.inputs.Apply Penal Interest (less)' | translate }}
+  </mat-checkbox>
+
+  @if (closureSettingsForm.value.preClosurePenalApplicable) {
+    <mat-form-field class="flex-48">
+      <mat-label>{{ 'labels.inputs.Penal Interest' | translate }} (%)</mat-label>
+      <input type="number" matInput formControlName="preClosurePenalInterest" min="0" step="0.01" />
+    </mat-form-field>
+
+    <mat-form-field class="flex-48">
+      <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
+      <mat-select formControlName="preClosurePenalInterestOnTypeId">
+        @for (preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData; track preClosurePenalInterestOnType) {
+          <mat-option [value]="preClosurePenalInterestOnType.id">
+            {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
+</form>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-maturity-terms-step/fixed-deposit-account-maturity-terms-step.component.scss

@@ -0,0 +1,152 @@
+/**
+ * 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/.
+ */
+
+// ── Transfer-to-Savings account card (mirrors the Deposit Account Link card) ──
+
+.dal-card {
+  margin-top: 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #fff;
+  overflow: hidden;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 16px 24px;
+    border-bottom: 1px solid #f1f5f9;
+    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  }
+
+  &__header-left {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+  }
+
+  &__icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    background: #0ea5e9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 700;
+    color: #0c4a6e;
+  }
+
+  &__sub {
+    display: block;
+    font-size: 12px;
+    color: #64748b;
+    margin-top: 2px;
+  }
+
+  &__body {
+    padding: 20px 24px;
+  }
+}
+
+.dal-selected {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  border: 2px solid #0ea5e9;
+  border-radius: 12px;
+  background: #f0f9ff;
+
+  &__info {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    flex: 1;
+    flex-wrap: wrap;
+  }
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+  }
+
+  &__accno {
+    font-size: 15px;
+    font-weight: 700;
+    color: #0c4a6e;
+    font-family: monospace;
+  }
+
+  &__product {
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  &__balance {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 2px;
+  }
+
+  &__bal-label {
+    font-size: 10px;
+    color: #94a3b8;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  &__bal-amount {
+    font-size: 15px;
+    font-weight: 700;
+    color: #0c4a6e;
+  }
+}
+
+.dal-change-btn {
+  white-space: nowrap;
+}
+
+.dal-type-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+  background: #f1f5f9;
+  color: #475569;
+  border: 1px solid #e2e8f0;
+
+  mat-icon {
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+  }
+
+  &--savings {
+    background: #eff6ff;
+    color: #1d4ed8;
+    border-color: #bfdbfe;
+
+    mat-icon {
+      color: #2563eb;
+    }
+  }
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-maturity-terms-step/fixed-deposit-account-maturity-terms-step.component.ts

@@ -0,0 +1,117 @@
+/**
+ * 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, Input, OnChanges, SimpleChanges, inject } from '@angular/core';
+import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatIcon } from '@angular/material/icon';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/**
+ * Fixed Deposit Account Maturity Terms Step -- what happens to this account at maturity
+ * (Withdraw / Transfer to Savings / Reinvest) and the pre-mature-closure penalty, decided
+ * per account rather than silently inherited from the product.
+ */
+@Component({
+  selector: 'mifosx-fixed-deposit-account-maturity-terms-step',
+  templateUrl: './fixed-deposit-account-maturity-terms-step.component.html',
+  styleUrls: ['./fixed-deposit-account-maturity-terms-step.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCheckbox,
+    MatIcon
+  ]
+})
+export class FixedDepositAccountMaturityTermsStepComponent implements OnChanges {
+  private formBuilder = inject(UntypedFormBuilder);
+
+  @Input() fixedDepositsAccountTemplate: any;
+  @Input() fixedDepositsAccountProductTemplate: any;
+  /** Account already linked elsewhere in the wizard (the Details step's Deposit Account Link) --
+   * pre-fills Transfer to Savings so the officer doesn't have to pick the same account twice. */
+  @Input() linkedSavingsAccountId: number | null = null;
+
+  closureSettingsForm: UntypedFormGroup;
+  maturityInstructionOptions: any[] = [];
+  savingsAccountsData: any[] = [];
+  preClosurePenalInterestOnTypeData: any[] = [];
+
+  constructor() {
+    this.closureSettingsForm = this.formBuilder.group({
+      maturityInstructionId: [''],
+      preClosurePenalApplicable: [false],
+      preClosurePenalInterest: [
+        '',
+        Validators.min(0)
+      ],
+      preClosurePenalInterestOnTypeId: ['']
+    });
+    this.closureSettingsForm.get('maturityInstructionId').valueChanges.subscribe((value: number) => {
+      // 200 = Transfer to Savings -- Withdraw Deposit (100) needs no target account, and both
+      // Reinvest options (300/400) open a brand-new FD instead, so they ignore this field too.
+      if (value === 200) {
+        this.closureSettingsForm.addControl(
+          'transferToSavingsId',
+          new UntypedFormControl(this.linkedSavingsAccountId ?? '', Validators.required)
+        );
+      } else {
+        this.closureSettingsForm.removeControl('transferToSavingsId');
+      }
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.linkedSavingsAccountId) {
+      const control = this.closureSettingsForm.get('transferToSavingsId');
+      if (control && !control.value && this.linkedSavingsAccountId) {
+        control.setValue(this.linkedSavingsAccountId);
+      }
+    }
+    if (this.fixedDepositsAccountProductTemplate) {
+      // Withdraw Deposit (id 100) books the maturity proceeds out of the bank's cash/vault the moment
+      // the account matures, before the customer has actually collected it -- disabled everywhere.
+      this.maturityInstructionOptions = (
+        this.fixedDepositsAccountProductTemplate.maturityInstructionOptions ?? []
+      ).filter((option: any) => option.id !== 100);
+      this.savingsAccountsData = this.fixedDepositsAccountProductTemplate.savingsAccounts ?? [];
+      this.preClosurePenalInterestOnTypeData =
+        this.fixedDepositsAccountProductTemplate.preClosurePenalInterestOnTypeOptions ?? [];
+      if (!this.closureSettingsForm.get('preClosurePenalApplicable').dirty) {
+        this.closureSettingsForm.patchValue({
+          preClosurePenalApplicable: this.fixedDepositsAccountProductTemplate.preClosurePenalApplicable ?? false,
+          preClosurePenalInterest: this.fixedDepositsAccountProductTemplate.preClosurePenalInterest ?? '',
+          preClosurePenalInterestOnTypeId:
+            this.fixedDepositsAccountProductTemplate.preClosurePenalInterestOnType?.id ?? ''
+        });
+      }
+    }
+  }
+
+  /** The linked-savings account for the transfer-to-savings maturity instruction, once picked. */
+  get selectedTransferAccount(): any {
+    const id = this.closureSettingsForm.value.transferToSavingsId;
+    if (!id) return null;
+    return this.savingsAccountsData.find((account: any) => account.id === id) ?? null;
+  }
+
+  clearTransferAccount(): void {
+    this.closureSettingsForm.get('transferToSavingsId')?.setValue('');
+  }
+
+  /** Chosen maturity/closure settings, ready to merge into the submit payload. */
+  get closureSettings() {
+    const settings = this.closureSettingsForm.getRawValue();
+    for (const key in settings) {
+      if (settings[key] === '') {
+        delete settings[key];
+      }
+    }
+    return settings;
+  }
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html

@@ -683,6 +683,41 @@
   </div>
 </div>
 
+<div class="preview-section">
+  <div class="preview-section__header">
+    <i class="fas fa-flag-checkered preview-section__icon"></i>
+    <span class="preview-section__title">Maturity &amp; Pre-mature Closure</span>
+  </div>
+  <div class="preview-body">
+    <div class="preview-grid preview-grid--three">
+      <div class="preview-field">
+        <span class="preview-label">{{ 'labels.inputs.Maturity Instructions' | translate }}</span>
+        <span class="preview-value">{{ closureMaturityInstructionLabel }}</span>
+      </div>
+      @if (closureSettings?.transferToSavingsId) {
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Transfer to savings account' | translate }}</span>
+          <span class="preview-value">{{ closureTransferToSavingsLabel }}</span>
+        </div>
+      }
+      <div class="preview-field">
+        <span class="preview-label">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}</span>
+        <span class="preview-value">{{ closureSettings?.preClosurePenalApplicable | yesNo }}</span>
+      </div>
+      @if (closureSettings?.preClosurePenalApplicable) {
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Penal Interest' | translate }} (%)</span>
+          <span class="preview-value">{{ closureSettings?.preClosurePenalInterest }}%</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Period' | translate }}</span>
+          <span class="preview-value">{{ closurePenalInterestOnTypeLabel }}</span>
+        </div>
+      }
+    </div>
+  </div>
+</div>
+
 @if (!hideButtons) {
   <div class="layout-row responsive-column align-center gap-2px margin-t">
     <button mat-raised-button matStepperPrevious>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.ts

@@ -164,7 +164,26 @@ export class FixedDepositAccountPreviewStepComponent implements OnChanges {
   /** Form submission event */
   @Output() submitEvent = new EventEmitter();
 
-  constructor() {}
+  /** Maturity/pre-mature-closure choices made in the Terms step -- shown here read-only. */
+  @Input() closureSettings: any = {};
+
+  get closureMaturityInstructionLabel(): string {
+    const options = this.fixedDepositsAccountProductTemplate?.maturityInstructionOptions ?? [];
+    const match = options.find((o: any) => o.id === this.closureSettings?.maturityInstructionId);
+    return match?.value ?? '—';
+  }
+
+  get closureTransferToSavingsLabel(): string {
+    const accounts = this.fixedDepositsAccountProductTemplate?.savingsAccounts ?? [];
+    const match = accounts.find((a: any) => a.id === this.closureSettings?.transferToSavingsId);
+    return match ? `(${match.accountNo}) ${match.savingsProductName}` : '—';
+  }
+
+  get closurePenalInterestOnTypeLabel(): string {
+    const options = this.fixedDepositsAccountProductTemplate?.preClosurePenalInterestOnTypeOptions ?? [];
+    const match = options.find((o: any) => o.id === this.closureSettings?.preClosurePenalInterestOnTypeId);
+    return match?.value ?? '—';
+  }
 
   ngOnChanges() {
     if (this.fixedDepositsAccountProductTemplate) {

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/payment-dialog/payment-dialog.component.html

@@ -0,0 +1,191 @@
+<!--
+  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="pmt">
+  <div class="pmt__header">
+    <span class="pmt__header-ico"><fa-icon icon="sync-alt"></fa-icon></span>
+    <div class="pmt__header-text">
+      <h2 class="pmt__title">{{ 'labels.heading.Payment' | translate }}</h2>
+      <p class="pmt__subtitle">Process this Fixed Deposit now -- works whether it's Active or Matured.</p>
+    </div>
+  </div>
+
+  <div mat-dialog-content class="pmt__content">
+    @if (loadingTemplate) {
+      <div class="pmt__loading">
+        <mat-spinner diameter="36"></mat-spinner>
+      </div>
+    } @else if (loadFailed) {
+      <div class="pmt__error" role="alert">
+        <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
+        Could not load this account's payment options. Close this dialog and try again.
+      </div>
+    } @else {
+      <form [formGroup]="paymentForm">
+        @if (reinvestCap !== null && reinvestCap !== undefined) {
+          <div class="pmt__stat">
+            <span class="pmt__stat-label">
+              {{
+                remainderIsApproximate
+                  ? 'Amount available on the selected date'
+                  : ('labels.inputs.Maturity Amount' | translate)
+              }}
+            </span>
+            <span class="pmt__stat-value">{{ reinvestCap | formatNumber }}</span>
+          </div>
+        }
+
+        <mat-form-field appearance="outline" class="pmt__date" (click)="closedOnDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
+          <input
+            matInput
+            [max]="maxDate"
+            [matDatepicker]="closedOnDatePicker"
+            required
+            formControlName="closedOnDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #closedOnDatePicker></mat-datepicker>
+          @if (paymentForm.controls.closedOnDate.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
+        </mat-form-field>
+
+        <div class="pmt__section-label" id="pmt-action-label">{{ 'labels.inputs.Action' | translate }}</div>
+        <div class="pmt__options" role="radiogroup" aria-labelledby="pmt-action-label">
+          @for (closureOption of onAccountClosureOptions; track closureOption) {
+            <button
+              type="button"
+              class="pmt__option"
+              role="radio"
+              [attr.aria-checked]="paymentForm.get('onAccountClosureId').value === closureOption.id"
+              [class.pmt__option--active]="paymentForm.get('onAccountClosureId').value === closureOption.id"
+              (click)="selectClosureType(closureOption.id)"
+            >
+              <span class="pmt__option-ico"><fa-icon [icon]="iconFor(closureOption.id)"></fa-icon></span>
+              <span class="pmt__option-text">
+                <span class="pmt__option-title">{{ closureOption.value }}</span>
+                <span class="pmt__option-desc">{{ descriptionFor(closureOption.id) }}</span>
+              </span>
+              @if (paymentForm.get('onAccountClosureId').value === closureOption.id) {
+                <fa-icon icon="check-circle" class="pmt__option-check"></fa-icon>
+              }
+            </button>
+          }
+        </div>
+        @if (
+          paymentForm.controls.onAccountClosureId.hasError('required') &&
+          paymentForm.controls.onAccountClosureId.touched
+        ) {
+          <div class="pmt__option-error">
+            {{ 'labels.inputs.Account action' | translate }} {{ 'labels.commons.is' | translate }}
+            {{ 'labels.commons.required' | translate }}
+          </div>
+        }
+
+        @if (isPartialReinvest) {
+          <div class="pmt__split">
+            <mat-form-field appearance="outline" class="pmt__split-input">
+              <mat-label>{{ 'labels.inputs.Reinvest Amount' | translate }}</mat-label>
+              <input type="number" matInput required formControlName="reinvestAmount" />
+              @if (paymentForm.controls.reinvestAmount?.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Reinvest Amount' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+              @if (paymentForm.controls.reinvestAmount?.hasError('min')) {
+                <mat-error>{{ 'labels.inputs.Reinvest Amount must be greater than zero' | translate }}</mat-error>
+              }
+              @if (paymentForm.controls.reinvestAmount?.hasError('belowMaturityAmount')) {
+                <mat-error>{{
+                  'labels.inputs.Reinvest Amount must be less than the maturity amount' | translate
+                }}</mat-error>
+              }
+            </mat-form-field>
+            <span class="pmt__split-arrow"><fa-icon icon="arrow-right"></fa-icon></span>
+            <div class="pmt__split-remainder">
+              <span class="pmt__split-remainder-label">{{ 'labels.inputs.Remainder to Transfer' | translate }}</span>
+              <span class="pmt__split-remainder-value">{{
+                remainderAmount !== null ? (remainderAmount | formatNumber) : '—'
+              }}</span>
+            </div>
+          </div>
+          @if (remainderIsApproximate) {
+            <p class="pmt__hint">
+              <fa-icon icon="info-circle" class="m-r-5"></fa-icon>
+              The selected date is before maturity. Interest up to that date is posted first, so the amount actually
+              transferred will be at least the figure shown.
+            </p>
+          }
+        }
+
+        @if (noDestinationAccounts) {
+          <p class="pmt__hint pmt__hint--warn" role="alert">
+            <fa-icon icon="info-circle" class="m-r-5"></fa-icon>
+            This customer has no active savings account to transfer into. Open one first, or choose an action that keeps
+            the funds in this deposit.
+          </p>
+        }
+
+        @if (paymentForm.contains('toSavingsAccountId')) {
+          <mat-form-field appearance="outline">
+            <mat-label>{{ 'labels.inputs.Transfer to Savings' | translate }}</mat-label>
+            <mat-select required formControlName="toSavingsAccountId">
+              @for (account of savingsAccountsData; track account) {
+                <mat-option [value]="account.id">
+                  {{ account.accountNo }}
+                </mat-option>
+              }
+            </mat-select>
+            @if (paymentForm.controls.toSavingsAccountId?.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Transfer to savings account' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+          </mat-form-field>
+        }
+
+        @if (paymentForm.contains('transferDescription')) {
+          <mat-form-field appearance="outline">
+            <mat-label>{{ 'labels.inputs.Transfer Description' | translate }}</mat-label>
+            <input matInput formControlName="transferDescription" />
+          </mat-form-field>
+        }
+
+        <mat-form-field appearance="outline">
+          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
+          <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+        </mat-form-field>
+
+        @if (submitError) {
+          <p class="pmt__error" role="alert">
+            <fa-icon icon="times-circle" class="m-r-5"></fa-icon>
+            {{ submitError }}
+          </p>
+        }
+      </form>
+    }
+  </div>
+
+  <div mat-dialog-actions align="end" class="pmt__actions">
+    <button mat-button mat-dialog-close [disabled]="submitting">{{ 'labels.buttons.Cancel' | translate }}</button>
+    <button
+      mat-raised-button
+      color="primary"
+      [disabled]="!paymentForm?.valid || submitting || loadFailed"
+      (click)="submit()"
+    >
+      {{ submitting ? ('labels.buttons.Processing' | translate) : ('labels.buttons.Confirm' | translate) }}
+    </button>
+  </div>
+</div>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/payment-dialog/payment-dialog.component.scss

@@ -0,0 +1,296 @@
+/**
+ * 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/.
+ */
+
+$navy: #0d1b2a;
+$slate: #475569;
+$muted: #64748b;
+$border: #e2e8f0;
+$soft: #f8fafc;
+$blue: #1e40af;
+$blue-soft: #eff6ff;
+$green: #166534;
+$green-soft: #f0fdf4;
+
+.pmt {
+  display: flex;
+  flex-direction: column;
+  min-height: 320px;
+  max-height: 85vh;
+  overflow: hidden;
+  margin: -24px;
+}
+
+.pmt__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 22px 28px 18px;
+  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 55%, #4338ca 100%);
+  color: #fff;
+  flex: 0 0 auto;
+}
+
+.pmt__header-ico {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  border-radius: 10px;
+  background: rgb(255 255 255 / 15%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+
+.pmt__title {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 700;
+}
+
+.pmt__subtitle {
+  margin: 4px 0 0;
+  font-size: 12.5px;
+  color: rgb(255 255 255 / 82%);
+  line-height: 1.4;
+}
+
+.pmt__content {
+  padding: 22px 28px 8px !important;
+  overflow-y: auto;
+  flex: 1 1 auto;
+}
+
+.pmt__loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 260px;
+}
+
+.pmt__stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: $blue-soft;
+  border: 1px solid #dbeafe;
+  border-radius: 10px;
+  padding: 12px 16px;
+  margin-bottom: 18px;
+}
+
+.pmt__stat-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $blue;
+}
+
+.pmt__stat-value {
+  font-size: 22px;
+  font-weight: 800;
+  color: $navy;
+  font-variant-numeric: tabular-nums;
+}
+
+.pmt__date {
+  width: 100%;
+}
+
+.pmt__section-label {
+  font-size: 11.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $slate;
+  margin: 4px 0 10px;
+}
+
+.pmt__options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.pmt__option {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  text-align: left;
+  background: #fff;
+  border: 1.5px solid $border;
+  border-radius: 10px;
+  padding: 12px 14px;
+  cursor: pointer;
+  font: inherit;
+  transition:
+    border-color 0.15s,
+    background 0.15s,
+    box-shadow 0.15s;
+}
+
+.pmt__option:hover {
+  border-color: #93c5fd;
+  background: $blue-soft;
+}
+
+.pmt__option--active {
+  border-color: $blue;
+  background: $blue-soft;
+  box-shadow: 0 0 0 1px $blue;
+}
+
+.pmt__option-ico {
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
+  border-radius: 8px;
+  background: $soft;
+  color: $blue;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+}
+
+.pmt__option--active .pmt__option-ico {
+  background: $blue;
+  color: #fff;
+}
+
+.pmt__option-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pmt__option-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: $navy;
+}
+
+.pmt__option-desc {
+  font-size: 11px;
+  color: $muted;
+  line-height: 1.35;
+}
+
+.pmt__option:focus-visible {
+  outline: 2px solid $blue;
+  outline-offset: 2px;
+}
+
+.pmt__option-check {
+  margin-left: auto;
+  color: $blue;
+  font-size: 13px;
+}
+
+.pmt__option-error {
+  color: #b91c1c;
+  font-size: 12px;
+  margin: 4px 0 14px;
+}
+
+.pmt__error {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  color: #b91c1c;
+  font-size: 12.5px;
+  line-height: 1.45;
+  padding: 10px 14px;
+  margin: 4px 0 8px;
+}
+
+.pmt__hint {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  background: $soft;
+  border: 1px solid $border;
+  border-radius: 8px;
+  color: $slate;
+  font-size: 12px;
+  line-height: 1.45;
+  padding: 9px 13px;
+  margin: 0 0 10px;
+}
+
+.pmt__hint--warn {
+  background: #fffbeb;
+  border-color: #fde68a;
+  color: #92400e;
+}
+
+.pmt__split {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: $soft;
+  border: 1px dashed #cbd5e1;
+  border-radius: 10px;
+  padding: 14px 16px 0;
+  margin: 4px 0 8px;
+  flex-wrap: wrap;
+}
+
+.pmt__split-input {
+  flex: 1 1 180px;
+  min-width: 160px;
+}
+
+.pmt__split-arrow {
+  color: $muted;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.pmt__split-remainder {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: $green-soft;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  padding: 8px 14px;
+  margin-bottom: 14px;
+  flex: 1 1 180px;
+  min-width: 160px;
+}
+
+.pmt__split-remainder-label {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: $green;
+}
+
+.pmt__split-remainder-value {
+  font-size: 16px;
+  font-weight: 800;
+  color: $green;
+  font-variant-numeric: tabular-nums;
+}
+
+.pmt__content mat-form-field {
+  width: 100%;
+}
+
+.pmt__actions {
+  padding: 14px 28px 20px !important;
+  border-top: 1px solid $border;
+  flex: 0 0 auto;
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/custom-dialogs/payment-dialog/payment-dialog.component.ts

@@ -0,0 +1,288 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/** Angular Imports */
+import { Component, OnInit, inject } from '@angular/core';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { UntypedFormBuilder, UntypedFormGroup, UntypedFormControl, ValidatorFn, Validators } from '@angular/forms';
+
+/** Custom Services */
+import { FixedDepositsService } from '../../../fixed-deposits.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
+import { FormatNumberPipe } from '../../../../../pipes/format-number.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/**
+ * "Payment" dialog -- an always-available alternative to Premature Close (Active-only, no reinvest) and
+ * Close (Matured-only, no partial option). Works on an FD in either state and offers a fourth choice,
+ * Partial Reinvest, alongside the ones the backend's `DepositAccountOnClosureType` already had: the
+ * entered amount renews on this same account, the rest transfers to a savings account picked here.
+ */
+@Component({
+  selector: 'mifosx-payment-dialog',
+  templateUrl: './payment-dialog.component.html',
+  styleUrls: ['./payment-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    CdkScrollable,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    CdkTextareaAutosize,
+    MatProgressSpinnerModule,
+    FaIconComponent,
+    FormatNumberPipe
+  ]
+})
+export class PaymentDialogComponent implements OnInit {
+  /** The `onAccountClosureId` codes each closure type is registered under on the backend. */
+  private static readonly WITHDRAW_DEPOSIT_ID = 100;
+  private static readonly TRANSFER_TO_SAVINGS_ID = 200;
+  private static readonly REINVEST_FULL_ID = 300;
+  private static readonly REINVEST_PRINCIPAL_ID = 400;
+  private static readonly PARTIAL_REINVEST_ID = 500;
+
+  private static readonly ACTION_ICONS: Record<number, string> = {
+    [PaymentDialogComponent.WITHDRAW_DEPOSIT_ID]: 'money-bill-wave',
+    [PaymentDialogComponent.TRANSFER_TO_SAVINGS_ID]: 'wallet',
+    [PaymentDialogComponent.REINVEST_FULL_ID]: 'sync-alt',
+    [PaymentDialogComponent.REINVEST_PRINCIPAL_ID]: 'piggy-bank',
+    [PaymentDialogComponent.PARTIAL_REINVEST_ID]: 'arrows-alt-h'
+  };
+
+  private static readonly ACTION_DESCRIPTIONS: Record<number, string> = {
+    [PaymentDialogComponent.WITHDRAW_DEPOSIT_ID]: 'Pay out the full balance in cash',
+    [PaymentDialogComponent.TRANSFER_TO_SAVINGS_ID]: 'Move the full balance to another savings account',
+    [PaymentDialogComponent.REINVEST_FULL_ID]: 'Renew the full amount, same account number',
+    [PaymentDialogComponent.REINVEST_PRINCIPAL_ID]:
+      'Renew only the principal; interest transferred to a savings account',
+    [PaymentDialogComponent.PARTIAL_REINVEST_ID]: 'Renew part of it here; transfer the rest'
+  };
+
+  dialogRef = inject<MatDialogRef<PaymentDialogComponent>>(MatDialogRef);
+  data: { accountId: number | string; accountBalance?: number; maturityDate?: any } = inject(MAT_DIALOG_DATA);
+  private formBuilder = inject(UntypedFormBuilder);
+  private fixedDepositsService = inject(FixedDepositsService);
+  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+
+  paymentForm: UntypedFormGroup;
+  /** Loaded once, on open, from the same closure template the existing Close action already uses. */
+  onAccountClosureOptions: any[] = [];
+  savingsAccountsData: any[] = [];
+  maturityAmount: number = null;
+  loadingTemplate = true;
+  loadFailed = false;
+  submitting = false;
+  submitError: string = null;
+  maxDate: Date;
+
+  ngOnInit(): void {
+    this.maxDate = this.settingsService.businessDate;
+    this.paymentForm = this.formBuilder.group({
+      closedOnDate: [
+        '',
+        Validators.required
+      ],
+      onAccountClosureId: [
+        '',
+        Validators.required
+      ],
+      note: ['']
+    });
+    this.paymentForm.get('onAccountClosureId').valueChanges.subscribe((id: number) => this.onClosureTypeChange(id));
+    // The cap depends on whether the chosen date is on or after maturity, so a date change can make an
+    // already-entered amount valid or invalid. Without this the amount keeps its verdict from the old date.
+    this.paymentForm
+      .get('closedOnDate')
+      .valueChanges.subscribe(() =>
+        this.paymentForm.get('reinvestAmount')?.updateValueAndValidity({ emitEvent: false })
+      );
+
+    this.fixedDepositsService.getFixedDepositsAccountPaymentTemplate(this.data.accountId as string).subscribe({
+      next: (response: any) => {
+        // Withdraw Deposit books cash out of the vault immediately, which isn't appropriate for a
+        // staff-triggered Payment that may run well before or after the actual counter transaction --
+        // Transfer to Savings or a Reinvest option covers every real case instead.
+        this.onAccountClosureOptions = (response.onAccountClosureOptions ?? []).filter(
+          (option: any) => option.id !== PaymentDialogComponent.WITHDRAW_DEPOSIT_ID
+        );
+        this.savingsAccountsData = response.savingsAccounts ?? [];
+        this.maturityAmount = response.maturityAmount;
+        this.loadingTemplate = false;
+      },
+      // Without this the spinner would run forever on a failed load, leaving Cancel as the only way out
+      // and no indication of why the form never appeared.
+      error: () => {
+        this.loadingTemplate = false;
+        this.loadFailed = true;
+      }
+    });
+  }
+
+  /**
+   * The amount being split, and the bound the entered partial amount is checked against.
+   * <p>
+   * The server derives this from the account's balance AFTER it posts interest up to the chosen date, so which figure
+   * matches depends on that date. On or after maturity it posts the remaining full-rate interest, landing on the
+   * maturity amount. Before maturity it posts penalty-aware interest instead, which lands somewhere between the current
+   * balance and the maturity amount -- unknowable here, so the current balance is used as a floor that can never accept
+   * an amount the server would reject, and {@link remainderIsApproximate} tells the user the transfer will be larger.
+   */
+  get reinvestCap(): number | null {
+    if (this.processingOnOrAfterMaturity) {
+      return this.maturityAmount ?? this.data.accountBalance ?? null;
+    }
+    return this.data.accountBalance ?? this.maturityAmount ?? null;
+  }
+
+  /** Whether the chosen closure date is on or after the deposit's maturity date. */
+  private get processingOnOrAfterMaturity(): boolean {
+    const chosen = this.paymentForm?.get('closedOnDate')?.value;
+    if (!chosen || !this.data.maturityDate) {
+      return false;
+    }
+    return this.toTime(chosen) >= this.toTime(this.data.maturityDate);
+  }
+
+  /** Dates arrive here either as a Date from the picker or as the API's [yyyy, mm, dd] array. */
+  private toTime(value: any): number {
+    if (value instanceof Date) {
+      return new Date(value.getFullYear(), value.getMonth(), value.getDate()).getTime();
+    }
+    if (Array.isArray(value)) {
+      const [
+        year,
+        month,
+        day
+      ] = value;
+      return new Date(year, (month ?? 1) - 1, day ?? 1).getTime();
+    }
+    return new Date(value).getTime();
+  }
+
+  /** True when the cap is the pre-maturity balance, so the figures shown are a floor rather than exact. */
+  get remainderIsApproximate(): boolean {
+    return !this.processingOnOrAfterMaturity;
+  }
+
+  iconFor(id: number): string {
+    return PaymentDialogComponent.ACTION_ICONS[id] ?? 'circle';
+  }
+
+  descriptionFor(id: number): string {
+    return PaymentDialogComponent.ACTION_DESCRIPTIONS[id] ?? '';
+  }
+
+  selectClosureType(id: number): void {
+    this.paymentForm.get('onAccountClosureId').setValue(id);
+    this.paymentForm.get('onAccountClosureId').markAsTouched();
+  }
+
+  /** Adds/removes the destination-account and partial-amount controls to match what the chosen type needs. */
+  private onClosureTypeChange(id: number): void {
+    const needsDestinationAccount =
+      id === PaymentDialogComponent.TRANSFER_TO_SAVINGS_ID ||
+      id === PaymentDialogComponent.PARTIAL_REINVEST_ID ||
+      id === PaymentDialogComponent.REINVEST_PRINCIPAL_ID;
+    if (needsDestinationAccount) {
+      if (!this.paymentForm.contains('toSavingsAccountId')) {
+        this.paymentForm.addControl('toSavingsAccountId', new UntypedFormControl('', Validators.required));
+        this.paymentForm.addControl('transferDescription', new UntypedFormControl(''));
+      }
+    } else {
+      this.paymentForm.removeControl('toSavingsAccountId');
+      this.paymentForm.removeControl('transferDescription');
+    }
+
+    if (id === PaymentDialogComponent.PARTIAL_REINVEST_ID) {
+      if (!this.paymentForm.contains('reinvestAmount')) {
+        this.paymentForm.addControl(
+          'reinvestAmount',
+          new UntypedFormControl('', [
+            Validators.required,
+            Validators.min(0.01),
+            this.belowMaturityAmountValidator()
+          ])
+        );
+      }
+    } else {
+      this.paymentForm.removeControl('reinvestAmount');
+    }
+  }
+
+  /** Mirrors the backend's own `0 < reinvestAmount < accountBalance` rule, so a bad amount fails before submit. */
+  private belowMaturityAmountValidator(): ValidatorFn {
+    return (control) => {
+      const cap = Number(this.reinvestCap);
+      if (!cap || control.value === null || control.value === '') {
+        return null;
+      }
+      return Number(control.value) >= cap ? { belowMaturityAmount: true } : null;
+    };
+  }
+
+  get isPartialReinvest(): boolean {
+    return this.paymentForm?.get('onAccountClosureId')?.value === PaymentDialogComponent.PARTIAL_REINVEST_ID;
+  }
+
+  /** True when the chosen action needs a destination account but the customer has none to pick. */
+  get noDestinationAccounts(): boolean {
+    return (
+      !this.loadingTemplate && this.paymentForm?.contains('toSavingsAccountId') && this.savingsAccountsData.length === 0
+    );
+  }
+
+  /** What leaves this FD when the entered partial amount is kept behind; null until both figures are known. */
+  get remainderAmount(): number | null {
+    const reinvestAmount = this.paymentForm?.get('reinvestAmount')?.value;
+    if (!this.isPartialReinvest || reinvestAmount === null || reinvestAmount === '' || !this.reinvestCap) {
+      return null;
+    }
+    return Number(this.reinvestCap) - Number(reinvestAmount);
+  }
+
+  submit(): void {
+    const formValue = { ...this.paymentForm.value };
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    if (formValue.closedOnDate instanceof Date) {
+      formValue.closedOnDate = this.dateUtils.formatDate(formValue.closedOnDate, dateFormat);
+    }
+    const data = { ...formValue, dateFormat, locale };
+    this.submitting = true;
+    this.submitError = null;
+    this.fixedDepositsService
+      .executeFixedDepositsAccountCommand(this.data.accountId as string, 'payment', data)
+      .subscribe({
+        next: () => {
+          this.dialogRef.close({ confirm: true });
+        },
+        // Keep the dialog open with the entered values and say what went wrong, rather than leaving a
+        // permanently disabled Confirm behind whatever modal the global interceptor threw up.
+        error: (error: any) => {
+          this.submitting = false;
+          this.submitError =
+            error?.error?.defaultUserMessage ??
+            error?.error?.errors?.[0]?.defaultUserMessage ??
+            'This payment could not be processed. Please review the details and try again.';
+        }
+      });
+  }
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html

@@ -37,7 +37,7 @@
           <span class="fd-hero__meta-item">
             <span class="fd-hero__meta-label">{{ 'labels.inputs.Account Number' | translate }}</span>
             <mifosx-account-number
-              accountNo="{{ fixedDepositsAccountData.accountNo }}"
+              accountNo="{{ fixedDepositsAccountData.fdAccountNumber || fixedDepositsAccountData.accountNo }}"
               display="left"
             ></mifosx-account-number>
           </span>
@@ -79,6 +79,16 @@
 
     <!-- Action menu (kebab) -->
     <div class="fd-hero__actions">
+      @if (!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval) {
+        <button
+          mat-icon-button
+          matTooltip="Print Certificate"
+          (click)="printCertificate()"
+          aria-label="Print certificate"
+        >
+          <fa-icon icon="print"></fa-icon>
+        </button>
+      }
       <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Account actions" yPosition="below">
         <fa-icon icon="ellipsis-v"></fa-icon>
       </button>
@@ -220,6 +230,19 @@
         <span>{{ 'labels.inputs.Transactions' | translate }}</span>
       </a>
     }
+    @if (fixedDepositsAccountData.renewalHistory?.length) {
+      <a
+        mat-tab-link
+        class="fd-tab"
+        [routerLink]="['./renewal-history']"
+        routerLinkActive
+        #renewalHistory="routerLinkActive"
+        [active]="renewalHistory.isActive"
+      >
+        <fa-icon icon="history" class="fd-tab__ic"></fa-icon>
+        <span>{{ 'labels.inputs.Renewal History' | translate }}</span>
+      </a>
+    }
     <a
       mat-tab-link
       class="fd-tab"

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.ts

@@ -16,6 +16,8 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 import { CalculateInterestDialogComponent } from './custom-dialogs/calculate-interest-dialog/calculate-interest-dialog.component';
 import { PostInterestDialogComponent } from './custom-dialogs/post-interest-dialog/post-interest-dialog.component';
 import { ToggleWithholdTaxDialogComponent } from './custom-dialogs/toggle-withhold-tax-dialog/toggle-withhold-tax-dialog.component';
+import { PaymentDialogComponent } from './custom-dialogs/payment-dialog/payment-dialog.component';
+import { DepositCertificateDialogComponent } from 'app/shared/deposit-certificate-dialog/deposit-certificate-dialog.component';
 
 /** Custom Button Config. */
 import { FixedDepositsButtonsConfiguration } from './fixed-deposits-buttons.config';
@@ -98,6 +100,7 @@ export class FixedDepositAccountViewComponent implements OnInit {
     'Post Interest': 'interest',
     'Enable Withhold Tax': 'interest',
     'Disable Withhold Tax': 'interest',
+    Payment: 'transact',
     'Premature Close': 'danger',
     'Undo Activation': 'admin',
     Close: 'danger',
@@ -121,6 +124,7 @@ export class FixedDepositAccountViewComponent implements OnInit {
     'Post Interest': 'percentage',
     'Enable Withhold Tax': 'percentage',
     'Disable Withhold Tax': 'percentage',
+    Payment: 'sync-alt',
     'Premature Close': 'times-circle',
     'Undo Activation': 'undo',
     Close: 'times-circle',
@@ -260,9 +264,35 @@ export class FixedDepositAccountViewComponent implements OnInit {
       case 'Terminate':
         this.terminateFixedDepositsAccount();
         break;
+      case 'Payment':
+        this.openPaymentDialog();
+        break;
     }
   }
 
+  /**
+   * Opens the Payment action -- unlike Premature Close/Close, works whether the account is Active or
+   * Matured, and is the only place a Partial Reinvest can be done.
+   */
+  private openPaymentDialog(): void {
+    const paymentDialogRef = this.dialog.open(PaymentDialogComponent, {
+      width: '640px',
+      maxWidth: '95vw',
+      data: {
+        accountId: this.fixedDepositsAccountData.id,
+        // The server bounds a partial reinvest by the balance AFTER it posts interest to the chosen date,
+        // so the dialog needs both figures plus the maturity date to know which one that will be.
+        accountBalance: this.fixedDepositsAccountData.summary?.accountBalance,
+        maturityDate: this.fixedDepositsAccountData.maturityDate
+      }
+    });
+    paymentDialogRef.afterClosed().subscribe((response: any) => {
+      if (response?.confirm) {
+        this.reload();
+      }
+    });
+  }
+
   /**
    * Deletes Fixed Deposits Account.
    */
@@ -358,6 +388,20 @@ export class FixedDepositAccountViewComponent implements OnInit {
     });
   }
 
+  /**
+   * Opens a printable deposit certificate for this account.
+   */
+  printCertificate() {
+    this.dialog.open(DepositCertificateDialogComponent, {
+      width: '900px',
+      data: {
+        accountType: 'FD',
+        accountData: this.fixedDepositsAccountData,
+        clientId: this.fixedDepositsAccountData.clientId
+      }
+    });
+  }
+
   /**
    * Disables withhold tax for fixed deposits account
    * Fixed deposits endpoint is not supported so using Savings endpoint.

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposits-buttons.config.ts

@@ -116,6 +116,9 @@ export class FixedDepositsButtonsConfiguration {
           },
           {
             name: 'Add Charge'
+          },
+          {
+            name: 'Payment'
           }
         ];
         break;

src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.html

@@ -83,6 +83,22 @@
             }}</span>
           </div>
         }
+        @if (fixedDepositsAccountData.reinvestedFromAccountNo) {
+          <div class="nx-row">
+            <span class="nx-row__label">{{ 'labels.inputs.Reinvested From' | translate }}</span>
+            <span class="nx-row__value">
+              <a [routerLink]="reinvestedFromLink">{{ fixedDepositsAccountData.reinvestedFromAccountNo }}</a>
+            </span>
+          </div>
+        }
+        @if (fixedDepositsAccountData.reinvestedIntoAccountNo) {
+          <div class="nx-row">
+            <span class="nx-row__label">{{ 'labels.inputs.Reinvested Into' | translate }}</span>
+            <span class="nx-row__value">
+              <a [routerLink]="reinvestedIntoLink">{{ fixedDepositsAccountData.reinvestedIntoAccountNo }}</a>
+            </span>
+          </div>
+        }
       </div>
     </div>
 

src/app/deposits/fixed-deposits/fixed-deposit-account-view/general-tab/general-tab.component.ts

@@ -48,4 +48,25 @@ export class GeneralTabComponent {
       this.entityType = 'Center';
     }
   }
+
+  /**
+   * A reinvested FD always keeps the same client/group/center as the account it came from, so the
+   * counterpart account's view page sits at the same route -- only the account-id segment differs.
+   */
+  private siblingAccountLink(targetAccountId: number): string | null {
+    const segments = this.router.url.split('?')[0].split('/').filter(Boolean);
+    const idx = segments.indexOf('fixed-deposits-accounts');
+    if (idx === -1) return null;
+    return '/' + segments.slice(0, idx + 1).join('/') + '/' + targetAccountId + '/general';
+  }
+
+  get reinvestedFromLink(): string | null {
+    const id = this.fixedDepositsAccountData?.reinvestedFromAccountId;
+    return id ? this.siblingAccountLink(id) : null;
+  }
+
+  get reinvestedIntoLink(): string | null {
+    const id = this.fixedDepositsAccountData?.reinvestedIntoAccountId;
+    return id ? this.siblingAccountLink(id) : null;
+  }
 }

src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html

@@ -36,6 +36,17 @@
         <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate | formatNumber }} %</td>
       </ng-container>
 
+      <ng-container matColumnDef="seniorCitizen">
+        <th mat-header-cell *matHeaderCellDef><fa-icon icon="user-shield" class="m-r-5"></fa-icon>Senior Citizen</th>
+        <td mat-cell *matCellDef="let chartSlab">
+          {{
+            chartSlab.seniorCitizenRate !== null && chartSlab.seniorCitizenRate !== undefined
+              ? (chartSlab.seniorCitizenRate | formatNumber) + ' %'
+              : '-'
+          }}
+        </td>
+      </ng-container>
+
       <ng-container matColumnDef="description">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
         <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.ts

@@ -71,6 +71,7 @@ export class InterestRateChartTabComponent {
     'period',
     'amountRange',
     'interest',
+    'seniorCitizen',
     'description',
     'actions'
   ];

src/app/deposits/fixed-deposits/fixed-deposit-account-view/renewal-history-tab/renewal-history-tab.component.html

@@ -0,0 +1,139 @@
+<!--
+  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="rh-container">
+  @if (renewalHistory.length) {
+    <!-- ─── Summary strip ──────────────────────────────────────────── -->
+    <div class="rh-summary">
+      <div class="rh-summary__item">
+        <span class="rh-summary__label">FD Number</span>
+        <span class="rh-summary__value">{{ fdNumber }}</span>
+      </div>
+      <div class="rh-summary__item">
+        <span class="rh-summary__label">Terms So Far</span>
+        <span class="rh-summary__value">{{ renewalHistory.length }}</span>
+      </div>
+      <div class="rh-summary__item">
+        <span class="rh-summary__label">Original Principal</span>
+        <span class="rh-summary__value">{{ originalPrincipal | currency: currency.code : 'symbol-narrow' }}</span>
+      </div>
+      <div class="rh-summary__item rh-summary__item--highlight">
+        <span class="rh-summary__label">Current Value</span>
+        <span class="rh-summary__value">{{ currentValue | currency: currency.code : 'symbol-narrow' }}</span>
+      </div>
+      <div class="rh-summary__item rh-summary__item--positive">
+        <span class="rh-summary__label">Lifetime Interest</span>
+        <span class="rh-summary__value">{{ lifetimeInterestEarned | currency: currency.code : 'symbol-narrow' }}</span>
+      </div>
+    </div>
+
+    <!-- ─── Vertical timeline ──────────────────────────────────────── -->
+    <div class="rh-timeline">
+      @for (
+        term of renewalHistory;
+        track term.historyid ?? term.accountid + '-' + term.renewalcycleno;
+        let last = $last
+      ) {
+        <div class="rh-node">
+          <div class="rh-node__rail">
+            <span class="rh-node__dot" [class.rh-node__dot--active]="term.renewalstatus === 'ACTIVE'">
+              @if (term.renewalstatus === 'ACTIVE') {
+                <span class="rh-node__pulse"></span>
+              }
+            </span>
+            @if (!last) {
+              <span class="rh-node__line"></span>
+            }
+          </div>
+
+          <div class="rh-card" [class.rh-card--active]="term.renewalstatus === 'ACTIVE'">
+            <div class="rh-card__head">
+              <div class="rh-card__title-group">
+                <h4 class="rh-card__title">
+                  {{ term.renewalcycleno === 0 ? 'Original Term' : 'Renewal ' + term.renewalcycleno }}
+                </h4>
+                <span class="rh-badge" [class.rh-badge--active]="term.renewalstatus === 'ACTIVE'">
+                  <fa-icon [icon]="term.renewalstatus === 'ACTIVE' ? 'check-circle' : 'clock'"></fa-icon>
+                  {{ term.renewalstatus === 'ACTIVE' ? 'Active' : 'Matured' }}
+                </span>
+                @if (renewalTypeLabel(term)) {
+                  <span class="rh-tag">
+                    <fa-icon [icon]="renewalTypeIcon(term)"></fa-icon>
+                    {{ renewalTypeLabel(term) }}
+                  </span>
+                }
+              </div>
+              <button type="button" class="rh-chart-btn" (click)="openRateChart(term)">
+                <fa-icon icon="table"></fa-icon>
+                View Rate Chart
+              </button>
+            </div>
+
+            <div class="rh-card__period">
+              <fa-icon icon="calendar-alt" class="rh-card__period-ico"></fa-icon>
+              <span>{{ term.activatedondate | dateFormat }}</span>
+              <fa-icon icon="arrow-right" class="rh-card__period-arrow"></fa-icon>
+              <span>{{ term.maturitydate | dateFormat }}</span>
+              @if (tenureLabel(term)) {
+                <span class="rh-card__tenure">({{ tenureLabel(term) }})</span>
+              }
+            </div>
+
+            <div class="rh-stats">
+              <div class="rh-stat">
+                <span class="rh-stat__label">Principal</span>
+                <span class="rh-stat__value">{{ term.depositamount | currency: currency.code : 'symbol-narrow' }}</span>
+              </div>
+              <div class="rh-stat">
+                <span class="rh-stat__label">Rate</span>
+                <span class="rh-stat__value">{{ term.interestrate }}%</span>
+              </div>
+              <div class="rh-stat">
+                <span class="rh-stat__label">{{
+                  term.renewalstatus === 'ACTIVE' ? 'Interest So Far' : 'Interest Earned'
+                }}</span>
+                <span class="rh-stat__value rh-stat__value--positive">
+                  {{
+                    term.interestearned === null || term.interestearned === undefined
+                      ? '—'
+                      : (term.interestearned | currency: currency.code : 'symbol-narrow')
+                  }}
+                </span>
+              </div>
+              <div class="rh-stat rh-stat--highlight">
+                <span class="rh-stat__label">{{
+                  term.maturedamount === null || term.maturedamount === undefined ? 'Projected Maturity' : 'Matured At'
+                }}</span>
+                <span class="rh-stat__value">
+                  {{ maturityFor(term) | currency: currency.code : 'symbol-narrow' }}
+                </span>
+              </div>
+            </div>
+
+            <div class="rh-card__foot">
+              <fa-icon icon="info-circle" class="rh-card__foot-ico"></fa-icon>
+              <span>
+                Ledger account:
+                @if (term.accountid === fixedDepositsAccountData.id) {
+                  <strong>{{ term.accountno }}</strong>
+                } @else {
+                  <a [routerLink]="siblingLink(term.accountid)">{{ term.accountno }}</a>
+                }
+              </span>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  } @else {
+    <div class="rh-empty">
+      <fa-icon icon="history" class="rh-empty__icon"></fa-icon>
+      <p class="rh-empty__text">{{ 'labels.messages.No Renewal History Available' | translate }}</p>
+    </div>
+  }
+</div>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/renewal-history-tab/renewal-history-tab.component.scss

@@ -0,0 +1,364 @@
+/**
+ * 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/.
+ */
+
+$navy: #0d1b2a;
+$slate: #475569;
+$muted: #64748b;
+$border: #e2e8f0;
+$soft: #f8fafc;
+$positive: #047857;
+$positive-soft: #ecfdf5;
+$accent: #2563eb;
+$accent-soft: #eff6ff;
+
+.rh-container {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 4px 0 24px;
+}
+
+/* ─── Summary strip ─────────────────────────────────────────────────── */
+.rh-summary {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 1px;
+  background: $border;
+  border: 1px solid $border;
+  border-radius: 14px;
+  overflow: hidden;
+  margin-bottom: 28px;
+  box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 14px 16px;
+    background: #fff;
+  }
+
+  &__label {
+    font-size: 10.5px;
+    font-weight: 600;
+    color: $muted;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  &__value {
+    font-size: 15px;
+    font-weight: 700;
+    color: $navy;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__item--highlight {
+    background: $accent-soft;
+
+    .rh-summary__value {
+      color: $accent;
+    }
+  }
+
+  &__item--positive {
+    background: $positive-soft;
+
+    .rh-summary__value {
+      color: $positive;
+    }
+  }
+}
+
+@media (width <= 720px) {
+  .rh-summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/* ─── Timeline rail ──────────────────────────────────────────────────── */
+.rh-timeline {
+  display: flex;
+  flex-direction: column;
+}
+
+.rh-node {
+  display: flex;
+  gap: 18px;
+}
+
+.rh-node__rail {
+  flex: none;
+  width: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.rh-node__dot {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  margin-top: 22px;
+  border-radius: 50%;
+  background: #cbd5e1;
+  border: 3px solid #fff;
+  box-shadow: 0 0 0 2px #cbd5e1;
+  flex: none;
+
+  &--active {
+    background: $positive;
+    box-shadow: 0 0 0 2px $positive;
+  }
+}
+
+.rh-node__pulse {
+  position: absolute;
+  inset: -6px;
+  border-radius: 50%;
+  border: 2px solid $positive;
+  opacity: 0.6;
+  animation: rh-pulse 1.8s ease-out infinite;
+}
+
+@keyframes rh-pulse {
+  0% {
+    transform: scale(0.6);
+    opacity: 0.7;
+  }
+
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+
+.rh-node__line {
+  flex: 1;
+  width: 2px;
+  min-height: 24px;
+  background: $border;
+  margin: 4px 0;
+}
+
+/* ─── Term card ──────────────────────────────────────────────────────── */
+.rh-card {
+  flex: 1;
+  min-width: 0;
+  background: #fff;
+  border: 1px solid $border;
+  border-radius: 14px;
+  box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
+  padding: 16px 18px;
+  margin-bottom: 20px;
+  transition: box-shadow 0.15s ease;
+
+  &--active {
+    border-color: rgb(4 120 87 / 20%);
+    box-shadow: 0 2px 10px rgb(4 120 87 / 8%);
+  }
+
+  &:hover {
+    box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
+  }
+
+  &__head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  &__title-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 700;
+    color: $navy;
+  }
+
+  &__period {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+    font-size: 12.5px;
+    color: $slate;
+    font-weight: 500;
+
+    &-ico {
+      color: $muted;
+      font-size: 11px;
+    }
+
+    &-arrow {
+      color: $muted;
+      font-size: 10px;
+    }
+  }
+
+  &__tenure {
+    color: $muted;
+    font-weight: 400;
+  }
+
+  &__foot {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 12px;
+    padding-top: 10px;
+    border-top: 1px dashed $border;
+    font-size: 11.5px;
+    color: $muted;
+
+    &-ico {
+      font-size: 10px;
+    }
+
+    a {
+      color: $accent;
+      font-weight: 600;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+/* ─── Status badge / auto-renewed tag ───────────────────────────────── */
+.rh-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 9px;
+  border-radius: 999px;
+  background: $soft;
+  color: $muted;
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+
+  &--active {
+    background: $positive-soft;
+    color: $positive;
+  }
+}
+
+.rh-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 9px;
+  border-radius: 999px;
+  background: $accent-soft;
+  color: $accent;
+  font-size: 10.5px;
+  font-weight: 600;
+}
+
+/* ─── View Rate Chart button ─────────────────────────────────────────── */
+.rh-chart-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 14px;
+  border: 1px solid $border;
+  border-radius: 999px;
+  background: #fff;
+  color: $accent;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+
+  &:hover {
+    background: $accent-soft;
+    border-color: $accent;
+  }
+}
+
+/* ─── Stat grid ──────────────────────────────────────────────────────── */
+.rh-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 14px;
+}
+
+@media (width <= 640px) {
+  .rh-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.rh-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 9px 12px;
+  background: $soft;
+  border-radius: 10px;
+
+  &__label {
+    font-size: 10px;
+    font-weight: 600;
+    color: $muted;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  &__value {
+    font-size: 13.5px;
+    font-weight: 700;
+    color: $navy;
+    font-variant-numeric: tabular-nums;
+
+    &--positive {
+      color: $positive;
+    }
+  }
+
+  &--highlight {
+    background: $accent-soft;
+
+    .rh-stat__value {
+      color: $accent;
+    }
+  }
+}
+
+/* ─── Empty state ────────────────────────────────────────────────────── */
+.rh-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 64px 16px;
+  color: $muted;
+
+  &__icon {
+    font-size: 30px;
+    opacity: 0.4;
+  }
+
+  &__text {
+    margin: 0;
+    font-size: 13px;
+  }
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/renewal-history-tab/renewal-history-tab.component.ts

@@ -0,0 +1,235 @@
+/**
+ * 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 { MatDialog } from '@angular/material/dialog';
+import { Currency } from 'app/shared/models/general.model';
+import { CurrencyPipe } from '@angular/common';
+import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { ProductsService } from 'app/products/products.service';
+import { TermRateChartDialogComponent } from './term-rate-chart-dialog/term-rate-chart-dialog.component';
+
+/**
+ * Every term of one FD, oldest first, as a vertical timeline -- one card per renewal cycle. Its own tab
+ * rather than a card on General, since a long-lived FD can carry many terms and each one's full detail
+ * (dates, rate, principal, interest, and its own rate chart) needs real room to read comfortably.
+ */
+@Component({
+  selector: 'mifosx-renewal-history-tab',
+  templateUrl: './renewal-history-tab.component.html',
+  styleUrls: ['./renewal-history-tab.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FaIconComponent,
+    CurrencyPipe,
+    DateFormatPipe
+  ]
+})
+export class RenewalHistoryTabComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private productsService = inject(ProductsService);
+
+  fixedDepositsAccountData: any;
+  currency: Currency;
+
+  /**
+   * The bank's currently published senior-citizen premium per tenure band, for this FD's type. Fetched once
+   * from the same CBS Base Interest Rates screen staff maintain, so a term's rate-chart popup can show the
+   * premium alongside the standard rate -- neither the account's own chart snapshot nor the archived history
+   * carries a senior-citizen column, since that concept only exists on the base rate master.
+   */
+  private activeBaseSlabs: any[] = [];
+
+  constructor() {
+    this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
+      this.fixedDepositsAccountData = data.fixedDepositsAccountData;
+      this.currency = this.fixedDepositsAccountData.currency;
+    });
+  }
+
+  ngOnInit(): void {
+    const fdType = this.fixedDepositsAccountData?.fdType;
+    if (!fdType) {
+      return;
+    }
+    this.productsService.getFdBaseInterestRates(fdType).subscribe({
+      next: (rates: any[]) => {
+        const active = (rates || []).find((r: any) => r.isActive);
+        this.activeBaseSlabs = active?.slabs ?? [];
+      },
+      error: () => {}
+    });
+  }
+
+  /**
+   * The published senior-citizen rate for a tenure band, matched by period type and range against the active
+   * base rate card. Returns null when nothing matches (no published base version for this FD type, or this
+   * particular band isn't on it, or the matching band simply carries no premium) -- displayed as a blank
+   * rather than a misleading zero.
+   */
+  private seniorCitizenRateFor(periodTypeEnum: number, fromPeriod: number, toPeriod: number | null): number | null {
+    const match = this.activeBaseSlabs.find(
+      (s) =>
+        s.periodTypeEnum === periodTypeEnum &&
+        s.fromPeriod === fromPeriod &&
+        (s.toPeriod ?? null) === (toPeriod ?? null)
+    );
+    return match?.seniorCitizenRate > 0 ? match.seniorCitizenRate : null;
+  }
+
+  /**
+   * A reinvested FD always keeps the same client/group/center as the account it came from, so the
+   * counterpart account's view page sits at the same route -- only the account-id segment differs.
+   */
+  private siblingAccountLink(targetAccountId: number): string | null {
+    const segments = this.router.url.split('?')[0].split('/').filter(Boolean);
+    const idx = segments.indexOf('fixed-deposits-accounts');
+    if (idx === -1) return null;
+    return '/' + segments.slice(0, idx + 1).join('/') + '/' + targetAccountId + '/general';
+  }
+
+  siblingLink(targetAccountId: number): string | null {
+    return this.siblingAccountLink(targetAccountId);
+  }
+
+  /**
+   * Every term of this FD, oldest first, as resolved by the backend. Keys are lower-cased because they
+   * arrive straight from the SQL result-set column labels.
+   */
+  get renewalHistory(): any[] {
+    return this.fixedDepositsAccountData?.renewalHistory ?? [];
+  }
+
+  get fdNumber(): string {
+    return this.fixedDepositsAccountData?.fdAccountNumber ?? this.fixedDepositsAccountData?.accountNo;
+  }
+
+  /** The very first term's opening principal -- what the customer originally deposited. */
+  get originalPrincipal(): number | null {
+    return this.renewalHistory[0]?.depositamount ?? null;
+  }
+
+  /** The latest term's settled or projected value -- what the FD is worth right now. */
+  get currentValue(): number | null {
+    const latest = this.renewalHistory[this.renewalHistory.length - 1];
+    return latest ? this.maturityFor(latest) : null;
+  }
+
+  /**
+   * Total interest earned across every term, settled terms plus the running term's interest-to-date. Null
+   * only when there is nothing to sum, so the summary strip can tell "no data yet" apart from "zero".
+   */
+  get lifetimeInterestEarned(): number | null {
+    if (!this.renewalHistory.length) {
+      return null;
+    }
+    let total = 0;
+    for (const term of this.renewalHistory) {
+      if (term.interestearned != null) {
+        total += Number(term.interestearned);
+      } else {
+        const projected = this.maturityFor(term);
+        if (projected != null && term.depositamount != null) {
+          total += Number(projected) - Number(term.depositamount);
+        }
+      }
+    }
+    return total;
+  }
+
+  /**
+   * A term's settled maturity amount, or its projection while it is still running. Resolved here rather
+   * than inline so the choice isn't left to operator precedence between `??` and the currency pipe.
+   */
+  maturityFor(term: any): number | null {
+    return term?.maturedamount ?? term?.projectedmaturityamount ?? null;
+  }
+
+  /** periodTypeEnum values as archived -- same encoding as SavingsPeriodFrequencyType (DAYS=0 ... YEARS=3). */
+  private static readonly PERIOD_TYPE_LABELS: Record<number, string> = {
+    0: 'Days',
+    1: 'Weeks',
+    2: 'Months',
+    3: 'Years'
+  };
+
+  /** "10 Years" rather than a bare number, using the same period-type encoding the archived charts use. */
+  tenureLabel(term: any): string {
+    if (term?.tenure == null) {
+      return '';
+    }
+    const unit = RenewalHistoryTabComponent.PERIOD_TYPE_LABELS[term.tenurefrequencyenum] ?? '';
+    return unit ? `${term.tenure} ${unit}` : `${term.tenure}`;
+  }
+
+  /** How the renewal happened, for display as a small tag -- null when the term hasn't renewed (yet). */
+  renewalTypeLabel(term: any): string | null {
+    if (term?.renewaltype === 'AUTO') return 'Auto-Renewed';
+    if (term?.renewaltype === 'MANUAL') return 'Renewed by Staff';
+    return null;
+  }
+
+  renewalTypeIcon(term: any): string {
+    return term?.renewaltype === 'MANUAL' ? 'user-cog' : 'robot';
+  }
+
+  /**
+   * The rate-by-tenure chart for one term of this FD's history, normalised to one shape regardless of source.
+   *
+   * A term's chart is only archived once it closes via an in-place renewal, so the term still running has no
+   * archived rows -- for that one term (recognisable as the one matching this account's own id), the
+   * account's own live chart is shown instead, since it is the same data. The two sources use different key
+   * casing and represent the period type differently (a raw enum int here, an expanded {value} object on the
+   * live chart), which this maps into one consistent shape the dialog can render without knowing which source
+   * it came from.
+   */
+  private chartSlabsFor(term: any): any[] {
+    const raw = term?.chartSlabs?.length
+      ? term.chartSlabs
+      : term?.accountid === this.fixedDepositsAccountData?.id
+        ? (this.fixedDepositsAccountData?.accountChart?.chartSlabs ?? [])
+        : [];
+    return raw.map((slab: any) => {
+      const periodTypeEnum = slab.periodType?.id ?? slab.periodtypeenum;
+      const fromPeriod = slab.fromperiod ?? slab.fromPeriod;
+      const toPeriod = slab.toperiod ?? slab.toPeriod;
+      // The archived/live row's own senior_citizen_rate is the true figure as published when this term
+      // was actually priced -- preferred whenever present. The live lookup against today's base rate
+      // card is only a fallback, for the currently-running term (not archived yet) or an older archive
+      // row written before that column existed -- flagged as such so the dialog can say so.
+      const persistedSeniorRate = slab.seniorcitizenrate ?? slab.seniorCitizenRate ?? null;
+      return {
+        description: slab.description,
+        fromPeriod,
+        toPeriod,
+        periodTypeLabel: slab.periodType?.value ?? RenewalHistoryTabComponent.PERIOD_TYPE_LABELS[periodTypeEnum] ?? '',
+        annualInterestRate: slab.annualinterestrate ?? slab.annualInterestRate,
+        seniorCitizenRate:
+          persistedSeniorRate ?? this.seniorCitizenRateFor(periodTypeEnum, fromPeriod, toPeriod ?? null),
+        seniorCitizenRateIsLive: persistedSeniorRate == null
+      };
+    });
+  }
+
+  /** Opens the full rate chart for one term in a popup, rather than pushing every later term down the page. */
+  openRateChart(term: any): void {
+    this.dialog.open(TermRateChartDialogComponent, {
+      width: '560px',
+      data: {
+        term,
+        slabs: this.chartSlabsFor(term),
+        isSeniorCitizen: !!this.fixedDepositsAccountData?.isSeniorCitizen
+      }
+    });
+  }
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/renewal-history-tab/term-rate-chart-dialog/term-rate-chart-dialog.component.html

@@ -0,0 +1,77 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="trc-dialog">
+  <h2 mat-dialog-title class="trc-header">
+    <span class="trc-header__icon"><fa-icon icon="table"></fa-icon></span>
+    <span class="trc-header__text">
+      <span class="trc-header__title">{{ termLabel }} — Rate Chart</span>
+      <span class="trc-header__sub"
+        >{{ term.activatedondate | dateFormat }} → {{ term.maturitydate | dateFormat }}</span
+      >
+    </span>
+  </h2>
+
+  <div mat-dialog-content class="trc-content">
+    @if (slabs.length) {
+      <table class="trc-table">
+        <thead>
+          <tr>
+            <th>Description</th>
+            <th>Tenure</th>
+            <th class="trc-table__rate-col">Rate</th>
+            <th class="trc-table__rate-col">
+              <fa-icon icon="user-shield" class="trc-table__sc-ico"></fa-icon>
+              Senior Citizen
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (slab of slabs; track $index) {
+            <tr [class.trc-table__row--applied]="isAppliedSlab(slab) || isAppliedSeniorSlab(slab)">
+              <td>{{ slab.description }}</td>
+              <td>{{ slab.fromPeriod }} – {{ slab.toPeriod || '∞' }} {{ slab.periodTypeLabel }}</td>
+              <td class="trc-table__rate-col">
+                {{ slab.annualInterestRate }}%
+                @if (isAppliedSlab(slab)) {
+                  <span class="trc-applied-badge">Applied</span>
+                }
+              </td>
+              <td class="trc-table__rate-col trc-table__sc-col">
+                {{
+                  slab.seniorCitizenRate !== null && slab.seniorCitizenRate !== undefined
+                    ? slab.seniorCitizenRate + '%'
+                    : '—'
+                }}
+                @if (isAppliedSeniorSlab(slab)) {
+                  <span class="trc-applied-badge">Applied</span>
+                }
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+      @if (hasLiveSeniorRate) {
+        <p class="trc-note">
+          <fa-icon icon="info-circle"></fa-icon>
+          Senior citizen rate for this term wasn't recorded at the time; the figure shown is today's published rate, for
+          reference.
+        </p>
+      }
+    } @else {
+      <div class="trc-empty">
+        <fa-icon icon="info-circle" class="trc-empty__icon"></fa-icon>
+        <p>No rate chart was archived for this term.</p>
+      </div>
+    }
+  </div>
+
+  <div mat-dialog-actions align="end" class="trc-actions">
+    <button mat-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
+  </div>
+</div>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/renewal-history-tab/term-rate-chart-dialog/term-rate-chart-dialog.component.scss

@@ -0,0 +1,159 @@
+/**
+ * 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/.
+ */
+
+$navy: #0d1b2a;
+$slate: #475569;
+$muted: #64748b;
+$border: #e2e8f0;
+$soft: #f8fafc;
+$positive: #047857;
+$positive-soft: #ecfdf5;
+
+$accent: #b8860b;
+
+.trc-dialog {
+  min-width: 420px;
+  max-width: 540px;
+}
+
+.trc-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0 0 4px;
+
+  &__icon {
+    flex: none;
+    width: 38px;
+    height: 38px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
+    color: #fff;
+    font-size: 15px;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 700;
+    color: $navy;
+    line-height: 1.3;
+  }
+
+  &__sub {
+    font-size: 12px;
+    color: $muted;
+    font-weight: 500;
+  }
+}
+
+.trc-content {
+  padding-top: 4px;
+}
+
+.trc-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+
+  th {
+    padding: 8px 10px;
+    background: $soft;
+    color: $muted;
+    font-weight: 600;
+    text-align: left;
+    border-bottom: 1px solid $border;
+  }
+
+  td {
+    padding: 9px 10px;
+    color: $slate;
+    border-bottom: 1px solid $border;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__rate-col {
+    text-align: right;
+  }
+
+  &__row--applied {
+    background: $positive-soft;
+
+    td {
+      color: $positive;
+      font-weight: 700;
+    }
+  }
+
+  &__sc-ico {
+    color: $accent;
+    margin-right: 4px;
+  }
+
+  &__sc-col {
+    color: $accent;
+    font-weight: 600;
+  }
+}
+
+.trc-applied-badge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 7px;
+  border-radius: 10px;
+  background: $positive;
+  color: #fff;
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  vertical-align: middle;
+}
+
+.trc-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  margin: 10px 2px 0;
+  color: $muted;
+  font-size: 11px;
+  font-style: italic;
+  line-height: 1.4;
+}
+
+.trc-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 32px 8px;
+  color: $muted;
+  text-align: center;
+
+  &__icon {
+    font-size: 22px;
+    opacity: 0.5;
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+  }
+}
+
+.trc-actions {
+  padding-top: 6px;
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/renewal-history-tab/term-rate-chart-dialog/term-rate-chart-dialog.component.ts

@@ -0,0 +1,93 @@
+/**
+ * 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 {
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { MatButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/**
+ * The full rate-by-tenure chart one term of an FD was priced on, in a popup rather than inline in the
+ * timeline: a chart can run to several tenure bands, and showing it in place would push every later term
+ * down the page every time one is opened.
+ */
+@Component({
+  selector: 'mifosx-term-rate-chart-dialog',
+  templateUrl: './term-rate-chart-dialog.component.html',
+  styleUrls: ['./term-rate-chart-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatButton,
+    FaIconComponent
+  ]
+})
+export class TermRateChartDialogComponent {
+  dialogRef = inject<MatDialogRef<TermRateChartDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
+
+  get term(): any {
+    return this.data.term;
+  }
+
+  get slabs(): any[] {
+    return this.data.slabs ?? [];
+  }
+
+  get termLabel(): string {
+    return this.term?.renewalcycleno === 0 ? 'Original Term' : 'Renewal ' + this.term?.renewalcycleno;
+  }
+
+  /** Whether the DEPOSITOR (not just the tenure band) was a senior citizen for this term. */
+  get isSeniorCitizen(): boolean {
+    return !!this.data.isSeniorCitizen;
+  }
+
+  /**
+   * True when at least one senior-citizen figure shown is a live lookup against today's base rate card rather than the
+   * true rate persisted for this specific term -- only possible for the currently-running term (not archived yet) or an
+   * older archive row that predates the persisted column. Drives whether the disclaimer note is shown at all.
+   */
+  get hasLiveSeniorRate(): boolean {
+    return this.slabs.some((s) => s.seniorCitizenRateIsLive && s.seniorCitizenRate != null);
+  }
+
+  /**
+   * True for the STANDARD-rate cell that was actually applied to this term. Never true for a senior-citizen
+   * term, since that term was priced off the senior column instead -- see {@link isAppliedSeniorSlab}.
+   * Compared as numbers since one side arrives as a string from the currency-agnostic archive row.
+   */
+  isAppliedSlab(slab: any): boolean {
+    return (
+      !this.isSeniorCitizen &&
+      this.term?.interestrate != null &&
+      Number(slab.annualInterestRate) === Number(this.term.interestrate)
+    );
+  }
+
+  /** True for the SENIOR-CITIZEN cell that was actually applied, for a term held by a senior-citizen depositor. */
+  isAppliedSeniorSlab(slab: any): boolean {
+    return (
+      this.isSeniorCitizen &&
+      slab.seniorCitizenRate != null &&
+      this.term?.interestrate != null &&
+      Number(slab.seniorCitizenRate) === Number(this.term.interestrate)
+    );
+  }
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html

@@ -36,7 +36,11 @@
           [ngClass]="savingsTransactionColor(transaction)"
           (click)="showTransactions(transaction)"
         >
-          {{ transaction.id }}
+          @if (transaction.isRenewalEvent) {
+            <fa-icon icon="sync-alt" class="txn-tab__renewal-ico"></fa-icon>
+          } @else {
+            {{ transaction.id }}
+          }
         </td>
       </ng-container>
 
@@ -72,7 +76,13 @@
           [ngClass]="savingsTransactionColor(transaction)"
           (click)="showTransactions(transaction)"
         >
-          {{ isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }}
+          {{
+            transaction.isRenewalEvent
+              ? '—'
+              : isDebit(transaction.transactionType)
+                ? (transaction.amount | formatNumber)
+                : 'N/A'
+          }}
         </td>
       </ng-container>
 
@@ -84,7 +94,13 @@
           [ngClass]="savingsTransactionColor(transaction)"
           (click)="showTransactions(transaction)"
         >
-          {{ !isDebit(transaction.transactionType) ? (transaction.amount | formatNumber) : 'N/A' }}
+          {{
+            transaction.isRenewalEvent
+              ? '—'
+              : !isDebit(transaction.transactionType)
+                ? (transaction.amount | formatNumber)
+                : 'N/A'
+          }}
         </td>
       </ng-container>
 
@@ -96,36 +112,40 @@
           [ngClass]="savingsTransactionColor(transaction)"
           (click)="showTransactions(transaction)"
         >
-          {{ transaction.runningBalance | formatNumber }}
+          {{ transaction.isRenewalEvent ? '—' : (transaction.runningBalance | formatNumber) }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
         <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell class="center" *matCellDef="let transaction; let idx = index">
-          <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
-            <mat-icon>more_vert</mat-icon>
-          </button>
-          <mat-menu #transactionMenu="matMenu">
-            <button mat-menu-item (click)="showTransactions(transaction)">
-              <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'labels.text.View Transaction' | translate }}</span>
+          @if (transaction.isRenewalEvent) {
+            <span class="txn-tab__renewal-tag">No ledger impact</span>
+          } @else {
+            <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
+              <mat-icon>more_vert</mat-icon>
             </button>
-            @if (!isFirstTransaction(idx)) {
-              <button mat-menu-item (click)="undoTransaction(transaction)">
-                <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
-                <span>{{ 'tooltips.Undo Transaction' | translate }}</span>
+            <mat-menu #transactionMenu="matMenu">
+              <button mat-menu-item (click)="showTransactions(transaction)">
+                <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
+                <span>{{ 'labels.text.View Transaction' | translate }}</span>
               </button>
-            }
-            <button
-              mat-menu-item
-              (click)="routeEdit($event)"
-              [routerLink]="['/', 'journal-entry', 'view', 'S' + transaction.id]"
-            >
-              <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
-              <span>{{ 'tooltips.View Journal Entries' | translate }}</span>
-            </button>
-          </mat-menu>
+              @if (!isFirstTransaction(idx)) {
+                <button mat-menu-item (click)="undoTransaction(transaction)">
+                  <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
+                  <span>{{ 'tooltips.Undo Transaction' | translate }}</span>
+                </button>
+              }
+              <button
+                mat-menu-item
+                (click)="routeEdit($event)"
+                [routerLink]="['/', 'journal-entry', 'view', 'S' + transaction.id]"
+              >
+                <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
+                <span>{{ 'tooltips.View Journal Entries' | translate }}</span>
+              </button>
+            </mat-menu>
+          }
         </td>
       </ng-container>
 

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.scss

@@ -97,4 +97,32 @@ table {
     color: $muted;
     font-style: italic;
   }
+
+  .mat-mdc-cell.renewal-marker {
+    background: #eff6ff;
+    color: $blue;
+    font-style: italic;
+    cursor: default;
+  }
+
+  .mat-mdc-row:has(.renewal-marker):hover {
+    background: #eff6ff;
+    cursor: default;
+  }
+}
+
+.txn-tab__renewal-ico {
+  color: $blue;
+}
+
+.txn-tab__renewal-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: #dbeafe;
+  color: $blue;
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts

@@ -113,13 +113,71 @@ export class TransactionsTabComponent implements OnInit {
    */
   constructor() {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
-      this.transactionsData = data.fixedDepositsAccountData.transactions;
+      this.transactionsData = this.withRenewalMarkers(
+        data.fixedDepositsAccountData.transactions,
+        data.fixedDepositsAccountData.renewalHistory
+      );
       this.clientId = this.route.parent.snapshot.params['clientId'];
       this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
       this.status = data.fixedDepositsAccountData.status.value;
     });
   }
 
+  /**
+   * An in-place renewal moves no money -- the matured balance simply becomes the new term's opening
+   * principal -- so it posts no withdrawal, deposit, or journal entry (see
+   * DepositAccountDomainServiceJpa#handleFDAccountMaturityClosure). Without something here, a renewal
+   * would be invisible in this list even though the account's rate and term just changed. These rows
+   * are synthesized purely for display from the renewal history already loaded for the Renewal History
+   * tab -- never written anywhere, never matched against a real transaction id -- so undo, journal-entry
+   * lookup, and every real transaction's running balance stay exactly as they were.
+   */
+  private withRenewalMarkers(transactions: any[], renewalHistory: any[]): any[] {
+    const markers: any[] = (renewalHistory ?? [])
+      .filter((term: any) => term.renewalcycleno > 0)
+      .map((term: any) => {
+        const marker: any = {
+          isRenewalEvent: true,
+          id: null,
+          date: term.activatedondate,
+          amount: null,
+          runningBalance: null,
+          reversed: false,
+          transfer: null,
+          renewalCycleNo: term.renewalcycleno,
+          transactionType: {
+            value: term.renewaltype === 'MANUAL' ? 'FD Renewed (Staff)' : 'FD Auto-Renewed',
+            accrual: false,
+            withdrawal: false,
+            feeDeduction: false,
+            overdraftInterest: false,
+            withholdTax: false
+          }
+        };
+        return marker;
+      });
+    return [
+      ...(transactions ?? []),
+      ...markers
+    ].sort((a, b) => this.toEpoch(b.date) - this.toEpoch(a.date));
+  }
+
+  /** Same [yyyy, MM, dd]-or-ISO-string shape DateFormatPipe already handles, resolved to a sortable epoch. */
+  private toEpoch(value: any): number {
+    if (!value) {
+      return 0;
+    }
+    if (Array.isArray(value)) {
+      const [
+        year,
+        month,
+        day
+      ] = value;
+      return new Date(year, (month ?? 1) - 1, day ?? 1).getTime();
+    }
+    return new Date(value).getTime();
+  }
+
   ngOnInit() {
     this.hideAccrualsParam = new UntypedFormControl(false);
     this.hideReversedParam = new UntypedFormControl(false);
@@ -161,6 +219,9 @@ export class TransactionsTabComponent implements OnInit {
    * @param {any} transactionsData Transactions Data
    */
   showTransactions(transactionsData: any) {
+    if (transactionsData.isRenewalEvent) {
+      return;
+    }
     if (transactionsData.transfer) {
       this.router.navigate([`account-transfers/account-transfers/${transactionsData.transfer.id}`], {
         relativeTo: this.route
@@ -191,7 +252,10 @@ export class TransactionsTabComponent implements OnInit {
     this.dataSource.sort = this.sort;
   }
 
-  savingsTransactionColor(transaction: SavingsAccountTransaction): string {
+  savingsTransactionColor(transaction: any): string {
+    if (transaction.isRenewalEvent) {
+      return 'renewal-marker';
+    }
     if (transaction.reversed) {
       return 'strike';
     } else if (transaction.transfer) {

src/app/deposits/fixed-deposits/fixed-deposits-routing.module.ts

@@ -31,6 +31,7 @@ import { FixedDepositsAccountActionsResolver } from './common-resolvers/fixed-de
 import { FixedDepositsAccountTemplateResolver } from './common-resolvers/fixed-deposit-account-template.resolver';
 import { FixedDepositsAccountAndTemplateResolver } from './common-resolvers/fixed-deposit-account-and-template.resolver';
 import { GeneralTabComponent } from './fixed-deposit-account-view/general-tab/general-tab.component';
+import { RenewalHistoryTabComponent } from './fixed-deposit-account-view/renewal-history-tab/renewal-history-tab.component';
 import { AccountNomineesTabComponent } from 'app/shared/account-nominees-tab/account-nominees-tab.component';
 
 const routes: Routes = [
@@ -80,6 +81,15 @@ const routes: Routes = [
                   routeParamBreadcrumb: false
                 }
               },
+              {
+                path: 'renewal-history',
+                component: RenewalHistoryTabComponent,
+                data: {
+                  title: 'Fixed Deposit Account Renewal History',
+                  breadcrumb: 'Renewal History',
+                  routeParamBreadcrumb: false
+                }
+              },
               {
                 path: 'transactions',
                 component: TransactionsTabComponent,

src/app/deposits/fixed-deposits/fixed-deposits.service.ts

@@ -87,6 +87,17 @@ export class FixedDepositsService {
     return this.http.get(`/fixeddepositaccounts/${accountId}/template`, { params: httpParams });
   }
 
+  /**
+   * Template for the Payment action. Same shape as the closure template, but its `onAccountClosureOptions` also
+   * include Partial Re-Invest, which the closure commands exclude because only Payment implements it.
+   * @param {string} accountId Fixed Deposits Account Id
+   * @returns {Observable<any>}
+   */
+  getFixedDepositsAccountPaymentTemplate(accountId: string): Observable<any> {
+    const httpParams = new HttpParams().set('command', 'payment');
+    return this.http.get(`/fixeddepositaccounts/${accountId}/template`, { params: httpParams });
+  }
+
   /**
    * @param {string} accountId Fixed Deposits Account Id
    * @returns {Observable<any>}

src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html

@@ -33,6 +33,7 @@
         <mifosx-recurring-deposits-account-details-step
           [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
           (recurringDepositsAccountProductTemplate)="setTemplate($event)"
+          [externalLinkedAccountId]="recurringDepositsAccountMaturityTermsStep?.selectedTransferAccount?.id ?? null"
         >
         </mifosx-recurring-deposits-account-details-step>
 
@@ -111,7 +112,40 @@
       </div>
     </mat-tab>
 
-    <!-- Tab 4: Preview -->
+    <!-- Tab 4: Terms -->
+    <mat-tab [disabled]="!recurringDepositsAccountProductTemplate">
+      <ng-template mat-tab-label>
+        <fa-icon icon="file-alt" class="cra-tab__icon"></fa-icon>
+        Terms
+      </ng-template>
+      <div class="cra-tab-body">
+        @if (recurringDepositsAccountProductTemplate) {
+          <mifosx-recurring-deposits-account-maturity-terms-step
+            [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
+            [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+            [linkedSavingsAccountId]="
+              recurringDepositsAccountDetailsStep?.selectedLinkedAccount?.accountType === 'SAVINGS'
+                ? recurringDepositsAccountDetailsStep?.selectedLinkedAccount?.id
+                : null
+            "
+          ></mifosx-recurring-deposits-account-maturity-terms-step>
+        }
+
+        <div class="cra-actions">
+          <button mat-stroked-button (click)="prev()">
+            <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.Previous' | translate }}
+          </button>
+          <span class="cra-actions__spacer"></span>
+          <button mat-raised-button color="primary" (click)="next()">
+            {{ 'labels.buttons.Next' | translate }}
+            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+          </button>
+        </div>
+      </div>
+    </mat-tab>
+
+    <!-- Tab 5: Preview -->
     <mat-tab [disabled]="!recurringDepositsAccountProductTemplate">
       <ng-template mat-tab-label>
         <fa-icon icon="eye" class="cra-tab__icon"></fa-icon>
@@ -132,6 +166,7 @@
             [rdDaysInYear]="rdDaysInYear"
             [rdAppliedRate]="rdAppliedRate"
             [rdIsSeniorCitizen]="rdIsSeniorCitizen"
+            [closureSettings]="recurringDepositsAccountMaturityTermsStep?.closureSettings ?? {}"
             [hideButtons]="true"
             (submitEvent)="submit()"
           >

src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts

@@ -24,6 +24,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { RecurringDepositsAccountCurrencyStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component';
 import { RecurringDepositsAccountInterestRateChartStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component';
 import { RecurringDepositsAccountPreviewStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component';
+import { RecurringDepositsAccountMaturityTermsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-maturity-terms-step/recurring-deposits-account-maturity-terms-step.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -40,6 +41,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     RecurringDepositsAccountDetailsStepComponent,
     RecurringDepositsAccountCurrencyStepComponent,
     RecurringDepositsAccountInterestRateChartStepComponent,
+    RecurringDepositsAccountMaturityTermsStepComponent,
     RecurringDepositsAccountPreviewStepComponent
   ]
 })
@@ -61,6 +63,12 @@ export class CreateRecurringDepositsAccountComponent {
   @ViewChild(RecurringDepositsAccountInterestRateChartStepComponent)
   recurringDepositsAccountChartStep: RecurringDepositsAccountInterestRateChartStepComponent;
 
+  @ViewChild(RecurringDepositsAccountPreviewStepComponent)
+  recurringDepositsAccountPreviewStep: RecurringDepositsAccountPreviewStepComponent;
+
+  @ViewChild(RecurringDepositsAccountMaturityTermsStepComponent)
+  recurringDepositsAccountMaturityTermsStep: RecurringDepositsAccountMaturityTermsStepComponent;
+
   /** Recurring Deposits Account Template */
   recurringDepositsAccountTemplate: any;
   /** Recurring Deposit Account Product Template */
@@ -68,7 +76,7 @@ export class CreateRecurringDepositsAccountComponent {
   /** Currently visible wizard tab (0-indexed). */
   selectedTabIndex = 0;
   /** Total wizard tabs — Product, Currency, Chart, Preview. */
-  private readonly totalTabs = 4;
+  private readonly totalTabs = 5;
   /** Active CBS base interest rate versions */
   cbsBaseRates: any[] = [];
   /** Selected tenure value and frequency from calculator */
@@ -258,6 +266,7 @@ export class CreateRecurringDepositsAccountComponent {
       ...details,
       ...terms,
       ...settings,
+      ...(this.recurringDepositsAccountMaturityTermsStep?.closureSettings ?? {}),
       ...productDefaults,
       clientId: this.recurringDepositsAccountTemplate.clientId,
       mandatoryRecommendedDepositAmount: pt?.minDepositAmount ?? 0,

src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html

@@ -35,6 +35,7 @@
         <mifosx-recurring-deposits-account-details-step
           [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
           (recurringDepositsAccountProductTemplate)="setTemplate($event)"
+          [externalLinkedAccountId]="recurringDepositsAccountMaturityTermsStep?.selectedTransferAccount?.id ?? null"
         >
         </mifosx-recurring-deposits-account-details-step>
 
@@ -115,7 +116,40 @@
       </div>
     </mat-tab>
 
-    <!-- Tab 4: Preview -->
+    <!-- Tab 4: Terms -->
+    <mat-tab [disabled]="!recurringDepositsAccountProductTemplate">
+      <ng-template mat-tab-label>
+        <fa-icon icon="file-alt" class="cra-tab__icon"></fa-icon>
+        Terms
+      </ng-template>
+      <div class="cra-tab-body">
+        @if (recurringDepositsAccountProductTemplate) {
+          <mifosx-recurring-deposits-account-maturity-terms-step
+            [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
+            [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+            [linkedSavingsAccountId]="
+              recurringDepositsAccountDetailsStep?.selectedLinkedAccount?.accountType === 'SAVINGS'
+                ? recurringDepositsAccountDetailsStep?.selectedLinkedAccount?.id
+                : null
+            "
+          ></mifosx-recurring-deposits-account-maturity-terms-step>
+        }
+
+        <div class="cra-actions">
+          <button mat-stroked-button (click)="prev()">
+            <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.Previous' | translate }}
+          </button>
+          <span class="cra-actions__spacer"></span>
+          <button mat-raised-button color="primary" (click)="next()">
+            {{ 'labels.buttons.Next' | translate }}
+            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+          </button>
+        </div>
+      </div>
+    </mat-tab>
+
+    <!-- Tab 5: Preview -->
     <mat-tab [disabled]="!recurringDepositsAccountProductTemplate">
       <ng-template mat-tab-label>
         <fa-icon icon="eye" class="cra-tab__icon"></fa-icon>
@@ -136,6 +170,7 @@
             [rdDaysInYear]="rdDaysInYear"
             [rdAppliedRate]="rdAppliedRate"
             [rdIsSeniorCitizen]="rdIsSeniorCitizen"
+            [closureSettings]="recurringDepositsAccountMaturityTermsStep?.closureSettings ?? {}"
             [hideButtons]="true"
             (submitEvent)="submit()"
           >

src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.ts

@@ -25,6 +25,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { RecurringDepositsAccountCurrencyStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component';
 import { RecurringDepositsAccountInterestRateChartStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component';
 import { RecurringDepositsAccountPreviewStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component';
+import { RecurringDepositsAccountMaturityTermsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-maturity-terms-step/recurring-deposits-account-maturity-terms-step.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -41,6 +42,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     RecurringDepositsAccountDetailsStepComponent,
     RecurringDepositsAccountCurrencyStepComponent,
     RecurringDepositsAccountInterestRateChartStepComponent,
+    RecurringDepositsAccountMaturityTermsStepComponent,
     RecurringDepositsAccountPreviewStepComponent
   ]
 })
@@ -63,13 +65,19 @@ export class EditRecurringDepositAccountComponent {
   @ViewChild(RecurringDepositsAccountInterestRateChartStepComponent)
   recurringDepositsAccountChartStep: RecurringDepositsAccountInterestRateChartStepComponent;
 
+  @ViewChild(RecurringDepositsAccountPreviewStepComponent)
+  recurringDepositsAccountPreviewStep: RecurringDepositsAccountPreviewStepComponent;
+
+  @ViewChild(RecurringDepositsAccountMaturityTermsStepComponent)
+  recurringDepositsAccountMaturityTermsStep: RecurringDepositsAccountMaturityTermsStepComponent;
+
   /** Full account data + template from resolver */
   recurringDepositsAccountAndTemplate: any;
   /** Product template emitted by details step */
   recurringDepositsAccountProductTemplate: any;
   /** Currently visible wizard tab (0-indexed). */
   selectedTabIndex = 0;
-  private readonly totalTabs = 4;
+  private readonly totalTabs = 5;
   /** Active CBS base interest rate versions */
   cbsBaseRates: any[] = [];
   /** Selected tenure value and frequency from calculator */
@@ -277,6 +285,7 @@ export class EditRecurringDepositAccountComponent {
       ...details,
       ...terms,
       ...settings,
+      ...(this.recurringDepositsAccountMaturityTermsStep?.closureSettings ?? {}),
       ...productDefaults,
       clientId: this.recurringDepositsAccountAndTemplate.clientId,
       mandatoryRecommendedDepositAmount: pt?.minDepositAmount ?? 0,

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.ts

@@ -7,7 +7,17 @@
  */
 
 /** Angular Imports */
-import { Component, OnInit, Input, Output, EventEmitter, inject, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  Input,
+  Output,
+  EventEmitter,
+  inject,
+  ChangeDetectorRef
+} from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, FormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
@@ -43,7 +53,7 @@ import { IntroducerSearchComponent } from 'app/shared/introducer-search/introduc
     IntroducerSearchComponent
   ]
 })
-export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
+export class RecurringDepositsAccountDetailsStepComponent implements OnInit, OnChanges {
   private formBuilder = inject(UntypedFormBuilder);
   private recurringDepositsService = inject(RecurringDepositsService);
   private settingsService = inject(SettingsService);
@@ -56,6 +66,10 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
   /** Recurring Deposits Account Template */
   @Input() recurringDepositsAccountTemplate: any;
 
+  /** Linked-account id picked elsewhere in the wizard (e.g. the Terms step's Transfer to Savings
+   * account) -- pre-fills this card so the officer doesn't have to pick the same account twice. */
+  @Input() externalLinkedAccountId: number | null = null;
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -198,6 +212,23 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
     this.dalSearch = '';
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!changes.externalLinkedAccountId || this.selectedLinkedAccount) {
+      return;
+    }
+    const id = this.externalLinkedAccountId;
+    if (!id) return;
+    const savings = this.dalAllSavings.find((a: any) => a.id === id);
+    const current = this.dalAllCurrent.find((a: any) => a.id === id);
+    if (savings) {
+      this.dalSelectedType = 'SAVINGS';
+      this.selectedLinkedAccount = savings;
+    } else if (current) {
+      this.dalSelectedType = 'CURRENT';
+      this.selectedLinkedAccount = current;
+    }
+  }
+
   private loadClientAccounts(): void {
     const clientId = String(this.recurringDepositsAccountTemplate?.clientId);
     if (!clientId) return;

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-maturity-terms-step/recurring-deposits-account-maturity-terms-step.component.html

@@ -0,0 +1,108 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<form [formGroup]="closureSettingsForm" class="layout-row-wrap gap-2px responsive-column">
+  <h4 class="mat-h4 flex-98">{{ 'labels.heading.For Pre-mature closure' | translate }}</h4>
+
+  <mat-form-field class="flex-48">
+    <mat-label>{{ 'labels.inputs.Maturity Instructions' | translate }}</mat-label>
+    <mat-select formControlName="maturityInstructionId">
+      @for (maturityInstruction of maturityInstructionOptions; track maturityInstruction) {
+        <mat-option [value]="maturityInstruction.id">
+          {{ maturityInstruction.value | translateKey: 'catalogs' }}
+        </mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  @if (closureSettingsForm.contains('transferToSavingsId')) {
+    <div class="dal-card flex-98">
+      <div class="dal-card__header">
+        <div class="dal-card__header-left">
+          <div class="dal-card__icon">
+            <mat-icon>savings</mat-icon>
+          </div>
+          <div>
+            <h3 class="dal-card__title">{{ 'labels.inputs.Transfer to savings account' | translate }}</h3>
+            <span class="dal-card__sub">Maturity proceeds will be credited to this account</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="dal-card__body">
+        @if (selectedTransferAccount) {
+          <div class="dal-selected">
+            <div class="dal-selected__info">
+              <span class="dal-type-badge dal-type-badge--savings">
+                <mat-icon>savings</mat-icon>
+                Savings
+              </span>
+              <div class="dal-selected__details">
+                <span class="dal-selected__accno">{{ selectedTransferAccount.accountNo }}</span>
+                <span class="dal-selected__product">{{ selectedTransferAccount.savingsProductName }}</span>
+              </div>
+              @if (selectedTransferAccount.summary?.accountBalance != null) {
+                <div class="dal-selected__balance">
+                  <span class="dal-selected__bal-label">Balance</span>
+                  <span class="dal-selected__bal-amount">
+                    {{ selectedTransferAccount.currency?.code }}
+                    {{ selectedTransferAccount.summary.accountBalance | number: '1.2-2' }}
+                  </span>
+                </div>
+              }
+            </div>
+            <button
+              mat-stroked-button
+              color="primary"
+              type="button"
+              class="dal-change-btn"
+              (click)="clearTransferAccount()"
+            >
+              <mat-icon>swap_horiz</mat-icon>
+              Change
+            </button>
+          </div>
+        } @else {
+          <mat-form-field appearance="outline" class="flex-98">
+            <mat-label>{{ 'labels.inputs.Transfer to savings account' | translate }}</mat-label>
+            <mat-select formControlName="transferToSavingsId" required>
+              @for (account of savingsAccountsData; track account) {
+                <mat-option [value]="account.id">
+                  ({{ account.accountNo }}) {{ account.savingsProductName }}
+                </mat-option>
+              }
+            </mat-select>
+            <mat-error>Transfer to savings account is required</mat-error>
+          </mat-form-field>
+        }
+      </div>
+    </div>
+  }
+
+  <mat-checkbox class="flex-98 margin-v" labelPosition="before" formControlName="preClosurePenalApplicable">
+    {{ 'labels.inputs.Apply Penal Interest (less)' | translate }}
+  </mat-checkbox>
+
+  @if (closureSettingsForm.value.preClosurePenalApplicable) {
+    <mat-form-field class="flex-48">
+      <mat-label>{{ 'labels.inputs.Penal Interest' | translate }} (%)</mat-label>
+      <input type="number" matInput formControlName="preClosurePenalInterest" min="0" step="0.01" />
+    </mat-form-field>
+
+    <mat-form-field class="flex-48">
+      <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
+      <mat-select formControlName="preClosurePenalInterestOnTypeId">
+        @for (preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData; track preClosurePenalInterestOnType) {
+          <mat-option [value]="preClosurePenalInterestOnType.id">
+            {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
+</form>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-maturity-terms-step/recurring-deposits-account-maturity-terms-step.component.scss

@@ -0,0 +1,152 @@
+/**
+ * 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/.
+ */
+
+// ── Transfer-to-Savings account card (mirrors the Deposit Account Link card) ──
+
+.dal-card {
+  margin-top: 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #fff;
+  overflow: hidden;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 16px 24px;
+    border-bottom: 1px solid #f1f5f9;
+    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  }
+
+  &__header-left {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+  }
+
+  &__icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    background: #0ea5e9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 700;
+    color: #0c4a6e;
+  }
+
+  &__sub {
+    display: block;
+    font-size: 12px;
+    color: #64748b;
+    margin-top: 2px;
+  }
+
+  &__body {
+    padding: 20px 24px;
+  }
+}
+
+.dal-selected {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  border: 2px solid #0ea5e9;
+  border-radius: 12px;
+  background: #f0f9ff;
+
+  &__info {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    flex: 1;
+    flex-wrap: wrap;
+  }
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+  }
+
+  &__accno {
+    font-size: 15px;
+    font-weight: 700;
+    color: #0c4a6e;
+    font-family: monospace;
+  }
+
+  &__product {
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  &__balance {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 2px;
+  }
+
+  &__bal-label {
+    font-size: 10px;
+    color: #94a3b8;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  &__bal-amount {
+    font-size: 15px;
+    font-weight: 700;
+    color: #0c4a6e;
+  }
+}
+
+.dal-change-btn {
+  white-space: nowrap;
+}
+
+.dal-type-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+  background: #f1f5f9;
+  color: #475569;
+  border: 1px solid #e2e8f0;
+
+  mat-icon {
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+  }
+
+  &--savings {
+    background: #eff6ff;
+    color: #1d4ed8;
+    border-color: #bfdbfe;
+
+    mat-icon {
+      color: #2563eb;
+    }
+  }
+}

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-maturity-terms-step/recurring-deposits-account-maturity-terms-step.component.ts

@@ -0,0 +1,116 @@
+/**
+ * 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, Input, OnChanges, SimpleChanges, inject } from '@angular/core';
+import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatIcon } from '@angular/material/icon';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+/**
+ * Recurring Deposit Account Maturity Terms Step -- what happens to this account at maturity
+ * (Withdraw / Transfer to Savings / Reinvest) and the pre-mature-closure penalty, decided
+ * per account rather than silently inherited from the product.
+ */
+@Component({
+  selector: 'mifosx-recurring-deposits-account-maturity-terms-step',
+  templateUrl: './recurring-deposits-account-maturity-terms-step.component.html',
+  styleUrls: ['./recurring-deposits-account-maturity-terms-step.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCheckbox,
+    MatIcon
+  ]
+})
+export class RecurringDepositsAccountMaturityTermsStepComponent implements OnChanges {
+  private formBuilder = inject(UntypedFormBuilder);
+
+  @Input() recurringDepositsAccountTemplate: any;
+  @Input() recurringDepositsAccountProductTemplate: any;
+  /** Account already linked elsewhere in the wizard (the Details step's Deposit Account Link) --
+   * pre-fills Transfer to Savings so the officer doesn't have to pick the same account twice. */
+  @Input() linkedSavingsAccountId: number | null = null;
+
+  closureSettingsForm: UntypedFormGroup;
+  maturityInstructionOptions: any[] = [];
+  savingsAccountsData: any[] = [];
+  preClosurePenalInterestOnTypeData: any[] = [];
+
+  constructor() {
+    this.closureSettingsForm = this.formBuilder.group({
+      maturityInstructionId: [''],
+      preClosurePenalApplicable: [false],
+      preClosurePenalInterest: [
+        '',
+        Validators.min(0)
+      ],
+      preClosurePenalInterestOnTypeId: ['']
+    });
+    this.closureSettingsForm.get('maturityInstructionId').valueChanges.subscribe((value: number) => {
+      // 200 = Transfer to Savings -- Withdraw Deposit (100) needs no target account, and both
+      // Reinvest options (300/400) open a brand-new RD instead, so they ignore this field too.
+      if (value === 200) {
+        this.closureSettingsForm.addControl(
+          'transferToSavingsId',
+          new UntypedFormControl(this.linkedSavingsAccountId ?? '', Validators.required)
+        );
+      } else {
+        this.closureSettingsForm.removeControl('transferToSavingsId');
+      }
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.linkedSavingsAccountId) {
+      const control = this.closureSettingsForm.get('transferToSavingsId');
+      if (control && !control.value && this.linkedSavingsAccountId) {
+        control.setValue(this.linkedSavingsAccountId);
+      }
+    }
+    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
+    if (template) {
+      // Withdraw Deposit (id 100) books the maturity proceeds out of the bank's cash/vault the moment
+      // the account matures, before the customer has actually collected it -- disabled everywhere.
+      this.maturityInstructionOptions = (template.maturityInstructionOptions ?? []).filter(
+        (option: any) => option.id !== 100
+      );
+      this.savingsAccountsData = template.savingsAccounts ?? [];
+      this.preClosurePenalInterestOnTypeData = template.preClosurePenalInterestOnTypeOptions ?? [];
+      if (!this.closureSettingsForm.get('preClosurePenalApplicable').dirty) {
+        this.closureSettingsForm.patchValue({
+          preClosurePenalApplicable: template.preClosurePenalApplicable ?? false,
+          preClosurePenalInterest: template.preClosurePenalInterest ?? '',
+          preClosurePenalInterestOnTypeId: template.preClosurePenalInterestOnType?.id ?? ''
+        });
+      }
+    }
+  }
+
+  /** The linked-savings account for the transfer-to-savings maturity instruction, once picked. */
+  get selectedTransferAccount(): any {
+    const id = this.closureSettingsForm.value.transferToSavingsId;
+    if (!id) return null;
+    return this.savingsAccountsData.find((account: any) => account.id === id) ?? null;
+  }
+
+  clearTransferAccount(): void {
+    this.closureSettingsForm.get('transferToSavingsId')?.setValue('');
+  }
+
+  /** Chosen maturity/closure settings, ready to merge into the submit payload. */
+  get closureSettings() {
+    const settings = this.closureSettingsForm.getRawValue();
+    for (const key in settings) {
+      if (settings[key] === '') {
+        delete settings[key];
+      }
+    }
+    return settings;
+  }
+}

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html

@@ -853,6 +853,41 @@
   }
 </div>
 
+<div class="preview-section">
+  <div class="preview-section__header">
+    <i class="fas fa-flag-checkered preview-section__icon"></i>
+    <span class="preview-section__title">Maturity &amp; Pre-mature Closure</span>
+  </div>
+  <div class="preview-body">
+    <div class="preview-grid preview-grid--three">
+      <div class="preview-field">
+        <span class="preview-label">{{ 'labels.inputs.Maturity Instructions' | translate }}</span>
+        <span class="preview-value">{{ closureMaturityInstructionLabel }}</span>
+      </div>
+      @if (closureSettings?.transferToSavingsId) {
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Transfer to savings account' | translate }}</span>
+          <span class="preview-value">{{ closureTransferToSavingsLabel }}</span>
+        </div>
+      }
+      <div class="preview-field">
+        <span class="preview-label">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}</span>
+        <span class="preview-value">{{ closureSettings?.preClosurePenalApplicable | yesNo }}</span>
+      </div>
+      @if (closureSettings?.preClosurePenalApplicable) {
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Penal Interest' | translate }} (%)</span>
+          <span class="preview-value">{{ closureSettings?.preClosurePenalInterest }}%</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Period' | translate }}</span>
+          <span class="preview-value">{{ closurePenalInterestOnTypeLabel }}</span>
+        </div>
+      }
+    </div>
+  </div>
+</div>
+
 @if (!hideButtons) {
   <div class="layout-row responsive-column align-center gap-2px margin-t">
     <button mat-raised-button matStepperPrevious>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts

@@ -201,7 +201,29 @@ export class RecurringDepositsAccountPreviewStepComponent implements OnChanges {
   /** Expand Chart Slab Index used in the view */
   expandChartSlabIndex: number;
 
-  constructor() {}
+  /** Maturity/pre-mature-closure choices made in the Terms step -- shown here read-only. */
+  @Input() closureSettings: any = {};
+
+  get closureMaturityInstructionLabel(): string {
+    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
+    const options = template?.maturityInstructionOptions ?? [];
+    const match = options.find((o: any) => o.id === this.closureSettings?.maturityInstructionId);
+    return match?.value ?? '—';
+  }
+
+  get closureTransferToSavingsLabel(): string {
+    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
+    const accounts = template?.savingsAccounts ?? [];
+    const match = accounts.find((a: any) => a.id === this.closureSettings?.transferToSavingsId);
+    return match ? `(${match.accountNo}) ${match.savingsProductName}` : '—';
+  }
+
+  get closurePenalInterestOnTypeLabel(): string {
+    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
+    const options = template?.preClosurePenalInterestOnTypeOptions ?? [];
+    const match = options.find((o: any) => o.id === this.closureSettings?.preClosurePenalInterestOnTypeId);
+    return match?.value ?? '—';
+  }
 
   ngOnChanges() {
     const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts

@@ -17,6 +17,7 @@ import {
 } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 import { Currency } from 'app/shared/models/general.model';
+import { OptionData } from 'app/shared/models/option-data.model';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { InputAmountComponent } from '../../../../shared/input-amount/input-amount.component';
 import { MatDivider } from '@angular/material/divider';
@@ -61,6 +62,10 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
   periodFrequencyTypeData: any[] = [];
   /** Preclosure Penal Interest Type on Data */
   preClosurePenalInterestOnTypeData: any[] = [];
+  /** Options for what happens to the account at maturity */
+  maturityInstructionOptions: OptionData[];
+  /** Savings accounts eligible as a maturity-proceeds transfer target */
+  savingsAccountsData: any;
   /** Tax Group */
   taxGroup: any;
   currency: Currency | null = null;
@@ -91,6 +96,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
           : '',
         maturityInstructions: recurringDepositsAccount.maturityInstructions ?? false,
         creditMaturityProceeds: recurringDepositsAccount.creditMaturityProceeds ?? false,
+        maturityInstructionId: recurringDepositsAccount.maturityInstructionId ?? '',
         penaltyGracePeriodMissedInstallments: recurringDepositsAccount.penaltyGracePeriodMissedInstallments ?? false,
         panelRequestApplicable: recurringDepositsAccount.panelRequestApplicable ?? false,
         noPenaltyNomineeHeirClosure: recurringDepositsAccount.noPenaltyNomineeHeirClosure ?? false,
@@ -182,6 +188,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
       lockinPeriodFrequencyType: [''],
       maturityInstructions: [false],
       creditMaturityProceeds: [false],
+      maturityInstructionId: [''],
       penaltyGracePeriodMissedInstallments: [false],
       panelRequestApplicable: [false],
       noPenaltyNomineeHeirClosure: [false],
@@ -217,6 +224,8 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
     this.lockinPeriodFrequencyTypeData = recurringDepositsAccount.lockinPeriodFrequencyTypeOptions;
     this.periodFrequencyTypeData = recurringDepositsAccount.periodFrequencyTypeOptions;
     this.preClosurePenalInterestOnTypeData = recurringDepositsAccount.preClosurePenalInterestOnTypeOptions;
+    this.maturityInstructionOptions = recurringDepositsAccount.maturityInstructionOptions;
+    this.savingsAccountsData = recurringDepositsAccount.savingsAccounts;
   }
 
   buildDependencies() {
@@ -233,6 +242,16 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
           this.recurringDepositAccountSettingsForm.addControl('recurringFrequencyType', new UntypedFormControl(''));
         }
       });
+    this.recurringDepositAccountSettingsForm.get('maturityInstructionId').valueChanges.subscribe((value: number) => {
+      if (value > 100) {
+        this.recurringDepositAccountSettingsForm.addControl(
+          'transferToSavingsId',
+          new UntypedFormControl('', Validators.required)
+        );
+      } else {
+        this.recurringDepositAccountSettingsForm.removeControl('transferToSavingsId');
+      }
+    });
   }
 
   get recurringDepositAccountSettings() {

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html

@@ -87,6 +87,19 @@
 
     <!-- Action menu (kebab) -->
     <div class="rd-hero__actions">
+      @if (
+        !recurringDepositsAccountData.status.rejected &&
+        !recurringDepositsAccountData.status.submittedAndPendingApproval
+      ) {
+        <button
+          mat-icon-button
+          matTooltip="Print Certificate"
+          (click)="printCertificate()"
+          aria-label="Print certificate"
+        >
+          <fa-icon icon="print"></fa-icon>
+        </button>
+      }
       <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Account actions" yPosition="below">
         <fa-icon icon="ellipsis-v"></fa-icon>
       </button>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts

@@ -22,6 +22,7 @@ import { RecurringDepositsButtonsConfiguration } from './recurring-deposits-butt
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
 import { RecurringDepositConfirmationDialogComponent } from './custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
+import { DepositCertificateDialogComponent } from 'app/shared/deposit-certificate-dialog/deposit-certificate-dialog.component';
 import { Currency } from 'app/shared/models/general.model';
 import { TranslateService } from '@ngx-translate/core';
 import { AccountsService } from 'app/accounts/accounts.service';
@@ -426,6 +427,20 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
     });
   }
 
+  /**
+   * Opens a printable deposit certificate for this account.
+   */
+  printCertificate() {
+    this.dialog.open(DepositCertificateDialogComponent, {
+      width: '900px',
+      data: {
+        accountType: 'RD',
+        accountData: this.recurringDepositsAccountData,
+        clientId: this.recurringDepositsAccountData.clientId
+      }
+    });
+  }
+
   /**
    * Disables withhold tax for recurring deposits account
    * Recurring deposits endpoint is not supported so using Savings endpoint.

src/app/keyboards-shortcut-config.ts

@@ -31,8 +31,7 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'n',
-        route: 'navigation',
-        id: 'navigation_page'
+        route: 'navigation'
       },
       // Run Report - ctrl + t
       {
@@ -51,9 +50,17 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'i',
-        route: 'checker-inbox-and-tasks/checker-inbox',
-        id: 'checker_inbox'
+        route: 'checker-inbox-and-tasks/checker-inbox'
       },
+      // Collection Sheet- ctrl + alt + o
+      // {
+      // title: 'Collection Sheet',
+      // ctrlKey: true,
+      // shiftKey: false,
+      // altKey: true,
+      // key: 'o',
+      // route: ''
+      // },
       // Create Client - ctrl + c
       {
         title: 'Create Client',
@@ -61,8 +68,7 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: true,
         key: 'c',
-        route: 'clients/create',
-        id: 'create_client'
+        route: 'clients/create'
       },
       // Create Group - ctrl + g
       {
@@ -71,8 +77,7 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'g',
-        route: 'groups/create',
-        id: 'create_group'
+        route: 'groups/create'
       },
       // Create Center - ctrl + q
       {
@@ -81,8 +86,7 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'q',
-        route: 'centers/create',
-        id: 'create_center'
+        route: 'centers/create'
       },
       // Frequent Posting - ctrl + f
       {
@@ -91,8 +95,7 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'f',
-        route: 'accounting/journal-entries/frequent-postings',
-        id: 'frequent_posting'
+        route: 'accounting/journal-entries/frequent-postings'
       },
       // Closure Entries - ctrl + e
       {
@@ -101,8 +104,7 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'e',
-        route: 'accounting/closing-entries',
-        id: 'closure_entries'
+        route: 'accounting/closing-entries'
       },
       // Journal Entry - ctrl + j
       {
@@ -111,8 +113,7 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'j',
-        route: 'accounting/journal-entries/create',
-        id: 'journal_entry'
+        route: 'accounting/journal-entries/create'
       },
       // Reports - ctrl + r
       {
@@ -121,8 +122,7 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: false,
         key: 'r',
-        route: 'reports',
-        id: 'reports_page'
+        route: 'reports'
       },
       // Accounting - ctrl + a
       {
@@ -131,8 +131,7 @@ export class KeyboardShortcutsConfiguration {
         shiftKey: false,
         altKey: true,
         key: 'a',
-        route: 'accounting',
-        id: 'accounting_page'
+        route: 'accounting'
       },
       // Save/Submit Forms - ctrl + s
       {

src/app/pipes/date-format.pipe.ts

@@ -59,10 +59,6 @@ export class DateFormatPipe implements PipeTransform, OnDestroy {
     if (Array.isArray(value)) {
       // Backend sometimes returns [yyyy, MM, dd]
       dateVal = moment(value.join('-'), 'YYYY-MM-DD');
-    } else if (typeof value === 'number' && value < 1e12) {
-      // Unix timestamp in seconds (e.g. /makercheckers madeOnDate).
-      // moment(seconds) would treat it as milliseconds → 1970; use moment.unix() instead.
-      dateVal = moment.unix(value);
     } else {
       dateVal = moment(value);
     }

src/app/products/charges/create-charge/create-charge.component.ts

@@ -20,7 +20,6 @@ import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 /** Custom Services */
 import { ProductsService } from '../../products.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { Dates } from 'app/core/utils/dates';
 import { minNumberValueValidator } from 'app/shared/validators/min-number-value.validator';
 import { maxNumberValueValidator } from 'app/shared/validators/max-number-value.validator';
@@ -46,7 +45,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateChargeComponent implements OnInit {
   private formBuilder = inject(UntypedFormBuilder);
   private productsService = inject(ProductsService);
-  private alertService = inject(AlertService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dateUtils = inject(Dates);
@@ -354,16 +352,8 @@ export class CreateChargeComponent implements OnInit {
     if (!data.maxCap) {
       delete data.maxCap;
     }
-    this.productsService.createCharge(data).subscribe({
-      next: (response: any) => {
-        if (response?.rollbackTransaction) {
-          this.alertService.alert({
-            type: 'Success',
-            message: 'Charge submitted successfully for approval.'
-          });
-        }
-        this.router.navigate(['../'], { relativeTo: this.route });
-      }
+    this.productsService.createCharge(data).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
     });
   }
 }

src/app/products/charges/edit-charge/edit-charge.component.ts

@@ -14,7 +14,6 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { maxNumberValueValidator } from 'app/shared/validators/max-number-value.validator';
 import { minNumberValueValidator } from 'app/shared/validators/min-number-value.validator';
 import { ValidateOnFocusDirective } from '../../../directives/validate-on-focus.directive';
@@ -38,7 +37,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 })
 export class EditChargeComponent implements OnInit {
   private productsService = inject(ProductsService);
-  private alertService = inject(AlertService);
   private formBuilder = inject(UntypedFormBuilder);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
@@ -224,16 +222,8 @@ export class EditChargeComponent implements OnInit {
     if (!charges.maxCap) {
       delete charges.maxCap;
     }
-    this.productsService.updateCharge(this.chargeData.id.toString(), charges).subscribe({
-      next: (response: any) => {
-        if (response?.rollbackTransaction) {
-          this.alertService.alert({
-            type: 'Success',
-            message: 'Charge update submitted successfully for approval.'
-          });
-        }
-        this.router.navigate(['../'], { relativeTo: this.route });
-      }
+    this.productsService.updateCharge(this.chargeData.id.toString(), charges).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
     });
   }
 }

src/app/products/current-products/create-current-product/create-current-product.component.ts

@@ -18,7 +18,6 @@ import { CurrentProductAccountingStepComponent } from '../current-product-steppe
 import { CurrentProductPreviewStepComponent } from '../current-product-stepper/current-product-preview-step/current-product-preview-step.component';
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { Accounting } from 'app/core/utils/accounting';
 import { MatTabsModule } from '@angular/material/tabs';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -43,7 +42,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateCurrentProductComponent {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
-  private alertService = inject(AlertService);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
   private accounting = inject(Accounting);
@@ -146,24 +144,14 @@ export class CreateCurrentProductComponent {
   submit() {
     const currentProduct = this.prepareCurrentProductPayload();
     console.log('Current product submit payload:', currentProduct);
-    this.productsService.createCurrentProduct(currentProduct).subscribe({
-      next: (response: any) => {
-        if (response?.rollbackTransaction) {
-          this.alertService.alert({
-            type: 'Success',
-            message: 'Current product creation request submitted successfully for approval.'
-          });
-          this.router.navigate(['../'], { relativeTo: this.route });
-        } else {
-          this.router.navigate(
-            [
-              '../',
-              response.resourceId
-            ],
-            { relativeTo: this.route }
-          );
-        }
-      }
+    this.productsService.createCurrentProduct(currentProduct).subscribe((response: any) => {
+      this.router.navigate(
+        [
+          '../',
+          response.resourceId
+        ],
+        { relativeTo: this.route }
+      );
     });
   }
 }

src/app/products/fixed-deposit-products/base-fd-interest-rate-chart/base-fd-interest-rate-chart.component.html

@@ -35,7 +35,7 @@
               <p class="empty-text">No slabs defined. Click "Add Slab" to begin.</p>
             } @else {
               <form [formGroup]="forms[fdType]">
-                <table mat-table [dataSource]="slabsDataSources[fdType]" class="slabs-table">
+                <table mat-table [dataSource]="slabs(fdType).controls" class="slabs-table">
                   <ng-container matColumnDef="srNo">
                     <th mat-header-cell *matHeaderCellDef>#</th>
                     <td mat-cell *matCellDef="let row">{{ row.get('srNo').value }}</td>
@@ -139,25 +139,12 @@
               </mat-form-field>
             </form>
 
-            @if (getSlabValidationErrors(fdType).length > 0) {
-              <div class="validation-errors-box">
-                <mat-icon color="warn">error_outline</mat-icon>
-                <div class="error-list">
-                  @for (err of getSlabValidationErrors(fdType); track err) {
-                    <p class="error-item">{{ err }}</p>
-                  }
-                </div>
-              </div>
-            }
-
             <div class="actions-row">
               <button
                 type="button"
                 mat-raised-button
                 color="primary"
-                [disabled]="
-                  forms[fdType].invalid || slabs(fdType).length === 0 || getSlabValidationErrors(fdType).length > 0
-                "
+                [disabled]="forms[fdType].invalid || slabs(fdType).length === 0"
                 (click)="openPreview(fdType)"
               >
                 Preview & Save

src/app/products/fixed-deposit-products/base-fd-interest-rate-chart/base-fd-interest-rate-chart.component.scss

@@ -78,30 +78,6 @@
   min-width: 200px;
 }
 
-/* ── Validation Errors ── */
-.validation-errors-box {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  border-radius: 6px;
-  color: #b91c1c;
-  font-size: 0.875rem;
-  margin-bottom: 0.5rem;
-
-  .error-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  .error-item {
-    margin: 0;
-  }
-}
-
 /* ── Actions ── */
 .actions-row {
   display: flex;

src/app/products/fixed-deposit-products/base-fd-interest-rate-chart/base-fd-interest-rate-chart.component.ts

@@ -7,14 +7,13 @@
  */
 
 import { Component, OnInit, inject } from '@angular/core';
-import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DecimalPipe } from '@angular/common';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatIconButton } from '@angular/material/button';
 import { MatExpansionModule } from '@angular/material/expansion';
 import {
   MatTable,
-  MatTableDataSource,
   MatColumnDef,
   MatHeaderCellDef,
   MatHeaderCell,
@@ -27,7 +26,6 @@ import {
 } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
 import { ProductsService } from 'app/products/products.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 @Component({
@@ -56,7 +54,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class BaseFdInterestRateChartComponent implements OnInit {
   private fb = inject(FormBuilder);
   private productsService = inject(ProductsService);
-  private alertService = inject(AlertService);
 
   readonly fdTypes = [
     'SINGLE',
@@ -90,7 +87,6 @@ export class BaseFdInterestRateChartComponent implements OnInit {
   ];
 
   forms: Record<string, FormGroup> = {};
-  slabsDataSources: Record<string, MatTableDataSource<AbstractControl>> = {};
   activeRates: Record<string, any> = {};
   historyRates: any[] = [];
 
@@ -102,7 +98,6 @@ export class BaseFdInterestRateChartComponent implements OnInit {
   ngOnInit(): void {
     this.fdTypes.forEach((type) => {
       this.forms[type] = this.buildForm();
-      this.slabsDataSources[type] = new MatTableDataSource<AbstractControl>([]);
       this.isSaving[type] = false;
       this.saveMessage[type] = '';
       this.showPreview[type] = false;
@@ -116,140 +111,15 @@ export class BaseFdInterestRateChartComponent implements OnInit {
 
   addSlab(fdType: string): void {
     const arr = this.slabs(fdType);
-    let nextFrom = 1;
-    let periodType = this.getDefaultPeriodType(fdType);
-
-    if (arr.length > 0) {
-      const lastSlab = arr.at(arr.length - 1).value;
-      periodType = lastSlab.periodTypeEnum ?? periodType;
-      if (lastSlab.toPeriod != null && lastSlab.toPeriod >= 0) {
-        nextFrom = Number(lastSlab.toPeriod) + 1;
-      } else if (lastSlab.fromPeriod != null && lastSlab.fromPeriod >= 0) {
-        nextFrom = Number(lastSlab.fromPeriod) + 1;
-      }
-    }
-
-    const desc = this.generateSlabDescription(nextFrom, null, periodType);
-    arr.push(
-      this.buildSlabRow({
-        srNo: arr.length + 1,
-        description: desc,
-        periodTypeEnum: periodType,
-        fromPeriod: nextFrom,
-        toPeriod: null,
-        annualInterestRate: 0,
-        seniorCitizenRate: 0
-      })
-    );
-    this.slabsDataSources[fdType].data = [...arr.controls];
+    arr.push(this.buildSlabRow({ srNo: arr.length + 1 }));
   }
 
   removeSlab(fdType: string, index: number): void {
     this.slabs(fdType).removeAt(index);
     this.slabs(fdType).controls.forEach((c, i) => c.patchValue({ srNo: i + 1 }));
-    this.slabsDataSources[fdType].data = [...this.slabs(fdType).controls];
-  }
-
-  getDefaultPeriodType(fdType: string): number {
-    switch (fdType) {
-      case 'SINGLE':
-        return 0; // Days
-      case 'DOUBLE':
-        return 3; // Years
-      case 'SPECIAL':
-        return 2; // Months
-      default:
-        return 0;
-    }
-  }
-
-  generateSlabDescription(from: number, to: number | null, periodTypeEnum: number): string {
-    const unit = this.getPeriodLabel(periodTypeEnum);
-    if (to == null) {
-      return `${from}+ ${unit}`;
-    }
-    return `${from} to ${to} ${unit}`;
-  }
-
-  getSlabValidationErrors(fdType: string): string[] {
-    const errors: string[] = [];
-    const arr = this.slabs(fdType);
-    if (!arr || arr.length === 0) {
-      return errors;
-    }
-
-    const slabs = arr.controls.map((c) => c.value);
-    const expectedPeriodType = slabs[0].periodTypeEnum;
-    let expectedFrom = 1;
-
-    for (let i = 0; i < slabs.length; i++) {
-      const s = slabs[i];
-      const slabNum = i + 1;
-
-      if (s.periodTypeEnum !== expectedPeriodType) {
-        errors.push(`Slab #${slabNum}: Period type must be consistent across all slabs.`);
-      }
-
-      if (s.fromPeriod == null || s.fromPeriod < 0) {
-        errors.push(`Slab #${slabNum}: 'From' period must be a non-negative number.`);
-      } else if (s.fromPeriod !== expectedFrom) {
-        if (i === 0) {
-          errors.push(`Slab #${slabNum}: First slab must start from 1 (found: ${s.fromPeriod}).`);
-        } else if (s.fromPeriod < expectedFrom) {
-          errors.push(
-            `Slab #${slabNum}: Range overlaps with previous slab (expected start: ${expectedFrom}, found: ${s.fromPeriod}).`
-          );
-        } else {
-          errors.push(
-            `Slab #${slabNum}: Gap detected in range (expected start: ${expectedFrom}, found: ${s.fromPeriod}).`
-          );
-        }
-      }
-
-      if (i < slabs.length - 1) {
-        // Non-final slab
-        if (s.toPeriod == null) {
-          errors.push(`Slab #${slabNum}: 'To' period is required for non-final slabs.`);
-        } else {
-          if (s.toPeriod < 0) {
-            errors.push(`Slab #${slabNum}: 'To' period must be non-negative.`);
-          }
-          if (s.fromPeriod != null && s.toPeriod < s.fromPeriod) {
-            errors.push(
-              `Slab #${slabNum}: 'From' period (${s.fromPeriod}) cannot be greater than 'To' period (${s.toPeriod}).`
-            );
-          }
-          expectedFrom = Number(s.toPeriod) + 1;
-        }
-      } else {
-        // Final slab
-        if (s.toPeriod != null) {
-          if (s.toPeriod < 0) {
-            errors.push(`Slab #${slabNum}: 'To' period must be non-negative.`);
-          }
-          if (s.fromPeriod != null && s.toPeriod < s.fromPeriod) {
-            errors.push(
-              `Slab #${slabNum}: 'From' period (${s.fromPeriod}) cannot be greater than 'To' period (${s.toPeriod}).`
-            );
-          }
-        }
-      }
-
-      if (s.annualInterestRate == null || s.annualInterestRate < 0) {
-        errors.push(`Slab #${slabNum}: Annual Interest Rate cannot be negative.`);
-      }
-      if (s.seniorCitizenRate != null && s.seniorCitizenRate < 0) {
-        errors.push(`Slab #${slabNum}: Senior Citizen Rate cannot be negative.`);
-      }
-    }
-
-    return errors;
   }
 
   openPreview(fdType: string): void {
-    if (this.getSlabValidationErrors(fdType).length > 0) {
-      return;
-    }
     this.showPreview[fdType] = true;
     this.saveMessage[fdType] = '';
   }
@@ -259,24 +129,13 @@ export class BaseFdInterestRateChartComponent implements OnInit {
   }
 
   confirmSave(fdType: string): void {
-    if (this.isSaving[fdType]) {
-      return;
-    }
     this.isSaving[fdType] = true;
     const { versionLabel, remarks, slabs } = this.forms[fdType].value;
     this.productsService.saveFdBaseInterestRates({ fdType, versionLabel, remarks, slabs }).subscribe({
-      next: (response: any) => {
-        this.isSaving[fdType] = false;
+      next: () => {
+        this.saveMessage[fdType] = 'New version activated. Previous version deactivated.';
         this.showPreview[fdType] = false;
-        if (response?.rollbackTransaction) {
-          this.alertService.alert({
-            type: 'Success',
-            message: 'Base interest rate configuration submitted successfully for approval.'
-          });
-          this.saveMessage[fdType] = 'Base interest rate configuration submitted successfully for approval.';
-        } else {
-          this.saveMessage[fdType] = 'New version activated. Previous version deactivated.';
-        }
+        this.isSaving[fdType] = false;
         this.loadAll();
       },
       error: () => {
@@ -312,7 +171,6 @@ export class BaseFdInterestRateChartComponent implements OnInit {
           const arr = this.slabs(type);
           arr.clear();
           (active?.slabs ?? []).forEach((s: any) => arr.push(this.buildSlabRow(s)));
-          this.slabsDataSources[type].data = [...arr.controls];
           this.forms[type].patchValue({ versionLabel: '', remarks: '' });
         },
         error: () => {

src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.ts

@@ -33,7 +33,6 @@ import {
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { Dates } from 'app/core/utils/dates';
 import { Accounting } from 'app/core/utils/accounting';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
@@ -71,7 +70,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateFixedDepositProductComponent {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
-  private alertService = inject(AlertService);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
   private dateUtils = inject(Dates);
@@ -267,24 +265,14 @@ export class CreateFixedDepositProductComponent {
       locale: this.settingsService.language.code
     });
     delete fixedDepositProduct.advancedAccountingRules;
-    this.productsService.createFixedDepositProduct(fixedDepositProduct).subscribe({
-      next: (response: any) => {
-        if (response?.rollbackTransaction) {
-          this.alertService.alert({
-            type: 'Success',
-            message: 'Fixed deposit product creation request submitted successfully for approval.'
-          });
-          this.router.navigate(['../'], { relativeTo: this.route });
-        } else {
-          this.router.navigate(
-            [
-              '../',
-              response.resourceId
-            ],
-            { relativeTo: this.route }
-          );
-        }
-      }
+    this.productsService.createFixedDepositProduct(fixedDepositProduct).subscribe((response: any) => {
+      this.router.navigate(
+        [
+          '../',
+          response.resourceId
+        ],
+        { relativeTo: this.route }
+      );
     });
   }
 }

src/app/products/fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component.ts

@@ -21,7 +21,6 @@ import { FixedDepositProductAccountingStepComponent } from '../fixed-deposit-pro
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { MatTabsModule } from '@angular/material/tabs';
 import {
   MatTable,
@@ -71,7 +70,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class EditFixedDepositProductComponent {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
-  private alertService = inject(AlertService);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
   private accounting = inject(Accounting);
@@ -282,14 +280,8 @@ export class EditFixedDepositProductComponent {
     delete fixedDepositProduct.advancedAccountingRules;
     this.productsService
       .updateFixedDepositProduct(this.fixedDepositProductsTemplate.id, fixedDepositProduct)
-      .subscribe({
-        next: () => {
-          this.alertService.alert({
-            type: 'Success',
-            message: 'Fixed deposit product update submitted successfully for Checker approval.'
-          });
-          this.router.navigate(['../'], { relativeTo: this.route });
-        }
+      .subscribe((response: any) => {
+        this.router.navigate(['../'], { relativeTo: this.route });
       });
   }
 

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html

@@ -21,6 +21,33 @@
         <mat-checkbox formControlName="lienMarked">Lien Marked</mat-checkbox>
         <mat-checkbox formControlName="withdrawalFeeForTransfers">Apply Withdrawal Fee for Transfers</mat-checkbox>
       </div>
+
+      <mat-checkbox class="fdps-preclosure-toggle" formControlName="preClosurePenalApplicable">
+        {{ 'labels.inputs.Apply Penal Interest (less)' | translate }}
+      </mat-checkbox>
+
+      @if (fixedDepositProductSettingsForm.value.preClosurePenalApplicable) {
+        <div class="fdps-lockin-fields">
+          <mat-form-field appearance="outline" class="fdps-field">
+            <mat-label>{{ 'labels.inputs.Penal Interest' | translate }} (%)</mat-label>
+            <input type="number" matInput formControlName="preClosurePenalInterest" min="0" step="0.01" />
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="fdps-field">
+            <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
+            <mat-select formControlName="preClosurePenalInterestOnTypeId">
+              @for (
+                preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData;
+                track preClosurePenalInterestOnType
+              ) {
+                <mat-option [value]="preClosurePenalInterestOnType.id">
+                  {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+      }
     </div>
   </div>
 

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.scss

@@ -130,6 +130,15 @@ $gray-900: #202124;
   }
 }
 
+.fdps-preclosure-toggle {
+  display: block;
+  margin: 4px 0 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid $gray-200;
+  font-size: 14px;
+  color: $gray-900;
+}
+
 .fdps-layout {
   display: grid;
   gap: 16px;

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.ts

@@ -30,6 +30,7 @@ export class FixedDepositProductSettingsStepComponent implements OnInit {
   fixedDepositProductSettingsForm: UntypedFormGroup;
 
   lockinPeriodFrequencyTypeData: any;
+  preClosurePenalInterestOnTypeData: any;
 
   constructor() {
     this.createFixedDepositProductSettingsForm();
@@ -37,6 +38,7 @@ export class FixedDepositProductSettingsStepComponent implements OnInit {
 
   ngOnInit() {
     this.lockinPeriodFrequencyTypeData = this.fixedDepositProductsTemplate.lockinPeriodFrequencyTypeOptions;
+    this.preClosurePenalInterestOnTypeData = this.fixedDepositProductsTemplate.preClosurePenalInterestOnTypeOptions;
 
     if (this.fixedDepositProductsTemplate?.id) {
       this.fixedDepositProductSettingsForm.patchValue({
@@ -48,6 +50,9 @@ export class FixedDepositProductSettingsStepComponent implements OnInit {
         enableLockinPeriod: this.fixedDepositProductsTemplate.enableLockinPeriod ?? false,
         lockinPeriodFrequency: this.fixedDepositProductsTemplate.lockinPeriodFrequency ?? '',
         lockinPeriodFrequencyType: this.fixedDepositProductsTemplate.lockinPeriodFrequencyType?.id ?? '',
+        preClosurePenalApplicable: this.fixedDepositProductsTemplate.preClosurePenalApplicable ?? false,
+        preClosurePenalInterest: this.fixedDepositProductsTemplate.preClosurePenalInterest ?? '',
+        preClosurePenalInterestOnTypeId: this.fixedDepositProductsTemplate.preClosurePenalInterestOnType?.id ?? '',
         maturityInstructions: this.fixedDepositProductsTemplate.maturityInstructions ?? false,
         creditMaturityProceeds: this.fixedDepositProductsTemplate.creditMaturityProceeds ?? false,
         penaltyGracePeriodMissedInstallments:
@@ -76,6 +81,12 @@ export class FixedDepositProductSettingsStepComponent implements OnInit {
         Validators.min(0)
       ],
       lockinPeriodFrequencyType: [''],
+      preClosurePenalApplicable: [false],
+      preClosurePenalInterest: [
+        '',
+        Validators.min(0)
+      ],
+      preClosurePenalInterestOnTypeId: [''],
       maturityInstructions: [false],
       creditMaturityProceeds: [false],
       penaltyGracePeriodMissedInstallments: [false],

src/app/products/loan-products/create-loan-product/create-loan-product.component.ts

@@ -21,7 +21,6 @@ import { LoanProductInterestRefundStepComponent } from '../loan-product-stepper/
 
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { LoanProducts } from '../loan-products';
 import {
   AdvancedPaymentAllocation,
@@ -64,7 +63,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateLoanProductComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
-  private alertService = inject(AlertService);
   private loanProducts = inject(LoanProducts);
   private router = inject(Router);
   private accounting = inject(Accounting);
@@ -315,24 +313,14 @@ export class CreateLoanProductComponent implements OnInit {
       delete loanProduct['daysInYearCustomStrategy'];
     }
 
-    this.productsService.createLoanProduct(loanProduct).subscribe({
-      next: (response: any) => {
-        if (response?.rollbackTransaction) {
-          this.alertService.alert({
-            type: 'Success',
-            message: 'Loan product creation request submitted successfully for approval.'
-          });
-          this.router.navigate(['../'], { relativeTo: this.route });
-        } else {
-          this.router.navigate(
-            [
-              '../',
-              response.resourceId
-            ],
-            { relativeTo: this.route }
-          );
-        }
-      }
+    this.productsService.createLoanProduct(loanProduct).subscribe((response: any) => {
+      this.router.navigate(
+        [
+          '../',
+          response.resourceId
+        ],
+        { relativeTo: this.route }
+      );
     });
   }
 

src/app/products/products.service.ts

@@ -76,7 +76,7 @@ export class ProductsService {
 
   /**
    * Submitting a savings product update (above) puts it in the pending-approval temp table instead of
-   * applying it directly. These calls drive the Approvals -> Product Approval screen.
+   * applying it directly. These calls drive the Approvals -> Pending Savings Product Edits screen.
    */
   getPendingSavingsProductEdits(): Observable<any> {
     return this.http.get('/savingsproducts/pending');
@@ -124,7 +124,7 @@ export class ProductsService {
 
   /**
    * Submitting a current product update (above) puts it in the pending-approval temp table instead of
-   * applying it directly. These calls drive the Approvals -> Product Approval screen.
+   * applying it directly. These calls drive the Approvals -> Pending Product Edits screen.
    */
   getPendingCurrentProductEdits(): Observable<any> {
     return this.http.get('/currentproducts/pending');
@@ -168,7 +168,7 @@ export class ProductsService {
 
   /**
    * Submitting a share product update (above) puts it in the pending-approval temp table instead of
-   * applying it directly. These calls drive the Approvals -> Product Approval screen.
+   * applying it directly. These calls drive the Approvals -> Pending Product Edits screen.
    */
   getPendingShareProductEdits(): Observable<any> {
     return this.http.get('/products/share/pending');
@@ -313,7 +313,7 @@ export class ProductsService {
 
   /**
    * Submitting a fixed deposit product update (above) puts it in the pending-approval temp table instead of
-   * applying it directly. These calls drive the Approvals -> Product Approval screen.
+   * applying it directly. These calls drive the Approvals -> Pending Product Edits screen.
    */
   getPendingFixedDepositProductEdits(): Observable<any> {
     return this.http.get('/fixeddepositproducts/pending');
@@ -608,7 +608,7 @@ export class ProductsService {
 
   /**
    * Submitting a recurring deposit product update (above) puts it in the pending-approval temp table instead of
-   * applying it directly. These calls drive the Approvals -> Product Approval screen.
+   * applying it directly. These calls drive the Approvals -> Pending Product Edits screen.
    */
   getPendingRecurringDepositProductEdits(): Observable<any> {
     return this.http.get('/recurringdepositproducts/pending');

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html

@@ -21,6 +21,33 @@
         <mat-checkbox formControlName="lienMarked">Lien Marked</mat-checkbox>
         <mat-checkbox formControlName="withdrawalFeeForTransfers">Apply Withdrawal Fee for Transfers</mat-checkbox>
       </div>
+
+      <mat-checkbox class="rdps-preclosure-toggle" formControlName="preClosurePenalApplicable">
+        {{ 'labels.inputs.Apply Penal Interest (less)' | translate }}
+      </mat-checkbox>
+
+      @if (recurringDepositProductSettingsForm.value.preClosurePenalApplicable) {
+        <div class="rdps-lockin-fields">
+          <mat-form-field appearance="outline" class="rdps-field">
+            <mat-label>{{ 'labels.inputs.Penal Interest' | translate }} (%)</mat-label>
+            <input type="number" matInput formControlName="preClosurePenalInterest" min="0" step="0.01" />
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="rdps-field">
+            <mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
+            <mat-select formControlName="preClosurePenalInterestOnTypeId">
+              @for (
+                preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData;
+                track preClosurePenalInterestOnType
+              ) {
+                <mat-option [value]="preClosurePenalInterestOnType.id">
+                  {{ preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+      }
     </div>
   </div>
 

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.scss

@@ -162,3 +162,12 @@ $gray-900: #202124;
     }
   }
 }
+
+.rdps-preclosure-toggle {
+  display: block;
+  margin: 4px 0 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid $gray-200;
+  font-size: 14px;
+  color: $gray-900;
+}

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.ts

@@ -28,6 +28,7 @@ export class RecurringDepositProductSettingsStepComponent implements OnInit {
   recurringDepositProductSettingsForm: UntypedFormGroup;
 
   lockinPeriodFrequencyTypeData: any;
+  preClosurePenalInterestOnTypeData: any;
 
   constructor() {
     this.createrecurringDepositProductSettingsForm();
@@ -35,6 +36,7 @@ export class RecurringDepositProductSettingsStepComponent implements OnInit {
 
   ngOnInit() {
     this.lockinPeriodFrequencyTypeData = this.recurringDepositProductsTemplate.lockinPeriodFrequencyTypeOptions;
+    this.preClosurePenalInterestOnTypeData = this.recurringDepositProductsTemplate.preClosurePenalInterestOnTypeOptions;
 
     if (this.recurringDepositProductsTemplate?.id) {
       this.recurringDepositProductSettingsForm.patchValue({
@@ -46,6 +48,9 @@ export class RecurringDepositProductSettingsStepComponent implements OnInit {
         enableLockinPeriod: this.recurringDepositProductsTemplate.enableLockinPeriod ?? false,
         lockinPeriodFrequency: this.recurringDepositProductsTemplate.lockinPeriodFrequency ?? '',
         lockinPeriodFrequencyType: this.recurringDepositProductsTemplate.lockinPeriodFrequencyType?.id ?? '',
+        preClosurePenalApplicable: this.recurringDepositProductsTemplate.preClosurePenalApplicable ?? false,
+        preClosurePenalInterest: this.recurringDepositProductsTemplate.preClosurePenalInterest ?? '',
+        preClosurePenalInterestOnTypeId: this.recurringDepositProductsTemplate.preClosurePenalInterestOnType?.id ?? '',
         maturityInstructions: this.recurringDepositProductsTemplate.maturityInstructions ?? false,
         creditMaturityProceeds: this.recurringDepositProductsTemplate.creditMaturityProceeds ?? false,
         penaltyGracePeriodMissedInstallments:
@@ -71,6 +76,9 @@ export class RecurringDepositProductSettingsStepComponent implements OnInit {
       enableLockinPeriod: [false],
       lockinPeriodFrequency: [''],
       lockinPeriodFrequencyType: [''],
+      preClosurePenalApplicable: [false],
+      preClosurePenalInterest: [''],
+      preClosurePenalInterestOnTypeId: [''],
       maturityInstructions: [false],
       creditMaturityProceeds: [false],
       penaltyGracePeriodMissedInstallments: [false],

src/app/products/saving-products/create-saving-product/create-saving-product.component.ts

@@ -1,4 +1,4 @@
-/**
+/**
  * Copyright since 2025 Mifos Initiative
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
@@ -22,7 +22,6 @@ import { SavingProductAccountingStepComponent } from '../saving-product-stepper/
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { Accounting } from 'app/core/utils/accounting';
 import { SavingProductPreviewStepComponent } from '../saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -48,7 +47,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateSavingProductComponent {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
-  private alertService = inject(AlertService);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
   private accounting = inject(Accounting);
@@ -164,24 +162,14 @@ export class CreateSavingProductComponent {
   submit() {
     const savingProduct = this.prepareSavingProductPayload();
     console.log('Saving product submit payload:', savingProduct);
-    this.productsService.createSavingProduct(savingProduct).subscribe({
-      next: (response: any) => {
-        if (response?.rollbackTransaction) {
-          this.alertService.alert({
-            type: 'Success',
-            message: 'Savings product creation request submitted successfully for approval.'
-          });
-          this.router.navigate(['../'], { relativeTo: this.route });
-        } else {
-          this.router.navigate(
-            [
-              '../',
-              response.resourceId
-            ],
-            { relativeTo: this.route }
-          );
-        }
-      }
+    this.productsService.createSavingProduct(savingProduct).subscribe((response: any) => {
+      this.router.navigate(
+        [
+          '../',
+          response.resourceId
+        ],
+        { relativeTo: this.route }
+      );
     });
   }
 }

src/app/products/share-products/create-share-product/create-share-product.component.ts

@@ -22,7 +22,6 @@ import { ShareProductAccountingStepComponent } from '../share-product-stepper/sh
 /** Custom Services */
 import { ProductsService } from 'app/products/products.service';
 import { SettingsService } from 'app/settings/settings.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { Accounting } from 'app/core/utils/accounting';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { ShareProductPreviewStepComponent } from '../share-product-stepper/share-product-preview-step/share-product-preview-step.component';
@@ -50,7 +49,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class CreateShareProductComponent {
   private route = inject(ActivatedRoute);
   private productsService = inject(ProductsService);
-  private alertService = inject(AlertService);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
   private accounting = inject(Accounting);
@@ -145,24 +143,14 @@ export class CreateShareProductComponent {
       chargesSelected: this.shareProduct.chargesSelected.map((charge: any) => ({ id: charge.id })),
       locale: this.settingsService.language.code // locale required for digitsAfterDecimal
     };
-    this.productsService.createShareProduct(shareProduct).subscribe({
-      next: (response: any) => {
-        if (response?.rollbackTransaction) {
-          this.alertService.alert({
-            type: 'Success',
-            message: 'Share product creation request submitted successfully for approval.'
-          });
-          this.router.navigate(['../'], { relativeTo: this.route });
-        } else {
-          this.router.navigate(
-            [
-              '../',
-              response.resourceId
-            ],
-            { relativeTo: this.route }
-          );
-        }
-      }
+    this.productsService.createShareProduct(shareProduct).subscribe((response: any) => {
+      this.router.navigate(
+        [
+          '../',
+          response.resourceId
+        ],
+        { relativeTo: this.route }
+      );
     });
   }
 }

src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.html

@@ -28,7 +28,7 @@
         }
       </div>
     </div>
-    <div class="pv-hero-actions">
+    <div style="display: flex; gap: 10px; flex-shrink: 0">
       <button
         class="pv-edit-btn"
         type="button"
@@ -43,141 +43,111 @@
     </div>
   </div>
 
-  <!-- DETAILS -->
-  <section class="pv-section">
-    <div class="pv-section-h">
-      <div class="pv-section-ic pv-section-ic--blue"><fa-icon icon="info-circle"></fa-icon></div>
-      <h3>{{ 'labels.inputs.Details' | translate }}</h3>
+  <div class="pv-legacy">
+    <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Details' | translate }}</h3>
+
+    <mat-divider [inset]="true"></mat-divider>
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
+      <span class="flex-60">{{ shareProduct.shortName }}</span>
     </div>
-    <div class="pv-grid">
-      <div class="pv-kv">
-        <span class="pv-k">{{ 'labels.inputs.Short Name' | translate }}</span>
-        <span class="pv-v"
-          ><strong>{{ shareProduct.shortName }}</strong></span
+
+    @if (shareProduct.description) {
+      <div class="flex-fill layout-row">
+        <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
+        <span class="flex-60">{{ shareProduct.description }}</span>
+      </div>
+    }
+
+    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Currency' | translate }}</h3>
+
+    <mat-divider [inset]="true"></mat-divider>
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
+      <span class="flex-60">{{ shareProduct.currency.name }}</span>
+    </div>
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
+      <span class="flex-60">{{ shareProduct.currency.decimalPlaces }}</span>
+    </div>
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+      <span class="flex-60">{{ shareProduct.currency.inMultiplesOf }}</span>
+    </div>
+
+    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
+
+    <mat-divider [inset]="true"></mat-divider>
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Total Number of Shares' | translate }}:</span>
+      <span class="flex-60">{{ shareProduct.totalShares | formatNumber }}</span>
+    </div>
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Shares to be Issued' | translate }}:</span>
+      <span class="flex-60">{{ shareProduct.totalSharesIssued | formatNumber }}</span>
+    </div>
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Nominal/Unit Price' | translate }}:</span>
+      <span class="flex-60">{{ shareProduct.unitPrice | formatNumber }}</span>
+    </div>
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Capital Value' | translate }}:</span>
+      <span class="flex-60">{{ shareProduct.shareCapital | formatNumber }}</span>
+    </div>
+
+    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Settings' | translate }}</h3>
+
+    <mat-divider [inset]="true"></mat-divider>
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Shares per Client' | translate }}:</span>
+      <span class="flex-60">{{
+        shareProduct.nominalShares +
+          ' (Min: ' +
+          (shareProduct.minimumShares ? shareProduct.minimumShares : shareProduct.nominalShares) +
+          ', Max: ' +
+          (shareProduct.maximumShares ? shareProduct.maximumShares : shareProduct.nominalShares) +
+          ')'
+      }}</span>
+    </div>
+
+    @if (shareProduct.minimumActivePeriod) {
+      <div class="flex-fill layout-row">
+        <span class="flex-40">{{ 'labels.inputs.Minimum Active Period' | translate }}:</span>
+        <span class="flex-60"
+          >{{ shareProduct.minimumActivePeriod }}
+          {{ shareProduct.minimumActivePeriodForDividendsTypeEnum.value | translateKey: 'catalogs' }}</span
         >
       </div>
-      @if (shareProduct.description) {
-        <div class="pv-kv pv-kv--span">
-          <span class="pv-k">{{ 'labels.inputs.Description' | translate }}</span>
-          <span class="pv-v">{{ shareProduct.description }}</span>
-        </div>
-      }
-    </div>
-  </section>
+    }
 
-  <!-- CURRENCY -->
-  <section class="pv-section">
-    <div class="pv-section-h">
-      <div class="pv-section-ic pv-section-ic--teal"><fa-icon icon="coins"></fa-icon></div>
-      <h3>{{ 'labels.heading.Currency' | translate }}</h3>
-    </div>
-    <div class="pv-grid">
-      <div class="pv-kv">
-        <span class="pv-k">{{ 'labels.inputs.Currency' | translate }}</span>
-        <span class="pv-v"
-          ><strong>{{ shareProduct.currency.name }}</strong></span
+    @if (shareProduct.lockinPeriod) {
+      <div class="flex-fill layout-row">
+        <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
+        <span class="flex-60"
+          >{{ shareProduct.lockinPeriod }} {{ shareProduct.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}</span
         >
       </div>
-      <div class="pv-kv">
-        <span class="pv-k">{{ 'labels.inputs.Decimal Places' | translate }}</span>
-        <span class="pv-v">{{ shareProduct.currency.decimalPlaces }}</span>
-      </div>
-      <div class="pv-kv">
-        <span class="pv-k">{{ 'labels.inputs.Currency in multiples of' | translate }}</span>
-        <span class="pv-v">{{ shareProduct.currency.inMultiplesOf }}</span>
-      </div>
+    }
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}:</span>
+      <span class="flex-60">{{ shareProduct.allowDividendCalculationForInactiveClients | yesNo }}</span>
     </div>
-  </section>
 
-  <!-- TERMS -->
-  <section class="pv-section">
-    <div class="pv-section-h">
-      <div class="pv-section-ic pv-section-ic--amber"><fa-icon icon="percentage"></fa-icon></div>
-      <h3>{{ 'labels.heading.Terms' | translate }}</h3>
-    </div>
-    <div class="pv-grid">
-      <div class="pv-kv">
-        <span class="pv-k">{{ 'labels.inputs.Total Number of Shares' | translate }}</span>
-        <span class="pv-v">{{ shareProduct.totalShares | formatNumber }}</span>
-      </div>
-      <div class="pv-kv">
-        <span class="pv-k">{{ 'labels.inputs.Shares to be Issued' | translate }}</span>
-        <span class="pv-v">{{ shareProduct.totalSharesIssued | formatNumber }}</span>
-      </div>
-      <div class="pv-kv">
-        <span class="pv-k">{{ 'labels.inputs.Nominal/Unit Price' | translate }}</span>
-        <span class="pv-v">{{ shareProduct.unitPrice | formatNumber }}</span>
-      </div>
-      <div class="pv-kv">
-        <span class="pv-k">{{ 'labels.inputs.Capital Value' | translate }}</span>
-        <span class="pv-v">{{ shareProduct.shareCapital | formatNumber }}</span>
-      </div>
-    </div>
-  </section>
-
-  <!-- SETTINGS -->
-  <section class="pv-section">
-    <div class="pv-section-h">
-      <div class="pv-section-ic pv-section-ic--indigo"><fa-icon icon="sliders-h"></fa-icon></div>
-      <h3>{{ 'labels.heading.Settings' | translate }}</h3>
-    </div>
-    <div class="pv-grid">
-      <div class="pv-kv">
-        <span class="pv-k">{{ 'labels.inputs.Shares per Client' | translate }}</span>
-        <span class="pv-v">{{
-          shareProduct.nominalShares +
-            ' (Min: ' +
-            (shareProduct.minimumShares ? shareProduct.minimumShares : shareProduct.nominalShares) +
-            ', Max: ' +
-            (shareProduct.maximumShares ? shareProduct.maximumShares : shareProduct.nominalShares) +
-            ')'
-        }}</span>
-      </div>
-
-      @if (shareProduct.minimumActivePeriod) {
-        <div class="pv-kv">
-          <span class="pv-k">{{ 'labels.inputs.Minimum Active Period' | translate }}</span>
-          <span class="pv-v"
-            >{{ shareProduct.minimumActivePeriod }}
-            {{ shareProduct.minimumActivePeriodForDividendsTypeEnum.value | translateKey: 'catalogs' }}</span
-          >
-        </div>
-      }
-
-      @if (shareProduct.lockinPeriod) {
-        <div class="pv-kv">
-          <span class="pv-k">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
-          <span class="pv-v"
-            >{{ shareProduct.lockinPeriod }}
-            {{ shareProduct.lockPeriodTypeEnum.value | translateKey: 'catalogs' }}</span
-          >
-        </div>
-      }
-
-      <div class="pv-kv">
-        <span class="pv-k">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}</span>
-        <span class="pv-v">
-          <span
-            class="pv-pill"
-            [class.pv-pill--green]="shareProduct.allowDividendCalculationForInactiveClients"
-            [class.pv-pill--gray]="!shareProduct.allowDividendCalculationForInactiveClients"
-          >
-            {{ shareProduct.allowDividendCalculationForInactiveClients | yesNo }}
-          </span>
-        </span>
-      </div>
-    </div>
-  </section>
-
-  <!-- MARKET PRICE -->
-  @if (shareProduct.marketPrice?.length) {
-    <section class="pv-section">
-      <div class="pv-section-h">
-        <div class="pv-section-ic pv-section-ic--teal"><fa-icon icon="chart-line"></fa-icon></div>
-        <h3>{{ 'labels.inputs.Market Price Period' | translate }}</h3>
-      </div>
-      <div class="pv-table-wrap">
-        <table class="pv-table" mat-table [dataSource]="shareProduct.marketPrice">
+    @if (shareProduct.marketPrice?.length) {
+      <div class="layout-row-wrap responsive-column flex-fill">
+        <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Market Price Period' | translate }}</h3>
+        <mat-divider [inset]="true"></mat-divider>
+        <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="shareProduct.marketPrice">
           <ng-container matColumnDef="fromDate">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.From Date' | translate }}</th>
             <td mat-cell *matCellDef="let marketPrice">
@@ -194,18 +164,13 @@
           <tr mat-row *matRowDef="let row; columns: marketPriceDisplayedColumns"></tr>
         </table>
       </div>
-    </section>
-  }
+    }
 
-  <!-- CHARGES -->
-  @if (shareProduct.charges.length) {
-    <section class="pv-section">
-      <div class="pv-section-h">
-        <div class="pv-section-ic pv-section-ic--red"><fa-icon icon="receipt"></fa-icon></div>
-        <h3>{{ 'labels.heading.Charges' | translate }}</h3>
-      </div>
-      <div class="pv-table-wrap">
-        <table class="pv-table" mat-table [dataSource]="shareProduct.charges">
+    @if (shareProduct.charges.length) {
+      <div class="layout-row-wrap responsive-column flex-fill">
+        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
+        <mat-divider [inset]="true"></mat-divider>
+        <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="shareProduct.charges">
           <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
             <td mat-cell *matCellDef="let charge">
@@ -234,57 +199,62 @@
           <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
         </table>
       </div>
-    </section>
-  }
+    }
 
-  <!-- ACCOUNTING -->
-  <section class="pv-section pv-accounting">
-    <div class="pv-section-h">
-      <div class="pv-section-ic pv-section-ic--green"><fa-icon icon="book"></fa-icon></div>
-      <h3>{{ 'labels.heading.Accounting' | translate }}</h3>
-    </div>
+    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Accounting' | translate }}</h3>
 
-    <div class="pv-accounting-row">
-      <span class="pv-accounting-label">{{ 'labels.inputs.Type' | translate }}</span>
-      <span class="pv-accounting-value">{{
+    <mat-divider [inset]="true"></mat-divider>
+
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
+      <span class="flex-60">{{
         'labels.accounting.' + getAccountingRuleName(shareProduct.accountingRule.value) | translate
       }}</span>
     </div>
 
     @if (shareProduct.accountingRule.id === 2) {
-      <div class="pv-accounting-details">
-        <h4 class="pv-sub-h">{{ 'labels.heading.Assets' | translate }}</h4>
-        <mifosx-gl-account-display
-          [accountTitle]="'Share reference'"
-          [glAccount]="shareProduct.accountingMappings.shareReferenceId"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-
-        <h4 class="pv-sub-h">{{ 'labels.heading.Liabilities' | translate }}</h4>
-        <mifosx-gl-account-display
-          [accountTitle]="'Share suspense control'"
-          [glAccount]="shareProduct.accountingMappings.shareSuspenseId"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-
-        <h4 class="pv-sub-h">{{ 'labels.heading.Share Equity' | translate }}</h4>
-        <mifosx-gl-account-display
-          [accountTitle]="'Equity'"
-          [glAccount]="shareProduct.accountingMappings.shareEquityId"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
-
-        <h4 class="pv-sub-h">{{ 'labels.heading.Income' | translate }}</h4>
-        <mifosx-gl-account-display
-          [accountTitle]="'Income from fees'"
-          [glAccount]="shareProduct.accountingMappings.incomeFromFeeAccountId"
-          [withTitle]="'40%'"
-        >
-        </mifosx-gl-account-display>
+      <div class="layout-row-wrap responsive-column flex-fill">
+        <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Assets' | translate }}</h4>
+        <div class="flex-fill">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Share reference'"
+            [glAccount]="shareProduct.accountingMappings.shareReferenceId"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
+        <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Liabilities' | translate }}</h4>
+        <div class="flex-fill">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Share suspense control'"
+            [glAccount]="shareProduct.accountingMappings.shareSuspenseId"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
+        <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Share Equity' | translate }}</h4>
+        <div class="flex-fill">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Equity'"
+            [glAccount]="shareProduct.accountingMappings.shareEquityId"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
+        <h4 class="mat-h4 flex-fill">{{ 'labels.heading.Income' | translate }}</h4>
+        <div class="flex-fill">
+          <mifosx-gl-account-display
+            class="flex-100"
+            [accountTitle]="'Income from fees'"
+            [glAccount]="shareProduct.accountingMappings.incomeFromFeeAccountId"
+            [withTitle]="'40%'"
+          >
+          </mifosx-gl-account-display>
+        </div>
       </div>
     }
-  </section>
+  </div>
 </div>

src/app/products/share-products/view-share-product/share-product-general-tab/share-product-general-tab.component.scss

@@ -6,6 +6,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 @use 'assets/styles/product-view' as pv;
 
 @include pv.product-view-styles;
@@ -16,111 +18,13 @@
   --pv-accent-l: #fce7f3;
 }
 
-.pv-hero-actions {
-  display: flex;
-  gap: 10px;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  align-items: flex-start;
+.tab-container {
+  padding: 1%;
+  margin: 1%;
 }
 
-/* ───────── COMPACT ACCOUNTING SECTION ───────── */
-.pv-accounting {
-  .pv-accounting-row {
-    display: grid;
-    grid-template-columns: minmax(220px, 40%) 1fr;
-    gap: 14px;
-    align-items: baseline;
-    padding: 8px 0;
-    border-bottom: 1px dashed var(--pv-g100);
-    min-height: unset;
-    line-height: 1.4;
-  }
-
-  .pv-accounting-label {
-    font-size: 10.5px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--pv-g500);
-    margin: 0;
-    flex: none;
-  }
-
-  .pv-accounting-value {
-    font-size: 13.5px;
-    color: var(--pv-g900);
-    font-weight: 500;
-    word-break: break-word;
-    margin: 0;
-    flex: none;
-  }
-
-  .pv-accounting-details {
-    margin-top: 0;
-
-    h4.pv-sub-h {
-      margin: 16px 0 8px;
-      font-size: 12px;
-      font-weight: 700;
-      color: var(--pv-g700);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      line-height: 1.2;
-    }
-
-    mifosx-gl-account-display {
-      display: block;
-      padding: 8px 0;
-      min-height: unset;
-      line-height: 1.4;
-      border-bottom: 1px dashed var(--pv-g100);
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      ::ng-deep .layout-row {
-        display: grid;
-        grid-template-columns: minmax(220px, 40%) 1fr;
-        gap: 14px;
-        align-items: baseline;
-        margin: 0;
-      }
-
-      ::ng-deep div {
-        margin: 0 !important;
-        line-height: 1.4;
-      }
-
-      ::ng-deep .header {
-        font-size: 10.5px;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-        color: var(--pv-g500);
-        margin: 0 !important;
-        max-width: 100%;
-        flex: none;
-      }
-
-      ::ng-deep div:not(.header) {
-        font-size: 13.5px;
-        color: var(--pv-g900);
-        font-weight: 500;
-        word-break: break-word;
-        margin: 0 !important;
-        max-width: 100%;
-        flex: none;
-      }
-    }
-  }
-
-  @media (width <= 600px) {
-    .pv-accounting-row,
-    .pv-accounting-details mifosx-gl-account-display ::ng-deep .layout-row {
-      grid-template-columns: 1fr;
-      gap: 4px;
-    }
-  }
+.mat-h3 {
+  margin-top: 10px !important;
+  font-weight: 300;
+  color: $status-approved;
 }

src/app/profile/profile.component.html

@@ -7,10 +7,6 @@
 -->
 
 <div class="container m-b-10 layout-row layout-lt-md-column align-end gap-1percent">
-  <button mat-raised-button color="primary" class="m-r-10" (click)="configureShortcuts()">
-    <fa-icon icon="keyboard" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Configure Shortcuts' | translate }}
-  </button>
   <button mat-raised-button color="primary" class="m-r-10" [routerLink]="['/system', 'roles-and-permissions']">
     <fa-icon icon="check" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Permissions' | translate }}

src/app/profile/profile.component.ts

@@ -28,7 +28,6 @@ import { Router, RouterLink } from '@angular/router';
 import { AuthenticationService } from 'app/core/authentication/authentication.service';
 import { ChangePasswordDialogComponent } from 'app/shared/change-password-dialog/change-password-dialog.component';
 import { SettingsService } from 'app/settings/settings.service';
-import { KeyboardShortcutsDialogComponent } from 'app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -109,13 +108,7 @@ export class ProfileComponent implements OnInit {
     });
   }
 
-  get tenantIdentifier() {
+  get tenantIdentifier(): string {
     return this.settingsService.tenantIdentifier || 'default';
   }
-
-  configureShortcuts() {
-    this.dialog.open(KeyboardShortcutsDialogComponent, {
-      width: '800px'
-    });
-  }
 }

src/app/rbi-circulars/openproject.service.ts

@@ -9,7 +9,7 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { environment } from '../../environments/environment';
+import { environment } from 'environments/environment';
 
 export interface OpenProjectWorkPackage {
   id: number;

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component.ts

@@ -27,6 +27,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     FaIconComponent,
+    NgClass,
     TransactionPaymentDetailComponent,
     CurrencyPipe,
     DateFormatPipe

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.ts

@@ -60,6 +60,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     DateFormatPipe,
     DatetimeFormatPipe,
     FormatNumberPipe,
+    YesnoPipe,
     MatCardModule,
     MatTooltipModule
   ]

src/app/shared/deposit-certificate-dialog/deposit-certificate-dialog.component.html

@@ -0,0 +1,202 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+<h2 mat-dialog-title class="dialog-header no-print">
+  <span>{{ accountType === 'FD' ? 'Fixed Deposit' : 'Recurring Deposit' }} Certificate</span>
+  <span class="flex-auto"></span>
+</h2>
+
+<div mat-dialog-content class="dialog-content-container">
+  <!-- Certificate Page Frame -->
+  <div class="certificate-container" id="deposit-certificate-print">
+    <div class="certificate-border-outer">
+      <div class="certificate-border-inner">
+        <!-- Certificate Watermark Icon/Seal -->
+        <div class="certificate-watermark">
+          <mat-icon class="watermark-icon">{{ accountType === 'FD' ? 'savings' : 'event_repeat' }}</mat-icon>
+        </div>
+
+        <div class="certificate-header">
+          <div class="bank-name">Nexora Co-operative Bank Ltd.</div>
+          <div class="bank-sub">Mumbai, Maharashtra, India</div>
+          <div class="cert-title">
+            {{ accountType === 'FD' ? 'FIXED DEPOSIT CERTIFICATE' : 'RECURRING DEPOSIT CERTIFICATE' }}
+          </div>
+          <div class="cert-subtitle">Issued under the Common Seal of the Bank</div>
+        </div>
+
+        <div class="cert-meta-row">
+          <div class="meta-item">
+            <span class="meta-label">Certificate No.</span>
+            <span class="meta-value">{{ certificateNo }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">Account No.</span>
+            <span class="meta-value">{{ accountData.fdAccountNumber || accountData.accountNo }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">Date of Issue</span>
+            <span class="meta-value">{{ issueDate | dateFormat }}</span>
+          </div>
+        </div>
+
+        <div class="cert-body-section">
+          <p class="cert-main-text">
+            This is to certify that
+            <strong class="highlight-text">{{ accountData.clientName || accountData.groupName }}</strong>
+            holds a {{ accountType === 'FD' ? 'Fixed Deposit' : 'Recurring Deposit' }} account bearing account number
+            <strong class="highlight-text">{{ accountData.fdAccountNumber || accountData.accountNo }}</strong>
+            with <strong class="highlight-text">Nexora Co-operative Bank Ltd.</strong>, as per the particulars set out
+            below.
+            <ng-container *ngIf="renewalCount">
+              This account was renewed on maturity {{ renewalCount }} {{ renewalCount === 1 ? 'time' : 'times' }}; the
+              full renewal history is set out below.
+            </ng-container>
+          </p>
+
+          <div class="issued-to-details">
+            <div class="issued-to-title">ISSUED TO:</div>
+            <div class="client-name-details">{{ accountData.clientName || accountData.groupName }}</div>
+            <div class="client-ids">
+              <span *ngIf="accountData.clientAccountNo"
+                ><strong>Customer ID:</strong> {{ accountData.clientAccountNo }}</span
+              >
+              <span *ngIf="panNumber && panNumber !== 'Not Available'">
+                &middot; <strong>PAN:</strong> {{ panNumber }}</span
+              >
+            </div>
+            <div class="client-address" *ngIf="clientAddress">
+              {{ clientAddress }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Details Grid -->
+        <table class="certificate-details-table">
+          <tbody>
+            <tr>
+              <td class="lbl-col">Product</td>
+              <td class="val-col">{{ accountData.depositProductName }}</td>
+              <td class="lbl-col">{{ accountType === 'FD' ? 'Deposit Date' : 'First Deposit Date' }}</td>
+              <td class="val-col">{{ depositDate | dateFormat }}</td>
+            </tr>
+            <tr *ngIf="accountType === 'FD'">
+              <td class="lbl-col">Deposit Amount</td>
+              <td class="val-col">
+                {{ accountData.depositAmount | currency: accountData.currency.code : 'symbol-narrow' }}
+              </td>
+              <td class="lbl-col">Tenure</td>
+              <td class="val-col">{{ tenureLabel }}</td>
+            </tr>
+            <tr *ngIf="accountType === 'RD'">
+              <td class="lbl-col">Installment Amount</td>
+              <td class="val-col">
+                {{
+                  accountData.mandatoryRecommendedDepositAmount | currency: accountData.currency.code : 'symbol-narrow'
+                }}
+              </td>
+              <td class="lbl-col">Installment Frequency</td>
+              <td class="val-col">
+                Every {{ accountData.recurringFrequency }} {{ accountData.recurringFrequencyType?.value }}
+              </td>
+            </tr>
+            <tr *ngIf="accountType === 'RD'">
+              <td class="lbl-col">Tenure</td>
+              <td class="val-col">{{ tenureLabel }}</td>
+              <td class="lbl-col">Interest Rate (p.a.)</td>
+              <td class="val-col">{{ accountData.nominalAnnualInterestRate }}%</td>
+            </tr>
+            <tr *ngIf="accountType === 'FD'">
+              <td class="lbl-col">Interest Rate (p.a.)</td>
+              <td class="val-col">{{ accountData.nominalAnnualInterestRate }}%</td>
+              <td class="lbl-col">Interest Compounding</td>
+              <td class="val-col">{{ accountData.interestCompoundingPeriodType?.value }}</td>
+            </tr>
+            <tr>
+              <td class="lbl-col">Maturity Date</td>
+              <td class="val-col">{{ accountData.maturityDate | dateFormat }}</td>
+              <td class="lbl-col">Current Balance</td>
+              <td class="val-col">
+                {{ accountData.summary?.accountBalance | currency: accountData.currency.code : 'symbol-narrow' }}
+              </td>
+            </tr>
+            <tr class="highlight-row">
+              <td colspan="2" class="lbl-col-highlight">MATURITY AMOUNT</td>
+              <td colspan="2" class="val-col-highlight">
+                {{ accountData.maturityAmount | currency: accountData.currency.code : 'symbol-narrow' }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- Renewal History -- one row per term of this FD, oldest first. Deliberately shows only the
+             term number, not each term's internal account number: the customer holds one FD under one
+             number, and listing the per-term account numbers here would read as several deposits. Staff
+             can still see them on the account view's own renewal-history card. -->
+        <table class="certificate-details-table renewal-history-table" *ngIf="renewalHistory.length">
+          <thead>
+            <tr>
+              <th colspan="7" class="renewal-history-title">RENEWAL HISTORY</th>
+            </tr>
+            <tr>
+              <th>Term</th>
+              <th>From</th>
+              <th>To</th>
+              <th>Rate</th>
+              <th>Principal</th>
+              <th>Interest</th>
+              <th>Maturity Amount</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let term of renewalHistory" [class.current-term-row]="term.accountid === accountData.id">
+              <td>{{ term.renewalcycleno === 0 ? 'Original' : 'Renewal ' + term.renewalcycleno }}</td>
+              <td>{{ term.activatedondate | dateFormat }}</td>
+              <td>{{ term.maturitydate | dateFormat }}</td>
+              <td>{{ term.interestrate }}%</td>
+              <td>{{ term.depositamount | currency: accountData.currency.code : 'symbol-narrow' }}</td>
+              <td>
+                {{
+                  term.interestearned === null || term.interestearned === undefined
+                    ? '—'
+                    : (term.interestearned | currency: accountData.currency.code : 'symbol-narrow')
+                }}
+              </td>
+              <td>{{ maturityFor(term) | currency: accountData.currency.code : 'symbol-narrow' }}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="cert-footer">
+          <div class="seal-container">
+            <div class="seal-ring">
+              <div class="seal-text">COMMON SEAL</div>
+            </div>
+          </div>
+          <div class="closing-text">
+            Given under the common seal of the bank this {{ issueDate | date: 'd' }} day of
+            {{ issueDate | date: 'MMMM yyyy' }}.
+          </div>
+          <div class="signatures-container">
+            <div class="signature-block">
+              <div class="signature-line"></div>
+              <div class="signatory-title">Authorised Signatory</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<mat-dialog-actions align="end" class="no-print">
+  <button mat-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
+  <button mat-raised-button color="primary" (click)="printCertificate()">
+    <mat-icon class="m-r-5">print</mat-icon>
+    Print Certificate
+  </button>
+</mat-dialog-actions>

src/app/shared/deposit-certificate-dialog/deposit-certificate-dialog.component.scss

@@ -0,0 +1,556 @@
+/**
+ * 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/.
+ */
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 12px;
+  margin-bottom: 16px;
+  font-weight: 500;
+  color: #1a252c;
+}
+
+.dialog-content-container {
+  max-height: 80vh;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+/* Certificate Outer Container */
+.certificate-container {
+  background-color: #faf8f5;
+  padding: 20px;
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  color: #2c2520;
+  box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
+  border-radius: 8px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* Classic Ornate Border System */
+.certificate-border-outer {
+  border: 5px double #c5a059; /* Gold double border */
+  padding: 8px;
+  background-color: #fdfcf7; /* Textured light cream */
+  border-radius: 4px;
+  position: relative;
+}
+
+.certificate-border-inner {
+  border: 1px solid #dcd1bd;
+  padding: 30px;
+  border-radius: 2px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Watermark */
+.certificate-watermark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0.03;
+  pointer-events: none;
+  z-index: 1;
+
+  .watermark-icon {
+    font-size: 280px;
+    width: 280px;
+    height: 280px;
+    color: #c5a059;
+  }
+}
+
+.certificate-header,
+.cert-meta-row,
+.cert-body-section,
+.certificate-details-table,
+.cert-footer {
+  position: relative;
+  z-index: 2; /* Ensure content is above watermark */
+}
+
+/* Header styling */
+.certificate-header {
+  text-align: center;
+  margin-bottom: 30px;
+  border-bottom: 2px solid #f2edd5;
+  padding-bottom: 20px;
+
+  .bank-name {
+    font-size: 26px;
+    font-weight: bold;
+    color: #0b3c5d; /* Dark Premium Blue */
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    margin-bottom: 4px;
+  }
+
+  .bank-sub {
+    font-size: 13px;
+    color: #7b6f63;
+    font-style: italic;
+    letter-spacing: 1px;
+    margin-bottom: 20px;
+  }
+
+  .cert-title {
+    font-size: 28px;
+    font-weight: 400;
+    color: #c5a059; /* Classic Gold */
+    letter-spacing: 4px;
+    margin-bottom: 5px;
+    font-family: Georgia, serif;
+  }
+
+  .cert-subtitle {
+    font-size: 11px;
+    color: #7b6f63;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+}
+
+/* Meta Data Grid (Top of cert) */
+.cert-meta-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30px;
+  border-bottom: 1px solid #f2edd5;
+  padding-bottom: 15px;
+
+  .meta-item {
+    display: flex;
+    flex-direction: column;
+
+    .meta-label {
+      font-size: 11px;
+      text-transform: uppercase;
+      color: #928374;
+      letter-spacing: 1px;
+      margin-bottom: 3px;
+    }
+
+    .meta-value {
+      font-size: 15px;
+      font-weight: bold;
+      color: #322f2b;
+    }
+  }
+}
+
+/* Main Body text */
+.cert-body-section {
+  margin-bottom: 35px;
+
+  .cert-main-text {
+    font-size: 15px;
+    line-height: 1.8;
+    text-align: center;
+    color: #4a453f;
+    margin-bottom: 25px;
+
+    .highlight-text {
+      color: #1a202c;
+      font-weight: 600;
+      border-bottom: 1px dotted #c5a059;
+      padding-bottom: 1px;
+    }
+  }
+}
+
+/* Issued To Details Block */
+.issued-to-details {
+  border: 1px solid #f0e6d2;
+  background-color: #fbfaf5;
+  padding: 15px 20px;
+  border-radius: 4px;
+  margin: 20px auto;
+  max-width: 90%;
+  text-align: left;
+
+  .issued-to-title {
+    font-size: 10px;
+    font-weight: bold;
+    color: #c5a059;
+    letter-spacing: 1.5px;
+    margin-bottom: 6px;
+  }
+
+  .client-name-details {
+    font-size: 18px;
+    font-weight: bold;
+    color: #0b3c5d;
+    margin-bottom: 4px;
+  }
+
+  .client-ids {
+    font-size: 12px;
+    color: #666;
+    margin-bottom: 6px;
+  }
+
+  .client-address {
+    font-size: 12px;
+    color: #7b6f63;
+    line-height: 1.4;
+  }
+}
+
+/* Certificate Data Table */
+.certificate-details-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 40px;
+
+  td {
+    padding: 10px 12px;
+    border: 1px solid #ede8db;
+    font-size: 13px;
+  }
+
+  .lbl-col {
+    background-color: #f7f5ee;
+    font-weight: bold;
+    color: #7b6f63;
+    width: 25%;
+  }
+
+  .val-col {
+    color: #322f2b;
+    width: 25%;
+  }
+
+  .highlight-row {
+    background-color: #f5f2e9;
+    border-top: 2px solid #c5a059;
+  }
+
+  .lbl-col-highlight {
+    font-weight: bold;
+    color: #0b3c5d;
+    font-size: 14px;
+    letter-spacing: 1px;
+    text-align: right;
+    padding-right: 20px;
+  }
+
+  .val-col-highlight {
+    font-size: 16px;
+    font-weight: bold;
+    color: #b8860b; /* Dark Goldenrod */
+  }
+}
+
+/* Renewal History Table -- lists each earlier term this FD was renewed from */
+.renewal-history-table {
+  th {
+    padding: 8px 10px;
+    border: 1px solid #ede8db;
+    font-size: 11px;
+    text-align: left;
+    background-color: #f7f5ee;
+    color: #7b6f63;
+  }
+
+  .renewal-history-title {
+    text-align: center;
+    background-color: #f5f2e9;
+    color: #0b3c5d;
+    font-weight: bold;
+    letter-spacing: 1.5px;
+    font-size: 12px;
+  }
+
+  .current-term-row {
+    background-color: #fbfaf5;
+    font-weight: bold;
+  }
+}
+
+/* Certificate Footer Seal / Signatures */
+.cert-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+
+  .seal-container {
+    width: 25%;
+
+    .seal-ring {
+      width: 90px;
+      height: 90px;
+      border: 2px dashed #b8860b;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto;
+      transform: rotate(-15deg);
+
+      .seal-text {
+        font-size: 10px;
+        font-weight: bold;
+        color: #b8860b;
+        text-align: center;
+        line-height: 1.2;
+        letter-spacing: 1px;
+      }
+    }
+  }
+
+  .closing-text {
+    width: 45%;
+    font-size: 12px;
+    color: #7b6f63;
+    font-style: italic;
+    line-height: 1.5;
+    text-align: center;
+  }
+
+  .signatures-container {
+    width: 30%;
+    text-align: center;
+
+    .signature-block {
+      display: inline-block;
+      width: 80%;
+
+      .signature-line {
+        border-bottom: 1px solid #7b6f63;
+        margin-bottom: 8px;
+        height: 40px; /* Space for signature */
+      }
+
+      .signatory-title {
+        font-size: 12px;
+        color: #7b6f63;
+        font-weight: bold;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+    }
+  }
+}
+
+/* Print CSS */
+@media print {
+  /* Everything below `::ng-deep` reaches outside this component's own template -- html/body and
+     the whole Angular Material CDK overlay chain never carry this component's scoping attribute
+     under the default emulated encapsulation, so a plain (scoped) selector would silently never
+     match any of them. `::ng-deep` is deprecated but still the correct tool for a component that
+     genuinely needs to override its host application's shell during print. */
+
+  /* The app shell pins html/body to a fixed viewport height with overflow hidden (its inner
+     panels handle their own scrolling on screen) -- left in place, that caps every printed page
+     at one viewport's worth of content and silently cuts off the rest instead of paginating. */
+  ::ng-deep html,
+  ::ng-deep body {
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+  /* Hide non-overlay contents during print */
+  ::ng-deep body > :not(.cdk-overlay-container) {
+    display: none !important;
+  }
+
+  /* The dialog's own scroll region clips anything past 80vh -- printing only captures what a
+     scrollable/max-height box shows on screen, so both constraints must be lifted or the
+     certificate gets cut off after its first visible slice. */
+  .dialog-content-container {
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  /* CDK's overlay wrapper/backdrop/pane are all `position: fixed` (needed to center the dialog
+     on screen) and the wrapper flex-centers its content -- during print, a fixed-position
+     ancestor is clipped to one page's height, so anything taller than that gets cut off and only
+     a thin cross-section (here, just the certificate's own border) survives. Every ancestor in
+     that chain has to become a normal, statically-flowing block for the full certificate to print. */
+  ::ng-deep .cdk-overlay-backdrop {
+    display: none !important;
+  }
+
+  ::ng-deep .cdk-overlay-container,
+  ::ng-deep .cdk-global-overlay-wrapper,
+  ::ng-deep .cdk-overlay-pane,
+  ::ng-deep .mat-mdc-dialog-container,
+  ::ng-deep .mdc-dialog__container,
+  ::ng-deep .mdc-dialog__surface {
+    position: static !important;
+    display: block !important;
+    max-height: none !important;
+    max-width: none !important;
+    height: auto !important;
+    width: auto !important;
+    overflow: visible !important;
+    transform: none !important;
+  }
+
+  /* Make certificate fill page */
+  #deposit-certificate-print {
+    position: static !important;
+    width: 100% !important;
+    height: auto !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background-color: #fff !important;
+    box-shadow: none !important;
+  }
+
+  .certificate-border-outer {
+    border-width: 8px !important;
+    background-color: #fff !important;
+  }
+
+  .no-print {
+    display: none !important;
+  }
+
+  ::ng-deep .mat-mdc-dialog-container {
+    padding: 0 !important;
+  }
+
+  /* Compact every spacing/font value so the whole certificate fits a single printed page --
+     the on-screen sizing is generous by design, but that same height doesn't fit one page. */
+  .certificate-container {
+    padding: 6px !important;
+  }
+
+  .certificate-border-inner {
+    padding: 14px !important;
+  }
+
+  .certificate-header {
+    margin-bottom: 10px !important;
+    padding-bottom: 10px !important;
+
+    .bank-name {
+      font-size: 19px !important;
+      margin-bottom: 2px !important;
+    }
+
+    .bank-sub {
+      font-size: 10px !important;
+      margin-bottom: 8px !important;
+    }
+
+    .cert-title {
+      font-size: 19px !important;
+      letter-spacing: 2px !important;
+      margin-bottom: 2px !important;
+    }
+
+    .cert-subtitle {
+      font-size: 9px !important;
+    }
+  }
+
+  .cert-meta-row {
+    margin-bottom: 10px !important;
+    padding-bottom: 8px !important;
+
+    .meta-label {
+      font-size: 9px !important;
+      margin-bottom: 1px !important;
+    }
+
+    .meta-value {
+      font-size: 12px !important;
+    }
+  }
+
+  .cert-body-section {
+    margin-bottom: 10px !important;
+
+    .cert-main-text {
+      font-size: 11px !important;
+      line-height: 1.4 !important;
+      margin-bottom: 10px !important;
+    }
+  }
+
+  .issued-to-details {
+    padding: 8px 14px !important;
+    margin: 8px auto !important;
+
+    .client-name-details {
+      font-size: 14px !important;
+    }
+
+    .client-ids,
+    .client-address {
+      font-size: 10px !important;
+    }
+  }
+
+  .certificate-details-table {
+    margin-bottom: 12px !important;
+
+    td {
+      padding: 5px 10px !important;
+      font-size: 10px !important;
+    }
+
+    .lbl-col-highlight {
+      font-size: 12px !important;
+    }
+
+    .val-col-highlight {
+      font-size: 13px !important;
+    }
+  }
+
+  .renewal-history-table {
+    margin-bottom: 12px !important;
+
+    th {
+      padding: 4px 8px !important;
+      font-size: 8px !important;
+    }
+
+    td {
+      padding: 4px 8px !important;
+      font-size: 9px !important;
+    }
+
+    .renewal-history-title {
+      font-size: 10px !important;
+    }
+  }
+
+  .cert-footer {
+    margin-top: 8px !important;
+
+    .seal-ring {
+      width: 60px !important;
+      height: 60px !important;
+    }
+
+    .seal-text {
+      font-size: 8px !important;
+    }
+
+    .closing-text {
+      font-size: 10px !important;
+    }
+
+    .signature-line {
+      height: 22px !important;
+    }
+
+    .signatory-title {
+      font-size: 10px !important;
+    }
+  }
+}

src/app/shared/deposit-certificate-dialog/deposit-certificate-dialog.component.ts

@@ -0,0 +1,157 @@
+/**
+ * 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 {
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
+import { ClientsService } from 'app/clients/clients.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { DateFormatPipe } from '../../pipes/date-format.pipe';
+import { CurrencyPipe } from '@angular/common';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+
+/**
+ * Printable deposit certificate for a Fixed Deposit or Recurring Deposit account -- handed to the
+ * customer as physical proof of their deposit. Shared between FD and RD since both account shapes
+ * carry the same core fields (depositAmount, nominalAnnualInterestRate, depositPeriod, maturityDate,
+ * maturityAmount); RD additionally shows its installment/frequency details.
+ */
+@Component({
+  selector: 'mifosx-deposit-certificate-dialog',
+  templateUrl: './deposit-certificate-dialog.component.html',
+  styleUrls: ['./deposit-certificate-dialog.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    DateFormatPipe,
+    CurrencyPipe,
+    MatButton,
+    MatIcon
+  ]
+})
+export class DepositCertificateDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<DepositCertificateDialogComponent>>(MatDialogRef);
+  data = inject(MAT_DIALOG_DATA);
+  clientsService = inject(ClientsService);
+
+  /** 'FD' or 'RD' -- controls the title and which extra rows show. */
+  accountType: 'FD' | 'RD';
+  accountData: any;
+
+  clientData: any;
+  clientAddress = '';
+  panNumber = 'Not Available';
+
+  certificateNo = '';
+  issueDate: Date = new Date();
+
+  /**
+   * Every term of this FD, oldest first, as resolved by the backend -- a renewal opens each term as
+   * its own account, so the certificate lists them all to show the deposit's full history. Empty for
+   * an FD that has never been renewed. Keys are lower-cased, arriving from SQL column labels.
+   */
+  renewalHistory: any[] = [];
+
+  /**
+   * How many times the deposit has actually rolled over. {@link renewalHistory} lists every TERM, and the
+   * first of those is the original deposit rather than a renewal, so the count is one less than the number
+   * of rows. Stated on a customer-facing certificate, so an off-by-one here misreports the deposit.
+   */
+  get renewalCount(): number {
+    return Math.max(this.renewalHistory.length - 1, 0);
+  }
+
+  ngOnInit() {
+    this.accountType = this.data.accountType;
+    this.accountData = this.data.accountData;
+    const clientId = this.data.clientId != null ? String(this.data.clientId) : null;
+
+    this.certificateNo = `${this.accountType}-CERT-${this.accountData.fdAccountNumber || this.accountData.accountNo}`;
+    this.renewalHistory = this.accountData?.renewalHistory ?? [];
+
+    if (!clientId) {
+      return;
+    }
+
+    this.clientsService.getClientData(clientId).subscribe({
+      next: (client: any) => {
+        this.clientData = client;
+      },
+      error: () => {}
+    });
+
+    this.clientsService.getClientAddressData(clientId).subscribe({
+      next: (addresses: any[]) => {
+        if (addresses && addresses.length > 0) {
+          const permanent = addresses.find((a) => /permanent/i.test(a?.addressType || '')) || addresses[0];
+          this.clientAddress = this.formatAddress(permanent);
+        }
+      },
+      error: () => {}
+    });
+
+    this.clientsService.getClientIdentifiers(clientId).subscribe({
+      next: (identifiers: any[]) => {
+        const idList = Array.isArray(identifiers) ? identifiers : (identifiers as any)?.pageItems || [];
+        const panId = idList.find((id: any) => /pan/i.test(id?.documentType?.name || ''));
+        if (panId) {
+          this.panNumber = panId.documentKey;
+        }
+      },
+      error: () => {}
+    });
+  }
+
+  /**
+   * A term's settled maturity amount, or its projection while it is still running. Resolved here rather
+   * than inline so the choice isn't left to operator precedence between `??` and the currency pipe.
+   */
+  maturityFor(term: any): number | null {
+    return term?.maturedamount ?? term?.projectedmaturityamount ?? null;
+  }
+
+  formatAddress(addr: any): string {
+    if (!addr) return '';
+    return [
+      addr.addressLine1,
+      addr.addressLine2,
+      addr.townVillage,
+      addr.city,
+      addr.stateName,
+      addr.countryName,
+      addr.postalCode
+    ]
+      .filter((p) => !!p && String(p).trim())
+      .join(', ');
+  }
+
+  get depositDate(): any {
+    return this.accountData?.timeline?.activatedOnDate ?? this.accountData?.timeline?.submittedOnDate ?? null;
+  }
+
+  get tenureLabel(): string {
+    const period = this.accountData?.depositPeriod;
+    const freq = this.accountData?.depositPeriodFrequency?.value;
+    if (period == null) return 'N/A';
+    return freq ? `${period} ${freq}` : String(period);
+  }
+
+  printCertificate() {
+    window.print();
+  }
+}

src/app/shared/file-upload/file-upload.component.ts

@@ -20,7 +20,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   templateUrl: './file-upload.component.html',
   styleUrls: ['./file-upload.component.scss'],
   imports: [
-    ...STANDALONE_SHARED_IMPORTS
+    ...STANDALONE_SHARED_IMPORTS,
+    NgStyle,
+    FaIconComponent
   ]
 })
 export class FileUploadComponent implements OnInit {

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.html

@@ -6,205 +6,37 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="ks-header">
-  <h1 mat-dialog-title class="ks-title">{{ 'labels.heading.Configure Keyboard Shortcuts' | translate }}</h1>
-  <button mat-icon-button (click)="openUsagePopup()" matTooltip="Shortcut Usage">
-    <mat-icon>analytics</mat-icon>
-  </button>
-</div>
+<h1 mat-dialog-title>{{ 'labels.heading.Keyboard Shortcuts' | translate }}</h1>
 
 <div mat-dialog-content>
-  @if (validationError) {
-    <div class="alert error margin-b-10">
-      {{ validationError }}
-    </div>
-  }
-
-  <table class="ks-table">
-    <thead>
-      <tr>
-        <th>{{ 'labels.inputs.Shortcut Name' | translate }}</th>
-        <th>{{ 'Key Combination' }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      @for (item of shortcuts; track item) {
-        <tr style="cursor: pointer" (click)="showShortcutDetails(item)">
-          <td [attr.colspan]="editingShortcutId === item.id || (!item.id && editingShortcutId === item.title) ? 2 : 1">
-            @if (editingShortcutId === item.id || (!item.id && editingShortcutId === item.title)) {
-              <!-- Edit Mode -->
-              <div class="layout-row-wrap layout-lt-md-column gap-2percent padding-y-10">
-                <h4 class="flex-100 margin-0 margin-b-10">Edit Shortcut</h4>
-
-                <mat-form-field class="ks-field flex-48">
-                  <mat-label>Shortcut Name</mat-label>
-                  <input matInput [(ngModel)]="editingShortcutData.title" [disabled]="!item.custom" />
-                </mat-form-field>
-
-                @if (item.custom || item.route) {
-                  <mat-form-field class="ks-field flex-48">
-                    <mat-label>URL / Route</mat-label>
-                    <input matInput [(ngModel)]="editingShortcutData.route" [disabled]="!item.custom" />
-                  </mat-form-field>
-                }
-
-                @if (item.custom) {
-                  <mat-form-field class="ks-field flex-48">
-                    <mat-label>Action</mat-label>
-                    <mat-select [(ngModel)]="editingShortcutData.action">
-                      <mat-option value="navigate">Navigate</mat-option>
-                    </mat-select>
-                  </mat-form-field>
-                }
-
-                <mat-form-field class="ks-field flex-48">
-                  <mat-label>Key Combination</mat-label>
-                  <input
-                    matInput
-                    readonly
-                    [value]="formatShortcut(editingShortcutData)"
-                    (keydown)="onKeyDown($event, editingShortcutData, true)"
-                    placeholder="Press keys..."
-                  />
-                </mat-form-field>
-
-                <div class="flex-100 layout-row justify-content-end gap-10px">
-                  <button mat-stroked-button class="ks-actions__cancel" (click)="cancelEditShortcut()">Cancel</button>
-                  <button
-                    mat-flat-button
-                    class="ks-actions__confirm ks-actions__confirm--basic"
-                    (click)="saveEditShortcut()"
-                  >
-                    Save
-                  </button>
-                </div>
-              </div>
-            } @else {
-              <!-- View Mode -->
-              <span style="text-transform: capitalize; padding: 8px 0; display: inline-block">{{ item.title }}</span>
-            }
-          </td>
-
-          @if (!(editingShortcutId === item.id || (!item.id && editingShortcutId === item.title))) {
-            <td (click)="$event.stopPropagation()">
-              <mat-form-field class="ks-field" subscriptSizing="dynamic" style="width: 250px">
-                <input
-                  matInput
-                  readonly
-                  [value]="formatShortcut(item)"
-                  (keydown)="onKeyDown($event, item)"
-                  (focus)="activeInputItem = item"
-                  (blur)="activeInputItem = null"
-                  placeholder="Click and press keys..."
-                  matTooltip="Click here and press your desired key combination"
-                />
-              </mat-form-field>
-            </td>
+  <div class="layout-column gap-2px">
+    @for (item of buttonConfig.buttonCombinations; track item) {
+      <mat-divider [inset]="true"></mat-divider>
+      <div class="flex-fill flex-50">
+        <span class="flex-50">
+          @if (item.ctrlKey) {
+            <span>
+              <span class="modifier-key">{{ 'labels.inputs.Ctrl' | translate }}</span> +
+            </span>
           }
-        </tr>
-      }
-    </tbody>
-  </table>
-
-  @if (isAddingNew) {
-    <div
-      class="layout-row-wrap layout-lt-md-column gap-2percent padding-20 mat-elevation-z1 margin-t-10"
-      style="background-color: white; border-radius: 4px"
-    >
-      <h4 class="flex-100 margin-0 margin-b-10">Add Custom Shortcut</h4>
-
-      <mat-form-field class="ks-field flex-48">
-        <mat-label>Shortcut Name</mat-label>
-        <input matInput [(ngModel)]="newShortcut.title" placeholder="e.g. Share Holder" />
-      </mat-form-field>
-
-      <mat-form-field class="ks-field flex-48">
-        <mat-label>URL / Route</mat-label>
-        <input matInput [(ngModel)]="newShortcut.route" placeholder="e.g. /shares/share-holders" />
-      </mat-form-field>
-
-      <mat-form-field class="ks-field flex-48">
-        <mat-label>Action</mat-label>
-        <mat-select [(ngModel)]="newShortcut.action">
-          <mat-option value="navigate">Navigate</mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field class="ks-field flex-48">
-        <mat-label>Key Combination</mat-label>
-        <input
-          matInput
-          readonly
-          [value]="formatShortcut(newShortcut)"
-          (keydown)="onKeyDown($event, newShortcut, true)"
-          placeholder="Press keys..."
-        />
-      </mat-form-field>
-
-      <div class="flex-100 layout-row justify-content-end gap-10px">
-        <button mat-stroked-button class="ks-actions__cancel" (click)="cancelAddShortcut()">Cancel</button>
-        <button mat-flat-button class="ks-actions__confirm ks-actions__confirm--basic" (click)="saveNewShortcut()">
-          Save
-        </button>
+          @if (item.shiftKey) {
+            <span>
+              <span class="modifier-key">{{ 'labels.inputs.Shift' | translate }}</span> +
+            </span>
+          }
+          @if (item.altKey) {
+            <span>
+              <span class="modifier-key">{{ 'labels.inputs.Alt' | translate }}</span> +
+            </span>
+          }
+          @if (item.key) {
+            <span>
+              <span class="modifier-key">{{ item.key }}</span></span
+            >
+          }
+        </span>
+        <span class="flex-50">{{ item.title }}</span>
       </div>
-    </div>
-  } @else {
-    <div class="margin-t-10">
-      <button mat-button color="primary" (click)="startAddShortcut()"><mat-icon>add</mat-icon> Add Shortcut</button>
-    </div>
-  }
+    }
+  </div>
 </div>
-
-<mat-dialog-actions class="ks-actions">
-  <button mat-flat-button class="ks-actions__confirm ks-actions__confirm--warn" (click)="resetToDefaults()">
-    Reset to Defaults
-  </button>
-  <div class="ks-actions__right">
-    <button mat-stroked-button class="ks-actions__cancel" (click)="cancel()">
-      {{ 'labels.button.cancel' | translate }}
-    </button>
-    <button
-      mat-flat-button
-      class="ks-actions__confirm ks-actions__confirm--basic"
-      (click)="save()"
-      [disabled]="validationError !== null"
-    >
-      {{ 'labels.button.save' | translate }}
-    </button>
-  </div>
-</mat-dialog-actions>
-
-<ng-template #shortcutDetailsTemplate let-data>
-  <h2 mat-dialog-title style="text-transform: capitalize">{{ data.title }}</h2>
-  <div mat-dialog-content>
-    <div class="layout-column gap-10px padding-y-10" style="font-size: 14px">
-      <div>
-        <strong>Shortcut Name:</strong> <br />
-        <span style="text-transform: capitalize">{{ data.title }}</span>
-      </div>
-      <div>
-        <strong>Key Combination:</strong> <br />
-        {{ formatShortcut(data) }}
-      </div>
-      <div>
-        <strong>Action:</strong> <br />
-        {{ data.action === 'navigate' ? 'Navigate' : data.action || data.id || 'Predefined' }}
-      </div>
-      @if (data.route) {
-        <div>
-          <strong>URL / Route:</strong> <br />
-          {{ data.route }}
-        </div>
-      }
-      <div>
-        <strong>Description:</strong> <br />
-        {{ getShortcutDescription(data) }}
-      </div>
-    </div>
-  </div>
-  <mat-dialog-actions align="end">
-    <button mat-button color="primary" (click)="startEditShortcut(data)">Edit</button>
-    <button mat-button color="warn" (click)="deleteShortcut(data)">Delete</button>
-    <button mat-button mat-dialog-close>Close</button>
-  </mat-dialog-actions>
-</ng-template>

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.scss

@@ -6,157 +6,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-$primary: #1a73e8;
-$gray-50: #f8f9fa;
-$gray-100: #f1f3f4;
-$gray-200: #e8eaed;
-$gray-500: #9aa0a6;
-$gray-700: #5f6368;
-$gray-900: #202124;
-$red: #ef4444;
-$navy: #0d1b2a;
-$white: #fff;
+.modifier-key {
+  border: 1px solid #0000004d;
+  padding: 0.3rem;
+  background: #f8f8f8;
+  color: #00000086;
+  font-weight: bold;
+  border-radius: 0.3rem;
+}
 
 .mat-divider.mat-divider-inset {
   margin-left: 0;
 }
-
-/* --- Header (from form-dialog) --- */
-.ks-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 24px 12px;
-  border-bottom: 1px solid $gray-200;
-}
-
-.ks-title {
-  margin: 0 !important;
-  padding: 0 !important;
-  font-size: 17px !important;
-  font-weight: 600 !important;
-  color: $gray-900;
-  letter-spacing: -0.2px;
-}
-
-/* --- Table Rows (from bank-calendar) --- */
-.ks-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12.5px;
-
-  thead th {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    background: #f1f5f9;
-    color: #475569;
-    text-align: left;
-    padding: 10px 14px;
-    font-size: 10.5px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    border-bottom: 1px solid #e2e8f0;
-  }
-
-  tbody td {
-    padding: 9px 14px;
-    border-bottom: 1px solid #f1f5f9;
-    vertical-align: middle;
-    color: $navy;
-  }
-
-  tbody tr {
-    transition: background 0.12s;
-
-    &:hover {
-      background: #f8fafc;
-    }
-  }
-}
-
-/* --- Inputs/Forms (from form-dialog) --- */
-.ks-field {
-  min-width: 0;
-
-  ::ng-deep {
-    .mat-mdc-form-field {
-      width: 100%;
-    }
-
-    .mat-mdc-text-field-wrapper {
-      background: $gray-50;
-      border-radius: 8px;
-    }
-
-    .mdc-text-field--outlined .mdc-notched-outline__leading,
-    .mdc-text-field--outlined .mdc-notched-outline__trailing,
-    .mdc-text-field--outlined .mdc-notched-outline__notch {
-      border-color: $gray-200;
-    }
-
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__leading,
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__trailing,
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__notch {
-      border-color: $primary;
-    }
-
-    .mat-mdc-floating-label {
-      font-size: 13px;
-      color: $gray-700;
-    }
-
-    input.mat-mdc-input-element {
-      font-size: 14px;
-      color: $gray-900;
-    }
-  }
-}
-
-/* --- Dialog Footer & Buttons (from confirmation-dialog) --- */
-.ks-actions {
-  padding: 14px 24px 20px !important;
-  border-top: 1px solid $gray-200;
-  margin: 0 !important;
-  display: flex !important;
-  justify-content: space-between !important;
-  align-items: center !important;
-  gap: 10px !important;
-
-  .ks-actions__right {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-  }
-
-  &__cancel {
-    border-radius: 8px !important;
-    font-size: 13px !important;
-    font-weight: 600 !important;
-    padding: 0 20px !important;
-    height: 38px !important;
-    color: $gray-700 !important;
-    border-color: $gray-200 !important;
-  }
-
-  &__confirm {
-    border-radius: 8px !important;
-    font-size: 13px !important;
-    font-weight: 600 !important;
-    padding: 0 24px !important;
-    height: 38px !important;
-    letter-spacing: 0.2px;
-    color: $white !important;
-
-    &--basic {
-      background: $primary !important;
-      box-shadow: 0 1px 3px rgb(26 115 232 / 30%) !important;
-    }
-
-    &--warn {
-      background: $red !important;
-      box-shadow: 0 1px 3px rgb(239 68 68 / 30%) !important;
-    }
-  }
-}

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.ts

@@ -6,31 +6,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Component, OnInit, inject, ViewChild } from '@angular/core';
-import {
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialog,
-  MatDialogClose,
-  MAT_DIALOG_DATA
-} from '@angular/material/dialog';
+/** Angular Imports */
+import { Component, OnInit, inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent } from '@angular/material/dialog';
+import { KeyboardShortcutsConfiguration } from '../../keyboards-shortcut-config';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { MatDivider } from '@angular/material/divider';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
-import { KeyboardShortcutService, ShortcutItem } from '../../core/services/keyboard-shortcut.service';
-import { FormsModule } from '@angular/forms';
-import { NgClass } from '@angular/common';
-import { MatButton } from '@angular/material/button';
-import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
-import { ShortcutUsageDialogComponent } from '../shortcut-usage-dialog/shortcut-usage-dialog.component';
-import { MatIcon } from '@angular/material/icon';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
-import { MatSelect } from '@angular/material/select';
-import { MatOption } from '@angular/material/core';
-
+/**
+ * Delete dialog component.
+ */
 @Component({
   selector: 'mifosx-keyboard-shortcuts-dialog',
   templateUrl: './keyboard-shortcuts-dialog.component.html',
@@ -40,291 +25,16 @@ import { MatOption } from '@angular/material/core';
     MatDialogTitle,
     CdkScrollable,
     MatDialogContent,
-    MatDialogActions,
-    MatDialogClose,
-    MatButton,
-    FormsModule,
-    MatIcon,
-    MatFormField,
-    MatLabel,
-    MatInput,
-    MatSelect,
-    MatOption
+    MatDivider
   ]
 })
 export class KeyboardShortcutsDialogComponent implements OnInit {
   dialogRef = inject<MatDialogRef<KeyboardShortcutsDialogComponent>>(MatDialogRef);
-  private keyboardShortcutService = inject(KeyboardShortcutService);
-  public data = inject(MAT_DIALOG_DATA, { optional: true });
 
-  shortcuts: ShortcutItem[] = [];
-  validationError: string | null = null;
-  activeInputItem: ShortcutItem | null = null;
-  displayedColumns: string[] = [
-    'title',
-    'keyCombination'
-  ];
-
-  isAddingNew = false;
-  newShortcut: Partial<ShortcutItem> = {};
-  activeNewInput = false;
-
-  editingShortcutId: string | null = null;
-  editingShortcutData: Partial<ShortcutItem> = {};
-  activeEditInput = false;
+  buttonConfig: KeyboardShortcutsConfiguration;
 
   ngOnInit() {
-    this.dialogRef.updateSize('800px');
-    this.keyboardShortcutService.activeShortcuts$.subscribe((shortcuts) => {
-      // Deep copy to allow editing without affecting the global state immediately
-      this.shortcuts = JSON.parse(JSON.stringify(shortcuts));
-    });
-
-    if (this.data && this.data.prefill) {
-      this.startAddShortcut();
-      this.newShortcut = {
-        ...this.newShortcut,
-        ...this.data.prefill
-      };
-    }
-  }
-
-  formatShortcut(item: Partial<ShortcutItem>): string {
-    if (!item || (!item.key && !item.ctrlKey && !item.shiftKey && !item.altKey)) return '';
-    const parts = [];
-    if (item.ctrlKey) parts.push('Ctrl');
-    if (item.shiftKey) parts.push('Shift');
-    if (item.altKey) parts.push('Alt');
-    if (item.key) parts.push(item.key.toUpperCase());
-    return parts.join(' + ');
-  }
-
-  onKeyDown(event: KeyboardEvent, item: Partial<ShortcutItem>, isNewOrEdit: boolean = false) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    // Ignore if only modifier keys are pressed
-    if ([
-        'Control',
-        'Shift',
-        'Alt',
-        'Meta'
-      ].includes(event.key)) {
-      return;
-    }
-
-    item.ctrlKey = event.ctrlKey;
-    item.shiftKey = event.shiftKey;
-    item.altKey = event.altKey;
-    item.key = event.key.toLowerCase();
-
-    if (!isNewOrEdit) {
-      this.activeInputItem = null;
-      this.validateShortcuts();
-    } else {
-      this.activeNewInput = false;
-      this.activeEditInput = false;
-    }
-  }
-
-  validateShortcuts() {
-    this.validationError = null;
-    const seen = new Set<string>();
-
-    for (const item of this.shortcuts) {
-      if (!item.key) {
-        this.validationError = `Invalid shortcut for ${item.title}: Key is required`;
-        return;
-      }
-
-      const keyStr = `${!!item.ctrlKey}-${!!item.shiftKey}-${!!item.altKey}-${item.key.toLowerCase()}`;
-      if (seen.has(keyStr)) {
-        this.validationError = `Duplicate shortcut detected: ${this.formatShortcut(item)}`;
-        return;
-      }
-      seen.add(keyStr);
-    }
-  }
-
-  startAddShortcut() {
-    this.isAddingNew = true;
-    this.newShortcut = {
-      title: '',
-      route: '',
-      key: '',
-      ctrlKey: false,
-      shiftKey: false,
-      altKey: false,
-      action: 'navigate',
-      custom: true,
-      id: 'custom_' + Date.now()
-    };
-    this.validationError = null;
-  }
-
-  cancelAddShortcut() {
-    this.isAddingNew = false;
-    this.validationError = null;
-  }
-
-  private dialog = inject(MatDialog);
-
-  @ViewChild('shortcutDetailsTemplate') shortcutDetailsTemplate: any;
-  private detailsDialogRef: MatDialogRef<any> | null = null;
-
-  showShortcutDetails(item: ShortcutItem) {
-    this.detailsDialogRef = this.dialog.open(this.shortcutDetailsTemplate, {
-      data: item,
-      width: '400px'
-    });
-  }
-
-  openUsagePopup() {
-    this.dialog.open(ShortcutUsageDialogComponent, {
-      width: '600px'
-    });
-  }
-
-  getShortcutDescription(item: Partial<ShortcutItem>): string {
-    if (item.custom) {
-      if (item.action === 'navigate') {
-        return `Navigates to the ${item.title} page.`;
-      }
-      return `Executes the ${item.action} action.`;
-    } else {
-      switch (item.id) {
-        case 'logout':
-          return 'Logs you out of the application securely.';
-        case 'help':
-          return 'Opens the user manual and help documentation.';
-        case 'runReport':
-          return 'Executes the currently selected report.';
-        case 'cancel':
-          return 'Cancels the current operation or form.';
-        case 'submit':
-          return 'Submits the current form or dialog.';
-        default:
-          return `Navigates to the predefined ${item.title} feature.`;
-      }
-    }
-  }
-
-  saveNewShortcut() {
-    if (this.newShortcut.action === 'navigate' && this.newShortcut.route) {
-      this.newShortcut.route = this.keyboardShortcutService.normalizeRouteStr(this.newShortcut.route);
-    }
-    if (this.validateSingleShortcut(this.newShortcut, null)) {
-      this.shortcuts.push(this.newShortcut as ShortcutItem);
-      this.isAddingNew = false;
-      this.validateShortcuts();
-      if (!this.validationError) {
-        this.keyboardShortcutService.updateShortcuts(this.shortcuts);
-      }
-    }
-  }
-
-  startEditShortcut(item: ShortcutItem) {
-    if (this.detailsDialogRef) {
-      this.detailsDialogRef.close();
-      this.detailsDialogRef = null;
-    }
-    this.editingShortcutId = item.id || null;
-    this.editingShortcutData = { ...item };
-    this.validationError = null;
-  }
-
-  cancelEditShortcut() {
-    this.editingShortcutId = null;
-    this.validationError = null;
-  }
-
-  saveEditShortcut() {
-    if (this.editingShortcutData.action === 'navigate' && this.editingShortcutData.route) {
-      this.editingShortcutData.route = this.keyboardShortcutService.normalizeRouteStr(this.editingShortcutData.route);
-    }
-    if (this.validateSingleShortcut(this.editingShortcutData, this.editingShortcutId)) {
-      const index = this.shortcuts.findIndex((s) => s.id === this.editingShortcutId);
-      if (index > -1) {
-        this.shortcuts[index] = { ...this.editingShortcutData } as ShortcutItem;
-      }
-      this.editingShortcutId = null;
-      this.validateShortcuts();
-      if (!this.validationError) {
-        this.keyboardShortcutService.updateShortcuts(this.shortcuts);
-      }
-    }
-  }
-
-  deleteShortcut(item: ShortcutItem) {
-    if (this.detailsDialogRef) {
-      this.detailsDialogRef.close();
-      this.detailsDialogRef = null;
-    }
-    this.shortcuts = this.shortcuts.filter((s) => (s.id ? s.id !== item.id : s.title !== item.title));
-    this.validateShortcuts();
-    if (!this.validationError) {
-      this.keyboardShortcutService.updateShortcuts(this.shortcuts);
-    }
-  }
-
-  validateSingleShortcut(item: Partial<ShortcutItem>, excludeId: string | null): boolean {
-    if (!item.title || item.title.trim() === '') {
-      this.validationError = 'Shortcut Name is required';
-      return false;
-    }
-    if (!item.key) {
-      this.validationError = 'Key combination is required';
-      return false;
-    }
-    if (item.action === 'navigate' && (!item.route || item.route.trim() === '')) {
-      this.validationError = 'URL / Route is required';
-      return false;
-    }
-
-    const keyStr = `${!!item.ctrlKey}-${!!item.shiftKey}-${!!item.altKey}-${item.key.toLowerCase()}`;
-    const seen = new Set<string>();
-
-    for (const s of this.shortcuts) {
-      if (excludeId && s.id === excludeId) continue;
-      seen.add(`${!!s.ctrlKey}-${!!s.shiftKey}-${!!s.altKey}-${s.key.toLowerCase()}`);
-    }
-
-    if (seen.has(keyStr)) {
-      this.validationError = `Duplicate shortcut detected: ${this.formatShortcut(item)}`;
-      return false;
-    }
-
-    this.validationError = null;
-    return true;
-  }
-
-  save() {
-    this.validateShortcuts();
-    if (!this.validationError) {
-      this.keyboardShortcutService.updateShortcuts(this.shortcuts);
-      this.dialogRef.close(true);
-    }
-  }
-
-  resetToDefaults() {
-    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
-      data: {
-        heading: 'Reset Keyboard Shortcuts',
-        dialogContext:
-          'Are you sure you want to reset all keyboard shortcuts to their default configuration? This will remove all custom shortcuts and restore default keys.',
-        type: 'Warn'
-      }
-    });
-
-    dialogRef.afterClosed().subscribe((confirm: boolean) => {
-      if (confirm) {
-        this.keyboardShortcutService.resetToDefaults();
-        this.dialogRef.close(true);
-      }
-    });
-  }
-
-  cancel() {
-    this.dialogRef.close(false);
+    this.dialogRef.updateSize(`800px`);
+    this.buttonConfig = new KeyboardShortcutsConfiguration();
   }
 }

src/app/shared/shortcut-suggestion-snackbar/shortcut-suggestion-snackbar.component.html

@@ -1,22 +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="suggestion-container">
-  <div class="suggestion-text">
-    <strong
-      >💡 You frequently use <span style="text-transform: capitalize">{{ data.pageName }}</span></strong
-    ><br />
-    Would you like to create a keyboard shortcut for faster access?
-  </div>
-  <div class="suggestion-actions margin-t-10" style="display: flex; justify-content: flex-end; gap: 8px">
-    <button mat-button style="color: #bbb" (click)="dismiss()">Not Now</button>
-    <button mat-button style="color: #fff; background-color: rgba(255, 255, 255, 0.1)" (click)="createShortcut()">
-      Create Shortcut
-    </button>
-  </div>
-</div>

src/app/shared/shortcut-suggestion-snackbar/shortcut-suggestion-snackbar.component.scss

@@ -1,19 +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/.
- */
-
-.suggestion-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.suggestion-text {
-  font-size: 14px;
-  line-height: 1.4;
-  color: #fff;
-}

src/app/shared/shortcut-suggestion-snackbar/shortcut-suggestion-snackbar.component.ts

@@ -1,34 +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, inject } from '@angular/core';
-import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
-import { MatButton } from '@angular/material/button';
-import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
-
-@Component({
-  selector: 'mifosx-shortcut-suggestion-snackbar',
-  templateUrl: './shortcut-suggestion-snackbar.component.html',
-  styleUrls: ['./shortcut-suggestion-snackbar.component.scss'],
-  imports: [
-    ...STANDALONE_SHARED_IMPORTS,
-    MatButton
-  ]
-})
-export class ShortcutSuggestionSnackbarComponent {
-  snackBarRef = inject(MatSnackBarRef<ShortcutSuggestionSnackbarComponent>);
-  data: { pageName: string; route: string } = inject(MAT_SNACK_BAR_DATA);
-
-  createShortcut() {
-    this.snackBarRef.dismissWithAction();
-  }
-
-  dismiss() {
-    this.snackBarRef.dismiss();
-  }
-}

src/app/shared/shortcut-usage-dialog/inline-create-shortcut-dialog.component.html

@@ -1,55 +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="ks-header">
-  <h1 mat-dialog-title class="ks-title">Create Shortcut</h1>
-</div>
-
-<div mat-dialog-content>
-  @if (validationError) {
-    <div class="alert error margin-b-10" style="color: #ef4444; margin-bottom: 15px; font-size: 13px">
-      {{ validationError }}
-    </div>
-  }
-
-  <div class="layout-column gap-10px" style="padding-top: 10px">
-    <mat-form-field class="ks-field" style="width: 100%">
-      <mat-label>Shortcut Name</mat-label>
-      <input matInput [(ngModel)]="newShortcut.title" />
-    </mat-form-field>
-
-    <mat-form-field class="ks-field" style="width: 100%">
-      <mat-label>Key Combination</mat-label>
-      <input
-        matInput
-        readonly
-        [value]="formatShortcut(newShortcut)"
-        (keydown)="onKeyDown($event)"
-        placeholder="Click and press keys..."
-      />
-    </mat-form-field>
-
-    <mat-form-field class="ks-field" style="width: 100%">
-      <mat-label>Route</mat-label>
-      <input matInput [ngModel]="newShortcut.route" disabled="true" />
-    </mat-form-field>
-
-    <mat-form-field class="ks-field" style="width: 100%">
-      <mat-label>Action</mat-label>
-      <input matInput [ngModel]="'Navigate'" disabled="true" />
-    </mat-form-field>
-  </div>
-</div>
-
-<mat-dialog-actions class="ks-actions">
-  <div style="flex: 1"></div>
-  <div class="ks-actions__right">
-    <button mat-stroked-button class="ks-actions__cancel" (click)="cancel()">Cancel</button>
-    <button mat-flat-button class="ks-actions__confirm ks-actions__confirm--basic" (click)="save()">Save</button>
-  </div>
-</mat-dialog-actions>

src/app/shared/shortcut-usage-dialog/inline-create-shortcut-dialog.component.ts

@@ -1,128 +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, inject } from '@angular/core';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions
-} from '@angular/material/dialog';
-import { KeyboardShortcutService, ShortcutItem } from '../../core/services/keyboard-shortcut.service';
-import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
-import { FormsModule } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
-import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
-import { take } from 'rxjs/operators';
-
-@Component({
-  selector: 'mifosx-inline-create-shortcut-dialog',
-  templateUrl: './inline-create-shortcut-dialog.component.html',
-  styleUrls: ['../keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.scss'],
-  imports: [
-    ...STANDALONE_SHARED_IMPORTS,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatButton,
-    FormsModule,
-    MatFormField,
-    MatLabel,
-    MatInput
-  ]
-})
-export class InlineCreateShortcutDialogComponent {
-  dialogRef = inject<MatDialogRef<InlineCreateShortcutDialogComponent>>(MatDialogRef);
-  data = inject(MAT_DIALOG_DATA);
-  private keyboardShortcutService = inject(KeyboardShortcutService);
-
-  newShortcut: Partial<ShortcutItem> = {
-    title: this.data.pageName,
-    route: this.data.route,
-    action: 'navigate',
-    key: '',
-    ctrlKey: false,
-    shiftKey: false,
-    altKey: false,
-    custom: true,
-    id: 'custom_' + Date.now()
-  };
-
-  validationError: string | null = null;
-
-  formatShortcut(item: Partial<ShortcutItem>): string {
-    if (!item || (!item.key && !item.ctrlKey && !item.shiftKey && !item.altKey)) return '';
-    const parts = [];
-    if (item.ctrlKey) parts.push('Ctrl');
-    if (item.shiftKey) parts.push('Shift');
-    if (item.altKey) parts.push('Alt');
-    if (item.key) parts.push(item.key.toUpperCase());
-    return parts.join(' + ');
-  }
-
-  onKeyDown(event: KeyboardEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    // Ignore if only modifier keys are pressed
-    if ([
-        'Control',
-        'Shift',
-        'Alt',
-        'Meta'
-      ].includes(event.key)) {
-      return;
-    }
-
-    this.newShortcut.ctrlKey = event.ctrlKey;
-    this.newShortcut.shiftKey = event.shiftKey;
-    this.newShortcut.altKey = event.altKey;
-    this.newShortcut.key = event.key.toLowerCase();
-    this.validationError = null;
-  }
-
-  save() {
-    if (!this.newShortcut.title || this.newShortcut.title.trim() === '') {
-      this.validationError = 'Shortcut Name is required';
-      return;
-    }
-    if (!this.newShortcut.key) {
-      this.validationError = 'Key combination is required';
-      return;
-    }
-
-    const keyStr = `${!!this.newShortcut.ctrlKey}-${!!this.newShortcut.shiftKey}-${!!this.newShortcut.altKey}-${this.newShortcut.key.toLowerCase()}`;
-
-    this.keyboardShortcutService.activeShortcuts$.pipe(take(1)).subscribe((shortcuts) => {
-      // Check for duplicates
-      const seen = new Set<string>();
-      for (const s of shortcuts) {
-        seen.add(`${!!s.ctrlKey}-${!!s.shiftKey}-${!!s.altKey}-${s.key.toLowerCase()}`);
-      }
-
-      if (seen.has(keyStr)) {
-        this.validationError = `Duplicate shortcut detected: ${this.formatShortcut(this.newShortcut)}`;
-        return;
-      }
-
-      // Add and save
-      if (this.newShortcut.route) {
-        this.newShortcut.route = this.keyboardShortcutService.normalizeRouteStr(this.newShortcut.route);
-      }
-      shortcuts.push(this.newShortcut as ShortcutItem);
-      this.keyboardShortcutService.updateShortcuts(shortcuts);
-      this.dialogRef.close(true);
-    });
-  }
-
-  cancel() {
-    this.dialogRef.close(false);
-  }
-}

src/app/shared/shortcut-usage-dialog/shortcut-usage-dialog.component.html

@@ -1,58 +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/.
--->
-
-<h1 mat-dialog-title>Shortcut Usage</h1>
-
-<div mat-dialog-content>
-  <table mat-table [dataSource]="usageData" class="mat-elevation-z1" style="width: 100%; margin-top: 10px">
-    <!-- Page Column -->
-    <ng-container matColumnDef="page">
-      <th mat-header-cell *matHeaderCellDef>Page</th>
-      <td mat-cell *matCellDef="let item">
-        <div>{{ item.pageName }}</div>
-        <div style="font-size: 11px; color: #888">{{ item.route }}</div>
-      </td>
-    </ng-container>
-
-    <!-- Visits Column -->
-    <ng-container matColumnDef="visits">
-      <th mat-header-cell *matHeaderCellDef style="text-align: center">Visits</th>
-      <td mat-cell *matCellDef="let item" style="text-align: center">
-        <span style="font-weight: 500">{{ item.visits }}</span>
-      </td>
-    </ng-container>
-
-    <!-- Status / Action Column -->
-    <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef style="text-align: right">Status / Action</th>
-      <td mat-cell *matCellDef="let item" style="text-align: right">
-        @if (item.hasShortcut) {
-          <span style="color: #4caf50; font-size: 13px; font-weight: 500">✓ Shortcut exists</span>
-        } @else if (item.visits >= 5) {
-          <span style="color: #ff9800; font-size: 12px; margin-right: 10px; font-weight: 500">Frequently Used</span>
-          <button mat-button color="primary" (click)="createShortcut(item)">Create Shortcut</button>
-        } @else {
-          <span style="color: #aaa; font-size: 12px">Not enough visits</span>
-        }
-      </td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-  </table>
-
-  @if (usageData.length === 0) {
-    <div style="padding: 20px; text-align: center; color: #888; border: 1px solid #eee; border-top: none">
-      No usage data collected yet.
-    </div>
-  }
-</div>
-
-<mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>Close</button>
-</mat-dialog-actions>

src/app/shared/shortcut-usage-dialog/shortcut-usage-dialog.component.scss

@@ -1,9 +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/.
- */
-
-// Usage dialog styling

src/app/shared/shortcut-usage-dialog/shortcut-usage-dialog.component.ts

@@ -1,92 +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 {
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-  MatDialog
-} from '@angular/material/dialog';
-import { ShortcutSuggestionService } from '../../core/services/shortcut-suggestion.service';
-import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
-import { MatButton } from '@angular/material/button';
-import {
-  MatTable,
-  MatColumnDef,
-  MatHeaderCellDef,
-  MatHeaderCell,
-  MatCellDef,
-  MatCell,
-  MatHeaderRowDef,
-  MatHeaderRow,
-  MatRowDef,
-  MatRow
-} from '@angular/material/table';
-import { InlineCreateShortcutDialogComponent } from './inline-create-shortcut-dialog.component';
-
-@Component({
-  selector: 'mifosx-shortcut-usage-dialog',
-  templateUrl: './shortcut-usage-dialog.component.html',
-  styleUrls: ['./shortcut-usage-dialog.component.scss'],
-  imports: [
-    ...STANDALONE_SHARED_IMPORTS,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatDialogClose,
-    MatButton,
-    MatTable,
-    MatColumnDef,
-    MatHeaderCellDef,
-    MatHeaderCell,
-    MatCellDef,
-    MatCell,
-    MatHeaderRowDef,
-    MatHeaderRow,
-    MatRowDef,
-    MatRow
-  ]
-})
-export class ShortcutUsageDialogComponent implements OnInit {
-  dialogRef = inject<MatDialogRef<ShortcutUsageDialogComponent>>(MatDialogRef);
-  private shortcutSuggestionService = inject(ShortcutSuggestionService);
-  private dialog = inject(MatDialog);
-
-  usageData: { route: string; pageName: string; visits: number; hasShortcut: boolean }[] = [];
-  displayedColumns: string[] = [
-    'page',
-    'visits',
-    'status'
-  ];
-
-  ngOnInit() {
-    this.refreshData();
-  }
-
-  refreshData() {
-    this.usageData = this.shortcutSuggestionService.getUsageData();
-  }
-
-  createShortcut(item: { pageName: string; route: string }) {
-    const inlineDialogRef = this.dialog.open(InlineCreateShortcutDialogComponent, {
-      data: item,
-      width: '400px',
-      disableClose: true
-    });
-
-    inlineDialogRef.afterClosed().subscribe((saved) => {
-      if (saved) {
-        this.shortcutSuggestionService.markAsDismissed(item.route);
-        this.refreshData(); // update the table so the checkmark appears!
-      }
-    });
-  }
-}

src/app/sponsor-dd-reconciliation/reco-batch-list/reco-batch-list.component.ts

@@ -25,7 +25,8 @@ import { SponsorDDReconciliationService } from '../sponsor-dd-reconciliation.ser
     MatCardModule,
     MatTableModule,
     MatButtonModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    FaIconComponent
   ],
   templateUrl: './reco-batch-list.component.html',
   styles: [

src/app/sponsor-dd/dd-inventory-list/dd-inventory-list.component.ts

@@ -34,7 +34,8 @@ import { SponsorDDService } from '../sponsor-dd.service';
     MatTableModule,
     MatButtonModule,
     MatDialogModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    FaIconComponent
   ],
   templateUrl: './dd-inventory-list.component.html',
   styles: [

src/app/sponsor-dd/dd-list/dd-list.component.ts

@@ -39,7 +39,8 @@ import { SponsorDDService } from '../sponsor-dd.service';
     MatDialogModule,
     MatSnackBarModule,
     MatFormFieldModule,
-    MatInputModule
+    MatInputModule,
+    FaIconComponent
   ],
   templateUrl: './dd-list.component.html',
   styles: [

src/app/system/roles-and-permissions/add-role/add-role.component.ts

@@ -13,7 +13,6 @@ import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
 /** Custom Services */
 import { SystemService } from '../../system.service';
-import { AlertService } from 'app/core/alert/alert.service';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /** Custom Service Zitadel */
@@ -37,7 +36,6 @@ export class AddRoleComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private authService = inject(AuthService);
-  private alertService = inject(AlertService);
 
   /** Role form. */
   roleForm: UntypedFormGroup;
@@ -71,12 +69,7 @@ export class AddRoleComponent implements OnInit {
    */
   submit() {
     this.systemService.createRole(this.roleForm.value).subscribe((response: any) => {
-      if (response?.rollbackTransaction) {
-        this.alertService.alert({
-          type: 'Success',
-          message: 'Role creation request submitted successfully for approval.'
-        });
-      } else if (environment.OIDC.oidcServerEnabled) {
+      if (environment.OIDC.oidcServerEnabled) {
         this.authService.createRole(response.resourceId, this.roleForm.value.name, this.roleForm.value.description);
       }
       this.router.navigate(['../'], { relativeTo: this.route });