frontend-inversiones/src/app/components/instruments/pper/pper.component.html

<div *ngIf="!summary">
  <h4 class="card-title">
    Préstamo personal
  </h4>
  <form
    class="form-auth-small ng-untouched ng-pristine ng-valid"
    [formGroup]="investmentProposalForm"
  >
    <div class="row">
      <!-- Monto préstamo -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="monto_prestamo">Monto préstamo: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="monto_prestamo"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.monto_prestamo.errors
              }"
            />
            <div
              *ngIf="submitted && f.monto_prestamo.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.monto_prestamo.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.monto_prestamo.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Tasa -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="tasa_porcentaje">Tasa: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="tasa_porcentaje"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.tasa_porcentaje.errors
              }"
            />
            <div
              *ngIf="submitted && f.tasa_porcentaje.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.tasa_porcentaje.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.tasa_porcentaje.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- IVA -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="iva_porcentaje">IVA: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="iva_porcentaje"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.iva_porcentaje.errors
              }"
            />
            <div
              *ngIf="submitted && f.iva_porcentaje.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.iva_porcentaje.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.iva_porcentaje.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Plazo -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="plazo_gracia">Plazo: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-list-ol" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="plazo_gracia"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.plazo_gracia.errors
              }"
            />
            <div
              *ngIf="submitted && f.plazo_gracia.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.plazo_gracia.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.plazo_gracia.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Pago seguro daño -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="pago_seguro_dano">Pago seguro daño: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="pago_seguro_dano"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.pago_seguro_dano.errors
              }"
            />
            <div
              *ngIf="submitted && f.pago_seguro_dano.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.pago_seguro_dano.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Pago seguro vivienda -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="pago_seguro_vivienda">Pago seguro vivienda: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="pago_seguro_vivienda"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.pago_seguro_vivienda.errors
              }"
            />
            <div
              *ngIf="submitted && f.pago_seguro_vivienda.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.pago_seguro_vivienda.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Total de cuotas mensuales -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="total_cuotas_mensuales"
            >Total de cuotas mensuales:
          </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-list-ol" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="total_cuotas_mensuales"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.total_cuotas_mensuales.errors
              }"
            />
            <div
              *ngIf="submitted && f.total_cuotas_mensuales.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.total_cuotas_mensuales.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.total_cuotas_mensuales.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Fecha otorgamiento -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_otorgamiento">Fecha otorgamiento: </label>
          <div class="input-box-container">
            <p>
              <i class="far fa-calendar" aria-hidden="true"></i>
            </p>
            <input
              class="input-box form-control"
              placeholder="Seleccione una fecha"
              angular-mydatepicker
              formControlName="fecha_otorgamiento"
              (click)="dp.toggleCalendar()"
              [options]="myDpOptions"
              #dp="angular-mydatepicker"
              [ngClass]="{
                'is-invalid': submitted && f.fecha_otorgamiento.errors
              }"
            />
          </div>

          <div
            *ngIf="submitted && f.fecha_otorgamiento.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_otorgamiento.errors.required">
              Campo requerido
            </div>
          </div>
        </div>
      </div>

      <!-- Nombre deudor -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="nombre_deudor">Nombre deudor: </label>
          <div class="input-box-container">
            <p>
              <i class="far fa-user" aria-hidden="true"></i>
            </p>
            <input
              class="input-box form-control"
              formControlName="nombre_deudor"
            />
          </div>
        </div>
      </div>

      <!-- Número deudor -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="numero_deudor">Número deudor: </label>
          <div class="input-box-container">
            <p>
              <i class="far fa-user" aria-hidden="true"></i>
            </p>
            <input
              class="input-box form-control"
              formControlName="numero_deudor"
            />
          </div>
        </div>
      </div>

      <div class="col-lg-12 col-sm-12 pr-xl-12">
        <div class="form-group text-right">
          <br />
          <button
            type="button"
            class="btn btn-success center-component"
            (click)="getCalculations(investmentProposalForm, false)"
          >
            Realizar cálculos
          </button>
        </div>
      </div>
    </div>

    <br />
    <!-- Calculos del instrumento-->
    <div class="instrument-calcs">
      <div class="row">
        <div class="col-12">
          <span class="badge badge-success badge-custom"
            >Cálculos del instrumento</span
          >
        </div>

        <div class="col-sm-6">
          <h4>Monto préstamo:</h4>
          <div class="field">$USD {{ monto_prestamo | number: "1.2-4" }}</div>
        </div>

        <div class="col-sm-6">
          <h4>Tasa (%):</h4>
          <div class="field">{{ tasa_porcentaje | number: "1.2-4" }}%</div>
        </div>
        <div class="col-sm-6">
          <h4>IVA (%):</h4>
          <div class="field">{{ iva_porcentaje | number: "1.2-4" }}%</div>
        </div>
        <div class="col-sm-6">
          <h4>Plazo:</h4>
          <div class="field">{{ plazo_gracia }}</div>
        </div>

        <div class="col-sm-6">
          <h4>Pago de seguro por daño</h4>
          <div class="field">$USD {{ pago_seguro_dano | number: "1.2-4" }}</div>
        </div>

        <div class="col-sm-6">
          <h4>Pago seguro de vivienda:</h4>
          <div class="field">
            $USD {{ pago_seguro_vivienda | number: "1.2-4" }}
          </div>
        </div>

        <div class="col-sm-6">
          <h4>Total de cuotas mensuales:</h4>
          <div class="field">
            {{ total_cuotas_mensuales }}
          </div>
        </div>

        <div class="col-sm-6">
          <h4>Cuota sin seguros:</h4>
          <div class="field">
            $USD {{ cuota_sin_seguros | number: "1.2-4" }}
          </div>
        </div>

        <div class="col-sm-6">
          <h4>Fecha de otorgamiento:</h4>
          <div class="field">{{ fecha_otorgamiento }}</div>
        </div>
        <div class="col-sm-6">
          <h4>Fecha de gracia:</h4>
          <div class="field">{{ fecha_gracia }}</div>
        </div>
        <div class="col-sm-6">
          <h4>Fecha fin de otorgamiento:</h4>
          <div class="field">{{ fecha_fin_otorgamiento }}</div>
        </div>
      </div>
    </div>
    <br />
    <!-- Tabla de proyecciones del instrumento-->
    <div class="instrument-calcs">
      <div class="row">
        <div class="col-12">
          <span class="badge badge-success badge-custom"
            >Proyecciones del instrumento</span
          >
        </div>

        <div *ngIf="hasProjections" class="custom-table-container">
          <table mat-table [dataSource]="dataSource" class="example-table">
            <ng-container matColumnDef="posicion">
              <th mat-header-cell *matHeaderCellDef>#</th>
              <td mat-cell *matCellDef="let row">
                {{ row.posicion }}
              </td>
              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
            </ng-container>

            <ng-container matColumnDef="plazo">
              <th mat-header-cell *matHeaderCellDef>Plazo</th>
              <td mat-cell *matCellDef="let row">
                {{ row.plazo }}
              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>

            <ng-container matColumnDef="fecha_pago">
              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.fecha_pago == "" || row.fecha_pago == undefined
                    ? "-"
                    : row.fecha_pago
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>
            <ng-container matColumnDef="ingreso_bruto">
              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                    ? "0"
                    : (row.ingreso_bruto | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="ingreso_neto">
              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.ingreso_neto == "" || row.ingreso_neto == undefined
                    ? "0"
                    : (row.ingreso_neto | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="tasa_porcentaje">
              <th mat-header-cell *matHeaderCellDef>Tasa (%)</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.tasa_porcentaje == "" || row.tasa_porcentaje == undefined
                    ? "0"
                    : (row.tasa_porcentaje | number: "1.2-4")
                }}%
              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>

            <ng-container matColumnDef="saldo_inicial">
              <th mat-header-cell *matHeaderCellDef>Saldo inicial</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.saldo_inicial == "" || row.saldo_inicial == undefined
                    ? "0"
                    : (row.saldo_inicial | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_saldo_inicial | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="pago_cuota">
              <th mat-header-cell *matHeaderCellDef>Pago cuota ($)</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.pago_cuota == "" || row.pago_cuota == undefined
                    ? "0"
                    : (row.pago_cuota | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{ consolidado_proyeccion.total_pago_cuota | number: "1.2-4" }}
              </td>
            </ng-container>

            <ng-container matColumnDef="iva_interes"
              >`
              <th mat-header-cell *matHeaderCellDef>IVA ($)</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.iva_interes == "" || row.iva_interes == undefined
                    ? "0"
                    : (row.iva_interes | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_iva_interes | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="abono_capital">
              <th mat-header-cell *matHeaderCellDef>Abono capital</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.abono_capital == "" || row.abono_capital == undefined
                    ? "0"
                    : (row.abono_capital | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_abono_capital | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="capital_restante">
              <th mat-header-cell *matHeaderCellDef>Capital restante</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.capital_restante == "" ||
                  row.capital_restante == undefined
                    ? "0"
                    : (row.capital_restante | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_capital_restante
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="pago_seguro_dano">
              <th mat-header-cell *matHeaderCellDef>Pago seguro daño</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.pago_seguro_dano == "" ||
                  row.pago_seguro_dano == undefined
                    ? "0"
                    : (row.pago_seguro_dano | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_pago_seguro_dano
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="pago_seguro_vivienda">
              <th mat-header-cell *matHeaderCellDef>Pago seguro vivienda</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.pago_seguro_vivienda == "" ||
                  row.pago_seguro_vivienda == undefined
                    ? "0"
                    : (row.pago_seguro_vivienda | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_pago_seguro_vivienda
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="total_cuota">
              <th mat-header-cell *matHeaderCellDef>Pago seguro vivienda</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.total_cuota == "" || row.total_cuota == undefined
                    ? "0"
                    : (row.total_cuota | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{ consolidado_proyeccion.total_cuota | number: "1.2-4" }}
              </td>
            </ng-container>

            <ng-container matColumnDef="amortizacion_capital">
              <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.amortizacion_capital == "" ||
                  row.amortizacion_capital == undefined
                    ? "0"
                    : (row.amortizacion_capital | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_amortizacion_capital
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="total_recibir">
              <th mat-header-cell *matHeaderCellDef>Total a recibir</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.total_recibir == "" || row.total_recibir == undefined
                    ? "0"
                    : (row.total_recibir | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{ consolidado_proyeccion.total_recibir | number: "1.2-4" }}
              </td>
            </ng-container>

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

    <br />
    <div class="form-group text-center space-20">
      <button
        type="button"
        class="btn btn-default center-component margin-right"
        (click)="goToPrevious()"
      >
        Anterior
      </button>
      <button
        type="submit"
        class="btn btn-primary center-component margin-right"
        (click)="goToNext(investmentProposalForm)"
      >
        Siguiente
      </button>
    </div>
  </form>
</div>

<div *ngIf="summary">
  <div class="timeline-body">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Valor nominal:</h4>
        <div class="field">
          $USD {{ instrument_work.monto_prestamo | number: "1.2-4" }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Monto préstamo:</h4>
        <div class="field">
          $USD {{ instrument_work.monto_prestamo | number: "1.2-4" }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>IVA (%):</h4>
        <div class="field">
          {{ instrument_work.iva_porcentaje | number: "1.2-4" }}%
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Plazo:</h4>
        <div class="field">{{ instrument_work.plazo_gracia }}</div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Pago de seguro por daño</h4>
        <div class="field">
          $USD {{ instrument_work.pago_seguro_dano | number: "1.2-4" }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Pago seguro de vivienda:</h4>
        <div class="field">
          $USD {{ instrument_work.pago_seguro_vivienda | number: "1.2-4" }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Total de cuotas mensuales:</h4>
        <div class="field">
          {{ instrument_work.total_cuotas_mensuales }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Cuota sin seguros:</h4>
        <div class="field">
          $USD {{ instrument_work.cuota_sin_seguros | number: "1.2-4" }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha de otorgamiento:</h4>
        <div class="field">{{ instrument_work.fecha_otorgamiento }}</div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha de gracia:</h4>
        <div class="field">{{ instrument_work.fecha_gracia }}</div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha fin de otorgamiento:</h4>
        <div class="field">{{ instrument_work.fecha_fin_otorgamiento }}</div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Nombre del deudor:</h4>
        <div class="field">{{ instrument_work.nombre_deudor }}</div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Número del deudor:</h4>
        <div class="field">{{ instrument_work.numero_deudor }}</div>
      </div>
    </div>
    <br />
    <div *ngIf="hasProjections" class="instrument-calcs-summary">
      <div class="row">
        <div class="col-12">
          <span class="badge-warning badge-custom-instrument"
            >Proyecciones del instrumento</span
          >
        </div>

        <div class="custom-table-container">
          <table mat-table [dataSource]="dataSource2" class="example-table">
            <ng-container matColumnDef="posicion">
              <th mat-header-cell *matHeaderCellDef>#</th>
              <td mat-cell *matCellDef="let row">
                {{ row.posicion }}
              </td>
              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
            </ng-container>

            <ng-container matColumnDef="plazo">
              <th mat-header-cell *matHeaderCellDef>Plazo</th>
              <td mat-cell *matCellDef="let row">
                {{ row.plazo }}
              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>

            <ng-container matColumnDef="fecha_pago">
              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.fecha_pago == "" || row.fecha_pago == undefined
                    ? "-"
                    : row.fecha_pago
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>
            <ng-container matColumnDef="ingreso_bruto">
              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                    ? "0"
                    : (row.ingreso_bruto | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="ingreso_neto">
              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.ingreso_neto == "" || row.ingreso_neto == undefined
                    ? "0"
                    : (row.ingreso_neto | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="tasa_porcentaje">
              <th mat-header-cell *matHeaderCellDef>Tasa (%)</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.tasa_porcentaje == "" || row.tasa_porcentaje == undefined
                    ? "0"
                    : (row.tasa_porcentaje | number: "1.2-4")
                }}%
              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>

            <ng-container matColumnDef="saldo_inicial">
              <th mat-header-cell *matHeaderCellDef>Saldo inicial</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.saldo_inicial == "" || row.saldo_inicial == undefined
                    ? "0"
                    : (row.saldo_inicial | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_saldo_inicial | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="pago_cuota">
              <th mat-header-cell *matHeaderCellDef>Pago cuota ($)</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.pago_cuota == "" || row.pago_cuota == undefined
                    ? "0"
                    : (row.pago_cuota | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{ consolidado_proyeccion.total_pago_cuota | number: "1.2-4" }}
              </td>
            </ng-container>

            <ng-container matColumnDef="iva_interes"
              >`
              <th mat-header-cell *matHeaderCellDef>IVA ($)</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.iva_interes == "" || row.iva_interes == undefined
                    ? "0"
                    : (row.iva_interes | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_iva_interes | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="abono_capital">
              <th mat-header-cell *matHeaderCellDef>Abono capital</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.abono_capital == "" || row.abono_capital == undefined
                    ? "0"
                    : (row.abono_capital | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_abono_capital | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="capital_restante">
              <th mat-header-cell *matHeaderCellDef>Capital restante</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.capital_restante == "" ||
                  row.capital_restante == undefined
                    ? "0"
                    : (row.capital_restante | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_capital_restante
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="pago_seguro_dano">
              <th mat-header-cell *matHeaderCellDef>Pago seguro daño</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.pago_seguro_dano == "" ||
                  row.pago_seguro_dano == undefined
                    ? "0"
                    : (row.pago_seguro_dano | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_pago_seguro_dano
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="pago_seguro_vivienda">
              <th mat-header-cell *matHeaderCellDef>Pago seguro vivienda</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.pago_seguro_vivienda == "" ||
                  row.pago_seguro_vivienda == undefined
                    ? "0"
                    : (row.pago_seguro_vivienda | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_pago_seguro_vivienda
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="total_cuota">
              <th mat-header-cell *matHeaderCellDef>Pago seguro vivienda</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.total_cuota == "" || row.total_cuota == undefined
                    ? "0"
                    : (row.total_cuota | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{ consolidado_proyeccion.total_cuota | number: "1.2-4" }}
              </td>
            </ng-container>

            <ng-container matColumnDef="amortizacion_capital">
              <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.amortizacion_capital == "" ||
                  row.amortizacion_capital == undefined
                    ? "0"
                    : (row.amortizacion_capital | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{
                  consolidado_proyeccion.total_amortizacion_capital
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="total_recibir">
              <th mat-header-cell *matHeaderCellDef>Total a recibir</th>
              <td mat-cell *matCellDef="let row">
                ${{
                  row.total_recibir == "" || row.total_recibir == undefined
                    ? "0"
                    : (row.total_recibir | number: "1.2-4")
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                ${{ consolidado_proyeccion.total_recibir | number: "1.2-4" }}
              </td>
            </ng-container>

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