saving , current and RD account code update

2026-04-22 18:28:14 +05:30
parent e9a9377148
commit fc1c5126fc
44 changed files with 5516 additions and 1552 deletions
@@ -34,6 +34,7 @@
      <fa-icon icon="eye" size="sm"></fa-icon>
    </ng-template>

+    <!-- Step 1: Details -->
    <mat-step [stepControl]="currentAccountDetailsForm">
      <ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>

@@ -44,14 +45,43 @@
      </mifosx-current-account-details-step>
    </mat-step>

-    <mat-step [stepControl]="currentAccountTermsForm">
-      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
+    <!-- Step 2: Currency -->
+    <mat-step>
+      <ng-template matStepLabel>CURRENCY</ng-template>

-      <mifosx-current-account-terms-step
+      <mifosx-current-account-currency-step
        [currentAccountProductTemplate]="currentAccountProductTemplate"
-      ></mifosx-current-account-terms-step>
+      ></mifosx-current-account-currency-step>
    </mat-step>

+    <!-- Step 3: Term (Interest Rate) -->
+    <mat-step [stepControl]="currentAccountTermForm">
+      <ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
+
+      <mifosx-current-account-term-step
+        [currentAccountProductTemplate]="currentAccountProductTemplate"
+      ></mifosx-current-account-term-step>
+    </mat-step>
+
+    <!-- Step 4: Settings -->
+    <mat-step>
+      <ng-template matStepLabel>SETTINGS</ng-template>
+
+      <mifosx-current-account-settings-step
+        [currentAccountProductTemplate]="currentAccountProductTemplate"
+      ></mifosx-current-account-settings-step>
+    </mat-step>
+
+    <!-- Step 5: Digital -->
+    <mat-step>
+      <ng-template matStepLabel>DIGITAL</ng-template>
+
+      <mifosx-current-account-digital-step
+        [currentAccountProductTemplate]="currentAccountProductTemplate"
+      ></mifosx-current-account-digital-step>
+    </mat-step>
+
+    <!-- Step 6: Charges -->
    <mat-step>
      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>

@@ -61,14 +91,25 @@
        [currencyCode]="currentAccountTermsForm.get('currencyCode')"
      >
      </mifosx-current-account-charges-step>
+
+      <!-- Hidden terms step to keep currencyCode form populated -->
+      <div style="display: none">
+        <mifosx-current-account-terms-step
+          [currentAccountProductTemplate]="currentAccountProductTemplate"
+          [currentAccountTemplate]="currentAccountTemplate"
+        ></mifosx-current-account-terms-step>
+      </div>
    </mat-step>

+    <!-- Step 7: Preview -->
    @if (currentAccountFormValid) {
      <mat-step completed>
        <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
        <mifosx-current-account-preview-step
          [currentAccountProductTemplate]="currentAccountProductTemplate"
          [currentAccountTemplate]="currentAccountTemplate"
+          [currentAccountTermForm]="currentAccountTermForm"
+          [currentAccountSettingsForm]="currentAccountSettingsForm"
          [currentAccountTermsForm]="currentAccountTermsForm"
          [currentAccount]="currentAccount"
          (submitEvent)="submit()"
@@ -13,7 +13,11 @@ import { Router, ActivatedRoute } from '@angular/router';
 /** Custom Components */
 import { CurrentAccountDetailsStepComponent } from '../current-account-stepper/current-account-details-step/current-account-details-step.component';
 import { CurrentAccountTermsStepComponent } from '../current-account-stepper/current-account-terms-step/current-account-terms-step.component';
+import { CurrentAccountTermStepComponent } from '../current-account-stepper/current-account-term-step/current-account-term-step.component';
+import { CurrentAccountSettingsStepComponent } from '../current-account-stepper/current-account-settings-step/current-account-settings-step.component';
 import { CurrentAccountChargesStepComponent } from '../current-account-stepper/current-account-charges-step/current-account-charges-step.component';
+import { CurrentAccountCurrencyStepComponent } from '../current-account-stepper/current-account-currency-step/current-account-currency-step.component';
+import { CurrentAccountDigitalStepComponent } from '../current-account-stepper/current-account-digital-step/current-account-digital-step.component';

 /** Custom Services */
 import { CurrentAccountsService } from '../current-accounts.service';
@@ -39,6 +43,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
    MatStep,
    MatStepLabel,
    CurrentAccountDetailsStepComponent,
+    CurrentAccountCurrencyStepComponent,
+    CurrentAccountTermStepComponent,
+    CurrentAccountSettingsStepComponent,
+    CurrentAccountDigitalStepComponent,
    CurrentAccountTermsStepComponent,
    CurrentAccountChargesStepComponent,
    CurrentAccountPreviewStepComponent
@@ -59,21 +67,19 @@ export class CreateCurrentAccountComponent {
  /** Current Account Details Step */
  @ViewChild(CurrentAccountDetailsStepComponent, { static: true })
  currentAccountDetailsStep: CurrentAccountDetailsStepComponent;
-  /** Current Account Terms Step */
+  /** Current Account Term Step (new) */
+  @ViewChild(CurrentAccountTermStepComponent, { static: true })
+  currentAccountTermStep: CurrentAccountTermStepComponent;
+  /** Current Account Settings Step */
+  @ViewChild(CurrentAccountSettingsStepComponent, { static: true })
+  currentAccountSettingsStep: CurrentAccountSettingsStepComponent;
+  /** Current Account Terms Step (old — kept for currencyCode access) */
  @ViewChild(CurrentAccountTermsStepComponent, { static: true })
  currentAccountTermsStep: CurrentAccountTermsStepComponent;
  /** Current Account Charges Step */
  @ViewChild(CurrentAccountChargesStepComponent, { static: true })
  currentAccountChargesStep: CurrentAccountChargesStepComponent;

-  /**
-   * Fetches current account template from `resolve`
-   * @param {ActivatedRoute} route Activated Route
-   * @param {Router} router Router
-   * @param {Dates} dateUtils Date Utils
-   * @param {CurrentAccountsService} currentAccountsService Current Accounts Service
-   * @param {SettingsService} settingsService Settings Service
-   */
  constructor() {
    this.route.data.subscribe((data: { currentAccountTemplate: any }) => {
      this.currentAccountTemplate = data.currentAccountTemplate;
@@ -82,7 +88,6 @@ export class CreateCurrentAccountComponent {

  /**
   * Sets current account product template.
-   * @param {any} $event API response
   */
  setTemplate($event: any) {
    this.currentAccountProductTemplate = $event;
@@ -96,7 +101,21 @@ export class CreateCurrentAccountComponent {
  }

  /**
-   * Retrieves current account terms form.
+   * Retrieves new term form (interest rate).
+   */
+  get currentAccountTermForm() {
+    return this.currentAccountTermStep.currentAccountTermForm;
+  }
+
+  /**
+   * Retrieves settings form.
+   */
+  get currentAccountSettingsForm() {
+    return this.currentAccountSettingsStep.currentAccountSettingsForm;
+  }
+
+  /**
+   * Retrieves old terms form — still used for currencyCode by charges step.
   */
  get currentAccountTermsForm() {
    return this.currentAccountTermsStep.currentAccountTermsForm;
@@ -106,7 +125,7 @@ export class CreateCurrentAccountComponent {
   * Checks validity of overall current account form.
   */
  get currentAccountFormValid() {
-    return this.currentAccountDetailsForm.valid && this.currentAccountTermsForm.valid;
+    return this.currentAccountDetailsForm.valid && this.currentAccountTermForm.valid;
  }

  /**
@@ -115,16 +134,16 @@ export class CreateCurrentAccountComponent {
  get currentAccount() {
    return {
      ...this.currentAccountDetailsStep.currentAccountDetails,
-      ...this.currentAccountTermsStep.currentAccountTerms,
+      ...this.currentAccountTermStep.currentAccountTerms,
+      ...this.currentAccountSettingsStep.currentAccountSettings,
      ...this.currentAccountChargesStep.currentAccountCharges
    };
  }

  /**
-   * Creates a new share account.
+   * Creates a new current account.
   */
  submit() {
-    // TODO: Update once language and date settings are setup
    const locale = this.settingsService.language.code;
    const dateFormat = this.settingsService.dateFormat;
    const monthDayFormat = 'dd MMMM';
@@ -7,7 +7,7 @@
 */

 /** Angular Imports */
-import { Component, OnInit, OnChanges, Input, inject } from '@angular/core';
+import { Component, OnInit, Input, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { UntypedFormControl } from '@angular/forms';

@@ -69,13 +69,27 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
    FormatNumberPipe
  ]
 })
-export class CurrentAccountChargesStepComponent implements OnInit, OnChanges {
+export class CurrentAccountChargesStepComponent implements OnInit {
  private dialog = inject(MatDialog);
  private dateUtils = inject(Dates);
  private translateService = inject(TranslateService);

  /** Current Account Product Template */
-  @Input() currentAccountProductTemplate: any;
+  private _currentAccountProductTemplate: any;
+  @Input()
+  set currentAccountProductTemplate(value: any) {
+    this._currentAccountProductTemplate = value;
+    if (value) {
+      this.chargeData = value.chargeOptions || [];
+      // Only pre-populate from product template for new accounts
+      if (!this.currentAccountTemplate?.id) {
+        this.chargesDataSource = (value.charges || []).map((charge: any) => ({ ...charge, id: charge.chargeId }));
+      }
+    }
+  }
+  get currentAccountProductTemplate(): any {
+    return this._currentAccountProductTemplate;
+  }
  /** Current Account Template */
  @Input() currentAccountTemplate: any;
  /** Currency Code */
@@ -88,8 +102,6 @@ export class CurrentAccountChargesStepComponent implements OnInit, OnChanges {
  chargesDataSource: {}[] = [];
  /** Component is pristine if there has been no changes by user interaction */
  pristine = true;
-  /** For Edit Current Account Form */
-  isChargesPatched = false;
  /** Display columns for charges table */
  displayedColumns: string[] = [
    'name',
@@ -114,22 +126,10 @@ export class CurrentAccountChargesStepComponent implements OnInit, OnChanges {
  ];

  ngOnInit() {
-    if (this.currentAccountTemplate) {
-      if (!this.isChargesPatched && this.currentAccountTemplate.charges) {
-        this.chargesDataSource =
-          this.currentAccountProductTemplate.charges.map((charge: any) => ({ ...charge, id: charge.chargeId })) || [];
-        this.isChargesPatched = true;
-      } else {
-        this.chargesDataSource = [];
-      }
-    }
-  }
-
-  ngOnChanges() {
-    if (this.currentAccountProductTemplate) {
-      this.chargeData = this.currentAccountProductTemplate.chargeOptions;
+    if (this.currentAccountTemplate?.id && this.currentAccountTemplate?.charges) {
+      // Edit mode: load saved charges from existing account
      this.chargesDataSource =
-        this.currentAccountProductTemplate.charges.map((charge: any) => ({ ...charge, id: charge.chargeId })) || [];
+        this.currentAccountTemplate.charges.map((charge: any) => ({ ...charge, id: charge.chargeId })) || [];
    }
  }

@@ -0,0 +1,79 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="sac-section">
+  <div class="sac-section__header">
+    <i class="fas fa-coins"></i>
+    <span>Currency &amp; Account Status Configuration</span>
+  </div>
+  <div class="sac-body">
+    <div class="sac-grid">
+      <mat-form-field appearance="outline" class="sac-field">
+        <mat-label>Currency</mat-label>
+        <input matInput [value]="currentAccountProductTemplate?.currency?.name || ''" readonly />
+        <mat-hint>Inherited from selected product</mat-hint>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline" class="sac-field">
+        <mat-label>Decimal Places</mat-label>
+        <input matInput [value]="currentAccountProductTemplate?.currency?.decimalPlaces || ''" readonly />
+        <mat-hint>Inherited from selected product</mat-hint>
+      </mat-form-field>
+    </div>
+
+    <div class="sac-alert">
+      <div class="sac-alert__content">
+        <h4>Dormancy Alert</h4>
+        <p>Enable automated notifications when an account becomes inactive based on product rules.</p>
+      </div>
+      <span class="sac-badge" [class.sac-badge--yes]="currentAccountProductTemplate?.dormancyAlert">
+        {{ currentAccountProductTemplate?.dormancyAlert ? 'Yes' : 'No' }}
+      </span>
+    </div>
+
+    <div class="sac-alert">
+      <div class="sac-alert__content">
+        <h4>Balance Swap Option</h4>
+        <p>Allows balance to be swapped or transferred between linked accounts as per product configuration.</p>
+      </div>
+      <span class="sac-badge" [class.sac-badge--yes]="currentAccountProductTemplate?.balanceSwapOption">
+        {{ currentAccountProductTemplate?.balanceSwapOption ? 'Yes' : 'No' }}
+      </span>
+    </div>
+
+    <div class="sac-alert">
+      <div class="sac-alert__content">
+        <h4>MSME</h4>
+        <p>Account is categorized under the Micro, Small and Medium Enterprises segment.</p>
+      </div>
+      <span class="sac-badge" [class.sac-badge--yes]="currentAccountProductTemplate?.msme">
+        {{ currentAccountProductTemplate?.msme ? 'Yes' : 'No' }}
+      </span>
+    </div>
+
+    <div class="sac-alert">
+      <div class="sac-alert__content">
+        <h4>Nomination Facility</h4>
+        <p>Allow account holders to designate individuals to receive funds in the event of account holder's death.</p>
+      </div>
+      <span class="sac-badge" [class.sac-badge--yes]="currentAccountProductTemplate?.nominationFacility">
+        {{ currentAccountProductTemplate?.nominationFacility ? 'Yes' : 'No' }}
+      </span>
+    </div>
+
+    <div class="sac-alert">
+      <div class="sac-alert__content">
+        <h4>Auto Debit Facility</h4>
+        <p>Enable automatic debit instructions for recurring payments linked to this account.</p>
+      </div>
+      <span class="sac-badge" [class.sac-badge--yes]="currentAccountProductTemplate?.autoDebitFacility">
+        {{ currentAccountProductTemplate?.autoDebitFacility ? 'Yes' : 'No' }}
+      </span>
+    </div>
+  </div>
+</div>
@@ -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/.
+ */
+
+$accent: #0ea5e9;
+$border: #e2e8f0;
+$gray-50: #f8f9fa;
+$gray-200: #e8eaed;
+$gray-900: #202124;
+
+.sac-section {
+  border: 1px solid $border;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+
+  & + & {
+    margin-top: 16px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 24px;
+    background: $gray-50;
+    border-bottom: 1px solid $gray-200;
+
+    i {
+      font-size: 14px;
+      color: $accent;
+    }
+
+    span {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: $gray-900;
+    }
+  }
+}
+
+.sac-body {
+  background: #fff;
+}
+
+.sac-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px 16px;
+  padding: 16px 24px;
+
+  @media (width <= 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.sac-field {
+  width: 100%;
+}
+
+.sac-alert {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 18px 24px;
+  border-top: 1px solid $border;
+  background: #f8fafc;
+
+  @media (width <= 760px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__content {
+    h4 {
+      margin: 0 0 6px;
+      font-size: 14px;
+      font-weight: 600;
+      color: $gray-900;
+    }
+
+    p {
+      margin: 0;
+      font-size: 12px;
+      line-height: 1.5;
+      color: #64748b;
+      max-width: 540px;
+    }
+  }
+}
+
+.sac-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  padding: 4px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fecaca;
+
+  &--yes {
+    background: #dcfce7;
+    color: #15803d;
+    border-color: #bbf7d0;
+  }
+}
@@ -0,0 +1,20 @@
+/**
+ * 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, Input } from '@angular/core';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+@Component({
+  selector: 'mifosx-current-account-currency-step',
+  templateUrl: './current-account-currency-step.component.html',
+  styleUrls: ['./current-account-currency-step.component.scss'],
+  imports: [...STANDALONE_SHARED_IMPORTS]
+})
+export class CurrentAccountCurrencyStepComponent {
+  @Input() currentAccountProductTemplate: any;
+}
@@ -7,63 +7,126 @@
 -->

 <form [formGroup]="currentAccountDetailsForm">
-  <div class="layout-row-wrap gap-2px responsive-column">
-    <mat-form-field class="flex-48">
-      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
-      <mat-select formControlName="productId" required>
-        @for (product of productData; track product) {
-          <mat-option [value]="product.id">
-            {{ product.name }}
-          </mat-option>
-        }
-      </mat-select>
-      <mat-error>
-        {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
-
-    @if (currentAccountProductSelected) {
-      <mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
-        <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
-        <input
-          matInput
-          [min]="minDate"
-          [max]="maxDate"
-          [matDatepicker]="submittedOnDatePicker"
-          formControlName="submittedOnDate"
-          required
-        />
-        <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
-        <mat-datepicker #submittedOnDatePicker></mat-datepicker>
+  <!-- Account Details -->
+  <div class="sad-section">
+    <div class="sad-section__header">
+      <i class="fas fa-info-circle"></i>
+      <h3>Account Details</h3>
+    </div>
+    <div class="sad-grid">
+      <mat-form-field appearance="outline" class="sad-field">
+        <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
+        <mat-select formControlName="productId" required>
+          @for (product of productData; track product) {
+            <mat-option [value]="product.id">{{ product.name }}</mat-option>
+          }
+        </mat-select>
        <mat-error>
-          {{ 'labels.inputs.Submitted On' | translate }} {{ 'labels.commons.is' | translate }}
+          {{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
          <strong>{{ 'labels.commons.required' | translate }}</strong>
        </mat-error>
      </mat-form-field>
-    }

-    @if (currentAccountProductSelected) {
-      <mat-form-field class="flex-48">
-        <mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
-        <mat-select formControlName="fieldOfficerId">
-          @for (officer of fieldOfficerData; track officer) {
-            <mat-option [value]="officer.id">
-              {{ officer.displayName }}
-            </mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    }
+      @if (currentAccountProductSelected) {
+        <mat-form-field appearance="outline" class="sad-field" (click)="submittedOnDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="submittedOnDatePicker"
+            formControlName="submittedOnDate"
+            required
+          />
+          <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #submittedOnDatePicker></mat-datepicker>
+          <mat-error>
+            {{ 'labels.inputs.Submitted On' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
+      }

-    @if (currentAccountProductSelected) {
-      <mat-form-field class="flex-48">
-        <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
-        <input matInput formControlName="externalId" />
-      </mat-form-field>
-    }
+      @if (currentAccountProductSelected) {
+        <mat-form-field appearance="outline" class="sad-field">
+          <mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
+          <mat-select formControlName="fieldOfficerId">
+            @for (officer of fieldOfficerData; track officer) {
+              <mat-option [value]="officer.id">{{ officer.displayName }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      }
+
+      @if (currentAccountProductSelected) {
+        <mat-form-field appearance="outline" class="sad-field">
+          <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
+          <input matInput formControlName="externalId" />
+        </mat-form-field>
+      }
+    </div>
  </div>

+  <!-- Product Classification (read-only, shown after product is selected) -->
+  @if (currentAccountProductSelected && productTemplate) {
+    <div class="sad-section sad-section--mt">
+      <div class="sad-section__header">
+        <i class="fas fa-tags"></i>
+        <h3>Product Classification</h3>
+        <span class="sad-badge">From Product</span>
+      </div>
+      <div class="sad-grid sad-grid--classification">
+        <mat-form-field appearance="outline" class="sad-field">
+          <mat-label>Account Type</mat-label>
+          <input matInput [value]="productTemplate.accountType || ''" readonly />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="sad-field">
+          <mat-label>Customer Segment</mat-label>
+          <input matInput [value]="productTemplate.customerSegment || ''" readonly />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="sad-field">
+          <mat-label>Product Code</mat-label>
+          <input matInput [value]="productTemplate.productCode || ''" readonly />
+        </mat-form-field>
+
+        @if (productTemplate.effectiveDate) {
+          <mat-form-field appearance="outline" class="sad-field">
+            <mat-label>Effective Date</mat-label>
+            <input matInput [value]="formatTemplateDate(productTemplate.effectiveDate)" readonly />
+          </mat-form-field>
+        }
+
+        @if (productTemplate.effectiveTo) {
+          <mat-form-field appearance="outline" class="sad-field">
+            <mat-label>Effective To</mat-label>
+            <input matInput [value]="formatTemplateDate(productTemplate.effectiveTo)" readonly />
+          </mat-form-field>
+        }
+
+        @if (productTemplate.endDate) {
+          <mat-form-field appearance="outline" class="sad-field">
+            <mat-label>End Date</mat-label>
+            <input matInput [value]="formatTemplateDate(productTemplate.endDate)" readonly />
+          </mat-form-field>
+        }
+
+        <mat-form-field appearance="outline" class="sad-field">
+          <mat-label>Introducer Required</mat-label>
+          <input matInput [value]="productTemplate.introducerRequired ? 'Yes' : 'No'" readonly />
+        </mat-form-field>
+
+        <div class="sad-field sad-info-row">
+          <span class="sad-info-label">Share Linking Enabled</span>
+          <span class="sad-badge" [class.sad-badge--yes]="productTemplate.shareLinkingEnabled">
+            {{ productTemplate.shareLinkingEnabled ? 'Yes' : 'No' }}
+          </span>
+        </div>
+      </div>
+    </div>
+  }
+
  <div class="layout-row align-center gap-2percent margin-t responsive-column">
    <button mat-raised-button matStepperPrevious disabled>
      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
@@ -5,3 +5,101 @@
 * 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/.
 */
+
+$accent: #0ea5e9;
+$border: #e2e8f0;
+$gray-50: #f8f9fa;
+$gray-200: #e8eaed;
+$gray-900: #202124;
+
+.sad-section {
+  border: 1px solid $border;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+
+  &--mt {
+    margin-top: 16px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 24px;
+    background: $gray-50;
+    border-bottom: 1px solid $gray-200;
+
+    i {
+      font-size: 14px;
+      color: $accent;
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: $gray-900;
+      flex: 1;
+    }
+  }
+}
+
+.sad-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px 16px;
+  padding: 16px 24px;
+
+  @media (width <= 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.sad-grid--classification {
+  grid-template-columns: repeat(3, 1fr);
+
+  @media (width <= 900px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (width <= 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.sad-field {
+  width: 100%;
+}
+
+.sad-info-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 56px;
+}
+
+.sad-info-label {
+  font-size: 14px;
+  color: $gray-900;
+  font-weight: 500;
+}
+
+.sad-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 12px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  background: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #bfdbfe;
+
+  &--yes {
+    background: #dcfce7;
+    color: #15803d;
+    border-color: #bbf7d0;
+  }
+}
@@ -7,8 +7,9 @@
 */

 /** Angular Imports */
-import { Component, OnInit, Input, Output, EventEmitter, inject } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, inject, ChangeDetectorRef } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Dates } from 'app/core/utils/dates';

 /** Custom Services */
 import { CurrentAccountsService } from 'app/current-accounts/current-accounts.service';
@@ -35,6 +36,8 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
  private formBuilder = inject(UntypedFormBuilder);
  private currentAccountsService = inject(CurrentAccountsService);
  private settingsService = inject(SettingsService);
+  private dateUtils = inject(Dates);
+  private cdr = inject(ChangeDetectorRef);

  /** Current Account Template */
  @Input() currentAccountTemplate: any;
@@ -57,12 +60,9 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
  /** Current Account Template with product data  */
  @Output() currentAccountProductTemplate = new EventEmitter();

-  /**
-   * Sets share account details form.
-   * @param {FormBuilder} formBuilder Form Builder.
-   * @param {CurrentAccountsService} currentAccountsService Current Accounts Service.
-   * @param {SettingsService} settingsService Setting service
-   */
+  /** Local copy of product template for displaying classification info */
+  productTemplate: any = null;
+
  constructor() {
    this.createCurrentAccountDetailsForm();
  }
@@ -82,7 +82,7 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
        });
      } else {
        this.currentAccountDetailsForm.patchValue({
-          submittedOnDate: new Date()
+          submittedOnDate: this.settingsService.businessDate
        });
      }
    }
@@ -115,9 +115,23 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
      this.currentAccountsService
        .getCurrentAccountTemplate(entityId, productId, this.currentAccountTemplate.groupId ? true : false)
        .subscribe((response: any) => {
+          // Ensure currency is included in the product template
+          if (!response.currency) {
+            // Try to get currency from the selected product
+            const selectedProduct = this.currentAccountTemplate.productOptions?.find(
+              (product: any) => product.id == productId
+            );
+            if (selectedProduct?.currency) {
+              response.currency = selectedProduct.currency;
+            } else if (this.currentAccountTemplate.currency) {
+              response.currency = this.currentAccountTemplate.currency;
+            }
+          }
+          this.productTemplate = response;
          this.currentAccountProductTemplate.emit(response);
          this.fieldOfficerData = response.fieldOfficerOptions;
          this.currentAccountProductSelected = true;
+          this.cdr.detectChanges();
          if (!this.isFieldOfficerPatched && this.currentAccountTemplate.fieldOfficerId) {
            this.currentAccountDetailsForm.get('fieldOfficerId').patchValue(this.currentAccountTemplate.fieldOfficerId);
            this.isFieldOfficerPatched = true;
@@ -128,6 +142,27 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
    });
  }

+  /**
+   * Formats template dates into the current CBS date format.
+   */
+  formatTemplateDate(value: any): string {
+    if (!value) {
+      return '';
+    }
+    let dateValue: Date | null = null;
+    if (value instanceof Date) {
+      dateValue = value;
+    } else if (Array.isArray(value) && value.length >= 3) {
+      dateValue = new Date(value[0], value[1] - 1, value[2]);
+    } else {
+      dateValue = new Date(value);
+    }
+    if (!dateValue || Number.isNaN(dateValue.getTime())) {
+      return Array.isArray(value) ? value.join('/') : String(value);
+    }
+    return this.dateUtils.formatDate(dateValue, 'M/d/yyyy') || '';
+  }
+
  /**
   * Returns current account form value.
   */
@@ -0,0 +1,234 @@
+<!--
+  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="spl-section">
+  <div class="spl-section__header">
+    <span class="spl-section__icon">
+      <i class="fas fa-chart-bar"></i>
+    </span>
+    <div class="spl-section__title">Transaction &amp; Product Limits</div>
+    <div class="spl-section__badge">FROM PRODUCT</div>
+  </div>
+
+  <div class="spl-section__body">
+    <div class="spl-features">
+      <div class="spl-features__header">Account Features (as per RBI guidelines)</div>
+
+      <div class="spl-features__grid">
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-credit-card"></i> ATM Facility</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.atmFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-wallet"></i> ATM Withdrawal</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.atmWithdrawalFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-mobile-alt"></i> UPI Facility</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.upiFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-exchange-alt"></i> POS Transactions</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.posTransactionsFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-book"></i> Cheque Book</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.chequeBook" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-bolt"></i> IMPS Facility</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.impsFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-sms"></i> SMS Alerts</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.smsAlerts" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-bell"></i> BBPS Facility</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.bbpsFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-shield-alt"></i> Insurance Cover</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.insuranceCover" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-bolt"></i> BEPG Facility</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.bepgFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-money-check-alt"></i> NEFT Facility</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.neftFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-money-check"></i> RTGS Facility</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.rtgsFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-balance-scale"></i> Inter-Bank Total Cap</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.interBankTotalCapFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-arrow-right-arrow-left"></i> Withdrawal Facility</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.withdrawalFacility" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-id-card"></i> Deposit Facility (KYC)</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.depositFacilityKyc" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+
+        <label class="spl-feature">
+          <span class="spl-feature__label"><i class="fas fa-credit-card"></i> Virtual Debit Card</span>
+          <select class="spl-select" [ngModel]="accountFacilityConfig.virtualDebitCard" disabled>
+            <option [ngValue]="false">No</option>
+            <option [ngValue]="true">Yes</option>
+          </select>
+        </label>
+      </div>
+    </div>
+
+    @if (accountFacilityLimits.length > 0) {
+      <div class="spl-table-wrap">
+        <table class="spl-table">
+          <colgroup>
+            <col class="spl-table__col--label" />
+            <col class="spl-table__col--value" />
+            <col class="spl-table__col--value" />
+            <col class="spl-table__col--value" />
+          </colgroup>
+          <thead>
+            <tr>
+              <th>Limit Type</th>
+              <th>General Limit (Daily)</th>
+              <th>Minor Account Limit</th>
+              <th>Small Saving Limit</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of accountFacilityLimits; track row.limitType) {
+              <tr>
+                <td>{{ row.limitType }}</td>
+                <td><input type="text" class="spl-input" [value]="row.generalLimit" disabled /></td>
+                <td><input type="text" class="spl-input" [value]="row.minorAccountLimit" disabled /></td>
+                <td><input type="text" class="spl-input" [value]="row.smallSavingLimit" disabled /></td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    }
+
+    @if (depositLimitKyc?.general) {
+      <div class="spl-table-wrap spl-table-wrap--kyc">
+        <h4 class="mat-h4">Deposit Limit (KYC)</h4>
+        <table class="spl-table">
+          <thead>
+            <tr>
+              <th>Account Type</th>
+              <th>KYC Type</th>
+              <th>Limit</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>General</td>
+              <td>
+                <select class="spl-select" [ngModel]="depositLimitKyc.general.kycType" disabled>
+                  <option>{{ depositLimitKyc.general.kycType }}</option>
+                </select>
+              </td>
+              <td><input type="text" class="spl-input" [value]="depositLimitKyc.general.limit" disabled /></td>
+            </tr>
+            <tr>
+              <td>Minor</td>
+              <td>
+                <select class="spl-select" [ngModel]="depositLimitKyc.minor.kycType" disabled>
+                  <option>{{ depositLimitKyc.minor.kycType }}</option>
+                </select>
+              </td>
+              <td><input type="number" class="spl-input" [value]="depositLimitKyc.minor.limit" disabled /></td>
+            </tr>
+            <tr>
+              <td>Small Saving</td>
+              <td>
+                <select class="spl-select" [ngModel]="depositLimitKyc.smallSaving.kycType" disabled>
+                  <option>{{ depositLimitKyc.smallSaving.kycType }}</option>
+                </select>
+              </td>
+              <td><input type="number" class="spl-input" [value]="depositLimitKyc.smallSaving.limit" disabled /></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    }
+
+    <div class="spl-note">
+      <strong>Note:</strong>
+      These facilities are defined at product level and applied to this account. Small Saving Account limits are
+      strictly capped at Rs.1,00,000 maximum balance per RBI Master Circular.
+    </div>
+  </div>
+</div>
@@ -0,0 +1,199 @@
+/**
+ * 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/.
+ */
+
+$border: #d9e2ec;
+$border-strong: #c7d2de;
+$text: #24364b;
+$muted: #64748b;
+$header-bg: #f8fafc;
+
+.spl-section {
+  border: 1px solid $border;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.spl-section__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  background: $header-bg;
+  border-bottom: 1px solid $border;
+}
+
+.spl-section__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 14px;
+  flex: 0 0 auto;
+}
+
+.spl-section__title {
+  flex: 1 1 auto;
+  font-size: 16px;
+  font-weight: 600;
+  color: $text;
+}
+
+.spl-section__badge {
+  flex: 0 0 auto;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+
+.spl-section__body {
+  padding: 18px 20px 20px;
+}
+
+.spl-table-wrap {
+  overflow-x: auto;
+  margin-top: 16px;
+}
+
+.spl-table {
+  width: 100%;
+  min-width: 0;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border: 1px solid $border;
+
+  col.spl-table__col--label {
+    width: 22%;
+  }
+
+  col.spl-table__col--value {
+    width: 26%;
+  }
+
+  th,
+  td {
+    border: 1px solid $border;
+    padding: 6px 8px;
+    vertical-align: middle;
+  }
+
+  th {
+    background: #f8fafc;
+    color: #64748b;
+    text-align: center;
+    font-size: 11px;
+    font-weight: 700;
+  }
+
+  td:first-child {
+    background: #f8fafc;
+    font-weight: 600;
+    color: $text;
+    white-space: nowrap;
+  }
+
+  td {
+    font-size: 13px;
+    overflow: hidden;
+  }
+}
+
+.spl-input,
+.spl-select {
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+}
+
+.spl-input {
+  height: 30px;
+  border: 1px solid $border-strong;
+  border-radius: 2px;
+  padding: 0 8px;
+  background: #f8fafc;
+  color: $muted;
+}
+
+.spl-select {
+  height: 30px;
+  border: 1px solid $border-strong;
+  border-radius: 2px;
+  padding: 0 6px;
+  background: #f8fafc;
+  color: $muted;
+}
+
+.spl-features {
+  margin-bottom: 16px;
+}
+
+.spl-features__header {
+  font-size: 13px;
+  font-weight: 600;
+  color: $muted;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.spl-features__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px 16px;
+
+  @media (width <= 900px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (width <= 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.spl-feature {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  color: $text;
+}
+
+.spl-feature__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: #334155;
+
+  i {
+    color: #2563eb;
+    font-size: 12px;
+    width: 14px;
+    text-align: center;
+  }
+}
+
+.spl-note {
+  margin-top: 16px;
+  padding: 12px 14px;
+  border: 1px solid $border;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: $muted;
+  font-size: 11px;
+  line-height: 1.6;
+}
@@ -0,0 +1,69 @@
+/**
+ * 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, Input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+const DEFAULT_FACILITY_CONFIG = {
+  atmFacility: false,
+  atmWithdrawalFacility: false,
+  upiFacility: false,
+  posTransactionsFacility: false,
+  chequeBook: false,
+  impsFacility: false,
+  smsAlerts: false,
+  bbpsFacility: false,
+  insuranceCover: false,
+  bepgFacility: false,
+  neftFacility: false,
+  rtgsFacility: false,
+  interBankTotalCapFacility: false,
+  withdrawalFacility: false,
+  depositFacilityKyc: false,
+  virtualDebitCard: false
+};
+
+@Component({
+  selector: 'mifosx-current-account-digital-step',
+  templateUrl: './current-account-digital-step.component.html',
+  styleUrls: ['./current-account-digital-step.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    FormsModule
+  ]
+})
+export class CurrentAccountDigitalStepComponent {
+  private _currentAccountProductTemplate: any;
+
+  @Input()
+  set currentAccountProductTemplate(value: any) {
+    this._currentAccountProductTemplate = value;
+  }
+  get currentAccountProductTemplate(): any {
+    return this._currentAccountProductTemplate;
+  }
+
+  get accountFacilityConfig() {
+    return this._currentAccountProductTemplate?.accountFacilityConfig || DEFAULT_FACILITY_CONFIG;
+  }
+
+  get accountFacilityLimits(): any[] {
+    return this._currentAccountProductTemplate?.accountFacilityLimits || [];
+  }
+
+  get depositLimitKyc() {
+    return (
+      this._currentAccountProductTemplate?.depositLimitKyc || {
+        general: { kycType: '', limit: '' },
+        minor: { kycType: '', limit: '' },
+        smallSaving: { kycType: '', limit: '' }
+      }
+    );
+  }
+}
@@ -6,251 +6,511 @@
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->

-<div class="responsive-column">
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
-
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Product' | translate }}</span>
-    <span class="flex-60">{{
-      currentAccount.productId | find: currentAccountTemplate.productOptions : 'id' : 'name'
-    }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Submitted On' | translate }}</span>
-    <span class="flex-60">{{ currentAccount.submittedOnDate | dateFormat }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
-    @if (currentAccount.externalId) {
-      <span class="flex-60">
-        <mifosx-external-identifier externalId="{{ currentAccount.externalId }}"></mifosx-external-identifier>
-      </span>
-    }
-    @if (!currentAccount.externalId) {
-      <span class="flex-60">
-        {{ 'labels.inputs.Unassigned' | translate }}
-      </span>
-    }
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Field Officer' | translate }}</span>
-    <span class="flex-60">{{
-      currentAccount.fieldOfficerId | find: currentAccountProductTemplate.fieldOfficerOptions : 'id' : 'displayName'
-    }}</span>
-  </div>
-
-  @if (activeClientMembers) {
-    <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Client Members' | translate }}</h3>
-    <mat-divider class="flex-fill"></mat-divider>
-    <div class="flex-60">
-      <table mat-table #membersTable [dataSource]="dataSource">
-        <!-- ID Column -->
-        <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
-          <td mat-cell *matCellDef="let element">{{ element.id }}</td>
-        </ng-container>
-        <!-- Name Column -->
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
-          <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
-        </ng-container>
-        <tr mat-header-row *matHeaderRowDef="membersDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: membersDisplayedColumns"></tr>
-      </table>
+<div class="preview-wrapper">
+  <!-- Details -->
+  <div class="preview-section">
+    <div class="preview-section__header">
+      <span class="preview-section__title">{{ 'labels.heading.Details' | translate }}</span>
    </div>
-  }
-
-  <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
-
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
-    <span class="flex-60">{{ currentAccountTermsForm.get('currencyCode').value }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}</span>
-    <span class="flex-60">{{ currentAccountTermsForm.get('decimal').value }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
-    <span class="flex-60">{{ currentAccount.nominalAnnualInterestRate | formatNumber }} %</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
-    <span class="flex-60">{{
-      getCatalogTranslation(
-        currentAccount.interestCompoundingPeriodType
-          | find: currentAccountProductTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
-      )
-    }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
-    <span class="flex-60">{{
-      getCatalogTranslation(
-        currentAccount.interestPostingPeriodType
-          | find: currentAccountProductTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
-      )
-    }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
-    <span class="flex-60">{{
-      getCatalogTranslation(
-        currentAccount.interestCalculationType
-          | find: currentAccountProductTemplate.interestCalculationTypeOptions : 'id' : 'value'
-      )
-    }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
-    <span class="flex-60">{{
-      getCatalogTranslation(
-        currentAccount.interestCalculationDaysInYearType
-          | find: currentAccountProductTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
-      )
-    }}</span>
-  </div>
-
-  @if (currentAccount.minRequiredOpeningBalance) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
-      <span class="flex-60">{{ currentAccount.minRequiredOpeningBalance | formatNumber }}</span>
+    <div class="preview-body">
+      <div class="preview-grid preview-grid--three">
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Product' | translate }}</span>
+          <span class="preview-value">{{
+            currentAccount?.productId | find: currentAccountTemplate?.productOptions : 'id' : 'name'
+          }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Submitted On' | translate }}</span>
+          <span class="preview-value">{{ currentAccount?.submittedOnDate | dateFormat }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Field Officer' | translate }}</span>
+          <span class="preview-value">{{
+            currentAccount?.fieldOfficerId
+              | find: currentAccountProductTemplate?.fieldOfficerOptions : 'id' : 'displayName'
+          }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.External Id' | translate }}</span>
+          @if (currentAccount?.externalId) {
+            <span class="preview-value">
+              <mifosx-external-identifier externalId="{{ currentAccount.externalId }}"></mifosx-external-identifier>
+            </span>
+          } @else {
+            <span class="preview-value">{{ 'labels.inputs.Unassigned' | translate }}</span>
+          }
+        </div>
+      </div>
    </div>
-  }
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
-    <span class="flex-60">{{ currentAccount.withdrawalFeeForTransfers | yesNo }}</span>
  </div>

-  @if (currentAccount.lockinPeriodFrequency) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
-      <span class="flex-60">{{
-        getCatalogTranslation(
-          currentAccount.lockinPeriodFrequency +
-            ' ' +
-            (currentAccount.lockinPeriodFrequencyType
-              | find: currentAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value')
-        )
-      }}</span>
-    </div>
-  }
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
-    <span class="flex-60">{{ currentAccount.allowOverdraft | yesNo }}</span>
-  </div>
-
-  @if (currentAccount.minOverdraftForInterestCalculation) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40"
-        >{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span
-      >
-      <span class="flex-60">{{ currentAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
-    </div>
-  }
-
-  @if (currentAccount.nominalAnnualInterestRateOverdraft) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
-      <span class="flex-60">{{ currentAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
-    </div>
-  }
-
-  @if (currentAccount.overdraftLimit) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
-      <span class="flex-60">{{ currentAccount.overdraftLimit | formatNumber }}</span>
-    </div>
-  }
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
-    <span class="flex-60">{{ currentAccount.enforceMinRequiredBalance | yesNo }}</span>
-  </div>
-
-  @if (currentAccount.minRequiredBalance) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
-      <span class="flex-60">{{ currentAccount.minRequiredBalance }}</span>
-    </div>
-  }
-
-  @if (currentAccount.charges.length) {
-    <div class="layout-row-wrap responsive-column flex-fill">
-      <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Charges' | translate }}</h3>
-      <mat-divider class="flex-fill"></mat-divider>
-      <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="currentAccount.charges">
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
-          <td mat-cell *matCellDef="let charge">
-            {{ charge.name + ', ' + charge.currency.displaySymbol }}
-          </td>
-        </ng-container>
-        <ng-container matColumnDef="chargeCalculationType">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-          <td mat-cell *matCellDef="let charge">
-            {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
-          </td>
-        </ng-container>
-        <ng-container matColumnDef="amount">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-          <td mat-cell *matCellDef="let charge">
-            {{ charge.amount | formatNumber }}
-          </td>
-        </ng-container>
-        <ng-container matColumnDef="date">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
-          <td mat-cell *matCellDef="let charge">
-            @if (charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee') {
-              <span>
-                {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
+  <!-- Product Classification -->
+  @if (
+    currentAccountProductTemplate?.accountType ||
+    currentAccountProductTemplate?.customerSegment ||
+    currentAccountProductTemplate?.productCode ||
+    currentAccountProductTemplate?.effectiveDate ||
+    currentAccountProductTemplate?.effectiveTo ||
+    currentAccountProductTemplate?.endDate ||
+    currentAccountProductTemplate?.introducerRequired !== undefined ||
+    currentAccountProductTemplate?.shareLinkingEnabled !== undefined
+  ) {
+    <div class="preview-section">
+      <div class="preview-section__header">
+        <span class="preview-section__title">Product Classification</span>
+      </div>
+      <div class="preview-body">
+        <div class="preview-grid preview-grid--three">
+          @if (currentAccountProductTemplate?.accountType) {
+            <div class="preview-field">
+              <span class="preview-label">Account Type</span>
+              <span class="preview-value">{{ currentAccountProductTemplate?.accountType }}</span>
+            </div>
+          }
+          @if (currentAccountProductTemplate?.customerSegment) {
+            <div class="preview-field">
+              <span class="preview-label">Customer Segment</span>
+              <span class="preview-value">{{ currentAccountProductTemplate?.customerSegment }}</span>
+            </div>
+          }
+          @if (currentAccountProductTemplate?.productCode) {
+            <div class="preview-field">
+              <span class="preview-label">Product Code</span>
+              <span class="preview-value">{{ currentAccountProductTemplate?.productCode }}</span>
+            </div>
+          }
+          @if (currentAccountProductTemplate?.effectiveDate) {
+            <div class="preview-field">
+              <span class="preview-label">Effective Date</span>
+              <span class="preview-value">{{ currentAccountProductTemplate?.effectiveDate | dateFormat }}</span>
+            </div>
+          }
+          @if (currentAccountProductTemplate?.effectiveTo) {
+            <div class="preview-field">
+              <span class="preview-label">Effective To</span>
+              <span class="preview-value">{{ currentAccountProductTemplate?.effectiveTo | dateFormat }}</span>
+            </div>
+          }
+          @if (currentAccountProductTemplate?.endDate) {
+            <div class="preview-field">
+              <span class="preview-label">End Date</span>
+              <span class="preview-value">{{ currentAccountProductTemplate?.endDate | dateFormat }}</span>
+            </div>
+          }
+          @if (
+            currentAccountProductTemplate?.introducerRequired !== undefined &&
+            currentAccountProductTemplate?.introducerRequired !== null
+          ) {
+            <div class="preview-field">
+              <span class="preview-label">Introducer Required</span>
+              <span
+                class="preview-value preview-badge"
+                [class.preview-badge--yes]="currentAccountProductTemplate?.introducerRequired"
+              >
+                {{ currentAccountProductTemplate?.introducerRequired | yesNo }}
              </span>
-            }
-            @if (charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee') {
-              <span>
-                {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
+            </div>
+          }
+          @if (
+            currentAccountProductTemplate?.shareLinkingEnabled !== undefined &&
+            currentAccountProductTemplate?.shareLinkingEnabled !== null
+          ) {
+            <div class="preview-field">
+              <span class="preview-label">Share Linking Enabled</span>
+              <span
+                class="preview-value preview-badge"
+                [class.preview-badge--yes]="currentAccountProductTemplate?.shareLinkingEnabled"
+              >
+                {{ currentAccountProductTemplate?.shareLinkingEnabled | yesNo }}
              </span>
-            }
-            @if (
-              !(
-                charge.chargeTimeType.value === 'Monthly Fee' ||
-                charge.chargeTimeType.value === 'Annual Fee' ||
-                charge.chargeTimeType.value === 'Specified due date' ||
-                charge.chargeTimeType.value === 'Weekly Fee'
-              )
-            ) {
-              <span> N/A </span>
-            }
-          </td>
-        </ng-container>
-        <ng-container matColumnDef="repaymentsEvery">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
-          <td mat-cell *matCellDef="let charge">
-            {{ charge.feeInterval || 'Not Provided' }}
-          </td>
-        </ng-container>
-        <ng-container matColumnDef="chargeTimeType">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
-          <td mat-cell *matCellDef="let charge">
-            {{ charge.chargeTimeType.value }}
-          </td>
-        </ng-container>
-        <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
-      </table>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  }
+
+  <!-- Currency -->
+  <div class="preview-section">
+    <div class="preview-section__header">
+      <span class="preview-section__title">{{ 'labels.heading.Currency' | translate }}</span>
+    </div>
+    <div class="preview-body">
+      <div class="preview-grid preview-grid--three">
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Currency' | translate }}</span>
+          <span class="preview-value">{{ currentAccountTermsForm?.get('currencyCode')?.value }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Decimal Places' | translate }}</span>
+          <span class="preview-value">{{ currentAccountProductTemplate?.currency?.decimalPlaces }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Currency In Multiples Of' | translate }}</span>
+          <span class="preview-value">{{ currentAccountProductTemplate?.currency?.inMultiplesOf }}</span>
+        </div>
+        @if (
+          currentAccountProductTemplate?.dormancyAlert !== undefined &&
+          currentAccountProductTemplate?.dormancyAlert !== null
+        ) {
+          <div class="preview-field">
+            <span class="preview-label">Dormancy Alert</span>
+            <span
+              class="preview-value preview-badge"
+              [class.preview-badge--yes]="currentAccountProductTemplate?.dormancyAlert"
+            >
+              {{ currentAccountProductTemplate?.dormancyAlert | yesNo }}
+            </span>
+          </div>
+        }
+        @if (
+          currentAccountProductTemplate?.balanceSwapOption !== undefined &&
+          currentAccountProductTemplate?.balanceSwapOption !== null
+        ) {
+          <div class="preview-field">
+            <span class="preview-label">Balance Swap Option</span>
+            <span
+              class="preview-value preview-badge"
+              [class.preview-badge--yes]="currentAccountProductTemplate?.balanceSwapOption"
+            >
+              {{ currentAccountProductTemplate?.balanceSwapOption | yesNo }}
+            </span>
+          </div>
+        }
+        @if (currentAccountProductTemplate?.msme !== undefined && currentAccountProductTemplate?.msme !== null) {
+          <div class="preview-field">
+            <span class="preview-label">MSME</span>
+            <span class="preview-value preview-badge" [class.preview-badge--yes]="currentAccountProductTemplate?.msme">
+              {{ currentAccountProductTemplate?.msme | yesNo }}
+            </span>
+          </div>
+        }
+        @if (
+          currentAccountProductTemplate?.nominationFacility !== undefined &&
+          currentAccountProductTemplate?.nominationFacility !== null
+        ) {
+          <div class="preview-field">
+            <span class="preview-label">Nomination Facility</span>
+            <span
+              class="preview-value preview-badge"
+              [class.preview-badge--yes]="currentAccountProductTemplate?.nominationFacility"
+            >
+              {{ currentAccountProductTemplate?.nominationFacility | yesNo }}
+            </span>
+          </div>
+        }
+        @if (
+          currentAccountProductTemplate?.autoDebitFacility !== undefined &&
+          currentAccountProductTemplate?.autoDebitFacility !== null
+        ) {
+          <div class="preview-field">
+            <span class="preview-label">Auto Debit Facility</span>
+            <span
+              class="preview-value preview-badge"
+              [class.preview-badge--yes]="currentAccountProductTemplate?.autoDebitFacility"
+            >
+              {{ currentAccountProductTemplate?.autoDebitFacility | yesNo }}
+            </span>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+
+  <!-- Terms -->
+  <div class="preview-section">
+    <div class="preview-section__header">
+      <span class="preview-section__title">{{ 'labels.heading.Terms' | translate }}</span>
+    </div>
+    <div class="preview-body">
+      <div class="preview-grid preview-grid--three">
+        <div class="preview-field">
+          <span class="preview-label">Interest Posting Frequency</span>
+          <span class="preview-value">{{
+            termPreview?.interestPostingPeriodType
+              | find: currentAccountProductTemplate?.interestPostingPeriodTypeOptions : 'id' : 'value'
+              | translateKey: 'catalogs'
+          }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">Auto Interest Post</span>
+          <span class="preview-value preview-badge" [class.preview-badge--yes]="termPreview?.autoPost">
+            {{ termPreview?.autoPost | yesNo }}
+          </span>
+        </div>
+        @if (termPreview?.frequencyFixDay !== undefined && termPreview?.frequencyFixDay !== null) {
+          <div class="preview-field">
+            <span class="preview-label">Frequency Fix Day</span>
+            <span class="preview-value">{{ termPreview?.frequencyFixDay }} Days</span>
+          </div>
+        }
+        @if (termPreview?.lastInterestDate) {
+          <div class="preview-field">
+            <span class="preview-label">Last Interest Date</span>
+            <span class="preview-value">{{ termPreview?.lastInterestDate | dateFormat }}</span>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+
+  <!-- Settings -->
+  <div class="preview-section">
+    <div class="preview-section__header">
+      <span class="preview-section__title">{{ 'labels.heading.Settings' | translate }}</span>
+    </div>
+    <div class="preview-body">
+      <div class="preview-grid preview-grid--three">
+        @if (
+          settingsPreview?.minRequiredOpeningBalance !== undefined &&
+          settingsPreview?.minRequiredOpeningBalance !== null &&
+          settingsPreview?.minRequiredOpeningBalance !== ''
+        ) {
+          <div class="preview-field">
+            <span class="preview-label">{{ 'labels.inputs.Minimum Opening Balance' | translate }}</span>
+            <span class="preview-value">{{ settingsPreview?.minRequiredOpeningBalance | formatNumber }}</span>
+          </div>
+        }
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}</span>
+          <span
+            class="preview-value preview-badge"
+            [class.preview-badge--yes]="settingsPreview?.enforceMinRequiredBalance"
+          >
+            {{ settingsPreview?.enforceMinRequiredBalance | yesNo }}
+          </span>
+        </div>
+        @if (
+          settingsPreview?.minRequiredBalance !== undefined &&
+          settingsPreview?.minRequiredBalance !== null &&
+          settingsPreview?.minRequiredBalance !== ''
+        ) {
+          <div class="preview-field">
+            <span class="preview-label">{{ 'labels.inputs.Minimum Balance' | translate }}</span>
+            <span class="preview-value">{{ settingsPreview?.minRequiredBalance | formatNumber }}</span>
+          </div>
+        }
+        <div class="preview-field">
+          <span class="preview-label">Balance Frequency</span>
+          <span class="preview-value">{{ settingsPreview?.balanceFrequency || 'Unassigned' }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}</span>
+          <span
+            class="preview-value preview-badge"
+            [class.preview-badge--yes]="settingsPreview?.withdrawalFeeForTransfers"
+          >
+            {{ settingsPreview?.withdrawalFeeForTransfers | yesNo }}
+          </span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">Enable Lock-in Period</span>
+          <span
+            class="preview-value preview-badge"
+            [class.preview-badge--yes]="settingsPreview?.enableLockinPeriod || !!settingsPreview?.lockinPeriodFrequency"
+          >
+            {{ settingsPreview?.enableLockinPeriod || !!settingsPreview?.lockinPeriodFrequency | yesNo }}
+          </span>
+        </div>
+        @if (settingsPreview?.lockinPeriodFrequency) {
+          <div class="preview-field">
+            <span class="preview-label">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
+            <span class="preview-value">
+              {{ settingsPreview?.lockinPeriodFrequency }}
+              {{
+                settingsPreview?.lockinPeriodFrequencyType
+                  | find: currentAccountProductTemplate?.lockinPeriodFrequencyTypeOptions : 'id' : 'value'
+                  | translateKey: 'catalogs'
+              }}
+            </span>
+          </div>
+        }
+        <div class="preview-field">
+          <span class="preview-label">Account Closed Zero Balance In Day Closing</span>
+          <span
+            class="preview-value preview-badge"
+            [class.preview-badge--yes]="settingsPreview?.accountClosedZeroBalanceInDayClosing"
+          >
+            {{ settingsPreview?.accountClosedZeroBalanceInDayClosing | yesNo }}
+          </span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}</span>
+          <span class="preview-value preview-badge" [class.preview-badge--yes]="settingsPreview?.allowOverdraft">
+            {{ settingsPreview?.allowOverdraft | yesNo }}
+          </span>
+        </div>
+        @if (settingsPreview?.allowOverdraft) {
+          <div class="preview-field">
+            <span class="preview-label">Avg Balance Calc Period</span>
+            <span class="preview-value">{{ settingsPreview?.avgBalanceCalcPeriod || 'Unassigned' }}</span>
+          </div>
+          <div class="preview-field">
+            <span class="preview-label">Valid For Period</span>
+            <span class="preview-value">{{ settingsPreview?.validForPeriod || 'Unassigned' }}</span>
+          </div>
+          @if (
+            settingsPreview?.overdraftLimit !== undefined &&
+            settingsPreview?.overdraftLimit !== null &&
+            settingsPreview?.overdraftLimit !== ''
+          ) {
+            <div class="preview-field">
+              <span class="preview-label">OD Limit %</span>
+              <span class="preview-value">{{ settingsPreview?.overdraftLimit | formatNumber }}</span>
+            </div>
+          }
+          @if (
+            settingsPreview?.nominalAnnualInterestRateOverdraft !== undefined &&
+            settingsPreview?.nominalAnnualInterestRateOverdraft !== null &&
+            settingsPreview?.nominalAnnualInterestRateOverdraft !== ''
+          ) {
+            <div class="preview-field">
+              <span class="preview-label">Interest on OD %</span>
+              <span class="preview-value">{{
+                settingsPreview?.nominalAnnualInterestRateOverdraft | formatNumber
+              }}</span>
+            </div>
+          }
+          <div class="preview-field">
+            <span class="preview-label">OD Account Closed Zero Balance In Day Closing</span>
+            <span
+              class="preview-value preview-badge"
+              [class.preview-badge--yes]="settingsPreview?.odAccountClosedZeroBalanceInDayClosing"
+            >
+              {{ settingsPreview?.odAccountClosedZeroBalanceInDayClosing | yesNo }}
+            </span>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+
+  @if (hasDigitalSection) {
+    <div class="preview-section">
+      <div class="preview-section__header">
+        <span class="preview-section__title">Digital</span>
+      </div>
+      <div class="preview-body">
+        <div class="preview-grid preview-grid--three">
+          @for (facility of digitalFacilityLabels; track facility.key) {
+            <div class="preview-field">
+              <span class="preview-label">{{ facility.label }}</span>
+              <span
+                class="preview-value preview-badge"
+                [class.preview-badge--yes]="digitalPreview?.accountFacilityConfig?.[facility.key]"
+              >
+                {{ digitalPreview?.accountFacilityConfig?.[facility.key] | yesNo }}
+              </span>
+            </div>
+          }
+        </div>
+
+        @if (digitalPreview?.accountFacilityLimits?.length) {
+          <table class="mat-elevation-z1 preview-table">
+            <thead>
+              <tr>
+                <th>Limit Type</th>
+                <th>General Limit</th>
+                <th>Minor Account Limit</th>
+                <th>Small Saving Limit</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (row of digitalPreview.accountFacilityLimits; track row.limitType) {
+                <tr>
+                  <td>{{ row.limitType }}</td>
+                  <td>{{ row.generalLimit || 'Unassigned' }}</td>
+                  <td>{{ row.minorAccountLimit || 'Unassigned' }}</td>
+                  <td>{{ row.smallSavingLimit || 'Unassigned' }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+
+        @if (digitalPreview?.depositLimitKyc?.general) {
+          <table class="mat-elevation-z1 preview-table">
+            <thead>
+              <tr>
+                <th>Account Type</th>
+                <th>KYC Type</th>
+                <th>Limit</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>General</td>
+                <td>{{ digitalPreview.depositLimitKyc.general.kycType || 'Unassigned' }}</td>
+                <td>{{ digitalPreview.depositLimitKyc.general.limit || 'Unassigned' }}</td>
+              </tr>
+              <tr>
+                <td>Minor</td>
+                <td>{{ digitalPreview.depositLimitKyc.minor?.kycType || 'Unassigned' }}</td>
+                <td>{{ digitalPreview.depositLimitKyc.minor?.limit || 'Unassigned' }}</td>
+              </tr>
+              <tr>
+                <td>Small Saving</td>
+                <td>{{ digitalPreview.depositLimitKyc.smallSaving?.kycType || 'Unassigned' }}</td>
+                <td>{{ digitalPreview.depositLimitKyc.smallSaving?.limit || 'Unassigned' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        }
+      </div>
+    </div>
+  }
+
+  <!-- Charges -->
+  @if (currentAccount?.charges?.length) {
+    <div class="preview-section">
+      <div class="preview-section__header">
+        <span class="preview-section__title">{{ 'labels.inputs.Charges' | translate }}</span>
+      </div>
+      <div class="preview-body">
+        <table class="mat-elevation-z1 preview-table" mat-table [dataSource]="currentAccount.charges">
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
+            <td mat-cell *matCellDef="let charge">{{ charge.name + ', ' + charge.currency?.displaySymbol }}</td>
+          </ng-container>
+          <ng-container matColumnDef="chargeCalculationType">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
+            <td mat-cell *matCellDef="let charge">
+              {{ charge.chargeCalculationType?.value | translateKey: 'catalogs' }}
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="amount">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+            <td mat-cell *matCellDef="let charge">{{ charge.amount | formatNumber }}</td>
+          </ng-container>
+          <ng-container matColumnDef="chargeTimeType">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
+            <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType?.value }}</td>
+          </ng-container>
+          <ng-container matColumnDef="date">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
+            <td mat-cell *matCellDef="let charge">
+              @if (
+                charge.chargeTimeType?.value === 'Specified due date' || charge.chargeTimeType?.value === 'Weekly Fee'
+              ) {
+                <span>{{ (charge.dueDate | dateFormat) || 'Unassigned' }}</span>
+              } @else if (
+                charge.chargeTimeType?.value === 'Monthly Fee' || charge.chargeTimeType?.value === 'Annual Fee'
+              ) {
+                <span>{{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}</span>
+              } @else {
+                <span>N/A</span>
+              }
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="repaymentsEvery">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
+            <td mat-cell *matCellDef="let charge">{{ charge.feeInterval || 'Not Provided' }}</td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
+        </table>
+      </div>
    </div>
  }
 </div>
@@ -6,27 +6,95 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

-table {
-  width: 100%;
+.preview-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 0.5rem 0;
 }

-.mat-elevation-z1 {
-  margin: 1em 0 1.5em;
+.preview-section {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
+
+  &__header {
+    background: #f5f5f5;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 0.6rem 1rem;
+  }
+
+  &__title {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #333;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
 }

-h2,
-h3,
-h4 {
-  margin: 0;
+.preview-body {
+  padding: 1rem 1.25rem;
+}
+
+.preview-grid {
+  display: grid;
+  gap: 0.75rem 1.5rem;
+
+  &--three {
+    grid-template-columns: repeat(3, 1fr);
+
+    @media (width <= 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (width <= 480px) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+.preview-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.preview-label {
+  font-size: 0.72rem;
+  color: #888;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.preview-value {
+  font-size: 0.92rem;
+  color: #222;
  font-weight: 500;
 }

-span {
-  margin: 0.5em 0;
+.preview-badge {
+  display: inline-block;
+  padding: 0.1rem 0.55rem;
+  border-radius: 12px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  background: #ffebee;
+  color: #c62828;
+  width: fit-content;
+
+  &--yes {
+    background: #e8f5e9;
+    color: #2e7d32;
+  }
 }

-mat-divider {
-  margin: 0 0 0.5em;
+.preview-table {
+  width: 100%;
+  margin-top: 1rem;
 }

 .margin-t {
@@ -36,7 +36,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 * Current account preview step
 */
@Component({
-  selector: 'mifosx-current-account-account-preview-step',
+  selector: 'mifosx-current-account-preview-step',
  templateUrl: './current-account-preview-step.component.html',
  styleUrls: ['./current-account-preview-step.component.scss'],
  imports: [
@@ -62,6 +62,25 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class CurrentAccountPreviewStepComponent implements OnChanges {
+  readonly digitalFacilityLabels = [
+    { key: 'atmFacility', label: 'ATM Facility' },
+    { key: 'atmWithdrawalFacility', label: 'ATM Withdrawal' },
+    { key: 'upiFacility', label: 'UPI Facility' },
+    { key: 'posTransactionsFacility', label: 'POS Transactions' },
+    { key: 'chequeBook', label: 'Cheque Book' },
+    { key: 'impsFacility', label: 'IMPS Facility' },
+    { key: 'smsAlerts', label: 'SMS Alerts' },
+    { key: 'bbpsFacility', label: 'BBPS Facility' },
+    { key: 'insuranceCover', label: 'Insurance Cover' },
+    { key: 'bepgFacility', label: 'BEPG Facility' },
+    { key: 'neftFacility', label: 'NEFT Facility' },
+    { key: 'rtgsFacility', label: 'RTGS Facility' },
+    { key: 'interBankTotalCapFacility', label: 'Inter-Bank Total Cap' },
+    { key: 'withdrawalFacility', label: 'Withdrawal Facility' },
+    { key: 'depositFacilityKyc', label: 'Deposit Facility (KYC)' },
+    { key: 'virtualDebitCard', label: 'Virtual Debit Card' }
+  ];
+
  private translateService = inject(TranslateService);

  /** Current Account Product Template */
@@ -70,6 +89,10 @@ export class CurrentAccountPreviewStepComponent implements OnChanges {
  @Input() currentAccountTemplate: any;
  /** Current Account Terms Form */
  @Input() currentAccountTermsForm: any;
+  /** Current Account Term Form */
+  @Input() currentAccountTermForm: any;
+  /** Current Account Settings Form */
+  @Input() currentAccountSettingsForm: any;
  /** Current Account */
  @Input() currentAccount: any;
  @Input() activeClientMembers?: any;
@@ -104,4 +127,24 @@ export class CurrentAccountPreviewStepComponent implements OnChanges {
  getCatalogTranslation(text: string): string {
    return this.translateService.instant('labels.catalogs.' + text);
  }
+
+  get termPreview(): any {
+    return this.currentAccountTermForm?.getRawValue?.() || this.currentAccount || {};
+  }
+
+  get settingsPreview(): any {
+    return this.currentAccountSettingsForm?.getRawValue?.() || this.currentAccount || {};
+  }
+
+  get digitalPreview(): any {
+    return this.currentAccountProductTemplate || {};
+  }
+
+  get hasDigitalSection(): boolean {
+    return !!(
+      this.digitalPreview?.accountFacilityConfig ||
+      this.digitalPreview?.accountFacilityLimits?.length ||
+      this.digitalPreview?.depositLimitKyc
+    );
+  }
 }
@@ -0,0 +1,174 @@
+<!--
+  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]="currentAccountSettingsForm">
+  <!-- Section 1: Balance & Minimum Balance -->
+  <div class="sps-section">
+    <div class="sps-section__header">
+      <span class="sps-section__badge"><i class="fas fa-balance-scale"></i></span>
+      <span>Balance &amp; Minimum Balance</span>
+    </div>
+    <div class="sps-body">
+      <div class="sps-layout sps-layout--balance">
+        <div class="sps-row sps-row--three">
+          <mat-form-field appearance="outline" class="sps-field sps-field--compact">
+            <mat-label>{{ 'labels.inputs.Minimum Opening Balance' | translate }}</mat-label>
+            <input type="number" matInput formControlName="minRequiredOpeningBalance" min="0" step="0.01" />
+          </mat-form-field>
+
+          <div class="sps-toggle sps-toggle--inline">
+            <mat-checkbox labelPosition="before" formControlName="enforceMinRequiredBalance">
+              <span>Enforce Minimum Balance</span>
+            </mat-checkbox>
+          </div>
+
+          <mat-form-field appearance="outline" class="sps-field sps-field--compact">
+            <mat-label>Minimum Balance (&#8377;) *</mat-label>
+            <input type="number" matInput formControlName="minRequiredBalance" min="0" step="0.01" />
+            <mat-hint>PENAL CHARGE APPLIES ON BREACH</mat-hint>
+          </mat-form-field>
+        </div>
+
+        <div class="sps-row sps-row--two">
+          <mat-form-field appearance="outline" class="sps-field sps-field--compact">
+            <mat-label>Balance Frequency</mat-label>
+            <mat-select formControlName="balanceFrequency">
+              @for (freq of periodFrequencyData; track freq.value) {
+                <mat-option [value]="freq.value">{{ freq.value }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+
+          <div class="sps-toggle sps-toggle--inline sps-toggle--right">
+            <mat-checkbox labelPosition="before" formControlName="withdrawalFeeForTransfers">
+              <span>{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}</span>
+            </mat-checkbox>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Section 2: Lock-in Period -->
+  <div class="sps-section">
+    <div class="sps-section__header">
+      <span class="sps-section__badge"><i class="fas fa-lock"></i></span>
+      <span>Lock-in Period</span>
+    </div>
+    <div class="sps-body">
+      <div class="sps-lockin-row">
+        <span>Enable Lock-in Period</span>
+        <mat-checkbox formControlName="enableLockinPeriod"></mat-checkbox>
+      </div>
+
+      @if (currentAccountSettingsForm.value.enableLockinPeriod) {
+        <div class="sps-lockin-fields">
+          <mat-form-field appearance="outline" class="sps-field sps-field--compact">
+            <mat-label>{{ 'labels.inputs.Frequency' | translate }} *</mat-label>
+            <input type="number" matInput formControlName="lockinPeriodFrequency" min="1" step="1" />
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="sps-field sps-field--compact">
+            <mat-label>{{ 'labels.inputs.Type' | translate }} *</mat-label>
+            <mat-select formControlName="lockinPeriodFrequencyType">
+              @for (type of lockinPeriodFrequencyTypeData; track type) {
+                <mat-option [value]="type.id">{{ type.value | translateKey: 'catalogs' }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+      }
+    </div>
+  </div>
+
+  <!-- Section 3: Additional Rules -->
+  <div class="sps-section">
+    <div class="sps-section__header">
+      <span class="sps-section__badge"><i class="fas fa-cog"></i></span>
+      <span>Additional Rules</span>
+    </div>
+    <div class="sps-body">
+      <div class="sps-toggle sps-toggle--inline">
+        <mat-checkbox formControlName="accountClosedZeroBalanceInDayClosing">
+          <span>Account Closed with Zero Balance in Day Closing</span>
+        </mat-checkbox>
+      </div>
+    </div>
+  </div>
+
+  <!-- Section 4: Overdraft (OD) Facility -->
+  <div class="sps-section">
+    <div class="sps-section__header">
+      <span class="sps-section__badge"><i class="fas fa-hand-holding-usd"></i></span>
+      <span>Overdraft (OD) Facility</span>
+    </div>
+    <div class="sps-body">
+      <div class="sps-od-layout">
+        <!-- Left: checkboxes -->
+        <div class="sps-od-checks">
+          <div class="sps-od-check-row">
+            <mat-checkbox formControlName="allowOverdraft">
+              <span>Is Overdraft Allowed</span>
+            </mat-checkbox>
+          </div>
+          @if (currentAccountSettingsForm.value.allowOverdraft) {
+            <div class="sps-od-check-row">
+              <mat-checkbox formControlName="odAccountClosedZeroBalanceInDayClosing">
+                <span>OD Account Closed with Zero Balance in Day Closing</span>
+              </mat-checkbox>
+              <p class="sps-od-check-hint">
+                Automatically closes OD accounts when balance reaches zero during day-end closing.
+              </p>
+            </div>
+          }
+        </div>
+
+        <!-- Right: OD details panel — only visible when OD is allowed -->
+        @if (currentAccountSettingsForm.value.allowOverdraft) {
+          <div class="sps-od-panel">
+            <div class="sps-od-radio-group">
+              <span class="sps-od-radio-label">Average Balance Calculation in Period</span>
+              <mat-radio-group formControlName="avgBalanceCalcPeriod" class="sps-od-radio-choices">
+                <mat-radio-button value="6M">6M</mat-radio-button>
+                <mat-radio-button value="1Y">1Y</mat-radio-button>
+                <mat-radio-button value="3Y">3Y</mat-radio-button>
+              </mat-radio-group>
+            </div>
+
+            <div class="sps-od-radio-group">
+              <span class="sps-od-radio-label">Valid for Period</span>
+              <mat-radio-group formControlName="validForPeriod" class="sps-od-radio-choices">
+                <mat-radio-button value="3M">3M</mat-radio-button>
+                <mat-radio-button value="1Y">1Y</mat-radio-button>
+                <mat-radio-button value="3Y">3Y</mat-radio-button>
+              </mat-radio-group>
+            </div>
+
+            <div class="sps-od-inputs">
+              <mat-form-field appearance="outline" class="sps-field">
+                <mat-label>OD Limit %</mat-label>
+                <input type="number" matInput formControlName="overdraftLimit" min="0" step="0.01" />
+              </mat-form-field>
+
+              <mat-form-field appearance="outline" class="sps-field">
+                <mat-label>Interest on OD %</mat-label>
+                <input
+                  type="number"
+                  matInput
+                  formControlName="nominalAnnualInterestRateOverdraft"
+                  min="0"
+                  step="0.01"
+                />
+              </mat-form-field>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+</form>
@@ -0,0 +1,255 @@
+/**
+ * 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/.
+ */
+
+$accent: #0ea5e9;
+$border: #e2e8f0;
+$gray-50: #f8f9fa;
+$gray-200: #e8eaed;
+$gray-900: #202124;
+
+.sps-section {
+  border: 1px solid $border;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+
+  & + & {
+    margin-top: 16px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 24px;
+    background: $gray-50;
+    border-bottom: 1px solid $gray-200;
+
+    i {
+      font-size: 14px;
+      color: $accent;
+    }
+
+    span {
+      font-size: 14px;
+      font-weight: 600;
+      color: $gray-900;
+    }
+  }
+}
+
+.sps-section__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  background: #eff6ff;
+  font-size: 14px;
+}
+
+.sps-body {
+  background: #fff;
+  padding: 18px 24px 24px;
+}
+
+.sps-field {
+  width: 100%;
+
+  &--full {
+    grid-column: 1 / -1;
+  }
+
+  &--compact {
+    width: 100%;
+  }
+}
+
+.sps-layout {
+  display: grid;
+  gap: 16px;
+}
+
+.sps-layout--balance {
+  gap: 22px;
+}
+
+.sps-layout--additional {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+
+  @media (width <= 1100px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.sps-row {
+  display: grid;
+  gap: 18px;
+  align-items: start;
+}
+
+.sps-row--three {
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+
+  .sps-field--compact:first-child {
+    min-width: 0;
+  }
+
+  .sps-toggle--inline {
+    align-self: center;
+    min-height: 56px;
+  }
+}
+
+.sps-row--two {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+
+  .sps-field--compact {
+    min-width: 0;
+  }
+}
+
+.sps-toggle {
+  display: flex;
+  align-items: center;
+  min-height: 56px;
+
+  mat-checkbox {
+    font-size: 14px;
+    color: $gray-900;
+  }
+
+  &--full {
+    min-height: auto;
+    margin-bottom: 8px;
+  }
+
+  &--inline {
+    padding-top: 0;
+  }
+
+  &--right {
+    justify-content: flex-start;
+  }
+}
+
+.sps-lockin-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid $gray-200;
+  font-size: 14px;
+  color: $gray-900;
+}
+
+.sps-lockin-row mat-checkbox {
+  margin-right: 2px;
+}
+
+.sps-lockin-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+
+  @media (width <= 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// ── Overdraft (OD) Facility ───────────────────────────────────────────────
+
+.sps-od-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  align-items: start;
+
+  @media (width <= 900px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.sps-od-checks {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.sps-od-check-row {
+  padding: 14px 16px;
+  border: 1px solid $border;
+  border-radius: 8px;
+  background: $gray-50;
+
+  mat-checkbox {
+    font-size: 14px;
+    font-weight: 500;
+    color: $gray-900;
+  }
+}
+
+.sps-od-check-hint {
+  margin: 6px 0 0 28px;
+  font-size: 11.5px;
+  color: #64748b;
+  line-height: 1.5;
+}
+
+.sps-od-panel {
+  background: #f0f7ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 10px;
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.sps-od-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #dbeafe;
+
+  &:last-of-type {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}
+
+.sps-od-radio-label {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  color: #3b82f6;
+  text-transform: uppercase;
+}
+
+.sps-od-radio-choices {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.sps-od-inputs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+
+  @media (width <= 640px) {
+    grid-template-columns: 1fr;
+  }
+}
@@ -0,0 +1,163 @@
+/**
+ * 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, Input, OnInit, inject } from '@angular/core';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import { FormatNumberPipe } from '../../../pipes/format-number.pipe';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+@Component({
+  selector: 'mifosx-current-account-settings-step',
+  templateUrl: './current-account-settings-step.component.html',
+  styleUrls: ['./current-account-settings-step.component.scss'],
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    MatCheckbox,
+    MatRadioGroup,
+    MatRadioButton,
+    FormatNumberPipe
+  ]
+})
+export class CurrentAccountSettingsStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+
+  private _currentAccountProductTemplate: any;
+
+  @Input()
+  set currentAccountProductTemplate(value: any) {
+    this._currentAccountProductTemplate = value;
+    if (value && this.currentAccountSettingsForm) {
+      this.applyTemplate(value);
+    }
+  }
+  get currentAccountProductTemplate(): any {
+    return this._currentAccountProductTemplate;
+  }
+
+  currentAccountSettingsForm: UntypedFormGroup;
+
+  lockinPeriodFrequencyTypeData: any[] = [];
+
+  periodFrequencyData: any[] = [
+    { value: 'Daily' },
+    { value: 'Weekly' },
+    { value: 'Monthly' },
+    { value: 'Quarterly' },
+    { value: 'Half Yearly' },
+    { value: 'Yearly' }];
+
+  constructor() {
+    this.createForm();
+    this.buildDependencies();
+  }
+
+  createForm() {
+    this.currentAccountSettingsForm = this.formBuilder.group({
+      minRequiredOpeningBalance: [
+        '',
+        [Validators.min(0)]
+      ],
+      withdrawalFeeForTransfers: [false],
+      enforceMinRequiredBalance: [false],
+      minRequiredBalance: [
+        '',
+        [Validators.min(0)]
+      ],
+      balanceFrequency: ['Monthly'],
+      enableLockinPeriod: [false],
+      lockinPeriodFrequency: [''],
+      lockinPeriodFrequencyType: [''],
+      accountClosedZeroBalanceInDayClosing: [false],
+      allowOverdraft: [false],
+      odAccountClosedZeroBalanceInDayClosing: [false],
+      avgBalanceCalcPeriod: ['6M'],
+      validForPeriod: ['3M'],
+      overdraftLimit: [
+        '',
+        [Validators.min(0)]
+      ],
+      nominalAnnualInterestRateOverdraft: [
+        '',
+        [Validators.min(0)]
+      ]
+    });
+  }
+
+  ngOnInit() {
+    if (this._currentAccountProductTemplate) {
+      this.applyTemplate(this._currentAccountProductTemplate);
+    }
+  }
+
+  private applyTemplate(t: any) {
+    this.lockinPeriodFrequencyTypeData = t.lockinPeriodFrequencyTypeOptions || [];
+    const hasLockin = !!(t.lockinPeriodFrequency && t.lockinPeriodFrequency > 0);
+
+    this.currentAccountSettingsForm.patchValue({
+      minRequiredOpeningBalance: t.minRequiredOpeningBalance,
+      withdrawalFeeForTransfers: t.withdrawalFeeForTransfers || false,
+      enforceMinRequiredBalance: t.enforceMinRequiredBalance || false,
+      minRequiredBalance: t.minRequiredBalance,
+      balanceFrequency: t.balanceFrequency || 'Monthly',
+      enableLockinPeriod: hasLockin,
+      lockinPeriodFrequency: hasLockin ? t.lockinPeriodFrequency : '',
+      lockinPeriodFrequencyType: hasLockin ? t.lockinPeriodFrequencyType?.id || '' : '',
+      accountClosedZeroBalanceInDayClosing: t.accountClosedZeroBalanceInDayClosing || false,
+      allowOverdraft: t.allowOverdraft || false,
+      odAccountClosedZeroBalanceInDayClosing: t.odAccountClosedZeroBalanceInDayClosing || false,
+      avgBalanceCalcPeriod: t.avgBalanceCalcPeriod || '6M',
+      validForPeriod: t.validForPeriod || '3M',
+      overdraftLimit: t.overdraftLimit || '',
+      nominalAnnualInterestRateOverdraft: t.nominalAnnualInterestRateOverdraft || ''
+    });
+  }
+
+  buildDependencies() {
+    this.currentAccountSettingsForm.get('enableLockinPeriod').valueChanges.subscribe((enabled: boolean) => {
+      const freq = this.currentAccountSettingsForm.get('lockinPeriodFrequency');
+      const type = this.currentAccountSettingsForm.get('lockinPeriodFrequencyType');
+      if (enabled) {
+        freq.setValidators([
+          Validators.required,
+          Validators.min(1)
+        ]);
+        type.setValidators([Validators.required]);
+      } else {
+        freq.setValue('');
+        type.setValue('');
+        freq.clearValidators();
+        type.clearValidators();
+      }
+      freq.updateValueAndValidity();
+      type.updateValueAndValidity();
+    });
+  }
+
+  get currentAccountSettings() {
+    const value = { ...this.currentAccountSettingsForm.getRawValue() };
+
+    if (!value.enableLockinPeriod) {
+      value.lockinPeriodFrequency = null;
+      value.lockinPeriodFrequencyType = null;
+    }
+    delete value.enableLockinPeriod;
+    delete value.balanceFrequency;
+
+    if (!value.allowOverdraft) {
+      delete value.overdraftLimit;
+      delete value.nominalAnnualInterestRateOverdraft;
+      delete value.avgBalanceCalcPeriod;
+      delete value.validForPeriod;
+      delete value.odAccountClosedZeroBalanceInDayClosing;
+    }
+
+    return value;
+  }
+}
@@ -0,0 +1,71 @@
+<!--
+  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]="currentAccountTermForm">
+  <div class="sat-section">
+    <div class="sat-section__header">
+      <span class="sat-section__badge"><i class="fas fa-chart-line"></i></span>
+      <span>Interest On OD</span>
+    </div>
+    <div class="sat-body">
+      <!-- Interest Posting Frequency -->
+      <mat-form-field appearance="outline" class="sat-field">
+        <mat-label>Interest Posting Frequency</mat-label>
+        <mat-select formControlName="interestPostingPeriodType" required>
+          @for (opt of interestPostingPeriodTypeData; track opt) {
+            <mat-option [value]="opt.id">{{ opt.value | translateKey: 'catalogs' }}</mat-option>
+          }
+        </mat-select>
+        <mat-error>Interest Posting Frequency is <strong>required</strong></mat-error>
+      </mat-form-field>
+
+      <!-- Footer: Auto Post + Frequency Fix Day + Last Interest Date -->
+      <div class="sat-footer">
+        <div class="sat-footer__grid">
+          <div class="sat-toggle-card">
+            <div>
+              <h4>Auto Interest Post</h4>
+            </div>
+            <div class="sat-toggle-card__choices">
+              @for (option of yesNoOptions; track option.value) {
+                <label class="sat-radio-label">
+                  <input type="radio" formControlName="autoPost" [value]="option.value" />
+                  <span>{{ option.label }}</span>
+                </label>
+              }
+            </div>
+          </div>
+
+          <mat-form-field appearance="outline" class="sat-field">
+            <mat-label>Frequency (Fix Day)</mat-label>
+            <input type="number" matInput formControlName="frequencyFixDay" min="0" />
+            <mat-hint>Days</mat-hint>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" class="sat-field" (click)="lastInterestDatePicker.open()">
+            <mat-label>Last Interest Date</mat-label>
+            <input
+              matInput
+              [matDatepicker]="lastInterestDatePicker"
+              formControlName="lastInterestDate"
+              [min]="minDate"
+              [max]="maxDate"
+            />
+            <mat-datepicker-toggle matSuffix [for]="lastInterestDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #lastInterestDatePicker></mat-datepicker>
+          </mat-form-field>
+        </div>
+
+        <div class="sat-note">
+          <span>⚠️</span>
+          <span>Daily product-based interest accrual enabled — interest calculated EOD on daily closing balance.</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
@@ -0,0 +1,166 @@
+/**
+ * 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/.
+ */
+
+$accent: #0ea5e9;
+$border: #e2e8f0;
+$gray-50: #f8f9fa;
+$gray-200: #e8eaed;
+$gray-900: #202124;
+
+.sat-section {
+  border: 1px solid $border;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+
+  & + & {
+    margin-top: 16px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 24px;
+    background: $gray-50;
+    border-bottom: 1px solid $gray-200;
+
+    span {
+      font-size: 14px;
+      font-weight: 600;
+      color: $gray-900;
+    }
+  }
+}
+
+.sat-section__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  background: #eff6ff;
+  font-size: 14px;
+}
+
+.sat-body {
+  background: #fff;
+  padding: 18px 24px 24px;
+}
+
+.sat-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 18px;
+  border-radius: 8px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  font-size: 13px;
+  color: $gray-900;
+
+  &__icon {
+    font-size: 16px;
+  }
+}
+
+.sat-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 4px 16px;
+
+  @media (width <= 900px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (width <= 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.sat-field {
+  width: 100%;
+}
+
+.sat-footer {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid $border;
+
+  &__grid {
+    display: grid;
+    grid-template-columns: auto 1fr 1fr;
+    gap: 4px 16px;
+    align-items: start;
+
+    @media (width <= 900px) {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    @media (width <= 600px) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+.sat-toggle-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 14px;
+  border: 1px solid $border;
+  border-radius: 8px;
+  background: $gray-50;
+  min-height: 56px;
+
+  h4 {
+    margin: 0;
+    font-size: 12px;
+    font-weight: 600;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  &__choices {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+}
+
+.sat-radio-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  color: $gray-900;
+  cursor: pointer;
+
+  [type='radio'] {
+    accent-color: $accent;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+}
+
+.sat-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-top: 12px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  font-size: 13px;
+  color: #92400e;
+}
@@ -0,0 +1,102 @@
+/**
+ * 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, Input, OnInit, inject } from '@angular/core';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { Dates } from 'app/core/utils/dates';
+import { SettingsService } from 'app/settings/settings.service';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+@Component({
+  selector: 'mifosx-current-account-term-step',
+  templateUrl: './current-account-term-step.component.html',
+  styleUrls: ['./current-account-term-step.component.scss'],
+  imports: [...STANDALONE_SHARED_IMPORTS]
+})
+export class CurrentAccountTermStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private dateUtils = inject(Dates);
+  private settingsService = inject(SettingsService);
+
+  private _currentAccountProductTemplate: any;
+
+  @Input()
+  set currentAccountProductTemplate(value: any) {
+    this._currentAccountProductTemplate = value;
+    if (value && this.currentAccountTermForm) {
+      this.applyTemplate(value);
+    }
+  }
+  get currentAccountProductTemplate(): any {
+    return this._currentAccountProductTemplate;
+  }
+
+  currentAccountTermForm: UntypedFormGroup;
+
+  interestPostingPeriodTypeData: any[] = [];
+
+  yesNoOptions = [
+    { value: true, label: 'Yes' },
+    { value: false, label: 'No' }
+  ];
+
+  minDate = new Date(2000, 0, 1);
+  maxDate = new Date();
+
+  constructor() {
+    this.createForm();
+  }
+
+  createForm() {
+    this.currentAccountTermForm = this.formBuilder.group({
+      currencyCode: [{ value: '', disabled: true }],
+      interestPostingPeriodType: [
+        '',
+        Validators.required
+      ],
+      autoPost: [true],
+      frequencyFixDay: [
+        30,
+        [Validators.min(0)]
+      ],
+      lastInterestDate: ['']
+    });
+  }
+
+  ngOnInit() {
+    this.maxDate = this.settingsService.businessDate;
+    if (this._currentAccountProductTemplate) {
+      this.applyTemplate(this._currentAccountProductTemplate);
+    }
+  }
+
+  private applyTemplate(t: any) {
+    this.maxDate = this.settingsService.businessDate;
+    this.interestPostingPeriodTypeData = t.interestPostingPeriodTypeOptions || [];
+
+    this.currentAccountTermForm.patchValue({
+      currencyCode: t.currency?.code,
+      interestPostingPeriodType: t.interestPostingPeriodType?.id,
+      autoPost: t.autoPost ?? true,
+      frequencyFixDay: t.frequencyFixDay ?? 30,
+      lastInterestDate: t.lastInterestDate ? new Date(t.lastInterestDate) : ''
+    });
+  }
+
+  get currentAccountTerms() {
+    const value = { ...this.currentAccountTermForm.getRawValue() };
+    const dateFormat = this.settingsService.dateFormat;
+
+    if (value.lastInterestDate instanceof Date) {
+      value.lastInterestDate = this.dateUtils.formatDate(value.lastInterestDate, dateFormat) || '';
+    }
+
+    delete value.currencyCode;
+    return value;
+  }
+}