cbsnexora/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-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-column gap-2px">
  <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate?.accountChart.name">
    <span class="flex-40">{{ 'labels.inputs.name' | translate }}:</span>
    <span class="flex-60">{{ fixedDepositsAccountProductTemplate.accountChart.name }}</span>
  </div>

  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
    <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
  </div>

  <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
    <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
    <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
  </div>

  <div class="flex-fill" *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">
    <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
    <span class="flex-60">{{ fixedDepositsAccountProductTemplate?.accountChart.description }}</span>
  </div>

  <div class="flex-fill">
    <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
    <span class="flex-60">{{
      fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No'
    }}</span>
  </div>

  <table class="mat-elevation-z1" mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
    <ng-container matColumnDef="period">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
      <td mat-cell *matCellDef="let chartSlab">
        {{ chartSlab.fromPeriod }}-{{ chartSlab.toPeriod }}&nbsp;{{ chartSlab.periodType.value }}
      </td>
    </ng-container>

    <ng-container matColumnDef="amountRange">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.amountRangeFrom }}-{{ chartSlab.amountRangeTo }}</td>
    </ng-container>

    <ng-container matColumnDef="interest">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate }}</td>
    </ng-container>

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
      <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
      <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
        <button
          mat-button
          color="primary"
          (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
        >
          <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
            <fa-icon icon="eye" class="m-r-10"></fa-icon>
            {{ 'labels.buttons.View Incentives' | translate }}
          </span>
          <span *ngIf="expandChartSlabIndex === chartSlabIndex">
            <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
            {{ 'labels.buttons.Hide Incentives' | translate }}
          </span>
        </button>
      </td>
    </ng-container>

    <ng-container matColumnDef="incentives">
      <td
        mat-cell
        *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
        [attr.colspan]="chartSlabsDisplayedColumns.length"
      >
        <div
          class="incentives layout-row-wrap flex-fill"
          [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
        >
          <mat-card class="layout-row-wrap flex-fill">
            <h4 class="m-b-10 flex-13">
              {{ 'labels.heading.Incentives' | translate }}
            </h4>

            <table
              class="flex-fill mat-elevation-z1"
              mat-table
              [dataSource]="chartSlab.incentives"
              *ngIf="chartSlab.incentives.length"
            >
              <ng-container matColumnDef="entityType">
                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
                <td mat-cell *matCellDef="let incentive">
                  {{ incentive.entityType.value }}
                </td>
              </ng-container>

              <ng-container matColumnDef="attributeName">
                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
                <td mat-cell *matCellDef="let incentive">
                  {{ incentive.attributeName.value }}
                </td>
              </ng-container>

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

              <ng-container matColumnDef="attributeValue">
                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
                <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                  {{ incentive.attributeValueDesc }}
                </td>
              </ng-container>

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

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

              <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
            </table>
          </mat-card>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></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>
</div>