cbsnexora/src/app/savings/savings-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="txn-tab">
  <div class="txn-tab__card" [hidden]="!accountWithTransactions">
    @if (checkStatus()) {
      <div class="txn-tab__toolbar">
        <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="txn-tab__check">
          {{ 'labels.inputs.Hide Reversed' | translate }}
        </mat-checkbox>
        <mat-checkbox [formControl]="hideAccrualsParam" (click)="hideAccruals()" class="txn-tab__check">
          {{ 'labels.inputs.Hide Accruals' | translate }}
        </mat-checkbox>
        <span class="txn-tab__spacer"></span>
        <button mat-flat-button class="txn-tab__export" [routerLink]="['export']">
          {{ 'labels.buttons.Export' | translate }}
        </button>
      </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]="savingsTransactionColor(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]="savingsTransactionColor(transaction)"
          (click)="showTransactions(transaction)"
        >
          {{ transaction.date | dateFormat }}
        </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]="savingsTransactionColor(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]="savingsTransactionColor(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]="savingsTransactionColor(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]="savingsTransactionColor(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>
            <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="txn-tab__empty" [hidden]="accountWithTransactions">
    <fa-icon icon="inbox" class="txn-tab__empty-ico"></fa-icon>
    <div class="txn-tab__empty-title">
      {{ 'labels.text.No transaction was found' | translate }}
    </div>
    <div class="txn-tab__empty-sub">Posted transactions will appear here.</div>
  </div>
</div>