Merge branch 'features-o' of onunez/frontend-inversiones into development

src/app/components/incomes/general-form/general-form.component.html

@@ -321,6 +321,70 @@
                         </div>
                       </div>
                     </div>
+                  </div>
+                  <br />
+                  <div class="row">
+                    <div class="col-12">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="customSwitch1"
+                          (click)="toggle()"
+                        />
+                        <label class="custom-control-label" for="customSwitch1"
+                          >Ingreso parcial</label
+                        >
+                      </div>
+                    </div>
+                    <div class="col-lg-6 col-sm-12 pr-xl-3" *ngIf="partial">
+                      <div class="form-group">
+                        <label for="fecha_inicio">Fecha inicio: </label>
+
+                        <div class="input-box-container">
+                          <div>
+                            <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_inicio"
+                              (click)="dp0.toggleCalendar()"
+                              [options]="myDpOptions"
+                              #dp0="angular-mydatepicker"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-lg-6 col-sm-12 pr-xl-3" *ngIf="partial">
+                      <div class="form-group">
+                        <label for="fecha_vencimiento"
+                          >Fecha vencimiento:
+                        </label>
+
+                        <div class="input-box-container">
+                          <div>
+                            <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_vencimiento"
+                              (click)="dp0.toggleCalendar()"
+                              [options]="myDpOptions"
+                              #dp0="angular-mydatepicker"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
                         <label for="payment_types">Tipo pago: </label>
@@ -383,7 +447,9 @@
                     <!-- Fecha vencimiento -->
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
-                        <label for="fecha_vencimiento">Fecha ingreso: </label>
+                        <label for="fecha_proyeccion_pago"
+                          >Fecha proyeccion pago:
+                        </label>
 
                         <div class="input-box-container">
                           <div>
@@ -394,7 +460,7 @@
                               class="input-box form-control"
                               placeholder="Seleccione una fecha"
                               angular-mydatepicker
-                              formControlName="fecha_ingreso"
+                              formControlName="fecha_proyeccion_pago"
                               (click)="dp2.toggleCalendar()"
                               [options]="myDpOptions"
                               #dp2="angular-mydatepicker"
@@ -417,11 +483,32 @@
                       </div>
                     </div>
 
+                    <div class="col-lg-6 col-sm-12 pr-xl-3">
+                      <div class="form-group">
+                        <label for="comentario">Comentarios: </label>
+
+                        <textarea
+                          rows="2"
+                          class="form-control"
+                          formControlName="comentario"
+                        ></textarea>
+                        <div
+                          *ngIf="submitted && f.comentario.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.comentario.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
                     <div class="col-lg-12 col-sm-12 pr-xl-12">
                       <br />
                       <button
                         class="btn btn-primary center-component float-left"
                         type="button"
+                        [disabled]="true"
                         (click)="conciliateIncome()"
                       >
                         Conciliar ingreso
@@ -429,6 +516,7 @@
                       <button
                         class="btn btn-success center-component float-right"
                         type="submit"
+                        [disabled]="true"
                         (click)="submitIncome(investmentProposalForm)"
                       >
                         Guardar información de ingreso

src/app/components/incomes/general-form/general-form.component.ts

@@ -108,6 +108,11 @@ export class GeneralIncomeFormComponent implements OnInit {
   incomeObject: any;
   incomes: any;
   incomes_exists: boolean;
+  idInversion: any;
+  idInstrumentIncome: any;
+  projectionDate: any;
+  projectionRes: any;
+  partial: boolean;
 
   constructor(
     private catalogService: CatalogsService,
@@ -123,9 +128,6 @@ export class GeneralIncomeFormComponent implements OnInit {
       this.authService.getJwtToken()
     );
     this.userRole = decodedToken.groups;
-    //    console.log("User role");
-    //  console.log(this.userRole);
-    //console.log(this.userRole.length == 0);
 
     Swal.fire({
       allowOutsideClick: false,
@@ -143,36 +145,51 @@ export class GeneralIncomeFormComponent implements OnInit {
 
   ngOnInit() {
     Swal.close();
+    this.partial = false;
     const formDataObj = {};
 
-    this.route.params.subscribe(params => {
-      this.instrumentCode = params["instrument"];
-      this.projectionID = params["id"];
+    this.route.queryParams.subscribe(params => {
+      // ALT
+      this.idInversion = params["id_inversion"];
+      this.idInstrumentIncome = params["id_proyeccion_ingreso_instrumento"];
+      this.projectionDate = params["fecha_proyeccion_pago"];
+
+      console.log(params);
     });
 
-    if (this.projectionID != undefined) {
-      this.incomesService
-        .getProjectionIncome(this.instrumentCode, this.projectionID)
-        .subscribe(
-          res => {
-            this.projection = res["result"]["proyeccion"];
-            this.projection_exists = true;
-            this.incomes = res["result"]["ingresos"];
-            if (this.incomes.length) {
-              this.incomes_exists = true;
-              this.dataSource.data = this.incomes;
-            }
-            this.payment_date = res["result"]["proyeccion"]["fecha_pago"];
-          },
-          err => {
-            Swal.fire({
-              icon: "error",
-              title: "Error en el servidor",
-              text: err.message
-            });
+    this.incomesService
+      .getProjection(
+        this.idInversion,
+        this.idInstrumentIncome,
+        this.projectionDate
+      )
+      .subscribe(res => {
+        this.projectionRes = res;
+        console.log("proyeccion");
+        console.log(this.projectionRes);
+      });
+
+    this.incomesService
+      .getProjectionIncome(this.instrumentCode, this.projectionID)
+      .subscribe(
+        res => {
+          this.projection = res["result"]["proyeccion"];
+          this.projection_exists = true;
+          this.incomes = res["result"]["ingresos"];
+          if (this.incomes.length) {
+            this.incomes_exists = true;
+            this.dataSource.data = this.incomes;
           }
-        );
-    }
+          this.payment_date = res["result"]["proyeccion"]["fecha_pago"];
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: err.message
+          });
+        }
+      );
 
     this.catalogService.getPaymentTypes().subscribe(res => {
       this.payment_types = res;
@@ -219,7 +236,11 @@ export class GeneralIncomeFormComponent implements OnInit {
       ],
       tipo_pago: ["", Validators.required],
       cuenta_bancaria: ["", Validators.required],
-      fecha_ingreso: ["", Validators.required]
+      //fecha_ingreso: ["", Validators.required],
+      comentario: [""],
+      fecha_proyeccion_pago: [""],
+      fecha_inicio: [""],
+      fecha_vencimiento: [""]
     });
   }
 
@@ -227,21 +248,32 @@ export class GeneralIncomeFormComponent implements OnInit {
     return this.investmentProposalForm.controls;
   }
 
+  toggle = () => {
+    if (this.partial == false) {
+      this.partial = true;
+    } else {
+      this.partial = false;
+    }
+  };
+
   submitIncome(form: any) {
     this.submitted = true;
-    console.log(form);
     if (!form.valid) {
       return false;
     }
 
     this.incomeObject = {
-      tipo_intrumento: this.projection.codigo_intrumento,
-      id_proyeccion_ingreso: this.projection.proyeccion_ingreso,
+      id_inversion_instrumento: this.idInversion,
+      id_proyeccion_ingreso_instrumento: this.projection.proyeccion_ingreso, // Revisar
+      id_proyeccion_ingreso: 1, // Obtener desde endpoint si es que hay
+      fecha_proyeccion_pago: "?",
+
+      //tipo_intrumento: this.projection.codigo_intrumento,
       posicion_ingreso: this.projection.posicion,
       id_inversion: this.projection.id_inversion,
       fecha_pago: this.projection.fecha_pago,
 
-      fecha_ingreso: this.form.value.fecha_ingreso.singleDate.formatted,
+      //fecha_ingreso: this.form.value.fecha_ingreso.singleDate.formatted,
       capital: this.form.value.capital,
       ingreso_bruto: this.form.value.ingreso_bruto,
       renta: this.form.value.renta,
@@ -250,6 +282,54 @@ export class GeneralIncomeFormComponent implements OnInit {
       id_tipo_pago: this.form.value.id_tipo_pago
     };
 
+    if (this.partial == true) {
+      this.incomeObject[
+        "fecha_inicio"
+      ] = this.form.value.fecha_inicio.singleDate.formatted;
+      this.incomeObject[
+        "fecha_vencimiento"
+      ] = this.form.value.fecha_vencimiento.singleDate.formatted;
+    }
+
+    /*
+    submit income
+    "id_cuenta_bancaria": 5,
+    "id_tipo_pago": 2,
+    "ingreso_bruto": 1250.0,
+    "capital": 0,
+    "renta": 125.0,
+    "ingreso_neto": 1125.0,
+    "comentario": "DAP COMPLETO"
+    
+    "id_inversion_instrumento": 246,
+    "id_proyeccion_ingreso_instrumento": 17,
+    "id_proyeccion_ingreso": 1,
+    "fecha_proyeccion_pago": "28/04/2013",
+    "fecha_inicio": "10/10/2018",
+    "fecha_vencimiento": "10/10/2019",
+
+    GET proyeccion instrumento
+    "id_inversion": 42,
+    "id_inversion_instrumento": 66,
+    "codigo_inversion": "INVLETE00001",
+    "nombre_inversion": "TEST1",
+    "empresa": "Angelica de Chávez",
+    "codigo_empresa": "MADC",
+    "id_estado": null,
+    "estado": null,
+    "estado_inversion": "Finalizada",
+    "tipo_ingreso": "INGRESO_NATURAL",
+    "tipo_instrumento": "Letes",
+    "codigo_instrumento": "LETE",
+    "id_proyeccion_ingreso": null,
+    "id_proyeccion_ingreso_instrumento": 28,
+    "capital": 0.0,
+    "ingreso_bruto": 0.0,
+    "renta": 0.0,
+    "ingreso_neto": 0.0,
+    "fecha_proyeccion_pago": "05/03/2020"
+
+    */
     this.incomesService.createIncome(this.incomeObject).subscribe(
       success => {
         if (success) {

src/app/components/incomes/incomes.component.html

@@ -149,8 +149,9 @@
                         class="btn btn-success btn-custom-small"
                         (click)="
                           go_to_instrument_url(
-                            row.proyeccion_ingreso,
-                            row.codigo_instrumento
+                            row.id_inversion,
+                            row.id_proyeccion_ingreso_instrumento,
+                            row.fecha_proyeccion_pago
                           )
                         "
                       >

src/app/components/incomes/incomes.component.ts

@@ -209,7 +209,7 @@ export class IncomesComponent implements OnInit {
     return true;
   }
 
-  go_to_instrument_url(id: string, code: string) {
+  go_to_instrument_url(id: string, id_proyeccion: string, fecha: string) {
     Swal.fire({
       allowOutsideClick: false,
       icon: "info",
@@ -218,7 +218,13 @@ export class IncomesComponent implements OnInit {
     Swal.showLoading();
 
     setTimeout(() => {
-      this.router.navigate([`/investment-income/${code}/${id}`]);
+      this.router.navigate([`/investment-income`], {
+        queryParams: {
+          id_inversion: id,
+          id_proyeccion_ingreso_instrumento: id_proyeccion,
+          fecha_proyeccion_pago: fecha
+        }
+      });
     }, 1000);
   }
 }

src/app/components/instruments/bonos/bonos.component.html

@@ -1,289 +1,1521 @@
-BONOS FORM
-<h4 class="card-title">
-  BONO
-</h4>
-<!--
-<form
-  class="form-auth-small ng-untouched ng-pristine ng-valid"
-  [formGroup]="investmentProposalForm"
->
-  <div class="row">
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="valor_nominal">Valor nominal: </label>
-        <input
-          type="text"
-          formControlName="valor_nominal"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.valor_nominal.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.valor_nominal.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.valor_nominal.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="ytm_vencimiento">YTM al vencimiento: </label>
-        <input
-          type="text"
-          formControlName="ytm_vencimiento"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.ytm_vencimiento.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.ytm_vencimiento.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.ytm_vencimiento.errors.required">
-            Campo requerido
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Bonos
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <!-- Valor nominal compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_compra">Valor nominal compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="precio_c_v">Precio Compra/Venta: </label>
-        <input
-          type="text"
-          formControlName="precio_c_v"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.precio_c_v.errors
-          }"
-        />
-        <div *ngIf="submitted && f.precio_c_v.errors" class="invalid-feedback">
-          <div *ngIf="f.precio_c_v.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="precio_vencimiento">Precio al vencimiento: </label>
-        <input
-          type="text"
-          formControlName="precio_vencimiento"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.precio_vencimiento.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.precio_vencimiento.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.precio_vencimiento.errors.required">
-            Campo requerido
+
+      <!-- Comisión casa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_compra"
+            >Comisión casa compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </div>
-  <br />
-  <div class="row">
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="fecha_liquidacion">Fecha Liquidación: </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
-            name="fecha_liquidacion"
-            (click)="dp.toggleCalendar()"
-            [options]="myDpOptions"
-            (dateChanged)="onDateChanged($event)"
-            #dp="angular-mydatepicker"
-            [ngClass]="{
-              'is-invalid': submitted && f.fecha_liquidacion.errors
-            }"
-          />
-        </div>
-
-        <div
-          *ngIf="submitted && f.fecha_liquidacion.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.fecha_liquidacion.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="fecha_vencimiento">Fecha Vencimiento: </label>
-
-        <div class="input-box-container">
-          <div>
+
+      <!-- Comisión bolsa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_compra"
+            >Comisión bolsa compra:
+          </label>
+          <div class="input-box-container">
             <p>
-              <i class="far fa-calendar" aria-hidden="true"></i>
+              <i class="fas fa-percent" aria-hidden="true"></i>
             </p>
             <input
-              class="input-box form-control"
-              placeholder="Seleccione una fecha"
-              angular-mydatepicker
-              name="fecha_vencimiento"
-              (click)="dp1.toggleCalendar()"
-              [options]="myDpOptions"
-              (dateChanged)="onDateChanged($event)"
-              #dp1="angular-mydatepicker"
+              type="text"
+              formControlName="comision_bolsa_porcentaje_compra"
+              class="form-control"
               [ngClass]="{
-                'is-invalid': submitted && f.fecha_vencimiento.errors
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_compra.errors
               }"
             />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
+      </div>
 
-        <div
-          *ngIf="submitted && f.fecha_vencimiento.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.fecha_vencimiento.errors.required">
-            Campo requerido
+      <!-- Cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_compra">Cupón compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="fecha_cupon">Última Fecha Cupón: </label>
+      <!-- Costo de transferencia -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="costo_transferencia">Costo de transferencia: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="costo_transferencia"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.costo_transferencia.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.costo_transferencia.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.costo_transferencia.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.costo_transferencia.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-        <div class="input-box-container">
-          <div>
+      <!-- [YTM] Rendimiento de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="ytm_vencimiento_porcentaje_compra"
+            >[YTM] Rendimiento de vencimiento de compra:
+          </label>
+          <div class="input-box-container">
             <p>
-              <i class="far fa-calendar" aria-hidden="true"></i>
+              <i class="fas fa-percent" aria-hidden="true"></i>
             </p>
             <input
-              class="input-box form-control"
-              placeholder="Seleccione una fecha"
-              angular-mydatepicker
-              name="fecha_cupon"
-              (click)="dp2.toggleCalendar()"
-              [options]="myDpOptions"
-              (dateChanged)="onDateChanged($event)"
-              #dp2="angular-mydatepicker"
+              type="text"
+              formControlName="ytm_vencimiento_porcentaje_compra"
+              class="form-control"
               [ngClass]="{
-                'is-invalid': submitted && f.fecha_cupon.errors
+                'is-invalid':
+                  submitted && f.ytm_vencimiento_porcentaje_compra.errors
               }"
             />
+            <div
+              *ngIf="submitted && f.ytm_vencimiento_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.ytm_vencimiento_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.ytm_vencimiento_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
+      </div>
 
-        <div *ngIf="submitted && f.fecha_cupon.errors" class="invalid-feedback">
-          <div *ngIf="f.fecha_cupon.errors.required">
-            Campo requerido
+      <!-- Precio de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_compra">Precio de compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_compra"
+            >Precio de vencimiento de compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_compra"
+            >Ultima fecha cupón compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_ultima_cupon_compra"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra"
+            >Fecha de vencimiento de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_vencimiento_compra"
+                (click)="dp2.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp2="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra"
+            >Fecha de liquidación de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_liquidacion_compra"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+              Campo requerido
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
 
+    <div class="row">
+      <!-- Valor nominal venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_venta">Valor nominal venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_venta"
+            >Comisión casa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_venta"
+            >Comisión bolsa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_venta">Cupón venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- [YTM] Rendimiento de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="ytm_vencimiento_porcentaje_venta"
+            >[YTM] Rendimiento de vencimiento de venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="ytm_vencimiento_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.ytm_vencimiento_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.ytm_vencimiento_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.ytm_vencimiento_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.ytm_vencimiento_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-  <div class="row">
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="comision_casa">Comisión Casa: </label>
-        <input
-          type="text"
-          formControlName="comision_casa"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.comision_casa.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.comision_casa.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.comision_casa.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="comision_bolsa">Comisión Bolsa: </label>
-        <input
-          type="text"
-          formControlName="comision_bolsa"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.comision_bolsa.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.comision_bolsa.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.comision_bolsa.errors.required">
-            Campo requerido
+      <!-- Precio de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_venta">Precio de venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
+      <!-- Precio de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_venta"
+            >Precio de vencimiento de venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_venta"
+            >Ultima fecha cupón venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_ultima_cupon_venta"
+                (click)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta"
+            >Fecha de vencimiento de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_vencimiento_venta"
+                (click)="dp5.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp5="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta"
+            >Fecha de liquidación de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_liquidacion_venta"
+                (click)="dp6.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp6="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </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>
 
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="cupon">Cupón: </label>
-        <input
-          type="text"
-          formControlName="cupon"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.cupon.errors
-          }"
-        />
-        <div *ngIf="submitted && f.cupon.errors" class="invalid-feedback">
-          <div *ngIf="f.cupon.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="costos_transferencia">Costos de Transferencia: </label>
-        <input
-          type="text"
-          formControlName="costos_transferencia"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.costos_transferencia.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.costos_transferencia.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.costos_transferencia.errors.required">
-            Campo requerido
+    <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-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón compra:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa compra:</h4>
+          <div class="field">
+            $USD {{ comision_casa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa compra:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de compra:</h4>
+          <div class="field">
+            {{ dias_vencimiento_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de compra:</h4>
+          <div class="field">
+            {{ dias_acumulados_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra:</h4>
+          <div class="field">
+            $USD
+            {{ interes_acumulado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio compra (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado compra:</h4>
+          <div class="field">
+            $USD {{ valor_transado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Monto a pagar:</h4>
+          <div class="field">$USD {{ monto_pagar | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha inicio de vigencia:</h4>
+          <div class="field">
+            {{ fecha_inicio_vigencia }}
+          </div>
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de venta
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón venta:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa venta:</h4>
+          <div class="field">
+            $USD {{ comision_casa_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión venta (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de venta:</h4>
+          <div class="field">
+            {{ dias_vencimiento_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de venta:</h4>
+          <div class="field">
+            {{ dias_acumulados_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta:</h4>
+          <div class="field">
+            $USD {{ interes_acumulado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio venta (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado venta:</h4>
+          <div class="field">
+            $USD {{ valor_transado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Resultado de la operación
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Monto a recibir:</h4>
+          <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días tenencia total:</h4>
+          <div class="field">
+            {{ dias_tenencia_total }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Ingresos intereses:</h4>
+          <div class="field">
+            $USD {{ ingresos_intereses | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Costos totales:</h4>
+          <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Ganancia o pérdida total:</h4>
+          <div class="field">
+            $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Ganancia o pérdida de capital:</h4>
+          <div class="field">
+            {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Interés (%):</h4>
+          <div class="field">
+            {{ intereses_porcentaje | number: "1.2-4" }} %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés neto antes de impuesto (%):</h4>
+          <div class="field">
+            {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés neto después de impuesto (%):</h4>
+          <div class="field">
+            {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Total de ingresos recibidos:</h4>
+          <div class="field">
+            $USD
+            {{ total_ingresos_recibidos | number: "1.2-4" }}
           </div>
         </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>
 
-  <br />
-  <div class="form-group text-center space-20">
-    <button
-      class="btn btn-primary center-component margin-right"
-      (click)="goToNext(investmentProposalForm)"
-    >
-      Siguiente
-    </button>
-  </div>
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </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>
+            </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
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </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
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+
+          <mat-paginator
+            [pageSizeOptions]="[10, 15, 25]"
+            [pageIndex]="0"
+            [pageSize]="10"
+          ></mat-paginator>
+        </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-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD {{ instrument_work.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_nominal_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_vencimiento_compra | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje compra:</h4>
+        <div class="field">
+          {{ instrument_work.cupon_porcentaje_compra | number: "1.2-4" }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_siguiente_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.comision_casa_porcentaje_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.comision_casa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.comision_bolsa_porcentaje_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision bolsa compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.comision_bolsa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_porcentaje_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_comision_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de compra:</h4>
+        <div class="field">
+          {{ instrument_work.dias_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de compra:</h4>
+        <div class="field">
+          {{ instrument_work.dias_acumulados_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.interes_acumulado_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.interes_acumulado_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio compra (%):</h4>
+        <div class="field">
+          {{ instrument_work.precio_sucio_porcentaje_compra | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_transado_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work.monto_pagar | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_ultima_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_liquidacion_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha inicio de vigencia:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_inicio_vigencia }}
+        </div>
+      </div>
+    </div>
 
-</form>
--->
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD {{ instrument_work.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_nominal_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_vencimiento_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje venta:</h4>
+        <div class="field">
+          {{ instrument_work.cupon_porcentaje_venta | number: "1.2-4" }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_siguiente_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa venta (%):</h4>
+        <div class="field">
+          {{ instrument_work.comision_casa_porcentaje_venta | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.comision_casa_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.comision_bolsa_porcentaje_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_porcentaje_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_comision_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de venta:</h4>
+        <div class="field">
+          {{ instrument_work.dias_vencimiento_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de venta:</h4>
+        <div class="field">
+          {{ instrument_work.dias_acumulados_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.interes_acumulado_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.interes_acumulado_porcentaje_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio venta (%):</h4>
+        <div class="field">
+          {{ instrument_work.precio_sucio_porcentaje_venta | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_transado_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_ultima_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_liquidacion_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_vencimiento_venta }}
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Resultado de la operación
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto a recibir:</h4>
+        <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días tenencia total:</h4>
+        <div class="field">
+          {{ dias_tenencia_total }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingresos intereses:</h4>
+        <div class="field">$USD {{ ingresos_intereses | number: "1.2-4" }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costos totales:</h4>
+        <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia o pérdida total:</h4>
+        <div class="field">
+          $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia o pérdida de capital:</h4>
+        <div class="field">
+          {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés (%):</h4>
+        <div class="field">{{ intereses_porcentaje | number: "1.2-4" }} %</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto antes de impuesto (%):</h4>
+        <div class="field">
+          {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto después de impuesto (%):</h4>
+        <div class="field">
+          {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total de ingresos recibidos:</h4>
+        <div class="field">
+          $USD {{ total_ingresos_recibidos | number: "1.2-4" }}
+        </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="cete-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <!-- Country Column -->
+            <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>
+            </ng-container>
+
+            <!-- Country Column -->
+            <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
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </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
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+
+          <mat-paginator
+            [pageSizeOptions]="[10, 15, 25]"
+            [pageIndex]="0"
+            [pageSize]="10"
+          ></mat-paginator>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/instruments/bonos/bonos.component.ts

@@ -1,23 +1,43 @@
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from "@angular/core";
 import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
 import { formatDate, DatePipe } from "@angular/common";
 import { Router } from "@angular/router";
 import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { CatalogsService } from "@app/services/catalogs.service";
+import { InstrumentCalculations } from "@app/services/instrument-calculations.service";
+import Swal from "sweetalert2";
+import { GeneralInfo } from "@app/models/investment-proposal-form";
+import { parse } from "date-fns";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
 
 @Component({
   selector: "app-bonos",
   templateUrl: "./bonos.component.html"
 })
-export class BonosComponent implements InstrumentComponent {
+export class BONO implements InstrumentComponent {
   title: string = "Bonos";
-  @Input() summary: boolean;
-
   @Input() data: any;
+  @Input() summary: boolean;
   @Input() investmentID: string;
 
+  displayedColumns: string[] = [
+    "posicion",
+    "plazo",
+    "fecha_pago",
+    "ingreso_bruto",
+    "ingreso_neto",
+    "impuesto"
+  ];
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
   form: any;
+  general: GeneralInfo;
 
   // For daterange
   daysLabels: any = {
@@ -51,43 +71,669 @@ export class BonosComponent implements InstrumentComponent {
     monthLabels: this.monthsLabels
   };
   myDateInit: boolean = true;
-  model: IMyDateModel = null;
+  m_fecha_vencimiento_compra: IMyDateModel;
+  m_fecha_ultima_cupon_compra: IMyDateModel;
+  m_fecha_rendencion: IMyDateModel;
+  m_fecha_liquidacion_compra: IMyDateModel;
+
+  submitted: boolean = false;
+  instrument_exists: boolean;
+  instrument_work: any = [];
+  financials: any;
+  base_types: any;
+
+  proyecciones: any;
+
+  bonosObject: {};
+  dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
+  hasProjections: boolean;
+  fecha_vencimiento: any;
+  comision_casa_compra: any;
+  comision_bolsa_compra: any;
+  fecha_siguiente_cupon_compra: any;
+  dias_vencimiento_compra: any;
+  dias_acumulados_compra: any;
+  ytm_vencimiento_comision_porcentaje_compra: any;
+  interes_acumulado_compra: any;
+  interes_acumulado_porcentaje_compra: any;
+  precio_sucio_porcentaje_compra: any;
+  valor_transado_compra: any;
+  monto_pagar: any;
+  fecha_inicio_vigencia: any;
+  comision_casa_venta: any;
+  fecha_siguiente_cupon_venta: any;
+  dias_vencimiento_venta: any;
+  dias_acumulados_venta: any;
+  ytm_vencimiento_comision_porcentaje_venta: any;
+  interes_acumulado_venta: any;
+  interes_acumulado_porcentaje_venta: any;
+  precio_sucio_porcentaje_venta: any;
+  valor_transado_venta: any;
+  monto_recibir: any;
+  dias_tenencia_total: any;
+  ganancia_perdida_capital: any;
+  ingresos_intereses: any;
+  costos_totales: any;
+  ganancia_perdida_total: any;
+  ganancia_perdida_capital_porcentaje: any;
+  intereses_porcentaje: any;
+  neto_antes_impuesto_porcentaje: any;
+  neto_despues_impuesto_porcentaje: any;
+  total_ingresos_recibidos: any;
 
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
-    private formDataService: FormInvestmentProposalService
+    private formDataService: FormInvestmentProposalService,
+    private catalogService: CatalogsService,
+    private instrumentCalcService: InstrumentCalculations,
+    public datepipe: DatePipe
   ) {
-    console.log("init");
+    this.instrument_work = this.formDataService.getWork();
+    this.instrument_exists = this.instrument_work == undefined;
+    this.general = this.formDataService.getGeneralInfo();
+
+    if (
+      this.instrument_work != undefined &&
+      (this.instrument_work.proyecciones != "" ||
+        this.instrument_work != undefined)
+    ) {
+      this.hasProjections = true;
+      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.paginator = this.paginator;
+      this.dataSource2.sort = this.sort;
+    } else {
+      this.hasProjections = false;
+    }
 
     this.investmentProposalForm = this.formBuilder.group({
-      valor_nominal: ["", Validators.required],
-      ytm_vencimiento: ["", Validators.required],
-      precio_c_v: ["", Validators.required],
-      precio_vencimiento: ["", Validators.required],
-      fecha_liquidacion: ["", Validators.required],
-      fecha_cupon: ["", Validators.required],
-      fecha_vencimiento: ["", Validators.required],
-      comision_casa: ["", Validators.required],
-      comision_bolsa: ["", Validators.required],
-      cupon: ["", Validators.required],
-      costos_transferencia: ["", Validators.required]
+      costo_transferencia: [
+        this.instrument_exists ? "" : this.instrument_work.costo_transferencia,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_compra: [
+        this.instrument_exists ? "" : this.instrument_work.precio_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      valor_nominal_compra: [
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_vencimiento_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      cupon_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cupon_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_bolsa_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ytm_vencimiento_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.ytm_vencimiento_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_venta: [
+        this.instrument_exists ? "" : this.instrument_work.precio_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      valor_nominal_venta: [
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_vencimiento_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      cupon_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cupon_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_bolsa_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ytm_vencimiento_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.ytm_vencimiento_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      fecha_ultima_cupon_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_ultima_cupon_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_ultima_cupon_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_liquidacion_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_ultima_cupon_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_ultima_cupon_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_ultima_cupon_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_liquidacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_venta
+              }
+            },
+        Validators.required
+      ]
     });
+
+    // Get calculations, always
+    if (
+      this.instrument_work != undefined &&
+      this.instrument_work.proyecciones != ""
+    ) {
+      console.log("get calcs");
+      this.getCalculations(this.investmentProposalForm, false);
+    }
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
   }
 
   save(form: any): boolean {
-    /*if (!form.valid) {
+    if (!form.valid) {
       return false;
-    }*/
-    this.formDataService.setWork(this.investmentProposalForm.value);
+    }
+
+    this.formDataService.setWork(this.bonosObject);
     return true;
   }
 
-  goToNext(form: any) {
-    if (this.save(form)) {
-      console.log("all good");
-      // Navigate to the work page
-      this.router.navigate(["/address"]);
+  getCalculations(form: any, saveForm: boolean) {
+    this.submitted = true;
+
+    console.log(form);
+    if (!form.valid) {
+      return false;
     }
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    this.instrumentCalcService
+      .bonosCalc(
+        "BONO", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          costo_transferencia: +this.f.costo_transferencia.value,
+          valor_nominal_compra: +this.f.valor_nominal_compra.value,
+          precio_compra: +this.f.precio_compra.value,
+          precio_vencimiento_compra: +this.f.precio_vencimiento_compra.value,
+          cupon_porcentaje_compra: +this.f.cupon_porcentaje_compra.value,
+          comision_casa_porcentaje_compra: this.f
+            .comision_casa_porcentaje_compra.value,
+          comision_bolsa_porcentaje_compra: this.f
+            .comision_bolsa_porcentaje_compra.value,
+          ytm_vencimiento_porcentaje_compra: this.f
+            .ytm_vencimiento_porcentaje_compra.value,
+
+          valor_nominal_venta: +this.f.valor_nominal_venta.value,
+          precio_venta: +this.f.precio_venta.value,
+          precio_vencimiento_venta: +this.f.precio_vencimiento_venta.value,
+          cupon_porcentaje_venta: +this.f.cupon_porcentaje_venta.value,
+          comision_casa_porcentaje_venta: this.f.comision_casa_porcentaje_venta
+            .value,
+          comision_bolsa_porcentaje_venta: this.f
+            .comision_bolsa_porcentaje_venta.value,
+          ytm_vencimiento_porcentaje_venta: this.f
+            .ytm_vencimiento_porcentaje_venta.value,
+
+          fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+            .singleDate.formatted,
+          fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+            .singleDate.formatted,
+          fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+            .singleDate.formatted,
+
+          fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+            .singleDate.formatted,
+          fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+            .singleDate.formatted,
+          fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+            .singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          console.log("---------");
+          console.log(ans);
+
+          // Instrumento de compra
+          this.comision_casa_compra =
+            ans["result"]["instrumento_compra"]["comision_casa_compra"];
+          this.comision_bolsa_compra =
+            ans["result"]["instrumento_compra"]["comision_bolsa_compra"];
+          this.fecha_siguiente_cupon_compra =
+            ans["result"]["instrumento_compra"]["fecha_siguiente_cupon_compra"];
+          this.dias_vencimiento_compra =
+            ans["result"]["instrumento_compra"]["dias_vencimiento_compra"];
+          this.dias_acumulados_compra =
+            ans["result"]["instrumento_compra"]["dias_acumulados_compra"];
+          this.ytm_vencimiento_comision_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "ytm_vencimiento_comision_porcentaje_compra"
+            ];
+          this.interes_acumulado_compra =
+            ans["result"]["instrumento_compra"]["interes_acumulado_compra"];
+          this.interes_acumulado_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "interes_acumulado_porcentaje_compra"
+            ];
+          this.precio_sucio_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "precio_sucio_porcentaje_compra"
+            ];
+          this.valor_transado_compra =
+            ans["result"]["instrumento_compra"]["valor_transado_compra"];
+          this.monto_pagar = ans["result"]["instrumento_compra"]["monto_pagar"];
+          this.fecha_inicio_vigencia =
+            ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
+
+          // Instrumento de venta
+          this.comision_casa_venta =
+            ans["result"]["instrumento_venta"]["comision_casa_venta"];
+          this.fecha_siguiente_cupon_venta =
+            ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
+          this.dias_vencimiento_venta =
+            ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
+          this.dias_acumulados_venta =
+            ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
+          this.ytm_vencimiento_comision_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "ytm_vencimiento_comision_porcentaje_venta"
+            ];
+          this.interes_acumulado_venta =
+            ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
+          this.interes_acumulado_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "interes_acumulado_porcentaje_venta"
+            ];
+          this.precio_sucio_porcentaje_venta =
+            ans["result"]["instrumento_venta"]["precio_sucio_porcentaje_venta"];
+          this.valor_transado_venta =
+            ans["result"]["instrumento_venta"]["valor_transado_venta"];
+          this.monto_recibir =
+            ans["result"]["instrumento_venta"]["monto_recibir"];
+
+          // Resultado de la operacion
+          this.dias_tenencia_total =
+            ans["result"]["resultado_operacion"]["dias_tenencia_total"];
+          this.ganancia_perdida_capital =
+            ans["result"]["resultado_operacion"]["ganancia_perdida_capital"];
+          this.ingresos_intereses =
+            ans["result"]["resultado_operacion"]["ingresos_intereses"];
+          this.costos_totales =
+            ans["result"]["resultado_operacion"]["costos_totales"];
+          this.ganancia_perdida_total =
+            ans["result"]["resultado_operacion"]["ganancia_perdida_total"];
+          this.ganancia_perdida_capital_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "ganancia_perdida_capital_porcentaje"
+            ];
+          this.intereses_porcentaje =
+            ans["result"]["resultado_operacion"]["intereses_porcentaje"];
+          this.neto_antes_impuesto_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "neto_antes_impuesto_porcentaje"
+            ];
+          this.neto_despues_impuesto_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "neto_despues_impuesto_porcentaje"
+            ];
+          this.total_ingresos_recibidos =
+            ans["result"]["resultado_operacion"]["total_ingresos_recibidos"];
+
+          // Proyecciones
+          this.proyecciones = ans["result"]["proyecciones"];
+
+          this.dataSource.data = this.proyecciones;
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+
+          /*
+ "result": {
+        "instrumento_compra": {
+            "comision_casa_compra": 201.3,
+            "comision_bolsa_compra": 30.194999999999997,
+            "fecha_siguiente_cupon_compra": "28/04/2013",
+            "dias_vencimiento_compra": 880,
+            "dias_acumulados_compra": 32,
+            "ytm_vencimiento_comision_porcentaje_compra": 6.565909090909091,
+            "interes_acumulado_compra": 533.3333333333334,
+            "interes_acumulado_porcentaje_compra": 6.000000000000001,
+            "precio_sucio_porcentaje_compra": 106.65,
+            "valor_transado_compra": 100650.0,
+            "monto_pagar": 101419.82833333334,
+            "fecha_inicio_vigencia": "30/4/2013"
+        },
+        "instrumento_venta": {
+            "comision_casa_venta": 50.0,
+            "fecha_siguiente_cupon_venta": "28/10/2022",
+            "dias_vencimiento_venta": 179,
+            "dias_acumulados_venta": 1,
+            "ytm_vencimiento_comision_porcentaje_venta": -0.5229050279329608,
+            "interes_acumulado_venta": 46.875,
+            "interes_acumulado_porcentaje_venta": 6.75,
+            "precio_sucio_porcentaje_venta": 106.74999999999999,
+            "valor_transado_venta": 250000.0,
+            "monto_recibir": 249396.875
+        },
+        "resultado_operacion": {
+            "valor_nominal_compra": 100000.0,
+            1"dias_tenencia_total": 3389,
+            "precio_compra": 100.64999999999999,
+            "precio_venta": 100.0,
+            1"ganancia_perdida_capital": 149350.0,
+            1"ingresos_intereses": 13726.875,
+            1"costos_totales": -886.495,
+            1"ganancia_perdida_total": 162190.38,
+            1"ganancia_perdida_capital_porcentaje": 15.864856889938034,
+            1"intereses_porcentaje": 1.458151372086161,
+            1"neto_antes_impuesto_porcentaje": 17.22883942165831,
+            1"1neto_despues_impuesto_porcentaje": 17.067375863086458,
+            1"total_ingresos_recibidos": 13680.0
+        },
+*/
+          this.bonosObject = {
+            costo_transferencia: this.investmentProposalForm.value
+              .costo_transferencia,
+            valor_nominal_compra: this.investmentProposalForm.value
+              .valor_nominal_compra,
+            precio_compra: this.investmentProposalForm.value.precio_compra,
+            precio_vencimiento_compra: this.investmentProposalForm.value
+              .precio_vencimiento_compra,
+            cupon_porcentaje_compra: this.investmentProposalForm.value
+              .cupon_porcentaje_compra,
+            comision_casa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_casa_porcentaje_compra,
+            comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_compra,
+            ytm_vencimiento_porcentaje_compra: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_compra,
+            valor_nominal_venta: this.investmentProposalForm.value
+              .valor_nominal_venta,
+            precio_venta: this.investmentProposalForm.value.precio_venta,
+            precio_vencimiento_venta: this.investmentProposalForm.value
+              .precio_vencimiento_venta,
+            cupon_porcentaje_venta: this.investmentProposalForm.value
+              .cupon_porcentaje_venta,
+            comision_casa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_casa_porcentaje_venta,
+            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_venta,
+            ytm_vencimiento_porcentaje_venta: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_venta,
+
+            fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+              .singleDate.formatted,
+            fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+              .singleDate.formatted,
+
+            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+              .singleDate.formatted,
+            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+              .singleDate.formatted,
+
+            // Instrumento de compra
+
+            comision_casa_compra: this.comision_casa_compra,
+            comision_bolsa_compra: this.comision_bolsa_compra,
+            fecha_siguiente_cupon_compra: this.fecha_siguiente_cupon_compra,
+            dias_vencimiento_compra: this.dias_vencimiento_compra,
+            dias_acumulados_compra: this.dias_acumulados_compra,
+            ytm_vencimiento_comision_porcentaje_compra: this
+              .ytm_vencimiento_comision_porcentaje_compra,
+            interes_acumulado_compra: this.interes_acumulado_compra,
+            interes_acumulado_porcentaje_compra: this
+              .interes_acumulado_porcentaje_compra,
+            precio_sucio_porcentaje_compra: this.precio_sucio_porcentaje_compra,
+            valor_transado_compra: this.valor_transado_compra,
+            monto_pagar: this.monto_pagar,
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia,
+            // Instrumento de venta
+
+            comision_casa_venta: this.comision_casa_venta,
+            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
+            dias_vencimiento_venta: this.dias_vencimiento_venta,
+            dias_acumulados_venta: this.dias_acumulados_venta,
+            ytm_vencimiento_comision_porcentaje_venta: this
+              .ytm_vencimiento_comision_porcentaje_venta,
+            interes_acumulado_venta: this.interes_acumulado_venta,
+            interes_acumulado_porcentaje_venta: this
+              .interes_acumulado_porcentaje_venta,
+            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
+            valor_transado_venta: this.valor_transado_venta,
+            // Resultado de la operacion
+
+            monto_recibir: this.monto_recibir,
+            dias_tenencia_total: this.dias_tenencia_total,
+            ganancia_perdida_capital: this.ganancia_perdida_capital,
+            ingresos_intereses: this.ingresos_intereses,
+            costos_totales: this.costos_totales,
+            ganancia_perdida_total: this.ganancia_perdida_total,
+            ganancia_perdida_capital_porcentaje: this
+              .ganancia_perdida_capital_porcentaje,
+            intereses_porcentaje: this.intereses_porcentaje,
+            neto_antes_impuesto_porcentaje: this.neto_antes_impuesto_porcentaje,
+            neto_despues_impuesto_porcentaje: this
+              .neto_despues_impuesto_porcentaje,
+            total_ingresos_recibidos: this.total_ingresos_recibidos,
+
+            // Proyecciones
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.bonosObject);
+          Swal.close();
+          if (saveForm == true) {
+            if (this.investmentID != undefined) {
+              this.router.navigate(["/investment-proposal/complement-info"], {
+                queryParams: { id: this.investmentID }
+              });
+            } else {
+              this.router.navigate(["/investment-proposal/complement-info"]);
+            }
+          }
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: "No su pudo obtener la informacion"
+          });
+          return false;
+        }
+      );
+  }
+
+  goToPrevious() {
+    this.submitted = true;
+    if (this.investmentID != undefined) {
+      this.router.navigate(["/investment-proposal/general-info"], {
+        queryParams: { id: this.investmentID }
+      });
+    } else {
+      this.router.navigate(["/investment-proposal/general-info"]);
+    }
+  }
+
+  goToNext(form: any) {
+    this.getCalculations(form, true);
   }
 }

src/app/components/instruments/certificados/certificados.component.html

@@ -0,0 +1,1521 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Certificados de inversión
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <!-- Valor nominal compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_compra">Valor nominal compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_compra"
+            >Comisión casa compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_compra"
+            >Comisión bolsa compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_compra">Cupón compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Costo de transferencia -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="costo_transferencia">Costo de transferencia: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="costo_transferencia"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.costo_transferencia.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.costo_transferencia.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.costo_transferencia.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.costo_transferencia.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- [YTM] Rendimiento de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="ytm_vencimiento_porcentaje_compra"
+            >[YTM] Rendimiento de vencimiento de compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="ytm_vencimiento_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.ytm_vencimiento_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.ytm_vencimiento_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.ytm_vencimiento_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.ytm_vencimiento_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_compra">Precio de compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_compra"
+            >Precio de vencimiento de compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_compra"
+            >Ultima fecha cupón compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_ultima_cupon_compra"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra"
+            >Fecha de vencimiento de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_vencimiento_compra"
+                (click)="dp2.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp2="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra"
+            >Fecha de liquidación de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_liquidacion_compra"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <!-- Valor nominal venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_venta">Valor nominal venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_venta"
+            >Comisión casa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_venta"
+            >Comisión bolsa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_venta">Cupón venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- [YTM] Rendimiento de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="ytm_vencimiento_porcentaje_venta"
+            >[YTM] Rendimiento de vencimiento de venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="ytm_vencimiento_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.ytm_vencimiento_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.ytm_vencimiento_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.ytm_vencimiento_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.ytm_vencimiento_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_venta">Precio de venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_venta"
+            >Precio de vencimiento de venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_venta"
+            >Ultima fecha cupón venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_ultima_cupon_venta"
+                (click)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta"
+            >Fecha de vencimiento de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_vencimiento_venta"
+                (click)="dp5.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp5="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta"
+            >Fecha de liquidación de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_liquidacion_venta"
+                (click)="dp6.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp6="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </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-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón compra:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa compra:</h4>
+          <div class="field">
+            $USD {{ comision_casa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa compra:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de compra:</h4>
+          <div class="field">
+            {{ dias_vencimiento_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de compra:</h4>
+          <div class="field">
+            {{ dias_acumulados_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra:</h4>
+          <div class="field">
+            $USD
+            {{ interes_acumulado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio compra (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado compra:</h4>
+          <div class="field">
+            $USD {{ valor_transado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Monto a pagar:</h4>
+          <div class="field">$USD {{ monto_pagar | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha inicio de vigencia:</h4>
+          <div class="field">
+            {{ fecha_inicio_vigencia }}
+          </div>
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de venta
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón venta:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa venta:</h4>
+          <div class="field">
+            $USD {{ comision_casa_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión venta (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de venta:</h4>
+          <div class="field">
+            {{ dias_vencimiento_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de venta:</h4>
+          <div class="field">
+            {{ dias_acumulados_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta:</h4>
+          <div class="field">
+            $USD {{ interes_acumulado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio venta (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado venta:</h4>
+          <div class="field">
+            $USD {{ valor_transado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Resultado de la operación
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Monto a recibir:</h4>
+          <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días tenencia total:</h4>
+          <div class="field">
+            {{ dias_tenencia_total }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Ingresos intereses:</h4>
+          <div class="field">
+            $USD {{ ingresos_intereses | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Costos totales:</h4>
+          <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Ganancia o pérdida total:</h4>
+          <div class="field">
+            $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Ganancia o pérdida de capital:</h4>
+          <div class="field">
+            {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Interés (%):</h4>
+          <div class="field">
+            {{ intereses_porcentaje | number: "1.2-4" }} %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés neto antes de impuesto (%):</h4>
+          <div class="field">
+            {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés neto después de impuesto (%):</h4>
+          <div class="field">
+            {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Total de ingresos recibidos:</h4>
+          <div class="field">
+            $USD
+            {{ total_ingresos_recibidos | number: "1.2-4" }}
+          </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 class="cete-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </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>
+            </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
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </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
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+
+          <mat-paginator
+            [pageSizeOptions]="[10, 15, 25]"
+            [pageIndex]="0"
+            [pageSize]="10"
+          ></mat-paginator>
+        </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-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD {{ instrument_work.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_nominal_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_vencimiento_compra | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje compra:</h4>
+        <div class="field">
+          {{ instrument_work.cupon_porcentaje_compra | number: "1.2-4" }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_siguiente_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.comision_casa_porcentaje_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.comision_casa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.comision_bolsa_porcentaje_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision bolsa compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.comision_bolsa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_porcentaje_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_comision_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de compra:</h4>
+        <div class="field">
+          {{ instrument_work.dias_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de compra:</h4>
+        <div class="field">
+          {{ instrument_work.dias_acumulados_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.interes_acumulado_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.interes_acumulado_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio compra (%):</h4>
+        <div class="field">
+          {{ instrument_work.precio_sucio_porcentaje_compra | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_transado_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work.monto_pagar | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_ultima_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_liquidacion_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha inicio de vigencia:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_inicio_vigencia }}
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD {{ instrument_work.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_nominal_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_vencimiento_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje venta:</h4>
+        <div class="field">
+          {{ instrument_work.cupon_porcentaje_venta | number: "1.2-4" }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_siguiente_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa venta (%):</h4>
+        <div class="field">
+          {{ instrument_work.comision_casa_porcentaje_venta | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.comision_casa_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.comision_bolsa_porcentaje_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_porcentaje_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_comision_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de venta:</h4>
+        <div class="field">
+          {{ instrument_work.dias_vencimiento_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de venta:</h4>
+        <div class="field">
+          {{ instrument_work.dias_acumulados_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.interes_acumulado_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.interes_acumulado_porcentaje_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio venta (%):</h4>
+        <div class="field">
+          {{ instrument_work.precio_sucio_porcentaje_venta | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_transado_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_ultima_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_liquidacion_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_vencimiento_venta }}
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Resultado de la operación
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto a recibir:</h4>
+        <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días tenencia total:</h4>
+        <div class="field">
+          {{ dias_tenencia_total }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingresos intereses:</h4>
+        <div class="field">$USD {{ ingresos_intereses | number: "1.2-4" }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costos totales:</h4>
+        <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia o pérdida total:</h4>
+        <div class="field">
+          $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia o pérdida de capital:</h4>
+        <div class="field">
+          {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés (%):</h4>
+        <div class="field">{{ intereses_porcentaje | number: "1.2-4" }} %</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto antes de impuesto (%):</h4>
+        <div class="field">
+          {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto después de impuesto (%):</h4>
+        <div class="field">
+          {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total de ingresos recibidos:</h4>
+        <div class="field">
+          $USD {{ total_ingresos_recibidos | number: "1.2-4" }}
+        </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="cete-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <!-- Country Column -->
+            <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>
+            </ng-container>
+
+            <!-- Country Column -->
+            <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
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </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
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+
+          <mat-paginator
+            [pageSizeOptions]="[10, 15, 25]"
+            [pageIndex]="0"
+            [pageSize]="10"
+          ></mat-paginator>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/instruments/certificados/certificados.component.ts

@@ -0,0 +1,693 @@
+import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+import { Router } from "@angular/router";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { CatalogsService } from "@app/services/catalogs.service";
+import { InstrumentCalculations } from "@app/services/instrument-calculations.service";
+import Swal from "sweetalert2";
+import { GeneralInfo } from "@app/models/investment-proposal-form";
+import { parse } from "date-fns";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+
+@Component({
+  selector: "app-certificados",
+  templateUrl: "./certificados.component.html"
+})
+export class CINV implements InstrumentComponent {
+  title: string = "Certificados de inversión";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  displayedColumns: string[] = [
+    "posicion",
+    "plazo",
+    "fecha_pago",
+    "ingreso_bruto",
+    "ingreso_neto",
+    "impuesto"
+  ];
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  form: any;
+  general: GeneralInfo;
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  m_fecha_vencimiento_compra: IMyDateModel;
+  m_fecha_ultima_cupon_compra: IMyDateModel;
+  m_fecha_rendencion: IMyDateModel;
+  m_fecha_liquidacion_compra: IMyDateModel;
+
+  submitted: boolean = false;
+  instrument_exists: boolean;
+  instrument_work: any = [];
+  financials: any;
+  base_types: any;
+
+  proyecciones: any;
+
+  bonosObject: {};
+  dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
+  hasProjections: boolean;
+  fecha_vencimiento: any;
+  comision_casa_compra: any;
+  comision_bolsa_compra: any;
+  fecha_siguiente_cupon_compra: any;
+  dias_vencimiento_compra: any;
+  dias_acumulados_compra: any;
+  ytm_vencimiento_comision_porcentaje_compra: any;
+  interes_acumulado_compra: any;
+  interes_acumulado_porcentaje_compra: any;
+  precio_sucio_porcentaje_compra: any;
+  valor_transado_compra: any;
+  monto_pagar: any;
+  fecha_inicio_vigencia: any;
+  comision_casa_venta: any;
+  fecha_siguiente_cupon_venta: any;
+  dias_vencimiento_venta: any;
+  dias_acumulados_venta: any;
+  ytm_vencimiento_comision_porcentaje_venta: any;
+  interes_acumulado_venta: any;
+  interes_acumulado_porcentaje_venta: any;
+  precio_sucio_porcentaje_venta: any;
+  valor_transado_venta: any;
+  monto_recibir: any;
+  dias_tenencia_total: any;
+  ganancia_perdida_capital: any;
+  ingresos_intereses: any;
+  costos_totales: any;
+  ganancia_perdida_total: any;
+  ganancia_perdida_capital_porcentaje: any;
+  intereses_porcentaje: any;
+  neto_antes_impuesto_porcentaje: any;
+  neto_despues_impuesto_porcentaje: any;
+  total_ingresos_recibidos: any;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private formDataService: FormInvestmentProposalService,
+    private catalogService: CatalogsService,
+    private instrumentCalcService: InstrumentCalculations,
+    public datepipe: DatePipe
+  ) {
+    this.instrument_work = this.formDataService.getWork();
+    this.instrument_exists = this.instrument_work == undefined;
+    this.general = this.formDataService.getGeneralInfo();
+
+    if (
+      this.instrument_work != undefined &&
+      (this.instrument_work.proyecciones != "" ||
+        this.instrument_work != undefined)
+    ) {
+      this.hasProjections = true;
+      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.paginator = this.paginator;
+      this.dataSource2.sort = this.sort;
+    } else {
+      this.hasProjections = false;
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      costo_transferencia: [
+        this.instrument_exists ? "" : this.instrument_work.costo_transferencia,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_compra: [
+        this.instrument_exists ? "" : this.instrument_work.precio_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      valor_nominal_compra: [
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_vencimiento_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      cupon_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cupon_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_bolsa_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ytm_vencimiento_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.ytm_vencimiento_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_venta: [
+        this.instrument_exists ? "" : this.instrument_work.precio_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      valor_nominal_venta: [
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_vencimiento_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      cupon_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cupon_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_bolsa_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ytm_vencimiento_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.ytm_vencimiento_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      fecha_ultima_cupon_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_ultima_cupon_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_ultima_cupon_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_liquidacion_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_ultima_cupon_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_ultima_cupon_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_ultima_cupon_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_liquidacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_venta
+              }
+            },
+        Validators.required
+      ]
+    });
+
+    // Get calculations, always
+    if (
+      this.instrument_work != undefined &&
+      this.instrument_work.proyecciones != ""
+    ) {
+      console.log("get calcs");
+      this.getCalculations(this.investmentProposalForm, false);
+    }
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.bonosObject);
+    return true;
+  }
+
+  getCalculations(form: any, saveForm: boolean) {
+    this.submitted = true;
+
+    console.log(form);
+    if (!form.valid) {
+      return false;
+    }
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    this.instrumentCalcService
+      .bonosCalc(
+        "CINV", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          costo_transferencia: +this.f.costo_transferencia.value,
+          valor_nominal_compra: +this.f.valor_nominal_compra.value,
+          precio_compra: +this.f.precio_compra.value,
+          precio_vencimiento_compra: +this.f.precio_vencimiento_compra.value,
+          cupon_porcentaje_compra: +this.f.cupon_porcentaje_compra.value,
+          comision_casa_porcentaje_compra: this.f
+            .comision_casa_porcentaje_compra.value,
+          comision_bolsa_porcentaje_compra: this.f
+            .comision_bolsa_porcentaje_compra.value,
+          ytm_vencimiento_porcentaje_compra: this.f
+            .ytm_vencimiento_porcentaje_compra.value,
+
+          valor_nominal_venta: +this.f.valor_nominal_venta.value,
+          precio_venta: +this.f.precio_venta.value,
+          precio_vencimiento_venta: +this.f.precio_vencimiento_venta.value,
+          cupon_porcentaje_venta: +this.f.cupon_porcentaje_venta.value,
+          comision_casa_porcentaje_venta: this.f.comision_casa_porcentaje_venta
+            .value,
+          comision_bolsa_porcentaje_venta: this.f
+            .comision_bolsa_porcentaje_venta.value,
+          ytm_vencimiento_porcentaje_venta: this.f
+            .ytm_vencimiento_porcentaje_venta.value,
+
+          fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+            .singleDate.formatted,
+          fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+            .singleDate.formatted,
+          fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+            .singleDate.formatted,
+
+          fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+            .singleDate.formatted,
+          fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+            .singleDate.formatted,
+          fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+            .singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          // Instrumento de compra
+          this.comision_casa_compra =
+            ans["result"]["instrumento_compra"]["comision_casa_compra"];
+          this.comision_bolsa_compra =
+            ans["result"]["instrumento_compra"]["comision_bolsa_compra"];
+          this.fecha_siguiente_cupon_compra =
+            ans["result"]["instrumento_compra"]["fecha_siguiente_cupon_compra"];
+          this.dias_vencimiento_compra =
+            ans["result"]["instrumento_compra"]["dias_vencimiento_compra"];
+          this.dias_acumulados_compra =
+            ans["result"]["instrumento_compra"]["dias_acumulados_compra"];
+          this.ytm_vencimiento_comision_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "ytm_vencimiento_comision_porcentaje_compra"
+            ];
+          this.interes_acumulado_compra =
+            ans["result"]["instrumento_compra"]["interes_acumulado_compra"];
+          this.interes_acumulado_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "interes_acumulado_porcentaje_compra"
+            ];
+          this.precio_sucio_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "precio_sucio_porcentaje_compra"
+            ];
+          this.valor_transado_compra =
+            ans["result"]["instrumento_compra"]["valor_transado_compra"];
+          this.monto_pagar = ans["result"]["instrumento_compra"]["monto_pagar"];
+          this.fecha_inicio_vigencia =
+            ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
+
+          // Instrumento de venta
+          this.comision_casa_venta =
+            ans["result"]["instrumento_venta"]["comision_casa_venta"];
+          this.fecha_siguiente_cupon_venta =
+            ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
+          this.dias_vencimiento_venta =
+            ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
+          this.dias_acumulados_venta =
+            ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
+          this.ytm_vencimiento_comision_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "ytm_vencimiento_comision_porcentaje_venta"
+            ];
+          this.interes_acumulado_venta =
+            ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
+          this.interes_acumulado_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "interes_acumulado_porcentaje_venta"
+            ];
+          this.precio_sucio_porcentaje_venta =
+            ans["result"]["instrumento_venta"]["precio_sucio_porcentaje_venta"];
+          this.valor_transado_venta =
+            ans["result"]["instrumento_venta"]["valor_transado_venta"];
+          this.monto_recibir =
+            ans["result"]["instrumento_venta"]["monto_recibir"];
+
+          // Resultado de la operacion
+          this.dias_tenencia_total =
+            ans["result"]["resultado_operacion"]["dias_tenencia_total"];
+          this.ganancia_perdida_capital =
+            ans["result"]["resultado_operacion"]["ganancia_perdida_capital"];
+          this.ingresos_intereses =
+            ans["result"]["resultado_operacion"]["ingresos_intereses"];
+          this.costos_totales =
+            ans["result"]["resultado_operacion"]["costos_totales"];
+          this.ganancia_perdida_total =
+            ans["result"]["resultado_operacion"]["ganancia_perdida_total"];
+          this.ganancia_perdida_capital_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "ganancia_perdida_capital_porcentaje"
+            ];
+          this.intereses_porcentaje =
+            ans["result"]["resultado_operacion"]["intereses_porcentaje"];
+          this.neto_antes_impuesto_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "neto_antes_impuesto_porcentaje"
+            ];
+          this.neto_despues_impuesto_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "neto_despues_impuesto_porcentaje"
+            ];
+          this.total_ingresos_recibidos =
+            ans["result"]["resultado_operacion"]["total_ingresos_recibidos"];
+
+          // Proyecciones
+          this.proyecciones = ans["result"]["proyecciones"];
+
+          this.dataSource.data = this.proyecciones;
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+
+          // Obj
+          this.bonosObject = {
+            costo_transferencia: this.investmentProposalForm.value
+              .costo_transferencia,
+            valor_nominal_compra: this.investmentProposalForm.value
+              .valor_nominal_compra,
+            precio_compra: this.investmentProposalForm.value.precio_compra,
+            precio_vencimiento_compra: this.investmentProposalForm.value
+              .precio_vencimiento_compra,
+            cupon_porcentaje_compra: this.investmentProposalForm.value
+              .cupon_porcentaje_compra,
+            comision_casa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_casa_porcentaje_compra,
+            comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_compra,
+            ytm_vencimiento_porcentaje_compra: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_compra,
+            valor_nominal_venta: this.investmentProposalForm.value
+              .valor_nominal_venta,
+            precio_venta: this.investmentProposalForm.value.precio_venta,
+            precio_vencimiento_venta: this.investmentProposalForm.value
+              .precio_vencimiento_venta,
+            cupon_porcentaje_venta: this.investmentProposalForm.value
+              .cupon_porcentaje_venta,
+            comision_casa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_casa_porcentaje_venta,
+            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_venta,
+            ytm_vencimiento_porcentaje_venta: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_venta,
+
+            fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+              .singleDate.formatted,
+            fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+              .singleDate.formatted,
+
+            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+              .singleDate.formatted,
+            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+              .singleDate.formatted,
+
+            // Instrumento de compra
+
+            comision_casa_compra: this.comision_casa_compra,
+            comision_bolsa_compra: this.comision_bolsa_compra,
+            fecha_siguiente_cupon_compra: this.fecha_siguiente_cupon_compra,
+            dias_vencimiento_compra: this.dias_vencimiento_compra,
+            dias_acumulados_compra: this.dias_acumulados_compra,
+            ytm_vencimiento_comision_porcentaje_compra: this
+              .ytm_vencimiento_comision_porcentaje_compra,
+            interes_acumulado_compra: this.interes_acumulado_compra,
+            interes_acumulado_porcentaje_compra: this
+              .interes_acumulado_porcentaje_compra,
+            precio_sucio_porcentaje_compra: this.precio_sucio_porcentaje_compra,
+            valor_transado_compra: this.valor_transado_compra,
+            monto_pagar: this.monto_pagar,
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia,
+            // Instrumento de venta
+
+            comision_casa_venta: this.comision_casa_venta,
+            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
+            dias_vencimiento_venta: this.dias_vencimiento_venta,
+            dias_acumulados_venta: this.dias_acumulados_venta,
+            ytm_vencimiento_comision_porcentaje_venta: this
+              .ytm_vencimiento_comision_porcentaje_venta,
+            interes_acumulado_venta: this.interes_acumulado_venta,
+            interes_acumulado_porcentaje_venta: this
+              .interes_acumulado_porcentaje_venta,
+            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
+            valor_transado_venta: this.valor_transado_venta,
+            // Resultado de la operacion
+
+            monto_recibir: this.monto_recibir,
+            dias_tenencia_total: this.dias_tenencia_total,
+            ganancia_perdida_capital: this.ganancia_perdida_capital,
+            ingresos_intereses: this.ingresos_intereses,
+            costos_totales: this.costos_totales,
+            ganancia_perdida_total: this.ganancia_perdida_total,
+            ganancia_perdida_capital_porcentaje: this
+              .ganancia_perdida_capital_porcentaje,
+            intereses_porcentaje: this.intereses_porcentaje,
+            neto_antes_impuesto_porcentaje: this.neto_antes_impuesto_porcentaje,
+            neto_despues_impuesto_porcentaje: this
+              .neto_despues_impuesto_porcentaje,
+            total_ingresos_recibidos: this.total_ingresos_recibidos,
+
+            // Proyecciones
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.bonosObject);
+          Swal.close();
+          if (saveForm == true) {
+            if (this.investmentID != undefined) {
+              this.router.navigate(["/investment-proposal/complement-info"], {
+                queryParams: { id: this.investmentID }
+              });
+            } else {
+              this.router.navigate(["/investment-proposal/complement-info"]);
+            }
+          }
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: "No su pudo obtener la informacion"
+          });
+          return false;
+        }
+      );
+  }
+
+  goToPrevious() {
+    this.submitted = true;
+    if (this.investmentID != undefined) {
+      this.router.navigate(["/investment-proposal/general-info"], {
+        queryParams: { id: this.investmentID }
+      });
+    } else {
+      this.router.navigate(["/investment-proposal/general-info"]);
+    }
+  }
+
+  goToNext(form: any) {
+    this.getCalculations(form, true);
+  }
+}

src/app/components/instruments/eurobonos/eurobonos.component.html

@@ -0,0 +1,1521 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Eurobonos
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <!-- Valor nominal compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_compra">Valor nominal compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_compra"
+            >Comisión casa compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_compra"
+            >Comisión bolsa compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_compra">Cupón compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Costo de transferencia -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="costo_transferencia">Costo de transferencia: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="costo_transferencia"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.costo_transferencia.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.costo_transferencia.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.costo_transferencia.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.costo_transferencia.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- [YTM] Rendimiento de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="ytm_vencimiento_porcentaje_compra"
+            >[YTM] Rendimiento de vencimiento de compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="ytm_vencimiento_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.ytm_vencimiento_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.ytm_vencimiento_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.ytm_vencimiento_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.ytm_vencimiento_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_compra">Precio de compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_compra"
+            >Precio de vencimiento de compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_compra"
+            >Ultima fecha cupón compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_ultima_cupon_compra"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra"
+            >Fecha de vencimiento de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_vencimiento_compra"
+                (click)="dp2.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp2="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra"
+            >Fecha de liquidación de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_liquidacion_compra"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <!-- Valor nominal venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_venta">Valor nominal venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_venta"
+            >Comisión casa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_venta"
+            >Comisión bolsa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_venta">Cupón venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- [YTM] Rendimiento de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="ytm_vencimiento_porcentaje_venta"
+            >[YTM] Rendimiento de vencimiento de venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="ytm_vencimiento_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.ytm_vencimiento_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.ytm_vencimiento_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.ytm_vencimiento_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.ytm_vencimiento_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_venta">Precio de venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_venta"
+            >Precio de vencimiento de venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_venta"
+            >Ultima fecha cupón venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_ultima_cupon_venta"
+                (click)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta"
+            >Fecha de vencimiento de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_vencimiento_venta"
+                (click)="dp5.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp5="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta"
+            >Fecha de liquidación de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <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_liquidacion_venta"
+                (click)="dp6.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp6="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </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-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón compra:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa compra:</h4>
+          <div class="field">
+            $USD {{ comision_casa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa compra:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de compra:</h4>
+          <div class="field">
+            {{ dias_vencimiento_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de compra:</h4>
+          <div class="field">
+            {{ dias_acumulados_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra:</h4>
+          <div class="field">
+            $USD
+            {{ interes_acumulado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio compra (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado compra:</h4>
+          <div class="field">
+            $USD {{ valor_transado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Monto a pagar:</h4>
+          <div class="field">$USD {{ monto_pagar | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha inicio de vigencia:</h4>
+          <div class="field">
+            {{ fecha_inicio_vigencia }}
+          </div>
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de venta
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón venta:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa venta:</h4>
+          <div class="field">
+            $USD {{ comision_casa_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión venta (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de venta:</h4>
+          <div class="field">
+            {{ dias_vencimiento_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de venta:</h4>
+          <div class="field">
+            {{ dias_acumulados_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta:</h4>
+          <div class="field">
+            $USD {{ interes_acumulado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio venta (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado venta:</h4>
+          <div class="field">
+            $USD {{ valor_transado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Resultado de la operación
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Monto a recibir:</h4>
+          <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días tenencia total:</h4>
+          <div class="field">
+            {{ dias_tenencia_total }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Ingresos intereses:</h4>
+          <div class="field">
+            $USD {{ ingresos_intereses | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Costos totales:</h4>
+          <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Ganancia o pérdida total:</h4>
+          <div class="field">
+            $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Ganancia o pérdida de capital:</h4>
+          <div class="field">
+            {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Interés (%):</h4>
+          <div class="field">
+            {{ intereses_porcentaje | number: "1.2-4" }} %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés neto antes de impuesto (%):</h4>
+          <div class="field">
+            {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés neto después de impuesto (%):</h4>
+          <div class="field">
+            {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Total de ingresos recibidos:</h4>
+          <div class="field">
+            $USD
+            {{ total_ingresos_recibidos | number: "1.2-4" }}
+          </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 class="cete-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </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>
+            </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
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </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
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+
+          <mat-paginator
+            [pageSizeOptions]="[10, 15, 25]"
+            [pageIndex]="0"
+            [pageSize]="10"
+          ></mat-paginator>
+        </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-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD {{ instrument_work.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_nominal_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_vencimiento_compra | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje compra:</h4>
+        <div class="field">
+          {{ instrument_work.cupon_porcentaje_compra | number: "1.2-4" }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_siguiente_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.comision_casa_porcentaje_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.comision_casa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.comision_bolsa_porcentaje_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision bolsa compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.comision_bolsa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_porcentaje_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_comision_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de compra:</h4>
+        <div class="field">
+          {{ instrument_work.dias_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de compra:</h4>
+        <div class="field">
+          {{ instrument_work.dias_acumulados_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.interes_acumulado_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.interes_acumulado_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio compra (%):</h4>
+        <div class="field">
+          {{ instrument_work.precio_sucio_porcentaje_compra | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado compra:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_transado_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work.monto_pagar | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_ultima_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_liquidacion_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento compra:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha inicio de vigencia:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_inicio_vigencia }}
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD {{ instrument_work.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_nominal_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.precio_vencimiento_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje venta:</h4>
+        <div class="field">
+          {{ instrument_work.cupon_porcentaje_venta | number: "1.2-4" }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_siguiente_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa venta (%):</h4>
+        <div class="field">
+          {{ instrument_work.comision_casa_porcentaje_venta | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.comision_casa_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.comision_bolsa_porcentaje_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_porcentaje_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.ytm_vencimiento_comision_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de venta:</h4>
+        <div class="field">
+          {{ instrument_work.dias_vencimiento_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de venta:</h4>
+        <div class="field">
+          {{ instrument_work.dias_acumulados_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.interes_acumulado_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.interes_acumulado_porcentaje_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio venta (%):</h4>
+        <div class="field">
+          {{ instrument_work.precio_sucio_porcentaje_venta | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado venta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_transado_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_ultima_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_liquidacion_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento venta:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_vencimiento_venta }}
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Resultado de la operación
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto a recibir:</h4>
+        <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días tenencia total:</h4>
+        <div class="field">
+          {{ dias_tenencia_total }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingresos intereses:</h4>
+        <div class="field">$USD {{ ingresos_intereses | number: "1.2-4" }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costos totales:</h4>
+        <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia o pérdida total:</h4>
+        <div class="field">
+          $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia o pérdida de capital:</h4>
+        <div class="field">
+          {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés (%):</h4>
+        <div class="field">{{ intereses_porcentaje | number: "1.2-4" }} %</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto antes de impuesto (%):</h4>
+        <div class="field">
+          {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto después de impuesto (%):</h4>
+        <div class="field">
+          {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total de ingresos recibidos:</h4>
+        <div class="field">
+          $USD {{ total_ingresos_recibidos | number: "1.2-4" }}
+        </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="cete-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <!-- Country Column -->
+            <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>
+            </ng-container>
+
+            <!-- Country Column -->
+            <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
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </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
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+
+          <mat-paginator
+            [pageSizeOptions]="[10, 15, 25]"
+            [pageIndex]="0"
+            [pageSize]="10"
+          ></mat-paginator>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/instruments/eurobonos/eurobonos.component.ts

@@ -0,0 +1,739 @@
+import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+import { Router } from "@angular/router";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { CatalogsService } from "@app/services/catalogs.service";
+import { InstrumentCalculations } from "@app/services/instrument-calculations.service";
+import Swal from "sweetalert2";
+import { GeneralInfo } from "@app/models/investment-proposal-form";
+import { parse } from "date-fns";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+
+@Component({
+  selector: "app-eurobonos",
+  templateUrl: "./eurobonos.component.html"
+})
+export class EURB implements InstrumentComponent {
+  title: string = "Eurobonos";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  displayedColumns: string[] = [
+    "posicion",
+    "plazo",
+    "fecha_pago",
+    "ingreso_bruto",
+    "ingreso_neto",
+    "impuesto"
+  ];
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  form: any;
+  general: GeneralInfo;
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  m_fecha_vencimiento_compra: IMyDateModel;
+  m_fecha_ultima_cupon_compra: IMyDateModel;
+  m_fecha_rendencion: IMyDateModel;
+  m_fecha_liquidacion_compra: IMyDateModel;
+
+  submitted: boolean = false;
+  instrument_exists: boolean;
+  instrument_work: any = [];
+  financials: any;
+  base_types: any;
+
+  proyecciones: any;
+
+  bonosObject: {};
+  dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
+  hasProjections: boolean;
+  fecha_vencimiento: any;
+  comision_casa_compra: any;
+  comision_bolsa_compra: any;
+  fecha_siguiente_cupon_compra: any;
+  dias_vencimiento_compra: any;
+  dias_acumulados_compra: any;
+  ytm_vencimiento_comision_porcentaje_compra: any;
+  interes_acumulado_compra: any;
+  interes_acumulado_porcentaje_compra: any;
+  precio_sucio_porcentaje_compra: any;
+  valor_transado_compra: any;
+  monto_pagar: any;
+  fecha_inicio_vigencia: any;
+  comision_casa_venta: any;
+  fecha_siguiente_cupon_venta: any;
+  dias_vencimiento_venta: any;
+  dias_acumulados_venta: any;
+  ytm_vencimiento_comision_porcentaje_venta: any;
+  interes_acumulado_venta: any;
+  interes_acumulado_porcentaje_venta: any;
+  precio_sucio_porcentaje_venta: any;
+  valor_transado_venta: any;
+  monto_recibir: any;
+  dias_tenencia_total: any;
+  ganancia_perdida_capital: any;
+  ingresos_intereses: any;
+  costos_totales: any;
+  ganancia_perdida_total: any;
+  ganancia_perdida_capital_porcentaje: any;
+  intereses_porcentaje: any;
+  neto_antes_impuesto_porcentaje: any;
+  neto_despues_impuesto_porcentaje: any;
+  total_ingresos_recibidos: any;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private formDataService: FormInvestmentProposalService,
+    private catalogService: CatalogsService,
+    private instrumentCalcService: InstrumentCalculations,
+    public datepipe: DatePipe
+  ) {
+    this.instrument_work = this.formDataService.getWork();
+    this.instrument_exists = this.instrument_work == undefined;
+    this.general = this.formDataService.getGeneralInfo();
+
+    if (
+      this.instrument_work != undefined &&
+      (this.instrument_work.proyecciones != "" ||
+        this.instrument_work != undefined)
+    ) {
+      this.hasProjections = true;
+      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.paginator = this.paginator;
+      this.dataSource2.sort = this.sort;
+    } else {
+      this.hasProjections = false;
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      costo_transferencia: [
+        this.instrument_exists ? "" : this.instrument_work.costo_transferencia,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_compra: [
+        this.instrument_exists ? "" : this.instrument_work.precio_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      valor_nominal_compra: [
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_vencimiento_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      cupon_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cupon_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_bolsa_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ytm_vencimiento_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.ytm_vencimiento_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_venta: [
+        this.instrument_exists ? "" : this.instrument_work.precio_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      valor_nominal_venta: [
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_vencimiento_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      cupon_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cupon_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_bolsa_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ytm_vencimiento_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.ytm_vencimiento_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      fecha_ultima_cupon_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_ultima_cupon_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_ultima_cupon_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_liquidacion_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_ultima_cupon_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_ultima_cupon_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_ultima_cupon_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_liquidacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_venta
+              }
+            },
+        Validators.required
+      ]
+    });
+
+    // Get calculations, always
+    if (
+      this.instrument_work != undefined &&
+      this.instrument_work.proyecciones != ""
+    ) {
+      console.log("get calcs");
+      this.getCalculations(this.investmentProposalForm, false);
+    }
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.bonosObject);
+    return true;
+  }
+
+  getCalculations(form: any, saveForm: boolean) {
+    this.submitted = true;
+
+    console.log(form);
+    if (!form.valid) {
+      return false;
+    }
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    this.instrumentCalcService
+      .bonosCalc(
+        "EURB", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          costo_transferencia: +this.f.costo_transferencia.value,
+          valor_nominal_compra: +this.f.valor_nominal_compra.value,
+          precio_compra: +this.f.precio_compra.value,
+          precio_vencimiento_compra: +this.f.precio_vencimiento_compra.value,
+          cupon_porcentaje_compra: +this.f.cupon_porcentaje_compra.value,
+          comision_casa_porcentaje_compra: this.f
+            .comision_casa_porcentaje_compra.value,
+          comision_bolsa_porcentaje_compra: this.f
+            .comision_bolsa_porcentaje_compra.value,
+          ytm_vencimiento_porcentaje_compra: this.f
+            .ytm_vencimiento_porcentaje_compra.value,
+
+          valor_nominal_venta: +this.f.valor_nominal_venta.value,
+          precio_venta: +this.f.precio_venta.value,
+          precio_vencimiento_venta: +this.f.precio_vencimiento_venta.value,
+          cupon_porcentaje_venta: +this.f.cupon_porcentaje_venta.value,
+          comision_casa_porcentaje_venta: this.f.comision_casa_porcentaje_venta
+            .value,
+          comision_bolsa_porcentaje_venta: this.f
+            .comision_bolsa_porcentaje_venta.value,
+          ytm_vencimiento_porcentaje_venta: this.f
+            .ytm_vencimiento_porcentaje_venta.value,
+
+          fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+            .singleDate.formatted,
+          fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+            .singleDate.formatted,
+          fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+            .singleDate.formatted,
+
+          fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+            .singleDate.formatted,
+          fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+            .singleDate.formatted,
+          fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+            .singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          console.log("---------");
+          console.log(ans);
+
+          // Instrumento de compra
+          this.comision_casa_compra =
+            ans["result"]["instrumento_compra"]["comision_casa_compra"];
+          this.comision_bolsa_compra =
+            ans["result"]["instrumento_compra"]["comision_bolsa_compra"];
+          this.fecha_siguiente_cupon_compra =
+            ans["result"]["instrumento_compra"]["fecha_siguiente_cupon_compra"];
+          this.dias_vencimiento_compra =
+            ans["result"]["instrumento_compra"]["dias_vencimiento_compra"];
+          this.dias_acumulados_compra =
+            ans["result"]["instrumento_compra"]["dias_acumulados_compra"];
+          this.ytm_vencimiento_comision_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "ytm_vencimiento_comision_porcentaje_compra"
+            ];
+          this.interes_acumulado_compra =
+            ans["result"]["instrumento_compra"]["interes_acumulado_compra"];
+          this.interes_acumulado_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "interes_acumulado_porcentaje_compra"
+            ];
+          this.precio_sucio_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "precio_sucio_porcentaje_compra"
+            ];
+          this.valor_transado_compra =
+            ans["result"]["instrumento_compra"]["valor_transado_compra"];
+          this.monto_pagar = ans["result"]["instrumento_compra"]["monto_pagar"];
+          this.fecha_inicio_vigencia =
+            ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
+
+          // Instrumento de venta
+          this.comision_casa_venta =
+            ans["result"]["instrumento_venta"]["comision_casa_venta"];
+          this.fecha_siguiente_cupon_venta =
+            ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
+          this.dias_vencimiento_venta =
+            ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
+          this.dias_acumulados_venta =
+            ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
+          this.ytm_vencimiento_comision_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "ytm_vencimiento_comision_porcentaje_venta"
+            ];
+          this.interes_acumulado_venta =
+            ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
+          this.interes_acumulado_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "interes_acumulado_porcentaje_venta"
+            ];
+          this.precio_sucio_porcentaje_venta =
+            ans["result"]["instrumento_venta"]["precio_sucio_porcentaje_venta"];
+          this.valor_transado_venta =
+            ans["result"]["instrumento_venta"]["valor_transado_venta"];
+          this.monto_recibir =
+            ans["result"]["instrumento_venta"]["monto_recibir"];
+
+          // Resultado de la operacion
+          this.dias_tenencia_total =
+            ans["result"]["resultado_operacion"]["dias_tenencia_total"];
+          this.ganancia_perdida_capital =
+            ans["result"]["resultado_operacion"]["ganancia_perdida_capital"];
+          this.ingresos_intereses =
+            ans["result"]["resultado_operacion"]["ingresos_intereses"];
+          this.costos_totales =
+            ans["result"]["resultado_operacion"]["costos_totales"];
+          this.ganancia_perdida_total =
+            ans["result"]["resultado_operacion"]["ganancia_perdida_total"];
+          this.ganancia_perdida_capital_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "ganancia_perdida_capital_porcentaje"
+            ];
+          this.intereses_porcentaje =
+            ans["result"]["resultado_operacion"]["intereses_porcentaje"];
+          this.neto_antes_impuesto_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "neto_antes_impuesto_porcentaje"
+            ];
+          this.neto_despues_impuesto_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "neto_despues_impuesto_porcentaje"
+            ];
+          this.total_ingresos_recibidos =
+            ans["result"]["resultado_operacion"]["total_ingresos_recibidos"];
+
+          // Proyecciones
+          this.proyecciones = ans["result"]["proyecciones"];
+
+          this.dataSource.data = this.proyecciones;
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+
+          /*
+ "result": {
+        "instrumento_compra": {
+            "comision_casa_compra": 201.3,
+            "comision_bolsa_compra": 30.194999999999997,
+            "fecha_siguiente_cupon_compra": "28/04/2013",
+            "dias_vencimiento_compra": 880,
+            "dias_acumulados_compra": 32,
+            "ytm_vencimiento_comision_porcentaje_compra": 6.565909090909091,
+            "interes_acumulado_compra": 533.3333333333334,
+            "interes_acumulado_porcentaje_compra": 6.000000000000001,
+            "precio_sucio_porcentaje_compra": 106.65,
+            "valor_transado_compra": 100650.0,
+            "monto_pagar": 101419.82833333334,
+            "fecha_inicio_vigencia": "30/4/2013"
+        },
+        "instrumento_venta": {
+            "comision_casa_venta": 50.0,
+            "fecha_siguiente_cupon_venta": "28/10/2022",
+            "dias_vencimiento_venta": 179,
+            "dias_acumulados_venta": 1,
+            "ytm_vencimiento_comision_porcentaje_venta": -0.5229050279329608,
+            "interes_acumulado_venta": 46.875,
+            "interes_acumulado_porcentaje_venta": 6.75,
+            "precio_sucio_porcentaje_venta": 106.74999999999999,
+            "valor_transado_venta": 250000.0,
+            "monto_recibir": 249396.875
+        },
+        "resultado_operacion": {
+            "valor_nominal_compra": 100000.0,
+            1"dias_tenencia_total": 3389,
+            "precio_compra": 100.64999999999999,
+            "precio_venta": 100.0,
+            1"ganancia_perdida_capital": 149350.0,
+            1"ingresos_intereses": 13726.875,
+            1"costos_totales": -886.495,
+            1"ganancia_perdida_total": 162190.38,
+            1"ganancia_perdida_capital_porcentaje": 15.864856889938034,
+            1"intereses_porcentaje": 1.458151372086161,
+            1"neto_antes_impuesto_porcentaje": 17.22883942165831,
+            1"1neto_despues_impuesto_porcentaje": 17.067375863086458,
+            1"total_ingresos_recibidos": 13680.0
+        },
+*/
+          this.bonosObject = {
+            costo_transferencia: this.investmentProposalForm.value
+              .costo_transferencia,
+            valor_nominal_compra: this.investmentProposalForm.value
+              .valor_nominal_compra,
+            precio_compra: this.investmentProposalForm.value.precio_compra,
+            precio_vencimiento_compra: this.investmentProposalForm.value
+              .precio_vencimiento_compra,
+            cupon_porcentaje_compra: this.investmentProposalForm.value
+              .cupon_porcentaje_compra,
+            comision_casa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_casa_porcentaje_compra,
+            comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_compra,
+            ytm_vencimiento_porcentaje_compra: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_compra,
+            valor_nominal_venta: this.investmentProposalForm.value
+              .valor_nominal_venta,
+            precio_venta: this.investmentProposalForm.value.precio_venta,
+            precio_vencimiento_venta: this.investmentProposalForm.value
+              .precio_vencimiento_venta,
+            cupon_porcentaje_venta: this.investmentProposalForm.value
+              .cupon_porcentaje_venta,
+            comision_casa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_casa_porcentaje_venta,
+            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_venta,
+            ytm_vencimiento_porcentaje_venta: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_venta,
+
+            fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+              .singleDate.formatted,
+            fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+              .singleDate.formatted,
+
+            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+              .singleDate.formatted,
+            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+              .singleDate.formatted,
+
+            // Instrumento de compra
+
+            comision_casa_compra: this.comision_casa_compra,
+            comision_bolsa_compra: this.comision_bolsa_compra,
+            fecha_siguiente_cupon_compra: this.fecha_siguiente_cupon_compra,
+            dias_vencimiento_compra: this.dias_vencimiento_compra,
+            dias_acumulados_compra: this.dias_acumulados_compra,
+            ytm_vencimiento_comision_porcentaje_compra: this
+              .ytm_vencimiento_comision_porcentaje_compra,
+            interes_acumulado_compra: this.interes_acumulado_compra,
+            interes_acumulado_porcentaje_compra: this
+              .interes_acumulado_porcentaje_compra,
+            precio_sucio_porcentaje_compra: this.precio_sucio_porcentaje_compra,
+            valor_transado_compra: this.valor_transado_compra,
+            monto_pagar: this.monto_pagar,
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia,
+            // Instrumento de venta
+
+            comision_casa_venta: this.comision_casa_venta,
+            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
+            dias_vencimiento_venta: this.dias_vencimiento_venta,
+            dias_acumulados_venta: this.dias_acumulados_venta,
+            ytm_vencimiento_comision_porcentaje_venta: this
+              .ytm_vencimiento_comision_porcentaje_venta,
+            interes_acumulado_venta: this.interes_acumulado_venta,
+            interes_acumulado_porcentaje_venta: this
+              .interes_acumulado_porcentaje_venta,
+            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
+            valor_transado_venta: this.valor_transado_venta,
+            // Resultado de la operacion
+
+            monto_recibir: this.monto_recibir,
+            dias_tenencia_total: this.dias_tenencia_total,
+            ganancia_perdida_capital: this.ganancia_perdida_capital,
+            ingresos_intereses: this.ingresos_intereses,
+            costos_totales: this.costos_totales,
+            ganancia_perdida_total: this.ganancia_perdida_total,
+            ganancia_perdida_capital_porcentaje: this
+              .ganancia_perdida_capital_porcentaje,
+            intereses_porcentaje: this.intereses_porcentaje,
+            neto_antes_impuesto_porcentaje: this.neto_antes_impuesto_porcentaje,
+            neto_despues_impuesto_porcentaje: this
+              .neto_despues_impuesto_porcentaje,
+            total_ingresos_recibidos: this.total_ingresos_recibidos,
+
+            // Proyecciones
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.bonosObject);
+          Swal.close();
+          if (saveForm == true) {
+            if (this.investmentID != undefined) {
+              this.router.navigate(["/investment-proposal/complement-info"], {
+                queryParams: { id: this.investmentID }
+              });
+            } else {
+              this.router.navigate(["/investment-proposal/complement-info"]);
+            }
+          }
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: "No su pudo obtener la informacion"
+          });
+          return false;
+        }
+      );
+  }
+
+  goToPrevious() {
+    this.submitted = true;
+    if (this.investmentID != undefined) {
+      this.router.navigate(["/investment-proposal/general-info"], {
+        queryParams: { id: this.investmentID }
+      });
+    } else {
+      this.router.navigate(["/investment-proposal/general-info"]);
+    }
+  }
+
+  goToNext(form: any) {
+    this.getCalculations(form, true);
+  }
+}

src/app/components/investment-proposals/approve/approve.component.ts

@@ -63,6 +63,10 @@ export class InvestmentProposalApproveComponent implements OnInit {
   comment: any;
   justification: any;
   reviewProposal: {};
+  userListPrevious: any;
+  generated_inputs_previous: string;
+  userListNext: any;
+  generated_inputs_next: string;
 
   constructor(
     private router: Router,
@@ -87,6 +91,28 @@ export class InvestmentProposalApproveComponent implements OnInit {
 
     if (this.investmentProposalID != undefined) {
       this.investmentExists = true;
+
+      this.investmentService
+        .getAvailableUsers(this.investmentProposalID)
+        .subscribe(res => {
+          this.userListPrevious = res["usuarios_previous"];
+          this.generated_inputs_previous = "";
+
+          this.userListNext = res["usuarios_next"];
+          this.generated_inputs_next = "";
+
+          if (this.userListPrevious.length > 0) {
+            for (let i = 0; i < this.userListPrevious.length; i++) {
+              this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i]}' name='users' value='${this.userListPrevious[i]}'><label class='form-check-label' for='previous-${this.userListPrevious[i]}'>${this.userListPrevious[i]}</label></div>`;
+            }
+          }
+          if (this.userListNext.length > 0) {
+            for (let i = 0; i < this.userListNext.length; i++) {
+              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+            }
+          }
+        });
+
       this.investmentService
         .getProposalInvestment(this.investmentProposalID)
         .subscribe(res => {
@@ -323,105 +349,170 @@ export class InvestmentProposalApproveComponent implements OnInit {
   }
 
   approve_proposal() {
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
-        title: "<h3>Aprobación de propuesta de inversión</h3>",
+      Swal.fire({
+        title: `<h3>Aprobación de propuesta de inversión</h3>`,
         icon: "info",
         html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
         showCancelButton: true,
-        confirmButtonText: "Aprobar propuesta",
+        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
-        // inputValidator: value => {
-        //   if (!value) {
-        //     return "Debe ingresar un comentario";
-        //   }
-        // }
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
+
         preConfirm: comentario => {
           this.reviewProposal = {
             id_inversion: this.investmentProposalID,
             step: "next",
             comentario: comentario
           };
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        if (result.value) {
+          Swal.fire({
+            title: `<h3>Aprobación de propuesta de inversión</h3>`,
+            icon: "info",
+            html: `${this.generated_inputs_next}`,
+            confirmButtonText: "Aprobar propuesta",
+            showCancelButton: true,
+            cancelButtonText: "Cancelar",
+            showLoaderOnConfirm: true,
+
+            preConfirm: () => {
+              let array = [];
 
-          this.investmentService
-            .sendProposalInvestmentToNextStep(this.reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
-                  Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido aprobada"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.href = "#/investment-proposals";
-                  });
+              for (let i = 0; i < this.userListNext.length; i++) {
+                let html_input: HTMLInputElement = document.getElementById(
+                  "next-" + this.userListNext[i]
+                ) as HTMLInputElement;
+                let html_value: string = html_input.value;
+                if (html_input.checked == true) {
+                  array.push(html_value);
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
               }
-            );
+
+              this.reviewProposal["notificar"] = array.toString();
+
+              this.investmentService
+                .sendReviewProposalInvestment(this.reviewProposal)
+                .subscribe(
+                  success => {
+                    if (success) {
+                      Swal.fire({
+                        allowOutsideClick: false,
+                        icon: "success",
+                        showCancelButton: false,
+                        title: "Exito",
+                        confirmButtonText: "La propuesta ha sido aprobada"
+                      }).then(result => {
+                        Swal.close();
+                        window.location.href = "#/investment-proposals";
+                      });
+                    }
+                  },
+                  err => {
+                    Swal.fire({
+                      icon: "error",
+                      title: "Error al guardar",
+                      text: err.message
+                    });
+                  }
+                );
+            }
+          });
         }
       });
     })();
   }
 
   dismiss_proposal() {
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
-        title: "<h3>Aprobación de propuesta de inversión</h3>",
+      Swal.fire({
+        title: `<h3>Aprobación de propuesta de inversión</h3>`,
         icon: "info",
         html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
         showCancelButton: true,
-        confirmButtonText: "Rechazar propuesta",
         confirmButtonColor: "#C82333",
+        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
-        // inputValidator: value => {
-        //   if (!value) {
-        //     return "Debe ingresar un comentario";
-        //   }
-        // }
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
+
         preConfirm: comentario => {
           this.reviewProposal = {
             id_inversion: this.investmentProposalID,
-            step: "previous",
+            step: "next",
             comentario: comentario
           };
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        if (result.value) {
+          Swal.fire({
+            title: `<h3>Aprobación de propuesta de inversión</h3>`,
+            icon: "info",
+            html: `${this.generated_inputs_previous}`,
+            confirmButtonText: "Rechazar propuesta",
+            showCancelButton: true,
+            confirmButtonColor: "#C82333",
+            cancelButtonText: "Cancelar",
+            showLoaderOnConfirm: true,
+
+            preConfirm: () => {
+              let array = [];
 
-          this.investmentService
-            .sendProposalInvestmentToNextStep(this.reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
-                  Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "warning",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido rechazada"
-                  }).then(result => {
-                    window.location.href = "#/investment-proposals";
-                    Swal.close();
-                  });
+              for (let i = 0; i < this.userListPrevious.length; i++) {
+                let html_input: HTMLInputElement = document.getElementById(
+                  "previous-" + this.userListPrevious[i]
+                ) as HTMLInputElement;
+                let html_value: string = html_input.value;
+                if (html_input.checked == true) {
+                  array.push(html_value);
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error en el servidor",
-                  text: err.message
-                });
               }
-            );
+
+              this.reviewProposal["notificar"] = array.toString();
+
+              this.investmentService
+                .sendReviewProposalInvestment(this.reviewProposal)
+                .subscribe(
+                  success => {
+                    if (success) {
+                      Swal.fire({
+                        allowOutsideClick: false,
+                        icon: "success",
+                        showCancelButton: false,
+                        title: "Exito",
+                        confirmButtonText: "La propuesta ha sido rechazada"
+                      }).then(result => {
+                        Swal.close();
+                        window.location.href = "#/investment-proposals";
+                      });
+                    }
+                  },
+                  err => {
+                    Swal.fire({
+                      icon: "error",
+                      title: "Error al guardar",
+                      text: err.message
+                    });
+                  }
+                );
+            }
+          });
         }
       });
     })();

src/app/components/investment-proposals/investment-proposals.component.html

@@ -178,6 +178,22 @@
                       >
                         <i class="fas fa-money-check-alt"></i>
                       </a>
+                      <a
+                        *ngIf="
+                          can_review_payment(row.id_estado_inversion.codigo) &&
+                          userType(userRole, 'supervisores')
+                        "
+                        title="Autorización de pago"
+                        class="btn btn-success btn-custom-small"
+                        [routerLink]="[
+                          '/investment-proposal',
+                          row.id_inversion,
+                          'payment-approval'
+                        ]"
+                      >
+                        <i class="fas fa-search-dollar"></i>
+                      </a>
+                      <!--
                       <a
                         *ngIf="
                           can_upload_payment(row.id_estado_inversion.codigo) &&
@@ -192,7 +208,7 @@
                         ]"
                       >
                         <i class="fas fa-money-bill-wave"></i>
-                      </a>
+                      </a>-->
                       <a
                         *ngIf="
                           can_finish_proposal(row.id_estado_inversion.codigo) &&

src/app/components/investment-proposals/investment-proposals.component.ts

@@ -43,6 +43,9 @@ export class InvestmentProposalsComponent implements OnInit {
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   role_number: any;
+  test: string;
+  userList: any;
+  reviewProposal: { id_inversion: number; step: string; comentario: any };
 
   constructor(
     private catalogService: CatalogsService,
@@ -220,7 +223,7 @@ export class InvestmentProposalsComponent implements OnInit {
     }
   }
 
-  can_upload_payment(status: string) {
+  can_review_payment(status: string) {
     if (status == "COMPR") {
       return true;
     } else {
@@ -228,6 +231,13 @@ export class InvestmentProposalsComponent implements OnInit {
     }
   }
 
+  can_upload_payment(status: string) {
+    if (status == "COMPR") {
+      return true;
+    } else {
+      return false;
+    }
+  }
   can_finish_proposal(status: string) {
     if (status == "LIQUI") {
       return true;
@@ -237,8 +247,21 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   sendToReview(investmentProposalID: number, investmentCode: string) {
+    this.investmentsService
+      .getAvailableUsers(investmentProposalID)
+      .subscribe(res => {
+        this.userList = res["usuarios_next"];
+        this.test = "";
+
+        if (this.userList.length > 0) {
+          for (let i = 0; i < this.userList.length; i++) {
+            this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='${this.userList[i]}' name='users' value='${this.userList[i]}'><label class='form-check-label' for='${this.userList[i]}'>${this.userList[i]}</label></div>`;
+          }
+        }
+      });
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
+      Swal.fire({
         title: `<h3>Enviar a revisión propuesta de inversión ${investmentCode}</h3>`,
         icon: "info",
         html: `<p style="text-align:left;">Comentario:</p>`,
@@ -247,95 +270,163 @@ export class InvestmentProposalsComponent implements OnInit {
         confirmButtonText: "Enviar propuesta",
         cancelButtonText: "Cancelar",
         showLoaderOnConfirm: true,
-        // inputValidator: value => {
-        //   if (!value) {
-        //     return "Debe ingresar un comentario";
-        //   }
-        // }
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
 
         preConfirm: comentario => {
-          let reviewProposal = {
+          this.reviewProposal = {
             id_inversion: investmentProposalID,
             step: "next",
             comentario: comentario
           };
-
-          this.investmentsService
-            .sendReviewProposalInvestment(reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        Swal.fire({
+          title: `<h3>Enviar a revisión propuesta de inversión ${investmentCode}</h3>`,
+          icon: "info",
+          html: `${this.test}`,
+          confirmButtonText: "Siguiente",
+          showCancelButton: true,
+          cancelButtonText: "Cancelar",
+          showLoaderOnConfirm: true,
+
+          preConfirm: () => {
+            let array = [];
+
+            for (let i = 0; i < this.userList.length; i++) {
+              let html_input: HTMLInputElement = document.getElementById(
+                this.userList[i]
+              ) as HTMLInputElement;
+              let html_value: string = html_input.value;
+              if (html_input.checked == true) {
+                array.push(html_value);
+              }
+            }
+
+            this.reviewProposal["notificar"] = array.toString();
+
+            this.investmentsService
+              .sendReviewProposalInvestment(this.reviewProposal)
+              .subscribe(
+                success => {
+                  if (success) {
+                    Swal.fire({
+                      allowOutsideClick: false,
+                      icon: "success",
+                      showCancelButton: false,
+                      title: "Exito",
+                      confirmButtonText:
+                        "La propuesta ha sido enviada a revisión"
+                    }).then(result => {
+                      Swal.close();
+                      window.location.reload();
+                    });
+                  }
+                },
+                err => {
                   Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido enviada a revisión"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.reload();
+                    icon: "error",
+                    title: "Error al guardar",
+                    text: err.message
                   });
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
-              }
-            );
-        },
-        allowOutsideClick: () => !Swal.isLoading()
+              );
+          }
+        });
+        //window.location.reload();
       });
     })();
   }
 
   //Enviar a revision la propuesta de inversion
   finishProposal(investmentProposalID: number, investmentCode: string) {
+    this.investmentsService
+      .getAvailableUsers(investmentProposalID)
+      .subscribe(res => {
+        this.userList = res["usuarios_next"];
+        this.test = "";
+
+        if (this.userList.length > 0) {
+          for (let i = 0; i < this.userList.length; i++) {
+            this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='${this.userList[i]}' name='users' value='${this.userList[i]}'><label class='form-check-label' for='${this.userList[i]}'>${this.userList[i]}</label></div>`;
+          }
+        }
+      });
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
+      Swal.fire({
         title: `<h3>Finalizar propuesta de inversión: ${investmentCode}</h3>`,
         icon: "info",
         input: "textarea",
         html: `<p style="text-align:left;">Comentario:</p>`,
         showCancelButton: true,
-        confirmButtonText: "Finalizar",
+        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
-
         preConfirm: comentario => {
-          let reviewProposal = {
+          this.reviewProposal = {
             id_inversion: investmentProposalID,
             step: "next",
             comentario: comentario
           };
-
-          this.investmentsService
-            .sendReviewProposalInvestment(reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        Swal.fire({
+          title: `<h3>Finalizar propuesta de inversión ${investmentCode}</h3>`,
+          icon: "info",
+          html: `${this.test}`,
+          confirmButtonText: "Enviar a revision",
+          showCancelButton: true,
+          cancelButtonText: "Cancelar",
+          showLoaderOnConfirm: true,
+
+          preConfirm: () => {
+            let array = [];
+
+            for (let i = 0; i < this.userList.length; i++) {
+              let html_input: HTMLInputElement = document.getElementById(
+                this.userList[i]
+              ) as HTMLInputElement;
+              let html_value: string = html_input.value;
+              if (html_input.checked == true) {
+                array.push(html_value);
+              }
+            }
+
+            this.reviewProposal["notificar"] = array.toString();
+
+            this.investmentsService
+              .sendReviewProposalInvestment(this.reviewProposal)
+              .subscribe(
+                success => {
+                  if (success) {
+                    Swal.fire({
+                      allowOutsideClick: false,
+                      icon: "success",
+                      showCancelButton: false,
+                      title: "Exito",
+                      confirmButtonText: "La propuesta ha sido finalizada"
+                    }).then(result => {
+                      Swal.close();
+                      window.location.reload();
+                    });
+                  }
+                },
+                err => {
                   Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido finalizada"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.reload();
+                    icon: "error",
+                    title: "Error al guardar",
+                    text: err.message
                   });
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
-              }
-            );
-        }
+              );
+          }
+        });
+        //window.location.reload();
       });
     })();
   }

src/app/components/investment-proposals/payment-approval/payment-approval.component.html

@@ -0,0 +1,156 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/investment-proposals']">
+                  Propuestas de inversión
+                </a>
+              </li>
+              <li class="breadcrumb-item">Aprobar</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <br />
+    </div>
+    <br />
+    <div class="row justify-content-center">
+      <div class="col-12">
+        <div class="align-container">
+          <div class="card borderless">
+            <div class="card-header card-header-icon card-header-rose">
+              <h4 class="card-title">
+                Resumen de la propuesta
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="align-container">
+                <ul class="timeline timeline-simple">
+                  <li class="timeline-inverted">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                      <div class="timeline-heading">
+                        <span class="badge badge-success"
+                          >Información general</span
+                        >
+                      </div>
+                      <div class="timeline-body">
+                        <div class="row">
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Asunto:</h4>
+                            <div class="field">
+                              {{ subject }}
+                            </div>
+                          </div>
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Nombre:</h4>
+                            <div class="field">
+                              {{ investmentName }}
+                            </div>
+                          </div>
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Casa:</h4>
+                            <div class="field">
+                              {{ financials }}
+                            </div>
+                          </div>
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Base:</h4>
+                            <div class="field">
+                              {{ base_types }}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li class="timeline-inverted">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                      <div class="timeline-heading">
+                        <span class="badge badge-warning">Instrumento</span>
+                        <ng-template instrument-host></ng-template>
+                      </div>
+                    </div>
+                  </li>
+
+                  <li class="timeline-inverted">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                      <div class="timeline-heading">
+                        <span class="badge badge-primary"
+                          >Información del pago</span
+                        >
+                      </div>
+                      <div class="timeline-body">
+                        <div class="row">
+                          <div class="col-sm-6">
+                            <h4>Código de la propuesta de inversión:</h4>
+                            <div class="field">{{ codigo_inversion }}</div>
+                          </div>
+                          <div class="col-sm-6">
+                            <h4>Monto a pagar:</h4>
+                            <div class="field">
+                              $USD {{ monto | number: "1.2-4" }}
+                            </div>
+                          </div>
+                          <div class="col-sm-6">
+                            <h4>Código:</h4>
+                            <div class="field">{{ codigo }}</div>
+                          </div>
+                          <div class="col-sm-6">
+                            <h4>Tipo pago:</h4>
+                            <div class="field">{{ tipo_pago }}</div>
+                          </div>
+                          <div class="col-sm-6">
+                            <h4>Cuenta bancaria:</h4>
+                            <div class="field">{{ cuenta_bancaria }}</div>
+                          </div>
+
+                          <div class="col-sm-6">
+                            <h4>Fecha de vencimiento:</h4>
+                            <div class="field">{{ fecha_vencimiento }}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+
+                <br />
+
+                <div class="review-buttons">
+                  <button
+                    class="btn btn-danger "
+                    (click)="dismiss_proposal()"
+                    type="button"
+                  >
+                    Rechazar pago
+                  </button>
+
+                  <button
+                    class="btn btn-success "
+                    (click)="approve_proposal()"
+                    type="button"
+                  >
+                    Aprobar pago
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/investment-proposals/payment-approval/payment-approval.component.scss

@@ -0,0 +1,6 @@
+.review-buttons {
+  text-align: center;
+  button {
+    margin: 0 20px;
+  }
+}

src/app/components/investment-proposals/payment-approval/payment-approval.component.ts

@@ -0,0 +1,538 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  ViewChild,
+  ComponentFactoryResolver
+} from "@angular/core";
+import { Router, ActivatedRoute } from "@angular/router";
+import { InvestmentProposalForm } from "@app/models/investment-proposal-form";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { Instrument } from "@app/models/instrument";
+import { InvestmentProposalWorkflowService } from "@app/services/investment-proposal-workflow.service";
+import { InstrumentDirective } from "../instrument/instrument.directive";
+import { InstrumentComponent } from "../instrument/instrument.component";
+import { InstrumentsService } from "@app/services/instruments.service";
+import Swal from "sweetalert2";
+import { CatalogsService } from "@app/services/catalogs.service";
+import { InvestmentsService } from "@app/services/investments.service";
+
+@Component({
+  selector: "app-payment-approval",
+  templateUrl: "./payment-approval.component.html",
+  styleUrls: ["./payment-approval.component.scss"]
+})
+export class PaymentApprovalComponent implements OnInit {
+  title = "Aprobación de propuesta";
+  @Input() ads: Instrument[];
+  @Input() formData: InvestmentProposalForm;
+  @ViewChild(InstrumentDirective, { static: true })
+  adHost: InstrumentDirective;
+  isFormValid: boolean = false;
+  general: any;
+  instrument: any;
+  complement: any;
+  final: any;
+  workType: string;
+  form: any;
+  currentAdIndex = -1;
+  interval: any;
+  indexDynamicComponent: number;
+  investmentProposalID: string;
+  investmentExists;
+  state;
+  financials;
+  base_types;
+  countries;
+  companies;
+  rates;
+  revenues;
+  funds;
+  instrumentTypes;
+  markets;
+  emitters;
+  periodicities;
+  format_incomes;
+  payment_terms;
+  operations;
+  gInfo: any;
+  gInstrument: any;
+  gComplement: any;
+  subject: any;
+  investmentName: any;
+  comment: any;
+  justification: any;
+  reviewProposal: {};
+  monto: any;
+  codigo_inversion: any;
+  codigo: any;
+  tipo_pago: any;
+  cuenta_bancaria: any;
+  fecha_vencimiento: any;
+  userListPrevious: any;
+  generated_inputs_previous: any;
+  generated_inputs_next: any;
+  userListNext: any;
+
+  constructor(
+    private router: Router,
+
+    private formDataService: FormInvestmentProposalService,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private instrumentService: InvestmentProposalWorkflowService,
+    private loadInstrumentsService: InstrumentsService,
+    private catalogService: CatalogsService,
+    private route: ActivatedRoute,
+    private investmentService: InvestmentsService
+  ) {}
+
+  ngOnInit() {
+    //this.formDataService
+    this.ads = this.loadInstrumentsService.getInstruments();
+    this.route.params.subscribe(params => {
+      this.investmentProposalID = params["id"];
+    });
+    if (this.investmentProposalID == undefined)
+      this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
+
+    if (this.investmentProposalID != undefined) {
+      this.investmentExists = true;
+
+      this.investmentService
+        .getAvailableUsers(this.investmentProposalID)
+        .subscribe(res => {
+          this.userListPrevious = res["usuarios_previous"];
+          this.generated_inputs_previous = "";
+
+          this.userListNext = res["usuarios_next"];
+          this.generated_inputs_next = "";
+
+          if (this.userListPrevious.length > 0) {
+            for (let i = 0; i < this.userListPrevious.length; i++) {
+              this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i]}' name='users' value='${this.userListPrevious[i]}'><label class='form-check-label' for='previous-${this.userListPrevious[i]}'>${this.userListPrevious[i]}</label></div>`;
+            }
+          }
+          if (this.userListNext.length > 0) {
+            for (let i = 0; i < this.userListNext.length; i++) {
+              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+            }
+          }
+        });
+
+      this.investmentService
+        .getPaymentInfoProposalInvestment(this.investmentProposalID)
+        .subscribe(resp => {
+          this.monto = resp["result"]["monto"];
+          this.codigo_inversion =
+            resp["result"]["id_inversion"]["codigo_inversion"];
+          this.codigo = resp["result"]["codigo"];
+          this.tipo_pago = resp["result"]["id_tipo_pago"]["nombre"];
+          this.cuenta_bancaria = resp["result"]["id_cuenta_bancaria"]["nombre"];
+          this.fecha_vencimiento = resp["result"]["fecha_vencimiento"];
+        });
+
+      this.investmentService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(res => {
+          this.state = res["result"]["id_estado_inversion"]["codigo"];
+
+          this.gInfo = {
+            asunto: res["result"]["asunto"],
+            origenes_fondo:
+              res["result"]["id_origen_fondo"] == null
+                ? ""
+                : res["result"]["id_origen_fondo"]["id_origen_fondo"],
+            name: res["result"]["nombre_inversion"],
+            //date: "",
+            tipo_tasa: res["result"]["id_tipo_tasa"] || "",
+            tipo_renta:
+              res["result"]["id_tipo_renta"] == null
+                ? ""
+                : res["result"]["id_tipo_renta"]["id_tipo_renta"],
+            periodicidad:
+              res["result"]["id_periodicidad"] == null
+                ? ""
+                : res["result"]["id_periodicidad"]["id_periodicidad"],
+
+            instrumentos:
+              res["result"]["id_inversion_instrumento"]["id_tipo_instrumento"][
+                "codigo"
+              ],
+            base_anual:
+              res["result"]["id_tipo_base"] == null
+                ? ""
+                : res["result"]["id_tipo_base"]["id_tipo_base"],
+            casa:
+              res["result"]["id_entidad"] == null
+                ? ""
+                : res["result"]["id_entidad"]["id_entidad_financiera"],
+            formato_ingreso:
+              res["result"]["id_formato_ingreso"] == null
+                ? ""
+                : res["result"]["id_formato_ingreso"]["id_formato_ingreso"]
+          };
+
+          this.gInstrument =
+            res["result"]["id_inversion_instrumento"]["instrumento"];
+
+          this.gInstrument["id_inversion_instrumento"] =
+            res["result"]["id_inversion_instrumento"][
+              "id_inversion_instrumento"
+            ];
+
+          this.gComplement = {
+            tipo_mercado:
+              res["result"]["id_tipo_mercado"] == null
+                ? ""
+                : res["result"]["id_tipo_mercado"]["id_tipo_mercado"],
+            emisores:
+              res["result"]["id_tipo_emisor"] == null
+                ? ""
+                : res["result"]["id_tipo_emisor"]["id_tipo_emisor"],
+            empresa:
+              res["result"]["id_empresa"] == null
+                ? ""
+                : res["result"]["id_empresa"]["id_empresa"],
+            pais:
+              res["result"]["id_pais"] == null
+                ? ""
+                : res["result"]["id_pais"]["id_pais"],
+            plazo:
+              res["result"]["id_plazo"] == null
+                ? ""
+                : res["result"]["id_plazo"]["id_plazo"],
+            operaciones:
+              res["result"]["id_tipo_operacion"] == null
+                ? ""
+                : res["result"]["id_tipo_operacion"]["id_tipo_operacion"],
+            comentarios: res["result"]["comentario"],
+            justificacion: res["result"]["justificacion"]
+          };
+          this.formDataService.setGeneralInfo(this.gInfo);
+
+          this.formDataService.setWork(this.gInstrument);
+
+          this.formDataService.setComplementInfo(this.gComplement);
+
+          this.general = this.formDataService.getGeneralInfo();
+          this.instrument = this.formDataService.getWork();
+          this.complement = this.formDataService.getComplementInfo();
+          this.formData = this.formDataService.getFormData();
+
+          this.formData.instrumentos;
+
+          this.indexDynamicComponent = this.ads.findIndex(
+            x => x.data.key == this.formData.instrumentos
+          );
+          if (this.indexDynamicComponent >= 0) {
+            this.loadComponent();
+          } else {
+            console.log("No existe el componente");
+          }
+          if (this.general != undefined) {
+            this.subject = this.general.asunto;
+            this.investmentName = this.general.name;
+            this.comment = this.complement.comentarios;
+            this.justification = this.complement.justificacion;
+
+            this.catalogService.getFinancialEntities().subscribe(res => {
+              this.financials = res.find(
+                e => e.id_entidad_financiera == this.general.casa
+              );
+              this.financials =
+                this.financials != undefined ? this.financials.nombre : "-";
+            });
+
+            this.catalogService.getBaseTypes().subscribe(res => {
+              this.base_types = res.find(
+                e => e.id_tipo_base == this.general.base_anual
+              );
+              this.base_types =
+                this.base_types != undefined
+                  ? ` ${this.base_types.tipo_base} / ${this.base_types.tipo_base_dias}`
+                  : "-";
+            });
+
+            this.catalogService.getCountries().subscribe(res => {
+              this.countries = res.find(e => e.id_pais == this.complement.pais);
+              this.countries =
+                this.countries != undefined ? this.countries.nombre : "-";
+            });
+            this.catalogService.getCompanies().subscribe(res => {
+              this.companies = res.find(
+                e => e.id_empresa == this.complement.empresa
+              );
+              this.companies =
+                this.companies != undefined ? this.companies.nombre : "-";
+            });
+            this.catalogService.getRateTypes().subscribe(res => {
+              this.rates = res.find(
+                e => e.id_tipo_tasa == this.general.tipo_tasa
+              );
+              this.rates = this.rates != undefined ? this.rates.nombre : "-";
+            });
+            this.catalogService.getRevenueTypes().subscribe(res => {
+              this.revenues = res.find(
+                e => e.id_tipo_renta == this.general.tipo_renta
+              );
+              this.revenues =
+                this.revenues != undefined ? this.revenues.nombre : "-";
+            });
+
+            this.catalogService.getFundsOrigins().subscribe(res => {
+              this.funds = res.find(
+                e => e.id_origen_fondo == this.general.origenes_fondo
+              );
+              this.funds = this.funds != undefined ? this.funds.nombre : "-";
+            });
+            this.catalogService.getInstrumentTypes().subscribe(res => {
+              this.instrumentTypes = res.find(
+                e => e.codigo == this.general.instrumentos
+              );
+              this.instrumentTypes =
+                this.instrumentTypes != undefined
+                  ? this.instrumentTypes.nombre
+                  : "-";
+            });
+
+            this.catalogService.getMarketTypes().subscribe(res => {
+              this.markets = res.find(
+                e => e.id_tipo_mercado == this.complement.tipo_mercado
+              );
+              this.markets =
+                this.markets != undefined ? this.markets.nombre : "-";
+            });
+            this.catalogService.getEmitterTypes().subscribe(res => {
+              this.emitters = res.find(
+                e => e.id_tipo_emisor == this.complement.emisores
+              );
+              this.emitters =
+                this.emitters != undefined ? this.emitters.nombre : "-";
+            });
+            this.catalogService.getPeriodicities().subscribe(res => {
+              this.periodicities = res.find(
+                e => e.id_periodicidad == this.general.periodicidad
+              );
+              this.periodicities =
+                this.periodicities != undefined
+                  ? this.periodicities.nombre
+                  : "-";
+            });
+
+            this.catalogService.getPaymentTerms().subscribe(res => {
+              this.payment_terms = res.find(
+                e => e.id_plazo == this.complement.plazo
+              );
+              this.payment_terms =
+                this.payment_terms != undefined
+                  ? this.payment_terms.nombre
+                  : "-";
+            });
+            this.catalogService.getOperationTypes().subscribe(res => {
+              this.operations = res.find(
+                e => e.id_tipo_operacion == this.complement.operaciones
+              );
+              this.operations =
+                this.operations != undefined ? this.operations.nombre : "-";
+            });
+            //getIncomeFormat
+            this.catalogService.getIncomeFormat().subscribe(res => {
+              this.format_incomes = res.find(
+                e => e.id_formato_ingreso == this.general.formato_ingreso
+              );
+              this.format_incomes =
+                this.format_incomes != undefined
+                  ? this.format_incomes.nombre
+                  : "-";
+            });
+          }
+        });
+    } else {
+      this.investmentExists = false;
+    }
+  }
+
+  loadComponent() {
+    const adItem = this.ads[this.indexDynamicComponent];
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
+      adItem.component
+    );
+
+    const viewContainerRef = this.adHost.viewContainerRef;
+    viewContainerRef.clear();
+
+    const componentRef = viewContainerRef.createComponent(componentFactory);
+    (<InstrumentComponent>componentRef.instance).data = adItem.data;
+    (<InstrumentComponent>componentRef.instance).summary = true;
+  }
+
+  approve_proposal() {
+    this.reviewProposal = undefined;
+    (async () => {
+      Swal.fire({
+        title: `<h3>Revisión del pago de inversión</h3>`,
+        icon: "info",
+        html: `<p style="text-align:left;">Comentario:</p>`,
+        input: "textarea",
+        showCancelButton: true,
+        confirmButtonText: "Siguiente",
+        cancelButtonText: "Cancelar",
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
+
+        preConfirm: comentario => {
+          this.reviewProposal = {
+            id_inversion: this.investmentProposalID,
+            step: "next",
+            comentario: comentario
+          };
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        if (result.value) {
+          Swal.fire({
+            title: `<h3>Revisión del pago de inversión</h3>`,
+            icon: "info",
+            html: `${this.generated_inputs_next}`,
+            confirmButtonText: "Aprobar propuesta",
+            showCancelButton: true,
+            cancelButtonText: "Cancelar",
+            showLoaderOnConfirm: true,
+
+            preConfirm: () => {
+              let array = [];
+
+              for (let i = 0; i < this.userListNext.length; i++) {
+                let html_input: HTMLInputElement = document.getElementById(
+                  "next-" + this.userListNext[i]
+                ) as HTMLInputElement;
+                let html_value: string = html_input.value;
+                if (html_input.checked == true) {
+                  array.push(html_value);
+                }
+              }
+
+              this.reviewProposal["notificar"] = array.toString();
+
+              this.investmentService
+                .sendReviewProposalInvestment(this.reviewProposal)
+                .subscribe(
+                  success => {
+                    if (success) {
+                      Swal.fire({
+                        allowOutsideClick: false,
+                        icon: "success",
+                        showCancelButton: false,
+                        title: "Exito",
+                        confirmButtonText: "La propuesta ha sido aprobada"
+                      }).then(result => {
+                        Swal.close();
+                        window.location.href = "#/investment-proposals";
+                      });
+                    }
+                  },
+                  err => {
+                    Swal.fire({
+                      icon: "error",
+                      title: "Error al guardar",
+                      text: err.message
+                    });
+                  }
+                );
+            }
+          });
+        }
+      });
+    })();
+  }
+
+  dismiss_proposal() {
+    this.reviewProposal = undefined;
+    (async () => {
+      Swal.fire({
+        title: `<h3>Revisión propuesta de inversión</h3>`,
+        icon: "info",
+        html: `<p style="text-align:left;">Comentario:</p>`,
+        input: "textarea",
+        showCancelButton: true,
+        confirmButtonColor: "#C82333",
+        confirmButtonText: "Siguiente",
+        cancelButtonText: "Cancelar",
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
+
+        preConfirm: comentario => {
+          this.reviewProposal = {
+            id_inversion: this.investmentProposalID,
+            step: "next",
+            comentario: comentario
+          };
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        if (result.value) {
+          Swal.fire({
+            title: `<h3>Revisión propuesta de inversión</h3>`,
+            icon: "info",
+            html: `${this.generated_inputs_previous}`,
+            confirmButtonText: "Rechazar propuesta",
+            showCancelButton: true,
+            confirmButtonColor: "#C82333",
+            cancelButtonText: "Cancelar",
+            showLoaderOnConfirm: true,
+
+            preConfirm: () => {
+              let array = [];
+
+              for (let i = 0; i < this.userListPrevious.length; i++) {
+                let html_input: HTMLInputElement = document.getElementById(
+                  "previous-" + this.userListPrevious[i]
+                ) as HTMLInputElement;
+                let html_value: string = html_input.value;
+                if (html_input.checked == true) {
+                  array.push(html_value);
+                }
+              }
+
+              this.reviewProposal["notificar"] = array.toString();
+
+              this.investmentService
+                .sendReviewProposalInvestment(this.reviewProposal)
+                .subscribe(
+                  success => {
+                    if (success) {
+                      Swal.fire({
+                        allowOutsideClick: false,
+                        icon: "success",
+                        showCancelButton: false,
+                        title: "Exito",
+                        confirmButtonText: "La propuesta ha sido rechazada"
+                      }).then(result => {
+                        Swal.close();
+                        window.location.href = "#/investment-proposals";
+                      });
+                    }
+                  },
+                  err => {
+                    Swal.fire({
+                      icon: "error",
+                      title: "Error al guardar",
+                      text: err.message
+                    });
+                  }
+                );
+            }
+          });
+        }
+      });
+    })();
+  }
+}

src/app/components/investment-proposals/payment-info/payment-info.component.ts

@@ -71,6 +71,10 @@ export class PaymentInfoComponent implements OnInit {
   accounts: any;
   paymentObject: Object;
   inversionAmount: any;
+  reviewProposal: any;
+  generated_inputs_next: any;
+  userListNext: any;
+  investmentService: any;
 
   constructor(
     private router: Router,
@@ -88,6 +92,17 @@ export class PaymentInfoComponent implements OnInit {
     if (this.investmentProposalID == undefined)
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
+    this.investmentsService
+      .getAvailableUsers(this.investmentProposalID)
+      .subscribe(res => {
+        this.userListNext = res["usuarios_next"];
+        this.generated_inputs_next = "";
+        if (this.userListNext.length > 0) {
+          for (let i = 0; i < this.userListNext.length; i++) {
+            this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+          }
+        }
+      });
     this.investmentsService
       .getProposalInvestment(this.investmentProposalID)
       .subscribe(
@@ -169,68 +184,113 @@ export class PaymentInfoComponent implements OnInit {
       return false;
     }
 
-    Swal.fire({
-      allowOutsideClick: false,
-      icon: "info",
-      text: "Espere por favor..."
-    });
+    this.reviewProposal = undefined;
+    (async () => {
+      Swal.fire({
+        title: `<h3>Enviar información de pago</h3>`,
+        icon: "info",
+        html: `<p style="text-align:left;">Comentario:</p>`,
+        input: "textarea",
+        showCancelButton: true,
+        confirmButtonText: "Siguiente",
+        cancelButtonText: "Cancelar",
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
 
-    this.paymentProposal = {
-      id_inversion: this.investmentProposalID,
-      step: "next",
-      comentario: "Informacion de pago"
-    };
-
-    this.paymentObject = {
-      monto: this.investmentProposalForm.value.monto,
-      id_tipo_pago: this.investmentProposalForm.value.tipo_pago,
-      id_cuenta_bancaria: this.investmentProposalForm.value.cuenta_bancaria,
-      //fecha_pago: this.investmentProposalForm.value.fecha_pago.singleDate.formatted,
-      fecha_vencimiento: this.investmentProposalForm.value.fecha_vencimiento
-        .singleDate.formatted,
-      id_inversion: this.investmentProposalID
-    };
+        preConfirm: comentario => {
+          this.reviewProposal = {
+            id_inversion: this.investmentProposalID,
+            step: "next",
+            comentario: comentario
+          };
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        if (result.value) {
+          Swal.fire({
+            title: `<h3>Enviar información de pago</h3>`,
+            icon: "info",
+            html: `${this.generated_inputs_next}`,
+            confirmButtonText: "Enviar información",
+            showCancelButton: true,
+            cancelButtonText: "Cancelar",
+            showLoaderOnConfirm: true,
 
-    this.investmentsService
-      .sendPaymentInfoProposalInvestment(
-        this.investmentProposalID,
-        this.paymentObject
-      )
-      .subscribe(
-        success => {
-          this.investmentsService
-            .sendProposalInvestmentToNextStep(this.paymentProposal)
-            .subscribe(
-              success => {
-                if (success) {
-                  Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La requisicion de pago ha sido generada"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.href = "#/investment-proposals";
-                  });
+            preConfirm: () => {
+              let array = [];
+
+              for (let i = 0; i < this.userListNext.length; i++) {
+                let html_input: HTMLInputElement = document.getElementById(
+                  "next-" + this.userListNext[i]
+                ) as HTMLInputElement;
+                let html_value: string = html_input.value;
+                if (html_input.checked == true) {
+                  array.push(html_value);
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
               }
-            );
-        },
-        err => {
-          Swal.fire({
-            icon: "error",
-            title: "Error al guardar",
-            text: err.message
+
+              this.reviewProposal["notificar"] = array.toString();
+              this.paymentObject = {
+                monto: this.investmentProposalForm.value.monto,
+                id_tipo_pago: this.investmentProposalForm.value.tipo_pago,
+                id_cuenta_bancaria: this.investmentProposalForm.value
+                  .cuenta_bancaria,
+                //fecha_pago: this.investmentProposalForm.value.fecha_pago.singleDate.formatted,
+                fecha_vencimiento: this.investmentProposalForm.value
+                  .fecha_vencimiento.singleDate.formatted,
+                id_inversion: this.investmentProposalID
+              };
+
+              this.investmentsService
+                .sendPaymentInfoProposalInvestment(
+                  this.investmentProposalID,
+                  this.paymentObject
+                )
+                .subscribe(
+                  success => {
+                    this.investmentsService
+                      .sendProposalInvestmentToNextStep(this.reviewProposal)
+                      .subscribe(
+                        success => {
+                          if (success) {
+                            Swal.fire({
+                              allowOutsideClick: false,
+                              icon: "success",
+                              showCancelButton: false,
+                              title: "Exito",
+                              confirmButtonText:
+                                "La requisicion de pago ha sido generada"
+                            }).then(result => {
+                              Swal.close();
+                              window.location.href = "#/investment-proposals";
+                            });
+                          }
+                        },
+                        err => {
+                          Swal.fire({
+                            icon: "error",
+                            title: "Error al guardar",
+                            text: err.message
+                          });
+                        }
+                      );
+                  },
+                  err => {
+                    Swal.fire({
+                      icon: "error",
+                      title: "Error al guardar",
+                      text: err.message
+                    });
+                  }
+                );
+            }
           });
         }
-      );
+      });
+    })();
   }
 }

src/app/components/investment-proposals/payment-requirement/payment-requirement.component.ts

@@ -70,6 +70,10 @@ export class PaymentRequirementComponent implements OnInit {
   investmentProposalForm: FormGroup;
   submitted: boolean = false;
   paymentObject: Object;
+  userListPrevious: any;
+  generated_inputs_previous: string;
+  userListNext: any;
+  generated_inputs_next: string;
 
   constructor(
     private http: HttpClient,
@@ -95,6 +99,28 @@ export class PaymentRequirementComponent implements OnInit {
     if (this.investmentProposalID == undefined)
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
+    this.investmentService
+      .getAvailableUsers(this.investmentProposalID)
+      .subscribe(res => {
+        console.log(res);
+        this.userListPrevious = res["usuarios_previous"];
+        this.generated_inputs_previous = "";
+
+        this.userListNext = res["usuarios_next"];
+        this.generated_inputs_next = "";
+
+        if (this.userListPrevious.length > 0) {
+          for (let i = 0; i < this.userListPrevious.length; i++) {
+            this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i]}' name='users' value='${this.userListPrevious[i]}'><label class='form-check-label' for='previous-${this.userListPrevious[i]}'>${this.userListPrevious[i]}</label></div>`;
+          }
+        }
+        if (this.userListNext.length > 0) {
+          for (let i = 0; i < this.userListNext.length; i++) {
+            this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+          }
+        }
+      });
+
     this.investmentService
       .getPaymentInfoProposalInvestment(this.investmentProposalID)
       .subscribe(resp => {

src/app/components/investment-proposals/proposal-detail/proposal-detail.component.ts

@@ -128,6 +128,7 @@ export class InvestmentProposalDetailComponent implements OnInit {
               res["result"]["id_tipo_base"] == null
                 ? ""
                 : res["result"]["id_tipo_base"]["id_tipo_base"],
+
             casa:
               res["result"]["id_entidad"] == null
                 ? ""
@@ -214,7 +215,7 @@ export class InvestmentProposalDetailComponent implements OnInit {
               );
               this.base_types =
                 this.base_types != undefined
-                  ? ` ${this.base_types.tipo_base} / ${this.base_types.tipo_base_dias}`
+                  ? `${this.base_types.tipo_base_dias}  / ${this.base_types.tipo_base}`
                   : "-";
             });
 

src/app/components/investment-proposals/result/result.component.ts

@@ -63,6 +63,8 @@ export class ResultComponent implements OnInit {
   userRole: any;
   state: string = "";
   submitted: boolean = false;
+  userList: any;
+  test: any;
 
   constructor(
     private router: Router,
@@ -305,53 +307,97 @@ export class ResultComponent implements OnInit {
 
   //Enviar a revision la propuesta de inversion
   sendToReview() {
+    this.investmentService
+      .getAvailableUsers(this.investmentProposalID)
+      .subscribe(res => {
+        this.userList = res["usuarios_next"];
+        this.test = "";
+
+        if (this.userList.length > 0) {
+          for (let i = 0; i < this.userList.length; i++) {
+            this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='${this.userList[i]}' name='users' value='${this.userList[i]}'><label class='form-check-label' for='${this.userList[i]}'>${this.userList[i]}</label></div>`;
+          }
+        }
+      });
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
-        title: "<h3>Enviar a revisión propuesta de inversión</h3>",
+      Swal.fire({
+        title: `<h3>Enviar a revisión propuesta de inversión</h3>`,
         icon: "info",
         html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
         showCancelButton: true,
         confirmButtonText: "Enviar propuesta",
         cancelButtonText: "Cancelar",
-        // inputValidator: value => {
-        //   if (!value) {
-        //     return "Debe ingresar un comentario";
-        //   }
-        // }
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
+
         preConfirm: comentario => {
           this.reviewProposal = {
             id_inversion: this.investmentProposalID,
             step: "next",
             comentario: comentario
           };
-
-          this.investmentService
-            .sendReviewProposalInvestment(this.reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        Swal.fire({
+          title: `<h3>Enviar a revisión propuesta de inversión</h3>`,
+          icon: "info",
+          html: `${this.test}`,
+          confirmButtonText: "Siguiente",
+          showCancelButton: true,
+          cancelButtonText: "Cancelar",
+          showLoaderOnConfirm: true,
+
+          preConfirm: () => {
+            let array = [];
+
+            for (let i = 0; i < this.userList.length; i++) {
+              let html_input: HTMLInputElement = document.getElementById(
+                this.userList[i]
+              ) as HTMLInputElement;
+              let html_value: string = html_input.value;
+              if (html_input.checked == true) {
+                array.push(html_value);
+              }
+            }
+
+            this.reviewProposal["notificar"] = array.toString();
+
+            this.investmentService
+              .sendReviewProposalInvestment(this.reviewProposal)
+              .subscribe(
+                success => {
+                  if (success) {
+                    Swal.fire({
+                      allowOutsideClick: false,
+                      icon: "success",
+                      showCancelButton: false,
+                      title: "Exito",
+                      confirmButtonText:
+                        "La propuesta ha sido enviada a revisión"
+                    }).then(result => {
+                      Swal.close();
+                      window.location.reload();
+                    });
+                  }
+                },
+                err => {
                   Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido enviada a revisión"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.href = "#/investment-proposals";
+                    icon: "error",
+                    title: "Error al guardar",
+                    text: err.message
                   });
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
-              }
-            );
-        }
+              );
+          }
+        });
+        //window.location.reload();
       });
     })();
   }
@@ -404,53 +450,94 @@ export class ResultComponent implements OnInit {
 
   //Enviar a revision la propuesta de inversion
   finishProposal() {
+    this.investmentService
+      .getAvailableUsers(this.investmentProposalID)
+      .subscribe(res => {
+        this.userList = res["usuarios_next"];
+        this.test = "";
+
+        if (this.userList.length > 0) {
+          for (let i = 0; i < this.userList.length; i++) {
+            this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='${this.userList[i]}' name='users' value='${this.userList[i]}'><label class='form-check-label' for='${this.userList[i]}'>${this.userList[i]}</label></div>`;
+          }
+        }
+      });
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
-        title: "<h3>Finalizar propuesta de inversión</h3>",
+      Swal.fire({
+        title: `<h3>Finalizar propuesta de inversión:</h3>`,
         icon: "info",
-        html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
+        html: `<p style="text-align:left;">Comentario:</p>`,
         showCancelButton: true,
-        confirmButtonText: "Finalizar",
+        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
-        // inputValidator: value => {
-        //   if (!value) {
-        //     return "Debe ingresar un comentario";
-        //   }
-        // }
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
         preConfirm: comentario => {
           this.reviewProposal = {
             id_inversion: this.investmentProposalID,
             step: "next",
             comentario: comentario
           };
-
-          this.investmentService
-            .sendReviewProposalInvestment(this.reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        Swal.fire({
+          title: `<h3>Finalizar propuesta de inversión</h3>`,
+          icon: "info",
+          html: `${this.test}`,
+          confirmButtonText: "Enviar a revision",
+          showCancelButton: true,
+          cancelButtonText: "Cancelar",
+          showLoaderOnConfirm: true,
+
+          preConfirm: () => {
+            let array = [];
+
+            for (let i = 0; i < this.userList.length; i++) {
+              let html_input: HTMLInputElement = document.getElementById(
+                this.userList[i]
+              ) as HTMLInputElement;
+              let html_value: string = html_input.value;
+              if (html_input.checked == true) {
+                array.push(html_value);
+              }
+            }
+
+            this.reviewProposal["notificar"] = array.toString();
+
+            this.investmentService
+              .sendReviewProposalInvestment(this.reviewProposal)
+              .subscribe(
+                success => {
+                  if (success) {
+                    Swal.fire({
+                      allowOutsideClick: false,
+                      icon: "success",
+                      showCancelButton: false,
+                      title: "Exito",
+                      confirmButtonText: "La propuesta ha sido finalizada"
+                    }).then(result => {
+                      Swal.close();
+                      window.location.reload();
+                    });
+                  }
+                },
+                err => {
                   Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido finalizada"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.href = "#/investment-proposals";
+                    icon: "error",
+                    title: "Error al guardar",
+                    text: err.message
                   });
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
-              }
-            );
-        }
+              );
+          }
+        });
+        //window.location.reload();
       });
     })();
   }

src/app/components/investment-proposals/review/review.component.ts

@@ -63,6 +63,12 @@ export class InvestmentProposalReviewComponent implements OnInit {
   comment: any;
   justification: any;
   reviewProposal: {};
+  userList: any;
+  generated_inputs: any;
+  userListPrevious: any;
+  generated_inputs_previous: string;
+  userListNext: any;
+  generated_inputs_next: string;
 
   constructor(
     private router: Router,
@@ -87,6 +93,28 @@ export class InvestmentProposalReviewComponent implements OnInit {
 
     if (this.investmentProposalID != undefined) {
       this.investmentExists = true;
+
+      this.investmentService
+        .getAvailableUsers(this.investmentProposalID)
+        .subscribe(res => {
+          this.userListPrevious = res["usuarios_previous"];
+          this.generated_inputs_previous = "";
+
+          this.userListNext = res["usuarios_next"];
+          this.generated_inputs_next = "";
+
+          if (this.userListPrevious.length > 0) {
+            for (let i = 0; i < this.userListPrevious.length; i++) {
+              this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i]}' name='users' value='${this.userListPrevious[i]}'><label class='form-check-label' for='previous-${this.userListPrevious[i]}'>${this.userListPrevious[i]}</label></div>`;
+            }
+          }
+          if (this.userListNext.length > 0) {
+            for (let i = 0; i < this.userListNext.length; i++) {
+              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+            }
+          }
+        });
+
       this.investmentService
         .getProposalInvestment(this.investmentProposalID)
         .subscribe(res => {
@@ -323,105 +351,170 @@ export class InvestmentProposalReviewComponent implements OnInit {
   }
 
   approve_proposal() {
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
-        title: "<h3>Revisión propuesta de inversión</h3>",
+      Swal.fire({
+        title: `<h3>Revisión propuesta de inversión</h3>`,
         icon: "info",
         html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
         showCancelButton: true,
-        confirmButtonText: "Aprobar propuesta",
+        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
-        // inputValidator: value => {
-        //   if (!value) {
-        //     return "Debe ingresar un comentario";
-        //   }
-        // }
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
+
         preConfirm: comentario => {
           this.reviewProposal = {
             id_inversion: this.investmentProposalID,
             step: "next",
             comentario: comentario
           };
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        if (result.value) {
+          Swal.fire({
+            title: `<h3>Revisión propuesta de inversión</h3>`,
+            icon: "info",
+            html: `${this.generated_inputs_next}`,
+            confirmButtonText: "Aprobar propuesta",
+            showCancelButton: true,
+            cancelButtonText: "Cancelar",
+            showLoaderOnConfirm: true,
+
+            preConfirm: () => {
+              let array = [];
 
-          this.investmentService
-            .sendProposalInvestmentToNextStep(this.reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
-                  Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido aprobada"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.href = "#/investment-proposals";
-                  });
+              for (let i = 0; i < this.userListNext.length; i++) {
+                let html_input: HTMLInputElement = document.getElementById(
+                  "next-" + this.userListNext[i]
+                ) as HTMLInputElement;
+                let html_value: string = html_input.value;
+                if (html_input.checked == true) {
+                  array.push(html_value);
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
               }
-            );
+
+              this.reviewProposal["notificar"] = array.toString();
+
+              this.investmentService
+                .sendReviewProposalInvestment(this.reviewProposal)
+                .subscribe(
+                  success => {
+                    if (success) {
+                      Swal.fire({
+                        allowOutsideClick: false,
+                        icon: "success",
+                        showCancelButton: false,
+                        title: "Exito",
+                        confirmButtonText: "La propuesta ha sido aprobada"
+                      }).then(result => {
+                        Swal.close();
+                        window.location.href = "#/investment-proposals";
+                      });
+                    }
+                  },
+                  err => {
+                    Swal.fire({
+                      icon: "error",
+                      title: "Error al guardar",
+                      text: err.message
+                    });
+                  }
+                );
+            }
+          });
         }
       });
     })();
   }
 
   dismiss_proposal() {
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
-        title: "<h3>Revisión propuesta de inversión</h3>",
+      Swal.fire({
+        title: `<h3>Revisión propuesta de inversión</h3>`,
         icon: "info",
         html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
         showCancelButton: true,
-        confirmButtonText: "Rechazar propuesta",
         confirmButtonColor: "#C82333",
+        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
-        // inputValidator: value => {
-        //   if (!value) {
-        //     return "Debe ingresar un comentario";
-        //   }
-        // }
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
+
         preConfirm: comentario => {
           this.reviewProposal = {
             id_inversion: this.investmentProposalID,
-            step: "previous",
+            step: "next",
             comentario: comentario
           };
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        if (result.value) {
+          Swal.fire({
+            title: `<h3>Revisión propuesta de inversión</h3>`,
+            icon: "info",
+            html: `${this.generated_inputs_previous}`,
+            confirmButtonText: "Rechazar propuesta",
+            showCancelButton: true,
+            confirmButtonColor: "#C82333",
+            cancelButtonText: "Cancelar",
+            showLoaderOnConfirm: true,
+
+            preConfirm: () => {
+              let array = [];
 
-          this.investmentService
-            .sendProposalInvestmentToNextStep(this.reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
-                  Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "warning",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido rechazada"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.href = "#/investment-proposals";
-                  });
+              for (let i = 0; i < this.userListPrevious.length; i++) {
+                let html_input: HTMLInputElement = document.getElementById(
+                  "previous-" + this.userListPrevious[i]
+                ) as HTMLInputElement;
+                let html_value: string = html_input.value;
+                if (html_input.checked == true) {
+                  array.push(html_value);
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error en el servidor",
-                  text: err.message
-                });
               }
-            );
+
+              this.reviewProposal["notificar"] = array.toString();
+
+              this.investmentService
+                .sendReviewProposalInvestment(this.reviewProposal)
+                .subscribe(
+                  success => {
+                    if (success) {
+                      Swal.fire({
+                        allowOutsideClick: false,
+                        icon: "success",
+                        showCancelButton: false,
+                        title: "Exito",
+                        confirmButtonText: "La propuesta ha sido rechazada"
+                      }).then(result => {
+                        Swal.close();
+                        window.location.href = "#/investment-proposals";
+                      });
+                    }
+                  },
+                  err => {
+                    Swal.fire({
+                      icon: "error",
+                      title: "Error al guardar",
+                      text: err.message
+                    });
+                  }
+                );
+            }
+          });
         }
       });
     })();

src/app/components/investments/costs/vcn/vcn.costs.component.ts

@@ -108,6 +108,7 @@ export class VCNCostsComponent implements OnInit {
         .subscribe(
           res => {
             this.investment = res["result"];
+            console.log(this.investment);
             this.instrument_work =
               res["result"]["id_inversion_instrumento"]["instrumento"];
             this.instrument_exists = true;

src/app/components/investments/investments.component.ts

@@ -140,7 +140,6 @@ export class InvestmentsComponent implements OnInit {
           return false;
         }
         break;
-      case "CETE":
       case "DAP":
         return true;
         break;

src/app/layouts/admin/admin.module.ts

@@ -57,7 +57,7 @@ import { CETE } from "@app/components/instruments/cete/cete.component";
 import { VCN } from "@app/components/instruments/vcn/vcn.component";
 import { PBUR } from "@app/components/instruments/pbur/pbur.component";
 
-import { BonosComponent } from "@app/components/instruments/bonos/bonos.component";
+import { BONO } from "@app/components/instruments/bonos/bonos.component";
 import { DAP } from "@app/components/instruments/dap/dap.component";
 import { ANCComponent } from "@app/components/instruments/anc/anc.component";
 import { APNComponent } from "@app/components/instruments/apn/apn.component";
@@ -76,6 +76,7 @@ import { PBURCostsComponent } from "@app/components/investments/costs/pbur/pbur.
 import { IncomesComponent } from "@app/components/incomes/incomes.component";
 
 import { GeneralIncomeFormComponent } from "@app/components/incomes/general-form/general-form.component";
+import { PaymentApprovalComponent } from "@app/components/investment-proposals/payment-approval/payment-approval.component";
 
 // This array defines which "componentId" maps to which lazy-loaded module.
 
@@ -134,7 +135,7 @@ import { GeneralIncomeFormComponent } from "@app/components/incomes/general-form
     CETE,
     VCN,
     PBUR,
-    BonosComponent,
+    BONO,
     DAP,
     ANCComponent,
     APNComponent,
@@ -146,14 +147,15 @@ import { GeneralIncomeFormComponent } from "@app/components/incomes/general-form
     VCNCostsComponent,
     PBURCostsComponent,
     IncomesComponent,
-    GeneralIncomeFormComponent
+    GeneralIncomeFormComponent,
+    PaymentApprovalComponent
   ],
   entryComponents: [
     LETE,
     CETE,
     VCN,
     PBUR,
-    BonosComponent,
+    BONO,
     DAP,
     ANCComponent,
     APNComponent

src/app/layouts/admin/admin.routing.ts

@@ -30,6 +30,7 @@ import { VCNCostsComponent } from "@app/components/investments/costs/vcn/vcn.cos
 import { PBURCostsComponent } from "@app/components/investments/costs/pbur/pbur.costs.component";
 import { IncomesComponent } from "@app/components/incomes/incomes.component";
 import { GeneralIncomeFormComponent } from "@app/components/incomes/general-form/general-form.component";
+import { PaymentApprovalComponent } from "@app/components/investment-proposals/payment-approval/payment-approval.component";
 
 export const AdminLayoutRoutes: Routes = [
   {
@@ -179,6 +180,10 @@ export const AdminLayoutRoutes: Routes = [
     path: "investment-proposal/:id/approve",
     component: InvestmentProposalApproveComponent
   },
+  {
+    path: "investment-proposal/:id/payment-approval",
+    component: PaymentApprovalComponent
+  },
   {
     path: "investment-proposal/:id/change-history",
     component: ChangeHistoryComponent
@@ -212,7 +217,7 @@ export const AdminLayoutRoutes: Routes = [
     component: IncomesComponent
   },
   {
-    path: "investment-income/:instrument/:id",
+    path: "investment-income",
     component: GeneralIncomeFormComponent
   } /*
   {

src/app/services/incomes.service.ts

@@ -15,9 +15,11 @@ export class IncomesService {
   constructor(private http: HttpClient) {}
 
   // Obtener listado de propuestas de inversiones
-  getProjectionsIncomeList() {
+  getProjectionsIncomeList(active: string = "1", currentDate: string = "1") {
     return this.http
-      .get<any>(`${environment.productionApiUrl}/proyecciones`, {})
+      .get<any>(
+        `${environment.productionApiUrl}/proyecciones?activos=${active}&fecha_actual=${currentDate}`
+      )
       .pipe(
         map(response => {
           return response;
@@ -57,6 +59,23 @@ export class IncomesService {
       );
   }
 
+  getProjection(
+    id_inversion: string,
+    id_proyeccion_ingreso_instrumento: string,
+    fecha_proyeccion_pago: string
+  ): Observable<boolean> {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/proyeccion?id_inversion=${id_inversion}&id_proyeccion_ingreso_instrumento=${id_proyeccion_ingreso_instrumento}&fecha_proyeccion_pago=${fecha_proyeccion_pago}`
+      )
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   getProjectionIncome(instrument: string, id: string): Observable<boolean> {
     return this.http
       .get<any>(

src/app/services/instrument-calculations.service.ts

@@ -74,6 +74,52 @@ export class InstrumentCalculations {
         catchError(this.errorHandl)
       );
   }
+
+  bonosCalc(
+    codigo_instrumento: string,
+    info_inversion: {
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
+    },
+    info_instrumento: {
+      comision_casa_porcentaje_compra: number;
+      comision_bolsa_porcentaje_compra: number;
+      cupon_porcentaje_compra: number;
+      valor_nominal_compra: number;
+      costo_transferencia: number;
+      ytm_vencimiento_porcentaje_compra: number;
+      precio_vencimiento_compra: number;
+      precio_compra: number;
+      fecha_ultima_cupon_compra: string;
+      fecha_liquidacion_compra: string;
+      fecha_vencimiento_compra: string;
+      comision_casa_porcentaje_venta: number;
+      comision_bolsa_porcentaje_venta: number;
+      cupon_porcentaje_venta: number;
+      valor_nominal_venta: number;
+      ytm_vencimiento_porcentaje_venta: number;
+      precio_vencimiento_venta: number;
+      precio_venta: number;
+      fecha_ultima_cupon_venta: string;
+      fecha_liquidacion_venta: string;
+      fecha_vencimiento_venta: string;
+    }
+  ): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/autocomplete`, {
+        codigo_instrumento,
+        info_inversion,
+        info_instrumento
+      })
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   // Para vcn
   vcnCalc(
     codigo_instrumento: string,

src/app/services/instruments.service.ts

@@ -6,10 +6,12 @@ import { LETE } from "@app/components/instruments/lete/lete.component";
 import { CETE } from "@app/components/instruments/cete/cete.component";
 import { VCN } from "@app/components/instruments/vcn/vcn.component";
 import { PBUR } from "@app/components/instruments/pbur/pbur.component";
-import { BonosComponent } from "@app/components/instruments/bonos/bonos.component";
+import { BONO } from "@app/components/instruments/bonos/bonos.component";
 import { DAP } from "@app/components/instruments/dap/dap.component";
 import { ANCComponent } from "@app/components/instruments/anc/anc.component";
 import { APNComponent } from "@app/components/instruments/apn/apn.component";
+import { CINV } from "@app/components/instruments/certificados/certificados.component";
+import { EURB } from "@app/components/instruments/eurobonos/eurobonos.component";
 
 @Injectable({
   providedIn: "root"
@@ -25,7 +27,10 @@ export class InstrumentsService {
       }),
       new Instrument(PBUR, { key: "PBUR", name: "Papel bursátil" }),
 
-      new Instrument(BonosComponent, { key: "BONOS", name: "Bonos" }),
+      new Instrument(BONO, { key: "BONO", name: "Bonos" }),
+      new Instrument(EURB, { key: "EURB", name: "Eurobonos" }),
+      new Instrument(CINV, { key: "CINV", name: "Certificados de inversión" }),
+
       new Instrument(DAP, {
         key: "DAP",
         name: "Depósitos a plazo"

src/app/services/investments.service.ts

@@ -145,6 +145,19 @@ export class InvestmentsService {
       );
   }
 
+  getAvailableUsers(id: any): Observable<boolean> {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/usuarios/disponibles?inversion=${id}`
+      )
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   //if(error.error instanceof ErrorEvent) {
   errorHandl(error) {
     let errorMessage = "";