cbsnexora/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.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="rd-view">
  <!-- ─── Dormancy risk alert (only when subStatus has left Active) ──── -->
  <mifosx-dormancy-alert-panel [accountData]="recurringDepositsAccountData"></mifosx-dormancy-alert-panel>

  <!-- ─── Gradient hero header ─────────────────────────────────────── -->
  <header class="rd-hero">
    <div class="rd-hero__left">
      <div class="rd-hero__avatar">
        <fa-icon icon="calendar-alt"></fa-icon>
      </div>

      <div class="rd-hero__info">
        <div class="rd-hero__status-row">
          <span
            class="rd-status-pill"
            [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
            [matTooltip]="recurringDepositsAccountData.status.value"
          >
            <span class="rd-status-pill__dot"></span>
            {{ recurringDepositsAccountData.status.value }}
          </span>
        </div>

        <h2 class="rd-hero__title">
          <mifosx-long-text textValue="{{ recurringDepositsAccountData.depositProductName }}"></mifosx-long-text>
        </h2>

        <div class="rd-hero__meta">
          <span class="rd-hero__meta-item">
            <span class="rd-hero__meta-label">{{ 'labels.inputs.Account Number' | translate }}</span>
            <mifosx-account-number
              accountNo="{{ recurringDepositsAccountData.accountNo }}"
              display="left"
            ></mifosx-account-number>
          </span>

          <span class="rd-hero__meta-item">
            <span class="rd-hero__meta-label">
              {{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }}
            </span>
            <span class="rd-hero__meta-value">
              {{ recurringDepositsAccountData.clientName || recurringDepositsAccountData.groupName }}
              @if (recurringDepositsAccountData.clientAccountNo) {
                <mifosx-account-number
                  accountNo="{{ recurringDepositsAccountData.clientAccountNo }}"
                ></mifosx-account-number>
              }
            </span>
          </span>
        </div>
      </div>
    </div>

    <!-- Balance KPI strip -->
    @if (
      !recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval
    ) {
      <div class="rd-hero__kpis">
        <div class="rd-kpi">
          <span class="rd-kpi__label">{{ 'labels.inputs.Current Balance' | translate }}</span>
          <span class="rd-kpi__value">
            {{
              recurringDepositsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2'
            }}
          </span>
        </div>
        <div class="rd-kpi rd-kpi--deposit">
          <span class="rd-kpi__label">{{ 'labels.inputs.Deposit Amount' | translate }}</span>
          <span class="rd-kpi__value">
            {{ recurringDepositsAccountData.depositAmount | currency: currency.code : 'symbol-narrow' : '1.2-2' }}
          </span>
        </div>
        <div class="rd-kpi rd-kpi--period">
          <span class="rd-kpi__label">{{ 'labels.inputs.Deposit Period' | translate }}</span>
          <span class="rd-kpi__value">{{ recurringDepositsAccountData.depositPeriod | number }}</span>
        </div>
      </div>
    }

    <!-- Action menu (kebab) -->
    <div class="rd-hero__actions">
      <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Account actions" yPosition="below">
        <fa-icon icon="ellipsis-v"></fa-icon>
      </button>
    </div>

    <mat-menu #accountMenu="matMenu" class="cur-action-menu" xPosition="before">
      <div class="cur-menu" (click)="$event.stopPropagation()">
        <header class="cur-menu__head">
          <fa-icon icon="bolt" class="cur-menu__head-ico"></fa-icon>
          <div>
            <div class="cur-menu__head-title">Account Actions</div>
            <div class="cur-menu__head-sub">Manage deposits, interest &amp; more</div>
          </div>
        </header>
        <div class="cur-menu__body">
          @if (hasKind('transact')) {
            <div class="cur-menu__group">
              <div class="cur-menu__group-title">Transact</div>
              @for (item of buttonConfig.singleButtons; track item.name) {
                @if (kindOf(item.name) === 'transact') {
                  <button
                    mat-menu-item
                    class="cur-menu__item cur-menu__item--transact"
                    *mifosxHasPermission="item.taskPermissionName"
                    (click)="doAction(item.name)"
                  >
                    <span class="cur-menu__ico"><fa-icon [icon]="iconOf(item.name, item.icon)"></fa-icon></span>
                    <span class="cur-menu__label">{{ 'labels.menus.' + item.name | translate }}</span>
                  </button>
                }
              }
              @for (option of buttonConfig.options; track option.name) {
                @if (kindOf(option.name) === 'transact') {
                  <button
                    mat-menu-item
                    class="cur-menu__item cur-menu__item--transact"
                    *mifosxHasPermission="option.taskPermissionName"
                    (click)="doAction(option.name)"
                  >
                    <span class="cur-menu__ico"><fa-icon [icon]="iconOf(option.name)"></fa-icon></span>
                    <span class="cur-menu__label">{{ 'labels.menus.' + option.name | translate }}</span>
                  </button>
                }
              }
            </div>
          }
          @if (hasKind('interest')) {
            <div class="cur-menu__group">
              <div class="cur-menu__group-title">Interest</div>
              @for (item of buttonConfig.singleButtons; track item.name) {
                @if (kindOf(item.name) === 'interest') {
                  <button
                    mat-menu-item
                    class="cur-menu__item cur-menu__item--interest"
                    *mifosxHasPermission="item.taskPermissionName"
                    (click)="doAction(item.name)"
                  >
                    <span class="cur-menu__ico"><fa-icon [icon]="iconOf(item.name, item.icon)"></fa-icon></span>
                    <span class="cur-menu__label">{{ 'labels.menus.' + item.name | translate }}</span>
                  </button>
                }
              }
              @for (option of buttonConfig.options; track option.name) {
                @if (kindOf(option.name) === 'interest') {
                  <button
                    mat-menu-item
                    class="cur-menu__item cur-menu__item--interest"
                    *mifosxHasPermission="option.taskPermissionName"
                    (click)="doAction(option.name)"
                  >
                    <span class="cur-menu__ico"><fa-icon [icon]="iconOf(option.name)"></fa-icon></span>
                    <span class="cur-menu__label">{{ 'labels.menus.' + option.name | translate }}</span>
                  </button>
                }
              }
            </div>
          }
          @if (hasKind('admin')) {
            <div class="cur-menu__group">
              <div class="cur-menu__group-title">Admin</div>
              @for (item of buttonConfig.singleButtons; track item.name) {
                @if (kindOf(item.name) === 'admin') {
                  <button
                    mat-menu-item
                    class="cur-menu__item cur-menu__item--admin"
                    *mifosxHasPermission="item.taskPermissionName"
                    (click)="doAction(item.name)"
                  >
                    <span class="cur-menu__ico"><fa-icon [icon]="iconOf(item.name, item.icon)"></fa-icon></span>
                    <span class="cur-menu__label">{{ 'labels.menus.' + item.name | translate }}</span>
                  </button>
                }
              }
              @for (option of buttonConfig.options; track option.name) {
                @if (kindOf(option.name) === 'admin') {
                  <button
                    mat-menu-item
                    class="cur-menu__item cur-menu__item--admin"
                    *mifosxHasPermission="option.taskPermissionName"
                    (click)="doAction(option.name)"
                  >
                    <span class="cur-menu__ico"><fa-icon [icon]="iconOf(option.name)"></fa-icon></span>
                    <span class="cur-menu__label">{{ 'labels.menus.' + option.name | translate }}</span>
                  </button>
                }
              }
            </div>
          }
          @if (hasKind('danger')) {
            <div class="cur-menu__group cur-menu__group--danger">
              <div class="cur-menu__group-title">Danger zone</div>
              @for (item of buttonConfig.singleButtons; track item.name) {
                @if (kindOf(item.name) === 'danger') {
                  <button
                    mat-menu-item
                    class="cur-menu__item cur-menu__item--danger"
                    *mifosxHasPermission="item.taskPermissionName"
                    (click)="doAction(item.name)"
                  >
                    <span class="cur-menu__ico"><fa-icon [icon]="iconOf(item.name, item.icon)"></fa-icon></span>
                    <span class="cur-menu__label">{{ 'labels.menus.' + item.name | translate }}</span>
                  </button>
                }
              }
              @for (option of buttonConfig.options; track option.name) {
                @if (kindOf(option.name) === 'danger') {
                  <button
                    mat-menu-item
                    class="cur-menu__item cur-menu__item--danger"
                    *mifosxHasPermission="option.taskPermissionName"
                    (click)="doAction(option.name)"
                  >
                    <span class="cur-menu__ico"><fa-icon [icon]="iconOf(option.name)"></fa-icon></span>
                    <span class="cur-menu__label">{{ 'labels.menus.' + option.name | translate }}</span>
                  </button>
                }
              }
            </div>
          }
        </div>
      </div>
    </mat-menu>
  </header>

  <!-- ─── Pill-style tab navigation ─────────────────────────────────── -->
  <nav mat-tab-nav-bar class="rd-tabs" [tabPanel]="tabPanel">
    <a
      mat-tab-link
      class="rd-tab"
      [routerLink]="['./general']"
      routerLinkActive
      #general="routerLinkActive"
      [active]="general.isActive"
    >
      <fa-icon icon="info-circle" class="rd-tab__ic"></fa-icon>
      <span>{{ 'labels.inputs.General' | translate }}</span>
    </a>
    <a
      mat-tab-link
      class="rd-tab"
      [routerLink]="['./interest-rate-chart']"
      routerLinkActive
      #IRC="routerLinkActive"
      [active]="IRC.isActive"
    >
      <fa-icon icon="chart-line" class="rd-tab__ic"></fa-icon>
      <span>{{ 'labels.inputs.Interest Rate Chart' | translate }}</span>
    </a>
    @if (showTransactions) {
      <a
        mat-tab-link
        class="rd-tab"
        [routerLink]="['./transactions']"
        routerLinkActive
        #transactions="routerLinkActive"
        [active]="transactions.isActive"
      >
        <fa-icon icon="exchange-alt" class="rd-tab__ic"></fa-icon>
        <span>{{ 'labels.inputs.Transactions' | translate }}</span>
      </a>
    }
    <a
      mat-tab-link
      class="rd-tab"
      [routerLink]="['./charges']"
      routerLinkActive
      #charges="routerLinkActive"
      [active]="charges.isActive"
    >
      <fa-icon icon="receipt" class="rd-tab__ic"></fa-icon>
      <span>{{ 'labels.inputs.Charges' | translate }}</span>
    </a>
    @if (recurringDepositsAccountData.clientId) {
      <a
        mat-tab-link
        class="rd-tab"
        [routerLink]="['./standing-instructions-tab']"
        routerLinkActive
        #standingInstructions="routerLinkActive"
        [active]="standingInstructions.isActive"
      >
        <fa-icon icon="calendar-check" class="rd-tab__ic"></fa-icon>
        <span>{{ 'labels.inputs.Standing Instructions' | translate }}</span>
      </a>
    }
    <a
      mat-tab-link
      class="rd-tab"
      [routerLink]="['./nominees']"
      routerLinkActive
      #nominees="routerLinkActive"
      [active]="nominees.isActive"
    >
      <fa-icon icon="user-shield" class="rd-tab__ic"></fa-icon>
      <span>Nominees</span>
    </a>
    @for (savingsDatatable of savingsDatatables; track savingsDatatable) {
      <a
        mat-tab-link
        class="rd-tab"
        *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
        [routerLink]="['./datatables', savingsDatatable.registeredTableName]"
        routerLinkActive
        #datatable="routerLinkActive"
        [active]="datatable.isActive"
      >
        <fa-icon icon="table" class="rd-tab__ic"></fa-icon>
        <span>{{ savingsDatatable.registeredTableName }}</span>
      </a>
    }
  </nav>

  <mat-tab-nav-panel #tabPanel>
    <div class="rd-body">
      <router-outlet></router-outlet>
    </div>
  </mat-tab-nav-panel>
</div>