cbsnexora/src/app/current-accounts/current-account-view/transactions-tab/transactions-tab.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="container">
  <div class="mat-elevation-z1 m-b-25" [hidden]="!accountWithTransactions">
    <div class="layout-row align-end">
      @if (checkStatus()) {
        <div class="action-button m-b-20 layout-row gap-20px">
          <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
            {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
          >
          <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="accruals">
            {{ 'labels.inputs.Hide Accruals' | translate }}</mat-checkbox
          >
          <button mat-raised-button color="primary" [routerLink]="['export']">
            {{ 'labels.buttons.Export' | translate }}
          </button>
        </div>
      }
    </div>

    <table mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="row">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
        <td mat-cell *matCellDef="let transaction; let idx = index" (click)="showTransactions(transaction)">
          {{ idx + 1 }}
        </td>
      </ng-container>

      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Id' | translate }}</th>
        <td
          mat-cell
          *matCellDef="let transaction"
          class="td-select"
          [ngClass]="currentAccountTransactionColor(transaction)"
          (click)="showTransactions(transaction)"
        >
          {{ transaction.id }}
        </td>
      </ng-container>

      <ng-container matColumnDef="date">
        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
          {{ 'labels.inputs.Transaction Date' | translate }}
        </th>
        <td
          mat-cell
          *matCellDef="let transaction"
          [ngClass]="currentAccountTransactionColor(transaction)"
          (click)="showTransactions(transaction)"
        >
          {{ transaction.date | dateFormat }}
        </td>
      </ng-container>

      <ng-container matColumnDef="externalId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.External Id' | translate }}</th>
        <td mat-cell *matCellDef="let transaction" [ngClass]="currentAccountTransactionColor(transaction)">
          <mifosx-external-identifier externalId="{{ transaction.externalId }}"></mifosx-external-identifier>
        </td>
      </ng-container>

      <ng-container matColumnDef="transactionType">
        <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Transaction Type' | translate }}</th>
        <td
          mat-cell
          *matCellDef="let transaction"
          [ngClass]="currentAccountTransactionColor(transaction)"
          (click)="showTransactions(transaction)"
        >
          {{ transaction.transactionType.value | translateKey: 'catalogs' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="debit">
        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Debit' | translate }}</th>
        <td
          mat-cell
          class="r-amount"
          *matCellDef="let transaction"
          [ngClass]="currentAccountTransactionColor(transaction)"
          (click)="showTransactions(transaction)"
        >
          {{
            isDebit(transaction.transactionType)
              ? (transaction.amount | currency: currency?.code || 'USD' : 'symbol-narrow' : '1.2-2')
              : 'N/A'
          }}
        </td>
      </ng-container>

      <ng-container matColumnDef="credit">
        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Credit' | translate }}</th>
        <td
          mat-cell
          class="r-amount"
          *matCellDef="let transaction"
          [ngClass]="currentAccountTransactionColor(transaction)"
          (click)="showTransactions(transaction)"
        >
          {{
            !isDebit(transaction.transactionType)
              ? (transaction.amount | currency: currency?.code || 'USD' : 'symbol-narrow' : '1.2-2')
              : 'N/A'
          }}
        </td>
      </ng-container>

      <ng-container matColumnDef="balance">
        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
        <td
          mat-cell
          class="r-amount"
          *matCellDef="let transaction"
          [ngClass]="currentAccountTransactionColor(transaction)"
          (click)="showTransactions(transaction)"
        >
          {{ transaction.runningBalance | currency: currency?.code || 'USD' : 'symbol-narrow' : '1.2-2' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
        <td mat-cell class="center" *matCellDef="let transaction">
          <button mat-icon-button [matMenuTriggerFor]="transactionMenu" aria-label="" class="action-button">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #transactionMenu="matMenu">
            <button mat-menu-item (click)="showTransactions(transaction)">
              <mat-icon><fa-icon icon="eye" size="sm"></fa-icon></mat-icon>
              <span>{{ 'labels.text.View Transaction' | translate }}</span>
            </button>
            @if (!transaction.reversed) {
              <span>
                <button
                  mat-menu-item
                  *mifosxHasPermission="'ADJUSTTRANSACTION_CURRENTACCOUNT'"
                  (click)="undoTransaction(transaction, $event)"
                >
                  <mat-icon><fa-icon icon="undo" size="sm"></fa-icon></mat-icon>
                  <span>{{ 'tooltips.Undo Transaction' | translate }}</span>
                </button>
              </span>
            }
            <button
              mat-menu-item
              class="account-action-button"
              (click)="routeEdit($event)"
              [routerLink]="[transaction.id, 'reciept']"
            >
              <mat-icon><fa-icon icon="receipt" size="sm"></fa-icon></mat-icon>
              <span>{{ 'tooltips.View Receipts' | translate }}</span>
            </button>
            <button
              mat-menu-item
              (click)="routeEdit($event)"
              [routerLink]="['/', 'journal-entry', 'view', 'S' + transaction.id]"
            >
              <mat-icon><fa-icon icon="table-cells" size="sm"></fa-icon></mat-icon>
              <span>{{ 'tooltips.View Journal Entries' | translate }}</span>
            </button>
          </mat-menu>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
    </table>

    <mat-paginator [pageSize]="50" [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator>
  </div>

  <div class="alert" [hidden]="accountWithTransactions">
    <div class="message">
      <i class="fa fa-exclamation-circle alert-check"></i>
      {{ 'labels.text.No transaction was found' | translate }}
    </div>
  </div>
</div>