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>
      @if (count('checker-inbox')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('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>
      @if (count('client-approval')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('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>
      @if (count('loan-approval')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('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>
      @if (count('loan-disbursal')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('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>
      @if (count('reschedule-loan')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('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>
      @if (count('pending-account')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('pending-account') }}</span>
      }
    </a>
    <a
      class="ac-tab"
      routerLink="./pending-share-accounts"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="hourglass-half" class="ac-tab__ic"></fa-icon>
      <span>Pending Share Accounts</span>
      @if (count('pending-share-accounts')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('pending-share-accounts') }}</span>
      }
    </a>
    <a
      class="ac-tab"
      routerLink="./product-approval"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="piggy-bank" class="ac-tab__ic"></fa-icon>
      <span>Product Approval</span>
      @if (count('product-approval')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('product-approval') }}</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>
      @if (count('pending-savings-account-edits')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('pending-savings-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>
      @if (count('pending-client-edits')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('pending-client-edits') }}</span>
      }
    </a>
    <a
      class="ac-tab"
      routerLink="./pending-user-edits"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="user-cog" class="ac-tab__ic"></fa-icon>
      <span>Pending User Approvals</span>
      @if (count('pending-user-edits')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('pending-user-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>
      @if (count('withdrawal-requests')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('withdrawal-requests') }}</span>
      }
    </a>
    <a
      class="ac-tab"
      routerLink="./cash-transfers"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="exchange" class="ac-tab__ic"></fa-icon>
      <span>Cash Transfers</span>
      @if (count('cash-transfers')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('cash-transfers') }}</span>
      }
    </a>
    <a
      class="ac-tab"
      routerLink="./voucher-corrections"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="undo" class="ac-tab__ic"></fa-icon>
      <span>Voucher Corrections</span>
      @if (count('voucher-corrections')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('voucher-corrections') }}</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>
      @if (count('share-withdrawal-requests')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('share-withdrawal-requests') }}</span>
      }
    </a>
    <a
      class="ac-tab"
      routerLink="./dividend-requests"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="coins" class="ac-tab__ic"></fa-icon>
      <span>Dividend Requests</span>
      @if (count('dividend-requests')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('dividend-requests') }}</span>
      }
    </a>
    <a
      class="ac-tab"
      routerLink="./share-addition-requests"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="money-check-alt" class="ac-tab__ic"></fa-icon>
      <span>Share Addition Requests</span>
      @if (count('share-addition-requests')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('share-addition-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>
      @if (count('deposit-requests')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('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>
      @if (count('disbursement-requests')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('disbursement-requests') }}</span>
      }
    </a>
    <a class="ac-tab" routerLink="./dds-approvals" routerLinkActive="ac-tab--active">
      <fa-icon icon="coins" class="ac-tab__ic"></fa-icon>
      <span>DDS Approvals</span>
      @if (count('dds-approvals')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('dds-approvals') }}</span>
      }
    </a>
    <a class="ac-tab" routerLink="./agent-approvals" routerLinkActive="ac-tab--active">
      <fa-icon icon="user-tie" class="ac-tab__ic"></fa-icon>
      <span>Agent Approval</span>
      @if (count('agent-approvals')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('agent-approvals') }}</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>
      @if (count('chequebook-requests')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('chequebook-requests') }}</span>
      }
    </a>
    <a
      class="ac-tab"
      routerLink="./closure-requests"
      routerLinkActive="ac-tab--active"
      *mifosxHasPermission="'ALL_FUNCTIONS_READ'"
    >
      <fa-icon icon="lock" class="ac-tab__ic"></fa-icon>
      <span>Closure Requests</span>
      @if (count('closure-requests')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('closure-requests') }}</span>
      }
    </a>
    <a class="ac-tab" routerLink="./dd-issue-approvals" routerLinkActive="ac-tab--active">
      <fa-icon icon="receipt" class="ac-tab__ic"></fa-icon>
      <span>DD Approvals</span>
      @if (count('dd-issue-approvals')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('dd-issue-approvals') }}</span>
      }
    </a>
    <a class="ac-tab" routerLink="./dd-reprint-approvals" routerLinkActive="ac-tab--active">
      <fa-icon icon="print" class="ac-tab__ic"></fa-icon>
      <span>DD Reprint Requests</span>
      @if (count('dd-reprint-approvals')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('dd-reprint-approvals') }}</span>
      }
    </a>
    <!-- Beside the reprint queue because the two arrive together from the counter, but they are
         different decisions: a reprint re-prints the same leaflet, a revoke spends a fresh one. -->
    <a class="ac-tab" routerLink="./dd-revoke-approvals" routerLinkActive="ac-tab--active">
      <fa-icon icon="ban" class="ac-tab__ic"></fa-icon>
      <span>DD Revoke Requests</span>
      @if (count('dd-revoke-approvals')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('dd-revoke-approvals') }}</span>
      }
    </a>
    <!-- Raised from the Risk Review Report. Approving moves the customer's KYC rating and their
         re-KYC due date together, so it belongs with the other maker-checker queues. -->
    <a class="ac-tab" routerLink="./risk-change-approvals" routerLinkActive="ac-tab--active">
      <fa-icon icon="shield-alt" class="ac-tab__ic"></fa-icon>
      <span>Risk Category Changes</span>
      @if (count('risk-change-approvals')) {
        <span class="ac-tab__count" title="Waiting for action">{{ count('risk-change-approvals') }}</span>
      }
    </a>
  </nav>

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