cbsnexora/src/app/current-accounts/current-account-view/charges-tab/charges-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="chg-tab">
  <div class="chg-tab__card">
    <div class="chg-tab__toolbar">
      <h3 class="chg-tab__title">{{ 'labels.inputs.Charges' | translate }}</h3>
      <span class="chg-tab__spacer"></span>
      @if (this.chargesData) {
        <button mat-flat-button class="chg-tab__toggle" (click)="toggleCharges()">
          {{
            showInactiveCharges
              ? viewAllChargeButtons('View Active Charges')
              : viewAllChargeButtons('View Inactive Charges')
          }}
        </button>
      }
    </div>

    <table mat-table #chargesTable [dataSource]="dataSource">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
        <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
      </ng-container>

      <ng-container matColumnDef="feeOrPenalty">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Charge Type' | translate }}</th>
        <td mat-cell *matCellDef="let charge">{{ charge.penalty ? 'Penalty' : ('Fee' | translateKey: 'catalogs') }}</td>
      </ng-container>

      <ng-container matColumnDef="paymentDueAt">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Due At' | translate }}</th>
        <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value | translateKey: 'catalogs' }}</td>
      </ng-container>

      <ng-container matColumnDef="dueAsOf">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due As Of' | translate }}</th>
        <td mat-cell *matCellDef="let charge">{{ charge.chargeDueDate | dateFormat }}</td>
      </ng-container>

      <ng-container matColumnDef="repeatsOn">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repeats On (M/d)' | translate }}</th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.feeOnMonthDay ? charge.feeOnMonthDay.month + '/' + charge.feeOnMonthDay.day : '' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="calculationType">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Calculation Type' | translate }}</th>
        <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType?.value | translateKey: 'catalogs' }}</td>
      </ng-container>

      <ng-container matColumnDef="due">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.amount | currency: currentAccountData.currency.code : 'symbol-narrow' : '1.2-2' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="paid">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.amountPaid | currency: currentAccountData.currency.code : 'symbol-narrow' : '1.2-2' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="waived">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.amountWaived | currency: currentAccountData.currency.code : 'symbol-narrow' : '1.2-2' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="outstanding">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
        <td mat-cell *matCellDef="let charge">
          {{ charge.amountOutstanding | currency: currentAccountData.currency.code : 'symbol-narrow' : '1.2-2' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
        <td mat-cell *matCellDef="let charge">
          @if (currentAccountData.status.value === 'Submitted and pending approval') {
            <span>
              <button
                class="account-action-button"
                mat-raised-button
                color="primary"
                matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
                *mifosxHasPermission="'UPDATE_CURRENTACCOUNTCHARGE'"
                (click)="routeEdit($event); editCharge(charge)"
              >
                <i class="fa fa-pencil"></i>
              </button>
              <button
                class="account-action-button"
                mat-raised-button
                color="warn"
                matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
                *mifosxHasPermission="'DELETE_CURRENTACCOUNTCHARGE'"
                (click)="routeEdit($event); deleteCharge(charge.id)"
              >
                <i class="fa fa-trash"></i>
              </button>
            </span>
          }
          @if (currentAccountData.status.value === 'Active' && charge.amountOutstanding !== 0) {
            <span>
              <button
                class="account-action-button"
                mat-raised-button
                color="primary"
                matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
                *mifosxHasPermission="'PAY_CURRENTACCOUNTCHARGE'"
                (click)="routeEdit($event); payCharge(charge.id)"
              >
                <i class="fa fa-dollar"></i>
              </button>
              <button
                class="account-action-button"
                mat-raised-button
                color="primary"
                matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
                *mifosxHasPermission="'WAIVE_CURRENTACCOUNTCHARGE'"
                (click)="routeEdit($event); waiveCharge(charge.id)"
              >
                <i class="fa fa-flag"></i>
              </button>
              @if (isRecurringCharge(charge)) {
                <button
                  class="account-action-button"
                  mat-raised-button
                  color="primary"
                  matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
                  *mifosxHasPermission="'INACTIVATE_CURRENTACCOUNTCHARGE'"
                  (click)="routeEdit($event); inactivateCharge(charge.id)"
                >
                  <i class="fa fa-ban"></i>
                </button>
              }
            </span>
          }
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" [routerLink]="[row.id]"></tr>
    </table>
  </div>
</div>