cbsnexora/src/app/accounts/accounts-list/accounts-list.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="acl-page">
  <!-- Header -->
  <div class="acl-header" [ngClass]="config.accentClass">
    <div class="acl-header__icon">
      <fa-icon [icon]="config.icon"></fa-icon>
    </div>
    <div class="acl-header__text">
      <h2 class="acl-header__title">{{ config.label }}</h2>
      <span class="acl-header__count">
        @if (isLoading) {
          Loading...
        } @else {
          {{ totalRecords }} active accounts
        }
      </span>
    </div>
  </div>

  <!-- Search Bar -->
  <div class="acl-search-wrap">
    <div class="acl-search">
      <fa-icon icon="search" class="acl-search__icon"></fa-icon>
      <input
        [formControl]="searchControl"
        class="acl-search__input"
        [placeholder]="searchType === 'accountNo' ? 'Search by account number…' : 'Search by client name…'"
      />
      @if (searchControl.value) {
        <button class="acl-search__clear" (click)="clearSearch()">
          <fa-icon icon="times"></fa-icon>
        </button>
      }
    </div>
    <button
      class="acl-btn acl-btn--toggle"
      (click)="toggleSearchType()"
      [matTooltip]="'Switch to ' + (searchType === 'accountNo' ? 'client name' : 'account number') + ' search'"
    >
      <fa-icon icon="exchange-alt"></fa-icon>
      {{ searchType === 'accountNo' ? 'Acct No' : 'Client' }}
    </button>
    <button class="acl-btn acl-btn--icon" (click)="loadAccounts()" matTooltip="Refresh">
      <fa-icon icon="sync-alt"></fa-icon>
    </button>
  </div>

  <!-- Date Filters -->
  <div class="acl-filters">
    <div class="acl-filters__group">
      <div class="acl-datepick">
        <span class="acl-datepick__label">From</span>
        <input type="date" class="acl-datepick__input" [formControl]="fromDateControl" [max]="today" />
      </div>
      <div class="acl-filters__arrow">
        <fa-icon icon="arrow-right"></fa-icon>
      </div>
      <div class="acl-datepick">
        <span class="acl-datepick__label">To</span>
        <input type="date" class="acl-datepick__input" [formControl]="toDateControl" [max]="today" />
      </div>
    </div>

    <div class="acl-filters__sep"></div>

    <div class="acl-datepick acl-datepick--ason">
      <span class="acl-datepick__label">
        <fa-icon icon="clock"></fa-icon>
        As On Date
      </span>
      <input type="date" class="acl-datepick__input" [formControl]="asOnDateControl" [max]="today" />
    </div>

    @if (hasDateFilters) {
      <button class="acl-filters__clear" (click)="clearDateFilters()">
        <fa-icon icon="times"></fa-icon>
        Clear
      </button>
    }
  </div>

  <!-- Table -->
  <div class="acl-card">
    @if (isLoading) {
      <div class="acl-state acl-state--loading">
        <mat-spinner diameter="32"></mat-spinner>
        <span>Loading accounts…</span>
      </div>
    }

    @if (!isLoading && dataSource.data.length === 0) {
      <div class="acl-state acl-state--empty">
        <div class="acl-state__icon">
          <fa-icon icon="inbox"></fa-icon>
        </div>
        <p class="acl-state__title">No active accounts found</p>
        <p class="acl-state__sub">Try adjusting your search</p>
      </div>
    }

    @if (!isLoading && dataSource.data.length > 0) {
      <div class="acl-table-wrap">
        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="acl-table">
          <ng-container matColumnDef="accountNo">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="acl-th">Account No</th>
            <td mat-cell *matCellDef="let row" class="acl-td">
              <span class="acl-acct-no">{{ row.accountNo }}</span>
            </td>
          </ng-container>

          <ng-container matColumnDef="depositType">
            <th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Type</th>
            <td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
              <span class="acl-type-badge" [ngClass]="config.typeBadgeClass">{{ config.typeLabel }}</span>
            </td>
          </ng-container>

          <ng-container matColumnDef="clientName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="acl-th">Client</th>
            <td mat-cell *matCellDef="let row" class="acl-td">
              <div class="acl-client">
                <div class="acl-client__avatar">{{ (row.clientName || '?')[0] }}</div>
                <span class="acl-client__name">{{ row.clientName }}</span>
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="productName">
            <th mat-header-cell *matHeaderCellDef class="acl-th">Product</th>
            <td mat-cell *matCellDef="let row" class="acl-td">
              <span class="acl-product">{{ row.savingsProductName || row.depositProductName || row.productName }}</span>
            </td>
          </ng-container>

          <ng-container matColumnDef="balance">
            <th mat-header-cell *matHeaderCellDef class="acl-th acl-th--right">Balance</th>
            <td mat-cell *matCellDef="let row" class="acl-td acl-td--right">
              <span class="acl-balance">{{ getCurrencySymbol(row) }} {{ getBalance(row) | formatNumber }}</span>
            </td>
          </ng-container>

          <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Status</th>
            <td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
              <span class="acl-status" [ngClass]="getStatusClass(row)">{{ getStatusLabel(row) }}</span>
            </td>
          </ng-container>

          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Actions</th>
            <td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
              <button class="acl-view-btn" (click)="$event.stopPropagation(); viewAccount(row)" matTooltip="View">
                <fa-icon icon="eye"></fa-icon>
              </button>
            </td>
          </ng-container>

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

      <mat-paginator
        [length]="totalRecords"
        [pageSize]="pageSize"
        [pageIndex]="pageIndex"
        [pageSizeOptions]="[10, 20, 50, 100]"
        (page)="onPageChange($event)"
        class="acl-paginator"
        showFirstLastButtons
      ></mat-paginator>
    }
  </div>
</div>