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

<mat-card class="savings-account-card">

  <mat-card-header fxLayout="column" class="header">

    <mat-card-title-group class="header-title-group">

      <div class="profile-image-container">
        <div>
          <img mat-card-md-image class="profile-image"
            matTooltip="Savings Account"
            [src]="'assets/images/savings_account_placeholder.png'">
        </div>
      </div>

      <div class="mat-typography account-card-title">
        <mat-card-title>
          <h3>
            <i class="fa fa-stop" [ngClass]="savingsAccountData.status.code | statusLookup" [matTooltip]="savingsAccountData.status.value"></i>
              Account Name : {{savingsAccountData.savingsProductName}}
          </h3>
        </mat-card-title>
        <mat-card-subtitle>
          <p>
            Account #: {{savingsAccountData.accountNo}} | Client Name: {{savingsAccountData.clientName}}<br/>
            <span *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
              Current Balance: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.accountBalance}}<br/>
              Available Balance: {{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.availableBalance}}<br/>
            </span>
          </p>
        </mat-card-subtitle>
      </div>

    </mat-card-title-group>

    <mat-card-actions class="account-actions">

      <ng-container *ngFor="let button of buttonConfig.singleButtons">
        <button mat-raised-button *mifosxHasPermission="button.taskPermissionName" (click)="doAction(button.name)">
          <i class="{{button.icon}}"></i> {{button.name}}</button>
      </ng-container>
  
      <ng-container *ngIf="buttonConfig.options">
        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
        <mat-menu #More="matMenu">
        <span *ngFor="let option of buttonConfig.options">
          <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (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="savings-account-tables" fxLayout="row" fxLayoutGap="2%">

      <div fxFlex="49%" *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval; else alternateSummary">
        <h4 class="table-headers">Account Summary</h4>
        <table>
          <tbody>
            <tr *ngIf="savingsAccountData.summary.totalWithdrawals">
              <td>Total Withdrawls</td>
              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawals}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.summary.totalWithdrawalFees">
              <td>Withdrawals Fees</td>
              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalWithdrawalFees}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.summary.totalAnnualFees">
              <td>Annual Fees</td>
              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalAnnualFees}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
              <td>Interest Earned</td>
              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.summary.totalInterestPosted">
              <td>Interest Posted</td>
              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestPosted}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.summary.interestNotPosted >= 0">
              <td>Interest Earned Not Posted</td>
              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.summary.totalOverdraftInterestDerived">
              <td>Interest On Overdraft</td>
              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalOverdraftInterestDerived}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.summary.interestNotPosted < 0">
              <td>Overdraft Interest Not Posted</td>
              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.interestNotPosted}}</td>
            </tr>
            <tr>
              <td>Nominal Interest Rate</td>
              <td>{{savingsAccountData.nominalAnnualInterestRate}}%</td>
            </tr>
            <tr>
              <td>Interest Compounding Period</td>
              <td>{{savingsAccountData.interestCompoundingPeriodType.value}}</td>
            </tr>
            <tr>
              <td>Interest Posting Period</td>
              <td>{{savingsAccountData.interestPostingPeriodType.value}}</td>
            </tr>
            <tr>
              <td>Interest Calculated Using</td>
              <td>{{savingsAccountData.interestCalculationType.value}}</td>
            </tr>
            <tr>
              <td># Days in Year</td>
              <td>{{savingsAccountData.interestCalculationDaysInYearType.value}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.withdrawalFee">
              <td>Withdrawal Fee</td>
              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.withdrawalFee.amount}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
              <td>Last Active Transaction Date</td>
              <td>{{savingsAccountData.lastActiveTransactionDate | date}}</td>
            </tr>
            <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
              <td>Substatus</td>
              <td>{{savingsAccountData.subStatus.value}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.daysToInactive">
              <td>Days to Inactive</td>
              <td>{{savingsAccountData.daysToInactive}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.daysToDormancy">
              <td>Days to Dormancy</td>
              <td>{{savingsAccountData.daysToDormancy}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.daysToEscheat">
              <td>Days to Escheat</td>
              <td>{{savingsAccountData.daysToEscheat}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.annualFee">
              <td>Annual Fee</td>
              <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.annualFee.amount}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.allowOverdraft">
              <td>Over Draft Limit</td>
              <td>{{savingsAccountData.overdraftLimit}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.allowOverdraft">
              <td>Min Overdraft Required for Interest Calculation</td>
              <td>{{savingsAccountData.minOverdraftForInterestCalculation}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.minBalanceForInterestCalculation">
              <td>Min Balance Required for Interest Calculation</td>
              <td>{{savingsAccountData.minBalanceForInterestCalculation}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.minRequiredBalance">
              <td>Minimum Required Balance</td>
              <td>{{savingsAccountData.minRequiredBalance}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.enforceMinRequiredBalance">
              <td>Enforce Minimum Required Balance</td>
              <td>{{savingsAccountData.enforceMinRequiredBalance}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
              <td>Interest Recalculation Date</td>
              <td>{{savingsAccountData.summary.lastInterestCalculationDate | date}}</td>
            </tr>
            <tr *ngIf="savingsAccountData.onHoldFunds">
              <td>On Hold Funds</td>
              <td><a *mifosxHasPermission="'READ_SAVINGSACCOUNT'">{{savingsAccountData.onHoldFunds}}</a></td>
            </tr>
            <tr *ngIf="savingsAccountData.withHoldTax">
              <td>Withhold Tax Group</td>
              <td>{{savingsAccountData.taxGroup.name}}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <ng-template #alternateSummary>
        <div fxFlex="49%" >
          <h4 class="table-headers">Account Summary</h4>
          <table>
            <tbody>
              <tr>
                <td>Activated On</td>
                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate | date) : 'Not Activated'}}</td>
              </tr>
              <tr>
                <td>Currency</td>
                <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
              </tr>
              <tr>
                <td>External Id</td>
                <td>{{savingsAccountData.externalId ? savingsAccountData.externalId : 'Not Provided'}}</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">Savings Details</h4>
          <table>
            <tbody>
              <tr>
                <td>Activated On</td>
                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate | date) : 'Not Activated'}}</td>
              </tr>
              <tr>
                <td>Field Officer</td>
                <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
              </tr>
              <tr>
                <td>External Id</td>
                <td>{{savingsAccountData.externalId ? savingsAccountData.externalId : 'Not Provided'}}</td>
              </tr>
              <tr>
                <td>Currency</td>
                <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
              </tr>
              <tr>
                <td>Nominal Interest Rate</td>
                <td>{{savingsAccountData.nominalAnnualInterestRate}}%</td>
              </tr>
            </tbody>
          </table>
        </div>

        <ng-template #alternateDetails>
          <div>
            <h4 class="table-headers">Savings Details</h4>
            <table>
              <tbody>
                <tr>
                  <td>Field Officer</td>
                  <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
                </tr>
                <tr>
                  <td>Balance</td>
                  <td>{{savingsAccountData.summary.accountBalance}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </ng-template>

        <div *ngIf="!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval">
          <h4 class="table-headers">Performance History</h4>
          <table>
            <tbody>
              <tr *ngIf="savingsAccountData.summary.totalDeposits">
                <td>Total Deposits</td>
                <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalDeposits}}</td>
              </tr>
              <tr *ngIf="savingsAccountData.summary.totalInterestEarned >= 0">
                <td>Total Interest Earned</td>
                <td>{{savingsAccountData.currency.displaySymbol}}&nbsp;{{savingsAccountData.summary.totalInterestEarned}}</td>
              </tr>
          </table>
        </div>

      </div>

    </div>

    <nav mat-tab-nav-bar class="navigation-tabs">
      <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
      [active]="transactions.isActive">
        Transactions
      </a>
      <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
      [active]="charges.isActive">
        Charges
      </a>
      <ng-container *mifosxHasPermission="'READ_SAVINGSACCOUNTCHARGE'">
        <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive #standingInstructions="routerLinkActive"
          [active]="standingInstructions.isActive" *ngIf="savingsAccountData.clientId">
          Standing Instructions
        </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>
    </nav>

    <router-outlet></router-outlet>

  </mat-card-content>

</mat-card>