Merge branch 'development' into feature-CI_CD

Jenkinsfile

@@ -4,8 +4,8 @@ pipeline {
         stage('build') {
             steps {
                 sh  '''
-                    cd /home/administrador/Documentos/GIT/Inversys/app/frontend/
-				    git pull
+                    cd /opt/inversys/app/frontend/
+                    git pull
                     '''
             }
         }
@@ -17,9 +17,9 @@ pipeline {
         stage('Deploy') {
             steps {
                 sh  '''
-                    cd /home/administrador/Documentos/GIT/Inversys/
+                    cd /opt/inversys/
                     echo $USER
-				    docker-compose up -d --build frontend
+                    docker-compose up -d --build frontend
                     '''
             }
         }

package-lock.json

@@ -3348,12 +3348,33 @@
         "file-saver": "^2.0.2",
         "tslib": "^1.9.0",
         "xlsx": "^0.14.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.17.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+        },
+        "xlsx": {
+          "version": "0.14.5",
+          "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.14.5.tgz",
+          "integrity": "sha512-s/5f4/mjeWREmIWZ+HtDfh/rnz51ar+dZ4LWKZU3u9VBx2zLdSIWTdXgoa52/pnZ9Oe/Vu1W1qzcKzLVe+lq4w==",
+          "requires": {
+            "adler-32": "~1.2.0",
+            "cfb": "^1.1.2",
+            "codepage": "~1.14.0",
+            "commander": "~2.17.1",
+            "crc-32": "~1.2.0",
+            "exit-on-epipe": "~1.0.1",
+            "ssf": "~0.10.2"
+          }
+        }
       }
     },
     "cfb": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.1.3.tgz",
-      "integrity": "sha512-joXBW0nMuwV9no7UTMiyVJnQL6XIU3ThXVjFUDHgl9MpILPOomyfaGqC290VELZ48bbQKZXnQ81UT5HouTxHsw==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.1.4.tgz",
+      "integrity": "sha512-rwFkl3aFO3f+ljR27YINwC0x8vPjyiEVbYbrTCKzspEf7Q++3THdfHVgJYNUbxNcupJECrLX+L40Mjm9hm/Bgw==",
       "requires": {
         "adler-32": "~1.2.0",
         "commander": "^2.16.0",
@@ -6957,7 +6978,8 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -6968,7 +6990,8 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7085,7 +7108,8 @@
             "inherits": {
               "version": "2.0.4",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7097,6 +7121,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7126,6 +7151,7 @@
               "version": "2.9.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7144,6 +7170,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7233,7 +7260,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7245,6 +7273,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7366,6 +7395,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -8329,8 +8359,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -8367,8 +8396,7 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -8377,8 +8405,7 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -8481,8 +8508,7 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -8492,7 +8518,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -8518,7 +8543,6 @@
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -8615,8 +8639,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -8626,7 +8649,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -8702,8 +8724,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -8733,7 +8754,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -8751,7 +8771,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -8790,13 +8809,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },
@@ -11617,9 +11634,9 @@
       "dev": true
     },
     "ssf": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.10.2.tgz",
-      "integrity": "sha512-rDhAPm9WyIsY8eZEKyE8Qsotb3j/wBdvMWBUsOhJdfhKGLfQidRjiBUV0y/MkyCLiXQ38FG6LWW/VYUtqlIDZQ==",
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.10.3.tgz",
+      "integrity": "sha512-pRuUdW0WwyB2doSqqjWyzwCD6PkfxpHAHdZp39K3dp/Hq7f+xfMwNAWIi16DyrRg4gg9c/RvLYkJTSawTPTm1w==",
       "requires": {
         "frac": "~1.1.2"
       }
@@ -14156,6 +14173,11 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+    },
     "wordwrap": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
@@ -14232,17 +14254,18 @@
       "integrity": "sha1-f4dliEdxbbUCYyOBL4GMras4el8="
     },
     "xlsx": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.14.5.tgz",
-      "integrity": "sha512-s/5f4/mjeWREmIWZ+HtDfh/rnz51ar+dZ4LWKZU3u9VBx2zLdSIWTdXgoa52/pnZ9Oe/Vu1W1qzcKzLVe+lq4w==",
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.16.1.tgz",
+      "integrity": "sha512-0feXqUm6W6/h+2bGSX2nkjVHCJ7cjq6pjcFixMTLlmNYrvm+nHg1BUIqyu+3Hlax7K5EbmUWqVxS3X0kuZQGvg==",
       "requires": {
         "adler-32": "~1.2.0",
-        "cfb": "^1.1.2",
+        "cfb": "^1.1.4",
         "codepage": "~1.14.0",
         "commander": "~2.17.1",
         "crc-32": "~1.2.0",
         "exit-on-epipe": "~1.0.1",
-        "ssf": "~0.10.2"
+        "ssf": "~0.10.3",
+        "wmf": "~1.0.1"
       },
       "dependencies": {
         "commander": {

package.json

@@ -53,6 +53,7 @@
     "rxjs": "~6.4.0",
     "sweetalert2": "^9.5.4",
     "tslib": "^1.10.0",
+    "xlsx": "^0.16.1",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {

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

@@ -0,0 +1,383 @@
+<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-incomes']">
+                  Ingresos
+                </a>
+              </li>
+              <li class="breadcrumb-item">Formulario general</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">
+                Información de la proyección para la fecha: {{ projectionDate }}
+              </h4>
+
+              <div class="alert alert-customized" *ngIf="projection_exists">
+                <h4>Estado:</h4>
+                <div class="field">
+                  {{ projectionRes.estado }}
+                </div>
+              </div>
+
+              <div class="income-summary" *ngIf="projection_exists">
+                <div class="row">
+                  <div class="col-lg-3 col-md-4 col-sm-6">
+                    <h4>Codigo de la inversión:</h4>
+                    <div class="field">
+                      {{ projectionRes.codigo_inversion }}
+                    </div>
+                  </div>
+
+                  <div class="col-lg-3 col-md-4 col-sm-6">
+                    <h4>Empresa:</h4>
+                    <div class="field">
+                      {{ projectionRes.empresa }}
+                    </div>
+                  </div>
+
+                  <div class="col-lg-3 col-md-4 col-sm-6">
+                    <h4>Tipo instrumento:</h4>
+                    <div class="field">
+                      {{ projectionRes.tipo_instrumento }}
+                    </div>
+                  </div>
+
+                  <div class="col-lg-3 col-md-4 col-sm-6">
+                    <h4>Capital:</h4>
+                    <div class="field">
+                      $USD {{ projectionRes.capital | number: "1.2-4" }}
+                    </div>
+                  </div>
+                  <div class="col-lg-3 col-md-4 col-sm-6">
+                    <h4>Ingreso bruto:</h4>
+                    <div class="field">
+                      $USD {{ projectionRes.ingreso_bruto | number: "1.2-4" }}
+                    </div>
+                  </div>
+                  <div class="col-lg-3 col-md-4 col-sm-6">
+                    <h4>Renta:</h4>
+                    <div class="field">
+                      $USD {{ projectionRes.renta | number: "1.2-4" }}
+                    </div>
+                  </div>
+                  <div class="col-lg-3 col-md-4 col-sm-6">
+                    <h4>Ingreso neto:</h4>
+                    <div class="field">
+                      $USD {{ projectionRes.ingreso_neto | number: "1.2-4" }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <br />
+              <br />
+              <div>
+                <h4 class="card-title" *ngIf="showIncomeForm">
+                  Formulario para ingreso
+                </h4>
+
+                <div class="align-container">
+                  <form
+                    class="form-auth-small ng-untouched ng-pristine ng-valid"
+                    [formGroup]="investmentProposalForm"
+                    *ngIf="showIncomeForm"
+                  >
+                    <div class="row">
+                      <!-- Valor nominal -->
+                      <div class="col-lg-6 col-sm-12 pr-xl-3">
+                        <div class="form-group">
+                          <label for="capital">Capital: </label>
+                          <div class="input-box-container">
+                            <p>
+                              <i class="fas fa-dollar-sign"></i>
+                            </p>
+                            <input
+                              type="text"
+                              formControlName="capital"
+                              class="form-control"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.capital.errors
+                              }"
+                            />
+                            <div
+                              *ngIf="submitted && f.capital.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.capital.errors.required">
+                                Campo requerido
+                              </div>
+                              <div *ngIf="f.capital.errors.pattern">
+                                Debe ingresar una cifra válida
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- Valor nominal -->
+                      <div class="col-lg-6 col-sm-12 pr-xl-3">
+                        <div class="form-group">
+                          <label for="ingreso_bruto">Ingreso bruto: </label>
+                          <div class="input-box-container">
+                            <p>
+                              <i class="fas fa-dollar-sign"></i>
+                            </p>
+                            <input
+                              type="text"
+                              formControlName="ingreso_bruto"
+                              class="form-control"
+                              [ngClass]="{
+                                'is-invalid':
+                                  submitted && f.ingreso_bruto.errors
+                              }"
+                            />
+                            <div
+                              *ngIf="submitted && f.ingreso_bruto.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.ingreso_bruto.errors.required">
+                                Campo requerido
+                              </div>
+                              <div *ngIf="f.ingreso_bruto.errors.pattern">
+                                Debe ingresar una cifra válida
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- Valor nominal -->
+                      <div class="col-lg-6 col-sm-12 pr-xl-3">
+                        <div class="form-group">
+                          <label for="ingreso_neto">Ingreso neto: </label>
+                          <div class="input-box-container">
+                            <p>
+                              <i class="fas fa-dollar-sign"></i>
+                            </p>
+                            <input
+                              type="text"
+                              formControlName="ingreso_neto"
+                              class="form-control"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.ingreso_neto.errors
+                              }"
+                            />
+                            <div
+                              *ngIf="submitted && f.ingreso_neto.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.ingreso_neto.errors.required">
+                                Campo requerido
+                              </div>
+                              <div *ngIf="f.ingreso_neto.errors.pattern">
+                                Debe ingresar una cifra válida
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <br />
+                    <div class="row">
+                      <div class="col-12">
+                        <div class="custom-control custom-switch">
+                          <input
+                            type="checkbox"
+                            class="custom-control-input"
+                            id="customSwitch1"
+                            (click)="toggle()"
+                          />
+                          <label
+                            class="custom-control-label"
+                            for="customSwitch1"
+                            >Ingreso parcial</label
+                          >
+                        </div>
+                      </div>
+                      <div class="col-lg-6 col-sm-12 pr-xl-3" *ngIf="partial">
+                        <div class="form-group">
+                          <label for="fecha_inicio">Fecha inicio: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i
+                                  class="far fa-calendar"
+                                  aria-hidden="true"
+                                ></i>
+                              </p>
+                              <input
+                                class="input-box form-control"
+                                placeholder="Seleccione una fecha"
+                                angular-mydatepicker
+                                formControlName="fecha_inicio"
+                                (click)="dp0.toggleCalendar()"
+                                [options]="myDpOptions"
+                                #dp0="angular-mydatepicker"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-lg-6 col-sm-12 pr-xl-3" *ngIf="partial">
+                        <div class="form-group">
+                          <label for="fecha_vencimiento"
+                            >Fecha vencimiento:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i
+                                  class="far fa-calendar"
+                                  aria-hidden="true"
+                                ></i>
+                              </p>
+                              <input
+                                class="input-box form-control"
+                                placeholder="Seleccione una fecha"
+                                angular-mydatepicker
+                                formControlName="fecha_vencimiento"
+                                (click)="dp0.toggleCalendar()"
+                                [options]="myDpOptions"
+                                #dp0="angular-mydatepicker"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="col-lg-6 col-sm-12 pr-xl-3">
+                        <div class="form-group">
+                          <label for="payment_types">Tipo pago: </label>
+
+                          <select
+                            class="custom-select"
+                            formControlName="tipo_pago"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.tipo_pago.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let item of payment_types"
+                              [value]="item.id_tipo_pago"
+                            >
+                              {{ item.nombre }}</option
+                            >
+                          </select>
+                          <div
+                            *ngIf="submitted && f.tipo_pago.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.tipo_pago.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="cuenta_bancaria">Cuenta bancaria: </label>
+
+                          <select
+                            class="custom-select"
+                            formControlName="cuenta_bancaria"
+                            [ngClass]="{
+                              'is-invalid':
+                                submitted && f.cuenta_bancaria.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let item of accounts"
+                              [value]="item.id_cuenta_bancaria"
+                            >
+                              {{ nameBankAccounts(item.id_banco) }} -
+                              {{ item.nombre }}</option
+                            >
+                          </select>
+                          <div
+                            *ngIf="submitted && f.cuenta_bancaria.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.cuenta_bancaria.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="comentario">Comentarios: </label>
+
+                          <textarea
+                            rows="2"
+                            class="form-control"
+                            formControlName="comentario"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.comentario.errors
+                            }"
+                          ></textarea>
+                          <div
+                            *ngIf="submitted && f.comentario.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.comentario.errors.required">
+                              Campo requerido
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                  <div class="row">
+                    <div class="col-lg-12 col-sm-12 pr-xl-12">
+                      <br />
+                      <button
+                        class="btn btn-primary center-component float-left"
+                        type="button"
+                        [disabled]="cantConciliate"
+                        (click)="conciliateIncome()"
+                      >
+                        Conciliar ingreso
+                      </button>
+                      <button
+                        class="btn btn-success center-component float-right"
+                        type="submit"
+                        (click)="submitIncome(investmentProposalForm)"
+                        *ngIf="showIncomeForm"
+                      >
+                        Guardar información de ingreso
+                      </button>
+                    </div>
+                  </div>
+                  <br />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,4 @@
+.alert-customized {
+  border: 1px solid;
+  background: #eee;
+}

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

@@ -0,0 +1,373 @@
+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 { IncomesService } from "@app/services/incomes.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";
+import { IAngularMyDpOptions } from "angular-mydatepicker";
+
+@Component({
+  selector: "app-general-form-income",
+  templateUrl: "./general-form.component.html",
+  styleUrls: ["./general-form.component.scss"]
+})
+export class GeneralIncomeFormComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Ingresos para depósito a plazo";
+
+  displayedColumns: string[] = [
+    "fecha_proyeccion_ingreso",
+    "fecha_ingreso",
+    "fecha_conciliacion",
+    "capital",
+    "ingreso_bruto",
+    "renta"
+  ];
+  //displayedColumns: string[] = ['state'];
+
+  // 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"
+  };
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+
+  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;
+  projectionID: string;
+
+  form: FormArray;
+  investmentProposalForm: FormGroup;
+
+  proyecciones: any;
+  proyeccionesProps = [];
+  dataRetrieved: boolean = false;
+
+  array1;
+  array2;
+  array3;
+  investment: any;
+  projection: any;
+  projection_exists: boolean;
+  instrumentCode: any;
+  payment_types: any;
+  funds: any;
+  banks: any;
+  accounts: any;
+  payment_date: string = "";
+  submitted: boolean;
+  incomeObject: any;
+  incomes: any;
+  incomes_exists: boolean;
+  idInversion: any;
+  idInstrumentIncome: any;
+  projectionDate: any;
+  projectionRes: any;
+  partial: boolean;
+  idProjection: any;
+  cantConciliate: boolean = true;
+  conciliateObject: any;
+  has_conciliate: boolean;
+  showIncomeForm: boolean = false;
+
+  constructor(
+    private catalogService: CatalogsService,
+    private incomesService: IncomesService,
+    private authService: AuthService,
+    private formInvestmentProposal: FormInvestmentProposalService,
+    private router: Router,
+    private route: ActivatedRoute,
+
+    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();
+  }
+
+  nameBankAccounts(id: string) {
+    let bank;
+    bank = this.banks.find(e => e.id_banco == id);
+    return bank.nombre;
+  }
+
+  ngOnInit() {
+    this.partial = false;
+
+    const formDataObj = {};
+
+    this.route.queryParams.subscribe(params => {
+      // ALT
+      this.idInversion = params["id_inversion"];
+      this.idInstrumentIncome = params["id_proyeccion_ingreso_instrumento"];
+      this.projectionDate = params["fecha_proyeccion_pago"];
+      this.idProjection = params["id_proyeccion_ingreso"];
+    });
+
+    this.incomesService
+      .getProjection(
+        this.idInversion,
+        this.idInstrumentIncome,
+        this.projectionDate,
+        this.idProjection
+      )
+      .subscribe(
+        res => {
+          this.projection_exists = true;
+          this.projectionRes = res["result"][0];
+
+          if (this.projectionRes.estado == "CONCILIADO") {
+            this.has_conciliate = true;
+          }
+
+          if (this.projectionRes.estado == "NO CONCILIADO") {
+            this.cantConciliate = false;
+          }
+
+          if (this.projectionRes.estado == "EN ESPERA") {
+            // Estado
+            this.showIncomeForm = true;
+          }
+
+          this.investmentProposalForm.setValue({
+            capital: this.projectionRes.capital,
+            ingreso_bruto: this.projectionRes.ingreso_bruto,
+            renta: this.projectionRes.renta,
+            ingreso_neto: this.projectionRes.ingreso_neto,
+            tipo_pago: "",
+            cuenta_bancaria: "",
+            comentario: "",
+            fecha_inicio: "",
+            fecha_vencimiento: ""
+          });
+          Swal.close();
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: err.message
+          });
+        }
+      );
+
+    this.catalogService.getPaymentTypes().subscribe(res => {
+      this.payment_types = res;
+    });
+    this.catalogService.getCountries().subscribe(res => {
+      this.funds = res;
+    });
+    this.catalogService.getCatalogInfo("bancos").subscribe(res => {
+      this.banks = res;
+      this.catalogService.getCatalogInfo("cuentas-bancarias").subscribe(res => {
+        this.accounts = res;
+      });
+      //this.payment_types = res;
+    });
+
+    this.investmentProposalForm = this.formBuilder.group({
+      capital: [
+        "",
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ingreso_bruto: [
+        "",
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      renta: [
+        "",
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ingreso_neto: [
+        "",
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      tipo_pago: ["", Validators.required],
+      cuenta_bancaria: ["", Validators.required],
+      //fecha_ingreso: ["", Validators.required],
+      comentario: ["", Validators.required],
+      fecha_inicio: [""],
+      fecha_vencimiento: [""]
+    });
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  toggle = () => {
+    if (this.partial == false) {
+      this.partial = true;
+    } else {
+      this.partial = false;
+    }
+  };
+
+  submitIncome(form: any) {
+    this.submitted = true;
+    console.log(form);
+    if (!form.valid) {
+      return false;
+    }
+
+    this.incomeObject = {
+      id_inversion_instrumento: this.projectionRes.id_inversion_instrumento,
+      id_proyeccion_ingreso_instrumento: this.idInstrumentIncome,
+      fecha_proyeccion_pago: this.projectionDate,
+
+      capital: form.value.capital,
+      ingreso_bruto: form.value.ingreso_bruto,
+      renta: form.value.renta,
+      ingreso_neto: form.value.ingreso_neto,
+      id_cuenta_bancaria: form.value.cuenta_bancaria,
+      id_tipo_pago: form.value.tipo_pago,
+      comentario: form.value.comentario
+    };
+
+    if (this.idProjection != undefined) {
+      this.incomeObject["id_proyeccion_ingreso"] = this.idProjection;
+    }
+
+    if (this.partial == true) {
+      this.incomeObject["fecha_inicio"] =
+        form.value.fecha_inicio.singleDate.formatted;
+      this.incomeObject["fecha_vencimiento"] =
+        form.value.fecha_vencimiento.singleDate.formatted;
+    }
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.incomesService.createIncome(this.incomeObject).subscribe(
+      success => {
+        if (success) {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito",
+            confirmButtonText: "El ingreso ha sido guardado"
+          }).then(result => {
+            Swal.close();
+            this.cantConciliate = false;
+          });
+        }
+      },
+      err => {
+        Swal.fire({
+          icon: "error",
+          title: "Error al guardar",
+          text: err.message
+        });
+      }
+    );
+  }
+
+  conciliateIncome() {
+    this.conciliateObject = {
+      id_inversion_instrumento: this.projectionRes.id_inversion_instrumento,
+      id_proyeccion_ingreso_instrumento: this.idInstrumentIncome,
+      fecha_proyeccion_pago: this.projectionDate
+    };
+    if (this.idProjection != undefined) {
+      this.conciliateObject["id_proyeccion_ingreso"] = this.idProjection;
+    }
+
+    this.incomesService.conciliateIncome(this.conciliateObject).subscribe(
+      success => {
+        if (success) {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito",
+            confirmButtonText: "El ingreso ha sido conciliado"
+          }).then(result => {
+            Swal.close();
+            window.location.href = "#/investment-incomes";
+          });
+        }
+      },
+      err => {
+        Swal.fire({
+          icon: "error",
+          title: "Error al guardar",
+          text: err.message
+        });
+      }
+    );
+  }
+}

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

@@ -0,0 +1,238 @@
+<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">Inversiones activas</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+    </div>
+    <br />
+    <div class="row">
+      <div class="col-12">
+        <div class="align-container">
+          <h4><b>Listado de inversiones</b></h4>
+          <div class="row">
+            <div class="col-lg-4 col-sm-6">
+              <div class="form-group">
+                <label for="instrumento">Proyecciones: </label>
+
+                <select
+                  class="custom-select"
+                  name="instrumento"
+                  (change)="filter_by_income_status($event)"
+                >
+                  <option value="1">Proyecciones actuales no canceladas</option>
+                  <option value="2">Proyecciones no canceladas</option>
+                  <option value="0">Todas</option>
+                </select>
+              </div>
+            </div>
+            <div class="col-lg-4 col-sm-6">
+              <div class="form-group">
+                <label for="instrumento">Instrumento: </label>
+
+                <select
+                  class="custom-select"
+                  name="instrumento"
+                  (change)="filter_by_instrument($event)"
+                >
+                  <option value="">Seleccione una opción</option>
+                  <option
+                    *ngFor="let item of instrumentTypes"
+                    [value]="item.nombre"
+                  >
+                    {{ item.nombre }}</option
+                  >
+                </select>
+              </div>
+            </div>
+
+            <div class="col-lg-4 col-sm-6">
+              <div class="form-group">
+                <label for="instrumento">Rango de fechas: </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_rango"
+                    (click)="dp.toggleCalendar()"
+                    (dateChanged)="filter_by_date($event)"
+                    [options]="myDpOptions"
+                    #dp="angular-mydatepicker"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div class="col-lg-4 col-sm-6">
+              <div class="form-group">
+                <label for="estado">Estado: </label>
+
+                <select
+                  class="custom-select"
+                  name="estado"
+                  (change)="filter_by_state($event)"
+                >
+                  <option value="">Seleccione una opción</option>
+                  <option value="EN ESPERA">En espera</option>
+                  <option value="NO CONCILIADO">No conciciliado</option>
+                  <option value="PARCIAL">Parcial</option>
+                  <option value="REMANENTE">Remanente</option>
+                  <option value="CONCILIADO">Conciliado</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label for="filter" class="control-label">Filtro rápido: </label>
+            <input
+              name="filter"
+              (keyup)="applyFilter($event)"
+              class="form-control input-md"
+              placeholder="Codigo inversion, empresa"
+            />
+          </div>
+          <br />
+
+          <div class="example-container mat-elevation-z8">
+            <div class="example-table-container table-responsive">
+              <table
+                mat-table
+                [dataSource]="dataSource"
+                matSort
+                class="example-table"
+              >
+                <!-- Name Column -->
+                <ng-container matColumnDef="codigo_inversion">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Codigo
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.codigo_inversion }}
+                  </td>
+                </ng-container>
+                <!-- Country Column -->
+                <ng-container matColumnDef="nombre_inversion">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Nombre inversión
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.nombre_inversion }}
+                  </td>
+                </ng-container>
+
+                <!-- Country Column -->
+                <ng-container matColumnDef="fecha_proyeccion_pago">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Fecha de pago
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.fecha_proyeccion_pago }}
+                  </td>
+                </ng-container>
+
+                <!-- Country Column -->
+                <ng-container matColumnDef="tipo_instrumento">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Instrumento
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.tipo_instrumento }}
+                  </td>
+                </ng-container>
+                <!-- Country Column -->
+                <ng-container matColumnDef="empresa">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Empresa
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.empresa }}
+                  </td>
+                </ng-container>
+
+                <!-- Country Column -->
+                <ng-container matColumnDef="estado">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Estado
+                  </th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.estado }}
+                  </td>
+                </ng-container>
+
+                <!--  Column -->
+                <ng-container matColumnDef="id_inversion">
+                  <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
+                  <td mat-cell *matCellDef="let row">
+                    <div class="action-buttons">
+                      <a
+                        title="Detalle de la inversion"
+                        class="btn btn-primary btn-custom-small"
+                        (click)="view_investment_proposal(row.id_inversion)"
+                      >
+                        <i class="fas fa-info"></i>
+                      </a>
+                    </div>
+                  </td>
+                </ng-container>
+                <ng-container matColumnDef="proyeccion_ingreso">
+                  <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
+                  <td mat-cell *matCellDef="let row">
+                    <div class="action-buttons">
+                      <a
+                        title="Ingresos"
+                        class="btn btn-success btn-custom-small"
+                        (click)="
+                          go_to_instrument_url(
+                            row.id_inversion,
+                            row.id_proyeccion_ingreso_instrumento,
+                            row.fecha_proyeccion_pago,
+                            row.id_proyeccion_ingreso
+                          )
+                        "
+                      >
+                        <i class="fas fa-hand-holding-usd"></i>
+                        Ingresos
+                      </a>
+                    </div>
+                  </td>
+                </ng-container>
+                <tr
+                  mat-header-row
+                  *matHeaderRowDef="displayedColumns; sticky: true"
+                ></tr>
+                <tr
+                  mat-row
+                  *matRowDef="let row; columns: displayedColumns"
+                ></tr>
+              </table>
+
+              <mat-paginator
+                [pageSizeOptions]="[10, 15, 25]"
+                [pageIndex]="0"
+                [pageSize]="10"
+              ></mat-paginator>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IncomesComponent } from './incomes.component';
+
+describe('IncomesComponent', () => {
+  let component: IncomesComponent;
+  let fixture: ComponentFixture<IncomesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IncomesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IncomesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,256 @@
+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 { IncomesService } from "@app/services/incomes.service";
+
+import { AuthService } from "@app/services/auth2.service";
+import { JwtHelperService } from "@auth0/angular-jwt";
+import { IncomeList } from "@app/models/income-list";
+import { from } from "rxjs";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { Router } from "@angular/router";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+
+@Component({
+  selector: "app-income-proposals",
+  templateUrl: "./incomes.component.html",
+  styleUrls: ["./incomes.component.scss"]
+})
+export class IncomesComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Ingresos";
+
+  // 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"
+  };
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: true,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+  displayedColumns: string[] = [
+    "codigo_inversion",
+    "nombre_inversion",
+    "fecha_proyeccion_pago",
+    "tipo_instrumento",
+    "empresa",
+    "estado",
+    "id_inversion",
+    "proyeccion_ingreso"
+  ];
+  //displayedColumns: string[] = ['state'];
+
+  listProposals: IncomeList[];
+  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;
+  instrumentTypes: any;
+
+  constructor(
+    private catalogService: CatalogsService,
+    private incomesService: IncomesService,
+    private authService: AuthService,
+    private formInvestmentProposal: FormInvestmentProposalService,
+    private router: Router
+  ) {
+    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() {
+    this.catalogService.getInstrumentTypes().subscribe(res => {
+      this.instrumentTypes = res;
+    });
+
+    this.incomesService.getProjectionsIncomeList().subscribe(
+      ans => {
+        this.listProposals = ans.result;
+        this.dataSource.data = this.listProposals;
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+      },
+      err => {
+        Swal.fire({
+          icon: "error",
+          title: "Error en el servidor",
+          text: err.message
+        });
+      }
+    );
+
+    setTimeout(() => {
+      Swal.close();
+    }, 1200);
+  }
+
+  filter_by_instrument(event: any) {
+    const filterInstrument = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterInstrument;
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+    this.dataSource.sort = this.sort;
+  }
+
+  filter_by_date(event: any) {
+    let dateFormat = event.dateRange.formatted.split(" - ", 2);
+
+    let date0 = dateFormat[0].split("/");
+    let date1 = dateFormat[1].split("/");
+
+    let dateStart = Number(date0[2] + date0[1] + date0[0]);
+    let dateFinish = Number(date1[2] + date1[1] + date1[0]);
+
+    this.dataSource.filterPredicate = (data, filter) => {
+      if (dateFormat[0] && dateFormat[1]) {
+        let date2 = data["fecha_proyeccion_pago"].split("/");
+        let payment_date = Number(date2[2] + date2[1] + date2[0]);
+        return payment_date >= dateStart && payment_date <= dateFinish;
+      }
+      return true;
+    };
+    this.dataSource.filter = "" + Math.random();
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+    this.dataSource.sort = this.sort;
+  }
+
+  filter_by_state(event: any) {
+    const filterInstrument = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterInstrument;
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+    this.dataSource.sort = this.sort;
+  }
+
+  filter_by_income_status(event: any) {
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    let active = event.target.value;
+
+    let active_income = active == 1 || active == 2 ? "1" : "0";
+    let current_date = active == 1 ? "1" : "0";
+
+    this.incomesService
+      .getProjectionsIncomeList(active_income, current_date)
+      .subscribe(
+        ans => {
+          this.listProposals = ans["result"];
+          this.dataSource.data = this.listProposals;
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+          Swal.close();
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: err.message
+          });
+        }
+      );
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLSelectElement).value;
+    this.dataSource.filter = filterValue;
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  view_investment_proposal(id: string) {
+    this.formInvestmentProposal.resetFormData();
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    setTimeout(() => {
+      this.router.navigate([`/investment-proposal/${id}`]);
+    }, 1000);
+  }
+
+  instrument_has_costs(id: string) {
+    return true;
+  }
+
+  go_to_instrument_url(
+    id: string,
+    id_proyeccion_instrumento: string,
+    fecha: string,
+    id_proyeccion?: string
+  ) {
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    setTimeout(() => {
+      this.router.navigate([`/investment-income`], {
+        queryParams: {
+          id_inversion: id,
+          id_proyeccion_ingreso_instrumento: id_proyeccion_instrumento,
+          fecha_proyeccion_pago: fecha,
+          id_proyeccion_ingreso: id_proyeccion
+        }
+      });
+    }, 1000);
+  }
+}

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

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

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

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

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

@@ -0,0 +1,1586 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Certificados de inversión
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <div class=" col-md-6 col-sm-12 border border-light">
+        <div class="row no-gutters">
+          <!-- Valor nominal compra -->
+
+          <div class="col-12">
+            <h5>Compra</h5>
+          </div>
+
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="costo_cedeval">Costo CEDEVAL: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="costo_cedeval"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.costo_cedeval.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.costo_cedeval.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.costo_cedeval.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.costo_cedeval.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_nominal_compra">Valor nominal compra: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="valor_nominal_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.valor_nominal_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.valor_nominal_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.valor_nominal_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.valor_nominal_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión casa compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_casa_porcentaje_compra"
+                >Comisión casa compra:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_casa_porcentaje_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_casa_porcentaje_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_casa_porcentaje_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div
+                    *ngIf="f.comision_casa_porcentaje_compra.errors.required"
+                  >
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.comision_casa_porcentaje_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión bolsa compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_bolsa_porcentaje_compra"
+                >Comisión bolsa compra:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_bolsa_porcentaje_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_bolsa_porcentaje_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_bolsa_porcentaje_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div
+                    *ngIf="f.comision_bolsa_porcentaje_compra.errors.required"
+                  >
+                    Campo requerido
+                  </div>
+                  <div
+                    *ngIf="f.comision_bolsa_porcentaje_compra.errors.pattern"
+                  >
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Cupón -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="cupon_porcentaje_compra">Cupón: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="cupon_porcentaje_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.cupon_porcentaje_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.cupon_porcentaje_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.cupon_porcentaje_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.cupon_porcentaje_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Costo de transferencia -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="costo_transferencia">Costo de transferencia: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="costo_transferencia"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.costo_transferencia.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.costo_transferencia.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.costo_transferencia.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.costo_transferencia.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_compra">Precio de compra: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.precio_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de vencimiento de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_vencimiento_compra"
+                >Precio de vencimiento de compra:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_vencimiento_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.precio_vencimiento_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_vencimiento_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_vencimiento_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Ultima fecha cupón -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_ultima_cupon_compra"
+                >Ultima fecha cupón:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_ultima_cupon_compra"
+                    (click)="dp1.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp1="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_ultima_cupon_compra.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de vencimiento de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_vencimiento_compra"
+                >Fecha de vencimiento de compra:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_vencimiento_compra"
+                    (click)="dp2.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp2="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_vencimiento_compra.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de liquidacion de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_liquidacion_compra"
+                >Fecha de liquidación de compra:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_liquidacion_compra"
+                    (click)="dp3.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp3="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_liquidacion_compra.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class=" col-md-6 col-sm-12 border border-light">
+        <div class="row no-gutters">
+          <div class="col-12">
+            <h5>Venta</h5>
+          </div>
+          <!-- Valor nominal venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="valor_nominal_venta">Valor nominal venta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="valor_nominal_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.valor_nominal_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.valor_nominal_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.valor_nominal_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.valor_nominal_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión casa venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_casa_porcentaje_venta"
+                >Comisión casa venta:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_casa_porcentaje_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_casa_porcentaje_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión bolsa venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_bolsa_porcentaje_venta"
+                >Comisión bolsa venta:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_bolsa_porcentaje_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_bolsa_porcentaje_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div
+                    *ngIf="f.comision_bolsa_porcentaje_venta.errors.required"
+                  >
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Cupón venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="cupon_porcentaje_venta">Cupón: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="cupon_porcentaje_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.cupon_porcentaje_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.cupon_porcentaje_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.cupon_porcentaje_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_venta">Precio de venta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.precio_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de vencimiento de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_vencimiento_venta"
+                >Precio de vencimiento de venta:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_vencimiento_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.precio_vencimiento_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_vencimiento_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_vencimiento_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Ultima fecha cupón venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_ultima_cupon_venta">Ultima fecha cupón: </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_ultima_cupon_venta"
+                    (click)="dp4.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp4="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_ultima_cupon_venta.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de vencimiento de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_vencimiento_venta"
+                >Fecha de vencimiento de venta:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_vencimiento_venta"
+                    (click)="dp5.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp5="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_vencimiento_venta.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de liquidacion de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_liquidacion_venta"
+                >Fecha de liquidación de venta:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_liquidacion_venta"
+                    (click)="dp6.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp6="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_liquidacion_venta.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-12 col-sm-12 pr-xl-12">
+        <div class="form-group text-right">
+          <br />
+          <button
+            type="button"
+            class="btn btn-success center-component"
+            (click)="getCalculations(investmentProposalForm, false)"
+          >
+            Realizar cálculos
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <!-- Calculos del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Cálculos del instrumento</span
+          >
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa compra:</h4>
+          <div class="field">
+            $USD {{ comision_casa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa compra:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de compra:</h4>
+          <div class="field">
+            {{ dias_vencimiento_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de compra:</h4>
+          <div class="field">
+            {{ dias_acumulados_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra:</h4>
+          <div class="field">
+            $USD
+            {{ interes_acumulado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio compra (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado compra:</h4>
+          <div class="field">
+            $USD {{ valor_transado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Monto a pagar:</h4>
+          <div class="field">$USD {{ monto_pagar | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha inicio de vigencia:</h4>
+          <div class="field">
+            {{ fecha_inicio_vigencia }}
+          </div>
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de venta
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa venta:</h4>
+          <div class="field">
+            $USD {{ comision_casa_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa venta:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión venta (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento venta (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de venta:</h4>
+          <div class="field">
+            {{ dias_vencimiento_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de venta:</h4>
+          <div class="field">
+            {{ dias_acumulados_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta:</h4>
+          <div class="field">
+            $USD {{ interes_acumulado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio venta (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado venta:</h4>
+          <div class="field">
+            $USD {{ valor_transado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="row align-container" *ngIf="operation_result">
+          <div class="col-12">
+            <h3>
+              Resultado de la operación
+            </h3>
+          </div>
+          <div class="col-sm-4">
+            <h4>Monto a recibir:</h4>
+            <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Días tenencia total:</h4>
+            <div class="field">
+              {{ dias_tenencia_total }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Ingresos intereses:</h4>
+            <div class="field">
+              $USD {{ ingresos_intereses | number: "1.2-4" }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Costos totales:</h4>
+            <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Ganancia / Pérdida total:</h4>
+            <div class="field">
+              $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Ganancia / Pérdida de capital:</h4>
+            <div class="field">
+              {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Interés (%):</h4>
+            <div class="field">
+              {{ intereses_porcentaje | number: "1.2-4" }} %
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Interés neto antes de impuesto (%):</h4>
+            <div class="field">
+              {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+              %
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Interés neto después de impuesto (%):</h4>
+            <div class="field">
+              {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+              %
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Total de ingresos recibidos:</h4>
+            <div class="field">
+              $USD
+              {{ total_ingresos_recibidos | number: "1.2-4" }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <div class="form-group text-center space-20">
+      <button
+        type="button"
+        class="btn btn-default center-component margin-right"
+        (click)="goToPrevious()"
+      >
+        Anterior
+      </button>
+      <button
+        type="submit"
+        class="btn btn-primary center-component margin-right"
+        (click)="goToNext(investmentProposalForm)"
+      >
+        Siguiente
+      </button>
+    </div>
+  </form>
+</div>
+
+<div *ngIf="summary">
+  <div class="timeline-body">
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo CEDEVAL:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.costo_cedeval | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_nominal_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.precio_compra | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento compra:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_vencimiento_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje compra:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.cupon_porcentaje_compra | number: "1.2-4"
+          }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_siguiente_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_casa_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_casa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_bolsa_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision bolsa compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_bolsa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_comision_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_acumulados_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra:</h4>
+        <div class="field">
+          $USD
+          {{
+            instrument_work_summary.interes_acumulado_compra | number: "1.2-4"
+          }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.interes_acumulado_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_sucio_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_transado_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work_summary.monto_pagar | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_ultima_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_liquidacion_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha inicio de vigencia:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_inicio_vigencia }}
+        </div>
+      </div>
+    </div>
+    <!--
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_nominal_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.precio_venta | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento venta:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_vencimiento_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje venta:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.cupon_porcentaje_venta | number: "1.2-4"
+          }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_siguiente_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_casa_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_casa_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision bolsa venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_bolsa_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_bolsa_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_comision_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_vencimiento_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_acumulados_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta:</h4>
+        <div class="field">
+          $USD
+          {{
+            instrument_work_summary.interes_acumulado_venta | number: "1.2-4"
+          }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.interes_acumulado_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_sucio_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_ultima_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_liquidacion_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_vencimiento_venta }}
+        </div>
+      </div>
+    </div>
+    <div class="row" *ngIf="operation_result">
+      <div class="col-12">
+        <h3>
+          Resultado de la operación
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal compra:</h4>
+        <div class="field">
+          $USD{{ operation_results_work.valor_nominal_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días tenencia total:</h4>
+        <div class="field">
+          {{ operation_results_work.dias_tenencia_total }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingresos intereses:</h4>
+        <div class="field">
+          $USD {{ operation_results_work.ingresos_intereses | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costos totales:</h4>
+        <div class="field">
+          $USD {{ operation_results_work.costos_totales | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia o pérdida total:</h4>
+        <div class="field">
+          $USD
+          {{ operation_results_work.ganancia_perdida_total | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia o pérdida de capital:</h4>
+        <div class="field">
+          {{
+            operation_results_work.ganancia_perdida_capital_porcentaje
+              | number: "1.2-4"
+          }}%
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés (%):</h4>
+        <div class="field">
+          {{ operation_results_work.intereses_porcentaje | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto antes de impuesto (%):</h4>
+        <div class="field">
+          {{
+            operation_results_work.neto_antes_impuesto_porcentaje
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto después de impuesto (%):</h4>
+        <div class="field">
+          {{
+            operation_results_work.neto_despues_impuesto_porcentaje
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+    </div>
+  -->
+    <br />
+    <div *ngIf="hasProjections" class="instrument-calcs-summary">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge-warning badge-custom-instrument"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <!-- Country Column -->
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+            </ng-container>
+
+            <!-- Country Column -->
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

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

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

@@ -256,42 +256,6 @@
         </div>
       </div>
 
-      <!-- Fecha vencimiento -->
-      <div class="col-lg-6 col-sm-12 pr-xl-3">
-        <div class="form-group">
-          <label for="fecha_vencimiento">Fecha vencimiento: </label>
-
-          <div class="input-box-container">
-            <div>
-              <p>
-                <i class="far fa-calendar" aria-hidden="true"></i>
-              </p>
-              <input
-                class="input-box form-control"
-                placeholder="Seleccione una fecha"
-                angular-mydatepicker
-                formControlName="fecha_vencimiento"
-                (click)="dp2.toggleCalendar()"
-                [options]="myDpOptions"
-                #dp2="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>
-
       <!-- Ultima fecha cupón -->
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group">
@@ -386,6 +350,10 @@
           <h4>Comision casa:</h4>
           <div class="field">$USD {{ comision_casa | number: "1.2-4" }}</div>
         </div>
+        <div class="col-sm-6">
+          <h4>Fecha de vencimiento:</h4>
+          <div class="field">{{ fecha_vencimiento }}</div>
+        </div>
       </div>
     </div>
     <br />
@@ -426,7 +394,16 @@
                 }}
               </td>
             </ng-container>
-
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+            </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -627,6 +604,17 @@
             </ng-container>
 
             <!-- Country Column -->
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+            </ng-container>
+
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
               <td mat-cell *matCellDef="let row">

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

@@ -28,6 +28,7 @@ export class CETE implements InstrumentComponent {
     "posicion",
     "plazo",
     "fecha_pago",
+    "ingreso_bruto",
     "ingreso_neto"
   ];
 
@@ -93,6 +94,7 @@ export class CETE implements InstrumentComponent {
   dataSource = new MatTableDataSource(this.proyecciones);
   dataSource2 = new MatTableDataSource(this.proyecciones);
   hasProjections: boolean;
+  fecha_vencimiento: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -176,7 +178,7 @@ export class CETE implements InstrumentComponent {
               }
             },
         Validators.required
-      ],
+      ] /*
       fecha_vencimiento: [
         this.instrument_exists
           ? ""
@@ -192,7 +194,7 @@ export class CETE implements InstrumentComponent {
               }
             },
         Validators.required
-      ],
+      ],*/,
       fecha_operacion: [
         this.instrument_exists
           ? ""
@@ -242,6 +244,7 @@ export class CETE implements InstrumentComponent {
 
   getCalculations(form: any, saveForm: boolean) {
     this.submitted = true;
+
     if (!form.valid) {
       return false;
     }
@@ -255,9 +258,9 @@ export class CETE implements InstrumentComponent {
       .ceteCalc(
         "CETE", // Codigo del instrumento
         {
-          id_tipo_base: this.general.base_anual,
-          id_formato_ingreso: this.general.formato_ingreso,
-          id_periodicidad: this.general.periodicidad
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
         },
         {
           valor_nominal: +this.f.valor_nominal.value,
@@ -270,13 +273,12 @@ export class CETE implements InstrumentComponent {
           fecha_liquidacion: this.f.fecha_liquidacion.value.singleDate
             .formatted,
           fecha_ultima_cupon: this.f.fecha_ultima_cupon.value.singleDate
-            .formatted,
-          fecha_vencimiento: this.f.fecha_vencimiento.value.singleDate.formatted
+            .formatted
+          //fecha_vencimiento: this.f.fecha_vencimiento.value.singleDate.formatted
         }
       )
       .subscribe(
         ans => {
-          console.log(ans);
           this.ingreso_bruto = ans["result"]["ingreso_bruto"];
           this.ingreso_neto = ans["result"]["ingreso_neto"];
           this.valor_transado = ans["result"]["valor_transado"];
@@ -286,6 +288,7 @@ export class CETE implements InstrumentComponent {
           this.comision_bolsa = ans["result"]["comision_bolsa"];
           this.comision_casa = ans["result"]["comision_casa"];
           this.proyecciones = ans["result"]["proyecciones"];
+          this.fecha_vencimiento = ans["result"]["fecha_vencimiento"];
 
           this.dataSource.data = this.proyecciones;
           this.dataSource.paginator = this.paginator;
@@ -308,8 +311,7 @@ export class CETE implements InstrumentComponent {
               .formatted,
             fecha_ultima_cupon: this.f.fecha_ultima_cupon.value.singleDate
               .formatted,
-            fecha_vencimiento: this.f.fecha_vencimiento.value.singleDate
-              .formatted,
+            fecha_vencimiento: this.fecha_vencimiento,
             ingreso_bruto: this.ingreso_bruto,
             ingreso_neto: this.ingreso_neto,
             valor_transado: this.valor_transado,

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

@@ -158,38 +158,19 @@
         </div>
       </div>
 
-      <!-- Fecha vencimiento -->
+      <!-- # de certificado -->
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group">
-          <label for="fecha_vencimiento">Fecha vencimiento: </label>
-
+          <label for="numero_certificado">Número de certificado: </label>
           <div class="input-box-container">
-            <div>
-              <p>
-                <i class="far fa-calendar" aria-hidden="true"></i>
-              </p>
-              <input
-                class="input-box form-control"
-                placeholder="Seleccione una fecha"
-                angular-mydatepicker
-                formControlName="fecha_vencimiento"
-                (click)="dp2.toggleCalendar()"
-                [options]="myDpOptions"
-                #dp2="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>
+            <p>
+              <i class="fas fa-certificate"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="numero_certificado"
+              class="form-control"
+            />
           </div>
         </div>
       </div>
@@ -249,6 +230,10 @@
           <h4>Renta:</h4>
           <div class="field">$USD {{ renta | number: "1.2-4" }}</div>
         </div>
+        <div class="col-sm-6">
+          <h4>Fecha de vencimiento:</h4>
+          <div class="field">{{ fecha_vencimiento }}</div>
+        </div>
         <div class="col-sm-6">
           <h4>Fecha inicio de vigencia:</h4>
           <div class="field">{{ fecha_inicio_vigencia }}</div>
@@ -304,11 +289,12 @@
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
+                $USD
                 {{
                   row.renta == "" || row.renta == undefined
                     ? "-"
                     : (row.renta | number: "1.2-4")
-                }}%
+                }}
               </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
@@ -437,6 +423,17 @@
           {{ instrument_work.fecha_inicio_vigencia }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Número de certificado:</h4>
+        <div class="field">
+          {{
+            instrument_work.numero_certificado == undefined ||
+            instrument_work.numero_certifcado == ""
+              ? "-"
+              : instrument_work.numero_certificado
+          }}
+        </div>
+      </div>
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
@@ -487,11 +484,12 @@
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
+                $USD
                 {{
                   row.renta == "" || row.renta == undefined
                     ? "-"
                     : (row.renta | number: "1.2-4")
-                }}%
+                }}
               </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">

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

@@ -63,7 +63,7 @@ export class DAP implements InstrumentComponent {
     11: "Nov",
     12: "Dic"
   };
-  instrument_exists: boolean;
+  instrument_null: boolean;
   instrument_work: any = [];
   investmentProposalForm: FormGroup;
   myDpOptions: IAngularMyDpOptions = {
@@ -91,6 +91,8 @@ export class DAP implements InstrumentComponent {
   dapObject: {};
   renta: any;
   hasProjections: boolean;
+  numero_certificado: any;
+  fecha_vencimiento: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -101,7 +103,7 @@ export class DAP implements InstrumentComponent {
     public datepipe: DatePipe
   ) {
     this.instrument_work = this.formDataService.getWork();
-    this.instrument_exists = this.instrument_work == undefined;
+    this.instrument_null = this.instrument_work == undefined;
     this.general = this.formDataService.getGeneralInfo();
 
     if (
@@ -119,7 +121,7 @@ export class DAP implements InstrumentComponent {
 
     this.investmentProposalForm = this.formBuilder.group({
       monto_inversion: [
-        this.instrument_exists ? "" : this.instrument_work.monto_inversion,
+        this.instrument_null ? "" : this.instrument_work.monto_inversion,
         [
           Validators.required,
           Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
@@ -127,44 +129,30 @@ export class DAP implements InstrumentComponent {
       ],
 
       renta_porcentaje: [
-        this.instrument_exists ? "" : this.instrument_work.renta_porcentaje,
+        this.instrument_null || this.instrument_work.renta_porcentaje == null
+          ? 10
+          : this.instrument_work.renta_porcentaje,
         [Validators.required]
       ],
       tasa_porcentaje: [
-        this.instrument_exists ? "" : this.instrument_work.tasa_porcentaje,
+        this.instrument_null ? "" : this.instrument_work.tasa_porcentaje,
         [
           Validators.required,
           Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
         ]
       ],
       plazo: [
-        this.instrument_exists ? "" : this.instrument_work.plazo,
+        this.instrument_null ? "" : this.instrument_work.plazo,
         [Validators.required]
       ],
 
-      /*formato_ingreso: [
-        this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
-        [Validators.required]
-      ],*/
-
-      fecha_vencimiento: [
-        this.instrument_exists
-          ? ""
-          : {
-              isRange: false,
-              singleDate: {
-                jsDate: parse(
-                  this.instrument_work.fecha_vencimiento,
-                  "dd/MM/yyyy",
-                  new Date()
-                ),
-                formatted: this.instrument_work.fecha_vencimiento
-              }
-            },
-        Validators.required
+      numero_certificado: [
+        this.instrument_null ? "" : this.instrument_work.numero_certificado,
+        []
       ],
+
       fecha_operacion: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : {
               isRange: false,
@@ -196,6 +184,7 @@ export class DAP implements InstrumentComponent {
 
   getCalculations(form: any, saveForm: boolean) {
     this.submitted = true;
+
     if (!form.valid) {
       return false;
     }
@@ -210,9 +199,9 @@ export class DAP implements InstrumentComponent {
       .dapCalc(
         "DAP", // Codigo del instrumento
         {
-          id_tipo_base: this.general.base_anual,
-          id_periodicidad: this.general.periodicidad,
-          id_formato_ingreso: this.general.formato_ingreso
+          id_tipo_base: +this.general.base_anual,
+          id_periodicidad: +this.general.periodicidad,
+          id_formato_ingreso: +this.general.formato_ingreso
         },
         {
           monto_inversion: +this.f.monto_inversion.value,
@@ -220,8 +209,7 @@ export class DAP implements InstrumentComponent {
           renta_porcentaje: +this.f.renta_porcentaje.value,
           plazo: +this.f.plazo.value,
           //id_formato_ingreso: this.f.formato_ingreso.value,
-          fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted,
-          fecha_vencimiento: this.f.fecha_vencimiento.value.singleDate.formatted
+          fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted
         }
       )
       .subscribe(
@@ -235,6 +223,8 @@ export class DAP implements InstrumentComponent {
           this.fecha_inicio_vigencia = ans["result"]["fecha_inicio_vigencia"];
           this.renta = ans["result"]["renta"];
           this.proyecciones = ans["result"]["proyecciones"];
+          this.numero_certificado = ans["result"]["numero_certificado"];
+          this.fecha_vencimiento = ans["result"]["fecha_vencimiento"];
 
           this.dataSource.data = this.proyecciones;
           this.dataSource.paginator = this.paginator;
@@ -252,15 +242,13 @@ export class DAP implements InstrumentComponent {
             rendimiento_neto: this.rendimiento_neto,
             fecha_inicio_vigencia: this.fecha_inicio_vigencia,
             renta: this.renta,
+            numero_certificado: this.investmentProposalForm.value
+              .numero_certificado,
             proyecciones: this.proyecciones,
 
             fecha_operacion: this.investmentProposalForm.value.fecha_operacion
               .singleDate.formatted,
-            fecha_vencimiento:
-              this.investmentProposalForm.value.fecha_vencimiento != undefined
-                ? this.investmentProposalForm.value.fecha_vencimiento.singleDate
-                    .formatted
-                : ""
+            fecha_vencimiento: this.fecha_vencimiento
           };
           this.formDataService.setWork(this.dapObject);
           Swal.close();

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

@@ -0,0 +1,1586 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Eurobonos
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <div class=" col-md-6 col-sm-12 border border-light">
+        <div class="row no-gutters">
+          <!-- Valor nominal compra -->
+
+          <div class="col-12">
+            <h5>Compra</h5>
+          </div>
+
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="costo_cedeval">Costo CEDEVAL: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="costo_cedeval"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.costo_cedeval.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.costo_cedeval.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.costo_cedeval.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.costo_cedeval.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_nominal_compra">Valor nominal compra: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="valor_nominal_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.valor_nominal_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.valor_nominal_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.valor_nominal_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.valor_nominal_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión casa compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_casa_porcentaje_compra"
+                >Comisión casa compra:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_casa_porcentaje_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_casa_porcentaje_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_casa_porcentaje_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div
+                    *ngIf="f.comision_casa_porcentaje_compra.errors.required"
+                  >
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.comision_casa_porcentaje_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión bolsa compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_bolsa_porcentaje_compra"
+                >Comisión bolsa compra:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_bolsa_porcentaje_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_bolsa_porcentaje_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_bolsa_porcentaje_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div
+                    *ngIf="f.comision_bolsa_porcentaje_compra.errors.required"
+                  >
+                    Campo requerido
+                  </div>
+                  <div
+                    *ngIf="f.comision_bolsa_porcentaje_compra.errors.pattern"
+                  >
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Cupón -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="cupon_porcentaje_compra">Cupón: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="cupon_porcentaje_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.cupon_porcentaje_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.cupon_porcentaje_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.cupon_porcentaje_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.cupon_porcentaje_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Costo de transferencia -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="costo_transferencia">Costo de transferencia: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="costo_transferencia"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.costo_transferencia.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.costo_transferencia.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.costo_transferencia.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.costo_transferencia.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_compra">Precio de compra: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.precio_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de vencimiento de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_vencimiento_compra"
+                >Precio de vencimiento de compra:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_vencimiento_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.precio_vencimiento_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_vencimiento_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_vencimiento_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Ultima fecha cupón -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_ultima_cupon_compra"
+                >Ultima fecha cupón:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_ultima_cupon_compra"
+                    (click)="dp1.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp1="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_ultima_cupon_compra.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de vencimiento de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_vencimiento_compra"
+                >Fecha de vencimiento de compra:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_vencimiento_compra"
+                    (click)="dp2.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp2="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_vencimiento_compra.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de liquidacion de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_liquidacion_compra"
+                >Fecha de liquidación de compra:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_liquidacion_compra"
+                    (click)="dp3.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp3="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_liquidacion_compra.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class=" col-md-6 col-sm-12 border border-light">
+        <div class="row no-gutters">
+          <div class="col-12">
+            <h5>Venta</h5>
+          </div>
+          <!-- Valor nominal venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="valor_nominal_venta">Valor nominal venta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="valor_nominal_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.valor_nominal_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.valor_nominal_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.valor_nominal_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.valor_nominal_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión casa venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_casa_porcentaje_venta"
+                >Comisión casa venta:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_casa_porcentaje_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_casa_porcentaje_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión bolsa venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_bolsa_porcentaje_venta"
+                >Comisión bolsa venta:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_bolsa_porcentaje_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_bolsa_porcentaje_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div
+                    *ngIf="f.comision_bolsa_porcentaje_venta.errors.required"
+                  >
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Cupón venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="cupon_porcentaje_venta">Cupón: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="cupon_porcentaje_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.cupon_porcentaje_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.cupon_porcentaje_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.cupon_porcentaje_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_venta">Precio de venta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.precio_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de vencimiento de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_vencimiento_venta"
+                >Precio de vencimiento de venta:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_vencimiento_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.precio_vencimiento_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_vencimiento_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_vencimiento_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Ultima fecha cupón venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_ultima_cupon_venta">Ultima fecha cupón: </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_ultima_cupon_venta"
+                    (click)="dp4.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp4="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_ultima_cupon_venta.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de vencimiento de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_vencimiento_venta"
+                >Fecha de vencimiento de venta:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_vencimiento_venta"
+                    (click)="dp5.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp5="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_vencimiento_venta.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de liquidacion de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_liquidacion_venta"
+                >Fecha de liquidación de venta:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_liquidacion_venta"
+                    (click)="dp6.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp6="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_liquidacion_venta.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-12 col-sm-12 pr-xl-12">
+        <div class="form-group text-right">
+          <br />
+          <button
+            type="button"
+            class="btn btn-success center-component"
+            (click)="getCalculations(investmentProposalForm, false)"
+          >
+            Realizar cálculos
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <!-- Calculos del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Cálculos del instrumento</span
+          >
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa compra:</h4>
+          <div class="field">
+            $USD {{ comision_casa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa compra:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de compra:</h4>
+          <div class="field">
+            {{ dias_vencimiento_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de compra:</h4>
+          <div class="field">
+            {{ dias_acumulados_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra:</h4>
+          <div class="field">
+            $USD
+            {{ interes_acumulado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio compra (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado compra:</h4>
+          <div class="field">
+            $USD {{ valor_transado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Monto a pagar:</h4>
+          <div class="field">$USD {{ monto_pagar | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha inicio de vigencia:</h4>
+          <div class="field">
+            {{ fecha_inicio_vigencia }}
+          </div>
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de venta
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa venta:</h4>
+          <div class="field">
+            $USD {{ comision_casa_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa venta:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión venta (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento venta (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de venta:</h4>
+          <div class="field">
+            {{ dias_vencimiento_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de venta:</h4>
+          <div class="field">
+            {{ dias_acumulados_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta:</h4>
+          <div class="field">
+            $USD {{ interes_acumulado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio venta (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado venta:</h4>
+          <div class="field">
+            $USD {{ valor_transado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="row align-container" *ngIf="operation_result">
+          <div class="col-12">
+            <h3>
+              Resultado de la operación
+            </h3>
+          </div>
+          <div class="col-sm-4">
+            <h4>Monto a recibir:</h4>
+            <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Días tenencia total:</h4>
+            <div class="field">
+              {{ dias_tenencia_total }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Ingresos intereses:</h4>
+            <div class="field">
+              $USD {{ ingresos_intereses | number: "1.2-4" }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Costos totales:</h4>
+            <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Ganancia / Pérdida total:</h4>
+            <div class="field">
+              $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Ganancia / Pérdida de capital:</h4>
+            <div class="field">
+              {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Interés (%):</h4>
+            <div class="field">
+              {{ intereses_porcentaje | number: "1.2-4" }} %
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Interés neto antes de impuesto (%):</h4>
+            <div class="field">
+              {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+              %
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Interés neto después de impuesto (%):</h4>
+            <div class="field">
+              {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+              %
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Total de ingresos recibidos:</h4>
+            <div class="field">
+              $USD
+              {{ total_ingresos_recibidos | number: "1.2-4" }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <div class="form-group text-center space-20">
+      <button
+        type="button"
+        class="btn btn-default center-component margin-right"
+        (click)="goToPrevious()"
+      >
+        Anterior
+      </button>
+      <button
+        type="submit"
+        class="btn btn-primary center-component margin-right"
+        (click)="goToNext(investmentProposalForm)"
+      >
+        Siguiente
+      </button>
+    </div>
+  </form>
+</div>
+
+<div *ngIf="summary">
+  <div class="timeline-body">
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo CEDEVAL:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.costo_cedeval | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_nominal_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.precio_compra | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento compra:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_vencimiento_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje compra:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.cupon_porcentaje_compra | number: "1.2-4"
+          }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_siguiente_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_casa_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_casa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_bolsa_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision bolsa compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_bolsa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_comision_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_acumulados_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra:</h4>
+        <div class="field">
+          $USD
+          {{
+            instrument_work_summary.interes_acumulado_compra | number: "1.2-4"
+          }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.interes_acumulado_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_sucio_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_transado_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work_summary.monto_pagar | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_ultima_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_liquidacion_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha inicio de vigencia:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_inicio_vigencia }}
+        </div>
+      </div>
+    </div>
+    <!--
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_nominal_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.precio_venta | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento venta:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_vencimiento_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje venta:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.cupon_porcentaje_venta | number: "1.2-4"
+          }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_siguiente_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_casa_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_casa_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision bolsa venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_bolsa_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_bolsa_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_comision_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_vencimiento_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_acumulados_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta:</h4>
+        <div class="field">
+          $USD
+          {{
+            instrument_work_summary.interes_acumulado_venta | number: "1.2-4"
+          }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.interes_acumulado_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_sucio_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_ultima_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_liquidacion_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_vencimiento_venta }}
+        </div>
+      </div>
+    </div>
+    <div class="row" *ngIf="operation_result">
+      <div class="col-12">
+        <h3>
+          Resultado de la operación
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal compra:</h4>
+        <div class="field">
+          $USD{{ operation_results_work.valor_nominal_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días tenencia total:</h4>
+        <div class="field">
+          {{ operation_results_work.dias_tenencia_total }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingresos intereses:</h4>
+        <div class="field">
+          $USD {{ operation_results_work.ingresos_intereses | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costos totales:</h4>
+        <div class="field">
+          $USD {{ operation_results_work.costos_totales | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia o pérdida total:</h4>
+        <div class="field">
+          $USD
+          {{ operation_results_work.ganancia_perdida_total | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia o pérdida de capital:</h4>
+        <div class="field">
+          {{
+            operation_results_work.ganancia_perdida_capital_porcentaje
+              | number: "1.2-4"
+          }}%
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés (%):</h4>
+        <div class="field">
+          {{ operation_results_work.intereses_porcentaje | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto antes de impuesto (%):</h4>
+        <div class="field">
+          {{
+            operation_results_work.neto_antes_impuesto_porcentaje
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto después de impuesto (%):</h4>
+        <div class="field">
+          {{
+            operation_results_work.neto_despues_impuesto_porcentaje
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+    </div>
+  -->
+    <br />
+    <div *ngIf="hasProjections" class="instrument-calcs-summary">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge-warning badge-custom-instrument"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <!-- Country Column -->
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+            </ng-container>
+
+            <!-- Country Column -->
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,745 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Bonos
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <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-dollar-sign" aria-hidden="true"></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">
+            $USD {{ 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>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 class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="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
+                }}
+              </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
+                }}
+              </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
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: 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">
+          $USD
+          {{ 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>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>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="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
+                }}
+              </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
+                }}
+              </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
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,380 @@
+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;
+
+  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.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;
+      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"]["cuota_participacion"];
+          this.valor_participacion = ans["result"]["valor_participacion"];
+          this.dias_liquidacion = ans["result"]["dias_liquidacion"];
+          this.dias_vencimiento = ans["result"]["dias_vencimiento"];
+          this.valor_nominal = ans["result"]["valor_nominal"];
+          this.valor_transado = ans["result"]["valor_transado"];
+          this.comision_casa_porcentaje =
+            ans["result"]["comision_casa_porcentaje"];
+          this.comision_casa = ans["result"]["comision_casa"];
+          this.comision_bolsa_porcentaje =
+            ans["result"]["comision_bolsa_porcentaje"];
+          this.comision_bolsa = ans["result"]["comision_bolsa"];
+          this.rendimiento_porcentaje = ans["result"]["rendimiento_porcentaje"];
+          this.dividendo_porcentaje = ans["result"]["dividendo_porcentaje"];
+          this.fecha_operacion = ans["result"]["fecha_operacion"];
+          this.fecha_liquidacion = ans["result"]["fecha_liquidacion"];
+          this.fecha_vencimiento = ans["result"]["fecha_vencimiento"];
+
+          // Proyecciones
+          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,
+            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/lete/lete.component.html

@@ -419,6 +419,14 @@
           {{ instrument_work.rendimiento_neto | 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.precio_porcentaje | number: "1.2-4" }} %
+        </div>
+      </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Fecha de operación:</h4>
         <div class="field">

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

@@ -91,10 +91,6 @@ export class LETE implements InstrumentComponent {
 
     this.general = this.formDataService.getGeneralInfo();
 
-    console.log("intrument cargado:");
-    console.log(this.instrument_work);
-    console.log(this.general);
-
     this.investmentProposalForm = this.formBuilder.group({
       valor_nominal: [
         this.instrument_exists ? "" : this.instrument_work.valor_nominal,
@@ -216,9 +212,9 @@ export class LETE implements InstrumentComponent {
         {
           valor_nominal: +this.f.valor_nominal.value,
           plazo: +this.f.plazo.value,
-          comision_casa_porcentaje: this.f.comision_casa_porcentaje.value,
-          comision_bolsa_porcentaje: this.f.comision_bolsa_porcentaje.value,
-          rendimiento_bruto: this.f.rendimiento_bruto.value,
+          comision_casa_porcentaje: +this.f.comision_casa_porcentaje.value,
+          comision_bolsa_porcentaje: +this.f.comision_bolsa_porcentaje.value,
+          rendimiento_bruto: +this.f.rendimiento_bruto.value,
           fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted,
           fecha_liquidacion: this.f.fecha_liquidacion.value.singleDate.formatted
         }

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

@@ -49,6 +49,30 @@
           </div>
         </div>
       </div>
+
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="plazo">Plazo: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-calendar"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="plazo"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.plazo.errors
+              }"
+            />
+            <div *ngIf="submitted && f.plazo.errors" class="invalid-feedback">
+              <div *ngIf="f.plazo.errors.required">
+                Campo requerido
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group">
           <label for="renta_porcentaje">Porcentaje renta: </label>
@@ -192,30 +216,6 @@
           </div>
         </div>
       </div>
-      <!-- Plazo inversión -->
-      <div class="col-lg-6 col-sm-12 pr-xl-3">
-        <div class="form-group">
-          <label for="plazo">Plazo inversión: </label>
-          <div class="input-box-container">
-            <p>
-              <i class="fas fa-business-time"></i>
-            </p>
-            <input
-              type="text"
-              formControlName="plazo"
-              class="form-control"
-              [ngClass]="{
-                'is-invalid': submitted && f.plazo.errors
-              }"
-            />
-            <div *ngIf="submitted && f.plazo.errors" class="invalid-feedback">
-              <div *ngIf="f.plazo.errors.required">
-                Campo requerido
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group">
           <label for="fecha_operacion">Fecha operación: </label>
@@ -281,40 +281,6 @@
           </div>
         </div>
       </div>
-      <div class="col-lg-6 col-sm-12 pr-xl-3">
-        <div class="form-group">
-          <label for="fecha_vencimiento">Fecha vencimiento: </label>
-
-          <div class="input-box-container">
-            <div>
-              <p>
-                <i class="far fa-calendar" aria-hidden="true"></i>
-              </p>
-              <input
-                class="input-box form-control"
-                placeholder="Seleccione una fecha"
-                angular-mydatepicker
-                formControlName="fecha_vencimiento"
-                (click)="dp2.toggleCalendar()"
-                [options]="myDpOptions"
-                #dp2="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 class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group">
@@ -388,12 +354,6 @@
             $USD {{ interes_acumulado | number: "1.2-4" }}
           </div>
         </div>
-        <div class="col-sm-6">
-          <h4>Plazo:</h4>
-          <div class="field">
-            {{ plazo }}
-          </div>
-        </div>
         <div class="col-sm-6">
           <h4>Valor transado:</h4>
           <div class="field">$USD {{ valor_transado | number: "1.2-4" }}</div>
@@ -422,6 +382,10 @@
           <h4>Fecha de inicio de vigencia:</h4>
           <div class="field">{{ fecha_inicio_vigencia }}</div>
         </div>
+        <div class="col-sm-6">
+          <h4>Fecha de vencimiento:</h4>
+          <div class="field">{{ fecha_vencimiento }}</div>
+        </div>
       </div>
     </div>
 
@@ -462,13 +426,13 @@
               </td>
             </ng-container>
 
-            <ng-container matColumnDef="monto">
-              <th mat-header-cell *matHeaderCellDef>Monto</th>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
                 {{
-                  row.monto == "" || row.monto == undefined
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                     ? "-"
-                    : (row.monto | number: "1.2-4")
+                    : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
             </ng-container>
@@ -570,6 +534,7 @@
           $USD {{ instrument_work.valor_transado | number: "1.2-4" }}
         </div>
       </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Precio porcentaje:</h4>
         <div class="field">
@@ -584,17 +549,43 @@
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Comisión casa:</h4>
+        <h4>Comisión casa porcentaje:</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">
-        <h4>Comisión bolsa:</h4>
+        <h4>Comisión bolsa porcentaje:</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">
+        <h4>Comisión casa:</h4>
+        <div class="field">
+          $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">
+          $USD {{ instrument_work.comision_bolsa | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingreso bruto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.ingreso_bruto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingreso neto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.ingreso_neto | number: "1.2-4" }}
+        </div>
+      </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Rendimiento bruto:</h4>
         <div class="field">
@@ -686,13 +677,13 @@
               </td>
             </ng-container>
 
-            <ng-container matColumnDef="monto">
-              <th mat-header-cell *matHeaderCellDef>Monto</th>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
                 {{
-                  row.monto == "" || row.monto == undefined
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                     ? "-"
-                    : (row.monto | number: "1.2-4")
+                    : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
             </ng-container>

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

@@ -29,7 +29,7 @@ export class PBUR implements InstrumentComponent {
     "posicion",
     "plazo",
     "fecha_pago",
-    "monto",
+    "ingreso_bruto",
     "ingreso_neto",
     "costo_cedeval",
     "renta",
@@ -62,7 +62,7 @@ export class PBUR implements InstrumentComponent {
     11: "Nov",
     12: "Dic"
   };
-  instrument_exists: boolean;
+  instrument_null: boolean;
   instrument_work: any = [];
   investmentProposalForm: FormGroup;
   myDpOptions: IAngularMyDpOptions = {
@@ -94,6 +94,7 @@ export class PBUR implements InstrumentComponent {
   dataSource2 = new MatTableDataSource(this.proyecciones);
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
+  fecha_vencimiento: any;
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -103,7 +104,7 @@ export class PBUR implements InstrumentComponent {
     public datepipe: DatePipe
   ) {
     this.instrument_work = this.formDataService.getWork();
-    this.instrument_exists = this.instrument_work == undefined;
+    this.instrument_null = this.instrument_work == undefined;
     this.general = this.formDataService.getGeneralInfo();
 
     if (
@@ -126,25 +127,32 @@ export class PBUR implements InstrumentComponent {
 
     this.investmentProposalForm = this.formBuilder.group({
       valor_par: [
-        this.instrument_exists ? false : this.instrument_work.valor_par
+        this.instrument_null || this.instrument_work.valor_par == null
+          ? false
+          : this.instrument_work.valor_par
       ],
       valor_nominal: [
-        this.instrument_exists ? "" : this.instrument_work.valor_nominal,
+        this.instrument_null ? "" : this.instrument_work.valor_nominal,
         [
           Validators.required,
           Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
         ]
       ],
       otros_costos: [
-        this.instrument_exists ? 0 : this.instrument_work.otros_costos,
+        this.instrument_null || this.instrument_work.otros_costos == null
+          ? 0
+          : this.instrument_work.otros_costos,
         [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
       ],
+
       renta_porcentaje: [
-        this.instrument_exists ? "" : this.instrument_work.renta_porcentaje,
+        this.instrument_null || this.instrument_work.renta_porcentaje == null
+          ? 10
+          : this.instrument_work.renta_porcentaje,
         [Validators.required]
       ],
       comision_casa_porcentaje: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : this.instrument_work.comision_casa_porcentaje,
         [
@@ -153,7 +161,7 @@ export class PBUR implements InstrumentComponent {
         ]
       ],
       comision_bolsa_porcentaje: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : this.instrument_work.comision_bolsa_porcentaje,
         [
@@ -162,22 +170,24 @@ export class PBUR implements InstrumentComponent {
         ]
       ],
       plazo: [
-        this.instrument_exists ? "" : this.instrument_work.plazo,
+        this.instrument_null || this.instrument_work.plazo == null
+          ? 0
+          : this.instrument_work.plazo,
         [Validators.required]
       ],
       rendimiento_bruto: [
-        this.instrument_exists ? "" : this.instrument_work.rendimiento_bruto,
+        this.instrument_null ? "" : this.instrument_work.rendimiento_bruto,
         [
           Validators.required,
           Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
         ]
       ],
       /*formato_ingreso: [
-        this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
+        this.instrument_null ? "" : this.instrument_work.formato_ingreso,
         [Validators.required]
       ],*/
       fecha_liquidacion: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : {
               isRange: false,
@@ -192,24 +202,8 @@ export class PBUR implements InstrumentComponent {
             },
         Validators.required
       ],
-      fecha_vencimiento: [
-        this.instrument_exists
-          ? ""
-          : {
-              isRange: false,
-              singleDate: {
-                jsDate: parse(
-                  this.instrument_work.fecha_vencimiento,
-                  "dd/MM/yyyy",
-                  new Date()
-                ),
-                formatted: this.instrument_work.fecha_vencimiento
-              }
-            },
-        Validators.required
-      ],
       fecha_operacion: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : {
               isRange: false,
@@ -225,7 +219,7 @@ export class PBUR implements InstrumentComponent {
         Validators.required
       ],
       fecha_ultima_cupon: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : {
               isRange: false,
@@ -256,6 +250,7 @@ export class PBUR implements InstrumentComponent {
 
   getCalculations(form: any, saveForm: boolean) {
     this.submitted = true;
+
     if (!form.valid) {
       return false;
     }
@@ -267,29 +262,28 @@ export class PBUR implements InstrumentComponent {
     Swal.showLoading();
 
     this.instrumentCalcService
-      .vcnCalc(
+      .pburCalc(
         "PBUR", // Codigo del instrumento
         {
-          id_tipo_base: this.general.base_anual,
-          id_periodicidad: this.general.periodicidad,
-          id_formato_ingreso: this.general.formato_ingreso
+          id_tipo_base: +this.general.base_anual,
+          id_periodicidad: +this.general.periodicidad,
+          id_formato_ingreso: +this.general.formato_ingreso
         },
         {
           valor_par: this.f.valor_par.value,
           valor_nominal: +this.f.valor_nominal.value,
+          plazo: this.f.plazo.value,
           comision_casa_porcentaje: this.f.comision_casa_porcentaje.value,
           comision_bolsa_porcentaje: this.f.comision_bolsa_porcentaje.value,
           rendimiento_bruto: this.f.rendimiento_bruto.value,
           otros_costos: this.f.otros_costos.value,
-          plazo: this.f.plazo.value,
           renta_porcentaje: this.f.renta_porcentaje.value,
           //id_formato_ingreso: this.f.formato_ingreso.value,
           fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted,
           fecha_liquidacion: this.f.fecha_liquidacion.value.singleDate
             .formatted,
           fecha_ultima_cupon: this.f.fecha_ultima_cupon.value.singleDate
-            .formatted,
-          fecha_vencimiento: this.f.fecha_vencimiento.value.singleDate.formatted
+            .formatted
         }
       )
       .subscribe(
@@ -302,10 +296,10 @@ export class PBUR implements InstrumentComponent {
           this.total_pagar = ans["result"]["total_pagar"];
           this.comision_bolsa = ans["result"]["comision_bolsa"];
           this.comision_casa = ans["result"]["comision_casa"];
-          this.plazo = ans["result"]["plazo"];
           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"];
 
           if (this.f.valor_par.value == true) {
             this.hasProjections = true;
@@ -354,11 +348,7 @@ export class PBUR implements InstrumentComponent {
                 ? this.investmentProposalForm.value.fecha_ultima_cupon
                     .singleDate.formatted
                 : "",
-            fecha_vencimiento:
-              this.investmentProposalForm.value.fecha_vencimiento != undefined
-                ? this.investmentProposalForm.value.fecha_vencimiento.singleDate
-                    .formatted
-                : ""
+            fecha_vencimiento: this.fecha_vencimiento
           };
           this.formDataService.setWork(this.pburObject);
           Swal.close();

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

@@ -0,0 +1,1731 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Titularización
+  </h4>
+
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <div class=" col-md-6 col-sm-12 border border-light">
+        <div class="row no-gutters">
+          <div class="col-12">
+            <h5>Compra</h5>
+          </div>
+
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="costo_cedeval">Costo CEDEVAL: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="costo_cedeval"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.costo_cedeval.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.costo_cedeval.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.costo_cedeval.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.costo_cedeval.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Valor nominal compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="valor_nominal_compra">Valor nominal compra: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="valor_nominal_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.valor_nominal_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.valor_nominal_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.valor_nominal_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.valor_nominal_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión casa compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_casa_porcentaje_compra"
+                >Comisión casa compra:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_casa_porcentaje_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_casa_porcentaje_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_casa_porcentaje_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div
+                    *ngIf="f.comision_casa_porcentaje_compra.errors.required"
+                  >
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.comision_casa_porcentaje_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión bolsa compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_bolsa_porcentaje_compra"
+                >Comisión bolsa compra:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_bolsa_porcentaje_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_bolsa_porcentaje_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_bolsa_porcentaje_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div
+                    *ngIf="f.comision_bolsa_porcentaje_compra.errors.required"
+                  >
+                    Campo requerido
+                  </div>
+                  <div
+                    *ngIf="f.comision_bolsa_porcentaje_compra.errors.pattern"
+                  >
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Cupón compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="cupon_porcentaje_compra">Cupón compra: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="cupon_porcentaje_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.cupon_porcentaje_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.cupon_porcentaje_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.cupon_porcentaje_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.cupon_porcentaje_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de vencimiento de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_emision">Fecha de emisió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_emision"
+                    (click)="dp.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid': submitted && f.fecha_emision.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_emision.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_emision.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Costo de transferencia -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="costo_transferencia">Costo de transferencia: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="costo_transferencia"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.costo_transferencia.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.costo_transferencia.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.costo_transferencia.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.costo_transferencia.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_compra">Precio de compra: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.precio_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de vencimiento de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_vencimiento_compra"
+                >Precio de vencimiento de compra:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_vencimiento_compra"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.precio_vencimiento_compra.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_vencimiento_compra.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_vencimiento_compra.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Ultima fecha cupón compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_ultima_cupon_compra"
+                >Ultima fecha cupón compra:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_ultima_cupon_compra"
+                    (click)="dp1.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp1="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_ultima_cupon_compra.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de vencimiento de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_vencimiento_compra"
+                >Fecha de vencimiento de compra:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_vencimiento_compra"
+                    (click)="dp2.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp2="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_vencimiento_compra.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de liquidacion de compra -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_liquidacion_compra"
+                >Fecha de liquidación de compra:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_liquidacion_compra"
+                    (click)="dp3.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp3="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_liquidacion_compra.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class=" col-md-6 col-sm-12 border border-light">
+        <div class="row no-gutters">
+          <div class="col-12">
+            <h5>Venta</h5>
+          </div>
+          <!-- Valor nominal venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="valor_nominal_venta">Valor nominal venta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-dollar-sign"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="valor_nominal_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.valor_nominal_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.valor_nominal_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.valor_nominal_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.valor_nominal_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión casa venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_casa_porcentaje_venta"
+                >Comisión casa venta:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_casa_porcentaje_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_casa_porcentaje_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Comisión bolsa venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="comision_bolsa_porcentaje_venta"
+                >Comisión bolsa venta:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="comision_bolsa_porcentaje_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid':
+                      submitted && f.comision_bolsa_porcentaje_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div
+                    *ngIf="f.comision_bolsa_porcentaje_venta.errors.required"
+                  >
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Cupón venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="cupon_porcentaje_venta">Cupón venta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="cupon_porcentaje_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.cupon_porcentaje_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.cupon_porcentaje_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.cupon_porcentaje_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_venta">Precio de venta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.precio_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Precio de vencimiento de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="precio_vencimiento_venta"
+                >Precio de vencimiento de venta:
+              </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="precio_vencimiento_venta"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.precio_vencimiento_venta.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.precio_vencimiento_venta.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.precio_vencimiento_venta.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Ultima fecha cupón venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_ultima_cupon_venta"
+                >Ultima fecha cupón venta:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_ultima_cupon_venta"
+                    (click)="dp4.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp4="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_ultima_cupon_venta.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de vencimiento de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_vencimiento_venta"
+                >Fecha de vencimiento de venta:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_vencimiento_venta"
+                    (click)="dp5.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp5="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_vencimiento_venta.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fecha de liquidacion de venta -->
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="fecha_liquidacion_venta"
+                >Fecha de liquidación de venta:
+              </label>
+
+              <div class="input-box-container">
+                <div>
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    formControlName="fecha_liquidacion_venta"
+                    (click)="dp6.toggleCalendar()"
+                    [options]="myDpOptions"
+                    #dp6="angular-mydatepicker"
+                    [ngClass]="{
+                      'is-invalid':
+                        submitted && f.fecha_liquidacion_venta.errors
+                    }"
+                  />
+                </div>
+              </div>
+
+              <div
+                *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+                class="invalid-feedback"
+              >
+                <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+                  Campo requerido
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-12 col-sm-12 pr-xl-3">
+          <div class="form-group">
+            <label for="fecha_liquidacion_venta"
+              >Archivo de porcentajes de amortización:
+            </label>
+            <input
+              type="file"
+              #csvReader
+              name="porcentajes"
+              id="txtFileUpload"
+              (change)="uploadListener($event)"
+              accept=".xlsx"
+            />
+          </div>
+        </div>
+
+        <div class="col-lg-12 col-sm-12 pr-xl-12">
+          <div class="form-group text-right">
+            <br />
+            <button
+              type="button"
+              class="btn btn-success center-component"
+              (click)="getCalculations(investmentProposalForm, false)"
+            >
+              Realizar cálculos
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <!-- Calculos del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Cálculos del instrumento</span
+          >
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón compra:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa compra:</h4>
+          <div class="field">
+            $USD {{ comision_casa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa compra:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de compra:</h4>
+          <div class="field">
+            {{ dias_vencimiento_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de compra:</h4>
+          <div class="field">
+            {{ dias_acumulados_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra:</h4>
+          <div class="field">
+            $USD
+            {{ interes_acumulado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado compra (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio compra (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado compra:</h4>
+          <div class="field">
+            $USD {{ valor_transado_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Monto a pagar:</h4>
+          <div class="field">$USD {{ monto_pagar | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha inicio de vigencia:</h4>
+          <div class="field">
+            {{ fecha_inicio_vigencia }}
+          </div>
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de venta
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón venta:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa venta:</h4>
+          <div class="field">
+            $USD {{ comision_casa_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-lg-3 col-md-4 col-sm-6">
+          <h4>Comision bolsa venta:</h4>
+          <div class="field">
+            $USD
+            {{ instrument_work_summary.comision_bolsa_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión venta (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento venta (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días vencimiento de venta:</h4>
+          <div class="field">
+            {{ dias_vencimiento_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Días acumulados de venta:</h4>
+          <div class="field">
+            {{ dias_acumulados_venta }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta:</h4>
+          <div class="field">
+            $USD {{ interes_acumulado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Interés acumulado venta (%):</h4>
+          <div class="field">
+            {{ interes_acumulado_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Precio sucio venta (%):</h4>
+          <div class="field">
+            {{ precio_sucio_porcentaje_venta | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Valor transado venta:</h4>
+          <div class="field">
+            $USD {{ valor_transado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="row align-container" *ngIf="operation_result">
+          <div class="col-12">
+            <h3>
+              Resultado de la operación
+            </h3>
+          </div>
+          <div class="col-sm-4">
+            <h4>Monto a recibir:</h4>
+            <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Días tenencia total:</h4>
+            <div class="field">
+              {{ dias_tenencia_total }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Ingresos intereses:</h4>
+            <div class="field">
+              $USD {{ ingresos_intereses | number: "1.2-4" }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Costos totales:</h4>
+            <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Ganancia o pérdida total:</h4>
+            <div class="field">
+              $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Ganancia o pérdida de capital:</h4>
+            <div class="field">
+              {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Interés (%):</h4>
+            <div class="field">
+              {{ intereses_porcentaje | number: "1.2-4" }} %
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Interés neto antes de impuesto (%):</h4>
+            <div class="field">
+              {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+              %
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Interés neto después de impuesto (%):</h4>
+            <div class="field">
+              {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+              %
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Total de ingresos recibidos:</h4>
+            <div class="field">
+              $USD
+              {{ total_ingresos_recibidos | number: "1.2-4" }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="cuota">
+              <th mat-header-cell *matHeaderCellDef>Cuota</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.cuota == "" || row.cuota == undefined
+                    ? "-"
+                    : (row.cuota | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="amortizacion_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Porcentaje amortización</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.amortizacion_porcentaje == "" ||
+                  row.amortizacion_porcentaje == undefined
+                    ? "-"
+                    : (row.amortizacion_porcentaje | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="amortizacion_capital">
+              <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.amortizacion_capital == "" ||
+                  row.amortizacion_capital == undefined
+                    ? "-"
+                    : (row.amortizacion_capital | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : (row.ingreso_bruto | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : (row.impuesto | 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>
+            </ng-container>
+
+            <ng-container matColumnDef="saldo">
+              <th mat-header-cell *matHeaderCellDef>Saldo</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.saldo == "" || row.saldo == undefined
+                    ? "-"
+                    : (row.saldo | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+
+          <mat-paginator
+            [pageSizeOptions]="[10, 15, 25]"
+            [pageIndex]="0"
+            [pageSize]="10"
+          ></mat-paginator>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <div class="form-group text-center space-20">
+      <button
+        type="button"
+        class="btn btn-default center-component margin-right"
+        (click)="goToPrevious()"
+      >
+        Anterior
+      </button>
+      <button
+        type="submit"
+        class="btn btn-primary center-component margin-right"
+        (click)="goToNext(investmentProposalForm)"
+      >
+        Siguiente
+      </button>
+    </div>
+  </form>
+</div>
+
+<div *ngIf="summary">
+  <div class="timeline-body">
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo CEDEVAL:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.costo_cedeval | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_nominal_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.precio_compra | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento compra:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_vencimiento_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje compra:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.cupon_porcentaje_compra | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_siguiente_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_casa_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_casa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_bolsa_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision bolsa compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_bolsa_compra | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_comision_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_acumulados_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra:</h4>
+        <div class="field">
+          $USD
+          {{
+            instrument_work_summary.interes_acumulado_compra | number: "1.2-4"
+          }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.interes_acumulado_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio compra (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_sucio_porcentaje_compra
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado compra:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_transado_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work_summary.monto_pagar | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_ultima_cupon_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_liquidacion_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento compra:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_vencimiento_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha inicio de vigencia:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_inicio_vigencia }}
+        </div>
+      </div>
+    </div>
+
+    <!--
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.costo_transferencia | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal de venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_nominal_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.precio_venta | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio vencimiento venta:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_vencimiento_venta | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cupon porcentaje venta:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.cupon_porcentaje_venta | number: "1.2-4"
+          }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha siguiente cupón venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_siguiente_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_casa_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision casa venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_casa_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comision bolsa venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.comision_bolsa_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_bolsa_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>YTM vencimiento comisión venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.ytm_vencimiento_comision_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento de venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_vencimiento_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días acumulados de venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_acumulados_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta:</h4>
+        <div class="field">
+          $USD
+          {{
+            instrument_work_summary.interes_acumulado_venta | number: "1.2-4"
+          }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.interes_acumulado_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio sucio venta (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.precio_sucio_porcentaje_venta
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado venta:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ultima fecha de cupón venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_ultima_cupon_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de liquidación venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_liquidacion_venta }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento venta:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_vencimiento_venta }}
+        </div>
+      </div>
+    </div>
+    <div class="row" *ngIf="operation_result">
+      <div class="col-12">
+        <h3>
+          Resultado de la operación
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal compra:</h4>
+        <div class="field">
+          $USD{{ operation_results_work.valor_nominal_compra }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días tenencia total:</h4>
+        <div class="field">
+          {{ operation_results_work.dias_tenencia_total }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingresos intereses:</h4>
+        <div class="field">
+          $USD {{ operation_results_work.ingresos_intereses | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costos totales:</h4>
+        <div class="field">
+          $USD {{ operation_results_work.costos_totales | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia / Pérdida total:</h4>
+        <div class="field">
+          $USD
+          {{ operation_results_work.ganancia_perdida_total | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ganancia / Pérdida de capital:</h4>
+        <div class="field">
+          {{
+            operation_results_work.ganancia_perdida_capital_porcentaje
+              | number: "1.2-4"
+          }}%
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés (%):</h4>
+        <div class="field">
+          {{ operation_results_work.intereses_porcentaje | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto antes de impuesto (%):</h4>
+        <div class="field">
+          {{
+            operation_results_work.neto_antes_impuesto_porcentaje
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés neto después de impuesto (%):</h4>
+        <div class="field">
+          {{
+            operation_results_work.neto_despues_impuesto_porcentaje
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+    </div>
+-->
+    <br />
+    <div *ngIf="hasProjections" class="instrument-calcs-summary">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge-warning badge-custom-instrument"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="cuota">
+              <th mat-header-cell *matHeaderCellDef>Cuota</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.cuota == "" || row.cuota == undefined
+                    ? "-"
+                    : (row.cuota | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="amortizacion_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Porcentaje amortización</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.amortizacion_porcentaje == "" ||
+                  row.amortizacion_porcentaje == undefined
+                    ? "-"
+                    : (row.amortizacion_porcentaje | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="amortizacion_capital">
+              <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.amortizacion_capital == "" ||
+                  row.amortizacion_capital == undefined
+                    ? "-"
+                    : (row.amortizacion_capital | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : (row.ingreso_bruto | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : (row.impuesto | 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>
+            </ng-container>
+
+            <ng-container matColumnDef="saldo">
+              <th mat-header-cell *matHeaderCellDef>Saldo</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.saldo == "" || row.saldo == undefined
+                    ? "-"
+                    : (row.saldo | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,767 @@
+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";
+import { CSVRecord } from "@app/models/csv-data";
+import * as XLSX from "xlsx";
+
+@Component({
+  selector: "app-titulos",
+  templateUrl: "./titulos.component.html"
+})
+export class TIT implements InstrumentComponent {
+  title: string = "Titularización";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  displayedColumns: string[] = [
+    "posicion",
+    "plazo",
+    "fecha_pago",
+    "cuota",
+    "amortizacion_porcentaje",
+    "amortizacion_capital",
+    "ingreso_bruto",
+    "impuesto",
+    "ingreso_neto",
+    "impuesto",
+    "saldo"
+  ];
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  form: any;
+  general: GeneralInfo;
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  m_fecha_vencimiento_compra: IMyDateModel;
+  m_fecha_ultima_cupon_compra: IMyDateModel;
+  m_fecha_rendencion: IMyDateModel;
+  m_fecha_liquidacion_compra: IMyDateModel;
+
+  submitted: boolean = false;
+  instrument_exists: boolean;
+  instrument_work: any = [];
+  financials: any;
+  base_types: any;
+
+  proyecciones: any;
+
+  titulosObject: {};
+  dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
+  hasProjections: boolean;
+  fecha_vencimiento: any;
+  comision_casa_compra: any;
+  comision_bolsa_compra: any;
+  fecha_siguiente_cupon_compra: any;
+  dias_vencimiento_compra: any;
+  dias_acumulados_compra: any;
+  ytm_vencimiento_comision_porcentaje_compra: any;
+  interes_acumulado_compra: any;
+  interes_acumulado_porcentaje_compra: any;
+  precio_sucio_porcentaje_compra: any;
+  valor_transado_compra: any;
+  monto_pagar: any;
+  fecha_inicio_vigencia: any;
+  comision_casa_venta: any;
+  fecha_siguiente_cupon_venta: any;
+  dias_vencimiento_venta: any;
+  dias_acumulados_venta: any;
+  ytm_vencimiento_comision_porcentaje_venta: any;
+  interes_acumulado_venta: any;
+  interes_acumulado_porcentaje_venta: any;
+  precio_sucio_porcentaje_venta: any;
+  valor_transado_venta: any;
+  monto_recibir: any;
+  dias_tenencia_total: any;
+  ganancia_perdida_capital: any;
+  ingresos_intereses: any;
+  costos_totales: any;
+  ganancia_perdida_total: any;
+  ganancia_perdida_capital_porcentaje: any;
+  intereses_porcentaje: any;
+  neto_antes_impuesto_porcentaje: any;
+  neto_despues_impuesto_porcentaje: any;
+  total_ingresos_recibidos: any;
+  percentages: any;
+  amortizaciones: string[];
+  operation_result: boolean = false;
+  operation_results_work: any = [];
+  instrument_work_summary: any = [];
+  ytm_vencimiento_porcentaje_compra: any;
+  ytm_vencimiento_porcentaje_venta: any;
+  comision_bolsa_venta: 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.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;
+      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;
+    }
+    if (
+      this.operation_results_work != undefined &&
+      this.operation_results_work != ""
+    ) {
+      this.operation_result = true;
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      costo_transferencia: [
+        this.instrument_exists ? "" : this.instrument_work.costo_transferencia,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_compra: [
+        this.instrument_exists ? "" : this.instrument_work.precio_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      valor_nominal_compra: [
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_vencimiento_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      cupon_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cupon_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_bolsa_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_venta: [
+        this.instrument_exists ? "" : this.instrument_work.precio_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      valor_nominal_venta: [
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_vencimiento_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      cupon_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cupon_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_bolsa_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      fecha_ultima_cupon_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_ultima_cupon_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_ultima_cupon_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_liquidacion_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_ultima_cupon_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_ultima_cupon_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_ultima_cupon_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_liquidacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_emision: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_emision,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_emision
+              }
+            },
+        Validators.required
+      ]
+    });
+  }
+
+  public records: any[] = [];
+  @ViewChild("csvReader", null) csvReader: any;
+
+  uploadListener($event: any): void {
+    /* wire up file reader */
+    const target: DataTransfer = $event.target;
+    if (target.files.length !== 1) {
+      throw new Error("Cannot use multiple files");
+    }
+    const reader: FileReader = new FileReader();
+    reader.readAsBinaryString(target.files[0]);
+    reader.onload = (e: any) => {
+      /* create workbook */
+      const binarystr: string = e.target.result;
+      const wb: XLSX.WorkBook = XLSX.read(binarystr, { type: "binary" });
+
+      /* selected the first sheet */
+      const wsname: string = wb.SheetNames[0];
+      const ws: XLSX.WorkSheet = wb.Sheets[wsname];
+
+      /* save data */
+      const data = XLSX.utils.sheet_to_json(ws, { header: 1 }); // to get 2d array pass 2nd parameter as object {header: 1}
+      const data2 = data.toString().split(",");
+      data2.shift();
+      this.amortizaciones = data2;
+    };
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.titulosObject);
+    return true;
+  }
+
+  getCalculations(form: any, saveForm: boolean) {
+    this.submitted = true;
+
+    if (!form.valid) {
+      return false;
+    }
+    if (this.amortizaciones == undefined && this.proyecciones == undefined) {
+      Swal.fire({
+        icon: "error",
+        title: "Error de validación",
+        text: "Debe ingresar un archivo con los porcentajes de amortización"
+      });
+      return false;
+    }
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    this.instrumentCalcService
+      .titularizacionCalc(
+        "TIT", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          costo_transferencia: +this.f.costo_transferencia.value,
+          valor_nominal_compra: +this.f.valor_nominal_compra.value,
+          precio_compra: +this.f.precio_compra.value,
+          precio_vencimiento_compra: +this.f.precio_vencimiento_compra.value,
+          cupon_porcentaje_compra: +this.f.cupon_porcentaje_compra.value,
+          comision_casa_porcentaje_compra: this.f
+            .comision_casa_porcentaje_compra.value,
+          comision_bolsa_porcentaje_compra: this.f
+            .comision_bolsa_porcentaje_compra.value,
+
+          valor_nominal_venta: +this.f.valor_nominal_venta.value,
+          precio_venta: +this.f.precio_venta.value,
+          precio_vencimiento_venta: +this.f.precio_vencimiento_venta.value,
+          cupon_porcentaje_venta: +this.f.cupon_porcentaje_venta.value,
+          comision_casa_porcentaje_venta: this.f.comision_casa_porcentaje_venta
+            .value,
+          comision_bolsa_porcentaje_venta: this.f
+            .comision_bolsa_porcentaje_venta.value,
+
+          fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+            .singleDate.formatted,
+          fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+            .singleDate.formatted,
+          fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+            .singleDate.formatted,
+
+          fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+            .singleDate.formatted,
+          fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+            .singleDate.formatted,
+          fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+            .singleDate.formatted,
+          fecha_emision: this.f.fecha_emision.value.singleDate.formatted,
+          costo_cedeval: this.f.costo_cedeval.value,
+          amortizacion_porcentajes: this.amortizaciones
+        }
+      )
+      .subscribe(
+        ans => {
+          // Instrumento de compra
+          this.comision_casa_compra =
+            ans["result"]["instrumento_compra"]["comision_casa_compra"];
+          this.comision_bolsa_compra =
+            ans["result"]["instrumento_compra"]["comision_bolsa_compra"];
+          this.fecha_siguiente_cupon_compra =
+            ans["result"]["instrumento_compra"]["fecha_siguiente_cupon_compra"];
+          this.dias_vencimiento_compra =
+            ans["result"]["instrumento_compra"]["dias_vencimiento_compra"];
+          this.dias_acumulados_compra =
+            ans["result"]["instrumento_compra"]["dias_acumulados_compra"];
+          this.ytm_vencimiento_comision_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "ytm_vencimiento_comision_porcentaje_compra"
+            ];
+          this.ytm_vencimiento_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "ytm_vencimiento_porcentaje_compra"
+            ];
+          this.interes_acumulado_compra =
+            ans["result"]["instrumento_compra"]["interes_acumulado_compra"];
+          this.interes_acumulado_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "interes_acumulado_porcentaje_compra"
+            ];
+          this.precio_sucio_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "precio_sucio_porcentaje_compra"
+            ];
+          this.valor_transado_compra =
+            ans["result"]["instrumento_compra"]["valor_transado_compra"];
+          this.monto_pagar = ans["result"]["instrumento_compra"]["monto_pagar"];
+          this.fecha_inicio_vigencia =
+            ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
+
+          // Instrumento de venta
+          this.comision_casa_venta =
+            ans["result"]["instrumento_venta"]["comision_casa_venta"];
+          this.comision_bolsa_venta =
+            ans["result"]["instrumento_venta"]["comision_bolsa_venta"];
+
+          this.fecha_siguiente_cupon_venta =
+            ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
+          this.dias_vencimiento_venta =
+            ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
+          this.dias_acumulados_venta =
+            ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
+          this.ytm_vencimiento_comision_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "ytm_vencimiento_comision_porcentaje_venta"
+            ];
+          this.ytm_vencimiento_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "ytm_vencimiento_porcentaje_venta"
+            ];
+          this.interes_acumulado_venta =
+            ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
+          this.interes_acumulado_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "interes_acumulado_porcentaje_venta"
+            ];
+          this.precio_sucio_porcentaje_venta =
+            ans["result"]["instrumento_venta"]["precio_sucio_porcentaje_venta"];
+          this.valor_transado_venta =
+            ans["result"]["instrumento_venta"]["valor_transado_venta"];
+          this.monto_recibir =
+            ans["result"]["instrumento_venta"]["monto_recibir"];
+
+          // Resultado de la operacion
+          this.operation_result = true;
+          this.dias_tenencia_total =
+            ans["result"]["resultado_operacion"]["dias_tenencia_total"];
+          this.ganancia_perdida_capital =
+            ans["result"]["resultado_operacion"]["ganancia_perdida_capital"];
+          this.ingresos_intereses =
+            ans["result"]["resultado_operacion"]["ingresos_intereses"];
+          this.costos_totales =
+            ans["result"]["resultado_operacion"]["costos_totales"];
+          this.ganancia_perdida_total =
+            ans["result"]["resultado_operacion"]["ganancia_perdida_total"];
+          this.ganancia_perdida_capital_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "ganancia_perdida_capital_porcentaje"
+            ];
+          this.intereses_porcentaje =
+            ans["result"]["resultado_operacion"]["intereses_porcentaje"];
+          this.neto_antes_impuesto_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "neto_antes_impuesto_porcentaje"
+            ];
+          this.neto_despues_impuesto_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "neto_despues_impuesto_porcentaje"
+            ];
+          this.total_ingresos_recibidos =
+            ans["result"]["resultado_operacion"]["total_ingresos_recibidos"];
+
+          // Proyecciones
+          this.proyecciones = ans["result"]["proyecciones"];
+
+          this.dataSource.data = this.proyecciones;
+          this.dataSource2.data = this.proyecciones;
+
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+
+          this.titulosObject = {
+            costo_transferencia: this.investmentProposalForm.value
+              .costo_transferencia,
+            valor_nominal_compra: this.investmentProposalForm.value
+              .valor_nominal_compra,
+            precio_compra: this.investmentProposalForm.value.precio_compra,
+            precio_vencimiento_compra: this.investmentProposalForm.value
+              .precio_vencimiento_compra,
+            cupon_porcentaje_compra: this.investmentProposalForm.value
+              .cupon_porcentaje_compra,
+            comision_casa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_casa_porcentaje_compra,
+            comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_compra,
+
+            valor_nominal_venta: this.investmentProposalForm.value
+              .valor_nominal_venta,
+            precio_venta: this.investmentProposalForm.value.precio_venta,
+            precio_vencimiento_venta: this.investmentProposalForm.value
+              .precio_vencimiento_venta,
+            cupon_porcentaje_venta: this.investmentProposalForm.value
+              .cupon_porcentaje_venta,
+            comision_casa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_casa_porcentaje_venta,
+            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_venta,
+
+            fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+              .singleDate.formatted,
+            fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+              .singleDate.formatted,
+
+            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+              .singleDate.formatted,
+            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+              .singleDate.formatted,
+            fecha_emision: this.f.fecha_emision.value.singleDate.formatted,
+            // Instrumento de compra
+
+            comision_casa_compra: this.comision_casa_compra,
+            comision_bolsa_compra: this.comision_bolsa_compra,
+            fecha_siguiente_cupon_compra: this.fecha_siguiente_cupon_compra,
+            dias_vencimiento_compra: this.dias_vencimiento_compra,
+            dias_acumulados_compra: this.dias_acumulados_compra,
+            ytm_vencimiento_porcentaje_compra: this
+              .ytm_vencimiento_porcentaje_compra,
+            ytm_vencimiento_comision_porcentaje_compra: this
+              .ytm_vencimiento_comision_porcentaje_compra,
+            interes_acumulado_compra: this.interes_acumulado_compra,
+            interes_acumulado_porcentaje_compra: this
+              .interes_acumulado_porcentaje_compra,
+            precio_sucio_porcentaje_compra: this.precio_sucio_porcentaje_compra,
+            valor_transado_compra: this.valor_transado_compra,
+            monto_pagar: this.monto_pagar,
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia,
+            // Instrumento de venta
+
+            comision_casa_venta: this.comision_casa_venta,
+            comision_bolsa_venta: this.comision_bolsa_venta,
+
+            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
+            dias_vencimiento_venta: this.dias_vencimiento_venta,
+            dias_acumulados_venta: this.dias_acumulados_venta,
+            ytm_vencimiento_porcentaje_venta: this
+              .ytm_vencimiento_porcentaje_venta,
+            ytm_vencimiento_comision_porcentaje_venta: this
+              .ytm_vencimiento_comision_porcentaje_venta,
+
+            interes_acumulado_venta: this.interes_acumulado_venta,
+            interes_acumulado_porcentaje_venta: this
+              .interes_acumulado_porcentaje_venta,
+            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
+            valor_transado_venta: this.valor_transado_venta,
+            // Resultado de la operacion
+            /*
+            monto_recibir: this.monto_recibir,
+            dias_tenencia_total: this.dias_tenencia_total,
+            ganancia_perdida_capital: this.ganancia_perdida_capital,
+            ingresos_intereses: this.ingresos_intereses,
+            costos_totales: this.costos_totales,
+            ganancia_perdida_total: this.ganancia_perdida_total,
+            ganancia_perdida_capital_porcentaje: this
+              .ganancia_perdida_capital_porcentaje,
+            intereses_porcentaje: this.intereses_porcentaje,
+            neto_antes_impuesto_porcentaje: this.neto_antes_impuesto_porcentaje,
+            neto_despues_impuesto_porcentaje: this
+              .neto_despues_impuesto_porcentaje,
+            total_ingresos_recibidos: this.total_ingresos_recibidos,
+
+            amortizacion_porcentajes: this.amortizaciones,-**/
+            // Proyecciones
+            costo_cedeval: this.f.costo_cedeval.value,
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.titulosObject);
+          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/vcn/vcn.component.html

@@ -192,30 +192,7 @@
           </div>
         </div>
       </div>
-      <!-- Plazo inversión -->
-      <div class="col-lg-6 col-sm-12 pr-xl-3">
-        <div class="form-group">
-          <label for="plazo">Plazo inversión: </label>
-          <div class="input-box-container">
-            <p>
-              <i class="fas fa-business-time"></i>
-            </p>
-            <input
-              type="text"
-              formControlName="plazo"
-              class="form-control"
-              [ngClass]="{
-                'is-invalid': submitted && f.plazo.errors
-              }"
-            />
-            <div *ngIf="submitted && f.plazo.errors" class="invalid-feedback">
-              <div *ngIf="f.plazo.errors.required">
-                Campo requerido
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group">
           <label for="fecha_operacion">Fecha operación: </label>
@@ -385,7 +362,7 @@
         <div class="col-sm-6">
           <h4>Interes acumulado:</h4>
           <div class="field">
-            {{ interes_acumulado | number: "1.2-4" }}
+            $USD {{ interes_acumulado | number: "1.2-4" }}
           </div>
         </div>
         <div class="col-sm-6">
@@ -464,13 +441,13 @@
               </td>
             </ng-container>
 
-            <ng-container matColumnDef="monto">
-              <th mat-header-cell *matHeaderCellDef>Monto</th>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
                 {{
-                  row.monto == "" || row.monto == undefined
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                     ? "-"
-                    : (row.monto | number: "1.2-4")
+                    : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
             </ng-container>
@@ -586,17 +563,43 @@
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Comisión casa:</h4>
+        <h4>Comisión casa porcentaje:</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">
-        <h4>Comisión bolsa:</h4>
+        <h4>Comisión bolsa porcentaje:</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">
+        <h4>Comisión casa:</h4>
+        <div class="field">
+          $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">
+          $USD {{ instrument_work.comision_bolsa | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingreso bruto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.ingreso_bruto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingreso neto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.ingreso_neto | number: "1.2-4" }}
+        </div>
+      </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Rendimiento bruto:</h4>
         <div class="field">
@@ -688,13 +691,13 @@
               </td>
             </ng-container>
 
-            <ng-container matColumnDef="monto">
-              <th mat-header-cell *matHeaderCellDef>Monto</th>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
                 {{
-                  row.monto == "" || row.monto == undefined
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                     ? "-"
-                    : (row.monto | number: "1.2-4")
+                    : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
             </ng-container>

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

@@ -29,7 +29,7 @@ export class VCN implements InstrumentComponent {
     "posicion",
     "plazo",
     "fecha_pago",
-    "monto",
+    "ingreso_bruto",
     "ingreso_neto",
     "costo_cedeval",
     "renta",
@@ -62,7 +62,7 @@ export class VCN implements InstrumentComponent {
     11: "Nov",
     12: "Dic"
   };
-  instrument_exists: boolean;
+  instrument_null: boolean;
   instrument_work: any = [];
   investmentProposalForm: FormGroup;
   myDpOptions: IAngularMyDpOptions = {
@@ -104,7 +104,7 @@ export class VCN implements InstrumentComponent {
     public datepipe: DatePipe
   ) {
     this.instrument_work = this.formDataService.getWork();
-    this.instrument_exists = this.instrument_work == undefined;
+    this.instrument_null = this.instrument_work == undefined;
     this.general = this.formDataService.getGeneralInfo();
 
     if (
@@ -126,29 +126,31 @@ export class VCN implements InstrumentComponent {
 
     this.investmentProposalForm = this.formBuilder.group({
       valor_par: [
-        this.instrument_exists ? false : this.instrument_work.valor_par
+        this.instrument_null || this.instrument_work.valor_par == null
+          ? false
+          : this.instrument_work.valor_par
       ],
       valor_nominal: [
-        this.instrument_exists ? "" : this.instrument_work.valor_nominal,
+        this.instrument_null ? "" : this.instrument_work.valor_nominal,
         [
           Validators.required,
           Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
         ]
       ],
       otros_costos: [
-        this.instrument_exists ? 0 : this.instrument_work.otros_costos,
+        this.instrument_null || this.instrument_work.otros_costos == null
+          ? 0
+          : this.instrument_work.otros_costos,
         [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
       ],
-      plazo: [
-        this.instrument_exists ? "" : this.instrument_work.plazo,
-        [Validators.required]
-      ],
       renta_porcentaje: [
-        this.instrument_exists ? "" : this.instrument_work.renta_porcentaje,
+        this.instrument_null || this.instrument_work.renta_porcentaje == null
+          ? 10
+          : this.instrument_work.renta_porcentaje,
         [Validators.required]
       ],
       comision_casa_porcentaje: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : this.instrument_work.comision_casa_porcentaje,
         [
@@ -157,7 +159,7 @@ export class VCN implements InstrumentComponent {
         ]
       ],
       comision_bolsa_porcentaje: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : this.instrument_work.comision_bolsa_porcentaje,
         [
@@ -166,18 +168,18 @@ export class VCN implements InstrumentComponent {
         ]
       ],
       rendimiento_bruto: [
-        this.instrument_exists ? "" : this.instrument_work.rendimiento_bruto,
+        this.instrument_null ? "" : this.instrument_work.rendimiento_bruto,
         [
           Validators.required,
           Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
         ]
       ],
       /*formato_ingreso: [
-        this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
+        this.instrument_null ? "" : this.instrument_work.formato_ingreso,
         [Validators.required]
       ],*/
       fecha_liquidacion: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : {
               isRange: false,
@@ -193,7 +195,7 @@ export class VCN implements InstrumentComponent {
         Validators.required
       ],
       fecha_vencimiento: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : {
               isRange: false,
@@ -209,7 +211,7 @@ export class VCN implements InstrumentComponent {
         Validators.required
       ],
       fecha_operacion: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : {
               isRange: false,
@@ -225,7 +227,7 @@ export class VCN implements InstrumentComponent {
         Validators.required
       ],
       fecha_ultima_cupon: [
-        this.instrument_exists
+        this.instrument_null
           ? ""
           : {
               isRange: false,
@@ -258,6 +260,7 @@ export class VCN implements InstrumentComponent {
 
   getCalculations(form: any, saveForm: boolean) {
     this.submitted = true;
+
     if (!form.valid) {
       return false;
     }
@@ -272,9 +275,9 @@ export class VCN implements InstrumentComponent {
       .vcnCalc(
         "VCN", // Codigo del instrumento
         {
-          id_tipo_base: this.general.base_anual,
-          id_periodicidad: this.general.periodicidad,
-          id_formato_ingreso: this.general.formato_ingreso
+          id_tipo_base: +this.general.base_anual,
+          id_periodicidad: +this.general.periodicidad,
+          id_formato_ingreso: +this.general.formato_ingreso
         },
         {
           valor_par: this.f.valor_par.value,
@@ -283,7 +286,6 @@ export class VCN implements InstrumentComponent {
           comision_bolsa_porcentaje: this.f.comision_bolsa_porcentaje.value,
           rendimiento_bruto: this.f.rendimiento_bruto.value,
           otros_costos: this.f.otros_costos.value,
-          plazo: this.f.plazo.value,
           renta_porcentaje: this.f.renta_porcentaje.value,
           //id_formato_ingreso: this.f.formato_ingreso.value,
           fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted,
@@ -343,7 +345,7 @@ export class VCN implements InstrumentComponent {
             interes_acumulado: this.interes_acumulado,
             fecha_inicio_vigencia: this.fecha_inicio_vigencia,
             proyecciones: this.proyecciones,
-            plazo: this.investmentProposalForm.value.plazo,
+            plazo: this.plazo,
             //id_formato_ingreso: this.investmentProposalForm.value.id_formato_ingreso,
 
             fecha_operacion: this.investmentProposalForm.value.fecha_operacion

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

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

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

@@ -30,117 +30,42 @@
           <div class="card borderless">
             <div class="card-header card-header-icon card-header-rose">
               <h4 class="card-title">
-                Histórico de cambios
+                Histórico de cambios para inversión: {{ investmentCode }}
               </h4>
             </div>
             <div class="card-body">
               <div class="align-container">
                 <ul class="list-unstyled">
-                  <li class="alert secondary-bg">
-                    <div class="media">
-                      <div class="user-icon">
-                        <i class="material-icons">
-                          person
-                        </i>
-                      </div>
-                      <div class="media-body">
-                        <h6 class="mt-0 ">
-                          Sarahi Garcia
-                          <div class="float-right">07/02/2020 18:00</div>
-                        </h6>
-                        <a href="javascript:void(0);">Modificacion</a>
-                        <p class="mt-10">
-                          Adjunto requisicion de pago.
-                        </p>
-                      </div>
-                    </div>
-                    <div class="divider mt-15"></div>
-                  </li>
-                  <li class="alert info-bg">
-                    <div class="media">
-                      <div class="user-icon clearfix">
-                        <i class="material-icons">
-                          person
-                        </i>
-                      </div>
-                      <div class="media-body">
-                        <h6 class="mt-0 ">
-                          Francisco Huezo
-                          <div class="float-right">07/02/2020 15:00</div>
-                        </h6>
-                        <a href="javascript:void(0);">Modificacion</a>
-                        <p class="mt-10">
-                          Lorem ipsum dolor sit amet consectetur adipisicing
-                          elit. Harum odio omnis dolorum voluptatibus
-                          consequatur atque culpa labore quo excepturi, porro
-                          voluptatum vel dolores sunt reprehenderit libero.
-                          Perspiciatis, accusamus! Nemo, ullam.
-                        </p>
-                      </div>
-                    </div>
-                    <div class="divider mt-15"></div>
-                  </li>
-                  <li class="alert secondary-bg">
-                    <div class="media">
-                      <div class="user-icon">
-                        <i class="material-icons">
-                          person
-                        </i>
-                      </div>
-                      <div class="media-body">
-                        <h6 class="mt-0 ">
-                          Carlos Chavez
-                          <div class="float-right">06/02/2020 13:40</div>
-                        </h6>
-                        <a href="javascript:void(0);">Modificacion</a>
-                        <p class="mt-10">
-                          Cambio el estado a Aprobado
-                        </p>
-                      </div>
-                    </div>
-                    <div class="divider mt-15"></div>
-                  </li>
-                  <li class="alert info-bg">
-                    <div class="media">
-                      <div class="user-icon">
-                        <i class="material-icons">
-                          person
-                        </i>
-                      </div>
-                      <div class="media-body">
-                        <h6 class="mt-0 ">
-                          Oscar Nuñez
-                          <div class="float-right">06/02/2020 08:58</div>
-                        </h6>
-                        <a href="javascript:void(0);">Modificacion</a>
-                        <p class="mt-10">
-                          Lorem, ipsum dolor sit amet consectetur adipisicing
-                          elit. Doloribus obcaecati excepturi mollitia eum nulla
-                          eos temporibus, a praesentium expedita animi nemo
-                          assumenda quasi iusto quas maxime amet recusandae ut!
-                          Id.
-                        </p>
-                      </div>
-                    </div>
-                    <div class="divider mt-15"></div>
-                  </li>
-                  <li class="alert secondary-bg">
-                    <div class="media">
-                      <div class="user-icon">
-                        <i class="material-icons">
-                          person
-                        </i>
-                      </div>
-                      <div class="media-body">
-                        <h6 class="mt-0 ">
-                          Angel Hernandez
-                          <div class="float-right">05/02/2020 10:55</div>
-                        </h6>
-                        <a href="javascript:void(0);">Creacion</a>
-                        <p class="mt-10">
-                          Lorem ipsum dolor sit amet consectetur adipisicing
-                          elit.
-                        </p>
+                  <li *ngFor="let item of logs; let i = index">
+                    <div
+                      [ngClass]="
+                        i % 2 == 0 ? 'log secondary-bg' : 'log info-bg'
+                      "
+                    >
+                      <div class="media">
+                        <div class="user-icon">
+                          <i class="material-icons">
+                            person
+                          </i>
+                        </div>
+                        <div class="media-body">
+                          <h6 class="mt-0 ">
+                            {{ item.created_by }}
+                            <div class="float-right">
+                              {{ item.created_date }}
+                            </div>
+                          </h6>
+                          <p class="mt-10">Estado: {{ item.estado_final }}</p>
+                          <p>Comentario: {{ item.comentario }}</p>
+                          <p *ngIf="item.evidencia != null">
+                            Archivo
+                            <a
+                              [href]="fileDownload + item.evidencia"
+                              target="_blank"
+                              >Descargar archivo</a
+                            >
+                          </p>
+                        </div>
                       </div>
                     </div>
                   </li>

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

@@ -15,3 +15,11 @@
 .secondary-bg {
   background: #ddd;
 }
+
+.log {
+  padding: 10px;
+  margin-bottom: 10px;
+  p {
+    margin-bottom: 5px;
+  }
+}

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

@@ -5,7 +5,7 @@ import {
   ViewChild,
   ComponentFactoryResolver
 } from "@angular/core";
-import { Router } from "@angular/router";
+import { Router, ActivatedRoute } from "@angular/router";
 import { InvestmentProposalForm } from "@app/models/investment-proposal-form";
 import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
 import { Instrument } from "@app/models/instrument";
@@ -13,6 +13,8 @@ import { InvestmentProposalWorkflowService } from "@app/services/investment-prop
 import { InstrumentDirective } from "../instrument/instrument.directive";
 import { InstrumentComponent } from "../instrument/instrument.component";
 import { InstrumentsService } from "@app/services/instruments.service";
+import { InvestmentsService } from "@app/services/investments.service";
+import { environment } from "@environments/environment";
 
 @Component({
   selector: "app-investment-proposal-changes",
@@ -25,16 +27,10 @@ export class ChangeHistoryComponent implements OnInit {
   @Input() formData: InvestmentProposalForm;
   @ViewChild(InstrumentDirective, { static: true })
   adHost: InstrumentDirective;
-  isFormValid: boolean = false;
-  general: any;
-  instrument: any;
-  complement: any;
-  final: any;
-  workType: string;
-  form: any;
-  currentAdIndex = -1;
-  interval: any;
-  indexDynamicComponent: number;
+  investmentProposalID: string;
+  logs: any;
+  investmentCode: any;
+  fileDownload: string;
 
   constructor(
     private router: Router,
@@ -42,54 +38,35 @@ export class ChangeHistoryComponent implements OnInit {
     private formDataService: FormInvestmentProposalService,
     private componentFactoryResolver: ComponentFactoryResolver,
     private instrumentService: InvestmentProposalWorkflowService,
-    private loadInstrumentsService: InstrumentsService
+    private loadInstrumentsService: InstrumentsService,
+    private route: ActivatedRoute,
+    private investmentService: InvestmentsService
   ) {}
 
   ngOnInit() {
-    this.formData = this.formDataService.getFormData();
-    this.isFormValid = this.formDataService.isFormValid();
-    this.ads = this.loadInstrumentsService.getInstruments();
-    this.formData.instrumentos;
+    this.route.params.subscribe(params => {
+      this.investmentProposalID = params["id"];
+    });
+    if (this.investmentProposalID == undefined)
+      this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
-    this.indexDynamicComponent = this.ads.findIndex(
-      x => x.data.key == this.formData.instrumentos
-    );
-    if (this.indexDynamicComponent >= 0) {
-      this.loadComponent();
-    } else {
-      console.log("No existe el componente");
-    }
+    this.investmentService
+      .getProposalInvestment(this.investmentProposalID)
+      .subscribe(
+        res => {
+          this.fileDownload = environment.productionMediaUrl;
+          this.investmentCode = res["result"]["codigo_inversion"];
+        },
+        err => {}
+      );
 
-    this.general = this.formDataService.getGeneralInfo();
-    this.instrument = this.formDataService.getWork();
-    this.complement = this.formDataService.getComplementInfo();
-
-    this.final = {};
-
-    Object.assign(this.final, this.general, this.instrument, this.complement);
-    console.log("Result feature loaded!");
-    console.log(this.final);
-  }
-
-  loadComponent() {
-    this.currentAdIndex = this.indexDynamicComponent % this.ads.length;
-    const adItem = this.ads[this.currentAdIndex];
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-      adItem.component
-    );
-
-    const viewContainerRef = this.adHost.viewContainerRef;
-    viewContainerRef.clear();
-
-    const componentRef = viewContainerRef.createComponent(componentFactory);
-    (<InstrumentComponent>componentRef.instance).data = adItem.data;
-    (<InstrumentComponent>componentRef.instance).summary = true;
-  }
-
-  submit() {
-    console.log(this.final);
-
-    this.formData = this.formDataService.resetFormData();
-    this.isFormValid = false;
+    this.investmentService
+      .getInvestmentProposalLogs(this.investmentProposalID)
+      .subscribe(
+        res => {
+          this.logs = res["result"];
+        },
+        error => {}
+      );
   }
 }

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

@@ -111,24 +111,47 @@
                       <div class="form-group">
                         <label for="empresa">Empresa: </label>
 
-                        <select
-                          s
-                          class="custom-select"
-                          formControlName="empresa"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.empresa.errors
-                          }"
+                        <ng-container
+                          *ngIf="
+                            investmentProposalID == undefined;
+                            else elseTemplate
+                          "
                         >
-                          <option
-                            *ngFor="let item of companies"
-                            [value]="item.id_empresa"
-                            [selected]="
-                              item.id_empresa == complementInfo.empresa
-                            "
-                          >
-                            {{ item.nombre }}</option
+                          <select
+                            s
+                            class="custom-select"
+                            formControlName="empresa"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.empresa.errors
+                            }"
                           >
-                        </select>
+                            <option
+                              *ngFor="let item of companies"
+                              [value]="item.id_empresa"
+                              [selected]="
+                                item.id_empresa == complementInfo.empresa
+                              "
+                            >
+                              {{ item.nombre }}</option
+                            >
+                          </select>
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                          <input
+                            type="text"
+                            [value]="companyValue"
+                            name="x"
+                            class="form-control"
+                            readonly
+                          />
+                          <input
+                            type="hidden"
+                            formControlName="empresa"
+                            class="form-control"
+                            readonly
+                          />
+                        </ng-template>
+
                         <div
                           *ngIf="submitted && f.empresa.errors"
                           class="invalid-feedback"

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

@@ -65,7 +65,9 @@ export class ComplementInfoComponent implements OnInit {
   operations: any;
   payment_terms: any;
 
-  complementInfoExists: boolean;
+  complementInfoDontExists: boolean;
+  companyValue: any;
+  instrumentInfo: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -82,19 +84,32 @@ 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.catalogService.getCompanies().subscribe(res => {
+    this.instrumentInfo = this.formDataService.getGeneralInfo().instrumentos;
+    console.log("instrumento");
+    console.log(this.instrumentInfo);
+
+    this.catalogService.getCatalogInfo("empresas").subscribe(res => {
       this.companies = res;
+
+      if (this.investmentProposalID != undefined) {
+        this.companyValue = this.companies.find(
+          e => e.id_empresa == this.complementInfo.empresa
+        );
+
+        this.companyValue =
+          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.catalogService.getCatalogInfo("tipos-emisores").subscribe(res => {
       this.emitters = res;
     });
 
@@ -110,46 +125,153 @@ 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,
         [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) {
+      switch (this.instrumentInfo) {
+        case "LETE":
+          this.investmentProposalForm.patchValue({
+            emisores: this.investmentProposalForm.value.emisores = 985,
+            pais: this.investmentProposalForm.value.pais = 210
+          });
+
+        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() {
@@ -157,9 +279,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;
   }
@@ -176,8 +299,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,60 @@
                         </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
+                            }"
+                            (change)="pre_filled_fields($event)"
+                          >
+                            <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">
                         <label for="tipo_tasa">Tipo Tasa: </label>
@@ -156,8 +210,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,34 +241,6 @@
                         </div>
                       </div>
                     </div>
-                    <div class="col-lg-6 col-sm-12 pr-xl-3">
-                      <div class="form-group">
-                        <label for="instrumentos">Instrumentos: </label>
-
-                        <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>
-                        <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">
@@ -264,8 +289,8 @@
                             *ngFor="let item of base_types"
                             [value]="item.id_tipo_base"
                             [selected]="item.id_tipo_base == general.base_anual"
-                            >{{ item.tipo_base }}/{{
-                              item.tipo_base_dias
+                            >{{ item.tipo_base_dias }}/{{
+                              item.tipo_base
                             }}</option
                           >
                         </select>

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

@@ -85,6 +85,7 @@ export class InvestmentProposalGeneralInfoComponent
   gComplement: any;
   datez: any;
   instrumentName: any;
+  instrumentValue: any;
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -181,6 +182,11 @@ export class InvestmentProposalGeneralInfoComponent
               justificacion: res["result"]["justificacion"]
             };
 
+            this.instrumentValue =
+              res["result"]["id_inversion_instrumento"]["id_tipo_instrumento"][
+                "nombre"
+              ];
+
             // Setear objeto dinamico con valores obtenidos del endpoint
             this.general = this.formDataService.getGeneralInfo();
 
@@ -344,4 +350,120 @@ export class InvestmentProposalGeneralInfoComponent
   get f() {
     return this.investmentProposalForm.controls;
   }
+
+  pre_filled_fields(event: any) {
+    const selectedInstrument = (event.target as HTMLInputElement).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

@@ -39,38 +39,50 @@
           <br />
           <div class="example-container mat-elevation-z8">
             <div class="example-table-container">
-              <table mat-table [dataSource]="dataSource" class="example-table">
+              <table
+                mat-table
+                [dataSource]="dataSource"
+                matSort
+                class="example-table"
+              >
                 <!-- Name Column -->
                 <ng-container matColumnDef="codigo_inversion">
-                  <th mat-header-cell *matHeaderCellDef>Codigo</th>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Codigo
+                  </th>
                   <td mat-cell *matCellDef="let row">
                     {{ row.codigo_inversion }}
                   </td>
                 </ng-container>
                 <!-- Country Column -->
                 <ng-container matColumnDef="asunto">
-                  <th mat-header-cell *matHeaderCellDef>Asunto</th>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Asunto
+                  </th>
                   <td mat-cell *matCellDef="let row">
                     {{ row.asunto }}
                   </td>
                 </ng-container>
 
                 <!-- Country Column -->
-                <ng-container matColumnDef="id_tipo_mercado">
-                  <th mat-header-cell *matHeaderCellDef>Tipo de mercado</th>
+                <ng-container matColumnDef="id_empresa">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Empresa
+                  </th>
                   <td mat-cell *matCellDef="let row">
                     {{
-                      row.id_tipo_mercado == "" ||
-                      row.id_tipo_mercado == undefined
+                      row.id_empresa == "" || row.id_empresa == undefined
                         ? "-"
-                        : row.id_tipo_mercado.nombre
+                        : row.id_empresa.nombre
                     }}
                   </td>
                 </ng-container>
 
                 <!-- Country Column -->
                 <ng-container matColumnDef="id_inversion_instrumento">
-                  <th mat-header-cell *matHeaderCellDef>Instrumento</th>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Instrumento
+                  </th>
                   <td mat-cell *matCellDef="let row">
                     {{
                       row.id_inversion_instrumento.id_tipo_instrumento == "" ||
@@ -84,7 +96,9 @@
                 </ng-container>
 
                 <ng-container matColumnDef="id_estado_inversion">
-                  <th mat-header-cell *matHeaderCellDef>Estado</th>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Estado
+                  </th>
                   <td mat-cell *matCellDef="let row">
                     {{
                       row.id_estado_inversion == "" ||
@@ -109,16 +123,8 @@
                       </a>
                       <a
                         *ngIf="
-                          can_modify_or_send_to_review(
-                            row.id_estado_inversion.codigo
-                          ) ||
-                          can_write_payment_info(
-                            row.id_estado_inversion.codigo
-                          ) ||
-                          (can_finish_proposal(
-                            row.id_estado_inversion.codigo
-                          ) &&
-                            userType(userRole, 'analistas'))
+                          can_modify(row.id_estado_inversion.codigo) &&
+                          userType(userRole, 'analistas')
                         "
                         title="Editar"
                         class="btn btn-primary btn-custom-small"
@@ -187,6 +193,22 @@
                       >
                         <i class="fas fa-money-check-alt"></i>
                       </a>
+                      <a
+                        *ngIf="
+                          can_review_payment(row.id_estado_inversion.codigo) &&
+                          userType(userRole, 'supervisores')
+                        "
+                        title="Autorización de pago"
+                        class="btn btn-success btn-custom-small"
+                        [routerLink]="[
+                          '/investment-proposal',
+                          row.id_inversion,
+                          'payment-approval'
+                        ]"
+                      >
+                        <i class="fas fa-search-dollar"></i>
+                      </a>
+
                       <a
                         *ngIf="
                           can_upload_payment(row.id_estado_inversion.codigo) &&

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

@@ -25,7 +25,7 @@ export class InvestmentProposalsComponent implements OnInit {
   displayedColumns: string[] = [
     "codigo_inversion",
     "asunto",
-    "id_tipo_mercado",
+    "id_empresa",
     "id_inversion_instrumento",
     "id_estado_inversion",
     "id"
@@ -43,6 +43,9 @@ export class InvestmentProposalsComponent implements OnInit {
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   role_number: any;
+  test: string;
+  userList: any;
+  reviewProposal: { id_inversion: number; step: string; comentario: any };
 
   constructor(
     private catalogService: CatalogsService,
@@ -62,6 +65,7 @@ export class InvestmentProposalsComponent implements OnInit {
         data.codigo_inversion.toLowerCase() +
         data.nombre_inversion.toLowerCase() +
         data.asunto.toLowerCase() +
+        data.id_empresa.nombre.toLowerCase() +
         data.comentario.toLowerCase() +
         data.justificacion.toLowerCase();
       return dataStr.indexOf(filter) != -1;
@@ -105,6 +109,7 @@ export class InvestmentProposalsComponent implements OnInit {
         this.dataSource.data = this.listProposals;
         this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
+        Swal.close();
       },
       err => {
         Swal.fire({
@@ -114,10 +119,6 @@ export class InvestmentProposalsComponent implements OnInit {
         });
       }
     );
-
-    setTimeout(() => {
-      Swal.close();
-    }, 1200);
   }
 
   applyFilter(event: Event) {
@@ -172,11 +173,23 @@ export class InvestmentProposalsComponent implements OnInit {
     }, 1000);
   }
 
+  can_modify(status: string) {
+    if (
+      status == "NUEVA" ||
+      status == "RECHA" ||
+      status == "APROB" ||
+      status == "LIQUI"
+    ) {
+      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) {
-    if (status == "NUEVA" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "NUEVA" || status == "RECHA") {
       return true;
     } else {
       return false;
@@ -184,8 +197,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   can_review(status: string) {
-    if (status == "PENDI" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "PENDI" || status == "NOAPR") {
       return true;
     } else {
       return false;
@@ -193,8 +205,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   can_approve(status: string) {
-    if (status == "REVIS" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "REVIS") {
       return true;
     } else {
       return false;
@@ -202,26 +213,30 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   can_write_payment_info(status: string) {
-    if (status == "APROB" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "APROB") {
       return true;
     } else {
       return false;
     }
   }
 
-  can_upload_payment(status: string) {
-    if (status == "COMPR" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+  can_review_payment(status: string) {
+    if (status == "COMPR") {
       return true;
     } else {
       return false;
     }
   }
 
+  can_upload_payment(status: string) {
+    if (status == "PGAPR") {
+      return true;
+    } else {
+      return false;
+    }
+  }
   can_finish_proposal(status: string) {
-    if (status == "LIQUI" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "LIQUI") {
       return true;
     } else {
       return false;
@@ -229,8 +244,21 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   sendToReview(investmentProposalID: number, investmentCode: string) {
+    this.investmentsService
+      .getAvailableUsers(investmentProposalID)
+      .subscribe(res => {
+        this.userList = res["usuarios_next"];
+        this.test = "<div>Notificar a:</div>";
+
+        if (this.userList.length > 0) {
+          for (let i = 0; i < this.userList.length; i++) {
+            this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='${this.userList[i]}' name='users' value='${this.userList[i]}'><label class='form-check-label' for='${this.userList[i]}'>${this.userList[i]}</label></div>`;
+          }
+        }
+      });
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
+      Swal.fire({
         title: `<h3>Enviar a revisión propuesta de inversión ${investmentCode}</h3>`,
         icon: "info",
         html: `<p style="text-align:left;">Comentario:</p>`,
@@ -238,93 +266,169 @@ export class InvestmentProposalsComponent implements OnInit {
         showCancelButton: true,
         confirmButtonText: "Enviar propuesta",
         cancelButtonText: "Cancelar",
-        // inputValidator: value => {
-        //   if (!value) {
-        //     return "Debe ingresar un comentario";
-        //   }
-        // }
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
 
         preConfirm: comentario => {
-          let reviewProposal = {
+          this.reviewProposal = {
             id_inversion: investmentProposalID,
             step: "next",
             comentario: comentario
           };
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        Swal.fire({
+          title: `<h3>Enviar a revisión propuesta de inversión ${investmentCode}</h3>`,
+          icon: "info",
+          html: `${this.test}`,
+          confirmButtonText: "Siguiente",
+          showCancelButton: true,
+          cancelButtonText: "Cancelar",
+          showLoaderOnConfirm: true,
 
-          this.investmentsService
-            .sendReviewProposalInvestment(reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
+          preConfirm: () => {
+            let array = [];
+
+            for (let i = 0; i < this.userList.length; i++) {
+              let html_input: HTMLInputElement = document.getElementById(
+                this.userList[i]
+              ) as HTMLInputElement;
+              let html_value: string = html_input.value;
+              if (html_input.checked == true) {
+                array.push(html_value);
+              }
+            }
+
+            this.reviewProposal["notificar"] = array.toString();
+
+            this.investmentsService
+              .sendReviewProposalInvestment(this.reviewProposal)
+              .subscribe(
+                success => {
+                  if (success) {
+                    Swal.fire({
+                      allowOutsideClick: false,
+                      icon: "success",
+                      showCancelButton: false,
+                      title: "Exito",
+                      confirmButtonText:
+                        "La propuesta ha sido enviada a revisión"
+                    }).then(result => {
+                      Swal.close();
+                      window.location.reload();
+                    });
+                  }
+                },
+                err => {
                   Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido enviada a revisión"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.reload();
+                    icon: "error",
+                    title: "Error al guardar",
+                    text: err.message
                   });
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
-              }
-            );
-        }
+              );
+          }
+        });
+        //window.location.reload();
       });
     })();
   }
 
   //Enviar a revision la propuesta de inversion
   finishProposal(investmentProposalID: number, investmentCode: string) {
+    this.investmentsService
+      .getAvailableUsers(investmentProposalID)
+      .subscribe(res => {
+        this.userList = res["usuarios_next"];
+        this.test = "";
+
+        if (this.userList.length > 0) {
+          for (let i = 0; i < this.userList.length; i++) {
+            this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='${this.userList[i]}' name='users' value='${this.userList[i]}'><label class='form-check-label' for='${this.userList[i]}'>${this.userList[i]}</label></div>`;
+          }
+        }
+      });
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
+      Swal.fire({
         title: `<h3>Finalizar propuesta de inversión: ${investmentCode}</h3>`,
         icon: "info",
         input: "textarea",
         html: `<p style="text-align:left;">Comentario:</p>`,
         showCancelButton: true,
-        confirmButtonText: "Finalizar",
+        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
         preConfirm: comentario => {
-          let reviewProposal = {
+          this.reviewProposal = {
             id_inversion: investmentProposalID,
             step: "next",
             comentario: comentario
           };
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        Swal.fire({
+          title: `<h3>Finalizar propuesta de inversión ${investmentCode}</h3>`,
+          icon: "info",
+          html: `${this.test}`,
+          confirmButtonText: "Finalizar",
+          showCancelButton: true,
+          cancelButtonText: "Cancelar",
+          showLoaderOnConfirm: true,
+
+          preConfirm: () => {
+            let array = [];
+
+            for (let i = 0; i < this.userList.length; i++) {
+              let html_input: HTMLInputElement = document.getElementById(
+                this.userList[i]
+              ) as HTMLInputElement;
+              let html_value: string = html_input.value;
+              if (html_input.checked == true) {
+                array.push(html_value);
+              }
+            }
 
-          this.investmentsService
-            .sendReviewProposalInvestment(reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
+            this.reviewProposal["notificar"] = array.toString();
+
+            this.investmentsService
+              .sendReviewProposalInvestment(this.reviewProposal)
+              .subscribe(
+                success => {
+                  if (success) {
+                    Swal.fire({
+                      allowOutsideClick: false,
+                      icon: "success",
+                      showCancelButton: false,
+                      title: "Exito",
+                      confirmButtonText: "La propuesta ha sido finalizada"
+                    }).then(result => {
+                      Swal.close();
+                      window.location.reload();
+                    });
+                  }
+                },
+                err => {
                   Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido finalizada"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.reload();
+                    icon: "error",
+                    title: "Error al guardar",
+                    text: err.message
                   });
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
-              }
-            );
-        }
+              );
+          }
+        });
+        //window.location.reload();
       });
     })();
   }

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

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

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

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

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

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

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

@@ -42,7 +42,7 @@
                 <!-- Valor nominal -->
                 <div class="col-lg-6 col-sm-12 pr-xl-3">
                   <div class="form-group">
-                    <label for="monto">Monto: </label>
+                    <label for="monto">Monto a pagar: </label>
                     <div class="input-box-container">
                       <p>
                         <i class="fas fa-dollar-sign"></i>
@@ -76,11 +76,14 @@
 
                     <select
                       class="custom-select"
+                      (change)="onChangePaymentType($event.target.value)"
                       formControlName="tipo_pago"
                       [ngClass]="{
                         'is-invalid': submitted && f.tipo_pago.errors
                       }"
                     >
+                      <option value=""></option>
+
                       <option
                         *ngFor="let item of payment_types"
                         [value]="item.id_tipo_pago"
@@ -129,6 +132,45 @@
                   </div>
                 </div>
 
+                <div class="col-lg-6 col-sm-12 pr-xl-3" *ngIf="payment_check">
+                  <div class="form-group">
+                    <label for="emitir_nombre">Emitir a nombre: </label>
+                    <div class="input-box-container">
+                      <p>
+                        <i class="fas fa-dollar-sign"></i>
+                      </p>
+                      <input
+                        type="text"
+                        formControlName="emitir_nombre"
+                        class="form-control"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  class="col-lg-6 col-sm-12 pr-xl-3"
+                  *ngIf="payment_transfer"
+                >
+                  <div class="form-group">
+                    <label for="cuenta_bancaria_destino"
+                      >Cuenta bancaria destino:
+                    </label>
+
+                    <select
+                      class="custom-select"
+                      formControlName="cuenta_bancaria_destino"
+                    >
+                      <option
+                        *ngFor="let item of accounts_destination"
+                        [value]="item.id_cuenta_bancaria_destino"
+                      >
+                        {{ item.nombre }}</option
+                      >
+                    </select>
+                  </div>
+                </div>
+
                 <!-- Fecha vencimiento -->
                 <div class="col-lg-6 col-sm-12 pr-xl-3">
                   <div class="form-group">

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

@@ -71,6 +71,13 @@ export class PaymentInfoComponent implements OnInit {
   accounts: any;
   paymentObject: Object;
   inversionAmount: any;
+  reviewProposal: any;
+  generated_inputs_next: any;
+  userListNext: any;
+  investmentService: any;
+  payment_check: boolean;
+  payment_transfer: boolean;
+  accounts_destination: any;
 
   constructor(
     private router: Router,
@@ -88,20 +95,45 @@ export class PaymentInfoComponent implements OnInit {
     if (this.investmentProposalID == undefined)
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
+    this.investmentsService
+      .getAvailableUsers(this.investmentProposalID)
+      .subscribe(res => {
+        this.userListNext = res["usuarios_next"];
+        this.generated_inputs_next = "";
+        if (this.userListNext.length > 0) {
+          for (let i = 0; i < this.userListNext.length; i++) {
+            this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+          }
+        }
+      });
     this.investmentsService
       .getProposalInvestment(this.investmentProposalID)
       .subscribe(
         res => {
           this.inversionCode = res["result"]["codigo_inversion"];
-          this.inversionAmount =
-            res["result"]["id_inversion_instrumento"]["instrumento"][
-              "valor_nominal"
-            ];
+
+          if (
+            res["result"]["id_inversion_instrumento"]["id_tipo_instrumento"][
+              "codigo"
+            ] == "DAP"
+          ) {
+            this.inversionAmount =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "monto_inversion"
+              ];
+          } else {
+            this.inversionAmount =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "total_pagar"
+              ];
+          }
           this.investmentProposalForm.setValue({
             monto: this.inversionAmount,
             tipo_pago: "",
             cuenta_bancaria: "",
-            fecha_vencimiento: ""
+            fecha_vencimiento: "",
+            cuenta_bancaria_destino: "",
+            emitir_nombre: ""
           });
         },
         err => {
@@ -127,6 +159,12 @@ export class PaymentInfoComponent implements OnInit {
       //this.payment_types = res;
     });
 
+    this.catalogService
+      .getCatalogInfo("cuentas-bancaria-destino")
+      .subscribe(res => {
+        this.accounts_destination = res;
+      });
+
     this.investmentProposalForm = this.formBuilder.group({
       monto: [
         this.inversionAmount,
@@ -137,10 +175,25 @@ export class PaymentInfoComponent implements OnInit {
       ],
       tipo_pago: ["", Validators.required],
       cuenta_bancaria: ["", Validators.required],
-      fecha_vencimiento: ["", Validators.required]
+      fecha_vencimiento: ["", Validators.required],
+      cuenta_bancaria_destino: [""],
+      emitir_nombre: [""]
     });
   }
 
+  onChangePaymentType(event: any) {
+    if (event == 2) {
+      this.payment_check = true;
+      this.payment_transfer = false;
+    } else if (event == 3) {
+      this.payment_transfer = true;
+      this.payment_check = false;
+    } else {
+      this.payment_check = false;
+      this.payment_transfer = false;
+    }
+  }
+
   get f() {
     return this.investmentProposalForm.controls;
   }
@@ -153,67 +206,127 @@ export class PaymentInfoComponent implements OnInit {
 
   sendPaymentInfo(form: any) {
     this.submitted = true;
-    console.log(form);
     if (!form.valid) {
       return false;
     }
 
-    this.paymentProposal = {
-      id_inversion: this.investmentProposalID,
-      step: "next",
-      comentario: "Informacion de pago"
-    };
-
-    this.paymentObject = {
-      monto: this.investmentProposalForm.value.monto,
-      id_tipo_pago: this.investmentProposalForm.value.tipo_pago,
-      id_cuenta_bancaria: this.investmentProposalForm.value.cuenta_bancaria,
-      //fecha_pago: this.investmentProposalForm.value.fecha_pago.singleDate.formatted,
-      fecha_vencimiento: this.investmentProposalForm.value.fecha_vencimiento
-        .singleDate.formatted,
-      id_inversion: this.investmentProposalID
-    };
+    this.reviewProposal = undefined;
+    (async () => {
+      Swal.fire({
+        title: `<h3>Enviar información de pago</h3>`,
+        icon: "info",
+        html: `<p style="text-align:left;">Comentario:</p>`,
+        input: "textarea",
+        showCancelButton: true,
+        confirmButtonText: "Siguiente",
+        cancelButtonText: "Cancelar",
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
 
-    this.investmentsService
-      .sendPaymentInfoProposalInvestment(
-        this.investmentProposalID,
-        this.paymentObject
-      )
-      .subscribe(
-        success => {
-          this.investmentsService
-            .sendProposalInvestmentToNextStep(this.paymentProposal)
-            .subscribe(
-              success => {
-                if (success) {
-                  Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La requisicion de pago ha sido generada"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.href = "#/investment-proposals";
-                  });
-                }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
-              }
-            );
+        preConfirm: comentario => {
+          this.reviewProposal = {
+            id_inversion: this.investmentProposalID,
+            step: "next",
+            comentario: comentario
+          };
         },
-        err => {
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        if (result.value) {
           Swal.fire({
-            icon: "error",
-            title: "Error al guardar",
-            text: err.message
+            title: `<h3>Enviar información de pago</h3>`,
+            icon: "info",
+            html: `<div>Notificar a:</div>${this.generated_inputs_next}`,
+            confirmButtonText: "Enviar información",
+            showCancelButton: true,
+            cancelButtonText: "Cancelar",
+            showLoaderOnConfirm: true,
+
+            preConfirm: () => {
+              let array = [];
+
+              for (let i = 0; i < this.userListNext.length; i++) {
+                let html_input: HTMLInputElement = document.getElementById(
+                  "next-" + this.userListNext[i]
+                ) as HTMLInputElement;
+                let html_value: string = html_input.value;
+                if (html_input.checked == true) {
+                  array.push(html_value);
+                }
+              }
+
+              this.reviewProposal["notificar"] = array.toString();
+              this.paymentObject = {
+                monto: this.investmentProposalForm.value.monto,
+                id_tipo_pago: +this.investmentProposalForm.value.tipo_pago,
+                id_cuenta_bancaria: +this.investmentProposalForm.value
+                  .cuenta_bancaria,
+
+                //fecha_pago: this.investmentProposalForm.value.fecha_pago.singleDate.formatted,
+                fecha_vencimiento: this.investmentProposalForm.value
+                  .fecha_vencimiento.singleDate.formatted,
+                id_inversion: +this.investmentProposalID
+              };
+
+              if (+this.investmentProposalForm.value.tipo_pago == 2) {
+                this.paymentObject[
+                  "emitir_nombre"
+                ] = this.investmentProposalForm.value.emitir_nombre;
+              } else if (+this.investmentProposalForm.value.tipo_pago == 3) {
+                this.paymentObject["id_cuenta_bancaria_destino"] = +this
+                  .investmentProposalForm.value.cuenta_bancaria_destino;
+              }
+
+              this.investmentsService
+                .sendPaymentInfoProposalInvestment(
+                  this.investmentProposalID,
+                  this.paymentObject
+                )
+                .subscribe(
+                  success => {
+                    this.investmentsService
+                      .sendProposalInvestmentToNextStep(this.reviewProposal)
+                      .subscribe(
+                        success => {
+                          if (success) {
+                            Swal.fire({
+                              allowOutsideClick: false,
+                              icon: "success",
+                              showCancelButton: false,
+                              title: "Exito",
+                              confirmButtonText:
+                                "La requisicion de pago ha sido generada"
+                            }).then(result => {
+                              Swal.close();
+                              window.location.href = "#/investment-proposals";
+                            });
+                          }
+                        },
+                        err => {
+                          Swal.fire({
+                            icon: "error",
+                            title: "Error al guardar",
+                            text: err.message
+                          });
+                        }
+                      );
+                  },
+                  err => {
+                    Swal.fire({
+                      icon: "error",
+                      title: "Error al guardar",
+                      text: err.message
+                    });
+                  }
+                );
+            }
           });
         }
-      );
+      });
+    })();
   }
 }

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

@@ -48,7 +48,7 @@
                       <div class="field">{{ codigo_inversion }}</div>
                     </div>
                     <div class="col-sm-6">
-                      <h4>Monto:</h4>
+                      <h4>Monto a pagar:</h4>
                       <div class="field">
                         $USD {{ monto | number: "1.2-4" }}
                       </div>
@@ -66,6 +66,16 @@
                       <div class="field">{{ cuenta_bancaria }}</div>
                     </div>
 
+                    <div class="col-sm-6" *ngIf="cuenta_bancaria_destino">
+                      <h4>Cuenta bancaria destino:</h4>
+                      <div class="field">{{ cuenta_bancaria_destino }}</div>
+                    </div>
+
+                    <div class="col-sm-6" *ngIf="emitir_nombre">
+                      <h4>Emitir a nombre:</h4>
+                      <div class="field">{{ emitir_nombre }}</div>
+                    </div>
+
                     <div class="col-sm-6">
                       <h4>Fecha de vencimiento:</h4>
                       <div class="field">{{ fecha_vencimiento }}</div>

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

@@ -70,6 +70,12 @@ export class PaymentRequirementComponent implements OnInit {
   investmentProposalForm: FormGroup;
   submitted: boolean = false;
   paymentObject: Object;
+  userListPrevious: any;
+  generated_inputs_previous: string;
+  userListNext: any;
+  generated_inputs_next: string;
+  cuenta_bancaria_destino: any;
+  emitir_nombre: any;
 
   constructor(
     private http: HttpClient,
@@ -95,6 +101,28 @@ export class PaymentRequirementComponent implements OnInit {
     if (this.investmentProposalID == undefined)
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
+    this.investmentService
+      .getAvailableUsers(this.investmentProposalID)
+      .subscribe(res => {
+        console.log(res);
+        this.userListPrevious = res["usuarios_previous"];
+        this.generated_inputs_previous = "";
+
+        this.userListNext = res["usuarios_next"];
+        this.generated_inputs_next = "";
+
+        if (this.userListPrevious.length > 0) {
+          for (let i = 0; i < this.userListPrevious.length; i++) {
+            this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i]}' name='users' value='${this.userListPrevious[i]}'><label class='form-check-label' for='previous-${this.userListPrevious[i]}'>${this.userListPrevious[i]}</label></div>`;
+          }
+        }
+        if (this.userListNext.length > 0) {
+          for (let i = 0; i < this.userListNext.length; i++) {
+            this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+          }
+        }
+      });
+
     this.investmentService
       .getPaymentInfoProposalInvestment(this.investmentProposalID)
       .subscribe(resp => {
@@ -104,6 +132,15 @@ export class PaymentRequirementComponent implements OnInit {
         this.codigo = resp["result"]["codigo"];
         this.tipo_pago = resp["result"]["id_tipo_pago"]["nombre"];
         this.cuenta_bancaria = resp["result"]["id_cuenta_bancaria"]["nombre"];
+
+        if (resp["result"]["id_cuenta_bancaria_destino"] != undefined) {
+          this.cuenta_bancaria_destino =
+            resp["result"]["id_cuenta_bancaria_destino"]["nombre"];
+        }
+        if (resp["result"]["emitir_nombre"] != undefined) {
+          this.emitir_nombre = resp["result"]["emitir_nombre"];
+        }
+
         this.fecha_vencimiento = resp["result"]["fecha_vencimiento"];
       });
 
@@ -138,7 +175,93 @@ export class PaymentRequirementComponent implements OnInit {
 
   onSubmit(form: any) {
     this.submitted = true;
-    console.log(form);
+    if (!form.valid) {
+      return false;
+    }
+
+    (async () => {
+      Swal.fire({
+        title: `<h3>Enviar información de pago</h3>`,
+        icon: "info",
+
+        html: `<div>Notificar a:</div>${this.generated_inputs_next}`,
+        confirmButtonText: "Enviar requisición",
+        showCancelButton: true,
+        cancelButtonText: "Cancelar",
+        showLoaderOnConfirm: true,
+
+        preConfirm: () => {
+          let array = [];
+
+          for (let i = 0; i < this.userListNext.length; i++) {
+            let html_input: HTMLInputElement = document.getElementById(
+              "next-" + this.userListNext[i]
+            ) as HTMLInputElement;
+            let html_value: string = html_input.value;
+            if (html_input.checked == true) {
+              array.push(html_value);
+            }
+          }
+          const formData = new FormData();
+          formData.append("id_inversion", this.investmentProposalID);
+          formData.append("evidencia", this.fileData);
+          formData.append("step", "next");
+          formData.append("comentario", form.value.comentario);
+          formData.append("notificar", array.toString());
+
+          this.paymentObject = {
+            fecha_pago: form.value.fecha_pago.singleDate.formatted,
+            id_inversion: this.investmentProposalID
+            //comentario:
+          };
+
+          this.investmentsService
+            .updatePaymentInfoProposalInvestment(
+              this.investmentProposalID,
+              this.paymentObject
+            )
+            .subscribe(
+              success => {
+                this.investmentService
+                  .sendProposalInvestmentToNextStep(formData)
+                  .subscribe(
+                    success => {
+                      if (success) {
+                        Swal.fire({
+                          allowOutsideClick: false,
+                          icon: "success",
+                          showCancelButton: false,
+                          title: "Exito",
+                          confirmButtonText: "La propuesta ha sido liquidada"
+                        }).then(result => {
+                          Swal.close();
+                          window.location.href = "#/investment-proposals";
+                        });
+                      }
+                    },
+                    err => {
+                      Swal.fire({
+                        icon: "error",
+                        title: "Error en el servidor",
+                        text: err.message
+                      });
+                    }
+                  );
+              },
+              err => {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error en el servidor",
+                  text: err.message
+                });
+              }
+            );
+        }
+      });
+    })();
+
+    /*
+    this.submitted = true;
     if (!form.valid) {
       return false;
     }
@@ -202,6 +325,8 @@ export class PaymentRequirementComponent implements OnInit {
             text: err.message
           });
         }
-      );
+      );*/
   }
+
+  sendPaymentInfo(form: any) {}
 }

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

@@ -41,11 +41,20 @@
                     <div class="timeline-panel">
                       <div class="timeline-heading">
                         <span class="badge badge-success"
-                          >Información general</span
+                          ><h4>Información general</h4></span
                         >
                       </div>
                       <div class="timeline-body">
                         <div class="row">
+                          <div class="col-12">
+                            <div class="field">
+                              <h3>Empresa:</h3>
+                              {{ companies }}
+                              <br />
+                              <br />
+                            </div>
+                          </div>
+
                           <div class="col-lg-3 col-md-4 col-sm-6">
                             <h4>Asunto:</h4>
                             <div class="field">
@@ -112,12 +121,7 @@
                               {{ emitters }}
                             </div>
                           </div>
-                          <div class="col-lg-3 col-md-4 col-sm-6">
-                            <h4>Empresa:</h4>
-                            <div class="field">
-                              {{ companies }}
-                            </div>
-                          </div>
+
                           <div class="col-lg-3 col-md-4 col-sm-6">
                             <h4>País:</h4>
                             <div class="field">
@@ -158,7 +162,127 @@
                       <div class="timeline-heading">
                         <span class="badge badge-warning">Instrumento</span>
                       </div>
-                      <ng-template instrument-host></ng-template>
+                      <div class="timeline-body">
+                        <ng-template instrument-host></ng-template>
+                      </div>
+                    </div>
+                  </li>
+
+                  <li class="timeline-inverted" *ngIf="paymentExists">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                      <div class="timeline-heading">
+                        <span class="badge badge-danger"
+                          >Información del pago</span
+                        >
+                      </div>
+                      <div class="timeline-body">
+                        <div class="row">
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Monto:</h4>
+                            <div class="field">
+                              $USD {{ monto | number: "1.2-4" }}
+                            </div>
+                          </div>
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Código:</h4>
+                            <div class="field">{{ codigo }}</div>
+                          </div>
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Tipo pago:</h4>
+                            <div class="field">{{ tipo_pago }}</div>
+                          </div>
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Cuenta bancaria:</h4>
+                            <div class="field">{{ cuenta_bancaria }}</div>
+                          </div>
+
+                          <div
+                            class="col-lg-3 col-md-4 col-sm-6"
+                            *ngIf="cuenta_bancaria_destino"
+                          >
+                            <h4>Cuenta bancaria destino:</h4>
+                            <div class="field">
+                              {{ cuenta_bancaria_destino }}
+                            </div>
+                          </div>
+
+                          <div
+                            class="col-lg-3 col-md-4 col-sm-6"
+                            *ngIf="emitir_nombre"
+                          >
+                            <h4>Emitir a nombre:</h4>
+                            <div class="field">{{ emitir_nombre }}</div>
+                          </div>
+
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Fecha de vencimiento:</h4>
+                            <div class="field">{{ fecha_vencimiento }}</div>
+                          </div>
+
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Fecha de pago:</h4>
+                            <div class="field">{{ fecha_vencimiento }}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+
+                  <li class="timeline-inverted">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                      <div class="timeline-heading">
+                        <span class="badge badge-primary"
+                          >Historico de cambios</span
+                        >
+                      </div>
+                      <div class="timeline-body">
+                        <ul class="list-unstyled">
+                          <li *ngFor="let item of logs; let i = index">
+                            <div
+                              *ngIf="i < 3"
+                              [ngClass]="
+                                i % 2 == 0 ? 'log secondary-bg' : 'log info-bg'
+                              "
+                            >
+                              <div class="media">
+                                <div class="user-icon">
+                                  <i class="material-icons">
+                                    person
+                                  </i>
+                                </div>
+                                <div class="media-body">
+                                  <h6 class="mt-0 ">
+                                    {{ item.created_by }}
+                                    <div class="float-right">
+                                      {{ item.created_date }}
+                                    </div>
+                                  </h6>
+                                  <p class="mt-10">
+                                    Estado: {{ item.estado_final }}
+                                  </p>
+                                  <p>Comentario: {{ item.comentario }}</p>
+                                </div>
+                              </div>
+                              <div class="divider mt-15"></div>
+                            </div>
+                          </li>
+                        </ul>
+
+                        <a
+                          title="Historico"
+                          class="btn btn-primary btn-custom-small"
+                          [routerLink]="[
+                            '/investment-proposal',
+                            investmentProposalID,
+                            'change-history'
+                          ]"
+                          target="_blank"
+                        >
+                          <i class="fas fa-history"></i> Ver histórico completo
+                        </a>
+                      </div>
                     </div>
                   </li>
                 </ul>

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

@@ -4,3 +4,35 @@
     margin: 0 20px;
   }
 }
+
+.user-icon {
+  width: 40px;
+  height: 40px;
+  border: 1px solid #666;
+  line-height: 50px;
+  text-align: center;
+  margin-right: 10px;
+  color: inherit;
+}
+
+.info-bg {
+  background: #a9daf2;
+}
+
+.secondary-bg {
+  background: #ddd;
+}
+
+.list-unstyled {
+  li {
+    margin: 0;
+  }
+}
+
+.log {
+  padding: 10px;
+  margin-bottom: 10px;
+  p {
+    margin-bottom: 5px;
+  }
+}

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

@@ -62,6 +62,18 @@ export class InvestmentProposalDetailComponent implements OnInit {
   investmentName: any;
   comment: any;
   justification: any;
+  logs: any;
+  logsExists: boolean = false;
+  paymentExists: boolean = false;
+  monto: any;
+  codigo_inversion: any;
+  codigo: any;
+  tipo_pago: any;
+  cuenta_bancaria: any;
+  fecha_vencimiento: any;
+  fecha_pago: any;
+  cuenta_bancaria_destino: any;
+  emitir_nombre: any;
 
   constructor(
     private router: Router,
@@ -118,6 +130,7 @@ export class InvestmentProposalDetailComponent implements OnInit {
               res["result"]["id_tipo_base"] == null
                 ? ""
                 : res["result"]["id_tipo_base"]["id_tipo_base"],
+
             casa:
               res["result"]["id_entidad"] == null
                 ? ""
@@ -174,7 +187,6 @@ export class InvestmentProposalDetailComponent implements OnInit {
           this.instrument = this.formDataService.getWork();
           this.complement = this.formDataService.getComplementInfo();
           this.formData = this.formDataService.getFormData();
-
           this.formData.instrumentos;
 
           this.indexDynamicComponent = this.ads.findIndex(
@@ -188,8 +200,8 @@ export class InvestmentProposalDetailComponent implements OnInit {
           if (this.general != undefined) {
             this.subject = this.general.asunto;
             this.investmentName = this.general.name;
-            this.comment = this.complement.comment;
-            this.justification = this.complement.comment;
+            this.comment = this.complement.comentarios;
+            this.justification = this.complement.justificacion;
 
             this.catalogService.getFinancialEntities().subscribe(res => {
               this.financials = res.find(
@@ -205,7 +217,7 @@ export class InvestmentProposalDetailComponent implements OnInit {
               );
               this.base_types =
                 this.base_types != undefined
-                  ? ` ${this.base_types.tipo_base} / ${this.base_types.tipo_base_dias}`
+                  ? `${this.base_types.tipo_base_dias}  / ${this.base_types.tipo_base}`
                   : "-";
             });
 
@@ -302,7 +314,44 @@ export class InvestmentProposalDetailComponent implements OnInit {
                   : "-";
             });
           }
+
+          if (
+            this.state == "COMPR" ||
+            this.state == "PGAPR" ||
+            this.state == "LIQUI" ||
+            this.state == "FINAL"
+          )
+            this.investmentService
+              .getPaymentInfoProposalInvestment(this.investmentProposalID)
+              .subscribe(resp => {
+                this.paymentExists = true;
+                this.monto = resp["result"]["monto"];
+                this.codigo = resp["result"]["codigo"];
+                this.tipo_pago = resp["result"]["id_tipo_pago"]["nombre"];
+                this.cuenta_bancaria =
+                  resp["result"]["id_cuenta_bancaria"]["nombre"];
+                this.fecha_vencimiento = resp["result"]["fecha_vencimiento"];
+                this.fecha_pago = resp["result"]["fecha_pago"] || "";
+                if (resp["result"]["id_cuenta_bancaria_destino"] != null) {
+                  this.cuenta_bancaria_destino =
+                    resp["result"]["id_cuenta_bancaria_destino"]["nombre"];
+                }
+                if (resp["result"]["emitir_nombre"] != null) {
+                  this.emitir_nombre = resp["result"]["emitir_nombre"];
+                }
+              });
         });
+
+      this.investmentService
+        .getInvestmentProposalLogs(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.logs = res["result"];
+            this.logsExists = true;
+            console.log(this.logs);
+          },
+          error => {}
+        );
     } else {
       this.investmentExists = false;
     }

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

@@ -63,6 +63,8 @@ export class ResultComponent implements OnInit {
   userRole: any;
   state: string = "";
   submitted: boolean = false;
+  userList: any;
+  test: any;
 
   constructor(
     private router: Router,
@@ -118,7 +120,7 @@ export class ResultComponent implements OnInit {
     this.general = this.formDataService.getGeneralInfo();
     this.instrument = this.formDataService.getWork();
     this.complement = this.formDataService.getComplementInfo();
-
+    console.log(this.instrument);
     this.catalogService.getFinancialEntities().subscribe(res => {
       this.financials = res.find(
         e => e.id_entidad_financiera == this.general.casa
@@ -133,7 +135,7 @@ export class ResultComponent implements OnInit {
       );
       this.base_types =
         this.base_types != undefined
-          ? ` ${this.base_types.tipo_base} / ${this.base_types.tipo_base_dias}`
+          ? `${this.base_types.tipo_base_dias}  / ${this.base_types.tipo_base}`
           : "-";
     });
 
@@ -243,6 +245,10 @@ export class ResultComponent implements OnInit {
       (this.inversion["codigo_instrumento"] == "CETE" ||
         this.inversion["codigo_instrumento"] == "DAP" ||
         this.inversion["codigo_instrumento"] == "VCN" ||
+        this.inversion["codigo_instrumento"] == "BONO" ||
+        this.inversion["codigo_instrumento"] == "TIT" ||
+        this.inversion["codigo_instrumento"] == "EURB" ||
+        this.inversion["codigo_instrumento"] == "CINV" ||
         this.inversion["codigo_instrumento"] == "PBUR") &&
       (this.instrument["proyecciones"] != undefined ||
         this.instrument["proyecciones"] != "")
@@ -305,53 +311,97 @@ export class ResultComponent implements OnInit {
 
   //Enviar a revision la propuesta de inversion
   sendToReview() {
+    this.investmentService
+      .getAvailableUsers(this.investmentProposalID)
+      .subscribe(res => {
+        this.userList = res["usuarios_next"];
+        this.test = "<div>Notificar a:</div>";
+
+        if (this.userList.length > 0) {
+          for (let i = 0; i < this.userList.length; i++) {
+            this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='${this.userList[i]}' name='users' value='${this.userList[i]}'><label class='form-check-label' for='${this.userList[i]}'>${this.userList[i]}</label></div>`;
+          }
+        }
+      });
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
-        title: "<h3>Enviar a revisión propuesta de inversión</h3>",
+      Swal.fire({
+        title: `<h3>Enviar a revisión propuesta de inversión</h3>`,
         icon: "info",
         html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
         showCancelButton: true,
         confirmButtonText: "Enviar propuesta",
         cancelButtonText: "Cancelar",
-        // inputValidator: value => {
-        //   if (!value) {
-        //     return "Debe ingresar un comentario";
-        //   }
-        // }
+        showLoaderOnConfirm: true,
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
+
         preConfirm: comentario => {
           this.reviewProposal = {
             id_inversion: this.investmentProposalID,
             step: "next",
             comentario: comentario
           };
-
-          this.investmentService
-            .sendReviewProposalInvestment(this.reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        Swal.fire({
+          title: `<h3>Enviar a revisión propuesta de inversión</h3>`,
+          icon: "info",
+          html: `${this.test}`,
+          confirmButtonText: "Siguiente",
+          showCancelButton: true,
+          cancelButtonText: "Cancelar",
+          showLoaderOnConfirm: true,
+
+          preConfirm: () => {
+            let array = [];
+
+            for (let i = 0; i < this.userList.length; i++) {
+              let html_input: HTMLInputElement = document.getElementById(
+                this.userList[i]
+              ) as HTMLInputElement;
+              let html_value: string = html_input.value;
+              if (html_input.checked == true) {
+                array.push(html_value);
+              }
+            }
+
+            this.reviewProposal["notificar"] = array.toString();
+
+            this.investmentService
+              .sendReviewProposalInvestment(this.reviewProposal)
+              .subscribe(
+                success => {
+                  if (success) {
+                    Swal.fire({
+                      allowOutsideClick: false,
+                      icon: "success",
+                      showCancelButton: false,
+                      title: "Exito",
+                      confirmButtonText:
+                        "La propuesta ha sido enviada a revisión"
+                    }).then(result => {
+                      Swal.close();
+                      window.location.reload();
+                    });
+                  }
+                },
+                err => {
                   Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido enviada a revisión"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.href = "#/investment-proposals";
+                    icon: "error",
+                    title: "Error al guardar",
+                    text: err.message
                   });
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
-              }
-            );
-        }
+              );
+          }
+        });
+        //window.location.reload();
       });
     })();
   }
@@ -404,53 +454,94 @@ export class ResultComponent implements OnInit {
 
   //Enviar a revision la propuesta de inversion
   finishProposal() {
+    this.investmentService
+      .getAvailableUsers(this.investmentProposalID)
+      .subscribe(res => {
+        this.userList = res["usuarios_next"];
+        this.test = "<div>Notificar a:</div>";
+
+        if (this.userList.length > 0) {
+          for (let i = 0; i < this.userList.length; i++) {
+            this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='${this.userList[i]}' name='users' value='${this.userList[i]}'><label class='form-check-label' for='${this.userList[i]}'>${this.userList[i]}</label></div>`;
+          }
+        }
+      });
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
-        title: "<h3>Finalizar propuesta de inversión</h3>",
+      Swal.fire({
+        title: `<h3>Finalizar propuesta de inversión:</h3>`,
         icon: "info",
-        html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
+        html: `<p style="text-align:left;">Comentario:</p>`,
         showCancelButton: true,
-        confirmButtonText: "Finalizar",
+        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
-        // inputValidator: value => {
-        //   if (!value) {
-        //     return "Debe ingresar un comentario";
-        //   }
-        // }
+        inputValidator: value => {
+          if (!value) {
+            return "Debe ingresar un comentario";
+          }
+        },
         preConfirm: comentario => {
           this.reviewProposal = {
             id_inversion: this.investmentProposalID,
             step: "next",
             comentario: comentario
           };
-
-          this.investmentService
-            .sendReviewProposalInvestment(this.reviewProposal)
-            .subscribe(
-              success => {
-                if (success) {
+        },
+        allowOutsideClick: () => !Swal.isLoading()
+      }).then(result => {
+        Swal.fire({
+          title: `<h3>Finalizar propuesta de inversión</h3>`,
+          icon: "info",
+          html: `${this.test}`,
+          confirmButtonText: "Enviar a revision",
+          showCancelButton: true,
+          cancelButtonText: "Cancelar",
+          showLoaderOnConfirm: true,
+
+          preConfirm: () => {
+            let array = [];
+
+            for (let i = 0; i < this.userList.length; i++) {
+              let html_input: HTMLInputElement = document.getElementById(
+                this.userList[i]
+              ) as HTMLInputElement;
+              let html_value: string = html_input.value;
+              if (html_input.checked == true) {
+                array.push(html_value);
+              }
+            }
+
+            this.reviewProposal["notificar"] = array.toString();
+
+            this.investmentService
+              .sendReviewProposalInvestment(this.reviewProposal)
+              .subscribe(
+                success => {
+                  if (success) {
+                    Swal.fire({
+                      allowOutsideClick: false,
+                      icon: "success",
+                      showCancelButton: false,
+                      title: "Exito",
+                      confirmButtonText: "La propuesta ha sido finalizada"
+                    }).then(result => {
+                      Swal.close();
+                      window.location.reload();
+                    });
+                  }
+                },
+                err => {
                   Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido finalizada"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.href = "#/investment-proposals";
+                    icon: "error",
+                    title: "Error al guardar",
+                    text: err.message
                   });
                 }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error al guardar",
-                  text: err.message
-                });
-              }
-            );
-        }
+              );
+          }
+        });
+        //window.location.reload();
       });
     })();
   }
@@ -458,7 +549,7 @@ export class ResultComponent implements OnInit {
   // Verifica permisos para mostrar boton de edicion y/o envio a revision,
   // segun los permisos del usuario y el estado de la propuesta
   can_send_to_review(status: string) {
-    if (status == "NUEVA" && (this.userRole.length == 0 || this.userRole)) {
+    if (status == "NUEVA" || status == "RECHA") {
       // TO DO ver que el codigo de los tipos de usuario
       return true;
     } else {
@@ -467,7 +558,7 @@ export class ResultComponent implements OnInit {
   }
 
   can_finish_proposal(status: string) {
-    if (status == "LIQUI" && (this.userRole.length == 0 || this.userRole)) {
+    if (status == "LIQUI") {
       // TO DO ver que el codigo de los tipos de usuario
       return true;
     } else {

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

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

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

@@ -0,0 +1,287 @@
+<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
+                </a>
+              </li>
+              <li class="breadcrumb-item">Depósito a plazo</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 costos para el deposito
+              </h4>
+              <br />
+              <div class="align-container">
+                <div>
+                  <div class="costs-summary">
+                    <div class="row">
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Monto inversión:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.monto_inversion | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Plazo en días:</h4>
+                        <div class="field">
+                          {{ instrument_work.plazo }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Tasa porcentaje:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.tasa_porcentaje | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Renta porcentaje:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.renta_porcentaje | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Renta:</h4>
+                        <div class="field">
+                          $USD {{ instrument_work.renta | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Ingreso bruto:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.ingreso_bruto | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Ingreso neto:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.ingreso_neto | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento bruto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_bruto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento neto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_neto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de 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 vencimiento:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_vencimiento }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha inicio de vigencia:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_inicio_vigencia }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Número de certificado:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.numero_certificado == undefined ||
+                            instrument_work.numero_certifcado == ""
+                              ? "-"
+                              : instrument_work.numero_certificado
+                          }}
+                        </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"
+                              />
+                            </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"
+                              />
+                            </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"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="renta">Renta: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="renta"
+                                class="form-control"
+                              />
+                            </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"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <input
+                        type="hidden"
+                        formControlName="id_deposito_plazo"
+                      />
+                      <div class="clear"></div>
+                    </div>
+                  </div>
+                  <br />
+                  <!--
+                  <div class="form-group text-right space-20">
+                    <button
+                      type="submit"
+                      class="btn btn-primary"
+                      (click)="submitProjectionChanges()"
+                    >
+                      Guardar información de proyecciones
+                    </button>
+                  </div>-->
+                  <br />
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,297 @@
+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 { 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-dap-costs",
+  templateUrl: "./dap.costs.component.html"
+  //styleUrls: ["./dap.costs.component.scss"]
+})
+export class DAPCostsComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Costos para depósito a plazo";
+
+  displayedColumns: string[] = [
+    "codigo_inversion",
+    "asunto",
+    "id_tipo_mercado",
+    "id_inversion_instrumento",
+    "id"
+  ];
+  //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 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.investmentProposalForm = this.formBuilder.group({
+              monto_inversion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.monto_inversion,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+
+              renta_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.renta_porcentaje,
+                [Validators.required]
+              ],
+              tasa_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.tasa_porcentaje,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              plazo: [
+                !this.instrument_exists ? "" : this.instrument_work.plazo,
+                [Validators.required]
+              ],
+
+              /*formato_ingreso: [
+                !this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
+                [Validators.required]
+              ],*/
+
+              fecha_vencimiento: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_vencimiento,
+                Validators.required
+              ],
+              fecha_operacion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_operacion,
+                Validators.required
+              ]
+            });
+          },
+          err => {}
+        );
+
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.proyecciones =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "proyecciones"
+              ];
+
+            this.form = new FormArray(this.buildForm(this.proyecciones));
+            this.dataRetrieved = true;
+
+            this.dataRetrieved = true;
+          },
+          err => {
+            Swal.fire({
+              icon: "error",
+              title: "Error en el servidor",
+              text: err.message
+            });
+          }
+        );
+    }
+
+    setTimeout(() => {
+      Swal.close();
+    }, 1200);
+  }
+
+  submitInstrumentChanges() {}
+
+  submitProjectionChanges() {
+    let objProjection = { proyecciones: this.form.value };
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.investmentsService
+      .updateInstrumentProjection(this.investmentProposalID, objProjection)
+      .subscribe(
+        success => {
+          if (success) {
+            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),
+      renta: new FormControl(item.renta),
+      ingreso_neto: new FormControl(item.ingreso_neto),
+      id_deposito_plazo: new FormControl(item.id_deposito_plazo)
+    });
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue;
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  view_investment_proposal(id: string) {
+    this.formInvestmentProposal.resetFormData();
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    setTimeout(() => {
+      this.router.navigate([`/investment-proposal/${id}`]);
+    }, 1000);
+  }
+
+  modify_investment_proposal(id: string) {
+    this.formInvestmentProposal.resetFormData();
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    setTimeout(() => {
+      this.router.navigate(["/investment-proposal/general-info"], {
+        queryParams: { id: id }
+      });
+    }, 1000);
+  }
+
+  // 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) {
+    if (status == "NUEVA" && (this.userRole.length == 0 || this.userRole)) {
+      // TO DO ver que el codigo de los tipos de usuario
+      return true;
+    } else {
+      return false;
+    }
+  }
+}

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

@@ -0,0 +1,394 @@
+<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">Papel bursátil</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 costos para papel bursátil
+              </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>Valor par:</h4>
+                        <div class="field">
+                          {{ instrument_work.valor_par == true ? "Si" : "No" }}
+                        </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>Precio porcentaje:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.precio_porcentaje | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Plazo en días:</h4>
+                        <div class="field">
+                          {{ instrument_work.plazo }}
+                        </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">
+                        <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">
+                        <h4>Rendimiento bruto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_bruto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento neto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_neto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Interés acumulado:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.interes_acumulado | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Total a pagar:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.total_pagar | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de 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 de 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 class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Ultima fecha de cupón:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_ultima_cupon }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha inicio de vigencia:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_inicio_vigencia }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </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="costo_cedeval">Costo cedeval: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="costo_cedeval"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="costo_transferencia"
+                            >Costo transferencia:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="costo_transferencia"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="costo_banco">Costo banco: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="costo_banco"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="otros_costos">Otros costos: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="otros_costos"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="renta">Renta: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="renta"
+                                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>
+
+                      <input
+                        type="hidden"
+                        formControlName="id_valor_comercial"
+                      />
+                      <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/pbur/pbur.costs.component.ts

@@ -0,0 +1,321 @@
+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-pbur-costs",
+  templateUrl: "./pbur.costs.component.html"
+  //styleUrls: ["./dap.costs.component.scss"]
+})
+export class PBURCostsComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Costos para papel bursátil";
+
+  displayedColumns: string[] = [
+    "codigo_inversion",
+    "asunto",
+    "id_tipo_mercado",
+    "id_inversion_instrumento",
+    "id"
+  ];
+  //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.investmentProposalForm = this.formBuilder.group({
+              valor_par: [
+                !this.instrument_exists ? false : this.instrument_work.valor_par
+              ],
+              valor_nominal: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.valor_nominal,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              otros_costos: [
+                !this.instrument_exists ? 0 : this.instrument_work.otros_costos,
+                [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
+              ],
+              plazo: [
+                !this.instrument_exists ? "" : this.instrument_work.plazo,
+                [Validators.required]
+              ],
+              renta_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.renta_porcentaje,
+                [Validators.required]
+              ],
+              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]+)$/)
+                ]
+              ],
+              rendimiento_bruto: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.rendimiento_bruto,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              /*formato_ingreso: [
+                !this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
+                [Validators.required]
+              ],*/
+              fecha_liquidacion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_liquidacion,
+
+                [Validators.required]
+              ],
+              fecha_vencimiento: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_vencimiento,
+
+                [Validators.required]
+              ],
+              fecha_operacion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_operacion,
+
+                [Validators.required]
+              ],
+              fecha_ultima_cupon: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_ultima_cupon,
+
+                [Validators.required]
+              ]
+            });
+          },
+          err => {}
+        );
+
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.proyecciones =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "proyecciones"
+              ];
+
+            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();
+
+    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.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),
+      costo_cedeval: new FormControl(item.costo_cedeval),
+      costo_transferencia: new FormControl(item.costo_transferencia),
+      costo_banco: new FormControl(item.costo_banco),
+      otros_costos: new FormControl(item.otros_costos),
+      renta: new FormControl(item.renta),
+      ingreso_neto: new FormControl(item.ingreso_neto),
+      id_valor_comercial: new FormControl(item.id_valor_comercial)
+    });
+  }
+}

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

@@ -0,0 +1,394 @@
+<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">Valores comerciales negociables</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 costos para el valor comercial
+              </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>Valor par:</h4>
+                        <div class="field">
+                          {{ instrument_work.valor_par == true ? "Si" : "No" }}
+                        </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>Precio porcentaje:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.precio_porcentaje | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Plazo en días:</h4>
+                        <div class="field">
+                          {{ instrument_work.plazo }}
+                        </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">
+                        <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">
+                        <h4>Rendimiento bruto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_bruto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento neto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_neto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Interés acumulado:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.interes_acumulado | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Total a pagar:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.total_pagar | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de 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 de 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 class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Ultima fecha de cupón:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_ultima_cupon }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha inicio de vigencia:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_inicio_vigencia }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </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="costo_cedeval">Costo cedeval: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="costo_cedeval"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="costo_transferencia"
+                            >Costo transferencia:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="costo_transferencia"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="costo_banco">Costo banco: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="costo_banco"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="otros_costos">Otros costos: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="otros_costos"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="renta">Renta: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="renta"
+                                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>
+
+                      <input
+                        type="hidden"
+                        formControlName="id_valor_comercial"
+                      />
+                      <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/vcn/vcn.costs.component.ts

@@ -0,0 +1,322 @@
+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-vcn-costs",
+  templateUrl: "./vcn.costs.component.html"
+  //styleUrls: ["./dap.costs.component.scss"]
+})
+export class VCNCostsComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Costos para valores comerciales";
+
+  displayedColumns: string[] = [
+    "codigo_inversion",
+    "asunto",
+    "id_tipo_mercado",
+    "id_inversion_instrumento",
+    "id"
+  ];
+  //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.investmentProposalForm = this.formBuilder.group({
+              valor_par: [
+                !this.instrument_exists ? false : this.instrument_work.valor_par
+              ],
+              valor_nominal: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.valor_nominal,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              otros_costos: [
+                !this.instrument_exists ? 0 : this.instrument_work.otros_costos,
+                [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
+              ],
+              plazo: [
+                !this.instrument_exists ? "" : this.instrument_work.plazo,
+                [Validators.required]
+              ],
+              renta_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.renta_porcentaje,
+                [Validators.required]
+              ],
+              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]+)$/)
+                ]
+              ],
+              rendimiento_bruto: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.rendimiento_bruto,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              /*formato_ingreso: [
+                !this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
+                [Validators.required]
+              ],*/
+              fecha_liquidacion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_liquidacion,
+
+                [Validators.required]
+              ],
+              fecha_vencimiento: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_vencimiento,
+
+                [Validators.required]
+              ],
+              fecha_operacion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_operacion,
+
+                [Validators.required]
+              ],
+              fecha_ultima_cupon: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_ultima_cupon,
+
+                [Validators.required]
+              ]
+            });
+          },
+          err => {}
+        );
+
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.proyecciones =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "proyecciones"
+              ];
+
+            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();
+
+    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.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),
+      costo_cedeval: new FormControl(item.costo_cedeval),
+      costo_transferencia: new FormControl(item.costo_transferencia),
+      costo_banco: new FormControl(item.costo_banco),
+      otros_costos: new FormControl(item.otros_costos),
+      renta: new FormControl(item.renta),
+      ingreso_neto: new FormControl(item.ingreso_neto),
+      id_valor_comercial: new FormControl(item.id_valor_comercial)
+    });
+  }
+}

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

@@ -31,39 +31,51 @@
           </div>
           <br />
           <div class="example-container mat-elevation-z8">
-            <div class="example-table-container">
-              <table mat-table [dataSource]="dataSource" class="example-table">
+            <div class="example-table-container table-responsive">
+              <table
+                mat-table
+                [dataSource]="dataSource"
+                matSort
+                class="example-table"
+              >
                 <!-- Name Column -->
                 <ng-container matColumnDef="codigo_inversion">
-                  <th mat-header-cell *matHeaderCellDef>Codigo</th>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Codigo
+                  </th>
                   <td mat-cell *matCellDef="let row">
                     {{ row.codigo_inversion }}
                   </td>
                 </ng-container>
                 <!-- Country Column -->
                 <ng-container matColumnDef="asunto">
-                  <th mat-header-cell *matHeaderCellDef>Asunto</th>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Asunto
+                  </th>
                   <td mat-cell *matCellDef="let row">
                     {{ row.asunto }}
                   </td>
                 </ng-container>
 
                 <!-- Country Column -->
-                <ng-container matColumnDef="id_tipo_mercado">
-                  <th mat-header-cell *matHeaderCellDef>Tipo de mercado</th>
+                <ng-container matColumnDef="id_empresa">
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Empresa
+                  </th>
                   <td mat-cell *matCellDef="let row">
                     {{
-                      row.id_tipo_mercado == "" ||
-                      row.id_tipo_mercado == undefined
+                      row.id_empresa == "" || row.id_empresa == undefined
                         ? "-"
-                        : row.id_tipo_mercado.nombre
+                        : row.id_empresa.nombre
                     }}
                   </td>
                 </ng-container>
 
                 <!-- Country Column -->
                 <ng-container matColumnDef="id_inversion_instrumento">
-                  <th mat-header-cell *matHeaderCellDef>Instrumento</th>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Instrumento
+                  </th>
                   <td mat-cell *matCellDef="let row">
                     {{
                       row.id_inversion_instrumento.id_tipo_instrumento == "" ||
@@ -89,16 +101,22 @@
                         <i class="fas fa-info"></i>
                       </a>
                       <a
+                        title="Costos"
+                        class="btn btn-warning btn-custom-small"
                         *ngIf="
-                          can_modify_or_send_to_review(
-                            row.id_estado_inversion.codigo
+                          instrument_has_costs(row.id_inversion_instrumento)
+                        "
+                        (click)="
+                          go_to_instrument_url(
+                            row.id_inversion,
+                            row.id_inversion_instrumento.id_tipo_instrumento
+                              .codigo,
+                            'costs'
                           )
                         "
-                        title="Editar"
-                        class="btn btn-primary btn-custom-small"
-                        (click)="modify_investment_proposal(row.id_inversion)"
                       >
-                        <i class="fas fa-edit"></i>
+                        <i class="fas fa-funnel-dollar"></i>
+                        Costos
                       </a>
                     </div>
                   </td>

src/app/components/investments/investments.component.scss

@@ -1,10 +0,0 @@
-.action-buttons {
-  i {
-    font-size: 18px;
-  }
-}
-
-.btn-custom-small {
-  padding: 7px 12px 5px 13px;
-  margin: 0 4px;
-}

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

@@ -25,7 +25,7 @@ export class InvestmentsComponent implements OnInit {
   displayedColumns: string[] = [
     "codigo_inversion",
     "asunto",
-    "id_tipo_mercado",
+    "id_empresa",
     "id_inversion_instrumento",
     "id"
   ];
@@ -54,9 +54,6 @@ export class InvestmentsComponent implements OnInit {
       this.authService.getJwtToken()
     );
     this.userRole = decodedToken.groups;
-    //    console.log("User role");
-    //  console.log(this.userRole);
-    //console.log(this.userRole.length == 0);
 
     this.dataSource.filterPredicate = (data, filter) => {
       const dataStr =
@@ -83,12 +80,12 @@ export class InvestmentsComponent implements OnInit {
         this.listProposals = ans.result;
 
         this.listProposals = this.listProposals.filter(
-          proposals => proposals["id_estado_inversion"]["codigo"] == "FINAL"
+          proposals =>
+            proposals["id_estado_inversion"] != null &&
+            proposals["id_estado_inversion"]["codigo"] == "FINAL"
         );
 
-        console.log(this.listProposals);
         this.dataSource.data = this.listProposals;
-
         this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
       },
@@ -128,30 +125,33 @@ export class InvestmentsComponent implements OnInit {
     }, 1000);
   }
 
-  modify_investment_proposal(id: string) {
-    this.formInvestmentProposal.resetFormData();
+  instrument_has_costs(instrument: any) {
+    switch (instrument.id_tipo_instrumento.codigo) {
+      case "VCN":
+      case "PBUR":
+        if (instrument.id_inversion_instrumento.valor_par == true) {
+          return true;
+        } else {
+          return false;
+        }
+        break;
+      default:
+        return false;
+    }
+  }
 
+  go_to_instrument_url(id: string, code: string, route: string) {
     Swal.fire({
       allowOutsideClick: false,
       icon: "info",
       text: "Espere por favor..."
     });
     Swal.showLoading();
+
     setTimeout(() => {
-      this.router.navigate(["/investment-proposal/general-info"], {
-        queryParams: { id: id }
-      });
+      this.router.navigate([
+        `/investment-${route}/${code.toLowerCase()}/${id}`
+      ]);
     }, 1000);
   }
-
-  // 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) {
-    if (status == "NUEVA" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
-      return true;
-    } else {
-      return false;
-    }
-  }
 }

src/app/components/plugins/navbar-inv-proposals/navbar-inv-proposals.html

@@ -6,8 +6,8 @@
     <li>
       <a
         (click)="goToStep('general')"
-        title="general"
         [ngClass]="activeLink == 'general' ? 'active' : ''"
+        title="Información general"
       >
         <span class="round-tabs one">
           <i class="material-icons">post_add</i>
@@ -19,7 +19,7 @@
     <li>
       <a
         (click)="goToStep('instrument')"
-        title="instrument"
+        title="Instrumento"
         [ngClass]="activeLink == 'instrument' ? 'active' : ''"
       >
         <span class="round-tabs two">
@@ -33,7 +33,7 @@
       <a
         (click)="goToStep('other_info')"
         [ngClass]="activeLink == 'other_info' ? 'active' : ''"
-        title="address"
+        title="Información complementaria"
       >
         <span class="round-tabs three">
           <i class="material-icons">library_books</i>
@@ -46,7 +46,7 @@
       <a
         (click)="goToStep('result')"
         [ngClass]="activeLink == 'result' ? 'active' : ''"
-        title="completed"
+        title="Resumen de la propuesta"
       >
         <span class="round-tabs four">
           <i class="material-icons">check_box</i>

src/app/components/shared/sidebar/sidebar.component.spec.ts

@@ -39,7 +39,6 @@ describe("SidebarComponent", () => {
     let existe = false;
 
     for (const elem of elementos) {
-      console.log(elem.attributes);
       if (elem.attributes["ng-reflect-router-link"] === "/dashboard") {
         existe = true;
         break;

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

@@ -24,14 +24,20 @@ export const ROUTES: RouteInfo[] = [
     icon: "wb_incandescent",
     class: ""
     //allowed_roles: [2, 3]
-  }
-  /*,
+  },
   {
     path: "/investments",
     title: "Inversiones",
     icon: "work",
     class: ""
     //allowed_roles: [2, 3]
+  },
+  {
+    path: "/investment-incomes",
+    title: "Ingresos",
+    icon: "account_balance_wallet",
+    class: ""
+    //allowed_roles: [2, 3]
   }
   /*
   {

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

@@ -12,7 +12,7 @@ import { ProfileComponent } from "../../components/profile/profile.component";
 
 import { PluginsModule } from "../../components/plugins/plugins.module";
 
-import { MatDialogModule } from "@angular/material";
+import { MatDialogModule, MatPaginatorIntl } from "@angular/material";
 import { BrowserModule } from "@angular/platform-browser";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 
@@ -57,7 +57,7 @@ import { CETE } from "@app/components/instruments/cete/cete.component";
 import { VCN } from "@app/components/instruments/vcn/vcn.component";
 import { PBUR } from "@app/components/instruments/pbur/pbur.component";
 
-import { BonosComponent } from "@app/components/instruments/bonos/bonos.component";
+import { BONO } from "@app/components/instruments/bonos/bonos.component";
 import { DAP } from "@app/components/instruments/dap/dap.component";
 import { ANCComponent } from "@app/components/instruments/anc/anc.component";
 import { APNComponent } from "@app/components/instruments/apn/apn.component";
@@ -70,6 +70,18 @@ import { PaymentRequirementComponent } from "@app/components/investment-proposal
 import { PaymentInfoComponent } from "@app/components/investment-proposals/payment-info/payment-info.component";
 import { InvestmentProposalDetailComponent } from "@app/components/investment-proposals/proposal-detail/proposal-detail.component";
 import { InvestmentProposalApproveComponent } from "@app/components/investment-proposals/approve/approve.component";
+import { DAPCostsComponent } from "@app/components/investments/costs/dap/dap.costs.component";
+import { VCNCostsComponent } from "@app/components/investments/costs/vcn/vcn.costs.component";
+import { PBURCostsComponent } from "@app/components/investments/costs/pbur/pbur.costs.component";
+import { IncomesComponent } from "@app/components/incomes/incomes.component";
+
+import { GeneralIncomeFormComponent } from "@app/components/incomes/general-form/general-form.component";
+import { PaymentApprovalComponent } from "@app/components/investment-proposals/payment-approval/payment-approval.component";
+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";
 
 // This array defines which "componentId" maps to which lazy-loaded module.
 
@@ -98,6 +110,8 @@ import { InvestmentProposalApproveComponent } from "@app/components/investment-p
     WavesModule
   ],
   providers: [
+    { provide: MatPaginatorIntl, useClass: MatPaginatorIntlSpa },
+
     WorkflowGuard,
     {
       provide: FormInvestmentProposalService,
@@ -128,22 +142,36 @@ import { InvestmentProposalApproveComponent } from "@app/components/investment-p
     CETE,
     VCN,
     PBUR,
-    BonosComponent,
+    BONO,
     DAP,
+    TIT,
+    EURB,
+    CINV,
+    FINV,
     ANCComponent,
     APNComponent,
     InstrumentDirective,
     PaymentInfoComponent,
     PaymentRequirementComponent,
-    InvestmentProposalDetailComponent
+    InvestmentProposalDetailComponent,
+    DAPCostsComponent,
+    VCNCostsComponent,
+    PBURCostsComponent,
+    IncomesComponent,
+    GeneralIncomeFormComponent,
+    PaymentApprovalComponent
   ],
   entryComponents: [
     LETE,
     CETE,
     VCN,
     PBUR,
-    BonosComponent,
+    BONO,
     DAP,
+    TIT,
+    EURB,
+    CINV,
+    FINV,
     ANCComponent,
     APNComponent
   ]

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

@@ -25,6 +25,12 @@ import { InvestmentProposalDetailComponent } from "@app/components/investment-pr
 import { NgModule } from "@angular/core";
 import { from } from "rxjs";
 import { InvestmentProposalApproveComponent } from "@app/components/investment-proposals/approve/approve.component";
+import { DAPCostsComponent } from "@app/components/investments/costs/dap/dap.costs.component";
+import { VCNCostsComponent } from "@app/components/investments/costs/vcn/vcn.costs.component";
+import { PBURCostsComponent } from "@app/components/investments/costs/pbur/pbur.costs.component";
+import { IncomesComponent } from "@app/components/incomes/incomes.component";
+import { GeneralIncomeFormComponent } from "@app/components/incomes/general-form/general-form.component";
+import { PaymentApprovalComponent } from "@app/components/investment-proposals/payment-approval/payment-approval.component";
 
 export const AdminLayoutRoutes: Routes = [
   {
@@ -174,6 +180,10 @@ export const AdminLayoutRoutes: Routes = [
     path: "investment-proposal/:id/approve",
     component: InvestmentProposalApproveComponent
   },
+  {
+    path: "investment-proposal/:id/payment-approval",
+    component: PaymentApprovalComponent
+  },
   {
     path: "investment-proposal/:id/change-history",
     component: ChangeHistoryComponent
@@ -189,5 +199,39 @@ export const AdminLayoutRoutes: Routes = [
   {
     path: "investment-proposal/:id",
     component: InvestmentProposalDetailComponent
-  }
+  },
+  {
+    path: "investment-costs/dap/:id",
+    component: DAPCostsComponent
+  },
+  {
+    path: "investment-costs/vcn/:id",
+    component: VCNCostsComponent
+  },
+  {
+    path: "investment-costs/pbur/:id",
+    component: PBURCostsComponent
+  },
+  {
+    path: "investment-incomes",
+    component: IncomesComponent
+  },
+  {
+    path: "investment-income",
+    component: GeneralIncomeFormComponent
+  } /*
+  {
+    path: "investment-income/vcn/:id",
+    component: VCNIncomeComponent
+  },
+  {
+    path: "investment-income/pbur/:id",
+    component: PBURIncomeComponent
+  },
+
+  {
+    path: "investment-income/cete/:id",
+    component: CETEIncomeComponent
+  },
+*/
 ];

src/app/models/csv-data.ts

@@ -0,0 +1,3 @@
+export class CSVRecord {
+  public id: any;
+}

src/app/models/i18n-paginator.ts

@@ -0,0 +1,20 @@
+import { MatPaginatorIntl } from "@angular/material";
+export class MatPaginatorIntlSpa extends MatPaginatorIntl {
+  itemsPerPageLabel = "Registros por página";
+  nextPageLabel = "Siguiente";
+  previousPageLabel = "Anterior";
+
+  getRangeLabel = function(page, pageSize, length) {
+    if (length === 0 || pageSize === 0) {
+      return "0 de " + length;
+    }
+    length = Math.max(length, 0);
+    const startIndex = page * pageSize;
+    // If the start index exceeds the list length, do not try and fix the end index to the end.
+    const endIndex =
+      startIndex < length
+        ? Math.min(startIndex + pageSize, length)
+        : startIndex + pageSize;
+    return startIndex + 1 + " - " + endIndex + " de " + length;
+  };
+}

src/app/models/income-list.ts

@@ -0,0 +1,16 @@
+export interface IncomeList {
+  proyeccion_ingreso: number;
+  fecha_pago: string;
+  id_inversion: number;
+  codigo_inversion: string;
+  nombre_inversion: string;
+  empresa: string;
+  tipo_instrumento: string;
+  codigo_instrumento: string;
+  posicion: number;
+  capital: number;
+  ingreso_bruto: number;
+  renta: number;
+  ingreso_neto: number;
+  estado: string;
+}

src/app/services/incomes.service.ts

@@ -0,0 +1,142 @@
+import { Injectable } from "@angular/core";
+
+import { of as observableOf, Observable, throwError } from "rxjs";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { retry, catchError, map, timeout } from "rxjs/operators";
+
+import { environment } from "@environments/environment";
+
+@Injectable({
+  providedIn: "root"
+})
+export class IncomesService {
+  time: number = 6000;
+
+  constructor(private http: HttpClient) {}
+
+  // Obtener listado de propuestas de inversiones
+  getProjectionsIncomeList(active: string = "1", currentDate: string = "1") {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/proyecciones?activos=${active}&fecha_actual=${currentDate}`
+      )
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  // Obtener propuesta de inversion segun ID
+  searchProjectionsIncomeByInstrument(query: string) {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/proyecciones?instrumento=${query}`
+      )
+      .pipe(
+        timeout(this.time),
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  searchProjectionsIncomeByDate(
+    start_date: string,
+    end_date: string
+  ): Observable<boolean> {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/proyecciones?fecha_desde=${start_date}&fecha_hasta=${end_date}`
+      )
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  getProjection(
+    id_inversion: string,
+    id_proyeccion_ingreso_instrumento: string,
+    fecha_proyeccion_pago: string,
+    id_proyeccion_instrumento?: string
+  ): Observable<boolean> {
+    let url;
+    if (id_proyeccion_instrumento != undefined) {
+      url = `?id_inversion=${id_inversion}&id_proyeccion_ingreso_instrumento=${id_proyeccion_ingreso_instrumento}&fecha_proyeccion_pago=${fecha_proyeccion_pago}&id_proyeccion_ingreso=${id_proyeccion_instrumento}`;
+    } else {
+      url = `?id_inversion=${id_inversion}&id_proyeccion_ingreso_instrumento=${id_proyeccion_ingreso_instrumento}&fecha_proyeccion_pago=${fecha_proyeccion_pago}`;
+    }
+    return this.http
+      .get<any>(`${environment.productionApiUrl}/proyeccion${url}`)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  getProjectionIncome(instrument: string, id: string): Observable<boolean> {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/proyeccion/${instrument}/${id}`
+      )
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  createIncome(income: Object): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/ingreso`, income)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  conciliateIncome(income: Object): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/conciliacion`, income)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  updateProposalInvestment(id: string, inversion: Object): Observable<boolean> {
+    return this.http
+      .put<any>(`${environment.productionApiUrl}/inversion/${id}`, inversion)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  //if(error.error instanceof ErrorEvent) {
+  errorHandl(error) {
+    let errorMessage = "";
+    if (error.error) {
+      // Get client-side error
+      errorMessage = error.error;
+    } else {
+      // Get server-side error
+      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+    }
+    return throwError(errorMessage);
+  }
+}

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

@@ -44,9 +44,9 @@ export class InstrumentCalculations {
   ceteCalc(
     codigo_instrumento: string,
     info_inversion: {
-      id_tipo_base: string;
-      id_periodicidad: string;
-      id_formato_ingreso: string;
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
     },
     info_instrumento: {
       valor_nominal: number;
@@ -58,7 +58,52 @@ export class InstrumentCalculations {
       fecha_operacion: string;
       fecha_liquidacion: string;
       fecha_ultima_cupon: string;
-      fecha_vencimiento: string;
+      //fecha_vencimiento: 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 familia de bonos (bonos, eurobonos, certificados)
+  bonosCalc(
+    codigo_instrumento: string,
+    info_inversion: {
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
+    },
+    info_instrumento: {
+      costo_cedeval: number;
+      comision_casa_porcentaje_compra: number;
+      comision_bolsa_porcentaje_compra: number;
+      cupon_porcentaje_compra: number;
+      valor_nominal_compra: number;
+      costo_transferencia: number;
+      precio_vencimiento_compra: number;
+      precio_compra: number;
+      fecha_ultima_cupon_compra: string;
+      fecha_liquidacion_compra: string;
+      fecha_vencimiento_compra: string;
+      comision_casa_porcentaje_venta: number;
+      comision_bolsa_porcentaje_venta: number;
+      cupon_porcentaje_venta: number;
+      valor_nominal_venta: number;
+      precio_vencimiento_venta: number;
+      precio_venta: number;
+      fecha_ultima_cupon_venta: string;
+      fecha_liquidacion_venta: string;
+      fecha_vencimiento_venta: string;
     }
   ): Observable<boolean> {
     return this.http
@@ -74,13 +119,94 @@ export class InstrumentCalculations {
         catchError(this.errorHandl)
       );
   }
-  // Para vcn y papel bursatil
+
+  titularizacionCalc(
+    codigo_instrumento: string,
+    info_inversion: {
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
+    },
+    info_instrumento: {
+      comision_casa_porcentaje_compra: number;
+      comision_bolsa_porcentaje_compra: number;
+      cupon_porcentaje_compra: number;
+      valor_nominal_compra: number;
+      costo_transferencia: number;
+      precio_vencimiento_compra: number;
+      precio_compra: number;
+      fecha_ultima_cupon_compra: string;
+      fecha_liquidacion_compra: string;
+      fecha_vencimiento_compra: string;
+      comision_casa_porcentaje_venta: number;
+      comision_bolsa_porcentaje_venta: number;
+      cupon_porcentaje_venta: number;
+      valor_nominal_venta: number;
+      precio_vencimiento_venta: number;
+      precio_venta: number;
+      fecha_ultima_cupon_venta: string;
+      fecha_liquidacion_venta: string;
+      fecha_vencimiento_venta: string;
+      fecha_emision: string;
+      costo_cedeval: number;
+      amortizacion_porcentajes: 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)
+      );
+  }
+
+  // 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,
     info_inversion: {
-      id_tipo_base: string;
-      id_periodicidad: string;
-      id_formato_ingreso: string;
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
     },
     info_instrumento: {
       valor_par: boolean;
@@ -89,7 +215,6 @@ export class InstrumentCalculations {
       comision_bolsa_porcentaje: number;
       rendimiento_bruto: number;
       otros_costos: number;
-      plazo: number;
       renta_porcentaje: number;
       fecha_operacion: string;
       fecha_liquidacion: string;
@@ -111,12 +236,48 @@ export class InstrumentCalculations {
       );
   }
 
+  // Para pbur
+  pburCalc(
+    codigo_instrumento: string,
+    info_inversion: {
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
+    },
+    info_instrumento: {
+      valor_par: boolean;
+      valor_nominal: number;
+      comision_casa_porcentaje: number;
+      comision_bolsa_porcentaje: number;
+      rendimiento_bruto: number;
+      otros_costos: number;
+      plazo: number;
+      renta_porcentaje: number;
+      fecha_operacion: string;
+      fecha_liquidacion: string;
+      fecha_ultima_cupon: 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)
+      );
+  }
+
   dapCalc(
     codigo_instrumento: string,
     info_inversion: {
-      id_tipo_base: string;
-      id_periodicidad: string;
-      id_formato_ingreso: string;
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
     },
     info_instrumento: {
       monto_inversion: number;
@@ -124,7 +285,7 @@ export class InstrumentCalculations {
       renta_porcentaje: number;
       plazo: number;
       fecha_operacion: string;
-      fecha_vencimiento: string;
+      //fecha_vencimiento: string;
     }
   ): Observable<boolean> {
     return this.http
@@ -141,6 +302,33 @@ export class InstrumentCalculations {
       );
   }
 
+  projectionCalc(id: string, proyecciones: any): Observable<boolean> {
+    return this.http
+      .put<any>(`${environment.productionApiUrl}/autocomplete/${id}`, {
+        proyecciones
+      })
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  projectionModification(id: string, proyecciones: any): Observable<boolean> {
+    return this.http
+      .put<any>(
+        `${environment.productionApiUrl}/proyeccion/${id}`,
+        proyecciones
+      )
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   errorHandl(error) {
     let errorMessage = "";
     if (error.error) {

src/app/services/instruments.service.ts

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

src/app/services/investments.service.ts

@@ -10,7 +10,7 @@ import { environment } from "@environments/environment";
   providedIn: "root"
 })
 export class InvestmentsService {
-  time: number = 6000;
+  time: number = 10000;
 
   constructor(private http: HttpClient) {}
 
@@ -39,6 +39,18 @@ export class InvestmentsService {
       );
   }
 
+  getInvestmentProposalLogs(id: string) {
+    return this.http
+      .get<any>(`${environment.productionApiUrl}/auditoria/${id}`)
+      .pipe(
+        timeout(this.time),
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   createProposalInvestment(inversion: Object): Observable<boolean> {
     return this.http
       .post<any>(`${environment.productionApiUrl}/inversion`, inversion)
@@ -122,6 +134,30 @@ export class InvestmentsService {
       );
   }
 
+  updateInstrumentProjection(id: string, list: any): Observable<boolean> {
+    return this.http
+      .put<any>(`${environment.productionApiUrl}/proyeccion/${id}`, list)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  getAvailableUsers(id: any): Observable<boolean> {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/usuarios/disponibles?inversion=${id}`
+      )
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   //if(error.error instanceof ErrorEvent) {
   errorHandl(error) {
     let errorMessage = "";

src/assets/scss/material-dashboard.scss

@@ -54,6 +54,10 @@
 
 // Defaults
 
+h5 {
+  margin-top: 15px;
+}
+
 .sky-skin {
   background-color: $palette-blue;
   border-color: #0b2338 !important;

src/environments/environment.prod.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
-  productionApiUrl: "http://192.168.98.146:8000/api"
+  productionApiUrl: "http://192.168.98.146:8000/api",
+  productionMediaUrl: "http://192.168.98.146:8000"
 };

src/environments/environment.ts

@@ -4,7 +4,8 @@
 
 export const environment = {
   production: false,
-  productionApiUrl: "http://192.168.98.140:8000/api"
+  productionApiUrl: "http://192.168.98.140:8000/api",
+  productionMediaUrl: "http://192.168.98.140:8000"
   //productionApiUrl: "https://denmark.inverlec.solar/api/v1"
 };
 

src/styles.scss

@@ -239,3 +239,79 @@ textarea.form-control {
     background: none;
   }
 }
+
+.costs-input-small-container,
+.costs-input-normal-container {
+  max-width: 100%;
+
+  text-align: left;
+  margin-right: 5px;
+  padding-left: 8px;
+  display: table-cell;
+}
+
+.wrapper-costs {
+  padding: 20px;
+}
+
+.wrapper-form {
+  width: 100%;
+  display: table;
+}
+
+.costs-input-small-container {
+  width: 80px;
+}
+
+.costs-input-normal-container {
+  width: auto;
+}
+
+.costs-summary {
+  border: 1px solid #afdb90;
+  padding: 20px 15px;
+  background: #deead5;
+
+  h4 {
+    font-size: 1.2rem;
+    margin-bottom: 2px;
+    font-weight: bold;
+  }
+
+  .field {
+    margin-bottom: 5px;
+  }
+}
+
+.action-buttons {
+  i {
+    font-size: 18px;
+  }
+}
+
+.btn-custom-small {
+  padding: 7px 12px 5px 13px;
+  margin: 0 4px;
+}
+
+.income-summary {
+  border: 1px solid #000;
+  padding: 20px 15px;
+  background: #b1c9b5;
+
+  h4 {
+    font-size: 1.2rem;
+    margin-bottom: 2px;
+    font-weight: bold;
+  }
+
+  .field {
+    margin-bottom: 5px;
+  }
+}
+
+.form-group input[type="file"] {
+  z-index: 1;
+  opacity: 1;
+  position: relative;
+}