cbsnexora/src/app/tasks/checker-inbox-and-tasks-tabs/pending-account/pending-account.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="cv-tab-content">
  @if (showData) {
    <div class="cv-action-bar">
      <mat-form-field appearance="outline" class="cv-search-field">
        <mat-icon matPrefix>search</mat-icon>
        <input
          #filterInput
          matInput
          placeholder="Search by client or account"
          (keyup)="applyFilter(filterInput.value)"
        />
      </mat-form-field>
      <div class="cv-action-buttons">
        <button
          mat-stroked-button
          class="cv-btn cv-btn-approve"
          [disabled]="!selection.hasValue()"
          (click)="approveAccounts()"
        >
          <fa-icon icon="check" class="m-r-10"></fa-icon>Approve
        </button>
        <button
          mat-stroked-button
          class="cv-btn cv-btn-reject"
          [disabled]="!selection.hasValue()"
          (click)="rejectAccounts()"
        >
          <fa-icon icon="ban" class="m-r-10"></fa-icon>Reject
        </button>
      </div>
    </div>

    <div class="table-container">
      <table mat-table [dataSource]="dataSource" class="modern-table">
        <ng-container matColumnDef="select">
          <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox
              (change)="$event ? masterToggle() : null"
              [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()"
              [aria-label]="checkboxLabel()"
            ></mat-checkbox>
          </th>
          <td mat-cell *matCellDef="let row">
            <mat-checkbox
              (click)="$event.stopPropagation()"
              (change)="$event ? selection.toggle(row) : null"
              [checked]="selection.isSelected(row)"
              [aria-label]="checkboxLabel(row)"
            ></mat-checkbox>
          </td>
        </ng-container>

        <ng-container matColumnDef="accountNo">
          <th mat-header-cell *matHeaderCellDef>Account No</th>
          <td mat-cell *matCellDef="let account" class="cell-mono">{{ account.accountNo }}</td>
        </ng-container>

        <ng-container matColumnDef="clientName">
          <th mat-header-cell *matHeaderCellDef>Client Name</th>
          <td mat-cell *matCellDef="let account">{{ account.clientName }}</td>
        </ng-container>

        <ng-container matColumnDef="productName">
          <th mat-header-cell *matHeaderCellDef>Product</th>
          <td mat-cell *matCellDef="let account">{{ account.savingsProductName || account.productName }}</td>
        </ng-container>

        <ng-container matColumnDef="accountType">
          <th mat-header-cell *matHeaderCellDef>Type</th>
          <td mat-cell *matCellDef="let account">
            <span
              class="type-badge"
              [class.type-badge--current]="account.accountType === 'Current'"
              [class.type-badge--fd]="account.accountType === 'Fixed Deposit'"
              [class.type-badge--rd]="account.accountType === 'Recurring Deposit'"
            >
              {{ account.accountType }}
            </span>
          </td>
        </ng-container>

        <ng-container matColumnDef="officeName">
          <th mat-header-cell *matHeaderCellDef>Office</th>
          <td mat-cell *matCellDef="let account">{{ account.officeName }}</td>
        </ng-container>

        <ng-container matColumnDef="fieldOfficerName">
          <th mat-header-cell *matHeaderCellDef>Field Officer</th>
          <td mat-cell *matCellDef="let account">{{ account.fieldOfficerName || '—' }}</td>
        </ng-container>

        <ng-container matColumnDef="submittedOnDate">
          <th mat-header-cell *matHeaderCellDef>Submitted On</th>
          <td mat-cell *matCellDef="let account">
            {{ formatDate(account.timeline?.submittedOnDate) }}
          </td>
        </ng-container>

        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef>Status</th>
          <td mat-cell *matCellDef="let account">
            <span class="status-badge status-badge--pending">{{ account.status?.value }}</span>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr
          mat-row
          *matRowDef="let row; columns: displayedColumns"
          (click)="navigateToAccount(row)"
          class="table-row clickable-row"
        ></tr>
      </table>
    </div>
  }

  @if (!showData) {
    <div class="empty-state">
      <i class="fas fa-clock empty-icon"></i>
      <p class="empty-title">No pending accounts</p>
      <p class="empty-text">There are no accounts awaiting approval at this time.</p>
    </div>
  }
</div>