cbsnexora/src/app/deposits/recurring-deposits/recurring-deposits-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="tab-container mat-typography">
  <div class="mat-elevation-z1 m-b-25">
    <div class="layout-row align-start">
      <div class="m-b-20">
        <h3>{{ 'labels.heading.All Transactions' | translate }}</h3>
      </div>
      @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
          >
        </div>
      }
    </div>

    <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="row">
        <th mat-header-cell *matHeaderCellDef>#</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>{{ 'labels.inputs.ID' | translate }}</th>
        <td
          mat-cell
          *matCellDef="let transaction"
          [ngClass]="savingsTransactionColor(transaction)"
          (click)="showTransactions(transaction)"
        >
          {{ transaction.id }}
        </td>
      </ng-container>

      <ng-container matColumnDef="transactionDate">
        <th mat-header-cell *matHeaderCellDef>{{ '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 *matHeaderCellDef>{{ 'labels.inputs.Transaction Type' | translate }}</th>
        <td
          mat-cell
          *matCellDef="let transaction"
          [ngClass]="savingsTransactionColor(transaction)"
          (click)="showTransactions(transaction)"
        >
          {{ transaction.transactionType.value }}
        </td>
      </ng-container>

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

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

      <ng-container matColumnDef="balance">
        <th mat-header-cell *matHeaderCellDef class="center">{{ 'labels.inputs.Balance' | translate }}</th>
        <td
          mat-cell
          *matCellDef="let transaction"
          class="r-amount"
          [ngClass]="savingsTransactionColor(transaction)"
          (click)="showTransactions(transaction)"
        >
          {{ transaction.runningBalance | formatNumber }}
        </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *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
              (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>
  </div>
</div>