Recurring Deposit view account homologation (#1910)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

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

@@ -0,0 +1,224 @@
+
+<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+
+<div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%" *ngIf="!isLoading">
+
+  <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
+    <div
+      *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval; else alternateDetails">
+      <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{'labels.inputs.Activated On' | translate}}</td>
+            <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
+              dateFormat) : 'Not Activated'}}</td>
+          </tr>
+          <tr>
+            <td>{{'labels.inputs.Field Officer' | translate}}</td>
+            <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+          </tr>
+          <tr>
+            <td>{{'labels.inputs.External Id' | translate}}</td>
+            <td *ngIf="savingsAccountData.externalId">
+              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+            </td>
+            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>              </tr>
+          <tr>
+            <td>{{'labels.inputs.Currency' | translate}}</td>
+            <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
+          </tr>
+          <tr>
+            <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
+            <td class="r-amount">{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <ng-template #alternateDetails>
+      <div>
+        <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
+        <table>
+          <tbody>
+            <tr>
+              <td>{{'labels.inputs.Field Officer' | translate}}</td>
+              <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+            </tr>
+            <tr>
+              <td>{{'labels.inputs.Balance' | translate}}</td>
+              <td class="r-amount">{{savingsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ng-template>
+
+    <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
+      <h4 class="table-headers">{{'labels.heading.Performance History' | translate}}</h4>
+      <table>
+        <tbody>
+          <tr *ngIf="savingsAccountData.summary.totalDeposits">
+            <td>{{'labels.inputs.Total Deposits' | translate}}</td>
+            <td class="r-amount">{{savingsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          </tr>
+          <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
+            <td>{{'labels.inputs.Total Interest Earned' | translate}}</td>
+            <td class="r-amount">{{savingsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div fxFlex="49%"
+    *ngIf="isActive; else alternateSummary">
+    <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
+    <table>
+      <tbody>
+        <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
+          <td>{{'labels.inputs.Total Withdrawls' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
+          <td>{{'labels.inputs.Withdrawals Fees' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.totalWithdrawalFees | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
+          <td>{{'labels.inputs.Annual Fees' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.totalAnnualFees | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
+          <td>{{'labels.inputs.Interest Earned' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
+          <td>{{'labels.inputs.Interest Posted' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.totalInterestPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
+          <td>{{'labels.inputs.Interest Earned Not Posted' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.interestNotPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
+          <td>{{'labels.inputs.Interest On Overdraft' | translate}}</td>
+          <td class="r-amount">
+            {{savingsAccountData.summary.totalOverdraftInterestDerived | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
+          <td>{{'labels.inputs.Overdraft Interest Not Posted' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.summary.interestNotPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.nominalAnnualInterestRate">
+          <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
+        </tr>
+        <tr>
+          <td>{{'labels.inputs.Interest Compounding Period' | translate}}</td>
+          <td>{{savingsAccountData.interestCompoundingPeriodType.value}}</td>
+        </tr>
+        <tr>
+          <td>{{'labels.inputs.Interest Posting Period' | translate}}</td>
+          <td>{{savingsAccountData.interestPostingPeriodType.value}}</td>
+        </tr>
+        <tr>
+          <td>{{'labels.inputs.Interest Calculated Using' | translate}}</td>
+          <td>{{savingsAccountData.interestCalculationType.value}}</td>
+        </tr>
+        <tr>
+          <td># {{'labels.inputs.Days in Year' | translate}}</td>
+          <td>{{savingsAccountData.interestCalculationDaysInYearType.value}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.withdrawalFee">
+          <td>{{'labels.inputs.Withdrawal Fee' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.withdrawalFee.amount | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
+          <td>{{'labels.inputs.Last Active Transaction Date' | translate}}</td>
+          <td>{{savingsAccountData.lastActiveTransactionDate | dateFormat}}</td>
+        </tr>
+        <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
+          <td>{{'labels.inputs.Substatus' | translate}}</td>
+          <td>{{savingsAccountData.subStatus.value}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.daysToInactive">
+          <td>{{'labels.inputs.Days to Inactive' | translate}}</td>
+          <td>{{savingsAccountData.daysToInactive}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.daysToDormancy">
+          <td>{{'labels.inputs.Days to Dormancy' | translate}}</td>
+          <td>{{savingsAccountData.daysToDormancy}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.daysToEscheat">
+          <td>{{'labels.inputs.Days to Escheat' | translate}}</td>
+          <td>{{savingsAccountData.daysToEscheat}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.annualFee">
+          <td>{{'labels.inputs.Annual Fee' | translate}}</td>
+          <td class="r-amount">
+            {{savingsAccountData.annualFee.amount | currency:currency.code:'symbol-narrow':'1.2-2'}}
+          </td>
+        </tr>
+        <tr *ngIf="savingsAccountData.allowOverdraft">
+          <td>{{'labels.inputs.Over Draft Limit' | translate}}</td>
+          <td class="r-amount">{{savingsAccountData.overdraftLimit | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.allowOverdraft">
+          <td>{{'labels.inputs.Min Overdraft Required for Interest Calculation' | translate}}</td>
+          <td>{{savingsAccountData.minOverdraftForInterestCalculation | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
+          <td>{{'labels.inputs.Min Balance Required for Interest Calculation' | translate}}</td>
+          <td>{{savingsAccountData.minBalanceForInterestCalculation | formatNumber}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.minRequiredBalance">
+          <td>{{'labels.inputs.Minimum Required Balance' | translate}}</td>
+          <td>{{savingsAccountData.minRequiredBalance | formatNumber}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
+          <td>{{'labels.inputs.Enforce Minimum Required Balance' | translate}}</td>
+          <td>{{savingsAccountData.enforceMinRequiredBalance | formatNumber}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
+          <td>{{'labels.inputs.Interest Recalculation Date' | translate}}</td>
+          <td>{{savingsAccountData.summary.lastInterestCalculationDate | dateFormat}}</td>
+        </tr>
+        <tr *ngIf="savingsAccountData.onHoldFunds">
+          <td>{{'labels.inputs.On Hold Funds' | translate}}</td>
+          <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | currency:currency.code:'symbol-narrow':'1.2-2'}}</a></td>
+        </tr>
+        <tr *ngIf="savingsAccountData.withHoldTax">
+          <td>{{'labels.inputs.Withhold Tax Group' | translate}}</td>
+          <td>{{savingsAccountData.taxGroup.name}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <ng-template #alternateSummary>
+    <div fxFlex="49%">
+      <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
+      <table>
+        <tbody>
+          <tr>
+            <td>{{'labels.inputs.Activated On' | translate}}</td>
+            <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
+              dateFormat) : 'Not Activated'}}</td>
+          </tr>
+          <tr>
+            <td>{{'labels.inputs.Currency' | translate}}</td>
+            <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
+          </tr>
+          <tr>
+            <td>{{'labels.inputs.External Id' | translate}}</td>
+            <td *ngIf="savingsAccountData.externalId">
+              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+            </td>
+            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </ng-template>
+
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneralTabComponent } from './general-tab.component';
+
+describe('GeneralTabComponent', () => {
+  let component: GeneralTabComponent;
+  let fixture: ComponentFixture<GeneralTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GeneralTabComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GeneralTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Currency } from 'app/shared/models/general.model';
+
+@Component({
+  selector: 'mifosx-general-tab',
+  templateUrl: './general-tab.component.html',
+  styleUrls: ['./general-tab.component.scss']
+})
+export class GeneralTabComponent implements OnInit {
+  isLoading = true;
+  isActive = false;
+  entityType: string;
+
+  savingsAccountData: any;
+  currency: Currency;
+
+  constructor(private route: ActivatedRoute,
+    private router: Router) {
+    this.route.parent.parent.data.subscribe((data: { savingsAccountData: any }) => {
+      this.savingsAccountData = data.savingsAccountData;
+      this.currency = this.savingsAccountData.currency;
+      this.isLoading = false;
+      const status = this.savingsAccountData.status.value;
+      this.isActive = (status === 'Active');
+    });
+    if (this.router.url.includes('clients')) {
+      this.entityType = 'Client';
+    } else if (this.router.url.includes('groups')) {
+      this.entityType = 'Group';
+    } else if (this.router.url.includes('centers')) {
+      this.entityType = 'Center';
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/savings/savings-account-view/savings-account-view.component-theme.scss

@@ -1,16 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin savings-account-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
-  mifosx-savings-account-view {
-    .savings-account-card {
-      .header {
-        background-color: mat.get-color-from-palette($primary, 500);
-      }
-      .table-headers {
-        background-color: mat.get-color-from-palette($primary, 500);
-        color: mat.get-contrast-color-from-palette($primary, 500);
-      }
-    }
-  }
-}

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

@@ -1,4 +1,4 @@
-<mat-card class="savings-account-card">
+<mat-card class="account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -13,14 +13,42 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title fxLayout="row" fxLayout.lt-md="column">
-          <h3 fxFlex="95%">
-            <i class="fa fa-stop" [ngClass]="savingsAccountData.status.code | statusLookup"
-              [matTooltip]="savingsAccountData.status.value" *ngIf="!savingsAccountData.subStatus.block"></i>
-            <i class="fa fa-stop" [ngClass]="savingsAccountData.subStatus.value | statusLookup"
-              [matTooltip]="savingsAccountData.subStatus.value" *ngIf="savingsAccountData.subStatus.block"></i>
-              {{'labels.inputs.Savings Product' | translate}} : {{savingsAccountData.savingsProductName}}<span class="m-l-10">
-              <mifosx-account-number accountNo="{{savingsAccountData.accountNo}}"></mifosx-account-number></span>
-          </h3>
+          <div fxFlex="60%">
+            <h3>
+              <i class="fa fa-stop" [ngClass]="savingsAccountData.status.code | statusLookup"
+                [matTooltip]="savingsAccountData.status.value" *ngIf="!savingsAccountData.subStatus.block"></i>
+              <i class="fa fa-stop" [ngClass]="savingsAccountData.subStatus.value | statusLookup"
+                [matTooltip]="savingsAccountData.subStatus.value" *ngIf="savingsAccountData.subStatus.block"></i>
+                {{'labels.inputs.Savings Product' | translate}} : {{savingsAccountData.savingsProductName}}<span class="m-l-10">
+                <mifosx-account-number accountNo="{{savingsAccountData.accountNo}}"></mifosx-account-number></span>
+            </h3>
+            <span class="account-overview">
+              {{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}: {{savingsAccountData.clientName ||
+              savingsAccountData.groupName}}
+              <span class="m-l-10" *ngIf="savingsAccountData.clientAccountNo">
+                <mifosx-account-number accountNo="{{savingsAccountData.clientAccountNo}}"></mifosx-account-number>
+              </span>
+            </span>
+          </div>
+
+          <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
+            <h3> {{"labels.heading.Account Overview" | translate}} </h3>
+            <table class="account-overview">
+              <tbody>
+                <tr>
+                  <td>{{"labels.inputs.Current Balance" | translate }}</td>
+                  <td class="r-amount">{{savingsAccountData.summary.accountBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                </tr>
+                <tr>
+                  <td>{{"labels.inputs.Available Balance" | translate }}</td>
+                  <td class="r-amount">{{savingsAccountData.summary.availableBalance | currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <span fxFlex="auto"></span>
+
           <div fxFlex="5%">
             <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
               yPosition="below">
@@ -30,20 +58,6 @@
             </button>
           </div>
         </mat-card-title>
-        <mat-card-subtitle>
-          <p>
-            {{entityType}} {{'labels.inputs.name' | translate}}: {{savingsAccountData.clientName || savingsAccountData.groupName}}
-            <span class="m-l-10" *ngIf="savingsAccountData.clientAccountNo">({{savingsAccountData.clientAccountNo}})</span><br />
-            <span *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-              {{'labels.inputs.Current Balances' | translate}}  :
-              {{savingsAccountData.currency.displaySymbol}}<span class="m-l-10">{{savingsAccountData.summary.accountBalance |
-              number}}</span><br />
-              {{'labels.inputs.Available Balance' | translate}} :
-              {{savingsAccountData.currency.displaySymbol}}<span class="m-l-10">{{savingsAccountData.summary.availableBalance |
-              number}}</span>
-            </span>
-          </p>
-        </mat-card-subtitle>
       </div>
 
       <mat-menu #accountMenu="matMenu">
@@ -73,232 +87,11 @@
 
   <mat-card-content class="content">
 
-    <div class="savings-account-tables" fxLayout="row" fxLayoutGap="2%">
-
-      <div fxFlex="49%"
-        *ngIf="isActive; else alternateSummary">
-        <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
-        <table>
-          <tbody>
-            <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
-              <td>{{'labels.inputs.Total Withdrawls' | translate}}</td>
-              <td>{{savingsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
-              <td>{{'labels.inputs.Withdrawals Fees' | translate}}</td>
-              <td>{{savingsAccountData.summary.totalWithdrawalFees | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
-              <td>{{'labels.inputs.Annual Fees' | translate}}</td>
-              <td>{{savingsAccountData.summary.totalAnnualFees | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-              <td>{{'labels.inputs.Interest Earned' | translate}}</td>
-              <td>{{savingsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
-              <td>{{'labels.inputs.Interest Posted' | translate}}</td>
-              <td>{{savingsAccountData.summary.totalInterestPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
-              <td>{{'labels.inputs.Interest Earned Not Posted' | translate}}</td>
-              <td>{{savingsAccountData.summary.interestNotPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
-              <td>{{'labels.inputs.Interest On Overdraft' | translate}}</td>
-              <td>
-                {{savingsAccountData.summary.totalOverdraftInterestDerived | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
-              <td>{{'labels.inputs.Overdraft Interest Not Posted' | translate}}</td>
-              <td>{{savingsAccountData.summary.interestNotPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.nominalAnnualInterestRate">
-              <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
-              <td>{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
-            </tr>
-            <tr>
-              <td>{{'labels.inputs.Interest Compounding Period' | translate}}</td>
-              <td>{{savingsAccountData.interestCompoundingPeriodType.value}}</td>
-            </tr>
-            <tr>
-              <td>{{'labels.inputs.Interest Posting Period' | translate}}</td>
-              <td>{{savingsAccountData.interestPostingPeriodType.value}}</td>
-            </tr>
-            <tr>
-              <td>{{'labels.inputs.Interest Calculated Using' | translate}}</td>
-              <td>{{savingsAccountData.interestCalculationType.value}}</td>
-            </tr>
-            <tr>
-              <td># {{'labels.inputs.Days in Year' | translate}}</td>
-              <td>{{savingsAccountData.interestCalculationDaysInYearType.value}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.withdrawalFee">
-              <td>{{'labels.inputs.Withdrawal Fee' | translate}}</td>
-              <td>{{savingsAccountData.withdrawalFee.amount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
-              <td>{{'labels.inputs.Last Active Transaction Date' | translate}}</td>
-              <td>{{savingsAccountData.lastActiveTransactionDate | dateFormat}}</td>
-            </tr>
-            <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
-              <td>{{'labels.inputs.Substatus' | translate}}</td>
-              <td>{{savingsAccountData.subStatus.value}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.daysToInactive">
-              <td>{{'labels.inputs.Days to Inactive' | translate}}</td>
-              <td>{{savingsAccountData.daysToInactive}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.daysToDormancy">
-              <td>{{'labels.inputs.Days to Dormancy' | translate}}</td>
-              <td>{{savingsAccountData.daysToDormancy}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.daysToEscheat">
-              <td>{{'labels.inputs.Days to Escheat' | translate}}</td>
-              <td>{{savingsAccountData.daysToEscheat}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.annualFee">
-              <td>{{'labels.inputs.Annual Fee' | translate}}</td>
-              <td>{{savingsAccountData.annualFee.amount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-              </td>
-            </tr>
-            <tr *ngIf="savingsAccountData.allowOverdraft">
-              <td>{{'labels.inputs.Over Draft Limit' | translate}}</td>
-              <td>{{savingsAccountData.overdraftLimit | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.allowOverdraft">
-              <td>{{'labels.inputs.Min Overdraft Required for Interest Calculation' | translate}}</td>
-              <td>{{savingsAccountData.minOverdraftForInterestCalculation | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
-              <td>{{'labels.inputs.Min Balance Required for Interest Calculation' | translate}}</td>
-              <td>{{savingsAccountData.minBalanceForInterestCalculation | formatNumber}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.minRequiredBalance">
-              <td>{{'labels.inputs.Minimum Required Balance' | translate}}</td>
-              <td>{{savingsAccountData.minRequiredBalance | formatNumber}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
-              <td>{{'labels.inputs.Enforce Minimum Required Balance' | translate}}</td>
-              <td>{{savingsAccountData.enforceMinRequiredBalance | formatNumber}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
-              <td>{{'labels.inputs.Interest Recalculation Date' | translate}}</td>
-              <td>{{savingsAccountData.summary.lastInterestCalculationDate | dateFormat}}</td>
-            </tr>
-            <tr *ngIf="savingsAccountData.onHoldFunds">
-              <td>{{'labels.inputs.On Hold Funds' | translate}}</td>
-              <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds | currency:currencyCode:'symbol-narrow':'1.2-2'}}</a></td>
-            </tr>
-            <tr *ngIf="savingsAccountData.withHoldTax">
-              <td>{{'labels.inputs.Withhold Tax Group' | translate}}</td>
-              <td>{{savingsAccountData.taxGroup.name}}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <ng-template #alternateSummary>
-        <div fxFlex="49%">
-          <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
-          <table>
-            <tbody>
-              <tr>
-                <td>{{'labels.inputs.Activated On' | translate}}</td>
-                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
-                  dateFormat) : 'Not Activated'}}</td>
-              </tr>
-              <tr>
-                <td>{{'labels.inputs.Currency' | translate}}</td>
-                <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
-              </tr>
-              <tr>
-                <td>{{'labels.inputs.External Id' | translate}}</td>
-                <td *ngIf="savingsAccountData.externalId">
-                  <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
-                </td>
-                <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </ng-template>
-
-      <div fxFlex="49%" fxLayout="column" fxLayoutGap="4%">
-
-        <div
-          *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval; else alternateDetails">
-          <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
-          <table>
-            <tbody>
-              <tr>
-                <td>{{'labels.inputs.Activated On' | translate}}</td>
-                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
-                  dateFormat) : 'Not Activated'}}</td>
-              </tr>
-              <tr>
-                <td>{{'labels.inputs.Field Officer' | translate}}</td>
-                <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
-              </tr>
-              <tr>
-                <td>{{'labels.inputs.External Id' | translate}}</td>
-                <td *ngIf="savingsAccountData.externalId">
-                  <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
-                </td>
-                <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>              </tr>
-              <tr>
-                <td>{{'labels.inputs.Currency' | translate}}</td>
-                <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
-              </tr>
-              <tr>
-                <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
-                <td>{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <ng-template #alternateDetails>
-          <div>
-            <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
-            <table>
-              <tbody>
-                <tr>
-                  <td>{{'labels.inputs.Field Officer' | translate}}</td>
-                  <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
-                </tr>
-                <tr>
-                  <td>{{'labels.inputs.Balance' | translate}}</td>
-                  <td>{{savingsAccountData.summary.accountBalance}}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </ng-template>
-
-        <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
-          <h4 class="table-headers">{{'labels.heading.Performance History' | translate}}</h4>
-          <table>
-            <tbody>
-              <tr *ngIf="savingsAccountData.summary.totalDeposits">
-                <td>{{'labels.inputs.Total Deposits' | translate}}</td>
-                <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalDeposits |
-                  number}}</td>
-              </tr>
-              <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
-                <td>{{'labels.inputs.Total Interest Earned' | translate}}</td>
-                <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned
-                  | formatNumber}}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-      </div>
-
-    </div>
-
     <nav mat-tab-nav-bar class="navigation-tabs" *ngIf="isActive">
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+        [active]="general.isActive">
+        {{'labels.inputs.General' | translate}}
+      </a>
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
         [active]="transactions.isActive">
         {{'labels.inputs.Transactions' | translate}}

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

@@ -1,53 +0,0 @@
-.savings-account-card {
-  margin: 0 auto;
-  max-width: 80rem;
-  width: 90%;
-  padding: 0;
-  .header {
-    padding: 1%;
-    .header-title-group {
-      .account-card-title {
-        color: white;
-        width: 90%;
-        p {
-          color: white;
-        }
-      }
-    }
-    .profile-image-container {
-      margin: 1%;
-      .profile-image {
-        object-fit: cover;
-        border-radius: 20px;
-      }
-    }
-    .account-actions {
-      align-self: flex-end;
-      margin: 0 1%;
-      i {
-        margin-bottom: 2px;
-        margin-right: 4px;
-      }
-    }
-  }
-  .navigation-tabs {
-    background-color: #f2f2f2;
-    overflow: auto;
-  }
-  .content {
-    .savings-account-tables {
-      padding: 1%;
-      margin: 1%;
-      .table-headers {
-        margin: 0;
-        padding: 6px;
-      }
-      td {
-        padding: 3px;
-      }
-    } 
-  }
-  i, img:hover {
-    cursor: pointer;
-  }
-}

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

@@ -13,6 +13,7 @@ import { ToggleWithholdTaxDialogComponent } from './custom-dialogs/toggle-withho
 import { SavingsButtonsConfiguration } from './savings-buttons.config';
 import { SavingsService } from '../savings.service';
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Savings Account View Component
@@ -34,7 +35,7 @@ export class SavingsAccountViewComponent implements OnInit {
   entityType: string;
 
   isActive = false;
-  currencyCode: string;
+  currency: Currency;
 
   /**
    * Fetches savings account data from `resolve`
@@ -48,7 +49,7 @@ export class SavingsAccountViewComponent implements OnInit {
               public dialog: MatDialog) {
     this.route.data.subscribe((data: { savingsAccountData: any, savingsDatatables: any }) => {
       this.savingsAccountData = data.savingsAccountData;
-      this.currencyCode = this.savingsAccountData.currency.code;
+      this.currency = this.savingsAccountData.currency;
       this.savingsDatatables = data.savingsDatatables;
     });
     if (this.router.url.includes('clients')) {

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

@@ -51,10 +51,10 @@
             <i class="fa fa-file" matTooltip="View Reciept"></i>
           </button>
           <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries"
-          matTooltipPosition="left" (click)="routeEdit($event)"
-          [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
-          <i class="fa fa-arrow-circle-right"></i>
-        </button>
+            matTooltipPosition="left" (click)="routeEdit($event)"
+            [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+            <i class="fa fa-arrow-circle-right"></i>
+          </button>
         </td>
       </ng-container>
 

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.scss

@@ -1,5 +1,5 @@
 .container {
-  max-width: 50rem;
+  max-width: 37rem;
   .content {
     div {
       margin: 1rem 0;

src/app/savings/savings-routing.module.ts

@@ -42,6 +42,7 @@ import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.co
 import { SavingNotesResolver } from './common-resolvers/saving-notes.resolver';
 import { SavingDocumentsResolver } from './common-resolvers/saving-documents.resolver';
 import { SavingsTransactionGeneralTabComponent } from './savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component';
+import { GeneralTabComponent } from './savings-account-view/general-tab/general-tab.component';
 
 /** Savings Routes */
 const routes: Routes = [
@@ -68,9 +69,19 @@ const routes: Routes = [
         children: [
           {
             path: '',
-            redirectTo: 'transactions',
+            redirectTo: 'general',
             pathMatch: 'full'
           },
+          {
+            path: 'general',
+            data: { title: 'Savings Account Details', breadcrumb: 'General', routeParamBreadcrumb: false },
+            children: [
+              {
+                path: '',
+                component: GeneralTabComponent
+              }
+            ]
+          },
           {
             path: 'transactions',
             data: { title: 'Savings Account Transactions', breadcrumb: 'Transactions', routeParamBreadcrumb: false },

src/app/savings/savings.module.ts

@@ -52,6 +52,7 @@ import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.co
 import { DatatableTransactionTabComponent } from './savings-account-view/transactions/view-transaction/datatable-transaction-tab/datatable-transaction-tab.component';
 import { SavingsTransactionGeneralTabComponent } from './savings-account-view/transactions/view-transaction/savings-transaction-general-tab/savings-transaction-general-tab.component';
 import { SavingsTransactionDatatableTabComponent } from './savings-account-view/transactions/view-transaction/savings-transaction-datatable-tab/savings-transaction-datatable-tab.component';
+import { GeneralTabComponent } from './savings-account-view/general-tab/general-tab.component';
 
 
 /**
@@ -110,7 +111,8 @@ import { SavingsTransactionDatatableTabComponent } from './savings-account-view/
     NotesTabComponent,
     DatatableTransactionTabComponent,
     SavingsTransactionGeneralTabComponent,
-    SavingsTransactionDatatableTabComponent
+    SavingsTransactionDatatableTabComponent,
+    GeneralTabComponent
   ],
   providers: [ ]
 })