cbsnexora/src/app/deposits/fixed-deposits/fixed-deposit-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">
    <!-- Fixed Deposit 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.heading.Fixed Deposit 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 (fixedDepositsAccountData.externalId) {
              <mifosx-external-identifier
                externalId="{{ fixedDepositsAccountData.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.Activated On' | translate }}</span>
          <span class="nx-row__value">
            {{
              fixedDepositsAccountData.timeline.activatedOnDate
                ? (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat)
                : ('labels.text.Not Activated' | translate)
            }}
          </span>
        </div>
        @if (fixedDepositsAccountData.timeline.closedOnDate) {
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Closed On' | translate }}</span>
            <span class="nx-row__value">{{ fixedDepositsAccountData.timeline.closedOnDate | dateFormat }}</span>
          </div>
        }
        <div class="nx-row">
          <span class="nx-row__label">{{ 'labels.inputs.Field Officer' | translate }}</span>
          <span class="nx-row__value">
            {{
              fixedDepositsAccountData.fieldOfficerName
                ? fixedDepositsAccountData.fieldOfficerName
                : ('Unassigned' | translateKey: 'inputs')
            }}
          </span>
        </div>
        <div class="nx-row">
          <span class="nx-row__label">{{ 'labels.inputs.Maturity Date' | translate }}</span>
          <span class="nx-row__value">
            {{ fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) : 'N/A' }}
          </span>
        </div>
        <div class="nx-row">
          <span class="nx-row__label">{{ 'labels.inputs.Deposit Period' | translate }}</span>
          <span class="nx-row__value">
            {{ fixedDepositsAccountData.depositPeriod }}&nbsp;{{
              fixedDepositsAccountData.depositPeriodFrequency.value | translateKey: 'catalogs'
            }}
          </span>
        </div>
        @if (fixedDepositsAccountData.withHoldTax) {
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Tax Group' | translate }}</span>
            <span class="nx-row__value">{{ fixedDepositsAccountData.taxGroup.name }}</span>
          </div>
        }
        @if (fixedDepositsAccountData.onAccountClosure) {
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Maturity Instructions' | translate }}</span>
            <span class="nx-row__value">{{
              fixedDepositsAccountData.onAccountClosure.value | translateKey: 'catalogs'
            }}</span>
          </div>
        }
      </div>
    </div>

    <!-- 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">{{ fixedDepositsAccountData.nominalAnnualInterestRate }} %</span>
        </div>
        <div class="nx-row">
          <span class="nx-row__label">{{ 'labels.inputs.Interest Compounding Period' | translate }}</span>
          <span class="nx-row__value">{{
            fixedDepositsAccountData.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">{{
            fixedDepositsAccountData.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">{{
            fixedDepositsAccountData.interestCalculationType.value | translateKey: 'catalogs'
          }}</span>
        </div>
        <div class="nx-row">
          <span class="nx-row__label">{{ 'labels.inputs.No. of Days in Year' | translate }}</span>
          <span class="nx-row__value">{{
            fixedDepositsAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs'
          }}</span>
        </div>
        @if (fixedDepositsAccountData.preClosurePenalApplicable) {
          <div class="nx-row">
            <span class="nx-row__label">{{ 'labels.inputs.Pre-cloure Penal' | translate }}</span>
            <span class="nx-row__value">
              {{ fixedDepositsAccountData.preClosurePenalInterest }} % on
              {{ fixedDepositsAccountData.preClosurePenalInterestOnType.value | translateKey: 'catalogs' }}
            </span>
          </div>
        }
      </div>
    </div>
  </div>

  <!-- ─── Right Column ─────────────────────────────────────────────── -->
  <div class="gt-col">
    @if (!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval) {
      <!-- 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">
              {{ fixedDepositsAccountData.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">
              {{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
            </span>
          </div>
          @if (fixedDepositsAccountData.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">
                {{
                  fixedDepositsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2'
                }}
              </span>
            </div>
          }
          @if (fixedDepositsAccountData.summary.totalWithdrawals) {
            <div class="nx-row">
              <span class="nx-row__label">{{ 'labels.inputs.Total Withdrawals' | translate }}</span>
              <span class="nx-row__value nx-row__value--amount nx-row__value--negative">
                {{
                  fixedDepositsAccountData.summary.totalWithdrawals
                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
                }}
              </span>
            </div>
          }
          @if (fixedDepositsAccountData.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 nx-row__value--positive">
                {{
                  fixedDepositsAccountData.summary.totalInterestEarned
                    | currency: currency.code : 'symbol-narrow' : '1.2-2'
                }}
              </span>
            </div>
          }
        </div>
      </div>
    } @else {
      <!-- Other Details (pending/rejected) -->
      <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">
              {{ fixedDepositsAccountData.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">
              {{ fixedDepositsAccountData.maturityAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
            </span>
          </div>
        </div>
      </div>
    }
  </div>
</div>