cbsnexora/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.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="layout-row-wrap gap-2px responsive-column">
  <mat-form-field class="flex-48">
    <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
    <mat-select #charge>
      @for (charge of chargeData; track charge) {
        <mat-option [value]="charge">
          {{ charge.name }}
        </mat-option>
      }
    </mat-select>
  </mat-form-field>

  <div class="flex-48 align-center">
    <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
      <fa-icon icon="plus" class="m-r-10"></fa-icon>
      {{ 'labels.buttons.Add' | translate }}
    </button>
  </div>

  <table
    class="flex-98 mat-elevation-z1"
    mat-table
    [dataSource]="chargesDataSource"
    [hidden]="chargesDataSource.length === 0"
  >
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
      <td mat-cell *matCellDef="let charge">
        {{ charge.name + ', ' + (charge.currency?.displaySymbol || '') }}
      </td>
    </ng-container>

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

    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
      <td mat-cell *matCellDef="let charge">
        {{ charge.amount }}
        <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
          <fa-icon icon="pen"></fa-icon>
        </button>
      </td>
    </ng-container>

    <ng-container matColumnDef="chargeTimeType">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
      <td mat-cell *matCellDef="let charge">
        {{ charge.chargeTimeType.value }}
      </td>
    </ng-container>

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
      <td mat-cell *matCellDef="let charge">
        @if (charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee') {
          <span>
            {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
          </span>
        }
        @if (charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee') {
          <span>
            {{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
          </span>
        }
        @if (
          !(
            charge.chargeTimeType.value === 'Monthly Fee' ||
            charge.chargeTimeType.value === 'Annual Fee' ||
            charge.chargeTimeType.value === 'Specified due date' ||
            charge.chargeTimeType.value === 'Weekly Fee'
          )
        ) {
          <span>
            {{ 'labels.inputs.N/A' | translate }}
          </span>
        }
        @if (
          charge.chargeTimeType.value === 'Weekly Fee' ||
          charge.chargeTimeType.value === 'Annual Fee' ||
          charge.chargeTimeType.value === 'Specified due date'
        ) {
          <button mat-icon-button color="primary" (click)="editChargeDate(charge)">
            <fa-icon icon="pen"></fa-icon>
          </button>
        }
      </td>
    </ng-container>

    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
      <td mat-cell *matCellDef="let charge">
        <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
          <fa-icon icon="trash"></fa-icon>
        </button>
      </td>
    </ng-container>

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

  <mat-divider class="flex-98"></mat-divider>

  <h4 class="mat-h4 flex-98">{{ 'labels.heading.Overdue Charges' | translate }}</h4>

  <table mat-table class="mat-elevation-z1" [dataSource]="overDueChargesDataSource">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
      <td mat-cell *matCellDef="let charge">{{ charge.name + ', ' + (charge.currency?.displaySymbol || '') }}</td>
    </ng-container>

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

    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
      <td mat-cell *matCellDef="let charge">{{ charge.amount | formatNumber }}</td>
    </ng-container>

    <ng-container matColumnDef="collectedon">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
      <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="overdueChargesDisplayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns"></tr>
  </table>
</div>

<div class="layout-row responsive-column align-center gap-2px margin-t">
  <button mat-raised-button matStepperPrevious>
    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
    {{ 'labels.buttons.Previous' | translate }}
  </button>
  <button mat-raised-button matStepperNext>
    {{ 'labels.buttons.Next' | translate }}
    <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
  </button>
  @if (loanId) {
    <button mat-raised-button [routerLink]="['../', 'general']">
      {{ 'labels.buttons.Cancel' | translate }}
    </button>
  }
</div>