Merge branch 'test' of onunez/frontend-inversiones into master

Jenkinsfile

@@ -3,10 +3,21 @@ pipeline {
     stages {
         stage('build') {
             steps {
-                sh  '''
-                    cd /opt/inversys/app/frontend/
-                    git pull
-                    '''
+                script {
+                    if(env.JOB_NAME == 'DEV_Inversys_frontend'){
+                        sh  '''
+                            cd /opt/inversys/app/frontend/
+                            git pull
+                            '''
+                    }
+                    else if(env.JOB_NAME == 'TST_Inversys_frontend'){
+                        sshagent(credentials: ['deployment-key']) {
+                            sh  '''
+                                ssh deploy@192.168.98.48 'cd /opt/inversys/app/frontend/ && git pull'
+                                '''
+                        }
+                    }
+                }                
             }
         }
         stage('Test') {
@@ -16,11 +27,21 @@ pipeline {
         }
         stage('Deploy') {
             steps {
-                sh  '''
-                    cd /opt/inversys/
-                    echo $USER
-                    docker-compose up -d --build frontend
-                    '''
+                script {
+                    if(env.JOB_NAME == 'DEV_Inversys_frontend'){
+                        sh  '''
+                            cd /opt/inversys/
+                            docker-compose up -d --build frontend
+                            '''
+                    }
+                    else if(env.JOB_NAME == 'TST_Inversys_frontend'){
+                        sshagent(credentials: ['deployment-key']) {
+                            sh  '''
+                                ssh deploy@192.168.98.48 'cd /opt/inversys/ && docker-compose up -d --build frontend'
+                                '''
+                        }
+                    }
+                }                
             }
         }
     }

nginx/nginx.conf

@@ -26,6 +26,8 @@ http {
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-NginX-Proxy true;
             proxy_cache_bypass $http_upgrade;
+            client_max_body_size 0;
+
         }
 
         location /assets/ {

package.json

@@ -43,10 +43,12 @@
     "jquery": "^3.4.1",
     "mat-table-exporter": "^1.2.2",
     "moment": "^2.24.0",
+    "ng-select": "^1.0.2",
     "ng2-file-upload": "^1.4.0",
     "ngx-animating-datepicker": "^1.2.1",
     "ngx-bootstrap": "^5.1.1",
     "ngx-daterangepicker": "^1.1.1",
+    "pdfmake": "^0.1.66",
     "perfect-scrollbar": "^1.4.0",
     "popper.js": "^1.15.0",
     "print-js": "^1.0.63",

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
 import { registerLocaleData, DatePipe } from "@angular/common";
 import { RouterModule } from "@angular/router";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { SelectModule } from "ng-select";
 
 // Internationalization i18n
 import localeEs from "@angular/common/locales/es";
@@ -43,6 +44,7 @@ import { MatPasswordStrengthModule } from "@angular-material-extensions/password
     PluginsModule,
     AngularMyDatePickerModule,
     FontAwesomeModule,
+    SelectModule,
     MatPasswordStrengthModule.forRoot()
   ],
   providers: [

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

@@ -1,174 +0,0 @@
-<h4 class="card-title">
-  ACCIONES NACIONALES
-</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="precio_limpio">Precio Limpio: </label>
-        <input
-          type="text"
-          formControlName="precio_limpio"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.precio_limpio.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.precio_limpio.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.precio_limpio.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="unidades">Unidades: </label>
-        <input
-          type="text"
-          formControlName="unidades"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.unidades.errors
-          }"
-        />
-        <div *ngIf="submitted && f.unidades.errors" class="invalid-feedback">
-          <div *ngIf="f.unidades.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-    </div>
-    <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
-          </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_operacion">Fecha Operació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_operacion"
-            (click)="dp.toggleCalendar()"
-            [options]="myDpOptions"
-            (dateChanged)="onDateChanged($event)"
-            #dp="angular-mydatepicker"
-            [ngClass]="{
-              'is-invalid': submitted && f.fecha_operacion.errors
-            }"
-          />
-        </div>
-
-        <div
-          *ngIf="submitted && f.fecha_operacion.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.fecha_liquidacion.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <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
-              name="fecha_vencimiento"
-              (click)="dp1.toggleCalendar()"
-              [options]="myDpOptions"
-              (dateChanged)="onDateChanged($event)"
-              #dp1="angular-mydatepicker"
-              [ngClass]="{
-                'is-invalid': submitted && f.fecha_vencimiento.errors
-              }"
-            />
-          </div>
-        </div>
-
-        <div
-          *ngIf="submitted && f.fecha_vencimiento.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.fecha_vencimiento.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-    </div>
-  </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>
-
-
-</form>
--->

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

@@ -1,87 +0,0 @@
-import { Component, OnInit, Input } 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";
-
-@Component({
-  selector: "app-anc",
-  templateUrl: "./anc.component.html"
-})
-export class ANCComponent implements InstrumentComponent {
-  title: string = "Acciones nacionales comunes";
-  @Input() data: any;
-  @Input() summary: boolean;
-  @Input() investmentID: string;
-
-  form: any;
-
-  // 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;
-  model: IMyDateModel = null;
-
-  constructor(
-    private formBuilder: FormBuilder,
-    private router: Router,
-    private formDataService: FormInvestmentProposalService
-  ) {
-    console.log("init");
-
-    this.investmentProposalForm = this.formBuilder.group({
-      precio_limpio: ["", Validators.required],
-      unidades: ["", Validators.required],
-      comision_casa: ["", Validators.required],
-      comision_bolsa: ["", Validators.required],
-      fecha_operacion: ["", Validators.required],
-      fecha_vencimiento: ["", Validators.required]
-    });
-  }
-
-  save(form: any): boolean {
-    /*if (!form.valid) {
-      return false;
-    }*/
-    this.formDataService.setWork(this.investmentProposalForm.value);
-    return true;
-  }
-
-  goToNext(form: any) {
-    if (this.save(form)) {
-      console.log("all good");
-      // Navigate to the work page
-      this.router.navigate(["/address"]);
-    }
-  }
-}

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

@@ -1,174 +0,0 @@
-<h4 class="card-title">
-  ACCIONES PREFERENTES NACIONALES
-</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="precio_limpio">Precio Limpio: </label>
-        <input
-          type="text"
-          formControlName="precio_limpio"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.precio_limpio.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.precio_limpio.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.precio_limpio.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="unidades">Unidades: </label>
-        <input
-          type="text"
-          formControlName="unidades"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.unidades.errors
-          }"
-        />
-        <div *ngIf="submitted && f.unidades.errors" class="invalid-feedback">
-          <div *ngIf="f.unidades.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-    </div>
-    <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
-          </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_operacion">Fecha Operació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_operacion"
-            (click)="dp.toggleCalendar()"
-            [options]="myDpOptions"
-            (dateChanged)="onDateChanged($event)"
-            #dp="angular-mydatepicker"
-            [ngClass]="{
-              'is-invalid': submitted && f.fecha_operacion.errors
-            }"
-          />
-        </div>
-
-        <div
-          *ngIf="submitted && f.fecha_operacion.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.fecha_liquidacion.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <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
-              name="fecha_vencimiento"
-              (click)="dp1.toggleCalendar()"
-              [options]="myDpOptions"
-              (dateChanged)="onDateChanged($event)"
-              #dp1="angular-mydatepicker"
-              [ngClass]="{
-                'is-invalid': submitted && f.fecha_vencimiento.errors
-              }"
-            />
-          </div>
-        </div>
-
-        <div
-          *ngIf="submitted && f.fecha_vencimiento.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.fecha_vencimiento.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-    </div>
-  </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>
-
-</form>
--->

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

@@ -1,89 +0,0 @@
-import { Component, OnInit, Input } 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";
-
-@Component({
-  selector: "app-apn",
-  templateUrl: "./apn.component.html"
-})
-export class APNComponent implements InstrumentComponent {
-  title: string = "Acciones preferentes nacionales";
-  @Input() data: any;
-  @Input() summary: boolean;
-  @Input() investmentID: string;
-
-  form: any;
-
-  // 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;
-  model: IMyDateModel = null;
-
-  constructor(
-    private formBuilder: FormBuilder,
-    private router: Router,
-    private formDataService: FormInvestmentProposalService
-  ) {
-    console.log("init");
-
-    this.investmentProposalForm = this.formBuilder.group({
-      precio_limpio: ["", Validators.required],
-      unidades: ["", Validators.required],
-      comision_casa: ["", Validators.required],
-      comision_bolsa: ["", Validators.required],
-      fecha_operacion: ["", Validators.required],
-      fecha_vencimiento: ["", Validators.required]
-    });
-  }
-
-  save(form: any): boolean {
-    /*if (!form.valid) {
-      return false;
-    }*/
-    console.log(this.investmentProposalForm.value);
-    this.formDataService.setWork(this.investmentProposalForm.value);
-    return true;
-  }
-
-  goToNext(form: any) {
-    if (this.save(form)) {
-      console.log("all good");
-      // Navigate to the work page
-      console.log(this.formDataService.getWork());
-      this.router.navigate(["/address"]);
-    }
-  }
-}

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

@@ -971,7 +971,7 @@
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
-    <div class="instrument-calcs">
+    <div *ngIf="hasProjections" class="instrument-calcs">
       <div class="row">
         <div class="col-12">
           <span class="badge badge-success badge-custom"
@@ -987,6 +987,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -994,6 +995,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -1005,6 +1007,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -1015,6 +1018,12 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -1025,6 +1034,12 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1036,10 +1051,15 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>
@@ -1522,6 +1542,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -1529,6 +1550,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1541,6 +1563,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1553,6 +1576,12 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_neto">
@@ -1564,6 +1593,12 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1575,10 +1610,15 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>

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

@@ -127,6 +127,7 @@ export class BONO implements InstrumentComponent {
   ytm_vencimiento_porcentaje_compra: any;
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
+  consolidado_proyeccion: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -146,6 +147,9 @@ export class BONO implements InstrumentComponent {
       this.instrument_work.proyecciones != ""
     ) {
       this.hasProjections = true;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
       this.operation_results_work = this.instrument_work["resultado_operacion"];
 
       if (this.instrument_work["instrumento"] != undefined) {
@@ -153,7 +157,7 @@ export class BONO implements InstrumentComponent {
       }
       this.instrument_work_summary = this.instrument_work;
 
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
@@ -239,58 +243,34 @@ export class BONO implements InstrumentComponent {
       ],
 
       precio_venta: [
-        this.instrument_exists ? "" : this.instrument_work.precio_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.precio_venta
       ],
 
       valor_nominal_venta: [
-        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta
       ],
 
       precio_vencimiento_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.precio_vencimiento_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.precio_vencimiento_venta
       ],
 
       cupon_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.cupon_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.cupon_porcentaje_venta
       ],
 
       comision_casa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_casa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_casa_porcentaje_venta
       ],
       comision_bolsa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_bolsa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_bolsa_porcentaje_venta
       ],
 
       fecha_ultima_cupon_compra: [
@@ -354,8 +334,7 @@ export class BONO implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_ultima_cupon_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_liquidacion_venta: [
         this.instrument_exists
@@ -370,8 +349,7 @@ export class BONO implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_liquidacion_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_vencimiento_venta: [
         this.instrument_exists
@@ -386,8 +364,7 @@ export class BONO implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_vencimiento_venta
               }
-            },
-        Validators.required
+            }
       ]
     });
   }
@@ -560,10 +537,17 @@ export class BONO implements InstrumentComponent {
 
           // Proyecciones
           this.proyecciones = ans["result"]["proyecciones"];
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.hasProjections = true;
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
 
           this.operation_result = true;
-          this.dataSource.data = this.proyecciones;
-          this.dataSource2.data = this.proyecciones;
+          this.dataSource.data = this.proyecciones.slice(0, -1);
+          this.dataSource2.data = this.proyecciones.slice(0, -1);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
 

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

@@ -971,7 +971,7 @@
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
-    <div class="instrument-calcs">
+    <div *ngIf="hasProjections" class="instrument-calcs">
       <div class="row">
         <div class="col-12">
           <span class="badge badge-success badge-custom"
@@ -987,6 +987,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -994,6 +995,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -1005,6 +1007,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -1015,6 +1018,12 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -1025,6 +1034,12 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1036,10 +1051,15 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>
@@ -1521,6 +1541,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -1528,6 +1549,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1540,6 +1562,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1552,6 +1575,12 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_neto">
@@ -1563,6 +1592,12 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1574,10 +1609,15 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>

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

@@ -127,6 +127,7 @@ export class CINV implements InstrumentComponent {
   ytm_vencimiento_porcentaje_compra: any;
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
+  consolidado_proyeccion: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -146,6 +147,9 @@ export class CINV implements InstrumentComponent {
       this.instrument_work.proyecciones != ""
     ) {
       this.hasProjections = true;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
       this.operation_results_work = this.instrument_work["resultado_operacion"];
 
       if (this.instrument_work["instrumento"] != undefined) {
@@ -153,7 +157,7 @@ export class CINV implements InstrumentComponent {
       }
       this.instrument_work_summary = this.instrument_work;
 
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
@@ -239,58 +243,34 @@ export class CINV implements InstrumentComponent {
       ],
 
       precio_venta: [
-        this.instrument_exists ? "" : this.instrument_work.precio_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.precio_venta
       ],
 
       valor_nominal_venta: [
-        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta
       ],
 
       precio_vencimiento_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.precio_vencimiento_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.precio_vencimiento_venta
       ],
 
       cupon_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.cupon_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.cupon_porcentaje_venta
       ],
 
       comision_casa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_casa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_casa_porcentaje_venta
       ],
       comision_bolsa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_bolsa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_bolsa_porcentaje_venta
       ],
 
       fecha_ultima_cupon_compra: [
@@ -354,8 +334,7 @@ export class CINV implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_ultima_cupon_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_liquidacion_venta: [
         this.instrument_exists
@@ -370,8 +349,7 @@ export class CINV implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_liquidacion_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_vencimiento_venta: [
         this.instrument_exists
@@ -386,8 +364,7 @@ export class CINV implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_vencimiento_venta
               }
-            },
-        Validators.required
+            }
       ]
     });
   }
@@ -562,6 +539,12 @@ export class CINV implements InstrumentComponent {
 
           // Proyecciones
           this.proyecciones = ans["result"]["proyecciones"];
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
 
           this.operation_result = true;
           this.dataSource.data = this.proyecciones;

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

@@ -366,7 +366,7 @@
           >
         </div>
 
-        <div class="cete-table-container">
+        <div *ngIf="hasProjections" class="cete-table-container">
           <table mat-table [dataSource]="dataSource" class="example-table">
             <!-- Name Column -->
             <ng-container matColumnDef="posicion">
@@ -374,6 +374,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -381,6 +382,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -393,6 +395,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -403,6 +406,12 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="ingreso_neto">
@@ -414,10 +423,17 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator
@@ -582,6 +598,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -589,6 +606,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -601,6 +619,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -613,6 +632,12 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_neto">
@@ -624,10 +649,17 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator

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

@@ -95,6 +95,10 @@ export class CETE implements InstrumentComponent {
   dataSource2 = new MatTableDataSource(this.proyecciones);
   hasProjections: boolean;
   fecha_vencimiento: any;
+  consolidado_proyeccion = {
+    total_ingreso_bruto: 0,
+    total_ingreso_neto: 0
+  };
 
   constructor(
     private formBuilder: FormBuilder,
@@ -113,8 +117,11 @@ export class CETE implements InstrumentComponent {
       (this.instrument_work.proyecciones != "" ||
         this.instrument_work != undefined)
     ) {
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
       this.hasProjections = true;
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
@@ -290,7 +297,14 @@ export class CETE implements InstrumentComponent {
           this.proyecciones = ans["result"]["proyecciones"];
           this.fecha_vencimiento = ans["result"]["fecha_vencimiento"];
 
-          this.dataSource.data = this.proyecciones;
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.hasProjections = true;
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
+          this.dataSource.data = this.proyecciones.slice(0, -1);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
 

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

@@ -242,7 +242,7 @@
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
-    <div class="instrument-calcs">
+    <div *ngIf="hasProjections" class="instrument-calcs">
       <div class="row">
         <div class="col-12">
           <span class="badge badge-success badge-custom"
@@ -257,12 +257,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -274,6 +276,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -285,6 +288,12 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
@@ -296,6 +305,9 @@
                     : (row.renta | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -307,10 +319,17 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator
@@ -452,12 +471,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -469,6 +490,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -480,6 +502,12 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
@@ -491,6 +519,9 @@
                     : (row.renta | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -502,10 +533,17 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator

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

@@ -93,6 +93,11 @@ export class DAP implements InstrumentComponent {
   hasProjections: boolean;
   numero_certificado: any;
   fecha_vencimiento: any;
+  consolidado_proyeccion = {
+    total_ingreso_bruto: 0,
+    total_renta: 0,
+    total_ingreso_neto: 0
+  };
 
   constructor(
     private formBuilder: FormBuilder,
@@ -112,9 +117,13 @@ export class DAP implements InstrumentComponent {
         this.instrument_work != undefined)
     ) {
       this.hasProjections = true;
-      this.dataSource2.data = this.instrument_work.proyecciones;
+
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
     } else {
       this.hasProjections = false;
     }
@@ -226,7 +235,15 @@ export class DAP implements InstrumentComponent {
           this.numero_certificado = ans["result"]["numero_certificado"];
           this.fecha_vencimiento = ans["result"]["fecha_vencimiento"];
 
-          this.dataSource.data = this.proyecciones;
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.hasProjections = true;
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
+
+          this.dataSource.data = this.proyecciones.slice(0, -1);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
 

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

@@ -971,7 +971,7 @@
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
-    <div class="instrument-calcs">
+    <div *ngIf="hasProjections" class="instrument-calcs">
       <div class="row">
         <div class="col-12">
           <span class="badge badge-success badge-custom"
@@ -987,6 +987,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -994,6 +995,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -1005,6 +1007,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -1015,6 +1018,12 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -1025,6 +1034,12 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1036,10 +1051,15 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>
@@ -1521,6 +1541,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -1528,6 +1549,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1540,6 +1562,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1552,6 +1575,12 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_neto">
@@ -1563,6 +1592,12 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1574,10 +1609,15 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>

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

@@ -127,6 +127,7 @@ export class EURB implements InstrumentComponent {
   ytm_vencimiento_porcentaje_compra: any;
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
+  consolidado_proyeccion: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -146,6 +147,9 @@ export class EURB implements InstrumentComponent {
       this.instrument_work.proyecciones != ""
     ) {
       this.hasProjections = true;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
       this.operation_results_work = this.instrument_work["resultado_operacion"];
 
       if (this.instrument_work["instrumento"] != undefined) {
@@ -153,7 +157,7 @@ export class EURB implements InstrumentComponent {
       }
       this.instrument_work_summary = this.instrument_work;
 
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
@@ -239,58 +243,34 @@ export class EURB implements InstrumentComponent {
       ],
 
       precio_venta: [
-        this.instrument_exists ? "" : this.instrument_work.precio_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.precio_venta
       ],
 
       valor_nominal_venta: [
-        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta
       ],
 
       precio_vencimiento_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.precio_vencimiento_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.precio_vencimiento_venta
       ],
 
       cupon_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.cupon_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.cupon_porcentaje_venta
       ],
 
       comision_casa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_casa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_casa_porcentaje_venta
       ],
       comision_bolsa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_bolsa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_bolsa_porcentaje_venta
       ],
 
       fecha_ultima_cupon_compra: [
@@ -354,8 +334,7 @@ export class EURB implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_ultima_cupon_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_liquidacion_venta: [
         this.instrument_exists
@@ -370,8 +349,7 @@ export class EURB implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_liquidacion_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_vencimiento_venta: [
         this.instrument_exists
@@ -386,8 +364,7 @@ export class EURB implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_vencimiento_venta
               }
-            },
-        Validators.required
+            }
       ]
     });
   }
@@ -561,10 +538,16 @@ export class EURB implements InstrumentComponent {
 
           // Proyecciones
           this.proyecciones = ans["result"]["proyecciones"];
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
 
           this.operation_result = true;
-          this.dataSource.data = this.proyecciones;
-          this.dataSource2.data = this.proyecciones;
+          this.dataSource.data = this.proyecciones.slice(0, -1);
+          this.dataSource2.data = this.proyecciones.slice(0, -1);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
 

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

@@ -0,0 +1,823 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Fondos de inversión
+  </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-3">
+        <div class="form-group">
+          <label for="cuota_participacion">Cuota de participación: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-sort-numeric-up-alt"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cuota_participacion"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cuota_participacion.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cuota_participacion.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cuota_participacion.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cuota_participacion.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_participacion">Valor participación: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_participacion"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_participacion.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_participacion.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_participacion.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_participacion.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje">Comisión casa: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_casa_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje">Comisión bolsa: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_bolsa_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Dividendo porcentaje -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="dividendo_porcentaje">Dividendo </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="dividendo_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.dividendo_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.dividendo_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.dividendo_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.dividendo_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Rendimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="rendimiento_porcentaje">Rendimiento: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="rendimiento_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.rendimiento_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.rendimiento_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.rendimiento_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.rendimiento_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Días liquidación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="dias_liquidacion">Días liquidación: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-calendar-alt"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="dias_liquidacion"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.dias_liquidacion.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.dias_liquidacion.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.dias_liquidacion.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.dias_liquidacion.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Días vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="dias_vencimiento">Días vencimiento: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-calendar-alt"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="dias_vencimiento"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.dias_vencimiento.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.dias_vencimiento.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.dias_vencimiento.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.dias_vencimiento.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de operación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_operacion">Fecha de operación </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_operacion"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_operacion.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion.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-sm-4">
+          <h4>Cuota participación:</h4>
+          <div class="field">
+            {{ cuota_participacion | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor participación:</h4>
+          <div class="field">
+            $USD {{ valor_participacion | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Días liquidación:</h4>
+          <div class="field">
+            {{ dias_liquidacion }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Días vencimiento:</h4>
+          <div class="field">
+            {{ dias_vencimiento }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor nominal:</h4>
+          <div class="field">$USD {{ valor_nominal | number: "1.2-4" }}</div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor transado:</h4>
+          <div class="field">$USD {{ valor_transado | 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>Comisión casa (%):</h4>
+          <div class="field">
+            {{ comision_casa_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <div class="field">
+            <h4>Comisión casa:</h4>
+            $USD {{ comision_casa | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comisión bolsa (%):</h4>
+          <div class="field">
+            {{ comision_bolsa_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <div class="field">
+            <h4>Comisión bolsa:</h4>
+            $USD {{ comision_bolsa | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Rendimiento (%):</h4>
+          <div class="field">
+            {{ rendimiento_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Dividendo (%):</h4>
+          <div class="field">
+            {{ dividendo_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha operación:</h4>
+          <div class="field">
+            {{ fecha_operacion }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha liquidación:</h4>
+          <div class="field">
+            {{ fecha_liquidacion }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha vencimiento:</h4>
+          <div class="field">
+            {{ fecha_vencimiento }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div *ngIf="hasProjections" 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>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</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>
+              <td mat-footer-cell *matFooterCellDef></td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef></td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                $USD
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : (row.ingreso_bruto | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : (row.ingreso_neto | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="dividendo_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Dividendo (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.dividendo_porcentaje == "" ||
+                  row.dividendo_porcentaje == undefined
+                    ? "-"
+                    : (row.dividendo_porcentaje | number: "1.2-4")
+                }}%
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_dividendo_porcentaje
+                    | number: "1.2-4"
+                }}%
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="rendimiento_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Rendimiento (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.rendimiento_porcentaje == "" ||
+                  row.rendimiento_porcentaje == undefined
+                    ? "-"
+                    : (row.rendimiento_porcentaje | number: "1.2-4")
+                }}%
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_rendimiento_porcentaje
+                    | number: "1.2-4"
+                }}%
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="rendimiento">
+              <th mat-header-cell *matHeaderCellDef>Rendimiento ($)</th>
+              <td mat-cell *matCellDef="let row">
+                $USD
+                {{
+                  row.rendimiento == "" || row.rendimiento == undefined
+                    ? "-"
+                    : (row.rendimiento | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_rendimiento | number: "1.2-4" }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <div class="form-group text-center space-20">
+      <button
+        type="button"
+        class="btn btn-default center-component margin-right"
+        (click)="goToPrevious()"
+      >
+        Anterior
+      </button>
+      <button
+        type="submit"
+        class="btn btn-primary center-component margin-right"
+        (click)="goToNext(investmentProposalForm)"
+      >
+        Siguiente
+      </button>
+    </div>
+  </form>
+</div>
+
+<div *ngIf="summary">
+  <div class="timeline-body">
+    <div class="row">
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cuota participación:</h4>
+        <div class="field">
+          {{ instrument_work_summary.cuota_participacion | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor participación:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_participacion | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días liquidación:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_liquidacion }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_vencimiento }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal:</h4>
+        <div class="field">
+          $USD {{ instrument_work_summary.valor_nominal | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado:</h4>
+        <div class="field">
+          $USD {{ instrument_work_summary.valor_transado | 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_summary.monto_pagar | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_casa_porcentaje | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <div class="field">
+          <h4>Comisión casa:</h4>
+          $USD {{ instrument_work_summary.comision_casa | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_bolsa_porcentaje | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <div class="field">
+          <h4>Comisión bolsa:</h4>
+          $USD {{ instrument_work_summary.comision_bolsa | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Rendimiento (%):</h4>
+        <div class="field">
+          {{ instrument_work_summary.rendimiento_porcentaje | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Dividendo (%):</h4>
+        <div class="field">
+          {{ instrument_work_summary.dividendo_porcentaje | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha operación:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_operacion }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha liquidación:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_liquidacion }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_vencimiento }}
+        </div>
+      </div>
+    </div>
+
+    <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>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</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>
+              <td mat-footer-cell *matFooterCellDef></td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef></td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                $USD
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : (row.ingreso_bruto | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                $USD
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : (row.ingreso_neto | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="dividendo_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Dividendo (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.dividendo_porcentaje == "" ||
+                  row.dividendo_porcentaje == undefined
+                    ? "-"
+                    : (row.dividendo_porcentaje | number: "1.2-4")
+                }}%
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_dividendo_porcentaje
+                    | number: "1.2-4"
+                }}%
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="rendimiento_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Rendimiento (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.rendimiento_porcentaje == "" ||
+                  row.rendimiento_porcentaje == undefined
+                    ? "-"
+                    : (row.rendimiento_porcentaje | number: "1.2-4")
+                }}%
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_rendimiento_porcentaje
+                    | number: "1.2-4"
+                }}%
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="rendimiento">
+              <th mat-header-cell *matHeaderCellDef>Rendimiento ($)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.rendimiento == "" || row.rendimiento == undefined
+                    ? "-"
+                    : (row.rendimiento | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_rendimiento | number: "1.2-4" }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,404 @@
+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-fondos",
+  templateUrl: "./fondos.component.html"
+})
+export class FINV implements InstrumentComponent {
+  title: string = "Fondos de inversión";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  displayedColumns: string[] = [
+    "posicion",
+    "plazo",
+    "fecha_pago",
+    "ingreso_bruto",
+    "ingreso_neto",
+    "dividendo_porcentaje",
+    "rendimiento_porcentaje",
+    "rendimiento"
+  ];
+
+  @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_operacion: 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;
+
+  fondosObject: {};
+  dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
+  hasProjections: boolean;
+  fecha_vencimiento: any;
+  operation_result: boolean = false;
+  operation_results_work: any = [];
+  instrument_work_summary: any = [];
+  cuota_participacion: any;
+  valor_participacion: any;
+  dias_liquidacion: any;
+  dias_vencimiento: any;
+  valor_nominal: any;
+  valor_transado: any;
+  comision_casa_porcentaje: any;
+  comision_casa: any;
+  comision_bolsa_porcentaje: any;
+  comision_bolsa: any;
+  rendimiento_porcentaje: any;
+  dividendo_porcentaje: any;
+  fecha_operacion: any;
+  fecha_liquidacion: any;
+  consolidado_proyeccion: any;
+  monto_pagar: 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.hasProjections = true;
+
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
+      this.operation_results_work = this.instrument_work["resultado_operacion"];
+
+      if (this.instrument_work["instrumento"] != undefined) {
+        this.instrument_work = this.instrument_work["instrumento"];
+      }
+      this.instrument_work_summary = this.instrument_work;
+
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
+      this.dataSource2.paginator = this.paginator;
+      this.dataSource2.sort = this.sort;
+    } else {
+      this.hasProjections = false;
+    }
+
+    if (
+      this.operation_results_work != undefined &&
+      this.operation_results_work != ""
+    ) {
+      this.operation_result = true;
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      cuota_participacion: [
+        this.instrument_exists ? "" : this.instrument_work.cuota_participacion,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      valor_participacion: [
+        this.instrument_exists ? "" : this.instrument_work.valor_participacion,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_bolsa_porcentaje: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      dividendo_porcentaje: [
+        this.instrument_exists ? "" : this.instrument_work.dividendo_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      rendimiento_porcentaje: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.rendimiento_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      dias_liquidacion: [
+        this.instrument_exists ? "" : this.instrument_work.dias_liquidacion,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      dias_vencimiento: [
+        this.instrument_exists ? "" : this.instrument_work.dias_vencimiento,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      fecha_operacion: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_operacion,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_operacion
+              }
+            },
+        Validators.required
+      ]
+    });
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.fondosObject);
+    return true;
+  }
+
+  getCalculations(form: any, saveForm: boolean) {
+    this.submitted = true;
+
+    if (!form.valid) {
+      return false;
+    }
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    this.instrumentCalcService
+      .fondosCalc(
+        "FINV", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          cuota_participacion: +this.f.cuota_participacion.value,
+          valor_participacion: +this.f.valor_participacion.value,
+          comision_bolsa_porcentaje: +this.f.comision_bolsa_porcentaje.value,
+          comision_casa_porcentaje: +this.f.comision_casa_porcentaje.value,
+          dividendo_porcentaje: +this.f.dividendo_porcentaje.value,
+          rendimiento_porcentaje: +this.f.rendimiento_porcentaje.value,
+          dias_liquidacion: this.f.dias_liquidacion.value,
+          dias_vencimiento: this.f.dias_vencimiento.value,
+          fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          this.cuota_participacion =
+            ans["result"]["instrumento"]["cuota_participacion"];
+          this.valor_participacion =
+            ans["result"]["instrumento"]["valor_participacion"];
+          this.dias_liquidacion =
+            ans["result"]["instrumento"]["dias_liquidacion"];
+          this.dias_vencimiento =
+            ans["result"]["instrumento"]["dias_vencimiento"];
+          this.valor_nominal = ans["result"]["instrumento"]["valor_nominal"];
+          this.valor_transado = ans["result"]["instrumento"]["valor_transado"];
+          this.monto_pagar = ans["result"]["instrumento"]["monto_pagar"];
+          this.comision_casa_porcentaje =
+            ans["result"]["instrumento"]["comision_casa_porcentaje"];
+          this.comision_casa = ans["result"]["instrumento"]["comision_casa"];
+          this.comision_bolsa_porcentaje =
+            ans["result"]["instrumento"]["comision_bolsa_porcentaje"];
+          this.comision_bolsa = ans["result"]["instrumento"]["comision_bolsa"];
+          this.rendimiento_porcentaje =
+            ans["result"]["instrumento"]["rendimiento_porcentaje"];
+          this.dividendo_porcentaje =
+            ans["result"]["instrumento"]["dividendo_porcentaje"];
+          this.fecha_operacion =
+            ans["result"]["instrumento"]["fecha_operacion"];
+          this.fecha_liquidacion =
+            ans["result"]["instrumento"]["fecha_liquidacion"];
+          this.fecha_vencimiento =
+            ans["result"]["instrumento"]["fecha_vencimiento"];
+
+          // Proyecciones
+          this.proyecciones = ans["result"]["proyecciones"];
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.hasProjections = true;
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
+
+          this.operation_result = true;
+          this.dataSource.data = this.proyecciones;
+          this.dataSource2.data = this.proyecciones;
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+
+          this.fondosObject = {
+            cuota_participacion: this.investmentProposalForm.value
+              .cuota_participacion,
+            valor_participacion: this.investmentProposalForm.value
+              .valor_participacion,
+            comision_bolsa_porcentaje: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje,
+            comision_casa_porcentaje: this.investmentProposalForm.value
+              .comision_casa_porcentaje,
+            dividendo_porcentaje: this.investmentProposalForm.value
+              .dividendo_porcentaje,
+            rendimiento_porcentaje: this.investmentProposalForm.value
+              .rendimiento_porcentaje,
+            dias_liquidacion: this.investmentProposalForm.value
+              .dias_liquidacion,
+            dias_vencimiento: this.investmentProposalForm.value
+              .dias_vencimiento,
+
+            fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted,
+            valor_nominal: this.valor_nominal,
+            valor_transado: this.valor_transado,
+            monto_pagar: this.monto_pagar,
+            comision_casa: this.comision_casa,
+            comision_bolsa: this.comision_bolsa,
+            fecha_liquidacion: this.fecha_liquidacion,
+            fecha_vencimiento: this.fecha_vencimiento,
+
+            // Proyecciones
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.fondosObject);
+          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/futuros/futuros.component.html

@@ -0,0 +1,1149 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Futuros
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <div class="col-6">
+        <div class="form-group">
+          <label>Tipo de operación: </label>
+        </div>
+        <select
+          class="custom-select"
+          formControlName="operacion"
+          (change)="toggle_operacion($event.target.value)"
+        >
+          <option
+            *ngFor="let item of operaciones"
+            [value]="item.codigo"
+            [selected]="
+              instrument_exists == false && item.codigo == instrument_work.corto
+            "
+            >{{ item.nombre }}</option
+          >
+        </select>
+      </div>
+      <div class="col-6">
+        <div class="form-group">
+          <label>Tipo de ejecución: </label>
+        </div>
+        <select
+          class="custom-select"
+          formControlName="ejecucion"
+          (change)="toggle_ejecucion($event.target.value)"
+        >
+          <option
+            *ngFor="let item of ejecuciones"
+            [value]="item.codigo"
+            [selected]="
+              instrument_exists == false &&
+              item.codigo == instrument_work.completo
+            "
+          >
+            {{ item.nombre }}</option
+          >
+        </select>
+      </div>
+    </div>
+
+    <div class="row">
+      <!-- Fecha de vencimiento -->
+
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="ticker">Ticker: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-file-alt"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="ticker"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.ticker.errors
+              }"
+            />
+            <div *ngIf="submitted && f.ticker.errors" class="invalid-feedback">
+              <div *ngIf="f.ticker.errors.required">
+                Campo requerido
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <div
+      class="row"
+      *ngIf="tipoOperacion == 0 || (tipoOperacion == 1 && tipoEjecucion == 1)"
+    >
+      <div class="col-sm-12">
+        <h4>Información de compra</h4>
+      </div>
+
+      <!-- Precio unitario compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_unitario_compra">Precio unitario: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_unitario_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_unitario_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_unitario_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_unitario_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_unitario_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comision broker compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_broker_compra">Comisión broker: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_broker_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_broker_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_broker_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_broker_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_broker_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cantidad contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cantidad_contratos_compra">Cantidad de contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cantidad_contratos_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cantidad_contratos_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cantidad_contratos_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cantidad_contratos_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cantidad_contratos_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Unidades contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="unidades_contratos_compra">Unidades contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="unidades_contratos_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.unidades_contratos_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.unidades_contratos_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.unidades_contratos_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.unidades_contratos_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de operación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_operacion_compra">Fecha de operación </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_operacion_compra"
+                (click)="dp0.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp0="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_operacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra">Fecha de liquidación </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)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="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" *ngIf="tipoOperacion == 0">
+      <!-- Fecha de vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra">Fecha de 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_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>
+    </div>
+    <br />
+    <div
+      class="row"
+      *ngIf="tipoOperacion == 1 || (tipoOperacion == 0 && tipoEjecucion == 1)"
+    >
+      <div class="col-sm-12">
+        <h4>Información de venta</h4>
+      </div>
+
+      <!-- Precio unitario compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_unitario_venta">Precio unitario: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_unitario_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_unitario_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_unitario_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_unitario_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_unitario_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comision broker compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_broker_venta">Comisión broker: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_broker_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_broker_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_broker_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_broker_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_broker_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cantidad contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cantidad_contratos_venta">Cantidad de contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cantidad_contratos_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cantidad_contratos_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cantidad_contratos_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cantidad_contratos_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cantidad_contratos_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Unidades contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="unidades_contratos_venta">Unidades contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="unidades_contratos_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.unidades_contratos_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.unidades_contratos_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.unidades_contratos_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.unidades_contratos_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de operación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_operacion_venta">Fecha de operación </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_operacion_venta"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_operacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta">Fecha de liquidación </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)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="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>
+
+    <div class="row" *ngIf="tipoOperacion == 1">
+      <!-- Fecha de vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta">Fecha de 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_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>
+    </div>
+
+    <div class="row">
+      <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>
+
+        <!-- COMPRA -->
+        <div class="col-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoEjecucion == 0 && tipoOperacion == 1
+          "
+        >
+          <h4>NO APLICA</h4>
+        </div>
+
+        <div
+          class="row align-container"
+          *ngIf="
+            operation_result == true &&
+            (tipoOperacion == 0 || tipoEjecucion == 1)
+          "
+        >
+          <div class="col-sm-4">
+            <h4>Precio unitario:</h4>
+            <div class="field">
+              $USD {{ precio_unitario_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Comisión broker:</h4>
+            <div class="field">
+              $USD {{ comision_broker_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Cantidad de contratos:</h4>
+            <div class="field">
+              {{ cantidad_contratos_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Unidades de contratos:</h4>
+            <div class="field">
+              {{ unidades_contratos_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor transado:</h4>
+            <div class="field">
+              $USD {{ valor_transado_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor pagado:</h4>
+            <div class="field">$USD {{ valor_pagado | number: "1.2-4" }}</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Ganancia / pérdida:</h4>
+            <div class="field">
+              $USD {{ ganancia_perdida | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Rendimiento:</h4>
+            <div class="field">{{ rendimiento | number: "1.2-4" }} %</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha operación:</h4>
+            <div class="field">
+              {{ fecha_operacion_compra }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha liquidación:</h4>
+            <div class="field">
+              {{ fecha_liquidacion_compra }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Operación</h4>
+            <div class="field">
+              {{ corto == 0 ? "Largo" : "Corto" }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha vencimiento:</h4>
+            <div class="field">
+              {{ fecha_vencimiento_compra }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha inicio vigencia:</h4>
+            <div class="field">
+              {{ fecha_inicio_vigencia }}
+            </div>
+          </div>
+        </div>
+
+        <!-- VENTA -->
+        <div class="col-12">
+          <h3>
+            Instrumento de venta
+          </h3>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoEjecucion == 0 && tipoOperacion == 0
+          "
+        >
+          <h4>NO APLICA</h4>
+        </div>
+
+        <div
+          class="row align-container"
+          *ngIf="
+            operation_result == true &&
+            (tipoOperacion == 1 || tipoEjecucion == 1)
+          "
+        >
+          <div class="col-sm-4">
+            <h4>Precio unitario:</h4>
+            <div class="field">
+              $USD {{ precio_unitario_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Comisión broker:</h4>
+            <div class="field">
+              $USD {{ comision_broker_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Cantidad de contratos:</h4>
+            <div class="field">
+              {{ cantidad_contratos_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Unidades de contratos:</h4>
+            <div class="field">
+              {{ unidades_contratos_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor transado:</h4>
+            <div class="field">
+              $USD {{ valor_transado_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor recibido:</h4>
+            <div class="field">$USD {{ valor_recibido | number: "1.2-4" }}</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha operación:</h4>
+            <div class="field">
+              {{ fecha_operacion_venta }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha liquidación:</h4>
+            <div class="field">
+              {{ fecha_liquidacion_venta }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Operación</h4>
+            <div class="field">
+              {{ corto == 0 ? "Largo" : "Corto" }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha vencimiento:</h4>
+            <div class="field">
+              {{ fecha_vencimiento_venta }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha inicio vigencia:</h4>
+            <div class="field">
+              {{ fecha_inicio_vigencia }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+
+    <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">
+      <!-- COMPRA -->
+      <div class="col-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+
+      <div
+        class="col-sm-4"
+        *ngIf="
+          operation_result == true &&
+          instrument_work_summary.completo == 0 &&
+          instrument_work_summary.corto == 1
+        "
+      >
+        <h4>NO APLICA</h4>
+      </div>
+
+      <div
+        class="row align-container"
+        *ngIf="
+          operation_result == true &&
+          (instrument_work_summary.corto == 0 ||
+            instrument_work_summary.completo == 1)
+        "
+      >
+        <div class="col-sm-4">
+          <h4>Precio unitario:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.precio_unitario_compra | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Comisión broker:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.comision_broker_compra | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Cantidad de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.cantidad_contratos_compra
+                | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Unidades de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.unidades_contratos_compra
+                | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor transado:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.valor_transado_compra | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor pagado:</h4>
+          <div class="field">
+            $USD {{ instrument_work_summary.valor_pagado | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Ganancia / pérdida:</h4>
+          <div class="field">
+            $USD
+            {{ instrument_work_summary.ganancia_perdida | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Rendimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.rendimiento | number: "1.2-4" }}%
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha operación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_operacion_compra }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha liquidación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_liquidacion_compra }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Operación</h4>
+          <div class="field">
+            {{ instrument_work_summary.corto == 0 ? "Largo" : "Corto" }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha vencimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_vencimiento_compra }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha inicio vigencia:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_inicio_vigencia }}
+          </div>
+        </div>
+      </div>
+
+      <!-- VENTA -->
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div
+        class="col-sm-4"
+        *ngIf="
+          operation_result == true &&
+          instrument_work_summary.completo == 0 &&
+          instrument_work_summary.corto == 0
+        "
+      >
+        <h4>NO APLICA</h4>
+      </div>
+
+      <div
+        class="row align-container"
+        *ngIf="
+          operation_result == true &&
+          (instrument_work_summary.corto == 1 ||
+            instrument_work_summary.completo == 1)
+        "
+      >
+        <div class="col-sm-4">
+          <h4>Precio unitario:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.precio_unitario_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Comisión broker:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.comision_broker_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Cantidad de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.cantidad_contratos_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Unidades de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.unidades_contratos_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor transado:</h4>
+          <div class="field">
+            $USD
+            {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor recibido:</h4>
+          <div class="field">
+            $USD {{ instrument_work_summary.valor_recibido | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha operación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_operacion_venta }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha liquidación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_liquidacion_venta }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Operación</h4>
+          <div class="field">
+            {{ instrument_work_summary.corto == 0 ? "Largo" : "Corto" }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha vencimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_vencimiento_venta }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha inicio vigencia:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_inicio_vigencia }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,755 @@
+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-futuros",
+  templateUrl: "./futuros.component.html"
+})
+export class FUTU implements InstrumentComponent {
+  title: string = "Futuros";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  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_operacion: IMyDateModel;
+  m_fecha_rendencion: IMyDateModel;
+  m_fecha_liquidacion_compra: IMyDateModel;
+
+  submitted: boolean = false;
+  instrument_exists: boolean;
+  instrument_work: any = [];
+  financials: any;
+  base_types: any;
+
+  futurosObject: {};
+  hasProjections: boolean;
+
+  tipoOperacion: any;
+  tipoEjecucion: any;
+
+  fecha_vencimiento: any;
+  operation_result: boolean = false;
+  operation_results_work: any = [];
+  instrument_work_summary: any = [];
+  fecha_operacion_compra: any;
+  fecha_liquidacion_compra: any;
+  precio_unitario_compra: any;
+  comision_broker_compra: any;
+  cantidad_contratos_compra: any;
+  unidades_contratos_compra: any;
+  valor_transado_compra: any;
+  valor_pagado: any;
+  ganancia_perdida: any;
+  rendimiento: any;
+  corto: any;
+  fecha_inicio_vigencia: any;
+  fecha_vencimiento_compra: any;
+  fecha_operacion_venta: any;
+  fecha_liquidacion_venta: any;
+  precio_unitario_venta: any;
+  comision_broker_venta: any;
+  cantidad_contratos_venta: any;
+  unidades_contratos_venta: any;
+  valor_transado_venta: any;
+  valor_recibido: any;
+  fecha_vencimiento_venta: any;
+  valor_nominal: any;
+  valor_transado: any;
+  comision_casa: any;
+  comision_bolsa: any;
+  fecha_liquidacion: any;
+  operacion: any;
+  ejecucion: any;
+  operaciones = [
+    { codigo: 1, nombre: "Corto" },
+    { codigo: 0, nombre: "Largo" }
+  ];
+  ejecuciones = [
+    { codigo: 1, nombre: "Completa" },
+    { codigo: 0, nombre: "Parcial" }
+  ];
+  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();
+
+    console.log("init");
+    console.log(this.operaciones);
+    console.log(this.instrument_work);
+
+    if (
+      this.instrument_work != undefined &&
+      this.instrument_work.completo == undefined
+    ) {
+      if (
+        this.instrument_work.valor_pagado > 0 &&
+        this.instrument_work.valor_recibido > 0
+      ) {
+        this.ejecucion = 1;
+      } else {
+        this.ejecucion = +this.instrument_work_summary.completo;
+      }
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      operacion: [this.instrument_exists ? "" : this.instrument_work.corto],
+      ejecucion: [this.instrument_exists ? "" : this.ejecucion],
+      ticker: [this.instrument_exists ? "" : this.instrument_work.ticker],
+      precio_unitario_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_unitario_compra
+      ],
+      comision_broker_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_broker_compra
+      ],
+      cantidad_contratos_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cantidad_contratos_compra
+      ],
+      unidades_contratos_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.unidades_contratos_compra
+      ],
+      fecha_operacion_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_operacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_operacion_compra
+              }
+            }
+      ],
+      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
+              }
+            }
+      ],
+      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
+              }
+            }
+      ],
+      precio_unitario_venta: [
+        this.instrument_exists ? "" : this.instrument_work.precio_unitario_venta
+      ],
+      comision_broker_venta: [
+        this.instrument_exists ? "" : this.instrument_work.comision_broker_venta
+      ],
+      cantidad_contratos_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cantidad_contratos_venta
+      ],
+      unidades_contratos_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.unidades_contratos_venta
+      ],
+      fecha_operacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_operacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_operacion_venta
+              }
+            }
+      ],
+      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
+              }
+            }
+      ],
+      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
+              }
+            }
+      ]
+    });
+
+    if (this.instrument_work != undefined) {
+      this.instrument_work_summary = this.instrument_work;
+      this.operation_result = true;
+
+      console.log("datos");
+      console.log(this.instrument_work_summary);
+
+      this.operacion = +this.instrument_work_summary.corto;
+      if (this.instrument_work_summary.completo == undefined) {
+        if (
+          this.instrument_work_summary.valor_pagado > 0 &&
+          this.instrument_work_summary.valor_recibido > 0
+        ) {
+          this.ejecucion = 1;
+        }
+      } else {
+        this.ejecucion = +this.instrument_work_summary.completo;
+      }
+
+      this.toggle_operacion(this.operacion);
+      this.toggle_ejecucion(this.ejecucion);
+    }
+  }
+
+  toggle_operacion(input: any) {
+    this.tipoOperacion = +input;
+    this.setValidators();
+  }
+
+  toggle_ejecucion(input: any) {
+    this.tipoEjecucion = +input;
+    this.setValidators();
+  }
+
+  setValidators() {
+    console.log("tipo de operacion");
+    console.log(this.tipoOperacion);
+    console.log("tipo de ejecucion");
+    console.log(this.tipoEjecucion);
+
+    const ticker = this.investmentProposalForm.get("ticker");
+
+    const precio_unitario_compra = this.investmentProposalForm.get(
+      "precio_unitario_compra"
+    );
+    const comision_broker_compra = this.investmentProposalForm.get(
+      "comision_broker_compra"
+    );
+    const cantidad_contratos_compra = this.investmentProposalForm.get(
+      "cantidad_contratos_compra"
+    );
+    const unidades_contratos_compra = this.investmentProposalForm.get(
+      "unidades_contratos_compra"
+    );
+    const fecha_operacion_compra = this.investmentProposalForm.get(
+      "fecha_operacion_compra"
+    );
+    const fecha_liquidacion_compra = this.investmentProposalForm.get(
+      "fecha_liquidacion_compra"
+    );
+    const fecha_vencimiento_compra = this.investmentProposalForm.get(
+      "fecha_vencimiento_compra"
+    );
+    const precio_unitario_venta = this.investmentProposalForm.get(
+      "precio_unitario_venta"
+    );
+    const comision_broker_venta = this.investmentProposalForm.get(
+      "comision_broker_venta"
+    );
+    const cantidad_contratos_venta = this.investmentProposalForm.get(
+      "cantidad_contratos_venta"
+    );
+    const unidades_contratos_venta = this.investmentProposalForm.get(
+      "unidades_contratos_venta"
+    );
+    const fecha_operacion_venta = this.investmentProposalForm.get(
+      "fecha_operacion_venta"
+    );
+    const fecha_liquidacion_venta = this.investmentProposalForm.get(
+      "fecha_liquidacion_venta"
+    );
+    const fecha_vencimiento_venta = this.investmentProposalForm.get(
+      "fecha_vencimiento_venta"
+    );
+
+    ticker.setValidators([Validators.required]);
+
+    if (this.tipoEjecucion == 1) {
+      precio_unitario_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_broker_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cantidad_contratos_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      unidades_contratos_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_operacion_compra.setValidators([Validators.required]);
+      fecha_liquidacion_compra.setValidators([Validators.required]);
+      if (this.tipoOperacion == 0) {
+        fecha_vencimiento_compra.setValidators([Validators.required]);
+        fecha_vencimiento_venta.setValidators(null);
+      }
+      precio_unitario_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_broker_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cantidad_contratos_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      unidades_contratos_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_operacion_venta.setValidators([Validators.required]);
+      fecha_liquidacion_venta.setValidators([Validators.required]);
+
+      if (this.tipoOperacion == 1) {
+        fecha_vencimiento_venta.setValidators([Validators.required]);
+
+        fecha_vencimiento_compra.setValidators(null);
+      }
+    } else {
+      if (this.tipoOperacion == 1) {
+        precio_unitario_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        comision_broker_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        cantidad_contratos_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        unidades_contratos_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        fecha_operacion_venta.setValidators([Validators.required]);
+        fecha_liquidacion_venta.setValidators([Validators.required]);
+        fecha_vencimiento_venta.setValidators(null); //.setValidators([Validators.required]);
+        precio_unitario_compra.setValidators(null);
+        comision_broker_compra.setValidators(null);
+        cantidad_contratos_compra.setValidators(null);
+        unidades_contratos_compra.setValidators(null);
+        fecha_operacion_compra.setValidators(null);
+        fecha_liquidacion_compra.setValidators(null);
+        fecha_vencimiento_compra.setValidators(null);
+      }
+      if (this.tipoOperacion == 0) {
+        precio_unitario_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        comision_broker_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        cantidad_contratos_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        unidades_contratos_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        fecha_operacion_compra.setValidators([Validators.required]);
+        fecha_liquidacion_compra.setValidators([Validators.required]);
+        fecha_vencimiento_compra.setValidators(null); //.setValidators([Validators.required]);
+        precio_unitario_venta.setValidators(null);
+        comision_broker_venta.setValidators(null);
+        cantidad_contratos_venta.setValidators(null);
+        unidades_contratos_venta.setValidators(null);
+        fecha_operacion_venta.setValidators(null);
+        fecha_liquidacion_venta.setValidators(null);
+        fecha_vencimiento_venta.setValidators(null);
+      }
+    }
+
+    precio_unitario_compra.updateValueAndValidity();
+    comision_broker_compra.updateValueAndValidity();
+    cantidad_contratos_compra.updateValueAndValidity();
+    unidades_contratos_compra.updateValueAndValidity();
+    fecha_operacion_compra.updateValueAndValidity();
+    fecha_liquidacion_compra.updateValueAndValidity();
+    fecha_vencimiento_compra.updateValueAndValidity();
+    precio_unitario_venta.updateValueAndValidity();
+    comision_broker_venta.updateValueAndValidity();
+    cantidad_contratos_venta.updateValueAndValidity();
+    unidades_contratos_venta.updateValueAndValidity();
+    fecha_operacion_venta.updateValueAndValidity();
+    fecha_liquidacion_venta.updateValueAndValidity();
+    fecha_vencimiento_venta.updateValueAndValidity();
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.futurosObject);
+    return true;
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  getCalculations(form: any, saveForm: boolean) {
+    this.submitted = true;
+    console.log(this.investmentProposalForm);
+    if (!form.valid) {
+      return false;
+    }
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.instrumentCalcService
+      .opcionesFuturosCalc(
+        "OPC", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          completo: this.tipoEjecucion,
+          corto: this.tipoOperacion,
+          precio_unitario_compra: this.f.precio_unitario_compra.value,
+          comision_broker_compra: this.f.comision_broker_compra.value,
+          cantidad_contratos_compra: this.f.cantidad_contratos_compra.value,
+          unidades_contratos_compra: this.f.unidades_contratos_compra.value,
+          fecha_operacion_compra:
+            this.f.fecha_operacion_compra.value == ""
+              ? ""
+              : this.f.fecha_operacion_compra.value.singleDate.formatted,
+          fecha_liquidacion_compra:
+            this.f.fecha_liquidacion_compra.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_compra.value.singleDate.formatted,
+          fecha_vencimiento_compra:
+            this.f.fecha_vencimiento_compra.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_compra.value.singleDate.formatted,
+          precio_unitario_venta: this.f.precio_unitario_venta.value,
+          comision_broker_venta: this.f.comision_broker_venta.value,
+          cantidad_contratos_venta: this.f.cantidad_contratos_venta.value,
+          unidades_contratos_venta: this.f.unidades_contratos_venta.value,
+          fecha_operacion_venta:
+            this.f.fecha_operacion_venta.value == ""
+              ? ""
+              : this.f.fecha_operacion_venta.value.singleDate.formatted,
+          fecha_liquidacion_venta:
+            this.f.fecha_liquidacion_venta.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_venta.value.singleDate.formatted,
+          fecha_vencimiento_venta:
+            this.f.fecha_vencimiento_venta.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_venta.value.singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          // Instrumento compra
+          if (this.tipoOperacion == 0 || this.tipoEjecucion == 1) {
+            this.fecha_operacion_compra =
+              ans["result"]["instrumento_compra"]["fecha_operacion_compra"];
+            this.fecha_liquidacion_compra =
+              ans["result"]["instrumento_compra"]["fecha_liquidacion_compra"];
+            this.precio_unitario_compra =
+              ans["result"]["instrumento_compra"]["precio_unitario_compra"];
+            this.comision_broker_compra =
+              ans["result"]["instrumento_compra"]["comision_broker_compra"];
+            this.cantidad_contratos_compra =
+              ans["result"]["instrumento_compra"]["cantidad_contratos_compra"];
+            this.unidades_contratos_compra =
+              ans["result"]["instrumento_compra"]["unidades_contratos_compra"];
+            this.valor_transado_compra =
+              ans["result"]["instrumento_compra"]["valor_transado_compra"];
+            this.valor_pagado =
+              ans["result"]["instrumento_compra"]["valor_pagado"];
+            this.ganancia_perdida =
+              ans["result"]["instrumento_compra"]["ganancia_perdida"];
+            this.rendimiento =
+              ans["result"]["instrumento_compra"]["rendimiento"];
+          }
+          // Si es operacion largo y ejecucion completa
+
+          if (this.tipoOperacion == 0) {
+            this.corto = ans["result"]["instrumento_compra"]["corto"];
+            this.fecha_inicio_vigencia =
+              ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
+
+            this.fecha_vencimiento_compra =
+              ans["result"]["instrumento_compra"]["fecha_vencimiento_compra"];
+          }
+
+          // Instrumento venta
+          if (this.tipoOperacion == 1 || this.tipoEjecucion == 1) {
+            this.fecha_operacion_venta =
+              ans["result"]["instrumento_venta"]["fecha_operacion_venta"];
+            this.fecha_liquidacion_venta =
+              ans["result"]["instrumento_venta"]["fecha_liquidacion_venta"];
+            this.precio_unitario_venta =
+              ans["result"]["instrumento_venta"]["precio_unitario_venta"];
+            this.comision_broker_venta =
+              ans["result"]["instrumento_venta"]["comision_broker_venta"];
+            this.cantidad_contratos_venta =
+              ans["result"]["instrumento_venta"]["cantidad_contratos_venta"];
+            this.unidades_contratos_venta =
+              ans["result"]["instrumento_venta"]["unidades_contratos_venta"];
+            this.valor_transado_venta =
+              ans["result"]["instrumento_venta"]["valor_transado_venta"];
+            this.valor_recibido =
+              ans["result"]["instrumento_venta"]["valor_recibido "];
+          }
+          // Si es operacion corto
+          if (this.tipoOperacion == 1) {
+            this.corto = ans["result"]["instrumento_venta"]["corto"];
+            this.fecha_inicio_vigencia =
+              ans["result"]["instrumento_venta"]["fecha_inicio_vigencia"];
+            this.fecha_vencimiento_venta =
+              ans["result"]["instrumento_venta"]["fecha_vencimiento_venta"];
+          }
+
+          this.operation_result = true;
+
+          this.futurosObject = {
+            completo: this.tipoEjecucion,
+            corto: this.tipoOperacion,
+            ticker: this.investmentProposalForm.value.ticker,
+
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia
+          };
+
+          if (this.tipoOperacion == 0 || this.tipoEjecucion == 1) {
+            (this.futurosObject[
+              "precio_unitario_compra"
+            ] = this.investmentProposalForm.value.precio_unitario_compra),
+              (this.futurosObject[
+                "comision_broker_compra"
+              ] = this.investmentProposalForm.value.comision_broker_compra),
+              (this.futurosObject[
+                "cantidad_contratos_compra"
+              ] = this.investmentProposalForm.value.cantidad_contratos_compra),
+              (this.futurosObject[
+                "unidades_contratos_compra"
+              ] = this.investmentProposalForm.value.unidades_contratos_compra),
+              (this.futurosObject["fecha_operacion_compra"] =
+                this.investmentProposalForm.value.fecha_operacion_compra == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_operacion_compra
+                      .singleDate.formatted),
+              (this.futurosObject["fecha_liquidacion_compra"] =
+                this.investmentProposalForm.value.fecha_liquidacion_compra == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_liquidacion_compra
+                      .singleDate.formatted),
+              (this.futurosObject[
+                "valor_transado_compra"
+              ] = this.valor_transado_compra),
+              (this.futurosObject["valor_pagado"] = this.valor_pagado),
+              (this.futurosObject["ganancia_perdida"] = this.ganancia_perdida),
+              (this.futurosObject["rendimiento"] = this.rendimiento);
+          }
+
+          if (this.tipoOperacion == 1 || this.tipoEjecucion == 1) {
+            (this.futurosObject[
+              "precio_unitario_venta"
+            ] = this.investmentProposalForm.value.precio_unitario_venta),
+              (this.futurosObject[
+                "comision_broker_venta"
+              ] = this.investmentProposalForm.value.comision_broker_venta),
+              (this.futurosObject[
+                "cantidad_contratos_venta"
+              ] = this.investmentProposalForm.value.cantidad_contratos_venta),
+              (this.futurosObject[
+                "unidades_contratos_venta"
+              ] = this.investmentProposalForm.value.unidades_contratos_venta),
+              (this.futurosObject["fecha_operacion_venta"] =
+                this.investmentProposalForm.value.fecha_operacion_venta == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_operacion_venta
+                      .singleDate.formatted),
+              (this.futurosObject["fecha_liquidacion_venta"] =
+                this.investmentProposalForm.value.fecha_liquidacion_venta == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_liquidacion_venta
+                      .singleDate.formatted),
+              (this.futurosObject[
+                "valor_transado_venta"
+              ] = this.valor_transado_venta),
+              (this.futurosObject["valor_recibido"] = this.valor_recibido);
+          }
+
+          if (this.tipoOperacion == 0) {
+            this.futurosObject[
+              "fecha_vencimiento_compra"
+            ] = this.fecha_vencimiento_compra;
+          }
+          if (this.tipoOperacion == 1) {
+            this.futurosObject[
+              "fecha_vencimiento_venta"
+            ] = this.fecha_vencimiento_venta;
+          }
+
+          if (this.tipoEjecucion == 1) {
+            this.futurosObject["fecha_cancelado"] = this.datepipe.transform(
+              new Date(),
+              "dd/MM/yyyy"
+            ); //.toISOString().slice(0, 10);
+          }
+
+          this.formDataService.setWork(this.futurosObject);
+          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/opciones/opciones.component.html

@@ -0,0 +1,1158 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Opciones
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <div class="col-6">
+        <div class="form-group">
+          <label>Tipo de operación: </label>
+        </div>
+        <select
+          class="custom-select"
+          formControlName="operacion"
+          (change)="toggle_operacion($event.target.value)"
+        >
+          <option
+            *ngFor="let item of operaciones"
+            [value]="item.codigo"
+            [selected]="
+              instrument_exists == false && item.codigo == instrument_work.corto
+            "
+            >{{ item.nombre }}</option
+          >
+        </select>
+      </div>
+      <div class="col-6">
+        <div class="form-group">
+          <label>Tipo de ejecución: </label>
+        </div>
+        <select
+          class="custom-select"
+          formControlName="ejecucion"
+          (change)="toggle_ejecucion($event.target.value)"
+        >
+          <option
+            *ngFor="let item of ejecuciones"
+            [value]="item.codigo"
+            [selected]="item.codigo == ejecucion"
+          >
+            {{ item.nombre }}</option
+          >
+        </select>
+      </div>
+    </div>
+
+    <div class="row">
+      <!-- Fecha de vencimiento -->
+
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="ticker">Ticker: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-file-alt"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="ticker"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.ticker.errors
+              }"
+            />
+            <div *ngIf="submitted && f.ticker.errors" class="invalid-feedback">
+              <div *ngIf="f.ticker.errors.required">
+                Campo requerido
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <div
+      class="row"
+      *ngIf="tipoOperacion == 0 || (tipoOperacion == 1 && tipoEjecucion == 1)"
+    >
+      <div class="col-sm-12">
+        <h4>Información de compra</h4>
+      </div>
+
+      <!-- Precio unitario compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_unitario_compra">Precio unitario: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_unitario_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_unitario_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_unitario_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_unitario_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_unitario_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comision broker compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_broker_compra">Comisión broker: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_broker_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_broker_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_broker_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_broker_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_broker_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cantidad contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cantidad_contratos_compra">Cantidad de contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cantidad_contratos_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cantidad_contratos_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cantidad_contratos_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cantidad_contratos_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cantidad_contratos_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Unidades contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="unidades_contratos_compra">Unidades contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="unidades_contratos_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.unidades_contratos_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.unidades_contratos_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.unidades_contratos_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.unidades_contratos_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de operación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_operacion_compra">Fecha de operación </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_operacion_compra"
+                (click)="dp0.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp0="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_operacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra">Fecha de liquidación </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)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="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" *ngIf="tipoOperacion == 0">
+      <!-- Fecha de vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra">Fecha de 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_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>
+    </div>
+    <br />
+    <div
+      class="row"
+      *ngIf="tipoOperacion == 1 || (tipoOperacion == 0 && tipoEjecucion == 1)"
+    >
+      <div class="col-sm-12">
+        <h4>Información de venta</h4>
+      </div>
+
+      <!-- Precio unitario compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_unitario_venta">Precio unitario: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_unitario_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_unitario_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_unitario_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_unitario_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_unitario_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comision broker compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_broker_venta">Comisión broker: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_broker_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_broker_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_broker_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_broker_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_broker_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cantidad contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cantidad_contratos_venta">Cantidad de contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cantidad_contratos_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cantidad_contratos_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cantidad_contratos_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cantidad_contratos_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cantidad_contratos_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Unidades contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="unidades_contratos_venta">Unidades contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="unidades_contratos_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.unidades_contratos_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.unidades_contratos_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.unidades_contratos_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.unidades_contratos_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de operación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_operacion_venta">Fecha de operación </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_operacion_venta"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_operacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta">Fecha de liquidación </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)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="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>
+
+    <div class="row" *ngIf="tipoOperacion == 1">
+      <!-- Fecha de vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta">Fecha de 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_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>
+    </div>
+
+    <div class="row">
+      <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>
+
+        <!-- COMPRA -->
+        <div class="col-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoEjecucion == 0 && tipoOperacion == 1
+          "
+        >
+          <h4>NO APLICA</h4>
+        </div>
+
+        <div
+          class="row align-container"
+          *ngIf="
+            operation_result == true &&
+            (tipoOperacion == 0 || tipoEjecucion == 1)
+          "
+        >
+          <div class="col-sm-4">
+            <h4>Precio unitario:</h4>
+            <div class="field">
+              $USD {{ precio_unitario_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Comisión broker:</h4>
+            <div class="field">
+              $USD {{ comision_broker_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Cantidad de contratos:</h4>
+            <div class="field">
+              {{ cantidad_contratos_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Unidades de contratos:</h4>
+            <div class="field">
+              {{ unidades_contratos_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor transado:</h4>
+            <div class="field">
+              $USD {{ valor_transado_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor pagado:</h4>
+            <div class="field">$USD {{ valor_pagado | number: "1.2-4" }}</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Ganancia / pérdida:</h4>
+            <div class="field">
+              $USD {{ ganancia_perdida | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Rendimiento:</h4>
+            <div class="field">{{ rendimiento | number: "1.2-4" }} %</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha operación:</h4>
+            <div class="field">
+              {{ fecha_operacion_compra }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha liquidación:</h4>
+            <div class="field">
+              {{ fecha_liquidacion_compra }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Operación</h4>
+            <div class="field">
+              {{ corto == 0 ? "Largo" : "Corto" }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha vencimiento:</h4>
+            <div class="field">
+              {{ fecha_vencimiento_compra }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha inicio vigencia:</h4>
+            <div class="field">
+              {{ fecha_inicio_vigencia }}
+            </div>
+          </div>
+        </div>
+
+        <!-- VENTA -->
+        <div class="col-12">
+          <h3>
+            Instrumento de venta
+          </h3>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoEjecucion == 0 && tipoOperacion == 0
+          "
+        >
+          <h4>NO APLICA</h4>
+        </div>
+
+        <div
+          class="row align-container"
+          *ngIf="
+            operation_result == true &&
+            (tipoOperacion == 1 || tipoEjecucion == 1)
+          "
+        >
+          <div class="col-sm-4">
+            <h4>Precio unitario:</h4>
+            <div class="field">
+              $USD {{ precio_unitario_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Comisión broker:</h4>
+            <div class="field">
+              $USD {{ comision_broker_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Cantidad de contratos:</h4>
+            <div class="field">
+              {{ cantidad_contratos_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Unidades de contratos:</h4>
+            <div class="field">
+              {{ unidades_contratos_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor transado:</h4>
+            <div class="field">
+              $USD {{ valor_transado_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor recibido:</h4>
+            <div class="field">$USD {{ valor_recibido | number: "1.2-4" }}</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha operación:</h4>
+            <div class="field">
+              {{ fecha_operacion_venta }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha liquidación:</h4>
+            <div class="field">
+              {{ fecha_liquidacion_venta }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Operación</h4>
+            <div class="field">
+              {{ corto == 0 ? "Largo" : "Corto" }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha vencimiento:</h4>
+            <div class="field">
+              {{ fecha_vencimiento_venta }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha inicio vigencia:</h4>
+            <div class="field">
+              {{ fecha_inicio_vigencia }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+
+    <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>
+          Ticker
+        </h3>
+        <div class="field">
+          {{ instrument_work_summary.ticker }}
+        </div>
+      </div>
+      <!-- COMPRA -->
+      <div class="col-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+
+      <div
+        class="col-sm-4"
+        *ngIf="
+          operation_result == true &&
+          instrument_work_summary.completo == 0 &&
+          instrument_work_summary.corto == 1
+        "
+      >
+        <h4>NO APLICA</h4>
+      </div>
+
+      <div
+        class="row align-container"
+        *ngIf="
+          operation_result == true &&
+          (instrument_work_summary.corto == 0 ||
+            instrument_work_summary.completo == 1 ||
+            (instrument_work_summary.valor_pagado != '' &&
+              instrument_work_summary.valor_recibido != ''))
+        "
+      >
+        <div class="col-sm-4">
+          <h4>Precio unitario:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.precio_unitario_compra | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Comisión broker:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.comision_broker_compra | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Cantidad de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.cantidad_contratos_compra
+                | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Unidades de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.unidades_contratos_compra
+                | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor transado:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.valor_transado_compra | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor pagado:</h4>
+          <div class="field">
+            $USD {{ instrument_work_summary.valor_pagado | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Ganancia / pérdida:</h4>
+          <div class="field">
+            $USD
+            {{ instrument_work_summary.ganancia_perdida | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Rendimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.rendimiento | number: "1.2-4" }}%
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha operación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_operacion_compra }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha liquidación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_liquidacion_compra }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Operación</h4>
+          <div class="field">
+            {{ instrument_work_summary.corto == 0 ? "Largo" : "Corto" }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha vencimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_vencimiento_compra }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha inicio vigencia:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_inicio_vigencia }}
+          </div>
+        </div>
+      </div>
+
+      <!-- VENTA -->
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div
+        class="col-sm-4"
+        *ngIf="
+          operation_result == true &&
+          instrument_work_summary.completo == 0 &&
+          instrument_work_summary.corto == 0
+        "
+      >
+        <h4>NO APLICA</h4>
+      </div>
+
+      <div
+        class="row align-container"
+        *ngIf="
+          operation_result == true &&
+          (instrument_work_summary.corto == 1 ||
+            instrument_work_summary.completo == 1 ||
+            (instrument_work_summary.valor_pagado != '' &&
+              instrument_work_summary.valor_recibido != ''))
+        "
+      >
+        <div class="col-sm-4">
+          <h4>Precio unitario:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.precio_unitario_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Comisión broker:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.comision_broker_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Cantidad de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.cantidad_contratos_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Unidades de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.unidades_contratos_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor transado:</h4>
+          <div class="field">
+            $USD
+            {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor recibido:</h4>
+          <div class="field">
+            $USD {{ instrument_work_summary.valor_recibido | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha operación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_operacion_venta }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha liquidación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_liquidacion_venta }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Operación</h4>
+          <div class="field">
+            {{ instrument_work_summary.corto == 0 ? "Largo" : "Corto" }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha vencimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_vencimiento_venta }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha inicio vigencia:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_inicio_vigencia }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,747 @@
+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-opciones",
+  templateUrl: "./opciones.component.html"
+})
+export class OPC implements InstrumentComponent {
+  title: string = "Opciones";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  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_operacion: IMyDateModel;
+  m_fecha_rendencion: IMyDateModel;
+  m_fecha_liquidacion_compra: IMyDateModel;
+
+  submitted: boolean = false;
+  instrument_exists: boolean;
+  instrument_work: any = [];
+  financials: any;
+  base_types: any;
+
+  opcionesObject: {};
+  hasProjections: boolean;
+
+  tipoOperacion: any;
+  tipoEjecucion: any;
+
+  fecha_vencimiento: any;
+  operation_result: boolean = false;
+  operation_results_work: any = [];
+  instrument_work_summary: any = [];
+  fecha_operacion_compra: any;
+  fecha_liquidacion_compra: any;
+  precio_unitario_compra: any;
+  comision_broker_compra: any;
+  cantidad_contratos_compra: any;
+  unidades_contratos_compra: any;
+  valor_transado_compra: any;
+  valor_pagado: any;
+  ganancia_perdida: any;
+  rendimiento: any;
+  corto: any;
+  fecha_inicio_vigencia: any;
+  fecha_vencimiento_compra: any;
+  fecha_operacion_venta: any;
+  fecha_liquidacion_venta: any;
+  precio_unitario_venta: any;
+  comision_broker_venta: any;
+  cantidad_contratos_venta: any;
+  unidades_contratos_venta: any;
+  valor_transado_venta: any;
+  valor_recibido: any;
+  fecha_vencimiento_venta: any;
+  valor_nominal: any;
+  valor_transado: any;
+  comision_casa: any;
+  comision_bolsa: any;
+  fecha_liquidacion: any;
+  operacion: any;
+  ejecucion: any;
+  operaciones = [
+    { codigo: 1, nombre: "Corto" },
+    { codigo: 0, nombre: "Largo" }
+  ];
+  ejecuciones = [
+    { codigo: 1, nombre: "Completa" },
+    { codigo: 0, nombre: "Parcial" }
+  ];
+  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();
+
+    console.log("init");
+    console.log(this.operaciones);
+    console.log(this.instrument_work);
+
+    this.investmentProposalForm = this.formBuilder.group({
+      operacion: [this.instrument_exists ? "" : +this.instrument_work.corto],
+      ejecucion: [this.instrument_exists ? "" : this.ejecucion],
+      ticker: [this.instrument_exists ? "" : this.instrument_work.ticker],
+      precio_unitario_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_unitario_compra
+      ],
+      comision_broker_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_broker_compra
+      ],
+      cantidad_contratos_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cantidad_contratos_compra
+      ],
+      unidades_contratos_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.unidades_contratos_compra
+      ],
+      fecha_operacion_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_operacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_operacion_compra
+              }
+            }
+      ],
+      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
+              }
+            }
+      ],
+      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
+              }
+            }
+      ],
+      precio_unitario_venta: [
+        this.instrument_exists ? "" : this.instrument_work.precio_unitario_venta
+      ],
+      comision_broker_venta: [
+        this.instrument_exists ? "" : this.instrument_work.comision_broker_venta
+      ],
+      cantidad_contratos_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cantidad_contratos_venta
+      ],
+      unidades_contratos_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.unidades_contratos_venta
+      ],
+      fecha_operacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_operacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_operacion_venta
+              }
+            }
+      ],
+      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
+              }
+            }
+      ],
+      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
+              }
+            }
+      ]
+    });
+
+    if (this.instrument_work != undefined) {
+      this.instrument_work_summary = this.instrument_work;
+      this.operation_result = true;
+
+      console.log("datos");
+      console.log(this.instrument_work_summary);
+
+      this.operacion = +this.instrument_work_summary.corto;
+      if (this.instrument_work_summary.completo == undefined) {
+        if (
+          this.instrument_work_summary.valor_pagado > 0 &&
+          this.instrument_work_summary.valor_recibido > 0
+        ) {
+          this.ejecucion = 1;
+        } else if (
+          this.instrument_work_summary.valor_pagado > 0 ||
+          this.instrument_work_summary.valor_recibido > 0
+        ) {
+          this.ejecucion = 0;
+        }
+        this.investmentProposalForm.patchValue({
+          ejecucion: this.ejecucion
+        });
+      } else {
+        this.ejecucion = +this.instrument_work_summary.completo;
+      }
+      this.toggle_operacion(this.operacion);
+      this.toggle_ejecucion(this.ejecucion);
+    }
+  }
+
+  toggle_operacion(input: any) {
+    this.tipoOperacion = +input;
+    this.setValidators();
+  }
+
+  toggle_ejecucion(input: any) {
+    this.tipoEjecucion = +input;
+    this.setValidators();
+  }
+
+  setValidators() {
+    console.log("tipo de operacion");
+    console.log(this.tipoOperacion);
+    console.log("tipo de ejecucion");
+    console.log(this.tipoEjecucion);
+
+    const ticker = this.investmentProposalForm.get("ticker");
+
+    const precio_unitario_compra = this.investmentProposalForm.get(
+      "precio_unitario_compra"
+    );
+    const comision_broker_compra = this.investmentProposalForm.get(
+      "comision_broker_compra"
+    );
+    const cantidad_contratos_compra = this.investmentProposalForm.get(
+      "cantidad_contratos_compra"
+    );
+    const unidades_contratos_compra = this.investmentProposalForm.get(
+      "unidades_contratos_compra"
+    );
+    const fecha_operacion_compra = this.investmentProposalForm.get(
+      "fecha_operacion_compra"
+    );
+    const fecha_liquidacion_compra = this.investmentProposalForm.get(
+      "fecha_liquidacion_compra"
+    );
+    const fecha_vencimiento_compra = this.investmentProposalForm.get(
+      "fecha_vencimiento_compra"
+    );
+    const precio_unitario_venta = this.investmentProposalForm.get(
+      "precio_unitario_venta"
+    );
+    const comision_broker_venta = this.investmentProposalForm.get(
+      "comision_broker_venta"
+    );
+    const cantidad_contratos_venta = this.investmentProposalForm.get(
+      "cantidad_contratos_venta"
+    );
+    const unidades_contratos_venta = this.investmentProposalForm.get(
+      "unidades_contratos_venta"
+    );
+    const fecha_operacion_venta = this.investmentProposalForm.get(
+      "fecha_operacion_venta"
+    );
+    const fecha_liquidacion_venta = this.investmentProposalForm.get(
+      "fecha_liquidacion_venta"
+    );
+    const fecha_vencimiento_venta = this.investmentProposalForm.get(
+      "fecha_vencimiento_venta"
+    );
+
+    ticker.setValidators([Validators.required]);
+
+    if (this.tipoEjecucion == 1) {
+      precio_unitario_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_broker_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cantidad_contratos_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      unidades_contratos_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_operacion_compra.setValidators([Validators.required]);
+      fecha_liquidacion_compra.setValidators([Validators.required]);
+      if (this.tipoOperacion == 0) {
+        fecha_vencimiento_compra.setValidators([Validators.required]);
+        fecha_vencimiento_venta.setValidators(null);
+      }
+      precio_unitario_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_broker_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cantidad_contratos_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      unidades_contratos_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_operacion_venta.setValidators([Validators.required]);
+      fecha_liquidacion_venta.setValidators([Validators.required]);
+
+      if (this.tipoOperacion == 1) {
+        fecha_vencimiento_venta.setValidators([Validators.required]);
+
+        fecha_vencimiento_compra.setValidators(null);
+      }
+    } else {
+      if (this.tipoOperacion == 1) {
+        precio_unitario_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        comision_broker_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        cantidad_contratos_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        unidades_contratos_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        fecha_operacion_venta.setValidators([Validators.required]);
+        fecha_liquidacion_venta.setValidators([Validators.required]);
+        fecha_vencimiento_venta.setValidators(null); //.setValidators([Validators.required]);
+        precio_unitario_compra.setValidators(null);
+        comision_broker_compra.setValidators(null);
+        cantidad_contratos_compra.setValidators(null);
+        unidades_contratos_compra.setValidators(null);
+        fecha_operacion_compra.setValidators(null);
+        fecha_liquidacion_compra.setValidators(null);
+        fecha_vencimiento_compra.setValidators(null);
+      }
+      if (this.tipoOperacion == 0) {
+        precio_unitario_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        comision_broker_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        cantidad_contratos_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        unidades_contratos_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        fecha_operacion_compra.setValidators([Validators.required]);
+        fecha_liquidacion_compra.setValidators([Validators.required]);
+        fecha_vencimiento_compra.setValidators(null); //.setValidators([Validators.required]);
+        precio_unitario_venta.setValidators(null);
+        comision_broker_venta.setValidators(null);
+        cantidad_contratos_venta.setValidators(null);
+        unidades_contratos_venta.setValidators(null);
+        fecha_operacion_venta.setValidators(null);
+        fecha_liquidacion_venta.setValidators(null);
+        fecha_vencimiento_venta.setValidators(null);
+      }
+    }
+
+    precio_unitario_compra.updateValueAndValidity();
+    comision_broker_compra.updateValueAndValidity();
+    cantidad_contratos_compra.updateValueAndValidity();
+    unidades_contratos_compra.updateValueAndValidity();
+    fecha_operacion_compra.updateValueAndValidity();
+    fecha_liquidacion_compra.updateValueAndValidity();
+    fecha_vencimiento_compra.updateValueAndValidity();
+    precio_unitario_venta.updateValueAndValidity();
+    comision_broker_venta.updateValueAndValidity();
+    cantidad_contratos_venta.updateValueAndValidity();
+    unidades_contratos_venta.updateValueAndValidity();
+    fecha_operacion_venta.updateValueAndValidity();
+    fecha_liquidacion_venta.updateValueAndValidity();
+    fecha_vencimiento_venta.updateValueAndValidity();
+  }
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.opcionesObject);
+    return true;
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  getCalculations(form: any, saveForm: boolean) {
+    this.submitted = true;
+    console.log(this.investmentProposalForm);
+    if (!form.valid) {
+      return false;
+    }
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.instrumentCalcService
+      .opcionesFuturosCalc(
+        "OPC", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          completo: this.tipoEjecucion,
+          corto: this.tipoOperacion,
+          precio_unitario_compra: this.f.precio_unitario_compra.value,
+          comision_broker_compra: this.f.comision_broker_compra.value,
+          cantidad_contratos_compra: this.f.cantidad_contratos_compra.value,
+          unidades_contratos_compra: this.f.unidades_contratos_compra.value,
+          fecha_operacion_compra:
+            this.f.fecha_operacion_compra.value == ""
+              ? ""
+              : this.f.fecha_operacion_compra.value.singleDate.formatted,
+          fecha_liquidacion_compra:
+            this.f.fecha_liquidacion_compra.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_compra.value.singleDate.formatted,
+          fecha_vencimiento_compra:
+            this.f.fecha_vencimiento_compra.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_compra.value.singleDate.formatted,
+          precio_unitario_venta: this.f.precio_unitario_venta.value,
+          comision_broker_venta: this.f.comision_broker_venta.value,
+          cantidad_contratos_venta: this.f.cantidad_contratos_venta.value,
+          unidades_contratos_venta: this.f.unidades_contratos_venta.value,
+          fecha_operacion_venta:
+            this.f.fecha_operacion_venta.value == ""
+              ? ""
+              : this.f.fecha_operacion_venta.value.singleDate.formatted,
+          fecha_liquidacion_venta:
+            this.f.fecha_liquidacion_venta.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_venta.value.singleDate.formatted,
+          fecha_vencimiento_venta:
+            this.f.fecha_vencimiento_venta.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_venta.value.singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          // Instrumento compra
+          if (this.tipoOperacion == 0 || this.tipoEjecucion == 1) {
+            this.fecha_operacion_compra =
+              ans["result"]["instrumento_compra"]["fecha_operacion_compra"];
+            this.fecha_liquidacion_compra =
+              ans["result"]["instrumento_compra"]["fecha_liquidacion_compra"];
+            this.precio_unitario_compra =
+              ans["result"]["instrumento_compra"]["precio_unitario_compra"];
+            this.comision_broker_compra =
+              ans["result"]["instrumento_compra"]["comision_broker_compra"];
+            this.cantidad_contratos_compra =
+              ans["result"]["instrumento_compra"]["cantidad_contratos_compra"];
+            this.unidades_contratos_compra =
+              ans["result"]["instrumento_compra"]["unidades_contratos_compra"];
+            this.valor_transado_compra =
+              ans["result"]["instrumento_compra"]["valor_transado_compra"];
+            this.valor_pagado =
+              ans["result"]["instrumento_compra"]["valor_pagado"];
+            this.ganancia_perdida =
+              ans["result"]["instrumento_compra"]["ganancia_perdida"];
+            this.rendimiento =
+              ans["result"]["instrumento_compra"]["rendimiento"];
+          }
+          // Si es operacion largo y ejecucion completa
+
+          if (this.tipoOperacion == 0) {
+            this.corto = ans["result"]["instrumento_compra"]["corto"];
+            this.fecha_inicio_vigencia =
+              ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
+
+            this.fecha_vencimiento_compra =
+              ans["result"]["instrumento_compra"]["fecha_vencimiento_compra"];
+          }
+
+          // Instrumento venta
+          if (this.tipoOperacion == 1 || this.tipoEjecucion == 1) {
+            this.fecha_operacion_venta =
+              ans["result"]["instrumento_venta"]["fecha_operacion_venta"];
+            this.fecha_liquidacion_venta =
+              ans["result"]["instrumento_venta"]["fecha_liquidacion_venta"];
+            this.precio_unitario_venta =
+              ans["result"]["instrumento_venta"]["precio_unitario_venta"];
+            this.comision_broker_venta =
+              ans["result"]["instrumento_venta"]["comision_broker_venta"];
+            this.cantidad_contratos_venta =
+              ans["result"]["instrumento_venta"]["cantidad_contratos_venta"];
+            this.unidades_contratos_venta =
+              ans["result"]["instrumento_venta"]["unidades_contratos_venta"];
+            this.valor_transado_venta =
+              ans["result"]["instrumento_venta"]["valor_transado_venta"];
+            this.valor_recibido =
+              ans["result"]["instrumento_venta"]["valor_recibido "];
+          }
+          // Si es operacion corto
+          if (this.tipoOperacion == 1) {
+            this.corto = ans["result"]["instrumento_venta"]["corto"];
+            this.fecha_inicio_vigencia =
+              ans["result"]["instrumento_venta"]["fecha_inicio_vigencia"];
+            this.fecha_vencimiento_venta =
+              ans["result"]["instrumento_venta"]["fecha_vencimiento_venta"];
+          }
+
+          this.operation_result = true;
+
+          this.opcionesObject = {
+            completo: this.tipoEjecucion,
+            corto: this.tipoOperacion,
+            ticker: this.investmentProposalForm.value.ticker,
+
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia
+          };
+
+          if (this.tipoOperacion == 0 || this.tipoEjecucion == 1) {
+            (this.opcionesObject[
+              "precio_unitario_compra"
+            ] = this.investmentProposalForm.value.precio_unitario_compra),
+              (this.opcionesObject[
+                "comision_broker_compra"
+              ] = this.investmentProposalForm.value.comision_broker_compra),
+              (this.opcionesObject[
+                "cantidad_contratos_compra"
+              ] = this.investmentProposalForm.value.cantidad_contratos_compra),
+              (this.opcionesObject[
+                "unidades_contratos_compra"
+              ] = this.investmentProposalForm.value.unidades_contratos_compra),
+              (this.opcionesObject["fecha_operacion_compra"] =
+                this.investmentProposalForm.value.fecha_operacion_compra == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_operacion_compra
+                      .singleDate.formatted),
+              (this.opcionesObject["fecha_liquidacion_compra"] =
+                this.investmentProposalForm.value.fecha_liquidacion_compra == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_liquidacion_compra
+                      .singleDate.formatted),
+              (this.opcionesObject[
+                "valor_transado_compra"
+              ] = this.valor_transado_compra),
+              (this.opcionesObject["valor_pagado"] = this.valor_pagado),
+              (this.opcionesObject["ganancia_perdida"] = this.ganancia_perdida),
+              (this.opcionesObject["rendimiento"] = this.rendimiento);
+          }
+
+          if (this.tipoOperacion == 1 || this.tipoEjecucion == 1) {
+            (this.opcionesObject[
+              "precio_unitario_venta"
+            ] = this.investmentProposalForm.value.precio_unitario_venta),
+              (this.opcionesObject[
+                "comision_broker_venta"
+              ] = this.investmentProposalForm.value.comision_broker_venta),
+              (this.opcionesObject[
+                "cantidad_contratos_venta"
+              ] = this.investmentProposalForm.value.cantidad_contratos_venta),
+              (this.opcionesObject[
+                "unidades_contratos_venta"
+              ] = this.investmentProposalForm.value.unidades_contratos_venta),
+              (this.opcionesObject["fecha_operacion_venta"] =
+                this.investmentProposalForm.value.fecha_operacion_venta == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_operacion_venta
+                      .singleDate.formatted),
+              (this.opcionesObject["fecha_liquidacion_venta"] =
+                this.investmentProposalForm.value.fecha_liquidacion_venta == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_liquidacion_venta
+                      .singleDate.formatted),
+              (this.opcionesObject[
+                "valor_transado_venta"
+              ] = this.valor_transado_venta),
+              (this.opcionesObject["valor_recibido"] = this.valor_recibido);
+          }
+
+          if (this.tipoOperacion == 0) {
+            this.opcionesObject[
+              "fecha_vencimiento_compra"
+            ] = this.fecha_vencimiento_compra;
+          }
+          if (this.tipoOperacion == 1) {
+            this.opcionesObject[
+              "fecha_vencimiento_venta"
+            ] = this.fecha_vencimiento_venta;
+          }
+
+          if (this.tipoEjecucion == 1) {
+            this.opcionesObject["fecha_cancelado"] = this.datepipe.transform(
+              new Date(),
+              "dd/MM/yyyy"
+            ); //.toISOString().slice(0, 10);
+          }
+
+          this.formDataService.setWork(this.opcionesObject);
+          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/pbur/pbur.component.html

@@ -9,14 +9,26 @@
     <div class="row">
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group form-check">
-          <input
-            type="checkbox"
-            class="form-check-input"
-            id="valor_par"
-            formControlName="valor_par"
-            [checked]="f.valor_par.value"
-          />
-          <label class="form-check-label" for="valor_par">Valor par</label>
+          <ng-container *ngIf="investmentID == undefined; else elseTemplate">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="valor_par"
+              formControlName="valor_par"
+              [checked]="f.valor_par.value"
+            />
+            <label class="form-check-label" for="valor_par">Valor par</label>
+          </ng-container>
+          <ng-template #elseTemplate>
+            <input
+              type="hidden"
+              formControlName="valor_par"
+              [value]="f.valor_par.value"
+            />
+            <label
+              >Valor par: {{ f.valor_par.value == true ? "Si" : "No" }}</label
+            >
+          </ng-template>
         </div>
       </div>
 
@@ -407,12 +419,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -424,6 +438,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_bruto">
@@ -435,6 +450,12 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -445,40 +466,73 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_cedeval">
               <th mat-header-cell *matHeaderCellDef>Costo CEDEVAL</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_cedeval | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD $USD
+                {{
+                  consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.renta | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_transferencia">
               <th mat-header-cell *matHeaderCellDef>Costo transferencia</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_transferencia | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD $USD
+                {{
+                  consolidado_proyeccion.total_costo_transferencia
+                    | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_banco">
               <th mat-header-cell *matHeaderCellDef>Costo banco</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_banco | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="otros_costos">
               <th mat-header-cell *matHeaderCellDef>Otros costos</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.otros_costos | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD $USD
+                {{
+                  consolidado_proyeccion.total_otros_costos | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator
@@ -658,12 +712,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -675,6 +731,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_bruto">
@@ -686,6 +743,12 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -696,40 +759,73 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_cedeval">
               <th mat-header-cell *matHeaderCellDef>Costo CEDEVAL</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_cedeval | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.renta | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_transferencia">
               <th mat-header-cell *matHeaderCellDef>Costo transferencia</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_transferencia | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_costo_transferencia
+                    | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_banco">
               <th mat-header-cell *matHeaderCellDef>Costo banco</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_banco | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="otros_costos">
               <th mat-header-cell *matHeaderCellDef>Otros costos</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.otros_costos | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_otros_costos | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator

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

@@ -92,6 +92,16 @@ export class PBUR implements InstrumentComponent {
 
   dataSource = new MatTableDataSource(this.proyecciones);
   dataSource2 = new MatTableDataSource(this.proyecciones);
+  consolidado_proyeccion = {
+    total_ingreso_bruto: 0,
+    total_ingreso_neto: 0,
+    total_costo_cedeval: 0,
+    total_renta: 0,
+    total_costo_transferencia: 0,
+    total_costo_banco: 0,
+    total_otros_costos: 0
+  };
+
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   fecha_vencimiento: any;
@@ -113,9 +123,12 @@ export class PBUR implements InstrumentComponent {
       this.instrument_work.proyecciones != undefined
     ) {
       this.hasProjections = true;
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
     } else {
       this.hasProjections = false;
     }
@@ -298,8 +311,13 @@ export class PBUR implements InstrumentComponent {
           this.comision_casa = ans["result"]["comision_casa"];
           this.interes_acumulado = ans["result"]["interes_acumulado"];
           this.fecha_inicio_vigencia = ans["result"]["fecha_inicio_vigencia"];
-          this.proyecciones = ans["result"]["proyecciones"];
           this.fecha_vencimiento = ans["result"]["fecha_vencimiento"];
+          this.proyecciones = ans["result"]["proyecciones"];
+
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.consolidado_proyeccion = this.proyecciones.slice(0, -1);
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
 
           if (this.f.valor_par.value == true) {
             this.hasProjections = true;

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

@@ -1026,7 +1026,7 @@
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
-    <div class="instrument-calcs">
+    <div *ngIf="hasProjections" class="instrument-calcs">
       <div class="row">
         <div class="col-12">
           <span class="badge badge-success badge-custom"
@@ -1042,6 +1042,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -1049,6 +1050,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -1060,6 +1062,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="cuota">
@@ -1071,6 +1074,9 @@
                     : (row.cuota | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD {{ consolidado_proyeccion.total_cuota | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="amortizacion_porcentaje">
               <th mat-header-cell *matHeaderCellDef>Porcentaje amortización</th>
@@ -1082,6 +1088,12 @@
                     : (row.amortizacion_porcentaje | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_amortizacion_porcentaje
+                    | number: "1.2-4"
+                }}%
+              </td>
             </ng-container>
             <ng-container matColumnDef="amortizacion_capital">
               <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
@@ -1093,6 +1105,13 @@
                     : (row.amortizacion_capital | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_amortizacion_capital
+                    | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -1103,6 +1122,12 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="impuesto">
               <th mat-header-cell *matHeaderCellDef>Impuesto</th>
@@ -1113,6 +1138,10 @@
                     : (row.impuesto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -1123,6 +1152,12 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="saldo">
@@ -1134,10 +1169,14 @@
                     : (row.saldo | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD {{ consolidado_proyeccion.total_saldo | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator
@@ -1627,6 +1666,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -1634,6 +1674,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -1645,6 +1686,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="cuota">
@@ -1656,6 +1698,9 @@
                     : (row.cuota | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD {{ consolidado_proyeccion.total_cuota | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="amortizacion_porcentaje">
               <th mat-header-cell *matHeaderCellDef>Porcentaje amortización</th>
@@ -1667,6 +1712,12 @@
                     : (row.amortizacion_porcentaje | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_amortizacion_porcentaje
+                    | number: "1.2-4"
+                }}%
+              </td>
             </ng-container>
             <ng-container matColumnDef="amortizacion_capital">
               <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
@@ -1678,6 +1729,12 @@
                     : (row.amortizacion_capital | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD{{
+                  consolidado_proyeccion.total_amortizacion_capital
+                    | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -1688,6 +1745,11 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD{{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="impuesto">
               <th mat-header-cell *matHeaderCellDef>Impuesto</th>
@@ -1698,6 +1760,11 @@
                     : (row.impuesto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD{{
+                  consolidado_proyeccion.total_impuesto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -1708,6 +1775,11 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD{{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="saldo">
@@ -1719,10 +1791,14 @@
                     : (row.saldo | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD{{ consolidado_proyeccion.total_saldo | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>

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

@@ -136,6 +136,7 @@ export class TIT implements InstrumentComponent {
   ytm_vencimiento_porcentaje_compra: any;
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
+  consolidado_proyeccion: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -155,6 +156,9 @@ export class TIT implements InstrumentComponent {
       this.instrument_work.proyecciones != ""
     ) {
       this.hasProjections = true;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
       this.operation_results_work = this.instrument_work["resultado_operacion"];
 
       if (this.instrument_work["instrumento"] != undefined) {
@@ -162,12 +166,13 @@ export class TIT implements InstrumentComponent {
       }
       this.instrument_work_summary = this.instrument_work;
 
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
       this.hasProjections = false;
     }
+
     if (!this.instrument_exists) {
       this.amortizaciones = this.instrument_work.amortizacion_porcentajes;
     }
@@ -179,6 +184,14 @@ export class TIT implements InstrumentComponent {
     }
 
     this.investmentProposalForm = this.formBuilder.group({
+      costo_cedeval: [
+        this.instrument_exists ? "" : this.instrument_work.costo_cedeval,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
       costo_transferencia: [
         this.instrument_exists ? "" : this.instrument_work.costo_transferencia,
         [
@@ -243,58 +256,34 @@ export class TIT implements InstrumentComponent {
       ],
 
       precio_venta: [
-        this.instrument_exists ? "" : this.instrument_work.precio_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.precio_venta
       ],
 
       valor_nominal_venta: [
-        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta
       ],
 
       precio_vencimiento_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.precio_vencimiento_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.precio_vencimiento_venta
       ],
 
       cupon_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.cupon_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.cupon_porcentaje_venta
       ],
 
       comision_casa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_casa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_casa_porcentaje_venta
       ],
       comision_bolsa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_bolsa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_bolsa_porcentaje_venta
       ],
 
       fecha_ultima_cupon_compra: [
@@ -358,8 +347,7 @@ export class TIT implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_ultima_cupon_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_liquidacion_venta: [
         this.instrument_exists
@@ -374,8 +362,7 @@ export class TIT implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_liquidacion_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_vencimiento_venta: [
         this.instrument_exists
@@ -390,8 +377,7 @@ export class TIT implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_vencimiento_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_emision: [
         this.instrument_exists
@@ -621,9 +607,15 @@ export class TIT implements InstrumentComponent {
 
           // Proyecciones
           this.proyecciones = ans["result"]["proyecciones"];
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
 
-          this.dataSource.data = this.proyecciones;
-          this.dataSource2.data = this.proyecciones;
+          this.dataSource.data = this.proyecciones.slice(0, -1);
+          this.dataSource2.data = this.proyecciones.slice(0, -1);
 
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;

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

@@ -9,14 +9,26 @@
     <div class="row">
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group form-check">
-          <input
-            type="checkbox"
-            class="form-check-input"
-            id="valor_par"
-            formControlName="valor_par"
-            [checked]="f.valor_par.value"
-          />
-          <label class="form-check-label" for="valor_par">Valor par</label>
+          <ng-container *ngIf="investmentID == undefined; else elseTemplate">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="valor_par"
+              formControlName="valor_par"
+              [checked]="f.valor_par.value"
+            />
+            <label class="form-check-label" for="valor_par">Valor par</label>
+          </ng-container>
+          <ng-template #elseTemplate>
+            <input
+              type="hidden"
+              formControlName="valor_par"
+              [value]="f.valor_par.value"
+            />
+            <label
+              >Valor par: {{ f.valor_par.value == true ? "Si" : "No" }}</label
+            >
+          </ng-template>
         </div>
       </div>
 
@@ -377,9 +389,7 @@
         </div>
         <div class="col-sm-6">
           <h4>Precio porcentaje:</h4>
-          <div class="field">
-            {{ precio_porcentaje | number: "1.2-4" }}
-          </div>
+          <div class="field">{{ precio_porcentaje | number: "1.2-4" }} %</div>
         </div>
         <div class="col-sm-6">
           <h4>Rendimiento neto:</h4>
@@ -422,12 +432,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -439,8 +451,8 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
-
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
@@ -450,6 +462,12 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -460,44 +478,78 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_cedeval">
               <th mat-header-cell *matHeaderCellDef>Costo CEDEVAL</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_cedeval | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.renta | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_transferencia">
               <th mat-header-cell *matHeaderCellDef>Costo transferencia</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_transferencia | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_costo_transferencia
+                    | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_banco">
               <th mat-header-cell *matHeaderCellDef>Costo banco</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_banco | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="otros_costos">
               <th mat-header-cell *matHeaderCellDef>Otros costos</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.otros_costos | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_otros_costos | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator
-            [pageSizeOptions]="[10, 15, 25]"
+            [pageSizeOptions]="[5, 10, 25, dataSource2.data.length]"
+            [length]="dataSource2.data.length"
             [pageIndex]="0"
             [pageSize]="10"
           ></mat-paginator>
@@ -672,12 +724,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -689,8 +743,8 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
-
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
@@ -700,6 +754,12 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -710,40 +770,73 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_cedeval">
               <th mat-header-cell *matHeaderCellDef>Costo CEDEVAL</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_cedeval | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.renta | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_transferencia">
               <th mat-header-cell *matHeaderCellDef>Costo transferencia</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_transferencia | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_costo_transferencia
+                    | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_banco">
               <th mat-header-cell *matHeaderCellDef>Costo banco</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_banco | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="otros_costos">
               <th mat-header-cell *matHeaderCellDef>Otros costos</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.otros_costos | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                $USD
+                {{
+                  consolidado_proyeccion.total_otros_costos | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator

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

@@ -94,6 +94,15 @@ export class VCN implements InstrumentComponent {
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   dataSource = new MatTableDataSource(this.proyecciones);
   dataSource2 = new MatTableDataSource(this.proyecciones);
+  consolidado_proyeccion = {
+    total_ingreso_bruto: 0,
+    total_ingreso_neto: 0,
+    total_costo_cedeval: 0,
+    total_renta: 0,
+    total_costo_transferencia: 0,
+    total_costo_banco: 0,
+    total_otros_costos: 0
+  };
 
   constructor(
     private formBuilder: FormBuilder,
@@ -113,9 +122,12 @@ export class VCN implements InstrumentComponent {
       this.instrument_work.proyecciones != undefined
     ) {
       this.hasProjections = true;
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
     } else {
       this.hasProjections = false;
     }
@@ -311,6 +323,11 @@ export class VCN implements InstrumentComponent {
           this.fecha_inicio_vigencia = ans["result"]["fecha_inicio_vigencia"];
           this.proyecciones = ans["result"]["proyecciones"];
 
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.consolidado_proyeccion = this.proyecciones.slice(0, -1);
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
+
           if (this.f.valor_par.value == true) {
             this.hasProjections = true;
           } else {

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

@@ -80,23 +80,15 @@
                       <div class="form-group">
                         <label for="emisores">Emisores: </label>
 
-                        <select
-                          class="custom-select"
+                        <ng-select
+                          #emisorSelect
+                          [options]="emitters"
                           formControlName="emisores"
                           [ngClass]="{
                             'is-invalid': submitted && f.emisores.errors
                           }"
                         >
-                          <option
-                            *ngFor="let item of emitters"
-                            [value]="item.id_tipo_emisor"
-                            [selected]="
-                              item.id_tipo_emisor == complementInfo.emisores
-                            "
-                          >
-                            {{ item.nombre }}</option
-                          >
-                        </select>
+                        </ng-select>
                         <div
                           *ngIf="submitted && f.emisores.errors"
                           class="invalid-feedback"

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Router, ActivatedRoute } from "@angular/router";
 
 import { ComplementInfo } from "@app/models/investment-proposal-form";
@@ -8,6 +8,7 @@ import { CatalogsService } from "@app/services/catalogs.service";
 import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
 import { formatDate, DatePipe } from "@angular/common";
 import { parse } from "date-fns";
+import { IOption } from "ng-select";
 
 @Component({
   selector: "app-complement-info",
@@ -54,7 +55,7 @@ export class ComplementInfoComponent implements OnInit {
   submitted: boolean = false;
   role_number: any;
   markets: any;
-  emitters: any;
+  emitters: Array<IOption>;
   periodicities: any;
   rate_agencies: any;
   scores: any;
@@ -65,8 +66,12 @@ export class ComplementInfoComponent implements OnInit {
   operations: any;
   payment_terms: any;
 
-  complementInfoExists: boolean;
+  complementInfoDontExists: boolean;
   companyValue: any;
+  instrumentInfo: any;
+  @ViewChild("emisorSelect", { static: false })
+  public emisorSelect: any;
+
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -83,9 +88,13 @@ export class ComplementInfoComponent implements OnInit {
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
     this.complementInfo = this.formDataService.getComplementInfo();
-    this.complementInfoExists = this.complementInfo == undefined;
+    this.complementInfoDontExists = this.complementInfo == undefined;
+
+    this.instrumentInfo = this.formDataService.getGeneralInfo().instrumentos;
+    console.log(this.instrumentInfo);
+    console.log(this.complementInfo);
 
-    this.catalogService.getCompanies().subscribe(res => {
+    this.catalogService.getCatalogInfo("empresas").subscribe(res => {
       this.companies = res;
 
       if (this.investmentProposalID != undefined) {
@@ -97,15 +106,25 @@ export class ComplementInfoComponent implements OnInit {
           this.companyValue != undefined ? this.companyValue.nombre : "-";
       }
     });
-    this.catalogService.getCountries().subscribe(res => {
+    this.catalogService.getCatalogInfo("paises").subscribe(res => {
       this.countries = res;
     });
 
-    this.catalogService.getMarketTypes().subscribe(res => {
+    this.catalogService.getCatalogInfo("tipos-mercados").subscribe(res => {
       this.markets = res;
     });
-    this.catalogService.getEmitterTypes().subscribe(res => {
-      this.emitters = res;
+    this.catalogService.getCatalogInfo("tipos-emisores").subscribe(res => {
+      this.emitters = [];
+      for (let property in res) {
+        this.emitters.push({
+          label: res[property]["nombre"],
+          value: res[property]["id_tipo_emisor"].toString()
+        });
+      }
+
+      if (this.complementInfo.emisores.toString() != "") {
+        this.emisorSelect.select(this.complementInfo.emisores.toString());
+      }
     });
 
     this.catalogService.getRateAgencies().subscribe(res => {
@@ -120,46 +139,158 @@ export class ComplementInfoComponent implements OnInit {
       this.payment_terms = res;
     });
 
-    this.catalogService.getOperationTypes().subscribe(res => {
+    this.catalogService.getCatalogInfo("tipos-operaciones").subscribe(res => {
       this.operations = res;
     });
 
     this.investmentProposalForm = this.formBuilder.group({
       tipo_mercado: [
-        this.complementInfoExists ? "" : this.complementInfo.tipo_mercado,
+        this.complementInfoDontExists ? "" : this.complementInfo.tipo_mercado,
         [Validators.required]
       ],
 
       emisores: [
-        this.complementInfoExists ? "" : this.complementInfo.emisores,
+        this.complementInfoDontExists
+          ? ""
+          : this.complementInfo.emisores.toString(),
         [Validators.required]
       ],
       empresa: [
-        this.complementInfoExists ? "" : this.complementInfo.empresa,
+        this.complementInfoDontExists ? "" : this.complementInfo.empresa,
         [Validators.required]
       ],
       pais: [
-        this.complementInfoExists ? "" : this.complementInfo.pais,
+        this.complementInfoDontExists ? "" : this.complementInfo.pais,
         [Validators.required]
       ],
       plazo: [
-        this.complementInfoExists ? "" : this.complementInfo.plazo,
+        this.complementInfoDontExists ? "" : this.complementInfo.plazo,
         [Validators.required]
       ],
       operaciones: [
-        this.complementInfoExists ? "" : this.complementInfo.operaciones,
+        this.complementInfoDontExists ? "" : this.complementInfo.operaciones,
         [Validators.required]
       ],
 
       comentarios: [
-        this.complementInfoExists ? "" : this.complementInfo.comentarios,
+        this.complementInfoDontExists ? "" : this.complementInfo.comentarios,
         []
       ],
       justificacion: [
-        this.complementInfoExists ? "" : this.complementInfo.justificacion,
+        this.complementInfoDontExists ? "" : this.complementInfo.justificacion,
         []
       ]
     });
+
+    // Set default values depending of the instrument
+    if (
+      this.complementInfoDontExists == true ||
+      Object.values(this.complementInfo).every(x => x === null || x === "")
+    ) {
+      switch (this.instrumentInfo) {
+        case "LETE":
+          this.investmentProposalForm.patchValue({
+            emisores: this.investmentProposalForm.value.emisores = "985",
+            pais: this.investmentProposalForm.value.pais = 210
+          });
+          break;
+        case "CETE":
+          this.investmentProposalForm.patchValue({
+            emisores: this.investmentProposalForm.value.emisores = "985",
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "VCN":
+          this.investmentProposalForm.patchValue({
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "PBUR":
+          this.investmentProposalForm.patchValue({
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "DAP":
+          this.investmentProposalForm.patchValue({
+            tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 5,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "BONO":
+          this.investmentProposalForm.patchValue({
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "EURB":
+          this.investmentProposalForm.patchValue({
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "CINV":
+          this.investmentProposalForm.patchValue({
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "TIT":
+          this.investmentProposalForm.patchValue({
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "FINV":
+          this.investmentProposalForm.patchValue({
+            tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 5,
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "OPC":
+          this.investmentProposalForm.patchValue({
+            //tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 0,
+            pais: this.investmentProposalForm.value.pais = 233,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "FUTU":
+          this.investmentProposalForm.patchValue({
+            //tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 0,
+            pais: this.investmentProposalForm.value.pais = 233,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "PEMP":
+          this.investmentProposalForm.patchValue({
+            tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 5,
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "PPER":
+          this.investmentProposalForm.patchValue({
+            tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 5,
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+      }
+    }
   }
 
   get f() {
@@ -167,9 +298,10 @@ export class ComplementInfoComponent implements OnInit {
   }
 
   save(form: any): boolean {
-    //if (!form.valid) {
-    //return false;
-    //}
+    this.submitted = true;
+    if (!form.valid) {
+      return false;
+    }
     this.formDataService.setComplementInfo(this.investmentProposalForm.value);
     return true;
   }
@@ -186,8 +318,6 @@ export class ComplementInfoComponent implements OnInit {
   }
 
   goToNext(form: any) {
-    this.submitted = true;
-
     if (this.save(form)) {
       if (this.investmentProposalID != undefined) {
         this.router.navigate(["/investment-proposal/result"], {

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

@@ -128,6 +128,54 @@
                         </div>
                       </div>
                     </div>
+
+                    <div class="col-lg-6 col-sm-12 pr-xl-3">
+                      <div class="form-group">
+                        <label for="instrumentos">Instrumentos: </label>
+                        <ng-container
+                          *ngIf="
+                            investmentProposalID == undefined;
+                            else elseTemplate
+                          "
+                        >
+                          <ng-select
+                            #instrumentType
+                            [options]="instrumentTypes"
+                            formControlName="instrumentos"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.instrumentos.errors
+                            }"
+                            (selected)="pre_filled_fields($event)"
+                          >
+                          </ng-select>
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                          <input
+                            type="text"
+                            [value]="instrumentValue"
+                            name="x"
+                            class="form-control"
+                            readonly
+                          />
+                          <input
+                            type="hidden"
+                            formControlName="instrumentos"
+                            class="form-control"
+                            [value]="general.instrumentos"
+                            readonly
+                          />
+                        </ng-template>
+                        <div
+                          *ngIf="submitted && f.instrumentos.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.instrumentos.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
                         <label for="tipo_tasa">Tipo Tasa: </label>
@@ -156,8 +204,7 @@
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div class="row">
+
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
                         <label for="tipo_renta">Tipo Renta: </label>
@@ -188,57 +235,6 @@
                         </div>
                       </div>
                     </div>
-                    <div class="col-lg-6 col-sm-12 pr-xl-3">
-                      <div class="form-group">
-                        <label for="instrumentos">Instrumentos: </label>
-                        <ng-container
-                          *ngIf="
-                            investmentProposalID == undefined;
-                            else elseTemplate
-                          "
-                        >
-                          <select
-                            class="custom-select"
-                            formControlName="instrumentos"
-                            [ngClass]="{
-                              'is-invalid': submitted && f.instrumentos.errors
-                            }"
-                          >
-                            <option
-                              *ngFor="let item of instrumentTypes"
-                              [selected]="item.codigo == general.instrumentos"
-                              [value]="item.codigo"
-                            >
-                              {{ item.nombre }}</option
-                            >
-                          </select>
-                        </ng-container>
-                        <ng-template #elseTemplate>
-                          <input
-                            type="text"
-                            [value]="instrumentValue"
-                            name="x"
-                            class="form-control"
-                            readonly
-                          />
-                          <input
-                            type="hidden"
-                            formControlName="instrumentos"
-                            class="form-control"
-                            [value]="general.instrumentos"
-                            readonly
-                          />
-                        </ng-template>
-                        <div
-                          *ngIf="submitted && f.instrumentos.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.instrumentos.errors.required">
-                            Campo requerido
-                          </div>
-                        </div>
-                      </div>
-                    </div>
 
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
@@ -306,24 +302,16 @@
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
                         <label for="casa">Casa: </label>
-
-                        <select
-                          class="custom-select"
+                        <ng-select
+                          #casaSelect
+                          [options]="financials"
                           formControlName="casa"
                           [ngClass]="{
                             'is-invalid': submitted && f.casa.errors
                           }"
                         >
-                          <option
-                            *ngFor="let item of financials"
-                            [value]="item.id_entidad_financiera"
-                            [selected]="
-                              item.id_entidad_financiera == general.casa
-                            "
-                          >
-                            {{ item.nombre }}
-                          </option>
-                        </select>
+                        </ng-select>
+
                         <div
                           *ngIf="submitted && f.casa.errors"
                           class="invalid-feedback"

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

@@ -4,7 +4,8 @@ import {
   OnChanges,
   ViewChild,
   ComponentRef,
-  Type
+  Type,
+  ElementRef
 } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import Swal from "sweetalert2";
@@ -19,6 +20,7 @@ import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
 import { InvestmentsService } from "@app/services/investments.service";
 import { DatePipe } from "@angular/common";
 import { parse } from "date-fns";
+import { IOption } from "ng-select";
 
 @Component({
   selector: "app-new-investment-proposal",
@@ -73,11 +75,11 @@ export class InvestmentProposalGeneralInfoComponent
   rates: any;
   revenues: any;
   funds: any;
-  instrumentTypes: any;
+  instrumentTypes: Array<IOption>;
   generalInfoDontExists: boolean;
   plazos: any;
   base_types: any;
-  financials: any;
+  financials: Array<IOption>;
   format_incomes: any;
 
   gInfo: any;
@@ -86,6 +88,17 @@ export class InvestmentProposalGeneralInfoComponent
   datez: any;
   instrumentName: any;
   instrumentValue: any;
+
+  myOptions: Array<IOption> = [
+    { label: "Belgium", value: "BE" },
+    { label: "Luxembourg", value: "LU" },
+    { label: "Netherlands", value: "NL" }
+  ];
+
+  @ViewChild("instrumentType", { static: false })
+  public instrumentType: any;
+  @ViewChild("casaSelect", { static: false })
+  public casaSelect: any;
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -197,19 +210,21 @@ export class InvestmentProposalGeneralInfoComponent
               this.formDataService.setGeneralInfo(this.gInfo);
               this.general = this.formDataService.getGeneralInfo();
               this.generalInfoDontExists = this.general == undefined;
-              this.investmentProposalForm.setValue({
+              this.investmentProposalForm.patchValue({
                 asunto: this.gInfo.asunto,
                 origenes_fondo: this.gInfo.origenes_fondo,
                 name: this.gInfo.name,
                 tipo_tasa: this.gInfo.tipo_tasa,
                 tipo_renta: this.gInfo.tipo_renta,
                 periodicidad: this.gInfo.periodicidad,
-
                 instrumentos: this.gInfo.instrumentos,
                 base_anual: this.gInfo.base_anual,
-                casa: this.gInfo.casa,
+                casa: this.gInfo.casa.toString(),
                 formato_ingreso: this.gInfo.formato_ingreso
               });
+              if (this.gInfo.casa != "") {
+                this.casaSelect.select(this.gInfo.casa.toString());
+              }
             }
 
             this.instrument = this.formDataService.getWork();
@@ -249,7 +264,13 @@ export class InvestmentProposalGeneralInfoComponent
     });
 
     this.catalogService.getFinancialEntities().subscribe(res => {
-      this.financials = res;
+      this.financials = [];
+      for (let property in res) {
+        this.financials.push({
+          label: res[property]["nombre"],
+          value: res[property]["id_entidad_financiera"].toString()
+        });
+      }
     });
 
     this.catalogService.getBaseTypes().subscribe(res => {
@@ -269,8 +290,23 @@ export class InvestmentProposalGeneralInfoComponent
       this.funds = res;
     });
     this.catalogService.getInstrumentTypes().subscribe(res => {
-      this.instrumentTypes = res;
+      res;
+      this.instrumentTypes = [];
+
+      for (let property in res) {
+        this.instrumentTypes.push({
+          label: res[property]["nombre"],
+          value: res[property]["codigo"]
+        });
+      }
       if (this.generalInfoDontExists == false) {
+        if (
+          this.instrumentType != undefined &&
+          (this.general.instrumentos != "" ||
+            this.general.instrumentos != undefined)
+        ) {
+          this.instrumentType.select(this.general.instrumentos);
+        }
         this.instrumentName = res.find(
           e => e.codigo == this.general.instrumentos
         );
@@ -350,4 +386,120 @@ export class InvestmentProposalGeneralInfoComponent
   get f() {
     return this.investmentProposalForm.controls;
   }
+
+  pre_filled_fields(event: IOption) {
+    const selectedInstrument = event.value;
+    switch (selectedInstrument) {
+      case "LETE":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          periodicidad: this.investmentProposalForm.value.periodicidad = 7,
+          base_anual: 6
+        });
+
+      case "CETE":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          periodicidad: this.investmentProposalForm.value.periodicidad = 7,
+          base_anual: 6
+        });
+        break;
+
+      case "VCN":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2
+        });
+        break;
+
+      case "PBUR":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2
+        });
+        break;
+
+      case "DAP":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 8
+        });
+        break;
+
+      case "BONO":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+
+      case "EURB":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 6
+        });
+        break;
+
+      case "CINV":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+
+      case "TIT":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+
+      case "FINV":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+
+      case "OPC":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 3,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 3,
+          base_anual: 7
+        });
+        break;
+
+      case "FUTU":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 3,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 3,
+          base_anual: 7
+        });
+        break;
+
+      case "PEMP":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+
+      case "PPER":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+    }
+  }
 }

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

@@ -121,6 +121,19 @@
                       >
                         <i class="fas fa-info"></i>
                       </a>
+                      <a
+                        *ngIf="
+                          can_upload_file(
+                            row.id_estado_inversion.codigo,
+                            row.hoja_liquidacion
+                          ) && userType(userRole, 'analistas')
+                        "
+                        title="Subir hoja de liquidación"
+                        class="btn btn-danger btn-custom-small"
+                        (click)="upload_liquidation_file(row.id_inversion)"
+                      >
+                        <i class="fas fa-file-upload"></i>
+                      </a>
                       <a
                         *ngIf="
                           can_modify(row.id_estado_inversion.codigo) &&

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

@@ -6,5 +6,5 @@
 
 .btn-custom-small {
   padding: 7px 12px 5px 13px;
-  margin: 0 4px;
+  margin: 5px 4px;
 }

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

@@ -130,6 +130,19 @@ export class InvestmentProposalsComponent implements OnInit {
     }
   }
 
+  upload_liquidation_file(id: string) {
+    this.formInvestmentProposal.resetFormData();
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    setTimeout(() => {
+      this.router.navigate([`/investment-proposal/${id}/upload-file`]);
+    }, 1000);
+  }
+
   view_investment_proposal(id: string) {
     this.formInvestmentProposal.resetFormData();
     Swal.fire({
@@ -178,6 +191,7 @@ export class InvestmentProposalsComponent implements OnInit {
       status == "NUEVA" ||
       status == "RECHA" ||
       status == "APROB" ||
+      status == "PGNPR" ||
       status == "LIQUI"
     ) {
       return true;
@@ -186,6 +200,22 @@ export class InvestmentProposalsComponent implements OnInit {
     }
   }
 
+  can_upload_file(status: string, file: string) {
+    if (
+      (status == "APROB" ||
+        status == "LIQUI" ||
+        status == "COMPR" ||
+        status == "PGAPR" ||
+        status == "PGNPR" ||
+        status == "LIQUI") &&
+      file == null
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   // Verifica permisos para mostrar boton de edicion y/o envio a revision,
   // segun los permisos del usuario y el estado de la propuesta
   can_modify_or_send_to_review(status: string) {
@@ -213,7 +243,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   can_write_payment_info(status: string) {
-    if (status == "APROB") {
+    if (status == "APROB" || status == "PGNPR") {
       return true;
     } else {
       return false;

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

@@ -137,7 +137,7 @@
                     <label for="emitir_nombre">Emitir a nombre: </label>
                     <div class="input-box-container">
                       <p>
-                        <i class="fas fa-dollar-sign"></i>
+                        <i class="far fa-envelope"></i>
                       </p>
                       <input
                         type="text"

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

@@ -112,17 +112,37 @@ export class PaymentInfoComponent implements OnInit {
         res => {
           this.inversionCode = res["result"]["codigo_inversion"];
 
-          if (res["result"]["id_inversion_instrumento"]["instrumento"]["monto_inversion"]!=undefined){
-            this.inversionAmount = res["result"]["id_inversion_instrumento"]["instrumento"]["monto_inversion"];
-          }
-          else if(res["result"]["id_inversion_instrumento"]["instrumento"]["total_pagar"]!=undefined){
-            this.inversionAmount = res["result"]["id_inversion_instrumento"]["instrumento"]["total_pagar"];
-          }
-          else if(res["result"]["id_inversion_instrumento"]["instrumento"]["monto_pagar"]!=undefined){
-            this.inversionAmount = res["result"]["id_inversion_instrumento"]["instrumento"]["monto_pagar"];
+          if (
+            res["result"]["id_inversion_instrumento"]["instrumento"][
+              "monto_inversion"
+            ] != undefined
+          ) {
+            this.inversionAmount =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "monto_inversion"
+              ];
+          } else if (
+            res["result"]["id_inversion_instrumento"]["instrumento"][
+              "total_pagar"
+            ] != undefined
+          ) {
+            this.inversionAmount =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "total_pagar"
+              ];
+          } else if (
+            res["result"]["id_inversion_instrumento"]["instrumento"][
+              "monto_pagar"
+            ] != undefined
+          ) {
+            this.inversionAmount =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "monto_pagar"
+              ];
           }
           this.investmentProposalForm.setValue({
-            monto: this.inversionAmount,
+            monto:
+              Math.round((this.inversionAmount + Number.EPSILON) * 100) / 100,
             tipo_pago: "",
             cuenta_bancaria: "",
             fecha_vencimiento: "",
@@ -255,7 +275,7 @@ export class PaymentInfoComponent implements OnInit {
 
               this.reviewProposal["notificar"] = array.toString();
               this.paymentObject = {
-                monto: this.investmentProposalForm.value.monto,
+                monto: this.inversionAmount,
                 id_tipo_pago: +this.investmentProposalForm.value.tipo_pago,
                 id_cuenta_bancaria: +this.investmentProposalForm.value
                   .cuenta_bancaria,

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

@@ -228,7 +228,28 @@
                       </div>
                     </div>
                   </li>
-
+                  <li class="timeline-inverted" *ngIf="liquidation_file">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                      <div class="timeline-heading">
+                        <span class="badge badge-info"
+                          >Hoja de liquidación</span
+                        >
+                      </div>
+                      <div class="timeline-body">
+                        <div class="col-lg-3 col-md-4 col-sm-6">
+                          <h4>Archivo de hoja de liquidación:</h4>
+                          <div class="field">
+                            <a
+                              [href]="fileDownload + liquidation_file"
+                              target="_blank"
+                              >Descargar archivo</a
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
                   <li class="timeline-inverted">
                     <div class="timeline-badge"></div>
                     <div class="timeline-panel">

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

@@ -16,6 +16,7 @@ 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";
+import { environment } from "@environments/environment";
 
 @Component({
   selector: "app-investment-proposal-detail",
@@ -74,6 +75,8 @@ export class InvestmentProposalDetailComponent implements OnInit {
   fecha_pago: any;
   cuenta_bancaria_destino: any;
   emitir_nombre: any;
+  liquidation_file: any;
+  fileDownload: string;
 
   constructor(
     private router: Router,
@@ -103,7 +106,9 @@ export class InvestmentProposalDetailComponent implements OnInit {
         .getProposalInvestment(this.investmentProposalID)
         .subscribe(res => {
           this.state = res["result"]["id_estado_inversion"]["codigo"];
+          this.fileDownload = environment.productionMediaUrl;
 
+          this.liquidation_file = res["result"]["hoja_liquidacion"];
           this.gInfo = {
             asunto: res["result"]["asunto"],
             origenes_fondo:
@@ -202,7 +207,6 @@ export class InvestmentProposalDetailComponent implements OnInit {
             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

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

@@ -249,11 +249,15 @@ export class ResultComponent implements OnInit {
         this.inversion["codigo_instrumento"] == "TIT" ||
         this.inversion["codigo_instrumento"] == "EURB" ||
         this.inversion["codigo_instrumento"] == "CINV" ||
+        this.inversion["codigo_instrumento"] == "FINV" ||
         this.inversion["codigo_instrumento"] == "PBUR") &&
       (this.instrument["proyecciones"] != undefined ||
         this.instrument["proyecciones"] != "")
     ) {
-      this.inversion["proyecciones"] = this.instrument["proyecciones"];
+      this.inversion["proyecciones"] = this.instrument["proyecciones"].slice(
+        0,
+        -1
+      );
     }
   }
 

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

@@ -0,0 +1,130 @@
+<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">Hoja de liquidación</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">
+                Subir archivo de hoja de liquidación
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="align-container">
+                <div class="instrument-calcs">
+                  <div class="row">
+                    <div class="col-12">
+                      <span class="badge badge-success badge-custom"
+                        >Información básica de la inversión</span
+                      >
+                    </div>
+                    <div class="col-sm-12">
+                      <h4>Estado de la propuesta de inversión:</h4>
+                      <div class="field">{{ estado }}</div>
+                    </div>
+                    <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>Instrumento:</h4>
+                      <div class="field">{{ instrumento }}</div>
+                    </div>
+                    <div class="col-sm-6">
+                      <h4>Emisor:</h4>
+                      <div class="field">{{ emisor }}</div>
+                    </div>
+                    <div class="col-sm-6">
+                      <h4>Empresa:</h4>
+                      <div class="field">{{ empresa }}</div>
+                    </div>
+                  </div>
+                </div>
+
+                <br />
+
+                <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-6">
+                      <div class="form-group">
+                        <label for="hoja_liquidacion">Archivo: </label>
+
+                        <input
+                          type="file"
+                          name="hoja_liquidacion"
+                          (change)="fileProgress($event)"
+                          [ngClass]="{
+                            'is-invalid': submitted && fileData == null
+                          }"
+                        />
+                        <div
+                          *ngIf="submitted && fileData == null"
+                          class="invalid-feedback"
+                        >
+                          Campo requerido
+                        </div>
+                      </div>
+                      <br />
+                      <div *ngIf="fileUploadProgress">
+                        Progreso: {{ fileUploadProgress }}
+                      </div>
+                      <div class="image-preview mb-3" *ngIf="previewUrl">
+                        <img [src]="previewUrl" height="300" />
+                      </div>
+
+                      <div class="mb-3" *ngIf="uploadedFilePath">
+                        {{ uploadedFilePath }}
+                      </div>
+                    </div>
+                  </div>
+                  <br />
+                  <div class="row">
+                    <div class="col-lg-12 col-sm-12 align-right">
+                      <div class="form-group">
+                        <button
+                          class="btn btn-primary"
+                          (click)="onSubmit(investmentProposalForm)"
+                          type="submit"
+                        >
+                          Subir archivo
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <br />
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/investment-proposals/upload-liquidation/upload-liquidation.component.scss

@@ -0,0 +1,34 @@
+.area {
+  width: 77%;
+  padding: 15px;
+  margin: 15px;
+  border: 1px solid #333;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+#dropZone {
+  border: 2px dashed #bbb;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  padding: 50px;
+  text-align: center;
+  font: 21pt bold arial;
+  color: #bbb;
+}
+
+.drop-file-over {
+  background: #333;
+}
+
+.form-group input[type="file"] {
+  opacity: 1;
+  z-index: 1;
+  position: relative;
+}
+
+.invalid-feedback {
+  background-color: #f44336;
+  color: #fff;
+  border: 1px solid #f20221;
+  padding: 2px;
+}

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

@@ -0,0 +1,144 @@
+import { Component, OnInit, ComponentFactoryResolver } from "@angular/core";
+import { FileUploader, FileLikeObject } from "ng2-file-upload";
+import { concat } from "rxjs";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { HttpClient, HttpEventType } from "@angular/common/http";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { InvestmentProposalWorkflowService } from "@app/services/investment-proposal-workflow.service";
+import { InstrumentsService } from "@app/services/instruments.service";
+import { CatalogsService } from "@app/services/catalogs.service";
+import { ActivatedRoute } from "@angular/router";
+import { InvestmentsService } from "@app/services/investments.service";
+import Swal from "sweetalert2";
+import { IAngularMyDpOptions } from "angular-mydatepicker";
+
+@Component({
+  selector: "app-upload-liquidation",
+  templateUrl: "./upload-liquidation.component.html",
+  styleUrls: ["./upload-liquidation.component.scss"]
+})
+export class UploadLiquidationComponent implements OnInit {
+  title: string = "Subir hoja de liquidación";
+  // For daterange
+
+  form: FormGroup;
+  fileData: File = null;
+  previewUrl: any = null;
+  fileUploadProgress: string = null;
+  uploadedFilePath: string = null;
+  interval: any;
+  indexDynamicComponent: number;
+  investmentProposalID: string;
+  investmentExists;
+  codigo_inversion: string = "";
+  empresa: string = "";
+  estado: string = "";
+  emisor: string = "";
+  instrumento: string = "";
+
+  investmentProposalForm: FormGroup;
+  submitted: boolean = false;
+  paymentObject: Object;
+
+  constructor(
+    private http: HttpClient,
+
+    private formDataService: FormInvestmentProposalService,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private instrumentService: InvestmentProposalWorkflowService,
+    private loadInstrumentsService: InstrumentsService,
+    private catalogService: CatalogsService,
+    private route: ActivatedRoute,
+    private investmentService: InvestmentsService,
+    private formBuilder: FormBuilder,
+
+    private investmentsService: 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");
+
+    this.investmentService
+      .getProposalInvestment(this.investmentProposalID)
+      .subscribe(resp => {
+        this.codigo_inversion = resp["result"]["codigo_inversion"];
+        this.estado = resp["result"]["id_estado_inversion"]["nombre"];
+        this.instrumento =
+          resp["result"]["id_inversion_instrumento"]["id_tipo_instrumento"][
+            "nombre"
+          ];
+        this.emisor = resp["result"]["id_tipo_emisor"]["nombre"];
+
+        this.empresa = resp["result"]["id_empresa"]["nombre"];
+        Swal.close();
+      });
+
+    this.investmentProposalForm = this.formBuilder.group({
+      id_inversion: [this.investmentProposalID]
+    });
+  }
+
+  fileProgress(fileInput: any) {
+    this.fileData = <File>fileInput.target.files[0];
+    this.preview();
+  }
+
+  preview() {
+    // Show preview
+    var mimeType = this.fileData.type;
+    if (mimeType.match(/image\/*/) == null) {
+      return;
+    }
+
+    var reader = new FileReader();
+    reader.readAsDataURL(this.fileData);
+    reader.onload = _event => {
+      this.previewUrl = reader.result;
+    };
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  onSubmit(form: any) {
+    this.submitted = true;
+    if (this.fileData == null) {
+      return false;
+    }
+
+    const formData = new FormData();
+    formData.append("id_inversion", this.investmentProposalID);
+    formData.append("hoja_liquidacion", this.fileData);
+
+    this.investmentService.sendLiquidationFile(formData).subscribe(
+      success => {
+        if (success) {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito",
+            confirmButtonText: "Se ha subido la hoja de liquidación"
+          }).then(result => {
+            Swal.close();
+            window.location.href = "#/investment-proposals";
+          });
+        }
+      },
+      err => {
+        Swal.fire({
+          icon: "error",
+          title: "Error en el servidor",
+          text: err.message
+        });
+      }
+    );
+  }
+}

src/app/components/investments/costs/fondos/fondos.costs.component.html

@@ -0,0 +1,378 @@
+<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]="['/investments']">
+                  Inversiones activas
+                </a>
+              </li>
+              <li class="breadcrumb-item">Fondos de inversión</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <div class="align-container">
+          <div class="card borderless card-wrapper">
+            <div class="wrapper-costs">
+              <h4 class="card-title">
+                Detalle de dividendos para el fondos de inversión
+              </h4>
+              <br />
+
+              <div class="align-container">
+                <div>
+                  <div class="costs-summary" *ngIf="instrument_exists">
+                    <div class="row">
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Cuota participación:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.cuota_participacion
+                              | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor participación:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.valor_participacion_porcentaje
+                              | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Días liquidación:</h4>
+                        <div class="field">
+                          {{ instrument_work.dias_liquidacion }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Días vencimiento:</h4>
+                        <div class="field">
+                          {{ instrument_work.dias_vencimiento }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor nominal:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.valor_nominal | number: "1.2-4" }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor transado:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.valor_transado | 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>Comisión casa (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.comision_casa_porcentaje
+                              | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <div class="field">
+                          <h4>Comisión casa:</h4>
+                          $USD
+                          {{ instrument_work.comision_casa | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Comisión bolsa (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.comision_bolsa_porcentaje
+                              | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <div class="field">
+                          <h4>Comisión bolsa:</h4>
+                          $USD
+                          {{ instrument_work.comision_bolsa | number: "1.2-4" }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.rendimiento_porcentaje
+                              | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Dividendo (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.dividendo_porcentaje
+                              | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha operación:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_operacion }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha liquidación:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_liquidacion }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha vencimiento:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_vencimiento }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <br />
+              <br />
+              <div class="align-container">
+                <form *ngIf="dataRetrieved" [formGroup]="form">
+                  <div *ngFor="let group of form.controls; let i = index">
+                    <div class="wrapper-form" [formGroup]="group">
+                      <div class="costs-input-small-container">
+                        <div class="form-group">
+                          <label for="posicion">Posicion: </label>
+
+                          <div class="input-box-container">
+                            <input
+                              type="text"
+                              formControlName="posicion"
+                              class="form-control"
+                              readonly
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-small-container">
+                        <div class="form-group">
+                          <label for="plazo">Plazo: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="far fa-clock" aria-hidden="true"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="plazo"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="fecha_pago">Fecha pago: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i
+                                  class="far fa-calendar"
+                                  aria-hidden="true"
+                                ></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="fecha_pago"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="ingreso_bruto">Ingreso bruto: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="ingreso_bruto"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="ingreso_neto">Ingreso neto: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="ingreso_neto"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="dividendo_porcentaje"
+                            >Dividendo (%):
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-percent"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="dividendo_porcentaje"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="rendimiento_porcentaje"
+                            >Rendimiento:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-percent"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="rendimiento_porcentaje"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="rendimiento">Rendimiento ($): </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="rendimiento"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <input
+                        type="hidden"
+                        formControlName="id_fondo_inversion"
+                      />
+                      <input
+                        type="hidden"
+                        formControlName="id_proyeccion_ingreso"
+                      />
+                      <div class="clear"></div>
+                    </div>
+                  </div>
+                  <br />
+                  <div class="form-group text-right space-20">
+                    <button
+                      type="button"
+                      class="btn btn-success center-component float-left"
+                      (click)="saveProjection()"
+                    >
+                      Guardar información de proyecciones
+                    </button>
+
+                    <button
+                      type="button"
+                      class="btn btn-primary center-component float-right"
+                      (click)="recalculateProjectionChanges()"
+                    >
+                      Recalcular proyecciones
+                    </button>
+                  </div>
+                  <br />
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,233 @@
+import { Component, ViewChild, OnInit } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+import Swal from "sweetalert2";
+import { CatalogsService } from "src/app/services/catalogs.service";
+import { InvestmentsService } from "@app/services/investments.service";
+import { InstrumentCalculations } from "@app/services/instrument-calculations.service";
+
+import { AuthService } from "@app/services/auth2.service";
+import { JwtHelperService } from "@auth0/angular-jwt";
+import { InvestmentProposal } from "@app/models/investment-proposal";
+import { from } from "rxjs";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { Router, ActivatedRoute } from "@angular/router";
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  FormArray,
+  Validators
+} from "@angular/forms";
+
+@Component({
+  selector: "app-fondos-costs",
+  templateUrl: "./fondos.costs.component.html"
+  //styleUrls: ["./dap.costs.component.scss"]
+})
+export class FINVCostsComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Dividendos para fondos de inversión";
+
+  displayedColumns: string[] = [
+    "posicion",
+    "plazo",
+    "fecha_pago",
+    "ingreso_bruto",
+    "ingreso_neto",
+    "dividendo_porcentaje",
+    "rendimiento_porcentaje",
+    "rendimiento",
+    "id_fondo_inversion"
+  ];
+
+  //displayedColumns: string[] = ['state'];
+
+  listProposals: InvestmentProposal[];
+  dataSource = new MatTableDataSource(this.listProposals);
+
+  resultsLength = 0;
+  isLoadingResults = true;
+  isRateLimitReached = false;
+  userRole: any;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  role_number: any;
+  investmentProposalID: string;
+
+  form: FormArray;
+  investmentProposalForm: FormGroup;
+
+  proyecciones: any;
+  proyeccionesProps = [];
+  dataRetrieved: boolean = false;
+
+  array1;
+  array2;
+  array3;
+  investment: any;
+  instrument_work: any;
+  instrument_exists: boolean;
+
+  constructor(
+    private catalogService: CatalogsService,
+    private investmentsService: InvestmentsService,
+    private authService: AuthService,
+    private formInvestmentProposal: FormInvestmentProposalService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private instrumentService: InstrumentCalculations,
+
+    private formBuilder: FormBuilder
+  ) {
+    const decodedToken = this.helper.decodeToken(
+      this.authService.getJwtToken()
+    );
+    this.userRole = decodedToken.groups;
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+  }
+
+  ngOnInit() {
+    Swal.close();
+    const formDataObj = {};
+
+    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.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.investment = res["result"];
+            this.instrument_work =
+              res["result"]["id_inversion_instrumento"]["instrumento"];
+            this.instrument_exists = true;
+
+            this.proyecciones =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "proyecciones"
+              ];
+            this.proyecciones.pop();
+
+            this.form = new FormArray(this.buildForm(this.proyecciones));
+            this.dataRetrieved = true;
+          },
+          err => {
+            Swal.fire({
+              icon: "error",
+              title: "Error en el servidor",
+              text: err.message
+            });
+          }
+        );
+    }
+
+    setTimeout(() => {
+      Swal.close();
+    }, 1200);
+  }
+
+  recalculateProjectionChanges() {
+    let objProjection = { proyecciones: this.form.value };
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    console.log(objProjection);
+    this.instrumentService
+      .projectionCalc(this.investmentProposalID, this.form.value)
+      .subscribe(
+        result => {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito"
+          });
+          this.proyecciones = result["result"]["proyecciones"];
+          this.proyecciones.pop();
+
+          this.form.clear();
+          this.form = new FormArray(this.buildForm(this.proyecciones));
+          Swal.close();
+          //window.location.reload();
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error al guardar",
+            text: err.message
+          });
+        }
+      );
+  }
+
+  saveProjection() {
+    let objProjection = { proyecciones: this.form.value };
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.instrumentService
+      .projectionModification(this.investmentProposalID, objProjection)
+      .subscribe(
+        resp => {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito",
+            confirmButtonText: "La información ha sido actualizada"
+          }).then(result => {
+            Swal.close();
+            //window.location.reload();
+          });
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error al guardar",
+            text: err.message
+          });
+        }
+      );
+  }
+
+  buildForm(items: any[]): FormGroup[] {
+    return items.map(x => this.buildItem(x));
+  }
+  //return a formGroup
+  buildItem(item: any): FormGroup {
+    return new FormGroup({
+      id_proyeccion_ingreso: new FormControl(item.id_proyeccion_ingreso),
+      posicion: new FormControl(item.posicion),
+      plazo: new FormControl(item.plazo),
+      fecha_pago: new FormControl(item.fecha_pago),
+      ingreso_bruto: new FormControl(item.ingreso_bruto),
+      ingreso_neto: new FormControl(item.ingreso_neto),
+      dividendo_porcentaje: new FormControl(item.dividendo_porcentaje),
+      rendimiento_porcentaje: new FormControl(item.rendimiento_porcentaje),
+      rendimiento: new FormControl(item.rendimiento),
+      id_fondo_inversion: new FormControl(item.id_fondo_inversion)
+    });
+  }
+}

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

@@ -211,7 +211,7 @@ export class PBURCostsComponent implements OnInit {
               res["result"]["id_inversion_instrumento"]["instrumento"][
                 "proyecciones"
               ];
-
+            this.proyecciones.pop();
             this.form = new FormArray(this.buildForm(this.proyecciones));
             this.dataRetrieved = true;
           },
@@ -250,6 +250,7 @@ export class PBURCostsComponent implements OnInit {
             title: "Exito"
           });
           this.proyecciones = result["result"]["proyecciones"];
+          this.proyecciones.pop();
           this.form.clear();
           this.form = new FormArray(this.buildForm(this.proyecciones));
           Swal.close();

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

@@ -211,7 +211,7 @@ export class VCNCostsComponent implements OnInit {
               res["result"]["id_inversion_instrumento"]["instrumento"][
                 "proyecciones"
               ];
-
+            this.proyecciones.pop();
             this.form = new FormArray(this.buildForm(this.proyecciones));
             this.dataRetrieved = true;
           },
@@ -250,6 +250,7 @@ export class VCNCostsComponent implements OnInit {
             title: "Exito"
           });
           this.proyecciones = result["result"]["proyecciones"];
+          this.proyecciones.pop();
           this.form.clear();
           this.form = new FormArray(this.buildForm(this.proyecciones));
           Swal.close();

src/app/components/investments/investments.component.html

@@ -116,7 +116,7 @@
                         "
                       >
                         <i class="fas fa-funnel-dollar"></i>
-                        Costos
+                        Proyecciones
                       </a>
                     </div>
                   </td>

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

@@ -135,6 +135,8 @@ export class InvestmentsComponent implements OnInit {
           return false;
         }
         break;
+      case "FINV":
+        return true;
       default:
         return false;
     }

src/app/components/login/login.component.html

@@ -4,7 +4,7 @@
       <div class="auth-box">
         <div class="card">
           <div class="top d-block d-lg-none">
-            <img alt="Inverlec" src="./assets/img/inverlec_logo.png" />
+            <img alt="Inverlec" src="./assets/img/inversys.png" />
           </div>
 
           <div class="header">
@@ -49,7 +49,7 @@
                 </div>
               </div>
 
-              <button class="btn btn-primary" type="submit">
+              <button class="btn btn-dark" type="submit">
                 Iniciar sesión
               </button>
             </form>

src/app/components/login/login.component.scss

@@ -29,7 +29,7 @@
   height: 100%;
   z-index: -1;
   background: url("/assets/img/test1.png") no-repeat left top;
-  background-color: #223d7d;
+  background-color: #4f3683; //#223d7d;
   background-size: cover;
   background-position: 10%;
 }
@@ -42,7 +42,7 @@
   width: 80%;
   height: 100%;
   z-index: -2;
-  background: url("/assets/img/inverlec_logo.png") no-repeat 70% center;
+  background: url("/assets/img/inversys.png") no-repeat 70% center;
   background-color: #fff;
   //background: url(../../assets/images/auth_bg.jpg) no-repeat top left fixed;
 }
@@ -95,7 +95,7 @@
 @media screen and (max-width: 768px) {
   .auth-main:before,
   .auth-main:after {
-    background-color: #223d7d;
+    background-color: #4f3683; //#223d7d;
   }
 
   .top {

src/app/components/shared/sidebar/sidebar.component.html

@@ -1,10 +1,10 @@
 <div class="logo">
-  <a class="simple-text logo-mini">
+  <a class="simple-text logo-mini" href="/">
     <div class="logo-img">
-      <img src="./assets/img/logo_inverlec_inv_p.png" />
+      &nbsp;
+      <!-- <img src="./assets/img/denmark-logo.png" /> -->
     </div>
   </a>
-  <a class="simple-text logo-normal" href="/">Inversiones</a>
 </div>
 
 <div class="sidebar-wrapper">
@@ -33,59 +33,23 @@
         <p>{{ menuItem.title }}</p>
       </a>
     </li>
-    <!--
-    <li class="nav-item" routerlinkactive="active">
-      <a class="nav-link" data-toggle="collapse" href="#catalogs">
-        <i class="material-icons">grid_on</i>
-        <p>Catálogos<b class="caret"></b></p>
-      </a>
-      <div class="collapse" id="catalogs">
-        <ul class="nav">
-          <li class="nav-item" routerlinkactive="active">
-            <a class="nav-link" href="#/companies">
-              <span class="sidebar-mini">EMP</span>
-              <span class="sidebar-normal">Empresas</span>
-            </a>
-          </li>
-          <li class="nav-item" routerlinkactive="active">
-            <a class="nav-link" href="#/countries">
-              <span class="sidebar-mini">PAI</span>
-              <span class="sidebar-normal">Países</span>
-            </a>
-          </li>
-          <li class="nav-item" routerlinkactive="active">
-            <a class="nav-link" href="#/emitters">
-              <span class="sidebar-mini">EMI</span>
-              <span class="sidebar-normal">Emisores</span>
-            </a>
-          </li>
-          <li class="nav-item" routerlinkactive="active">
-            <a class="nav-link" href="#">
-              <span class="sidebar-mini">C2</span>
-              <span class="sidebar-normal">Catalogo</span>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </li>-->
+
     <hr />
   </ul>
 
-  <div *ngIf="isMobileMenu()">
-    <ul class="nav navbar-nav nav-mobile-menu-bottom">
-      <li class="nav-item">
-        <a
-          class="nav-link"
-          title="Logout"
-          (click)="logout()"
-          href="javascript:void(0)"
-        >
-          <i class="material-icons">exit_to_app</i>
-          <p>
-            <span class="d-lg-none d-md-block">Logout</span>
-          </p>
-        </a>
-      </li>
-    </ul>
-  </div>
+  <ul class="nav navbar-nav nav-mobile-menu-bottom">
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        title="Cerrar sesión"
+        (click)="logout()"
+        href="javascript:void(0)"
+      >
+        <i class="material-icons">exit_to_app</i>
+        <p>
+          Cerrar sesión
+        </p>
+      </a>
+    </li>
+  </ul>
 </div>

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

@@ -13,8 +13,6 @@ import { ProfileComponent } from "../../components/profile/profile.component";
 import { PluginsModule } from "../../components/plugins/plugins.module";
 
 import { MatDialogModule, MatPaginatorIntl } from "@angular/material";
-import { BrowserModule } from "@angular/platform-browser";
-import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 
 import { MatTableExporterModule } from "mat-table-exporter";
 import {
@@ -31,12 +29,6 @@ import {
 } from "@angular/material";
 
 import { MatPasswordStrengthModule } from "@angular-material-extensions/password-strength";
-import {
-  BreadcrumbModule,
-  IconsModule,
-  WavesModule
-} from "angular-bootstrap-md";
-
 import { TermsComponent } from "@app/components/terms/terms.component";
 import { InvestmentProposalsComponent } from "@app/components/investment-proposals/investment-proposals.component";
 import { InvestmentProposalGeneralInfoComponent } from "@app/components/investment-proposals/general-info/general-info.component";
@@ -59,8 +51,6 @@ import { PBUR } from "@app/components/instruments/pbur/pbur.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 { InstrumentDirective } from "@app/components/investment-proposals/instrument/instrument.directive";
 import { WorkflowGuard } from "@app/services/investment-proposal-workflow.guard";
@@ -81,6 +71,12 @@ import { TIT } from "@app/components/instruments/titulos/titulos.component";
 import { EURB } from "@app/components/instruments/eurobonos/eurobonos.component";
 import { CINV } from "@app/components/instruments/certificados/certificados.component";
 import { MatPaginatorIntlSpa } from "@app/models/i18n-paginator";
+import { FINV } from "@app/components/instruments/fondos/fondos.component";
+import { UploadLiquidationComponent } from "@app/components/investment-proposals/upload-liquidation/upload-liquidation.component";
+import { SelectModule } from "ng-select";
+import { OPC } from "@app/components/instruments/opciones/opciones.component";
+import { FUTU } from "@app/components/instruments/futuros/futuros.component";
+import { FINVCostsComponent } from "@app/components/investments/costs/fondos/fondos.costs.component";
 
 // This array defines which "componentId" maps to which lazy-loaded module.
 
@@ -106,7 +102,7 @@ import { MatPaginatorIntlSpa } from "@app/models/i18n-paginator";
     AngularMyDatePickerModule,
     MatPasswordStrengthModule,
     HttpClientModule,
-    WavesModule
+    SelectModule
   ],
   providers: [
     { provide: MatPaginatorIntl, useClass: MatPaginatorIntlSpa },
@@ -146,8 +142,9 @@ import { MatPaginatorIntlSpa } from "@app/models/i18n-paginator";
     TIT,
     EURB,
     CINV,
-    ANCComponent,
-    APNComponent,
+    FINV,
+    OPC,
+    FUTU,
     InstrumentDirective,
     PaymentInfoComponent,
     PaymentRequirementComponent,
@@ -155,9 +152,11 @@ import { MatPaginatorIntlSpa } from "@app/models/i18n-paginator";
     DAPCostsComponent,
     VCNCostsComponent,
     PBURCostsComponent,
+    FINVCostsComponent,
     IncomesComponent,
     GeneralIncomeFormComponent,
-    PaymentApprovalComponent
+    PaymentApprovalComponent,
+    UploadLiquidationComponent
   ],
   entryComponents: [
     LETE,
@@ -169,8 +168,9 @@ import { MatPaginatorIntlSpa } from "@app/models/i18n-paginator";
     TIT,
     EURB,
     CINV,
-    ANCComponent,
-    APNComponent
+    FINV,
+    OPC,
+    FUTU
   ]
 })
 export class AdminModule {}

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

@@ -31,6 +31,8 @@ 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";
+import { UploadLiquidationComponent } from "@app/components/investment-proposals/upload-liquidation/upload-liquidation.component";
+import { FINVCostsComponent } from "@app/components/investments/costs/fondos/fondos.costs.component";
 
 export const AdminLayoutRoutes: Routes = [
   {
@@ -196,6 +198,10 @@ export const AdminLayoutRoutes: Routes = [
     path: "investment-proposal/:id/payment",
     component: PaymentRequirementComponent
   },
+  {
+    path: "investment-proposal/:id/upload-file",
+    component: UploadLiquidationComponent
+  },
   {
     path: "investment-proposal/:id",
     component: InvestmentProposalDetailComponent
@@ -208,6 +214,10 @@ export const AdminLayoutRoutes: Routes = [
     path: "investment-costs/vcn/:id",
     component: VCNCostsComponent
   },
+  {
+    path: "investment-costs/finv/:id",
+    component: FINVCostsComponent
+  },
   {
     path: "investment-costs/pbur/:id",
     component: PBURCostsComponent

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

@@ -166,6 +166,40 @@ export class InstrumentCalculations {
       );
   }
 
+  // Fondos de inversion
+  fondosCalc(
+    codigo_instrumento: string,
+    info_inversion: {
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
+    },
+    info_instrumento: {
+      cuota_participacion: number;
+      valor_participacion: number;
+      comision_bolsa_porcentaje: number;
+      comision_casa_porcentaje: number;
+      dividendo_porcentaje: number;
+      rendimiento_porcentaje: number;
+      dias_liquidacion: number;
+      dias_vencimiento: number;
+      fecha_operacion: 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,
@@ -268,6 +302,29 @@ export class InstrumentCalculations {
       );
   }
 
+  opcionesFuturosCalc(
+    codigo_instrumento: string,
+    info_inversion: {
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
+    },
+    info_instrumento: any
+  ): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/autocomplete`, {
+        codigo_instrumento,
+        info_inversion,
+        info_instrumento
+      })
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   projectionCalc(id: string, proyecciones: any): Observable<boolean> {
     return this.http
       .put<any>(`${environment.productionApiUrl}/autocomplete/${id}`, {

src/app/services/instruments.service.ts

@@ -8,11 +8,12 @@ import { VCN } from "@app/components/instruments/vcn/vcn.component";
 import { PBUR } from "@app/components/instruments/pbur/pbur.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";
 import { TIT } from "@app/components/instruments/titulos/titulos.component";
+import { FINV } from "@app/components/instruments/fondos/fondos.component";
+import { OPC } from "@app/components/instruments/opciones/opciones.component";
+import { FUTU } from "@app/components/instruments/futuros/futuros.component";
 
 @Injectable({
   providedIn: "root"
@@ -37,14 +38,9 @@ export class InstrumentsService {
         key: "DAP",
         name: "Depósitos a plazo"
       }),
-      new Instrument(ANCComponent, {
-        key: "ANC",
-        name: "Acciones nacionales comunes"
-      }),
-      new Instrument(APNComponent, {
-        key: "APN",
-        name: "Acciones preferentes nacionales"
-      })
+      new Instrument(FINV, { key: "FINV", name: "Fondo de inversión" }),
+      new Instrument(OPC, { key: "OPC", name: "Opciones" }),
+      new Instrument(FUTU, { key: "FINV", name: "Futuros" })
     ];
   }
 }

src/app/services/investments.service.ts

@@ -95,6 +95,17 @@ export class InvestmentsService {
       );
   }
 
+  sendLiquidationFile(inversion: Object): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/hoja-liquidacion`, inversion)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   sendPaymentInfoProposalInvestment(
     id: string,
     inversion: Object

src/assets/scss/core/_sidebar-and-main-panel.scss

@@ -11,7 +11,7 @@
   left: 0;
   z-index: 2;
   width: 240px;
-  background: #23272d;
+  background: $sidebar-color;
   @include shadow-big();
 
   .caret {
@@ -29,18 +29,22 @@
   &[data-background-color="black"] {
     background-color: #191919;
   }
+
   .logo-img {
-    width: 35px;
+    width: 240px;
     display: block;
-    max-height: 30px;
-    margin-left: 0;
+    height: 50px;
+    margin-left: 5px;
     margin-right: 15px;
-
+    background: url(/assets/img/inversys1.png) no-repeat;
+    background-size: 220px;
+    /*
     img {
-      width: 45px;
-      top: 35px;
+      width: 215px;
+      top: 10px;
       position: absolute;
-    }
+      left: 15px;
+    }*/
   }
   .sidebar-wrapper {
     position: relative;
@@ -144,7 +148,7 @@
       & .dropdown-menu a:hover,
       & .dropdown-menu a:focus,
       &.active > [data-toggle="collapse"] {
-        background-color: rgba(200, 200, 200, 0.2);
+        background-color: #aaa;
         color: $white;
         box-shadow: none;
       }
@@ -195,7 +199,7 @@
       line-height: 30px;
       width: 30px;
       text-align: center;
-      color: #a9afbb;
+      color: $purple;
     }
   }
 
@@ -203,7 +207,7 @@
   .nav li .dropdown-menu a {
     margin: 10px 10px 0;
     border-radius: $border-radius-base;
-    color: $gray-light;
+    color: $purple;
     padding-left: 10px;
     padding-right: 10px;
     text-transform: capitalize;
@@ -326,7 +330,7 @@
     @include set-background-color-button($yellow-custom);
   }
   &[data-color="blue"] {
-    @include set-background-color-button($blue-custom);
+    @include set-background-color-button($purple);
   }
   &[data-color="white"] {
     @include set-background-color-button($white-color);
@@ -477,6 +481,17 @@
       font-weight: 200;
       z-index: 9999;
 
+      .logo-img {
+        width: 70px;
+        display: block;
+        overflow: hidden;
+        background: url(/assets/img/inversys_mini1.png) no-repeat;
+        background-size: 55px;
+        background-position-y: 0px;
+        height: 70px;
+        background-position-x: center;
+      }
+
       .logo {
         a.logo-normal {
           opacity: 0;

src/assets/scss/core/variables/_bootstrap-material-design-base.scss

@@ -1,8 +1,13 @@
 $gray-lighter: rgba($black, 0.12) !default;
 $gray-light: #999 !default;
-$gray-alpha: .54 !default;
+$gray-alpha: 0.54 !default;
 $gray: #555 !default; // spec color
-$gray-dark: rgba($black, 0.87) !default; // used for text color - others use grey-600 which is considerably lighter
+$gray-dark: rgba(
+  $black,
+  0.87
+) !default; // used for text color - others use grey-600 which is considerably lighter
+
+$purple: #4f3683;
 
 $bmd-font-weight-base: 400;
 
@@ -22,12 +27,12 @@ $border-radius-label: 12px !default;
 $border-radius-extreme: 30px !default;
 
 // Typography elements
-$mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
-$mdb-text-color-light:  $white !default;
+$mdb-font-family: "Roboto", "Helvetica", "Arial", sans-serif !default;
+$mdb-text-color-light: $white !default;
 $mdb-text-color-light-hex: $white !default; // for contrast function in inverse
 $mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default;
 $mdb-text-color-primary-hex: $black !default; // for contrast function in inverse
-$icon-color: rgba(0,0,0,0.5) !default;
+$icon-color: rgba(0, 0, 0, 0.5) !default;
 
 $mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default;
 $mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default;

src/assets/scss/core/variables/_colors.scss

@@ -332,4 +332,4 @@ $palette-yellow: #fad35e;
 $palette-dark-yellow: #ee964b;
 $palette-orange: #f95738;
 
-$sidebar-color: #23272d;
+$sidebar-color: #fff; // #23272d;

src/assets/scss/material-dashboard.scss

@@ -209,3 +209,19 @@ input.form-control.is-invalid {
   color: black;
   z-index: 1;
 }
+
+ng-select {
+  font-size: 14px;
+}
+
+ng-select > div {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+ng-select > div > div.single > div.toggle {
+  color: #aaa;
+  line-height: 30px;
+  text-align: center;
+  width: 45px !important;
+}