cbsnexora/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.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="ac-container">
  <!-- Hero header -->
  <div class="ac-header">
    <div class="ac-header__left">
      <fa-icon icon="check-double" class="ac-header__icon"></fa-icon>
      <div>
        <h2 class="ac-header__title">Approval Center</h2>
        <div class="ac-header__sub">
          Review pending checker actions, client &amp; loan approvals, disbursals, and reschedules.
        </div>
      </div>
    </div>
  </div>

  <!-- Pill-style tab navigation -->
  <nav mat-tab-nav-bar class="ac-tabs" [tabPanel]="tabPanel">
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./checker-inbox']"
      routerLinkActive
      #checkerInbox="routerLinkActive"
      [active]="checkerInbox.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="inbox" class="ac-tab__ic"></fa-icon>
      <span>Checker Inbox</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./client-approval']"
      routerLinkActive
      #clientApproval="routerLinkActive"
      [active]="clientApproval.isActive"
      *mifosxHasPermission="'READ_CLIENT'"
    >
      <fa-icon icon="user-check" class="ac-tab__ic"></fa-icon>
      <span>Client Approval</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./loan-approval']"
      routerLinkActive
      #loanApproval="routerLinkActive"
      [active]="loanApproval.isActive"
      *mifosxHasPermission="'READ_LOAN'"
    >
      <fa-icon icon="hand-holding-usd" class="ac-tab__ic"></fa-icon>
      <span>Loan Approval</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./loan-disbursal']"
      routerLinkActive
      #loanDisbursal="routerLinkActive"
      [active]="loanDisbursal.isActive"
      *mifosxHasPermission="'READ_LOAN'"
    >
      <fa-icon icon="money-bill-wave" class="ac-tab__ic"></fa-icon>
      <span>Loan Disbursal</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./reschedule-loan']"
      routerLinkActive
      #rescheduleLoan="routerLinkActive"
      [active]="rescheduleLoan.isActive"
      *mifosxHasPermission="'RESCHEDULE_LOAN'"
    >
      <fa-icon icon="calendar-alt" class="ac-tab__ic"></fa-icon>
      <span>Reschedule Loan</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./pending-account']"
      routerLinkActive
      #pendingAccount="routerLinkActive"
      [active]="pendingAccount.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="hourglass-half" class="ac-tab__ic"></fa-icon>
      <span>Pending Account</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./pending-savings-products']"
      routerLinkActive
      #pendingSavingsProducts="routerLinkActive"
      [active]="pendingSavingsProducts.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="piggy-bank" class="ac-tab__ic"></fa-icon>
      <span>Pending Product Edits</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./pending-savings-account-edits']"
      routerLinkActive
      #pendingSavingsAccountEdits="routerLinkActive"
      [active]="pendingSavingsAccountEdits.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="edit" class="ac-tab__ic"></fa-icon>
      <span>Pending Account Edits</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./pending-share-account-edits']"
      routerLinkActive
      #pendingShareAccountEdits="routerLinkActive"
      [active]="pendingShareAccountEdits.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="edit" class="ac-tab__ic"></fa-icon>
      <span>Pending Share Account Edits</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./pending-client-edits']"
      routerLinkActive
      #pendingClientEdits="routerLinkActive"
      [active]="pendingClientEdits.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="edit" class="ac-tab__ic"></fa-icon>
      <span>Pending Client Edits</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./rejected-account']"
      routerLinkActive
      #rejectedAccount="routerLinkActive"
      [active]="rejectedAccount.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="ban" class="ac-tab__ic"></fa-icon>
      <span>Reject Account</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./terminated-account']"
      routerLinkActive
      #terminatedAccount="routerLinkActive"
      [active]="terminatedAccount.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="times-circle" class="ac-tab__ic"></fa-icon>
      <span>Terminated Account</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./withdrawal-requests']"
      routerLinkActive
      #withdrawalRequests="routerLinkActive"
      [active]="withdrawalRequests.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="money-bill-wave" class="ac-tab__ic"></fa-icon>
      <span>Withdrawal Requests</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./share-withdrawal-requests']"
      routerLinkActive
      #shareWithdrawalRequests="routerLinkActive"
      [active]="shareWithdrawalRequests.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="hand-holding-usd" class="ac-tab__ic"></fa-icon>
      <span>Share Withdrawal Requests</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./deposit-requests']"
      routerLinkActive
      #depositRequests="routerLinkActive"
      [active]="depositRequests.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="hand-holding-usd" class="ac-tab__ic"></fa-icon>
      <span>Deposit Requests</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./disbursement-requests']"
      routerLinkActive
      #disbursementRequests="routerLinkActive"
      [active]="disbursementRequests.isActive"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="money-bill-wave" class="ac-tab__ic"></fa-icon>
      <span>Disbursement & Transfers</span>
    </a>
    <a
      mat-tab-link
      class="ac-tab"
      [routerLink]="['./chequebook-requests']"
      routerLinkActive
      #chequebookRequests="routerLinkActive"
      [active]="chequebookRequests.isActive"
      *mifosxHasPermission="'READ_CHEQUEBOOKPENDINGREQUEST'"
    >
      <fa-icon icon="money-check" class="ac-tab__ic"></fa-icon>
      <span>Cheque Book Requests</span>
    </a>
  </nav>

  <mat-tab-nav-panel #tabPanel>
    <router-outlet></router-outlet>
  </mat-tab-nav-panel>
</div>