fix(tasks): wrap Approval Center tabs instead of scrolling behind pagination arrows

Replace mat-tab-nav-bar with a plain wrapping pill nav so all 16 approval sections stay
visible and one click away, instead of being hidden behind Material's prev/next scroll
arrows on a single-row strip.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html

@@ -20,195 +20,143 @@
     </div>
   </div>
 
-  <!-- Pill-style tab navigation -->
+  <!-- Pill-style tab navigation — wraps onto multiple rows so every section stays visible and
-  <nav mat-tab-nav-bar class="ac-tabs" [tabPanel]="tabPanel">
+       clickable at once, instead of being hidden behind prev/next scroll arrows. -->
+  <nav class="ac-tabs">
     <a
-      mat-tab-link
       class="ac-tab"
-      [routerLink]="['./checker-inbox']"
+      routerLink="./checker-inbox"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./client-approval"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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
+    <a class="ac-tab" routerLink="./loan-approval" routerLinkActive="ac-tab--active" *mifosxHasPermission="'READ_LOAN'">
-      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']"
+      routerLink="./loan-disbursal"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./reschedule-loan"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./pending-account"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./pending-savings-products"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./pending-savings-account-edits"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./pending-share-account-edits"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./pending-client-edits"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./rejected-account"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./terminated-account"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./withdrawal-requests"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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]="['./deposit-requests']"
+      routerLink="./deposit-requests"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./disbursement-requests"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #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']"
+      routerLink="./chequebook-requests"
-      routerLinkActive
+      routerLinkActive="ac-tab--active"
-      #chequebookRequests="routerLinkActive"
-      [active]="chequebookRequests.isActive"
       *mifosxHasPermission="'READ_CHEQUEBOOKPENDINGREQUEST'"
     >
       <fa-icon icon="money-check" class="ac-tab__ic"></fa-icon>
@@ -216,7 +164,7 @@
     </a>
   </nav>
 
-  <mat-tab-nav-panel #tabPanel>
+  <div class="ac-tab-panel">
     <router-outlet></router-outlet>
-  </mat-tab-nav-panel>
+  </div>
 </div>

src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.scss

@@ -63,7 +63,10 @@ $amber: #f59e0b;
   }
 }
 
-/* ───────── Pill-style tab navigation ───────── */
+/* ───────── Pill-style tab navigation ─────────
+   A plain wrapping flex row, not mat-tab-nav-bar — with 16 sections, Material's single-row strip
+   hides most of them behind prev/next pagination arrows. Wrapping keeps every tab visible and one
+   click away instead of a scroll-and-hunt. */
 .ac-tabs {
   margin-bottom: 20px;
   background: #fff;
@@ -71,88 +74,51 @@ $amber: #f59e0b;
   border-radius: 14px;
   padding: 6px;
   box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
-  overflow: hidden;
+  display: flex;
-
+  flex-wrap: wrap;
-  ::ng-deep {
-    .mat-mdc-tab-link-container {
-      border-bottom: none !important;
-    }
-
-    .mat-mdc-tab-links {
   gap: 4px;
-    }
-
-    /* Material draws the active-tab underline indicator with a 2px height —
-       hide it; our pill background already signals the active tab. */
-    .mdc-tab-indicator__content--underline,
-    .mat-mdc-tab-header-pagination-controls-enabled .mdc-tab-indicator__content--underline {
-      display: none !important;
-    }
-  }
 }
 
 .ac-tab {
-  display: inline-flex !important;
+  display: inline-flex;
   align-items: center;
   gap: 8px;
-  height: 38px !important;
+  height: 38px;
-  min-width: 0 !important;
+  padding: 0 18px;
-  padding: 0 18px !important;
+  border-radius: 10px;
-  border-radius: 10px !important;
+  font-family: Inter, 'DM Sans', Roboto, sans-serif;
-  font-family: Inter, 'DM Sans', Roboto, sans-serif !important;
+  font-size: 13px;
-  font-size: 13px !important;
+  font-weight: 600;
-  font-weight: 600 !important;
+  letter-spacing: 0.01em;
-  letter-spacing: 0.01em !important;
+  color: #64748b;
-  color: #64748b !important;
+  background: transparent;
-  background: transparent !important;
   transition: all 0.15s ease;
   white-space: nowrap;
-  border: 1px solid transparent !important;
+  border: 1px solid transparent;
-  opacity: 1 !important;
+  text-decoration: none;
+  cursor: pointer;
 
   &__ic {
     font-size: 13px;
     color: inherit;
   }
 
-  &:hover:not(.mdc-tab--active) {
+  &:hover:not(.ac-tab--active) {
-    background: #f1f5f9 !important;
+    background: #f1f5f9;
-    color: $navy !important;
+    color: $navy;
   }
 
-  /* Material 3 adds `.mdc-tab--active` (and `.mat-mdc-tab-link-active`) to the
+  &.ac-tab--active {
-     selected link. Both target the same pill state — bold blue gradient. */
+    background: linear-gradient(135deg, $blue 0%, $blue-d 100%);
-  &.mdc-tab--active,
+    color: #fff;
-  &.mat-mdc-tab-link-active {
-    background: linear-gradient(135deg, $blue 0%, $blue-d 100%) !important;
-    color: #fff !important;
     box-shadow: 0 2px 6px -1px rgb(30 64 175 / 35%);
-    border-color: $blue-d !important;
+    border-color: $blue-d;
-
-    /* Material 3 wraps the label in its own span with a color rule that
-       beats the parent. Force white on every descendant so the active-tab
-       label is always legible against the dark gradient pill. */
-    ::ng-deep .mdc-tab__text-label,
-    ::ng-deep .mat-mdc-tab-link-content,
-    ::ng-deep span,
-    .ac-tab__ic {
-      color: #fff !important;
-      opacity: 1 !important;
-    }
   }
 }
 
 @media (width <= 768px) {
-  .ac-tabs {
-    overflow-x: auto;
-
-    ::ng-deep .mat-mdc-tab-links {
-      flex-wrap: nowrap;
-    }
-  }
-
   .ac-tab {
-    padding: 0 14px !important;
+    padding: 0 14px;
-    font-size: 12px !important;
+    font-size: 12px;
   }
 }

src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.ts

@@ -8,13 +8,17 @@
 
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { MatTabNav, MatTabLink, MatTabNavPanel } from '@angular/material/tabs';
+import { RouterLinkActive, RouterOutlet } from '@angular/router';
-import { RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
  * Approval Center — checker inbox + client/loan approval workflows.
+ *
+ * The tab strip is a plain wrapping nav (not mat-tab-nav-bar) on purpose: with 16 sections,
+ * Material's single-row tab strip hides most of them behind prev/next pagination arrows, forcing
+ * a click-and-scan hunt for whichever one you need. Wrapping onto multiple rows keeps every tab
+ * visible and one click away.
  */
 @Component({
   selector: 'mifosx-checker-inbox-and-tasks',
@@ -22,10 +26,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   styleUrls: ['./checker-inbox-and-tasks.component.scss'],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
-    MatTabNav,
-    MatTabLink,
     RouterLinkActive,
-    MatTabNavPanel,
     RouterOutlet,
     FaIconComponent
   ]