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

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,1469 @@
-BONOS FORM
-<h4 class="card-title">
-  BONO
-</h4>
-<!--
-<form
-  class="form-auth-small ng-untouched ng-pristine ng-valid"
-  [formGroup]="investmentProposalForm"
->
-  <div class="row">
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="valor_nominal">Valor nominal: </label>
-        <input
-          type="text"
-          formControlName="valor_nominal"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.valor_nominal.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.valor_nominal.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.valor_nominal.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="ytm_vencimiento">YTM al vencimiento: </label>
-        <input
-          type="text"
-          formControlName="ytm_vencimiento"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.ytm_vencimiento.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.ytm_vencimiento.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.ytm_vencimiento.errors.required">
-            Campo requerido
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Bonos
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <!-- Valor nominal compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_compra">Valor nominal compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="precio_c_v">Precio Compra/Venta: </label>
-        <input
-          type="text"
-          formControlName="precio_c_v"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.precio_c_v.errors
-          }"
-        />
-        <div *ngIf="submitted && f.precio_c_v.errors" class="invalid-feedback">
-          <div *ngIf="f.precio_c_v.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="precio_vencimiento">Precio al vencimiento: </label>
-        <input
-          type="text"
-          formControlName="precio_vencimiento"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.precio_vencimiento.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.precio_vencimiento.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.precio_vencimiento.errors.required">
-            Campo requerido
+
+      <!-- Comisión casa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_compra"
+            >Comisión casa compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </div>
-  <br />
-  <div class="row">
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="fecha_liquidacion">Fecha Liquidación: </label>
-        <div class="input-box-container">
-          <p>
-            <i class="far fa-calendar" aria-hidden="true"></i>
-          </p>
-          <input
-            class="input-box form-control"
-            placeholder="Seleccione una fecha"
-            angular-mydatepicker
-            name="fecha_liquidacion"
-            (click)="dp.toggleCalendar()"
-            [options]="myDpOptions"
-            (dateChanged)="onDateChanged($event)"
-            #dp="angular-mydatepicker"
-            [ngClass]="{
-              'is-invalid': submitted && f.fecha_liquidacion.errors
-            }"
-          />
-        </div>
-
-        <div
-          *ngIf="submitted && f.fecha_liquidacion.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.fecha_liquidacion.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="fecha_vencimiento">Fecha Vencimiento: </label>
-
-        <div class="input-box-container">
-          <div>
+
+      <!-- Comisión bolsa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_compra"
+            >Comisión bolsa compra:
+          </label>
+          <div class="input-box-container">
             <p>
-              <i class="far fa-calendar" aria-hidden="true"></i>
+              <i class="fas fa-percent" aria-hidden="true"></i>
             </p>
             <input
-              class="input-box form-control"
-              placeholder="Seleccione una fecha"
-              angular-mydatepicker
-              name="fecha_vencimiento"
-              (click)="dp1.toggleCalendar()"
-              [options]="myDpOptions"
-              (dateChanged)="onDateChanged($event)"
-              #dp1="angular-mydatepicker"
+              type="text"
+              formControlName="comision_bolsa_porcentaje_compra"
+              class="form-control"
               [ngClass]="{
-                'is-invalid': submitted && f.fecha_vencimiento.errors
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_compra.errors
               }"
             />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
+      </div>
 
-        <div
-          *ngIf="submitted && f.fecha_vencimiento.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.fecha_vencimiento.errors.required">
-            Campo requerido
+      <!-- Cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_compra">Cupón compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="fecha_cupon">Última Fecha Cupón: </label>
+      <!-- Costo de transferencia -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="costo_transferencia">Costo de transferencia: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="costo_transferencia"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.costo_transferencia.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.costo_transferencia.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.costo_transferencia.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.costo_transferencia.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-        <div class="input-box-container">
-          <div>
+      <!-- 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="far fa-calendar" aria-hidden="true"></i>
+              <i class="fas fa-dollar-sign"></i>
             </p>
             <input
-              class="input-box form-control"
-              placeholder="Seleccione una fecha"
-              angular-mydatepicker
-              name="fecha_cupon"
-              (click)="dp2.toggleCalendar()"
-              [options]="myDpOptions"
-              (dateChanged)="onDateChanged($event)"
-              #dp2="angular-mydatepicker"
+              type="text"
+              formControlName="precio_compra"
+              class="form-control"
               [ngClass]="{
-                'is-invalid': submitted && f.fecha_cupon.errors
+                '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>
 
-        <div *ngIf="submitted && f.fecha_cupon.errors" class="invalid-feedback">
-          <div *ngIf="f.fecha_cupon.errors.required">
-            Campo requerido
+      <!-- Precio de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_compra"
+            >Precio de vencimiento de compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_compra"
+            >Ultima fecha cupón compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_ultima_cupon_compra"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra"
+            >Fecha de vencimiento de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_vencimiento_compra"
+                (click)="dp2.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp2="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra"
+            >Fecha de liquidación de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_liquidacion_compra"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+              Campo requerido
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
 
+    <div class="row">
+      <!-- Valor nominal venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_venta">Valor nominal venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_venta"
+            >Comisión casa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_venta"
+            >Comisión bolsa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_venta">Cupón venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-  <div class="row">
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="comision_casa">Comisión Casa: </label>
-        <input
-          type="text"
-          formControlName="comision_casa"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.comision_casa.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.comision_casa.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.comision_casa.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="comision_bolsa">Comisión Bolsa: </label>
-        <input
-          type="text"
-          formControlName="comision_bolsa"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.comision_bolsa.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.comision_bolsa.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.comision_bolsa.errors.required">
-            Campo requerido
+      <!-- Precio de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_venta">Precio de venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_venta"
+            >Precio de vencimiento de venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
+      <!-- Ultima fecha cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_venta"
+            >Ultima fecha cupón venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_ultima_cupon_venta"
+                (click)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta"
+            >Fecha de vencimiento de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_vencimiento_venta"
+                (click)="dp5.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp5="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta"
+            >Fecha de liquidación de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_liquidacion_venta"
+                (click)="dp6.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp6="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-12 col-sm-12 pr-xl-12">
+        <div class="form-group text-right">
+          <br />
+          <button
+            type="button"
+            class="btn btn-success center-component"
+            (click)="getCalculations(investmentProposalForm, false)"
+          >
+            Realizar cálculos
+          </button>
+        </div>
+      </div>
     </div>
 
-    <div class="col-lg-6 col-sm-12 pr-xl-5">
-      <div class="form-group">
-        <label for="cupon">Cupón: </label>
-        <input
-          type="text"
-          formControlName="cupon"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.cupon.errors
-          }"
-        />
-        <div *ngIf="submitted && f.cupon.errors" class="invalid-feedback">
-          <div *ngIf="f.cupon.errors.required">
-            Campo requerido
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="costos_transferencia">Costos de Transferencia: </label>
-        <input
-          type="text"
-          formControlName="costos_transferencia"
-          class="form-control"
-          [ngClass]="{
-            'is-invalid': submitted && f.costos_transferencia.errors
-          }"
-        />
-        <div
-          *ngIf="submitted && f.costos_transferencia.errors"
-          class="invalid-feedback"
-        >
-          <div *ngIf="f.costos_transferencia.errors.required">
-            Campo requerido
+    <br />
+    <!-- Calculos del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Cálculos del instrumento</span
+          >
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón compra:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa compra:</h4>
+          <div class="field">
+            $USD {{ comision_casa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa compra:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>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-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>
-  </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Proyecciones del instrumento</span
+          >
+        </div>
 
-  <br />
-  <div class="form-group text-center space-20">
-    <button
-      class="btn btn-primary center-component margin-right"
-      (click)="goToNext(investmentProposalForm)"
-    >
-      Siguiente
-    </button>
-  </div>
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="impuesto">
+              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.impuesto == "" || row.impuesto == undefined
+                    ? "-"
+                    : row.impuesto
+                }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <div class="form-group text-center space-20">
+      <button
+        type="button"
+        class="btn btn-default center-component margin-right"
+        (click)="goToPrevious()"
+      >
+        Anterior
+      </button>
+      <button
+        type="submit"
+        class="btn btn-primary center-component margin-right"
+        (click)="goToNext(investmentProposalForm)"
+      >
+        Siguiente
+      </button>
+    </div>
+  </form>
+</div>
+
+<div *ngIf="summary">
+  <div class="timeline-body">
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD {{ instrument_work_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">
+          $USD {{ 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">
+          $USD {{ 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>
 
-</form>
--->
+    <div class="row">
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Costo transferencia:</h4>
+        <div class="field">
+          $USD {{ instrument_work_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">
+          $USD {{ 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">
+          $USD {{ 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>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 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/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,619 @@ 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;
 
   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_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_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.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_transferencia: this.investmentProposalForm.value
+              .costo_transferencia,
+            valor_nominal_compra: this.investmentProposalForm.value
+              .valor_nominal_compra,
+            precio_compra: this.investmentProposalForm.value.precio_compra,
+            precio_vencimiento_compra: this.investmentProposalForm.value
+              .precio_vencimiento_compra,
+            cupon_porcentaje_compra: this.investmentProposalForm.value
+              .cupon_porcentaje_compra,
+            comision_casa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_casa_porcentaje_compra,
+            comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_compra,
+            ytm_vencimiento_porcentaje_compra: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_compra,
+            valor_nominal_venta: this.investmentProposalForm.value
+              .valor_nominal_venta,
+            precio_venta: this.investmentProposalForm.value.precio_venta,
+            precio_vencimiento_venta: this.investmentProposalForm.value
+              .precio_vencimiento_venta,
+            cupon_porcentaje_venta: this.investmentProposalForm.value
+              .cupon_porcentaje_venta,
+            comision_casa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_casa_porcentaje_venta,
+            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_venta,
+            ytm_vencimiento_porcentaje_venta: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_venta,
+
+            fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+              .singleDate.formatted,
+            fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+              .singleDate.formatted,
+
+            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+              .singleDate.formatted,
+            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+              .singleDate.formatted,
+
+            // Instrumento de compra
+
+            comision_casa_compra: this.comision_casa_compra,
+            comision_bolsa_compra: this.comision_bolsa_compra,
+            fecha_siguiente_cupon_compra: this.fecha_siguiente_cupon_compra,
+            dias_vencimiento_compra: this.dias_vencimiento_compra,
+            dias_acumulados_compra: this.dias_acumulados_compra,
+            ytm_vencimiento_comision_porcentaje_compra: this
+              .ytm_vencimiento_comision_porcentaje_compra,
+            interes_acumulado_compra: this.interes_acumulado_compra,
+            interes_acumulado_porcentaje_compra: this
+              .interes_acumulado_porcentaje_compra,
+            precio_sucio_porcentaje_compra: this.precio_sucio_porcentaje_compra,
+            valor_transado_compra: this.valor_transado_compra,
+            monto_pagar: this.monto_pagar,
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia,
+            // Instrumento de venta
+
+            comision_casa_venta: this.comision_casa_venta,
+            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
+            dias_vencimiento_venta: this.dias_vencimiento_venta,
+            dias_acumulados_venta: this.dias_acumulados_venta,
+            ytm_vencimiento_comision_porcentaje_venta: this
+              .ytm_vencimiento_comision_porcentaje_venta,
+            interes_acumulado_venta: this.interes_acumulado_venta,
+            interes_acumulado_porcentaje_venta: this
+              .interes_acumulado_porcentaje_venta,
+            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
+            valor_transado_venta: this.valor_transado_venta,
+            // Resultado de la operacion
+            /*
+            monto_recibir: this.monto_recibir,
+            dias_tenencia_total: this.dias_tenencia_total,
+            ganancia_perdida_capital: this.ganancia_perdida_capital,
+            ingresos_intereses: this.ingresos_intereses,
+            costos_totales: this.costos_totales,
+            ganancia_perdida_total: this.ganancia_perdida_total,
+            ganancia_perdida_capital_porcentaje: this
+              .ganancia_perdida_capital_porcentaje,
+            intereses_porcentaje: this.intereses_porcentaje,
+            neto_antes_impuesto_porcentaje: this.neto_antes_impuesto_porcentaje,
+            neto_despues_impuesto_porcentaje: this
+              .neto_despues_impuesto_porcentaje,
+            total_ingresos_recibidos: this.total_ingresos_recibidos,
+            */
+            // Proyecciones
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.bonosObject);
+          Swal.close();
+          if (saveForm == true) {
+            if (this.investmentID != undefined) {
+              this.router.navigate(["/investment-proposal/complement-info"], {
+                queryParams: { id: this.investmentID }
+              });
+            } else {
+              this.router.navigate(["/investment-proposal/complement-info"]);
+            }
+          }
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: "No su pudo obtener la informacion"
+          });
+          return false;
+        }
+      );
+  }
+
+  goToPrevious() {
+    this.submitted = true;
+    if (this.investmentID != undefined) {
+      this.router.navigate(["/investment-proposal/general-info"], {
+        queryParams: { id: this.investmentID }
+      });
+    } else {
+      this.router.navigate(["/investment-proposal/general-info"]);
+    }
+  }
+
+  goToNext(form: any) {
+    this.getCalculations(form, true);
   }
 }

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

@@ -0,0 +1,1508 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Certificados de inversión
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <!-- Valor nominal compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_compra">Valor nominal compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_compra"
+            >Comisión casa compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_compra"
+            >Comisión bolsa compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_compra">Cupón compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Costo de transferencia -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="costo_transferencia">Costo de transferencia: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="costo_transferencia"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.costo_transferencia.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.costo_transferencia.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.costo_transferencia.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.costo_transferencia.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_compra">Precio de compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_compra"
+            >Precio de vencimiento de compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_compra"
+            >Ultima fecha cupón compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_ultima_cupon_compra"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra"
+            >Fecha de vencimiento de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_vencimiento_compra"
+                (click)="dp2.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp2="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra"
+            >Fecha de liquidación de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_liquidacion_compra"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <!-- Valor nominal venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_venta">Valor nominal venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_venta"
+            >Comisión casa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_venta"
+            >Comisión bolsa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_venta">Cupón venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_venta">Precio de venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_venta"
+            >Precio de vencimiento de venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_venta"
+            >Ultima fecha cupón venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_ultima_cupon_venta"
+                (click)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta"
+            >Fecha de vencimiento de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_vencimiento_venta"
+                (click)="dp5.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp5="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta"
+            >Fecha de liquidación de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_liquidacion_venta"
+                (click)="dp6.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp6="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-12 col-sm-12 pr-xl-12">
+        <div class="form-group text-right">
+          <br />
+          <button
+            type="button"
+            class="btn btn-success center-component"
+            (click)="getCalculations(investmentProposalForm, false)"
+          >
+            Realizar cálculos
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <!-- Calculos del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Cálculos del instrumento</span
+          >
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón compra:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa compra:</h4>
+          <div class="field">
+            $USD {{ comision_casa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa compra:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>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-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="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 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">
+          $USD {{ 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">
+          $USD
+          {{
+            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">
+          $USD {{ 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">
+          $USD
+          {{
+            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>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 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,691 @@
+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;
+
+  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_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_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.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_transferencia: this.investmentProposalForm.value
+              .costo_transferencia,
+            valor_nominal_compra: this.investmentProposalForm.value
+              .valor_nominal_compra,
+            precio_compra: this.investmentProposalForm.value.precio_compra,
+            precio_vencimiento_compra: this.investmentProposalForm.value
+              .precio_vencimiento_compra,
+            cupon_porcentaje_compra: this.investmentProposalForm.value
+              .cupon_porcentaje_compra,
+            comision_casa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_casa_porcentaje_compra,
+            comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_compra,
+            ytm_vencimiento_porcentaje_compra: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_compra,
+            valor_nominal_venta: this.investmentProposalForm.value
+              .valor_nominal_venta,
+            precio_venta: this.investmentProposalForm.value.precio_venta,
+            precio_vencimiento_venta: this.investmentProposalForm.value
+              .precio_vencimiento_venta,
+            cupon_porcentaje_venta: this.investmentProposalForm.value
+              .cupon_porcentaje_venta,
+            comision_casa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_casa_porcentaje_venta,
+            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_venta,
+            ytm_vencimiento_porcentaje_venta: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_venta,
+
+            fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+              .singleDate.formatted,
+            fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+              .singleDate.formatted,
+
+            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+              .singleDate.formatted,
+            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+              .singleDate.formatted,
+
+            // Instrumento de compra
+
+            comision_casa_compra: this.comision_casa_compra,
+            comision_bolsa_compra: this.comision_bolsa_compra,
+            fecha_siguiente_cupon_compra: this.fecha_siguiente_cupon_compra,
+            dias_vencimiento_compra: this.dias_vencimiento_compra,
+            dias_acumulados_compra: this.dias_acumulados_compra,
+            ytm_vencimiento_comision_porcentaje_compra: this
+              .ytm_vencimiento_comision_porcentaje_compra,
+            interes_acumulado_compra: this.interes_acumulado_compra,
+            interes_acumulado_porcentaje_compra: this
+              .interes_acumulado_porcentaje_compra,
+            precio_sucio_porcentaje_compra: this.precio_sucio_porcentaje_compra,
+            valor_transado_compra: this.valor_transado_compra,
+            monto_pagar: this.monto_pagar,
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia,
+            // Instrumento de venta
+
+            comision_casa_venta: this.comision_casa_venta,
+            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
+            dias_vencimiento_venta: this.dias_vencimiento_venta,
+            dias_acumulados_venta: this.dias_acumulados_venta,
+            ytm_vencimiento_comision_porcentaje_venta: this
+              .ytm_vencimiento_comision_porcentaje_venta,
+            interes_acumulado_venta: this.interes_acumulado_venta,
+            interes_acumulado_porcentaje_venta: this
+              .interes_acumulado_porcentaje_venta,
+            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
+            valor_transado_venta: this.valor_transado_venta,
+            // Resultado de la operacion
+
+            monto_recibir: this.monto_recibir,
+            dias_tenencia_total: this.dias_tenencia_total,
+            ganancia_perdida_capital: this.ganancia_perdida_capital,
+            ingresos_intereses: this.ingresos_intereses,
+            costos_totales: this.costos_totales,
+            ganancia_perdida_total: this.ganancia_perdida_total,
+            ganancia_perdida_capital_porcentaje: this
+              .ganancia_perdida_capital_porcentaje,
+            intereses_porcentaje: this.intereses_porcentaje,
+            neto_antes_impuesto_porcentaje: this.neto_antes_impuesto_porcentaje,
+            neto_despues_impuesto_porcentaje: this
+              .neto_despues_impuesto_porcentaje,
+            total_ingresos_recibidos: this.total_ingresos_recibidos,
+
+            // Proyecciones
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.bonosObject);
+          Swal.close();
+          if (saveForm == true) {
+            if (this.investmentID != undefined) {
+              this.router.navigate(["/investment-proposal/complement-info"], {
+                queryParams: { id: this.investmentID }
+              });
+            } else {
+              this.router.navigate(["/investment-proposal/complement-info"]);
+            }
+          }
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: "No su pudo obtener la informacion"
+          });
+          return false;
+        }
+      );
+  }
+
+  goToPrevious() {
+    this.submitted = true;
+    if (this.investmentID != undefined) {
+      this.router.navigate(["/investment-proposal/general-info"], {
+        queryParams: { id: this.investmentID }
+      });
+    } else {
+      this.router.navigate(["/investment-proposal/general-info"]);
+    }
+  }
+
+  goToNext(form: any) {
+    this.getCalculations(form, true);
+  }
+}

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

@@ -0,0 +1,1508 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Eurobonos
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <!-- Valor nominal compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_compra">Valor nominal compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_compra"
+            >Comisión casa compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_compra"
+            >Comisión bolsa compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_compra">Cupón compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Costo de transferencia -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="costo_transferencia">Costo de transferencia: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="costo_transferencia"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.costo_transferencia.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.costo_transferencia.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.costo_transferencia.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.costo_transferencia.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_compra">Precio de compra: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_compra"
+            >Precio de vencimiento de compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_compra"
+            >Ultima fecha cupón compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_ultima_cupon_compra"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra"
+            >Fecha de vencimiento de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_vencimiento_compra"
+                (click)="dp2.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp2="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra"
+            >Fecha de liquidación de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_liquidacion_compra"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <!-- Valor nominal venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_venta">Valor nominal venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_venta"
+            >Comisión casa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_venta"
+            >Comisión bolsa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_venta">Cupón venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_venta">Precio de venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_venta"
+            >Precio de vencimiento de venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_venta"
+            >Ultima fecha cupón venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_ultima_cupon_venta"
+                (click)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta"
+            >Fecha de vencimiento de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_vencimiento_venta"
+                (click)="dp5.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp5="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta"
+            >Fecha de liquidación de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_liquidacion_venta"
+                (click)="dp6.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp6="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-12 col-sm-12 pr-xl-12">
+        <div class="form-group text-right">
+          <br />
+          <button
+            type="button"
+            class="btn btn-success center-component"
+            (click)="getCalculations(investmentProposalForm, false)"
+          >
+            Realizar cálculos
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <!-- Calculos del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Cálculos del instrumento</span
+          >
+        </div>
+
+        <div class="col-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+        <div class="col-sm-4">
+          <h4>Fecha siguiente cupón compra:</h4>
+          <div class="field">
+            {{ fecha_siguiente_cupon_compra }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision casa compra:</h4>
+          <div class="field">
+            $USD {{ comision_casa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comision bolsa compra:</h4>
+          <div class="field">
+            $USD {{ comision_bolsa_compra | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>YTM vencimiento comisión compra (%):</h4>
+          <div class="field">
+            {{ ytm_vencimiento_comision_porcentaje_compra | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>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-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="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 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">
+          $USD {{ 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">
+          $USD
+          {{
+            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">
+          $USD {{ 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">
+          $USD
+          {{
+            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>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 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,689 @@
+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;
+
+  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_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_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.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_transferencia: this.investmentProposalForm.value
+              .costo_transferencia,
+            valor_nominal_compra: this.investmentProposalForm.value
+              .valor_nominal_compra,
+            precio_compra: this.investmentProposalForm.value.precio_compra,
+            precio_vencimiento_compra: this.investmentProposalForm.value
+              .precio_vencimiento_compra,
+            cupon_porcentaje_compra: this.investmentProposalForm.value
+              .cupon_porcentaje_compra,
+            comision_casa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_casa_porcentaje_compra,
+            comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_compra,
+            ytm_vencimiento_porcentaje_compra: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_compra,
+            valor_nominal_venta: this.investmentProposalForm.value
+              .valor_nominal_venta,
+            precio_venta: this.investmentProposalForm.value.precio_venta,
+            precio_vencimiento_venta: this.investmentProposalForm.value
+              .precio_vencimiento_venta,
+            cupon_porcentaje_venta: this.investmentProposalForm.value
+              .cupon_porcentaje_venta,
+            comision_casa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_casa_porcentaje_venta,
+            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_venta,
+            ytm_vencimiento_porcentaje_venta: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_venta,
+
+            fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+              .singleDate.formatted,
+            fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+              .singleDate.formatted,
+
+            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+              .singleDate.formatted,
+            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+              .singleDate.formatted,
+
+            // Instrumento de compra
+
+            comision_casa_compra: this.comision_casa_compra,
+            comision_bolsa_compra: this.comision_bolsa_compra,
+            fecha_siguiente_cupon_compra: this.fecha_siguiente_cupon_compra,
+            dias_vencimiento_compra: this.dias_vencimiento_compra,
+            dias_acumulados_compra: this.dias_acumulados_compra,
+            ytm_vencimiento_comision_porcentaje_compra: this
+              .ytm_vencimiento_comision_porcentaje_compra,
+            interes_acumulado_compra: this.interes_acumulado_compra,
+            interes_acumulado_porcentaje_compra: this
+              .interes_acumulado_porcentaje_compra,
+            precio_sucio_porcentaje_compra: this.precio_sucio_porcentaje_compra,
+            valor_transado_compra: this.valor_transado_compra,
+            monto_pagar: this.monto_pagar,
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia,
+            // Instrumento de venta
+
+            comision_casa_venta: this.comision_casa_venta,
+            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
+            dias_vencimiento_venta: this.dias_vencimiento_venta,
+            dias_acumulados_venta: this.dias_acumulados_venta,
+            ytm_vencimiento_comision_porcentaje_venta: this
+              .ytm_vencimiento_comision_porcentaje_venta,
+            interes_acumulado_venta: this.interes_acumulado_venta,
+            interes_acumulado_porcentaje_venta: this
+              .interes_acumulado_porcentaje_venta,
+            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
+            valor_transado_venta: this.valor_transado_venta,
+            // Resultado de la operacion
+
+            monto_recibir: this.monto_recibir,
+            dias_tenencia_total: this.dias_tenencia_total,
+            ganancia_perdida_capital: this.ganancia_perdida_capital,
+            ingresos_intereses: this.ingresos_intereses,
+            costos_totales: this.costos_totales,
+            ganancia_perdida_total: this.ganancia_perdida_total,
+            ganancia_perdida_capital_porcentaje: this
+              .ganancia_perdida_capital_porcentaje,
+            intereses_porcentaje: this.intereses_porcentaje,
+            neto_antes_impuesto_porcentaje: this.neto_antes_impuesto_porcentaje,
+            neto_despues_impuesto_porcentaje: this
+              .neto_despues_impuesto_porcentaje,
+            total_ingresos_recibidos: this.total_ingresos_recibidos,
+
+            // Proyecciones
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.bonosObject);
+          Swal.close();
+          if (saveForm == true) {
+            if (this.investmentID != undefined) {
+              this.router.navigate(["/investment-proposal/complement-info"], {
+                queryParams: { id: this.investmentID }
+              });
+            } else {
+              this.router.navigate(["/investment-proposal/complement-info"]);
+            }
+          }
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: "No su pudo obtener la informacion"
+          });
+          return false;
+        }
+      );
+  }
+
+  goToPrevious() {
+    this.submitted = true;
+    if (this.investmentID != undefined) {
+      this.router.navigate(["/investment-proposal/general-info"], {
+        queryParams: { id: this.investmentID }
+      });
+    } else {
+      this.router.navigate(["/investment-proposal/general-info"]);
+    }
+  }
+
+  goToNext(form: any) {
+    this.getCalculations(form, true);
+  }
+}

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

@@ -212,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>
@@ -426,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>
@@ -650,13 +650,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",
@@ -270,11 +270,11 @@ export class PBUR implements InstrumentComponent {
         {
           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,
@@ -333,7 +333,7 @@ export class PBUR 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/instruments/titulos/titulos.component.html

@@ -0,0 +1,1648 @@
+<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">
+      <!-- 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 emision: </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-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_compra"
+            >Precio de vencimiento de compra:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_compra"
+            >Ultima fecha cupón compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_ultima_cupon_compra"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra"
+            >Fecha de vencimiento de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_vencimiento_compra"
+                (click)="dp2.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp2="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra"
+            >Fecha de liquidación de compra:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_liquidacion_compra"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <!-- Valor nominal venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_nominal_venta">Valor nominal venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_nominal_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.valor_nominal_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_nominal_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_nominal_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_nominal_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje_venta"
+            >Comisión casa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_casa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje_venta"
+            >Comisión bolsa venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_bolsa_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cupon_porcentaje_venta">Cupón venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cupon_porcentaje_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cupon_porcentaje_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cupon_porcentaje_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cupon_porcentaje_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_venta">Precio de venta: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Precio de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_vencimiento_venta"
+            >Precio de vencimiento de venta:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_vencimiento_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_vencimiento_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_vencimiento_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_vencimiento_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ultima fecha cupón venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_ultima_cupon_venta"
+            >Ultima fecha cupón venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_ultima_cupon_venta"
+                (click)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_ultima_cupon_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de vencimiento de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta"
+            >Fecha de vencimiento de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_vencimiento_venta"
+                (click)="dp5.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp5="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidacion de venta -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta"
+            >Fecha de liquidación de venta:
+          </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_liquidacion_venta"
+                (click)="dp6.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp6="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta">Archivo de porcentajes: </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>
+
+    <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-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 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">
+          $USD {{ 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">
+          $USD
+          {{
+            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">
+          $USD {{ 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">
+          $USD
+          {{
+            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>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 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>
+
+            <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,748 @@
+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;
+
+  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;
+    }
+    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,
+          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.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,
+            ytm_vencimiento_porcentaje_compra: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_compra,
+            valor_nominal_venta: this.investmentProposalForm.value
+              .valor_nominal_venta,
+            precio_venta: this.investmentProposalForm.value.precio_venta,
+            precio_vencimiento_venta: this.investmentProposalForm.value
+              .precio_vencimiento_venta,
+            cupon_porcentaje_venta: this.investmentProposalForm.value
+              .cupon_porcentaje_venta,
+            comision_casa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_casa_porcentaje_venta,
+            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje_venta,
+            ytm_vencimiento_porcentaje_venta: this.investmentProposalForm.value
+              .ytm_vencimiento_porcentaje_venta,
+
+            fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+              .singleDate.formatted,
+            fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+              .singleDate.formatted,
+
+            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+              .singleDate.formatted,
+            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+              .singleDate.formatted,
+            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+              .singleDate.formatted,
+            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_comision_porcentaje_compra: this
+              .ytm_vencimiento_comision_porcentaje_compra,
+            interes_acumulado_compra: this.interes_acumulado_compra,
+            interes_acumulado_porcentaje_compra: this
+              .interes_acumulado_porcentaje_compra,
+            precio_sucio_porcentaje_compra: this.precio_sucio_porcentaje_compra,
+            valor_transado_compra: this.valor_transado_compra,
+            monto_pagar: this.monto_pagar,
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia,
+            // Instrumento de venta
+
+            comision_casa_venta: this.comision_casa_venta,
+            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
+            dias_vencimiento_venta: this.dias_vencimiento_venta,
+            dias_acumulados_venta: this.dias_acumulados_venta,
+            ytm_vencimiento_comision_porcentaje_venta: this
+              .ytm_vencimiento_comision_porcentaje_venta,
+            interes_acumulado_venta: this.interes_acumulado_venta,
+            interes_acumulado_porcentaje_venta: this
+              .interes_acumulado_porcentaje_venta,
+            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
+            valor_transado_venta: this.valor_transado_venta,
+            // Resultado de la operacion
+            /*
+            monto_recibir: this.monto_recibir,
+            dias_tenencia_total: this.dias_tenencia_total,
+            ganancia_perdida_capital: this.ganancia_perdida_capital,
+            ingresos_intereses: this.ingresos_intereses,
+            costos_totales: this.costos_totales,
+            ganancia_perdida_total: this.ganancia_perdida_total,
+            ganancia_perdida_capital_porcentaje: this
+              .ganancia_perdida_capital_porcentaje,
+            intereses_porcentaje: this.intereses_porcentaje,
+            neto_antes_impuesto_porcentaje: this.neto_antes_impuesto_porcentaje,
+            neto_despues_impuesto_porcentaje: this
+              .neto_despues_impuesto_porcentaje,
+            total_ingresos_recibidos: this.total_ingresos_recibidos,
+
+            amortizacion_porcentajes: this.amortizaciones,-**/
+            // Proyecciones
+            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

@@ -441,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>
@@ -665,13 +665,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",
@@ -143,7 +143,6 @@ export class VCN implements InstrumentComponent {
           : this.instrument_work.otros_costos,
         [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
       ],
-
       renta_porcentaje: [
         this.instrument_null || this.instrument_work.renta_porcentaje == null
           ? 10
@@ -346,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 => {
@@ -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/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

@@ -66,6 +66,7 @@ export class ComplementInfoComponent implements OnInit {
   payment_terms: any;
 
   complementInfoExists: boolean;
+  companyValue: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -86,6 +87,15 @@ export class ComplementInfoComponent implements OnInit {
 
     this.catalogService.getCompanies().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.countries = res;

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

@@ -191,21 +191,44 @@
                     <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
-                          }"
+                        <ng-container
+                          *ngIf="
+                            investmentProposalID == undefined;
+                            else elseTemplate
+                          "
                         >
-                          <option
-                            *ngFor="let item of instrumentTypes"
-                            [selected]="item.codigo == general.instrumentos"
-                            [value]="item.codigo"
-                            >{{ item.nombre }}</option
+                          <select
+                            class="custom-select"
+                            formControlName="instrumentos"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.instrumentos.errors
+                            }"
                           >
-                        </select>
+                            <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"

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();
 

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

@@ -39,17 +39,26 @@
           <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>
@@ -57,7 +66,9 @@
 
                 <!-- Country Column -->
                 <ng-container matColumnDef="id_empresa">
-                  <th mat-header-cell *matHeaderCellDef>Empresa</th>
+                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    Empresa
+                  </th>
                   <td mat-cell *matCellDef="let row">
                     {{
                       row.id_empresa == "" || row.id_empresa == undefined
@@ -69,7 +80,9 @@
 
                 <!-- 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 == "" ||
@@ -83,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 == "" ||
@@ -178,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

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

@@ -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,6 +95,17 @@ export class PaymentInfoComponent implements OnInit {
     if (this.investmentProposalID == undefined)
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
+    this.investmentsService
+      .getAvailableUsers(this.investmentProposalID)
+      .subscribe(res => {
+        this.userListNext = res["usuarios_next"];
+        this.generated_inputs_next = "";
+        if (this.userListNext.length > 0) {
+          for (let i = 0; i < this.userListNext.length; i++) {
+            this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+          }
+        }
+      });
     this.investmentsService
       .getProposalInvestment(this.investmentProposalID)
       .subscribe(
@@ -113,7 +131,9 @@ export class PaymentInfoComponent implements OnInit {
             monto: this.inversionAmount,
             tipo_pago: "",
             cuenta_bancaria: "",
-            fecha_vencimiento: ""
+            fecha_vencimiento: "",
+            cuenta_bancaria_destino: "",
+            emitir_nombre: ""
           });
         },
         err => {
@@ -139,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,
@@ -149,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;
   }
@@ -169,62 +210,123 @@ export class PaymentInfoComponent implements OnInit {
       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

@@ -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"];
       });
 
@@ -142,6 +179,93 @@ export class PaymentRequirementComponent implements OnInit {
       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;
+    }
+
     this.paymentObject = {
       fecha_pago: form.value.fecha_pago.singleDate.formatted,
       id_inversion: this.investmentProposalID
@@ -201,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

@@ -46,6 +46,15 @@
                       </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">
@@ -193,6 +197,24 @@
                             <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>

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

@@ -72,6 +72,8 @@ export class InvestmentProposalDetailComponent implements OnInit {
   cuenta_bancaria: any;
   fecha_vencimiento: any;
   fecha_pago: any;
+  cuenta_bancaria_destino: any;
+  emitir_nombre: any;
 
   constructor(
     private router: Router,
@@ -128,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
                 ? ""
@@ -214,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}`
                   : "-";
             });
 
@@ -314,6 +317,7 @@ export class InvestmentProposalDetailComponent implements OnInit {
 
           if (
             this.state == "COMPR" ||
+            this.state == "PGAPR" ||
             this.state == "LIQUI" ||
             this.state == "FINAL"
           )
@@ -328,6 +332,13 @@ export class InvestmentProposalDetailComponent implements OnInit {
                   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"];
+                }
               });
         });
 

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,
@@ -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();
       });
     })();
   }

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

@@ -63,6 +63,12 @@ export class InvestmentProposalReviewComponent implements OnInit {
   comment: any;
   justification: any;
   reviewProposal: {};
+  userList: any;
+  generated_inputs: any;
+  userListPrevious: any;
+  generated_inputs_previous: string;
+  userListNext: any;
+  generated_inputs_next: string;
 
   constructor(
     private router: Router,
@@ -87,6 +93,28 @@ export class InvestmentProposalReviewComponent implements OnInit {
 
     if (this.investmentProposalID != undefined) {
       this.investmentExists = true;
+
+      this.investmentService
+        .getAvailableUsers(this.investmentProposalID)
+        .subscribe(res => {
+          this.userListPrevious = res["usuarios_previous"];
+          this.generated_inputs_previous = "";
+
+          this.userListNext = res["usuarios_next"];
+          this.generated_inputs_next = "";
+
+          if (this.userListPrevious.length > 0) {
+            for (let i = 0; i < this.userListPrevious.length; i++) {
+              this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i]}' name='users' value='${this.userListPrevious[i]}'><label class='form-check-label' for='previous-${this.userListPrevious[i]}'>${this.userListPrevious[i]}</label></div>`;
+            }
+          }
+          if (this.userListNext.length > 0) {
+            for (let i = 0; i < this.userListNext.length; i++) {
+              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+            }
+          }
+        });
+
       this.investmentService
         .getProposalInvestment(this.investmentProposalID)
         .subscribe(res => {
@@ -323,105 +351,170 @@ export class InvestmentProposalReviewComponent implements OnInit {
   }
 
   approve_proposal() {
+    this.reviewProposal = undefined;
     (async () => {
-      const { value: comentario } = await Swal.fire({
-        title: "<h3>Revisión propuesta de inversión</h3>",
+      Swal.fire({
+        title: `<h3>Revisión propuesta de inversión</h3>`,
         icon: "info",
         html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
         showCancelButton: true,
-        confirmButtonText: "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

@@ -28,10 +28,124 @@
               <h4 class="card-title">
                 Detalle de costos para el deposito
               </h4>
+              <br />
               <div class="align-container">
-                <form [formGroup]="form">
+                <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="row" [formGroup]="group">
+                    <div class="wrapper-form" [formGroup]="group">
                       <div class="costs-input-small-container">
                         <div class="form-group">
                           <label for="posicion">Posicion: </label>
@@ -149,6 +263,18 @@
                       <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>

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

@@ -11,7 +11,13 @@ 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 } from "@angular/forms";
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  FormArray,
+  Validators
+} from "@angular/forms";
 
 @Component({
   selector: "app-dap-costs",
@@ -46,6 +52,7 @@ export class DAPCostsComponent implements OnInit {
   investmentProposalID: string;
 
   form: FormArray;
+  investmentProposalForm: FormGroup;
 
   proyecciones: any;
   proyeccionesProps = [];
@@ -54,6 +61,9 @@ export class DAPCostsComponent implements OnInit {
   array1;
   array2;
   array3;
+  investment: any;
+  instrument_work: any;
+  instrument_exists: boolean;
 
   constructor(
     private catalogService: CatalogsService,
@@ -69,9 +79,6 @@ export class DAPCostsComponent implements OnInit {
       this.authService.getJwtToken()
     );
     this.userRole = decodedToken.groups;
-    //    console.log("User role");
-    //  console.log(this.userRole);
-    //console.log(this.userRole.length == 0);
 
     Swal.fire({
       allowOutsideClick: false,
@@ -93,6 +100,68 @@ export class DAPCostsComponent implements OnInit {
       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(
@@ -103,30 +172,8 @@ export class DAPCostsComponent implements OnInit {
               ];
 
             this.form = new FormArray(this.buildForm(this.proyecciones));
+            this.dataRetrieved = true;
 
-            /*
-            this.array1 = [];
-            this.array2 = [];
-
-            for (var i = 0; i < this.proyecciones.length; i++) {
-              this.array2 = [];
-              for (const prop2 of Object.keys(this.proyecciones[i])) {
-                this.array3 = [];
-                formDataObj[prop2] = new FormControl(
-                  this.proyecciones[i][prop2]
-                );
-                this.proyeccionesProps.push(prop2);
-
-                this.array3.push(prop2);
-                this.array2.push(this.array3);
-              }
-              this.array1.push(this.array2);
-            }
-            console.log(this.array1);
-
-            this.form = new FormGroup(formDataObj);
-            console.log(this.form);
-            */
             this.dataRetrieved = true;
           },
           err => {
@@ -144,6 +191,44 @@ export class DAPCostsComponent implements OnInit {
     }, 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));
   }

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

@@ -32,38 +32,50 @@
           <br />
           <div class="example-container mat-elevation-z8">
             <div class="example-table-container table-responsive">
-              <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 == "" ||
@@ -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 =
@@ -88,9 +85,7 @@ export class InvestmentsComponent implements OnInit {
             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;
       },
@@ -130,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/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";
@@ -71,6 +71,17 @@ import { PaymentInfoComponent } from "@app/components/investment-proposals/payme
 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";
+
 // This array defines which "componentId" maps to which lazy-loaded module.
 
 @NgModule({
@@ -98,6 +109,8 @@ import { DAPCostsComponent } from "@app/components/investments/costs/dap/dap.cos
     WavesModule
   ],
   providers: [
+    { provide: MatPaginatorIntl, useClass: MatPaginatorIntlSpa },
+
     WorkflowGuard,
     {
       provide: FormInvestmentProposalService,
@@ -128,23 +141,34 @@ import { DAPCostsComponent } from "@app/components/investments/costs/dap/dap.cos
     CETE,
     VCN,
     PBUR,
-    BonosComponent,
+    BONO,
     DAP,
+    TIT,
+    EURB,
+    CINV,
     ANCComponent,
     APNComponent,
     InstrumentDirective,
     PaymentInfoComponent,
     PaymentRequirementComponent,
     InvestmentProposalDetailComponent,
-    DAPCostsComponent
+    DAPCostsComponent,
+    VCNCostsComponent,
+    PBURCostsComponent,
+    IncomesComponent,
+    GeneralIncomeFormComponent,
+    PaymentApprovalComponent
   ],
   entryComponents: [
     LETE,
     CETE,
     VCN,
     PBUR,
-    BonosComponent,
+    BONO,
     DAP,
+    TIT,
+    EURB,
+    CINV,
     ANCComponent,
     APNComponent
   ]

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

@@ -26,6 +26,11 @@ 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 = [
   {
@@ -175,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
@@ -194,5 +203,35 @@ export const AdminLayoutRoutes: Routes = [
   {
     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

@@ -74,6 +74,96 @@ export class InstrumentCalculations {
         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: {
+      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
+      .post<any>(`${environment.productionApiUrl}/autocomplete`, {
+        codigo_instrumento,
+        info_inversion,
+        info_instrumento
+      })
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  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;
+      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)
+      );
+  }
+
   // Para vcn
   vcnCalc(
     codigo_instrumento: string,
@@ -176,6 +266,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,13 @@ 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";
 
 @Injectable({
   providedIn: "root"
@@ -25,7 +28,11 @@ 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"

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) {}
 
@@ -134,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/styles.scss

@@ -247,10 +247,16 @@ textarea.form-control {
   text-align: left;
   margin-right: 5px;
   padding-left: 8px;
+  display: table-cell;
+}
 
-  .input-box-container input {
-    border-bottom: 1px solid;
-  }
+.wrapper-costs {
+  padding: 20px;
+}
+
+.wrapper-form {
+  width: 100%;
+  display: table;
 }
 
 .costs-input-small-container {
@@ -258,9 +264,54 @@ textarea.form-control {
 }
 
 .costs-input-normal-container {
-  width: 180px;
+  width: auto;
 }
 
-.wrapper-costs {
-  padding: 20px;
+.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;
 }