charges add module add in the saving account and current account

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
-        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;
   }