charges add module add in the saving account and current account

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
-        mat-raised-button
-        color="primary"
-        type="button"
-        [disabled]="!dateRangeForm.valid"
-        (click)="filterTransactions()"
-      >
+      <button mat-raised-button color="primary" type="button" (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: [
-        '',
-        Validators.required
-      ],
-      toDate: [
-        '',
-        Validators.required
-      ]
+      fromDate: [''],
+      toDate: ['']
+    });
+  }
+
+  private computeRunningBalances(transactions: CurrentAccountTransaction[]): CurrentAccountTransaction[] {
+    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;
   }