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 — wraps onto multiple rows so every section stays visible and
       clickable at once, instead of being hidden behind prev/next scroll arrows. -->
  <nav class="ac-tabs">
    <a
      class="ac-tab"
      routerLink="./checker-inbox"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="inbox" class="ac-tab__ic"></fa-icon>
      <span>Checker Inbox</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./client-approval"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'READ_CLIENT'"
    >
      <fa-icon icon="user-check" class="ac-tab__ic"></fa-icon>
      <span>Client Approval</span>
    </a>
    <a class="ac-tab" routerLink="./loan-approval" routerLinkActive="ac-tab--active" *mifosxHasPermission="'READ_LOAN'">
      <fa-icon icon="hand-holding-usd" class="ac-tab__ic"></fa-icon>
      <span>Loan Approval</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./loan-disbursal"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'READ_LOAN'"
    >
      <fa-icon icon="money-bill-wave" class="ac-tab__ic"></fa-icon>
      <span>Loan Disbursal</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./reschedule-loan"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'RESCHEDULE_LOAN'"
    >
      <fa-icon icon="calendar-alt" class="ac-tab__ic"></fa-icon>
      <span>Reschedule Loan</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./pending-account"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="hourglass-half" class="ac-tab__ic"></fa-icon>
      <span>Pending Account</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./pending-savings-products"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="piggy-bank" class="ac-tab__ic"></fa-icon>
      <span>Pending Product Edits</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./pending-savings-account-edits"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="edit" class="ac-tab__ic"></fa-icon>
      <span>Pending Account Edits</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./pending-share-account-edits"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="edit" class="ac-tab__ic"></fa-icon>
      <span>Pending Share Account Edits</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./pending-client-edits"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="edit" class="ac-tab__ic"></fa-icon>
      <span>Pending Client Edits</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./rejected-account"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="ban" class="ac-tab__ic"></fa-icon>
      <span>Reject Account</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./terminated-account"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="times-circle" class="ac-tab__ic"></fa-icon>
      <span>Terminated Account</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./withdrawal-requests"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="money-bill-wave" class="ac-tab__ic"></fa-icon>
      <span>Withdrawal Requests</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./share-withdrawal-requests"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="hand-holding-usd" class="ac-tab__ic"></fa-icon>
      <span>Share Withdrawal Requests</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./share-closure-requests"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="lock" class="ac-tab__ic"></fa-icon>
      <span>Share Closure Requests</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./deposit-requests"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="hand-holding-usd" class="ac-tab__ic"></fa-icon>
      <span>Deposit Requests</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./disbursement-requests"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="money-bill-wave" class="ac-tab__ic"></fa-icon>
      <span>Disbursement & Transfers</span>
    </a>
    <a
      class="ac-tab"
      routerLink="./chequebook-requests"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'READ_CHEQUEBOOKPENDINGREQUEST'"
    >
      <fa-icon icon="money-check" class="ac-tab__ic"></fa-icon>
      <span>Cheque Book Requests</span>
    </a>
  </nav>

  <div class="ac-tab-panel">
    <router-outlet></router-outlet>
  </div>
</div>