cbsnexora/src/app/current-accounts/current-account-view/general-tab/general-tab.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

@if (isLoading) {
  <div class="loader">
    <div class="loading"></div>
  </div>
}

@if (!isLoading) {
  <div class="gt-grid">
    <!-- ─── LEFT COLUMN ──────────────────────────────────────────── -->
    <div class="gt-col">
      <!-- Current Account Details -->
      <section class="nx-card">
        <header class="nx-card__head">
          <fa-icon icon="info-circle" class="nx-card__ico"></fa-icon>
          <h3 class="nx-card__title">{{ 'labels.heading.Current Account Details' | translate }}</h3>
        </header>
        <div class="nx-card__body">
          @if (!currentAccountData.status.rejected && !currentAccountData.status.submittedAndPendingApproval) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.External Id' | translate }}</span>
              <span class="nx-row__value">
                @if (currentAccountData.externalId) {
                  <mifosx-external-identifier
                    externalId="{{ currentAccountData.externalId }}"
                  ></mifosx-external-identifier>
                } @else {
                  {{ 'labels.inputs.Not Provided' | translate }}
                }
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Activated On' | translate }}</span>
              <span class="nx-row__value">
                {{
                  currentAccountData.timeline.activatedOnDate
                    ? (currentAccountData.timeline.activatedOnDate | dateFormat)
                    : 'Not Activated'
                }}
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Field Officer' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.fieldOfficerName ? currentAccountData.fieldOfficerName : 'Unassigned' }}
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Currency' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.currency.name }}
                <span class="nx-mono">[{{ currentAccountData.currency.code }}]</span>
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Nominal Interest Rate' | translate }}</span>
              <span class="nx-row__value nx-row__value--amount">
                @if (currentAccountData.nominalAnnualInterestRate) {
                  {{ currentAccountData.nominalAnnualInterestRate | formatNumber }} %
                } @else {
                  0 %
                }
              </span>
            </div>
          } @else {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Field Officer' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.fieldOfficerName ? currentAccountData.fieldOfficerName : 'Unassigned' }}
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Balance' | translate }}</span>
              <span class="nx-row__value nx-row__value--amount">
                {{ currentAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
              </span>
            </div>
          }
        </div>
      </section>

      <!-- Performance History -->
      @if (!currentAccountData.status.rejected && !currentAccountData.status.submittedAndPendingApproval) {
        <section class="nx-card">
          <header class="nx-card__head">
            <fa-icon icon="chart-line" class="nx-card__ico"></fa-icon>
            <h3 class="nx-card__title">{{ 'labels.heading.Performance History' | translate }}</h3>
          </header>
          <div class="nx-card__body">
            @if (currentAccountData.summary.totalDeposits) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Total Deposits' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount nx-row__value--positive">
                  {{ currentAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.totalInterestEarned >= 0) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Total Interest Earned' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (!currentAccountData.summary.totalDeposits && !(currentAccountData.summary.totalInterestEarned >= 0)) {
              <div class="nx-empty">
                <fa-icon icon="inbox" class="nx-empty__ico"></fa-icon>
                <span>No activity yet.</span>
              </div>
            }
          </div>
        </section>
      }
    </div>

    <!-- ─── RIGHT COLUMN ─────────────────────────────────────────── -->
    <div class="gt-col">
      @if (isActive) {
        <section class="nx-card">
          <header class="nx-card__head">
            <fa-icon icon="file-invoice" class="nx-card__ico"></fa-icon>
            <h3 class="nx-card__title">{{ 'labels.heading.Account Summary' | translate }}</h3>
          </header>
          <div class="nx-card__body">
            @if (currentAccountData.summary.totalWithdrawals) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Total Withdrawls' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount nx-row__value--negative">
                  {{
                    currentAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.totalWithdrawalFees) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Withdrawals Fees' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.totalWithdrawalFees | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.totalAnnualFees) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Annual Fees' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{ currentAccountData.summary.totalAnnualFees | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.totalInterestEarned >= 0) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Interest Earned' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.totalInterestPosted) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Interest Posted' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.totalInterestPosted | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.interestNotPosted >= 0) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Interest Earned Not Posted' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.totalOverdraftInterestDerived) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Interest On Overdraft' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.totalOverdraftInterestDerived
                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.summary.interestNotPosted < 0) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Overdraft Interest Not Posted' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.nominalAnnualInterestRate) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Nominal Interest Rate' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{ currentAccountData.nominalAnnualInterestRate | formatNumber }} %
                </span>
              </div>
            }
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Interest Compounding Period' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Interest Posting Period' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }}
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Interest Calculated Using' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.interestCalculationType.value | translateKey: 'catalogs' }}
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Days in Year' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
              </span>
            </div>
            @if (currentAccountData.withdrawalFee) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Withdrawal Fee' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{ currentAccountData.withdrawalFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                </span>
              </div>
            }
            @if (currentAccountData.lastActiveTransactionDate) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Last Active Transaction Date' | translate }}</span>
                <span class="nx-row__value">{{ currentAccountData.lastActiveTransactionDate | dateFormat }}</span>
              </div>
            }
            @if (!(currentAccountData.subStatus.id === 0)) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Substatus' | translate }}</span>
                <span class="nx-row__value">{{ currentAccountData.subStatus.value }}</span>
              </div>
            }
            @if (currentAccountData.daysToInactive) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Days to Inactive' | translate }}</span>
                <span class="nx-row__value">{{ currentAccountData.daysToInactive }}</span>
              </div>
            }
            @if (currentAccountData.daysToDormancy) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Days to Dormancy' | translate }}</span>
                <span class="nx-row__value">{{ currentAccountData.daysToDormancy }}</span>
              </div>
            }
            @if (currentAccountData.daysToEscheat) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Days to Escheat' | translate }}</span>
                <span class="nx-row__value">{{ currentAccountData.daysToEscheat }}</span>
              </div>
            }
            @if (currentAccountData.annualFee) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Annual Fee' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{ currentAccountData.annualFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                </span>
              </div>
            }
            @if (currentAccountData.allowOverdraft) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Overdraft Limit' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{ currentAccountData.overdraftLimit | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                </span>
              </div>
            }
            @if (currentAccountData.allowOverdraft) {
              <div class="nx-row">
                <span class="nx-row__label">
                  {{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}
                </span>
                <span class="nx-row__value">
                  {{
                    currentAccountData.minOverdraftForInterestCalculation
                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </span>
              </div>
            }
            @if (currentAccountData.minBalanceForInterestCalculation) {
              <div class="nx-row">
                <span class="nx-row__label">
                  {{ 'labels.inputs.Min Balance Required for Interest Calculation' | translate }}
                </span>
                <span class="nx-row__value">
                  {{ currentAccountData.minBalanceForInterestCalculation | formatNumber }}
                </span>
              </div>
            }
            @if (currentAccountData.minRequiredBalance) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Minimum Required Balance' | translate }}</span>
                <span class="nx-row__value">{{ currentAccountData.minRequiredBalance | formatNumber }}</span>
              </div>
            }
            @if (currentAccountData.enforceMinRequiredBalance) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Enforce Minimum Required Balance' | translate }}</span>
                <span class="nx-row__value">{{ currentAccountData.enforceMinRequiredBalance | yesNo }}</span>
              </div>
            }
            @if (currentAccountData.summary.lastInterestCalculationDate) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Interest Recalculation Date' | translate }}</span>
                <span class="nx-row__value">
                  {{ currentAccountData.summary.lastInterestCalculationDate | dateFormat }}
                </span>
              </div>
            }
            @if (currentAccountData.onHoldFunds) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.On Hold Funds' | translate }}</span>
                <span class="nx-row__value nx-row__value--amount">
                  <a *mifosxHasPermission="'READ_CURRENTACCOUNT'">
                    {{ currentAccountData.onHoldFunds | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                  </a>
                </span>
              </div>
            }
            @if (currentAccountData.withHoldTax) {
              <div class="nx-row">
                <span class="nx-row__label">{{ 'labels.inputs.Withhold Tax Group' | translate }}</span>
                <span class="nx-row__value">{{ currentAccountData.taxGroup.name }}</span>
              </div>
            }
          </div>
        </section>
      } @else {
        <section class="nx-card">
          <header class="nx-card__head">
            <fa-icon icon="file-invoice" class="nx-card__ico"></fa-icon>
            <h3 class="nx-card__title">{{ 'labels.heading.Account Summary' | translate }}</h3>
          </header>
          <div class="nx-card__body">
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.External Id' | translate }}</span>
              <span class="nx-row__value">
                @if (currentAccountData.externalId) {
                  <mifosx-external-identifier
                    externalId="{{ currentAccountData.externalId }}"
                  ></mifosx-external-identifier>
                } @else {
                  {{ 'labels.inputs.Not Provided' | translate }}
                }
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Activated On' | translate }}</span>
              <span class="nx-row__value">
                {{
                  currentAccountData.timeline.activatedOnDate
                    ? (currentAccountData.timeline.activatedOnDate | dateFormat)
                    : 'Not Activated'
                }}
              </span>
            </div>
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Currency' | translate }}</span>
              <span class="nx-row__value">
                {{ currentAccountData.currency.name }}
                <span class="nx-mono">[{{ currentAccountData.currency.code }}]</span>
              </span>
            </div>
          </div>
        </section>
      }
    </div>
  </div>
}