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>
            <!-- A current account earns no interest, so no interest rate is shown here; OD interest is under Overdraft. -->
          } @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.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.totalDeposits && !currentAccountData.summary.totalWithdrawals) {
              <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">
            <!-- A current account earns no interest: no interest earned/posted rows. OD interest has its own card. -->
            @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.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.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.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>
            }
          </div>
        </section>

        <!-- Overdraft: the only interest on a current account is what the customer pays on an OD. -->
        @if (currentAccountData.allowOverdraft) {
          <section class="nx-card">
            <header class="nx-card__head">
              <fa-icon icon="hand-holding-usd" class="nx-card__ico"></fa-icon>
              <h3 class="nx-card__title">Overdraft (OD)</h3>
            </header>
            <div class="nx-card__body">
              <div class="nx-row">
                <span class="nx-row__label">Maximum OD Limit (per product)</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{ currentAccountData.overdraftLimit | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                </span>
              </div>
              @if (currentAccountData.nominalAnnualInterestRateOverdraft) {
                <div class="nx-row">
                  <span class="nx-row__label">OD Interest Rate</span>
                  <span class="nx-row__value">
                    {{ currentAccountData.nominalAnnualInterestRateOverdraft | formatNumber }} % p.a.
                  </span>
                </div>
              }
              @if (currentAccountData.minOverdraftForInterestCalculation) {
                <div class="nx-row">
                  <span class="nx-row__label">Minimum OD for Interest</span>
                  <span class="nx-row__value">
                    {{
                      currentAccountData.minOverdraftForInterestCalculation
                        | currency: currency.code : 'symbol-narrow' : '1.2-2'
                    }}
                  </span>
                </div>
              }
              <div class="nx-row">
                <span class="nx-row__label">OD Interest Posting</span>
                <span class="nx-row__value">
                  {{ currentAccountData.interestPostingPeriodType?.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.validForPeriod) {
                <div class="nx-row">
                  <span class="nx-row__label">Sanction Validity</span>
                  <span class="nx-row__value">{{ currentAccountData.validForPeriod }}</span>
                </div>
              }
              <div class="nx-row">
                <span class="nx-row__label">OD Interest Charged</span>
                <span class="nx-row__value nx-row__value--amount">
                  {{
                    currentAccountData.summary.totalOverdraftInterestDerived || 0
                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                </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>
}