cbsnexora/src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.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="layout-row-wrap responsive-column">
  @if (accountingRule) {
    <div class="layout-row responsive-column flex-100">
      <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
      <span class="flex-60">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
    </div>
  }

  <div class="layout-row-wrap responsive-column flex-100">
    @if (isCashOrAccrualAccounting()) {
      <div class="layout-row-wrap responsive-column flex-100">
        <h4 class="mat-h4 flex-100">{{ 'labels.heading.Assets' | translate }}</h4>
        <div class="flex-100 layout-row-wrap responsive-column">
          <mifosx-gl-account-display
            class="flex-100"
            [accountTitle]="productLabel ? productLabel + ' reference' : 'Saving reference'"
            [glAccount]="accountingMappings.savingsReferenceAccount"
            [withTitle]="'40%'"
          >
          </mifosx-gl-account-display>
        </div>
        <div class="flex-100 layout-row-wrap responsive-column">
          @if (accountingMappings.overdraftPortfolioControl) {
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="'Overdraft portfolio'"
              [glAccount]="accountingMappings.overdraftPortfolioControl"
              [withTitle]="'40%'"
            >
            </mifosx-gl-account-display>
          }
        </div>
        <div class="flex-100 layout-row-wrap responsive-column">
          @if (isAccrualAccounting()) {
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="'Fees Receivable'"
              [glAccount]="accountingMappings.feeReceivableAccount"
              [withTitle]="'40%'"
            >
            </mifosx-gl-account-display>
          }
        </div>
        <div class="flex-100 layout-row-wrap responsive-column">
          @if (isAccrualAccounting()) {
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="'Penalties Receivable'"
              [glAccount]="accountingMappings.penaltyReceivableAccount"
              [withTitle]="'40%'"
            >
            </mifosx-gl-account-display>
          }
          @if (isAccrualAccounting()) {
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="'Interest Receivable'"
              [glAccount]="accountingMappings.interestReceivableAccount"
              [withTitle]="'40%'"
            >
            </mifosx-gl-account-display>
          }
          <h4 class="mat-h4 flex-100">{{ 'labels.heading.Liabilities' | translate }}</h4>
          <div class="flex-100 layout-row-wrap responsive-column">
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="productLabel ? productLabel + ' control' : 'Saving control'"
              [glAccount]="accountingMappings.savingsControlAccount"
              [withTitle]="'40%'"
            >
            </mifosx-gl-account-display>
          </div>
          <div class="flex-100 layout-row-wrap responsive-column">
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="productLabel ? 'Transfers in suspense' : 'Savings transfers in suspense'"
              [glAccount]="accountingMappings.transfersInSuspenseAccount"
              [withTitle]="'40%'"
            >
            </mifosx-gl-account-display>
          </div>
          <div class="flex-100 layout-row-wrap responsive-column">
            @if (isAccrualAccounting()) {
              <mifosx-gl-account-display
                class="flex-100"
                [accountTitle]="'Interest Payable'"
                [glAccount]="accountingMappings.interestPayableAccount"
                [withTitle]="'40%'"
              >
              </mifosx-gl-account-display>
            }
          </div>
          <div class="flex-100 layout-row-wrap responsive-column">
            @if (accountingMappings.escheatLiabilityAccount) {
              <mifosx-gl-account-display
                class="flex-100"
                [accountTitle]="'Escheat liability'"
                [glAccount]="accountingMappings.escheatLiabilityAccount"
                [withTitle]="'40%'"
              >
              </mifosx-gl-account-display>
            }
          </div>
          <h4 class="mat-h4 flex-100">{{ 'labels.heading.Income' | translate }}</h4>
          <div class="flex-100 layout-row-wrap responsive-column">
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="'Income from fees'"
              [glAccount]="accountingMappings.incomeFromFeeAccount"
              [withTitle]="'40%'"
            >
            </mifosx-gl-account-display>
          </div>
          <div class="flex-100 layout-row-wrap responsive-column">
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="'Income from penalties'"
              [glAccount]="accountingMappings.incomeFromPenaltyAccount"
              [withTitle]="'40%'"
            >
            </mifosx-gl-account-display>
          </div>
          <div class="flex-100 layout-row-wrap responsive-column">
            @if (accountingMappings.incomeFromInterest) {
              <mifosx-gl-account-display
                class="flex-100"
                [accountTitle]="'Income from Interest'"
                [glAccount]="accountingMappings.incomeFromInterest"
                [withTitle]="'40%'"
              >
              </mifosx-gl-account-display>
            }
          </div>
          <h4 class="mat-h4 flex-100">{{ 'labels.heading.Expenses' | translate }}</h4>
          <div class="flex-100 layout-row-wrap responsive-column">
            <mifosx-gl-account-display
              class="flex-100"
              [accountTitle]="productLabel ? 'Interest on ' + productLabel.toLowerCase() + 's' : 'Interest on savings'"
              [glAccount]="accountingMappings.interestOnSavingsAccount"
              [withTitle]="'40%'"
            >
            </mifosx-gl-account-display>
          </div>
          <div class="flex-100 layout-row-wrap responsive-column">
            @if (accountingMappings.writeOffAccount) {
              <mifosx-gl-account-display
                class="flex-100"
                [accountTitle]="'Write-off'"
                [glAccount]="accountingMappings.writeOffAccount"
                [withTitle]="'40%'"
              >
              </mifosx-gl-account-display>
            }
          </div>
        </div>
      </div>
    }
  </div>
</div>