cbsnexora/src/app/navigation/center-navigation/center-navigation.component.html

<mat-card-header class="layout-row gap-5percent header">
  <fa-icon class="main-icon" icon="building" size="3x"></fa-icon>
  <mat-card-title-group>
    <div class="mat-typography">
      <mat-card-title>
        <h2>
          {{ centerData.name }}
          <span [className]="centerData.status.code | statusLookup">
            <fa-icon
              matTooltip="{{ centerData.status.value }}"
              matTooltipPosition="right"
              icon="circle"
              size="lg"
            ></fa-icon>
          </span>
        </h2>
      </mat-card-title>
      <mat-card-subtitle>
        <p>
          {{ 'labels.inputs.Account No' | translate }}:
          <mifosx-account-number accountNo="{{ centerData.accountNo }}"></mifosx-account-number>
        </p>
        @if (centerData.externalId) {
          <p>
            {{ 'labels.inputs.External Id' | translate }}:
            <mifosx-external-identifier externalId="{{ centerData.externalId }}"></mifosx-external-identifier>
          </p>
        }
      </mat-card-subtitle>
    </div>
  </mat-card-title-group>
</mat-card-header>

<mat-card-content>
  <mat-tab-group>
    <mat-tab label="Details">
      <div class="layout-row-wrap">
        <div class="flex-50 mat-body-strong">
          {{ 'labels.inputs.Activation Date' | translate }}
        </div>

        <div class="flex-50">
          {{ centerData.activationDate | dateFormat }}
        </div>

        <div class="flex-50 mat-body-strong">
          {{ 'labels.inputs.Associated Officer' | translate }}
        </div>

        <div class="flex-50">
          {{ centerData.staffName }}
        </div>

        @if (centerSummaryData) {
          <div class="flex-50 mat-body-strong">
            {{ 'labels.inputs.Number of Active Clients' | translate }}
          </div>
        }

        @if (centerSummaryData) {
          <div class="flex-50">
            {{ centerSummaryData.activeClients }}
          </div>
        }

        @if (centerSummaryData) {
          <div class="flex-50 mat-body-strong">
            {{ 'labels.inputs.Number of Active Client Loans' | translate }}
          </div>
        }

        @if (centerSummaryData) {
          <div class="flex-50">
            {{ centerSummaryData.activeClientLoans }}
          </div>
        }

        @if (centerSummaryData) {
          <div class="flex-50 mat-body-strong">
            {{ 'labels.inputs.Number of Active Client Borrowers' | translate }}
          </div>
        }

        @if (centerSummaryData) {
          <div class="flex-50">
            {{ centerSummaryData.activeClientBorrowers }}
          </div>
        }

        @if (centerSummaryData) {
          <div class="flex-50 mat-body-strong">
            {{ 'labels.inputs.Number of Active Overdue Group Loans' | translate }}
          </div>
        }

        @if (centerSummaryData) {
          <div class="flex-50">
            {{ centerSummaryData.overdueGroupLoans }}
          </div>
        }

        @if (centerSummaryData) {
          <div class="flex-50 mat-body-strong">
            {{ 'labels.inputs.Number of Active Overdue Client Loans' | translate }}
          </div>
        }

        @if (centerSummaryData) {
          <div class="flex-50">
            {{ centerSummaryData.overdueClientLoans }}
          </div>
        }

        @if (centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]) {
          <div class="mat-body-strong flex-50">
            {{ 'labels.inputs.Next Meeting Date' | translate }}
          </div>
        }

        @if (centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]) {
          <div class="flex-50">
            {{ centerSummaryData.collectionMeetingCalendar.nextTenRecurringDates[0] | dateFormat }}
          </div>
        }

        @if (centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable) {
          <div class="mat-body-strong flex-50">
            {{ 'labels.inputs.Meeting Frequency' | translate }}
          </div>
        }

        @if (centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable) {
          <div class="flex-50">
            {{ centerSummaryData.collectionMeetingCalendar.humanReadable }}
          </div>
        }

        <div class="flex-50 mat-body-strong">
          {{ 'labels.inputs.Number of Groups' | translate }}
        </div>

        <div class="flex-50">
          {{ groupData ? groupData.length : '' }}
        </div>
      </div>
    </mat-tab>

    @if (centerAccountsData && centerAccountsData.loanAccounts) {
      <mat-tab label="Loan Accounts">
        <mifosx-loan-account-table [loanAccountData]="centerAccountsData.loanAccounts"></mifosx-loan-account-table>
      </mat-tab>
    }

    @if (centerAccountsData && centerAccountsData.savingsAccounts) {
      <mat-tab label="Savings Accounts">
        <mifosx-savings-account-table
          [savingsAccountData]="centerAccountsData.savingsAccounts"
        ></mifosx-savings-account-table>
      </mat-tab>
    }
  </mat-tab-group>
</mat-card-content>