Recurring Deposit view account homologation (#1910)

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

src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html

@@ -0,0 +1,286 @@
+
+<div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+
+  <div fxFlex="49%"
+    *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <h4 class="table-headers">{{"labels.heading.Account Details" | translate }}</h4>
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Field Officer" | translate }}</td>
+          <td>{{recurringDepositsAccountData.fieldOfficerName}}<span
+              *ngIf="!recurringDepositsAccountData.fieldOfficerName">{{"labels.inputs.Unassigned" | translate }}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Activation date" | translate }}</td>
+          <td>{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}</td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Maturity Date" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
+        </tr>
+        <tr
+          *ngIf="recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals">
+          <td *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
+            {{"labels.inputs.Closed on Date" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.timeline.closedOnDate  | dateFormat}}</span></td>
+        </tr>
+        <tr>
+        </tr>
+        <tr>
+          <td><span>{{recurringDepositsAccountData.recurringFrequency}}
+              &nbsp;{{recurringDepositsAccountData.recurringFrequencyType.value}}
+            </span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
+          <td> {{"labels.inputs.Balance Required For Interest Calculation" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation}}</span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
+          <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
+          <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div fxFlex="49%"
+    *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Principal Amount" | translate }}</td>
+          <td class="r-amount">
+            <span>{{recurringDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
+          <td class="r-amount">
+            <span>{{recurringDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Recurring Deposit Amount" | translate }}</td>
+          <td class="r-amount">
+            <span>{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Deposits till Date" | translate }}</td>
+          <td class="r-amount"><span
+              *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span
+              *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Withdrwals till Date" | translate }}</td>
+          <td class="r-amount"><span
+              *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span
+              *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+
+        <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
+          <td>{{"labels.inputs.Interest Earned" | translate }}</td>
+          <td class="r-amount"><span>{{recurringDepositsAccountData.summary.totalInterestEarned | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+
+      </tbody>
+    </table>
+  </div>
+
+  <div fxFlex="49%"
+    *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Date of Deposit" | translate }}</td>
+          <td>
+            <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}
+              <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
+            </span>
+            <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate  | dateFormat}}
+              <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Period" | translate }}</td>
+          <td>
+            <span>{{recurringDepositsAccountData.depositPeriod}}&nbsp;{{recurringDepositsAccountData.depositPeriodFrequency.value}}</span>
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.maturityDate">
+          <td>{{"labels.inputs.Maturity Date" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Total Deposits" | translate }}</td>
+          <td class="r-amount">
+            <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{ recurringDepositsAccountData.summary.totalDeposits | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr >
+          <td> {{"labels.inputs.Actual Available Balance" | translate }}</td>
+          <td>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.accountBalance }}</td>
+        </tr>
+        <tr>
+          <td> {{"labels.inputs.Recurring Deposit Amount" | translate }}</td>
+          <td class="r-amount">
+            {{ recurringDepositsAccountData.mandatoryRecommendedDepositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
+          <td> {{"labels.inputs.Interests Earned" | translate }} </td>
+          <td><span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalInterestEarned }}</span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">
+          <td> {{"labels.inputs.Total Withdrawls" | translate }} </td>
+          <td class="r-amount">
+            <span>{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
+          <td> {{"labels.inputs.Balance Required For Interest Calculation" | translate }} </td>
+          <td class="r-amount">
+            <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number  }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div fxFlex="49%"
+    *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Principal Amount" | translate }}</td>
+          <td class="r-amount"><span
+              *ngIf="recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.depositAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span
+              *ngIf="!recurringDepositsAccountData.depositAmount">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Rate of Interest" | translate }}</td>
+          <td>
+            <span>{{recurringDepositsAccountData.nominalAnnualInterestRate}}</span>
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.maturityDate">
+          <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
+          <td>
+            <span>{{ recurringDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Total Withdrawls" | translate }} </td>
+          <td class="r-amount">
+            <span
+              *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span
+              *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
+          <td> {{"labels.inputs.Closed on Date" | translate }} </td>
+          <td>
+            {{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}
+          </td>
+        </tr>
+        <tr>
+          <td> {{"labels.inputs.Deposits Frequency" | translate }} </td>
+          <td>
+            {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{ recurringDepositsAccountData.recurringFrequencyType.value }}
+          </td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
+          <td> {{"labels.inputs.Interests Posted" | translate }} </td>
+          <td class="r-amount">
+            <span
+              *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.summary.totalInterestPosted | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+            <span
+              *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{ 0 | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+  <div fxFlex="49%"
+    *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Interest Rate" | translate }}</td>
+          <td class="r-amount">{{recurringDepositsAccountData.nominalAnnualInterestRate}}%</td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
+        </tr>
+        <tr>
+          <td># {{"labels.inputs.Days in Year" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
+          <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
+              {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div fxFlex="49%"
+    *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
+    <table>
+      <tbody>
+        <tr>
+          <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
+        </tr>
+        <tr>
+          <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
+        </tr>
+        <tr>
+          <td># {{"labels.inputs.Days in Year" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
+          <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
+          <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
+              {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
+        </tr>
+        <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
+          <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
+          <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</div>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.scss

@@ -0,0 +1,3 @@
+.recurring-deposits-account-tables {
+  padding: 1%;
+}

src/app/deposits/recurring-deposits/recurring-deposits-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/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.ts

@@ -0,0 +1,35 @@
+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 {
+
+  recurringDepositsAccountData: any;
+  isprematureAllowed = false;
+  entityType: string;
+  currency: Currency;
+
+  constructor(private route: ActivatedRoute,
+    private router: Router) {
+    this.route.parent.data.subscribe((data: { recurringDepositsAccountData: any }) => {
+      this.recurringDepositsAccountData = data.recurringDepositsAccountData;
+      this.currency = this.recurringDepositsAccountData.currency;
+      this.isprematureAllowed = data.recurringDepositsAccountData.maturityDate != null;
+      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/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component-theme.scss

@@ -1,16 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin recurring-deposits-account-view-component-theme($theme) {
-  $primary: map-get($theme, primary);
-  mifosx-recurring-deposits-account-view {
-    .recurringDeposits-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/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html

@@ -1,4 +1,4 @@
-<mat-card class="recurring-deposits-account-card">
+<mat-card class="account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -13,11 +13,49 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <h3 fxFlex="95%">
-            <i class="fa fa-stop" [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
-              [matTooltip]="recurringDepositsAccountData.status.value"></i>
-              {{"labels.inputs.Account Name" | translate }} : {{recurringDepositsAccountData.depositProductName}}
-          </h3>
+          <div fxFlex="60%">
+            <h3>
+              <i class="fa fa-stop" [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
+                [matTooltip]="recurringDepositsAccountData.status.value"></i>
+              {{"labels.inputs.Recurring Deposit" | translate }} : {{recurringDepositsAccountData.depositProductName}}
+              <mifosx-account-number accountNo="{{recurringDepositsAccountData.accountNo}}"></mifosx-account-number>
+            </h3>
+            <span class="account-overview">
+              {{'labels.text.' + entityType | translate}} {{"labels.inputs.name" | translate}}:
+              {{recurringDepositsAccountData.clientName ||
+              recurringDepositsAccountData.groupName}}
+              <span class="m-l-10" *ngIf="recurringDepositsAccountData.clientAccountNo">
+                <mifosx-account-number
+                  accountNo="{{recurringDepositsAccountData.clientAccountNo}}"></mifosx-account-number>
+              </span>
+            </span>
+          </div>
+
+          <div
+            *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.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">{{recurringDepositsAccountData.summary.accountBalance |
+                    currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                </tr>
+                <tr>
+                  <td>{{"labels.inputs.Deposit Amount" | translate }}</td>
+                  <td class="r-amount">{{recurringDepositsAccountData.depositAmount |
+                    currency:currency.code:'symbol-narrow':'1.2-2'}}</td>
+                </tr>
+                <tr>
+                  <td>{{"labels.inputs.Deposit Period" | translate }}</td>
+                  <td class="r-amount">{{recurringDepositsAccountData.depositPeriod | number}}</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">
@@ -27,33 +65,26 @@
             </button>
           </div>
         </mat-card-title>
-        <mat-card-subtitle>
-          <p>
-            {{"labels.inputs.Account" | translate }} #: {{recurringDepositsAccountData.accountNo}} | {{"labels.inputs.Client Name" | translate }}:
-            {{recurringDepositsAccountData.clientName}}<br />
-            <span
-              *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-              {{"labels.inputs.Current Balance" | translate }}:
-              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.accountBalance}}<br />
-              {{"labels.inputs.Available Balance" | translate }}:
-              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.availableBalance}}<br />
-            </span>
-          </p>
-        </mat-card-subtitle>
+
       </div>
 
       <mat-menu #accountMenu="matMenu">
-        <ng-container *ngFor="let button of buttonConfig.singleButtons">
-          <button mat-raised-button (click)="doAction(button.name)">
-            <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
+        <ng-container *ngFor="let item of buttonConfig.singleButtons">
+          <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="doAction(item.name)">
+            <mat-icon matListIcon>
+              <fa-icon icon="{{item.icon}}" size="sm"></fa-icon>
+            </mat-icon>
+            <span> {{'labels.menus.' + item.name | translate}} </span>
+          </button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options.length">
-          <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">{{'labels.menus.More' | translate}}</button>
           <mat-menu #More="matMenu">
-          <span *ngFor="let option of buttonConfig.options">
-            <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
-          </span>
+            <span *ngFor="let option of buttonConfig.options">
+              <button mat-menu-item *mifosxHasPermission="option.taskPermissionName"
+                (click)="doAction(option.name)">{{'labels.menus.' + option.name | translate}}</button>
+            </span>
           </mat-menu>
         </ng-container>
 
@@ -61,341 +92,42 @@
 
     </mat-card-title-group>
 
-    <mat-card-actions class="account-actions">
-
-      <ng-container *ngFor="let button of buttonConfig.singleButtons">
-        <button mat-raised-button (click)="doAction(button.name)">
-          <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
-      </ng-container>
-
-      <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-raised-button [matMenuTriggerFor]="More">{{"labels.buttons.More" | translate }}</button>
-        <mat-menu #More="matMenu">
-        <span *ngFor="let option of buttonConfig.options">
-          <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
-        </span>
-        </mat-menu>
-      </ng-container>
-
-    </mat-card-actions>
-
   </mat-card-header>
 
   <mat-card-content class="content">
 
-    <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
-
-      <div fxFlex="49%"
-        *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <h4 class="table-headers">{{"labels.heading.Savings Details" | translate }}</h4>
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Field Officer" | translate }}</td>
-              <td>{{recurringDepositsAccountData.fieldOfficerName}}<span
-                  *ngIf="!recurringDepositsAccountData.fieldOfficerName">{{"labels.inputs.Unassigned" | translate }}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Activation date" | translate }}</td>
-              <td>{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}</td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
-            </tr>
-            <tr
-              *ngIf="recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals">
-              <td *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
-                {{"labels.inputs.Closed on Date" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.timeline.closedOnDate  | dateFormat}}</span></td>
-            </tr>
-            <tr>
-            </tr>
-            <tr>
-              <td><span>{{recurringDepositsAccountData.recurringFrequency}}
-                  &nbsp;{{recurringDepositsAccountData.recurringFrequencyType.value}}
-                </span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
-              <td> {{"labels.inputs.Balance Required For Interest Calculation" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation}}</span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
-              <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
-              <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div fxFlex="49%"
-        *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-              <td>
-                <span>{{recurringDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-              <td>
-                <span>{{recurringDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Recurring Deposit Amount" | translate }}</td>
-              <td>
-                <span>{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Deposits till Date" | translate }}</td>
-              <td><span
-                  *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Withdrwals till Date" | translate }}</td>
-              <td><span
-                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-
-            <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
-              <td >{{"labels.inputs.Interest Earned" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalInterestEarned| formatNumber}}</span>
-              </td>
-            </tr>
-
-          </tbody>
-        </table>
-      </div>
-
-      <div fxFlex="49%"
-        *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Date of Deposit" | translate }}</td>
-              <td>
-                <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}
-                  <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
-                </span>
-                <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate  | dateFormat}}
-                  <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{"labels.inputs.Not Activated" | translate }}</span>
-                </span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Period" | translate }}</td>
-              <td>
-                <span>{{recurringDepositsAccountData.depositPeriod}}&nbsp;{{recurringDepositsAccountData.depositPeriodFrequency.value}}</span>
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.maturityDate">
-              <td>{{"labels.inputs.Maturity Date" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Total Deposits" | translate }}</td>
-              <td>
-                <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{ recurringDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr >
-              <td> {{"labels.inputs.Actual Available Balance" | translate }}</td>
-              <td>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.accountBalance }}</td>
-            </tr>
-            <tr>
-              <td> {{"labels.inputs.Recurring Deposits Amount" | translate }}</td>
-              <td>
-                {{ recurringDepositsAccountData.mandatoryRecommendedDepositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
-              <td> {{"labels.inputs.Interests Earned" | translate }} </td>
-              <td><span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalInterestEarned }}</span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">
-              <td> {{"labels.inputs.Total Withdrawls" | translate }} </td>
-              <td>
-                <span>{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
-              <td> {{"labels.inputs.Balance Required For Interest Calculation" | translate }} </td>
-              <td>
-                <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number  }}</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div fxFlex="49%"
-        *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Principal Amount" | translate }}</td>
-              <td><span
-                  *ngIf="recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span
-                  *ngIf="!recurringDepositsAccountData.depositAmount">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Rate of Interest" | translate }}</td>
-              <td>
-                <span>{{recurringDepositsAccountData.nominalAnnualInterestRate}}</span>
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.maturityDate">
-              <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-              <td>
-                <span>{{ recurringDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Total Withdrawls" | translate }} </td>
-              <td>
-                <span
-                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
-              <td> {{"labels.inputs.Closed on Date" | translate }} </td>
-              <td>
-                {{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}
-              </td>
-            </tr>
-            <tr>
-              <td> {{"labels.inputs.Deposits Frequency" | translate }} </td>
-              <td>
-                {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{ recurringDepositsAccountData.recurringFrequencyType.value }}
-              </td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
-              <td> {{"labels.inputs.Interests Posted" | translate }} </td>
-              <td>
-                <span
-                  *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.summary.totalInterestPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
-      <div fxFlex="49%"
-        *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <h4 class="table-headers">{{"labels.heading.Interest Details" | translate }}</h4>
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Interest Rate" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.nominalAnnualInterestRate}}%</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Interest Compounding period" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Interest Posting period" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
-            </tr>
-            <tr>
-              <td># {{"labels.inputs.Days in Year" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
-              <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
-                  {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div fxFlex="49%"
-        *ngIf="recurringDepositsAccountData.status.rejected || recurringDepositsAccountData.status.submittedAndPendingApproval">
-        <table>
-          <tbody>
-            <tr>
-              <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Interest Posting period" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
-            </tr>
-            <tr>
-              <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
-            </tr>
-            <tr>
-              <td># {{"labels.inputs.Days in Year" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
-              <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
-              <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
-                  {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
-            </tr>
-            <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
-              <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>
-              <td><span>{{recurringDepositsAccountData.taxGroup.name}}</span></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-    </div>
-
     <nav mat-tab-nav-bar class="navigation-tabs">
-        <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
-          [active]="IRC.isActive">
-          {{"labels.inputs.Interest Rate Chart" | translate }}
+      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
+        [active]="general.isActive">
+        {{"labels.inputs.General" | translate }}
+      </a>
+      <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
+        [active]="IRC.isActive">
+        {{"labels.inputs.Interest Rate Chart" | translate }}
+      </a>
+      <ng-container *ngIf="recurringDepositsAccountData.transactions">
+        <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
+          [active]="transactions.isActive">
+          {{"labels.inputs.Transactions" | translate }}
         </a>
-        <ng-container *ngIf="recurringDepositsAccountData.transactions">
-          <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-            [active]="transactions.isActive">
-            {{"labels.inputs.Transactions" | translate }}
-          </a>
-        </ng-container>
-        <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive" [active]="charges.isActive">
-          {{"labels.inputs.Charges" | translate }}
+      </ng-container>
+      <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
+        [active]="charges.isActive">
+        {{"labels.inputs.Charges" | translate }}
+      </a>
+      <ng-container *ngIf="recurringDepositsAccountData.clientId">
+        <a mat-tab-link [routerLink]="['./standing-instructions-tab']" routerLinkActive
+          #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive">
+          {{"labels.inputs.Standing Instructions" | translate }}
         </a>
-        <ng-container *ngIf="recurringDepositsAccountData.clientId">
-          <a mat-tab-link [routerLink]="['./standing-instructions-tab']" routerLinkActive #standingInstructions="routerLinkActive"
-            [active]="standingInstructions.isActive">
-            {{"labels.inputs.Standing Instructions" | translate }}
-          </a>
-        </ng-container>
-        <ng-container *ngFor="let savingsDatatable of savingsDatatables">
-          <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
-            [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive #datatable="routerLinkActive"
-            [active]="datatable.isActive">
-            {{savingsDatatable.registeredTableName}}
-          </a>
-        </ng-container>
+      </ng-container>
+      <ng-container *ngFor="let savingsDatatable of savingsDatatables">
+        <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
+          [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive
+          #datatable="routerLinkActive" [active]="datatable.isActive">
+          {{savingsDatatable.registeredTableName}}
+        </a>
+      </ng-container>
     </nav>
 
     <router-outlet></router-outlet>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.scss

@@ -1,53 +0,0 @@
-.recurring-deposits-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 {
-    .recurringDeposits-account-tables {
-      padding: 1%;
-      margin: 1%;
-      .table-headers {
-        margin: 0;
-        padding: 6px;
-      }
-      td {
-        padding: 3px;
-      }
-    }
-  }
-  i, img:hover {
-    cursor: pointer;
-  }
-}

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts

@@ -13,6 +13,7 @@ import { RecurringDepositsButtonsConfiguration } from './recurring-deposits-butt
 /** Custom Dialogs */
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { RecurringDepositConfirmationDialogComponent } from './custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
+import { Currency } from 'app/shared/models/general.model';
 
 
 /**
@@ -35,7 +36,8 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
   savingsDatatables: any;
   /** Is Prematured Allowed */
   isprematureAllowed: any;
-  currencyCode: string;
+  entityType: string;
+  currency: Currency;
   /**
    * Fetches recurringDeposits account data from `resolve`
    * @param {ActivatedRoute} route Activated Route
@@ -51,8 +53,15 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
       this.recurringDepositsAccountData = data.recurringDepositsAccountData;
       this.charges = this.recurringDepositsAccountData.charges;
       this.savingsDatatables = data.savingsDatatables;
-      this.currencyCode = this.recurringDepositsAccountData.currency.code;
+      this.currency = this.recurringDepositsAccountData.currency;
       this.isprematureAllowed = data.recurringDepositsAccountData.maturityDate != null;
+      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';
+      }
     });
   }
 
@@ -69,6 +78,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
     if (this.recurringDepositsAccountData.clientId && this.recurringDepositsAccountData.status.value === 'Matured') {
       this.buttonConfig.addOption({
         name: 'Transfer Funds',
+        taskPermissionName: 'CREATE_ACCOUNTTRANSFER'
       });
     }
 
@@ -77,6 +87,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
         if (element.name === 'Annual fee - INR') {
           this.buttonConfig.addOption({
             name: 'Apply Annual Fees',
+            taskPermissionName: 'APPLYANNUALFEE_SAVINGSACCOUNT'
           });
         }
       });
@@ -85,7 +96,8 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
     if (this.recurringDepositsAccountData.clientId && this.recurringDepositsAccountData.status.value === 'Active') {
       if (this.recurringDepositsAccountData.allowWithdrawal === true) {
         this.buttonConfig.addOption({
-          name: 'Withdraw'
+          name: 'Withdraw',
+          taskPermissionName: 'WITHDRAW_RECURRINGDEPOSITACCOUNT'
         });
       }
       if (this.recurringDepositsAccountData.charges) {
@@ -93,6 +105,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
           if (element.name === 'Annual fee - INR') {
             this.buttonConfig.addOption({
               name: 'Apply Annual Fees',
+              taskPermissionName: 'APPLYANNUALFEE_SAVINGSACCOUNT'
             });
           }
         });
@@ -101,7 +114,8 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
       if (!this.isprematureAllowed) {
         this.buttonConfig.addButton({
           name: 'Close',
-          icon: 'fa fa-arrow-right'
+          icon: 'arrow-right',
+          taskPermissionName: 'CLOSE_RECURRINGDEPOSITACCOUNT'
         });
       }
 
@@ -144,7 +158,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
       case 'Reject':
       case 'Undo Approval':
       case 'Add Charge':
-      case 'Withdraw By Client':
+      case 'Withdrawn by client':
       case 'Premature Close':
       case 'Close':
       case 'Deposit':

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-buttons.config.ts

@@ -3,13 +3,14 @@ export class RecurringDepositsButtonsConfiguration {
 
   optionArray: {
     name: string,
-    taskPermissionName?: string,
+    icon?: string,
+    taskPermissionName: string,
   }[];
 
   buttonsArray: {
     name: string,
     icon: string,
-    taskPermissionName?: string,
+    taskPermissionName: string,
   }[];
 
   constructor(status: string) {
@@ -31,15 +32,18 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Deposit',
-            icon: 'fa fa-arrow-up'
+            icon: 'arrow-up',
+            taskPermissionName: 'DEPOSIT_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Premature Close',
-            icon: 'fa fa-arrow-left'
+            icon: 'arrow-left',
+            taskPermissionName: 'PREMATURECLOSE_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Calculate Interest',
-            icon: 'fa fa-table',
+            icon: 'calculator',
+            taskPermissionName: 'CALCULATEINTEREST_RECURRINGDEPOSITACCOUNT'
           }
         ];
         break;
@@ -47,11 +51,13 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Modify Application',
-            icon: 'fa fa-pencil ',
+            icon: 'edit',
+            taskPermissionName: 'UPDATE_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Approve',
-            icon: 'fa fa-check'
+            icon: 'check',
+            taskPermissionName: 'APPROVE_RECURRINGDEPOSITACCOUNT'
           }
         ];
         break;
@@ -59,11 +65,13 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Undo Approval',
-            icon: 'fa fa-undo'
+            icon: 'undo',
+            taskPermissionName: 'APPROVALUNDO_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Activate',
-            icon: 'fa fa-check'
+            icon: 'check',
+            taskPermissionName: 'ACTIVATE_RECURRINGDEPOSITACCOUNT'
           }
         ];
       break;
@@ -71,15 +79,18 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Close',
-            icon: 'fa fa-arrow-right'
+            icon: 'arrow-right',
+            taskPermissionName: 'CLOSE_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Calculate Interest',
-            icon: 'fa fa-table'
+            icon: 'calculator',
+            taskPermissionName: 'CALCULATEINTEREST_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Post Interest',
-            icon: 'fa fa-table'
+            icon: 'money',
+            taskPermissionName: 'POSTINTEREST_RECURRINGDEPOSITACCOUNT'
           }
         ];
       break;
@@ -94,32 +105,46 @@ export class RecurringDepositsButtonsConfiguration {
         this.optionArray = [
           {
             name: 'Post Interest',
+            icon: 'table',
+            taskPermissionName: 'POSTINTEREST_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Add Charge',
+            icon: 'plus',
+            taskPermissionName: 'POSTINTEREST_RECURRINGDEPOSITACCOUNT'
           }
         ];
         break;
       case 'Submitted and pending approval':
         this.optionArray = [
           {
-            name: 'Reject'
+            name: 'Reject',
+            icon: 'ban',
+            taskPermissionName: 'REJECT_RECURRINGDEPOSITACCOUNT'
           },
           {
-            name: 'Withdraw By Client'
+            name: 'Withdrawn by client',
+            icon: 'arrow-down',
+            taskPermissionName: 'WITHDRAW_RECURRINGDEPOSITACCOUNT'
           },
           {
-            name: 'Add Charge'
+            name: 'Add Charge',
+            icon: 'plus',
+            taskPermissionName: 'ADDCHARGE_RECURRINGDEPOSITACCOUNT'
           },
           {
-            name: 'Delete'
+            name: 'Delete',
+            icon: 'trash',
+            taskPermissionName: 'DELETE_RECURRINGDEPOSITACCOUNT'
           }
         ];
         break;
       case 'Matured':
         this.optionArray = [
           {
-            name: 'Add Charge'
+            name: 'Add Charge',
+            icon: 'plus',
+            taskPermissionName: 'ADDCHARGE_RECURRINGDEPOSITACCOUNT'
           }
         ];
         break;
@@ -129,11 +154,11 @@ export class RecurringDepositsButtonsConfiguration {
     }
   }
 
-  addOption(option: {name: string, icon?: string, taskPermissionName?: string}) {
+  addOption(option: {name: string, icon?: string, taskPermissionName: string}) {
     this.optionArray.push(option);
   }
 
-  addButton(option: { name: string, icon: string, taskPermissionName?: string }) {
+  addButton(option: { name: string, icon: string, taskPermissionName: string }) {
     this.buttonsArray.push(option);
   }