charges add module add in the saving account and current account

src/app/current-accounts/common-resolvers/current-account-actions.resolver.ts

@@ -69,6 +69,7 @@ export class CurrentAccountActionsResolver {
           this.currentAccountsService.getCurrentAccountTransactionTemplateResource(currentAccountId),
           this.currentAccountsService.getCurrentAccountData(currentAccountId)
         ]);
+      case 'Activate':
       case 'Apply Annual Fees':
         return this.currentAccountsService.getCurrentAccountData(currentAccountId);
       default:

src/app/current-accounts/current-account-actions/activate-current-account/activate-current-account.component.html

@@ -30,6 +30,18 @@
               </mat-error>
             }
           </mat-form-field>
+
+          <mat-form-field class="flex-fill">
+            <mat-label>Opening Balance</mat-label>
+            <input matInput type="number" [min]="minRequiredOpeningBalance ?? 0" formControlName="openingBalance" />
+            <span matPrefix>₹&nbsp;</span>
+            @if (minRequiredOpeningBalance) {
+              <mat-hint>Minimum required: ₹{{ minRequiredOpeningBalance }}</mat-hint>
+            }
+            @if (activateCurrentAccountForm.controls.openingBalance.hasError('min')) {
+              <mat-error>Opening balance must be at least ₹{{ minRequiredOpeningBalance ?? 0 }}</mat-error>
+            }
+          </mat-form-field>
         </div>
       </mat-card-content>
 

src/app/current-accounts/current-account-actions/activate-current-account/activate-current-account.component.ts

@@ -7,7 +7,7 @@
  */
 
 /** Angular Imports */
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, Input, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -36,6 +36,8 @@ export class ActivateCurrentAccountComponent implements OnInit {
   private router = inject(Router);
   private settingsService = inject(SettingsService);
 
+  @Input() minRequiredOpeningBalance: number | null = null;
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -69,10 +71,18 @@ export class ActivateCurrentAccountComponent implements OnInit {
    * Creates the activate current account form.
    */
   createActivateCurrentAccountForm() {
+    const minBalance = this.minRequiredOpeningBalance ?? 0;
     this.activateCurrentAccountForm = this.formBuilder.group({
       activatedOnDate: [
         '',
         Validators.required
+      ],
+      openingBalance: [
+        minBalance,
+        [
+          Validators.required,
+          Validators.min(minBalance)
+        ]
       ]
     });
   }

src/app/current-accounts/current-account-actions/current-account-actions.component.html

@@ -13,7 +13,9 @@
   <mifosx-reject-current-account></mifosx-reject-current-account>
 }
 @if (actions['Activate']) {
-  <mifosx-activate-current-account></mifosx-activate-current-account>
+  <mifosx-activate-current-account
+    [minRequiredOpeningBalance]="accountData?.minRequiredOpeningBalance"
+  ></mifosx-activate-current-account>
 }
 @if (actions['Undo Approval']) {
   <mifosx-undo-approval-current-account></mifosx-undo-approval-current-account>

src/app/current-accounts/current-account-actions/current-account-actions.component.ts

@@ -102,10 +102,13 @@ export class CurrentAccountActionsComponent {
   /**
    * @param {ActivatedRoute} route Activated Route
    */
+  accountData: any;
+
   constructor() {
     this.route.data.subscribe((data: { currentAccountActionData: any }) => {
       if (data.currentAccountActionData) {
         this.currency = data.currentAccountActionData.currency;
+        this.accountData = data.currentAccountActionData;
       }
     });
     const name = this.route.snapshot.params['name'] as string;

src/app/current-accounts/current-account-view/charges-tab/charges-tab.component.html

@@ -43,44 +43,46 @@
 
       <ng-container matColumnDef="dueAsOf">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due As Of' | translate }}</th>
-        <td mat-cell *matCellDef="let charge">{{ charge.dueDate | dateFormat }}</td>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeDueDate | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repeats On (M/d)' | translate }}</th>
-        <td mat-cell *matCellDef="let charge">{{ charge.feeOnMonthDay ? charge.feeOnMonthDay.join('/') : '' }}</td>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.feeOnMonthDay ? charge.feeOnMonthDay.month + '/' + charge.feeOnMonthDay.day : '' }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Calculation Type' | translate }}</th>
-        <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}</td>
+        <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType?.value | translateKey: 'catalogs' }}</td>
       </ng-container>
 
       <ng-container matColumnDef="due">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.amount | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+          {{ charge.amount | currency: currentAccountData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.amountPaid | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+          {{ charge.amountPaid | currency: currentAccountData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.amountWaived | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+          {{ charge.amountWaived | currency: currentAccountData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.amountOutstanding | currency: charge.currency.code : 'symbol-narrow' : '1.2-2' }}
+          {{ charge.amountOutstanding | currency: currentAccountData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </td>
       </ng-container>
 

src/app/current-accounts/current-account-view/current-account-view.component.ts

@@ -127,7 +127,7 @@ export class CurrentAccountViewComponent implements OnInit {
    */
   setConditionalButtons() {
     const status = this.currentAccountData.status.value;
-    this.isActive = status === 'Active';
+    this.isActive = status === 'Active' || status === 'active';
     const subStatus = this.currentAccountData.subStatus;
     this.buttonConfig = new CurrentAccountButtonsConfiguration(status, subStatus);
     if (this.currentAccountData.clientId) {

src/app/current-accounts/current-account-view/current-accounts-buttons.config.ts

@@ -109,6 +109,7 @@ export class CurrentAccountButtonsConfiguration {
           ];
         }
         break;
+      case 'Submitted and Pending Approval':
       case 'Submitted and pending approval':
         this.buttonsArray = [
           {
@@ -165,6 +166,7 @@ export class CurrentAccountButtonsConfiguration {
           }
         ];
         break;
+      case 'Submitted and Pending Approval':
       case 'Submitted and pending approval':
         this.optionArray = [
           {

src/app/current-accounts/current-account-view/passbook-tab/passbook-tab.component.html

@@ -24,13 +24,7 @@
         <mat-datepicker #toDatePicker></mat-datepicker>
       </mat-form-field>
 
-      <button
+      <button mat-raised-button color="primary" type="button" (click)="filterTransactions()">
-        mat-raised-button
-        color="primary"
-        type="button"
-        [disabled]="!dateRangeForm.valid"
-        (click)="filterTransactions()"
-      >
         <mat-icon>filter_list</mat-icon>
         {{ 'labels.buttons.Filter' | translate }}
       </button>
@@ -137,7 +131,11 @@
     } @else {
       <div class="passbook-no-data">
         <mat-icon>info_outline</mat-icon>
-        <span>{{ 'labels.text.No transactions found for the selected date range.' | translate }}</span>
+        <span>{{
+          isFiltered
+            ? ('labels.text.No transactions found for the selected date range.' | translate)
+            : 'No transactions found.'
+        }}</span>
       </div>
     }
 

src/app/current-accounts/current-account-view/passbook-tab/passbook-tab.component.ts

@@ -9,7 +9,7 @@
 /** Angular Imports */
 import { Component, OnInit, OnDestroy, inject, ElementRef, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { CurrencyPipe } from '@angular/common';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -84,19 +84,31 @@ export class PassbookTabComponent implements OnInit, OnDestroy {
       this.accountBalance = account.summary?.accountBalance || 0;
       this.availableBalance = account.summary?.availableBalance || 0;
       this.activatedOnDate = account.timeline?.activatedOnDate || null;
-      this.allTransactions = account.transactions || [];
+      this.allTransactions = this.computeRunningBalances(account.transactions || []);
       this.filteredTransactions = [...this.allTransactions];
     });
 
     this.dateRangeForm = this.formBuilder.group({
-      fromDate: [
+      fromDate: [''],
-        '',
+      toDate: ['']
-        Validators.required
+    });
-      ],
+  }
-      toDate: [
+
-        '',
+  private computeRunningBalances(transactions: CurrentAccountTransaction[]): CurrentAccountTransaction[] {
-        Validators.required
+    let balance = 0;
-      ]
+    return transactions.map((txn) => {
+      if (txn.runningBalance != null) {
+        balance = txn.runningBalance;
+      } else {
+        const amount = txn.amount || 0;
+        if (this.isDebit(txn.transactionType)) {
+          balance = balance - amount;
+        } else {
+          balance = balance + amount;
+        }
+        txn = { ...txn, runningBalance: balance };
+      }
+      return txn;
     });
   }
 
@@ -113,14 +125,15 @@ export class PassbookTabComponent implements OnInit, OnDestroy {
     const fromDate = this.dateRangeForm.value.fromDate;
     const toDate = this.dateRangeForm.value.toDate;
 
-    if (!fromDate || !toDate) return;
-
-    const from = new Date(fromDate).getTime();
-    const to = new Date(toDate).getTime();
-
     this.filteredTransactions = this.allTransactions.filter((txn: CurrentAccountTransaction) => {
       const txnDate = this.getTransactionDateAsTime(txn.date);
-      return txnDate >= from && txnDate <= to;
+      if (fromDate && new Date(fromDate).getTime() > txnDate) return false;
+      if (toDate) {
+        const toEnd = new Date(toDate);
+        toEnd.setHours(23, 59, 59, 999);
+        if (toEnd.getTime() < txnDate) return false;
+      }
+      return true;
     });
     this.isFiltered = true;
   }

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

@@ -46,7 +46,8 @@ export class DatetimeFormatPipe implements PipeTransform, OnDestroy {
         d,
         hh,
         mm,
-        ss
+        ss,
+        ms
       ] = value as number[];
       if (hh != null) {
         dateVal = moment({
@@ -55,7 +56,8 @@ export class DatetimeFormatPipe implements PipeTransform, OnDestroy {
           date: d,
           hour: hh,
           minute: mm ?? 0,
-          second: ss ?? 0
+          second: ss ?? 0,
+          millisecond: ms != null ? Math.floor(ms / 1000000) : 0
         });
       } else {
         dateVal = moment({ year: y, month: (m ?? 1) - 1, date: d });

src/app/savings/common-resolvers/savings-account-actions.resolver.ts

@@ -69,6 +69,7 @@ export class SavingsAccountActionsResolver {
           this.savingsService.getSavingsTransactionTemplateResource(savingAccountId),
           this.savingsService.getSavingsAccountData(savingAccountId)
         ]);
+      case 'Activate':
       case 'Apply Annual Fees':
         return this.savingsService.getSavingsAccountData(savingAccountId);
       default:

src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html

@@ -30,6 +30,18 @@
               </mat-error>
             }
           </mat-form-field>
+
+          <mat-form-field class="flex-fill">
+            <mat-label>Opening Balance</mat-label>
+            <input matInput type="number" [min]="minRequiredOpeningBalance ?? 0" formControlName="openingBalance" />
+            <span matPrefix>₹&nbsp;</span>
+            @if (minRequiredOpeningBalance) {
+              <mat-hint>Minimum required: ₹{{ minRequiredOpeningBalance }}</mat-hint>
+            }
+            @if (activateSavingsAccountForm.controls.openingBalance.hasError('min')) {
+              <mat-error>Opening balance must be at least ₹{{ minRequiredOpeningBalance ?? 0 }}</mat-error>
+            }
+          </mat-form-field>
         </div>
       </mat-card-content>
 

src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.ts

@@ -7,7 +7,7 @@
  */
 
 /** Angular Imports */
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, Input, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -36,6 +36,8 @@ export class ActivateSavingsAccountComponent implements OnInit {
   private router = inject(Router);
   private settingsService = inject(SettingsService);
 
+  @Input() minRequiredOpeningBalance: number | null = null;
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -69,10 +71,18 @@ export class ActivateSavingsAccountComponent implements OnInit {
    * Creates the activate savings account form.
    */
   createActivateSavingsAccountForm() {
+    const minBalance = this.minRequiredOpeningBalance ?? 0;
     this.activateSavingsAccountForm = this.formBuilder.group({
       activatedOnDate: [
         '',
         Validators.required
+      ],
+      openingBalance: [
+        minBalance,
+        [
+          Validators.required,
+          Validators.min(minBalance)
+        ]
       ]
     });
   }
@@ -89,11 +99,14 @@ export class ActivateSavingsAccountComponent implements OnInit {
     if (activateSavingsAccountFormData.activatedOnDate instanceof Date) {
       activateSavingsAccountFormData.activatedOnDate = this.dateUtils.formatDate(prevActivatedOnDate, dateFormat);
     }
-    const data = {
+    const data: any = {
       ...activateSavingsAccountFormData,
       dateFormat,
       locale
     };
+    if (data.openingBalance === 0 || data.openingBalance === null) {
+      delete data.openingBalance;
+    }
     this.savingsService.executeSavingsAccountCommand(this.accountId, 'activate', data).subscribe(() => {
       this.router.navigate(['../../transactions'], { relativeTo: this.route });
     });

src/app/savings/saving-account-actions/saving-account-actions.component.html

@@ -13,7 +13,9 @@
   <mifosx-reject-savings-account></mifosx-reject-savings-account>
 }
 @if (actions['Activate']) {
-  <mifosx-activate-savings-account></mifosx-activate-savings-account>
+  <mifosx-activate-savings-account
+    [minRequiredOpeningBalance]="accountData?.minRequiredOpeningBalance"
+  ></mifosx-activate-savings-account>
 }
 @if (actions['Undo Approval']) {
   <mifosx-undo-approval-savings-account></mifosx-undo-approval-savings-account>

src/app/savings/saving-account-actions/saving-account-actions.component.ts

@@ -102,10 +102,13 @@ export class SavingAccountActionsComponent {
   /**
    * @param {ActivatedRoute} route Activated Route
    */
+  accountData: any;
+
   constructor() {
     this.route.data.subscribe((data: { savingsAccountActionData: any }) => {
       if (data.savingsAccountActionData) {
         this.currency = data.savingsAccountActionData.currency;
+        this.accountData = data.savingsAccountActionData;
       }
     });
     const name = this.route.snapshot.params['name'] as string;

src/app/savings/savings-account-view/charges-tab/charges-tab.component.html

@@ -48,7 +48,15 @@
 
       <ng-container matColumnDef="repeatsOn">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repeats On (M/d)' | translate }}</th>
-        <td mat-cell *matCellDef="let charge">{{ charge.feeOnMonthDay ? charge.feeOnMonthDay.join('/') : '' }}</td>
+        <td mat-cell *matCellDef="let charge">
+          {{
+            charge.feeOnMonthDay
+              ? charge.feeOnMonthDay.join
+                ? charge.feeOnMonthDay.join('/')
+                : charge.feeOnMonthDay
+              : ''
+          }}
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">

src/app/savings/savings-account-view/passbook-tab/passbook-tab.component.html

@@ -7,8 +7,8 @@
 -->
 
 <div class="passbook-container">
-  <!-- Date Range Filter -->
+  <!-- Filter Bar -->
-  <div class="passbook-filter-bar">
+  <div class="passbook-filter-bar no-print">
     <form [formGroup]="dateRangeForm" class="passbook-filter-form">
       <mat-form-field appearance="outline" class="passbook-date-field" (click)="fromDatePicker.open()">
         <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
@@ -46,106 +46,151 @@
 
       <button mat-raised-button color="accent" type="button" (click)="printPassbook()">
         <mat-icon>print</mat-icon>
-        {{ 'labels.buttons.Print Passbook' | translate }}
+        {{ 'labels.buttons.Print' | translate }}
       </button>
     </form>
   </div>
 
-  <!-- Passbook Preview (Printable Content) -->
+  <!-- Bank Statement -->
-  <div class="passbook-preview" #passbookContent>
+  <div class="statement-wrapper" #passbookContent>
-    <div class="passbook-header">
+    <!-- Bank Header -->
-      <h2>{{ 'labels.heading.Savings Account Passbook' | translate }}</h2>
+    <div class="bank-header">
-      <h3>{{ productName }}</h3>
+      <div class="bank-logo-area">
-    </div>
+        <div class="bank-logo-circle">
-
+          <mat-icon>account_balance</mat-icon>
-    <!-- Account Info -->
+        </div>
-    <div class="passbook-info-grid">
+        <div class="bank-name-block">
-      <div class="passbook-info-item">
+          <div class="bank-title">LincPay Co-operative Bank Ltd.</div>
-        <div class="label">{{ 'labels.inputs.Account Number' | translate }}</div>
+          <div class="bank-subtitle">Account Statement</div>
-        <div class="value">{{ accountNo }}</div>
+        </div>
       </div>
-      <div class="passbook-info-item">
+      <div class="statement-label">
-        <div class="label">{{ 'labels.inputs.Account Holder' | translate }}</div>
+        <div class="stmt-label-text">STATEMENT OF ACCOUNT</div>
-        <div class="value">{{ clientName }}</div>
+        <div class="stmt-period">As on: {{ maxDate | dateFormat }}</div>
-      </div>
-      <div class="passbook-info-item">
-        <div class="label">{{ 'labels.inputs.Savings Product' | translate }}</div>
-        <div class="value">{{ productName }}</div>
-      </div>
-      <div class="passbook-info-item">
-        <div class="label">{{ 'labels.inputs.Opening Date' | translate }}</div>
-        <div class="value">{{ activatedOnDate | dateFormat }}</div>
-      </div>
-      <div class="passbook-info-item">
-        <div class="label">{{ 'labels.inputs.Status' | translate }}</div>
-        <div class="value">{{ status }}</div>
-      </div>
-      <div class="passbook-info-item">
-        <div class="label">{{ 'labels.inputs.Interest Rate' | translate }}</div>
-        <div class="value">{{ interestRate }}%</div>
       </div>
     </div>
 
-    <!-- Balance Summary -->
+    <!-- Account Details -->
-    <div class="passbook-balance-row">
+    <div class="account-details-band">
-      <div class="balance-item">
+      <div class="account-details-grid">
-        <span>{{ 'labels.inputs.Current Balance' | translate }}: </span>
+        <div class="detail-block">
-        <b>{{ accountBalance | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}</b>
+          <div class="detail-label">Account Holder</div>
+          <div class="detail-value bold">{{ clientName | uppercase }}</div>
+        </div>
+        <div class="detail-block">
+          <div class="detail-label">Account Number</div>
+          <div class="detail-value mono bold">{{ accountNo }}</div>
+        </div>
+        <div class="detail-block">
+          <div class="detail-label">Product</div>
+          <div class="detail-value">{{ productName }}</div>
+        </div>
+        <div class="detail-block">
+          <div class="detail-label">Account Opening Date</div>
+          <div class="detail-value">{{ activatedOnDate | dateFormat }}</div>
+        </div>
+        <div class="detail-block">
+          <div class="detail-label">Status</div>
+          <div class="detail-value status-badge" [class.active]="status === 'Active'">{{ status }}</div>
+        </div>
+        <div class="detail-block">
+          <div class="detail-label">Interest Rate (p.a.)</div>
+          <div class="detail-value">{{ interestRate }}%</div>
+        </div>
       </div>
-      <div class="balance-item">
+    </div>
-        <span>{{ 'labels.inputs.Available Balance' | translate }}: </span>
+
-        <b>{{ availableBalance | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}</b>
+    <!-- Balance Summary Strip -->
+    <div class="balance-summary-strip">
+      <div class="balance-box">
+        <div class="balance-box-label">Current Balance</div>
+        <div class="balance-box-value">{{ accountBalance | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}</div>
+      </div>
+      <div class="balance-divider"></div>
+      <div class="balance-box">
+        <div class="balance-box-label">Available Balance</div>
+        <div class="balance-box-value">
+          {{ availableBalance | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
+        </div>
+      </div>
+      <div class="balance-divider"></div>
+      <div class="balance-box">
+        <div class="balance-box-label">Total Transactions</div>
+        <div class="balance-box-value">{{ filteredTransactions.length }}</div>
       </div>
     </div>
 
     <!-- Transactions Table -->
     @if (filteredTransactions.length > 0) {
-      <table>
+      <table class="statement-table">
         <thead>
           <tr>
-            <th>#</th>
+            <th class="col-sr">#</th>
-            <th>{{ 'labels.inputs.Date' | translate }}</th>
+            <th class="col-date">Date</th>
-            <th>{{ 'labels.inputs.Description' | translate }}</th>
+            <th class="col-desc">Description</th>
-            <th class="text-right">{{ 'labels.inputs.Debit' | translate }}</th>
+            <th class="col-ref">Ref No.</th>
-            <th class="text-right">{{ 'labels.inputs.Credit' | translate }}</th>
+            <th class="col-amount text-right">Debit (Dr)</th>
-            <th class="text-right">{{ 'labels.inputs.Balance' | translate }}</th>
+            <th class="col-amount text-right">Credit (Cr)</th>
+            <th class="col-balance text-right">Balance (&#8377;)</th>
           </tr>
         </thead>
         <tbody>
           @for (txn of filteredTransactions; track txn.id; let i = $index) {
-            <tr [class.reversed]="txn.reversed">
+            <tr
-              <td>{{ i + 1 }}</td>
+              [class.reversed-row]="txn.reversed"
-              <td>{{ txn.date | dateFormat }}</td>
+              [class.debit-row]="isDebit(txn.transactionType) && !txn.reversed"
-              <td>{{ txn.transactionType.value }}</td>
+              [class.credit-row]="!isDebit(txn.transactionType) && !txn.reversed"
-              <td class="text-right">
+            >
+              <td class="col-sr text-center">{{ i + 1 }}</td>
+              <td class="col-date">{{ txn.date | dateFormat }}</td>
+              <td class="col-desc">
+                <span class="txn-desc">{{ txn.transactionType.value }}</span>
+                @if (txn.reversed) {
+                  <span class="reversed-badge">REVERSED</span>
+                }
+              </td>
+              <td class="col-ref text-muted mono">{{ txn.id }}</td>
+              <td class="col-amount text-right debit-amount">
                 @if (isDebit(txn.transactionType)) {
                   {{ txn.amount | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
                 }
               </td>
-              <td class="text-right">
+              <td class="col-amount text-right credit-amount">
                 @if (!isDebit(txn.transactionType)) {
                   {{ txn.amount | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
                 }
               </td>
-              <td class="text-right">
+              <td class="col-balance text-right balance-amount">
                 {{ txn.runningBalance | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
               </td>
             </tr>
           }
         </tbody>
+        <tfoot>
+          <tr class="total-row">
+            <td colspan="4" class="text-right total-label">Closing Balance</td>
+            <td class="text-right total-label"></td>
+            <td class="text-right total-label"></td>
+            <td class="text-right closing-balance">
+              {{ accountBalance | currency: currency?.code : 'symbol-narrow' : '1.2-2' }}
+            </td>
+          </tr>
+        </tfoot>
       </table>
     } @else {
-      <div class="passbook-no-data">
+      <div class="no-data-block">
-        <mat-icon>info_outline</mat-icon>
+        <mat-icon>inbox</mat-icon>
-        <span>{{ 'labels.text.No transactions found for the selected date range.' | translate }}</span>
+        <p>No transactions found for the selected date range.</p>
       </div>
     }
 
-    <!-- Footer -->
+    <!-- Statement Footer -->
-    <div class="passbook-footer">
+    <div class="statement-footer">
-      {{ 'labels.text.Generated on' | translate }}: {{ maxDate | dateFormat }}
+      <div class="footer-note">
-      &nbsp;|&nbsp;
+        This is a computer-generated statement and does not require a signature. For queries, contact your branch or
-      {{ 'labels.text.Total Transactions' | translate }}: {{ filteredTransactions.length }}
+        call customer care.
+      </div>
+      <div class="footer-meta">Generated on: {{ maxDate | dateFormat }} &nbsp;|&nbsp; Account No: {{ accountNo }}</div>
     </div>
   </div>
 </div>

src/app/savings/savings-account-view/passbook-tab/passbook-tab.component.scss

@@ -6,13 +6,31 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+// ─── Variables ──────────────────────────────────────────────────────────────
+$bank-primary: #1a3a6b; // deep navy (like SBI/PNB)
+$bank-accent: #c8a951; // gold trim
+$debit-color: #c0392b;
+$credit-color: #1a7a3f;
+$balance-color: #1a3a6b;
+$border-color: #d0d7e3;
+$row-alt: #f4f7fb;
+$header-bg: #1a3a6b;
+$header-text: #fff;
+
+// ─── Container ──────────────────────────────────────────────────────────────
 .passbook-container {
   padding: 16px;
+  background: #eef1f7;
+  min-height: 100%;
 }
 
-// Filter Bar
+// ─── Filter Bar ─────────────────────────────────────────────────────────────
 .passbook-filter-bar {
   margin-bottom: 16px;
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px 16px;
+  border: 1px solid $border-color;
 }
 
 .passbook-filter-form {
@@ -30,147 +48,388 @@
   flex: 1;
 }
 
-// Passbook Preview
+// ─── Statement Wrapper ───────────────────────────────────────────────────────
-.passbook-preview {
+.statement-wrapper {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 24px;
   background: #fff;
+  border: 1px solid $border-color;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
+  font-family: 'Segoe UI', Arial, sans-serif;
 }
 
-.passbook-header {
+// ─── Bank Header ─────────────────────────────────────────────────────────────
-  text-align: center;
+.bank-header {
-  margin-bottom: 20px;
+  background: $bank-primary;
-  border-bottom: 2px solid #1976d2;
+  padding: 18px 24px;
-  padding-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 4px solid $bank-accent;
+}
 
-  h2 {
+.bank-logo-area {
-    color: #1976d2;
+  display: flex;
-    font-size: 20px;
+  align-items: center;
-    margin: 0 0 4px;
+  gap: 14px;
-    font-weight: 600;
+}
-  }
 
-  h3 {
+.bank-logo-circle {
-    font-size: 14px;
+  width: 52px;
-    font-weight: 400;
+  height: 52px;
-    color: #666;
+  border-radius: 50%;
-    margin: 0;
+  background: $bank-accent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  mat-icon {
+    color: $bank-primary;
+    font-size: 28px;
+    width: 28px;
+    height: 28px;
   }
 }
 
-.passbook-info-grid {
+.bank-name-block {
-  display: grid;
+  .bank-title {
-  grid-template-columns: repeat(3, 1fr);
+    color: #fff;
-  gap: 12px 20px;
+    font-size: 18px;
-  margin-bottom: 16px;
+    font-weight: 700;
-  padding: 12px;
+    letter-spacing: 0.3px;
-  background: #f5f5f5;
+  }
-  border-radius: 6px;
-}
 
-.passbook-info-item {
+  .bank-subtitle {
-  .label {
+    color: $bank-accent;
-    font-size: 10px;
+    font-size: 11px;
-    font-weight: 600;
+    font-weight: 500;
-    color: #888;
+    letter-spacing: 1.5px;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  .value {
-    font-size: 13px;
-    color: #333;
     margin-top: 2px;
   }
 }
 
-.passbook-balance-row {
+.statement-label {
-  display: flex;
+  text-align: right;
-  justify-content: space-between;
-  margin-bottom: 16px;
-  padding: 10px 14px;
-  background: #e3f2fd;
-  border-radius: 6px;
-  font-size: 14px;
 
-  .balance-item {
+  .stmt-label-text {
-    b {
+    color: $bank-accent;
-      color: #1976d2;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+
+  .stmt-period {
+    color: rgb(255 255 255 / 75%);
+    font-size: 11px;
+    margin-top: 4px;
+  }
+}
+
+// ─── Account Details Band ────────────────────────────────────────────────────
+.account-details-band {
+  background: #f0f3f9;
+  border-bottom: 1px solid $border-color;
+  padding: 14px 24px;
+}
+
+.account-details-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px 24px;
+}
+
+.detail-block {
+  .detail-label {
+    font-size: 9px;
+    font-weight: 700;
+    color: #7a8aaa;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    margin-bottom: 3px;
+  }
+
+  .detail-value {
+    font-size: 13px;
+    color: #222;
+
+    &.bold {
+      font-weight: 600;
+    }
+
+    &.mono {
+      font-family: 'Courier New', monospace;
+      letter-spacing: 1px;
+    }
+
+    &.status-badge {
+      display: inline-block;
+      padding: 1px 8px;
+      border-radius: 10px;
+      font-size: 11px;
+      font-weight: 600;
+      background: #eee;
+      color: #555;
+
+      &.active {
+        background: #d4edda;
+        color: #155724;
+      }
     }
   }
 }
 
-// Transactions Table
+// ─── Balance Summary Strip ───────────────────────────────────────────────────
-table {
+.balance-summary-strip {
+  display: flex;
+  align-items: stretch;
+  background: $bank-primary;
+  padding: 0;
+}
+
+.balance-box {
+  flex: 1;
+  padding: 12px 20px;
+  text-align: center;
+
+  .balance-box-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: rgb(255 255 255 / 65%);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 4px;
+  }
+
+  .balance-box-value {
+    font-size: 16px;
+    font-weight: 700;
+    color: $bank-accent;
+  }
+}
+
+.balance-divider {
+  width: 1px;
+  background: rgb(255 255 255 / 15%);
+  margin: 8px 0;
+}
+
+// ─── Transactions Table ───────────────────────────────────────────────────────
+.statement-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 13px;
+  font-size: 12.5px;
 
-  th {
+  thead tr {
-    background: #1976d2;
+    background: #e8edf5;
-    color: #fff;
+    border-top: 1px solid $border-color;
-    padding: 8px 10px;
+    border-bottom: 2px solid $bank-primary;
-    text-align: left;
-    font-weight: 600;
-    font-size: 12px;
   }
 
-  td {
+  thead th {
-    padding: 6px 10px;
+    padding: 9px 10px;
-    border-bottom: 1px solid #e0e0e0;
+    font-size: 11px;
+    font-weight: 700;
+    color: $bank-primary;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    white-space: nowrap;
   }
 
-  tr:nth-child(even) {
+  tbody tr {
-    background: #fafafa;
+    border-bottom: 1px solid #e8ecf3;
+    transition: background 0.1s;
+
+    &:nth-child(even) {
+      background: $row-alt;
+    }
+
+    &:hover {
+      background: #dce6f5;
+    }
+
+    &.reversed-row {
+      opacity: 0.5;
+      text-decoration: line-through;
+    }
   }
 
-  tr:hover {
+  tbody td {
-    background: #f0f0f0;
+    padding: 7px 10px;
+    vertical-align: middle;
+    color: #333;
   }
 
-  .reversed {
+  tfoot .total-row {
-    text-decoration: line-through;
+    background: #e8edf5;
-    color: #999;
+    border-top: 2px solid $bank-primary;
+
+    td {
+      padding: 9px 10px;
+    }
   }
 }
 
+// ─── Column widths ────────────────────────────────────────────────────────────
+.col-sr {
+  width: 38px;
+}
+
+.col-date {
+  width: 110px;
+  white-space: nowrap;
+}
+
+.col-desc {
+  min-width: 160px;
+}
+
+.col-ref {
+  width: 80px;
+}
+
+.col-amount {
+  width: 110px;
+}
+
+.col-balance {
+  width: 120px;
+}
+
+// ─── Amount colors ────────────────────────────────────────────────────────────
+.debit-amount {
+  color: $debit-color;
+  font-weight: 500;
+}
+
+.credit-amount {
+  color: $credit-color;
+  font-weight: 500;
+}
+
+.balance-amount {
+  color: $balance-color;
+  font-weight: 600;
+  font-family: 'Courier New', monospace;
+}
+
+.total-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: $bank-primary;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.closing-balance {
+  font-size: 14px;
+  font-weight: 700;
+  color: $bank-primary;
+  font-family: 'Courier New', monospace;
+}
+
+// ─── Badges & misc ────────────────────────────────────────────────────────────
+.txn-desc {
+  font-weight: 500;
+}
+
+.reversed-badge {
+  display: inline-block;
+  margin-left: 8px;
+  font-size: 9px;
+  font-weight: 700;
+  color: #fff;
+  background: #e74c3c;
+  padding: 1px 5px;
+  border-radius: 3px;
+  letter-spacing: 0.5px;
+}
+
 .text-right {
   text-align: right;
 }
 
-.passbook-no-data {
+.text-center {
+  text-align: center;
+}
+
+.text-muted {
+  color: #999;
+}
+
+.mono {
+  font-family: 'Courier New', monospace;
+  font-size: 11px;
+}
+
+// ─── No Data ──────────────────────────────────────────────────────────────────
+.no-data-block {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  padding: 48px;
-  padding: 32px;
+  color: #aaa;
-  color: #888;
-  font-size: 14px;
 
   mat-icon {
-    color: #bbb;
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: 14px;
+    margin: 0;
   }
 }
 
-.passbook-footer {
+// ─── Statement Footer ─────────────────────────────────────────────────────────
-  margin-top: 16px;
+.statement-footer {
-  font-size: 11px;
+  background: #f0f3f9;
-  color: #999;
+  border-top: 1px solid $border-color;
+  padding: 12px 24px;
   text-align: center;
-  border-top: 1px solid #e0e0e0;
+
-  padding-top: 10px;
+  .footer-note {
+    font-size: 10px;
+    color: #888;
+    margin-bottom: 4px;
+    font-style: italic;
+  }
+
+  .footer-meta {
+    font-size: 10px;
+    color: #aaa;
+    letter-spacing: 0.3px;
+  }
 }
 
-// Responsive
+// ─── Responsive ───────────────────────────────────────────────────────────────
 @media (width <= 768px) {
-  .passbook-info-grid {
+  .account-details-grid {
     grid-template-columns: 1fr 1fr;
   }
 
-  .passbook-balance-row {
+  .bank-header {
     flex-direction: column;
-    gap: 8px;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .statement-label {
+    text-align: left;
+  }
+
+  .balance-summary-strip {
+    flex-direction: column;
+  }
+
+  .balance-divider {
+    width: auto;
+    height: 1px;
+    margin: 0 20px;
   }
 
   .passbook-filter-form {
@@ -188,19 +447,35 @@ table {
 }
 
 @media (width <= 480px) {
-  .passbook-info-grid {
+  .account-details-grid {
     grid-template-columns: 1fr;
   }
 }
 
-// Print-specific styles
+// ─── Print ────────────────────────────────────────────────────────────────────
 @media print {
-  .passbook-filter-bar {
+  .no-print {
     display: none !important;
   }
 
-  .passbook-preview {
+  .passbook-container {
-    border: none;
+    background: #fff;
     padding: 0;
   }
+
+  .statement-wrapper {
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  .bank-header {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .balance-summary-strip {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
 }

src/app/savings/savings-account-view/passbook-tab/passbook-tab.component.ts

@@ -84,7 +84,7 @@ export class PassbookTabComponent implements OnInit, OnDestroy {
       this.accountBalance = account.summary?.accountBalance || 0;
       this.availableBalance = account.summary?.availableBalance || 0;
       this.activatedOnDate = account.timeline?.activatedOnDate || null;
-      this.allTransactions = account.transactions || [];
+      this.allTransactions = this.recalculateRunningBalances(this.sortAscending(account.transactions || []));
       this.filteredTransactions = [...this.allTransactions];
     });
 
@@ -179,6 +179,33 @@ export class PassbookTabComponent implements OnInit, OnDestroy {
     printWindow.close();
   }
 
+  private recalculateRunningBalances(transactions: SavingsAccountTransaction[]): SavingsAccountTransaction[] {
+    let balance = 0;
+    return transactions.map((txn) => {
+      // Accruals and on-hold entries don't affect actual account balance
+      const affectsBalance =
+        !txn.transactionType.accrual && !txn.transactionType.amountHold && !txn.transactionType.amountRelease;
+
+      if (affectsBalance) {
+        if (this.isDebit(txn.transactionType)) {
+          balance -= txn.amount;
+        } else {
+          balance += txn.amount;
+        }
+      }
+      return { ...txn, runningBalance: parseFloat(balance.toFixed(2)) };
+    });
+  }
+
+  private sortAscending(transactions: SavingsAccountTransaction[]): SavingsAccountTransaction[] {
+    return [...transactions].sort((a, b) => {
+      const dateA = this.getTransactionDateAsTime(a.date);
+      const dateB = this.getTransactionDateAsTime(b.date);
+      if (dateA !== dateB) return dateA - dateB;
+      return (a.id as number) - (b.id as number);
+    });
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -113,7 +113,7 @@
       </ng-container>
 
       <ng-container matColumnDef="balance">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }} ↑</th>
         <td
           mat-cell
           class="r-amount"

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

@@ -124,7 +124,9 @@ export class TransactionsTabComponent implements OnInit {
    */
   constructor() {
     this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
-      this.transactionsData = data.savingsAccountData.transactions;
+      this.transactionsData = this.recalculateRunningBalances(
+        this.sortAscending(data.savingsAccountData.transactions || [])
+      );
       this.status = data.savingsAccountData.status.value;
       this.currency = data.savingsAccountData.currency || null;
     });
@@ -260,6 +262,32 @@ export class TransactionsTabComponent implements OnInit {
     });
   }
 
+  private recalculateRunningBalances(transactions: SavingsAccountTransaction[]): SavingsAccountTransaction[] {
+    let balance = 0;
+    return transactions.map((txn) => {
+      const affectsBalance =
+        !txn.transactionType.accrual && !txn.transactionType.amountHold && !txn.transactionType.amountRelease;
+      if (affectsBalance) {
+        if (this.isDebit(txn.transactionType)) {
+          balance -= txn.amount;
+        } else {
+          balance += txn.amount;
+        }
+      }
+      return { ...txn, runningBalance: parseFloat(balance.toFixed(2)) };
+    });
+  }
+
+  private sortAscending(transactions: SavingsAccountTransaction[]): SavingsAccountTransaction[] {
+    return [...transactions].sort((a, b) => {
+      const toTime = (d: any) =>
+        Array.isArray(d) && d.length >= 3 ? new Date(d[0], d[1] - 1, d[2]).getTime() : new Date(d).getTime();
+      const diff = toTime(a.date) - toTime(b.date);
+      if (diff !== 0) return diff;
+      return (a.id as number) - (b.id as number);
+    });
+  }
+
   private reload() {
     const clientId = this.route.parent.parent.snapshot.params['clientId'];
     const url: string = this.router.url;

src/app/settings/settings.service.ts

@@ -146,7 +146,7 @@ export class SettingsService {
     if (environment.defaultFormatDatetime) {
       return environment.defaultFormatDatetime;
     }
-    return 'dd MMMM yyyy HH:mm:ss';
+    return 'dd MMMM yyyy HH:mm:ss.SSS';
   }
 
   /**