cbsnexora/src/app/deposits/recurring-deposits/recurring-deposits-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/.
-->

<div class="gt-grid">
  <!-- ─── Left Column ──────────────────────────────────────────────── -->
  <div class="gt-col">
    @if (
      !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
    ) {
      <!-- ACTIVE: Account Details -->
      <div class="nx-card">
        <div class="nx-card__head">
          <span class="nx-card__ico"><fa-icon icon="file-alt"></fa-icon></span>
          <h3 class="nx-card__title">{{ 'labels.inputs.Account Details' | translate }}</h3>
        </div>
        <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 (recurringDepositsAccountData.externalId) {
                <mifosx-external-identifier
                  externalId="{{ recurringDepositsAccountData.externalId }}"
                  completed="true"
                ></mifosx-external-identifier>
              } @else {
                <span class="nx-muted">{{ 'labels.inputs.Not Available' | translate }}</span>
              }
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Field Officer' | translate }}</span>
            <span class="nx-row__value">
              @if (recurringDepositsAccountData.fieldOfficerName) {
                {{ recurringDepositsAccountData.fieldOfficerName }}
              } @else {
                <span class="nx-muted">{{ 'labels.inputs.Unassigned' | translate }}</span>
              }
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Activation date' | translate }}</span>
            <span class="nx-row__value">{{ recurringDepositsAccountData.timeline.activatedOnDate | dateFormat }}</span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Maturity Date' | translate }}</span>
            <span class="nx-row__value">{{ recurringDepositsAccountData.maturityDate | dateFormat }}</span>
          </div>
          @if (
            recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals
          ) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Closed on Date' | translate }}</span>
              <span class="nx-row__value">{{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}</span>
            </div>
          }
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Deposit Frequency' | translate }}</span>
            <span class="nx-row__value">
              <span class="m-r-5">{{ recurringDepositsAccountData.recurringFrequency }}</span>
              {{ recurringDepositsAccountData.recurringFrequencyType.value | translateKey: 'catalogs' }}
            </span>
          </div>
          @if (recurringDepositsAccountData.minBalanceForInterestCalculation) {
            <div class="nx-row">
              <span class="nx-row__label">{{
                'labels.inputs.Balance Required for Interest Calculation' | translate
              }}</span>
              <span class="nx-row__value">{{ recurringDepositsAccountData.minBalanceForInterestCalculation }}</span>
            </div>
          }
          @if (recurringDepositsAccountData.witdHoldTax) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Witdhold Tax Group' | translate }}</span>
              <span class="nx-row__value">{{ recurringDepositsAccountData.taxGroup.name }}</span>
            </div>
          }
        </div>
      </div>

      <!-- ACTIVE: Interest Details -->
      <div class="nx-card">
        <div class="nx-card__head">
          <span class="nx-card__ico"><fa-icon icon="percentage"></fa-icon></span>
          <h3 class="nx-card__title">{{ 'labels.heading.Interest Details' | translate }}</h3>
        </div>
        <div class="nx-card__body">
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Interest Rate' | translate }}</span>
            <span class="nx-row__value"
              >{{ recurringDepositsAccountData.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">{{
              recurringDepositsAccountData.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">{{
              recurringDepositsAccountData.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">{{
              recurringDepositsAccountData.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">{{
              recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs'
            }}</span>
          </div>
          @if (recurringDepositsAccountData.preClosurePenalApplicable) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Pre-closure penal Interest (less)' | translate }}</span>
              <span class="nx-row__value">
                {{ recurringDepositsAccountData.preClosurePenalInterest }} % on
                {{ recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
              </span>
            </div>
          }
        </div>
      </div>
    } @else {
      <!-- PENDING/REJECTED: Account Details -->
      <div class="nx-card">
        <div class="nx-card__head">
          <span class="nx-card__ico"><fa-icon icon="file-alt"></fa-icon></span>
          <h3 class="nx-card__title">{{ 'labels.inputs.Account Details' | translate }}</h3>
        </div>
        <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 (recurringDepositsAccountData.externalId) {
                <mifosx-external-identifier
                  externalId="{{ recurringDepositsAccountData.externalId }}"
                  completed="true"
                ></mifosx-external-identifier>
              } @else {
                <span class="nx-muted">{{ 'labels.inputs.Not Available' | translate }}</span>
              }
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Date of Deposit' | translate }}</span>
            <span class="nx-row__value">
              @if (!recurringDepositsAccountData.expectedFirstDepositOnDate) {
                {{ recurringDepositsAccountData.timeline.activatedOnDate | dateFormat }}
                @if (!recurringDepositsAccountData.timeline.activatedOnDate) {
                  <span class="nx-muted">{{ 'labels.inputs.Not Activated' | translate }}</span>
                }
              } @else {
                {{ recurringDepositsAccountData.expectedFirstDepositOnDate | dateFormat }}
              }
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Period' | translate }}</span>
            <span class="nx-row__value">
              {{ recurringDepositsAccountData.depositPeriod }}&nbsp;{{
                recurringDepositsAccountData.depositPeriodFrequency.value
              }}
            </span>
          </div>
          @if (recurringDepositsAccountData.maturityDate) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Maturity Date' | translate }}</span>
              <span class="nx-row__value">{{ recurringDepositsAccountData.maturityDate | dateFormat }}</span>
            </div>
          }
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Total Deposits' | translate }}</span>
            <span class="nx-row__value nx-row__value--amount">
              @if (recurringDepositsAccountData.summary.totalDeposits) {
                {{
                  recurringDepositsAccountData.summary.totalDeposits
                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
                }}
              } @else {
                {{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
              }
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Actual Available Balance' | translate }}</span>
            <span class="nx-row__value nx-row__value--amount">
              {{
                recurringDepositsAccountData.summary.accountBalance
                  | currency: currency.code : 'symbol-narrow' : '1.2-2'
              }}
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</span>
            <span class="nx-row__value nx-row__value--amount">
              {{
                recurringDepositsAccountData.mandatoryRecommendedDepositAmount
                  | currency: currency.code : 'symbol-narrow' : '1.2-2'
              }}
            </span>
          </div>
          @if (recurringDepositsAccountData.summary.totalInterestEarned) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Interests Earned' | translate }}</span>
              <span class="nx-row__value nx-row__value--amount">
                {{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{
                  recurringDepositsAccountData.summary.totalInterestEarned
                }}
              </span>
            </div>
          }
          @if (recurringDepositsAccountData.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">
                {{
                  recurringDepositsAccountData.summary.totalWithdrawals
                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
                }}
              </span>
            </div>
          }
          @if (recurringDepositsAccountData.minBalanceForInterestCalculation) {
            <div class="nx-row">
              <span class="nx-row__label">{{
                'labels.inputs.Balance Required for Interest Calculation' | translate
              }}</span>
              <span class="nx-row__value">{{
                recurringDepositsAccountData.minBalanceForInterestCalculation | number
              }}</span>
            </div>
          }
        </div>
      </div>

      <!-- PENDING/REJECTED: Interest Details -->
      <div class="nx-card">
        <div class="nx-card__head">
          <span class="nx-card__ico"><fa-icon icon="percentage"></fa-icon></span>
          <h3 class="nx-card__title">{{ 'labels.heading.Interest Details' | translate }}</h3>
        </div>
        <div class="nx-card__body">
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Interest Compounding Period' | translate }}</span>
            <span class="nx-row__value">{{
              recurringDepositsAccountData.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">{{
              recurringDepositsAccountData.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">{{
              recurringDepositsAccountData.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">{{
              recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs'
            }}</span>
          </div>
          @if (recurringDepositsAccountData.preClosurePenalApplicable) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Pre-closure penal Interest (less)' | translate }}</span>
              <span class="nx-row__value">
                {{ recurringDepositsAccountData.preClosurePenalInterest }} % on
                {{ recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
              </span>
            </div>
          }
          @if (recurringDepositsAccountData.witdHoldTax) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Witdhold Tax Group' | translate }}</span>
              <span class="nx-row__value">{{ recurringDepositsAccountData.taxGroup.name }}</span>
            </div>
          }
        </div>
      </div>
    }
  </div>

  <!-- ─── Right Column ─────────────────────────────────────────────── -->
  <div class="gt-col">
    @if (
      !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
    ) {
      <!-- ACTIVE: Performance History -->
      <div class="nx-card">
        <div class="nx-card__head">
          <span class="nx-card__ico"><fa-icon icon="chart-bar"></fa-icon></span>
          <h3 class="nx-card__title">{{ 'labels.heading.Performance History' | translate }}</h3>
        </div>
        <div class="nx-card__body">
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Principal Amount' | translate }}</span>
            <span class="nx-row__value nx-row__value--amount">
              {{ recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Maturity Amount' | translate }}</span>
            <span class="nx-row__value nx-row__value--amount nx-row__value--positive">
              {{ recurringDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</span>
            <span class="nx-row__value nx-row__value--amount">
              {{
                recurringDepositsAccountData?.mandatoryRecommendedDepositAmount
                  | currency: currency.code : 'symbol-narrow' : '1.2-2'
              }}
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Deposits till Date' | translate }}</span>
            <span class="nx-row__value nx-row__value--amount">
              @if (recurringDepositsAccountData.summary.totalDeposits) {
                {{
                  recurringDepositsAccountData.summary.totalDeposits
                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
                }}
              } @else {
                {{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
              }
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Withdrwals till Date' | translate }}</span>
            <span class="nx-row__value nx-row__value--amount nx-row__value--negative">
              @if (recurringDepositsAccountData.summary.totalWithdrawals) {
                {{
                  recurringDepositsAccountData.summary.totalWithdrawals
                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
                }}
              } @else {
                {{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
              }
            </span>
          </div>
          @if (recurringDepositsAccountData.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 nx-row__value--positive">
                {{
                  recurringDepositsAccountData.summary.totalInterestEarned
                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
                }}
              </span>
            </div>
          }
        </div>
      </div>
    } @else {
      <!-- PENDING/REJECTED: Financial Summary -->
      <div class="nx-card">
        <div class="nx-card__head">
          <span class="nx-card__ico"><fa-icon icon="info-circle"></fa-icon></span>
          <h3 class="nx-card__title">{{ 'labels.heading.Other Details' | translate }}</h3>
        </div>
        <div class="nx-card__body">
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Principal Amount' | translate }}</span>
            <span class="nx-row__value nx-row__value--amount">
              @if (recurringDepositsAccountData.depositAmount) {
                {{ recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
              } @else {
                {{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
              }
            </span>
          </div>
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Rate of Interest' | translate }}</span>
            <span class="nx-row__value"
              >{{ recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber }} %</span
            >
          </div>
          @if (recurringDepositsAccountData.maturityDate) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Maturity Amount' | translate }}</span>
              <span class="nx-row__value nx-row__value--amount">
                {{ recurringDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
              </span>
            </div>
          }
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Total Withdrawls' | translate }}</span>
            <span class="nx-row__value nx-row__value--amount">
              @if (recurringDepositsAccountData.summary.totalWithdrawals) {
                {{
                  recurringDepositsAccountData.summary.totalWithdrawals
                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
                }}
              } @else {
                {{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
              }
            </span>
          </div>
          @if (recurringDepositsAccountData.timeline.closedOnDate) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Closed on Date' | translate }}</span>
              <span class="nx-row__value">{{ recurringDepositsAccountData.timeline.closedOnDate | dateFormat }}</span>
            </div>
          }
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Deposits Frequency' | translate }}</span>
            <span class="nx-row__value">
              {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{
                recurringDepositsAccountData.recurringFrequencyType.value | translateKey: 'catalogs'
              }}
            </span>
          </div>
          @if (recurringDepositsAccountData.summary.totalInterestEarned) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Interests Posted' | translate }}</span>
              <span class="nx-row__value nx-row__value--amount">
                @if (recurringDepositsAccountData.summary.totalInterestPosted) {
                  {{
                    recurringDepositsAccountData.summary.totalInterestPosted
                      | currency: currency.code : 'symbol-narrow' : '1.2-2'
                  }}
                } @else {
                  {{ 0 | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
                }
              </span>
            </div>
          }
        </div>
      </div>
    }
  </div>
</div>