Instrumento titularizacion, correcciones para el build produccion

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.ts

@@ -157,8 +157,6 @@ export class GeneralIncomeFormComponent implements OnInit {
       this.idInstrumentIncome = params["id_proyeccion_ingreso_instrumento"];
       this.projectionDate = params["fecha_proyeccion_pago"];
       this.idProjection = params["id_proyeccion_ingreso"];
-      console.log("paarrams");
-      console.log(params);
     });
 
     this.incomesService

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

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

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

@@ -0,0 +1,822 @@
+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",
+    "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;
+
+  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;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private formDataService: FormInvestmentProposalService,
+    private catalogService: CatalogsService,
+    private instrumentCalcService: InstrumentCalculations,
+    public datepipe: DatePipe
+  ) {
+    this.instrument_work = this.formDataService.getWork();
+    this.instrument_exists = this.instrument_work == undefined;
+    this.general = this.formDataService.getGeneralInfo();
+
+    if (
+      this.instrument_work != undefined &&
+      (this.instrument_work.proyecciones != "" ||
+        this.instrument_work != undefined)
+    ) {
+      this.hasProjections = true;
+      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.paginator = this.paginator;
+      this.dataSource2.sort = this.sort;
+    } else {
+      this.hasProjections = false;
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      costo_transferencia: [
+        this.instrument_exists ? "" : this.instrument_work.costo_transferencia,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_compra: [
+        this.instrument_exists ? "" : this.instrument_work.precio_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      valor_nominal_compra: [
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_vencimiento_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      cupon_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cupon_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_bolsa_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ytm_vencimiento_porcentaje_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.ytm_vencimiento_porcentaje_compra,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_venta: [
+        this.instrument_exists ? "" : this.instrument_work.precio_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      valor_nominal_venta: [
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      precio_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_vencimiento_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      cupon_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cupon_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_bolsa_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ytm_vencimiento_porcentaje_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.ytm_vencimiento_porcentaje_venta,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      fecha_ultima_cupon_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_ultima_cupon_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_ultima_cupon_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_liquidacion_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_compra
+              }
+            },
+        Validators.required
+      ],
+      fecha_ultima_cupon_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_ultima_cupon_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_ultima_cupon_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_liquidacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_venta
+              }
+            },
+        Validators.required
+      ],
+      fecha_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_venta
+              }
+            },
+        Validators.required
+      ],
+      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
+      ]
+    });
+
+    // Get calculations, always
+    if (
+      this.instrument_work != undefined &&
+      this.instrument_work.proyecciones != ""
+    ) {
+      console.log("get calcs");
+      this.getCalculations(this.investmentProposalForm, false);
+    }
+  }
+
+  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();
+
+      console.log(data2); // Data will be logged in array format containing objects
+    };
+  }
+
+  getDataRecordsArrayFromCSVFile(csvRecordsArray: any, headerLength: any) {
+    let csvArr = [];
+
+    for (let i = 1; i < csvRecordsArray.length; i++) {
+      let curruntRecord = (<string>csvRecordsArray[i]).split(",");
+      if (curruntRecord.length == headerLength) {
+        let csvRecord: CSVRecord = new CSVRecord();
+        csvRecord.id = curruntRecord[0].trim();
+        csvArr.push(csvRecord);
+      }
+    }
+    console.log(csvArr);
+    this.percentages = csvArr["Porcentajes"];
+    console.log(this.percentages);
+    return csvArr;
+  }
+
+  isValidCSVFile(file: any) {
+    return true; //file.name.endsWith(".csv");
+  }
+
+  getHeaderArray(csvRecordsArr: any) {
+    let headers = (<string>csvRecordsArr[0]).split(",");
+    let headerArray = [];
+    for (let j = 0; j < headers.length; j++) {
+      headerArray.push(headers[j]);
+    }
+    return headerArray;
+  }
+
+  fileReset() {
+    this.csvReader.nativeElement.value = "";
+    this.records = [];
+  }
+
+  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;
+
+    console.log(form);
+    if (!form.valid) {
+      return false;
+    }
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    this.instrumentCalcService
+      .bonosCalc(
+        "BONO", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          costo_transferencia: +this.f.costo_transferencia.value,
+          valor_nominal_compra: +this.f.valor_nominal_compra.value,
+          precio_compra: +this.f.precio_compra.value,
+          precio_vencimiento_compra: +this.f.precio_vencimiento_compra.value,
+          cupon_porcentaje_compra: +this.f.cupon_porcentaje_compra.value,
+          comision_casa_porcentaje_compra: this.f
+            .comision_casa_porcentaje_compra.value,
+          comision_bolsa_porcentaje_compra: this.f
+            .comision_bolsa_porcentaje_compra.value,
+          ytm_vencimiento_porcentaje_compra: this.f
+            .ytm_vencimiento_porcentaje_compra.value,
+
+          valor_nominal_venta: +this.f.valor_nominal_venta.value,
+          precio_venta: +this.f.precio_venta.value,
+          precio_vencimiento_venta: +this.f.precio_vencimiento_venta.value,
+          cupon_porcentaje_venta: +this.f.cupon_porcentaje_venta.value,
+          comision_casa_porcentaje_venta: this.f.comision_casa_porcentaje_venta
+            .value,
+          comision_bolsa_porcentaje_venta: this.f
+            .comision_bolsa_porcentaje_venta.value,
+          ytm_vencimiento_porcentaje_venta: this.f
+            .ytm_vencimiento_porcentaje_venta.value,
+
+          fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
+            .singleDate.formatted,
+          fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
+            .singleDate.formatted,
+          fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
+            .singleDate.formatted,
+
+          fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
+            .singleDate.formatted,
+          fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
+            .singleDate.formatted,
+          fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
+            .singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          console.log("---------");
+          console.log(ans);
+
+          // Instrumento de compra
+          this.comision_casa_compra =
+            ans["result"]["instrumento_compra"]["comision_casa_compra"];
+          this.comision_bolsa_compra =
+            ans["result"]["instrumento_compra"]["comision_bolsa_compra"];
+          this.fecha_siguiente_cupon_compra =
+            ans["result"]["instrumento_compra"]["fecha_siguiente_cupon_compra"];
+          this.dias_vencimiento_compra =
+            ans["result"]["instrumento_compra"]["dias_vencimiento_compra"];
+          this.dias_acumulados_compra =
+            ans["result"]["instrumento_compra"]["dias_acumulados_compra"];
+          this.ytm_vencimiento_comision_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "ytm_vencimiento_comision_porcentaje_compra"
+            ];
+          this.interes_acumulado_compra =
+            ans["result"]["instrumento_compra"]["interes_acumulado_compra"];
+          this.interes_acumulado_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "interes_acumulado_porcentaje_compra"
+            ];
+          this.precio_sucio_porcentaje_compra =
+            ans["result"]["instrumento_compra"][
+              "precio_sucio_porcentaje_compra"
+            ];
+          this.valor_transado_compra =
+            ans["result"]["instrumento_compra"]["valor_transado_compra"];
+          this.monto_pagar = ans["result"]["instrumento_compra"]["monto_pagar"];
+          this.fecha_inicio_vigencia =
+            ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
+
+          // Instrumento de venta
+          this.comision_casa_venta =
+            ans["result"]["instrumento_venta"]["comision_casa_venta"];
+          this.fecha_siguiente_cupon_venta =
+            ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
+          this.dias_vencimiento_venta =
+            ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
+          this.dias_acumulados_venta =
+            ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
+          this.ytm_vencimiento_comision_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "ytm_vencimiento_comision_porcentaje_venta"
+            ];
+          this.interes_acumulado_venta =
+            ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
+          this.interes_acumulado_porcentaje_venta =
+            ans["result"]["instrumento_venta"][
+              "interes_acumulado_porcentaje_venta"
+            ];
+          this.precio_sucio_porcentaje_venta =
+            ans["result"]["instrumento_venta"]["precio_sucio_porcentaje_venta"];
+          this.valor_transado_venta =
+            ans["result"]["instrumento_venta"]["valor_transado_venta"];
+          this.monto_recibir =
+            ans["result"]["instrumento_venta"]["monto_recibir"];
+
+          // Resultado de la operacion
+          this.dias_tenencia_total =
+            ans["result"]["resultado_operacion"]["dias_tenencia_total"];
+          this.ganancia_perdida_capital =
+            ans["result"]["resultado_operacion"]["ganancia_perdida_capital"];
+          this.ingresos_intereses =
+            ans["result"]["resultado_operacion"]["ingresos_intereses"];
+          this.costos_totales =
+            ans["result"]["resultado_operacion"]["costos_totales"];
+          this.ganancia_perdida_total =
+            ans["result"]["resultado_operacion"]["ganancia_perdida_total"];
+          this.ganancia_perdida_capital_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "ganancia_perdida_capital_porcentaje"
+            ];
+          this.intereses_porcentaje =
+            ans["result"]["resultado_operacion"]["intereses_porcentaje"];
+          this.neto_antes_impuesto_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "neto_antes_impuesto_porcentaje"
+            ];
+          this.neto_despues_impuesto_porcentaje =
+            ans["result"]["resultado_operacion"][
+              "neto_despues_impuesto_porcentaje"
+            ];
+          this.total_ingresos_recibidos =
+            ans["result"]["resultado_operacion"]["total_ingresos_recibidos"];
+
+          // Proyecciones
+          this.proyecciones = ans["result"]["proyecciones"];
+
+          this.dataSource.data = this.proyecciones;
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+
+          /*
+ "result": {
+        "instrumento_compra": {
+            "comision_casa_compra": 201.3,
+            "comision_bolsa_compra": 30.194999999999997,
+            "fecha_siguiente_cupon_compra": "28/04/2013",
+            "dias_vencimiento_compra": 880,
+            "dias_acumulados_compra": 32,
+            "ytm_vencimiento_comision_porcentaje_compra": 6.565909090909091,
+            "interes_acumulado_compra": 533.3333333333334,
+            "interes_acumulado_porcentaje_compra": 6.000000000000001,
+            "precio_sucio_porcentaje_compra": 106.65,
+            "valor_transado_compra": 100650.0,
+            "monto_pagar": 101419.82833333334,
+            "fecha_inicio_vigencia": "30/4/2013"
+        },
+        "instrumento_venta": {
+            "comision_casa_venta": 50.0,
+            "fecha_siguiente_cupon_venta": "28/10/2022",
+            "dias_vencimiento_venta": 179,
+            "dias_acumulados_venta": 1,
+            "ytm_vencimiento_comision_porcentaje_venta": -0.5229050279329608,
+            "interes_acumulado_venta": 46.875,
+            "interes_acumulado_porcentaje_venta": 6.75,
+            "precio_sucio_porcentaje_venta": 106.74999999999999,
+            "valor_transado_venta": 250000.0,
+            "monto_recibir": 249396.875
+        },
+        "resultado_operacion": {
+            "valor_nominal_compra": 100000.0,
+            1"dias_tenencia_total": 3389,
+            "precio_compra": 100.64999999999999,
+            "precio_venta": 100.0,
+            1"ganancia_perdida_capital": 149350.0,
+            1"ingresos_intereses": 13726.875,
+            1"costos_totales": -886.495,
+            1"ganancia_perdida_total": 162190.38,
+            1"ganancia_perdida_capital_porcentaje": 15.864856889938034,
+            1"intereses_porcentaje": 1.458151372086161,
+            1"neto_antes_impuesto_porcentaje": 17.22883942165831,
+            1"1neto_despues_impuesto_porcentaje": 17.067375863086458,
+            1"total_ingresos_recibidos": 13680.0
+        },
+*/
+          this.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,
+
+            // 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.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/investment-proposals/payment-info/payment-info.component.ts

@@ -237,7 +237,7 @@ export class PaymentInfoComponent implements OnInit {
               this.paymentObject = {
                 monto: this.investmentProposalForm.value.monto,
                 id_tipo_pago: this.investmentProposalForm.value.tipo_pago,
-                id_cuenta_bancaria: this.investmentProposalForm.value
+                id_cuenta_bancaria_destino: this.investmentProposalForm.value
                   .cuenta_bancaria,
                 //fecha_pago: this.investmentProposalForm.value.fecha_pago.singleDate.formatted,
                 fecha_vencimiento: this.investmentProposalForm.value

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">

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

@@ -77,6 +77,9 @@ 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";
 
 // This array defines which "componentId" maps to which lazy-loaded module.
 
@@ -137,6 +140,9 @@ import { PaymentApprovalComponent } from "@app/components/investment-proposals/p
     PBUR,
     BONO,
     DAP,
+    TIT,
+    EURB,
+    CINV,
     ANCComponent,
     APNComponent,
     InstrumentDirective,
@@ -157,6 +163,9 @@ import { PaymentApprovalComponent } from "@app/components/investment-proposals/p
     PBUR,
     BONO,
     DAP,
+    TIT,
+    EURB,
+    CINV,
     ANCComponent,
     APNComponent
   ]

src/app/models/csv-data.ts

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

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

@@ -75,6 +75,7 @@ export class InstrumentCalculations {
       );
   }
 
+  // Para familia de bonos (bonos, eurobonos, certificados)
   bonosCalc(
     codigo_instrumento: string,
     info_inversion: {
@@ -120,6 +121,53 @@ export class InstrumentCalculations {
       );
   }
 
+  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;
+      ytm_vencimiento_porcentaje_compra: number;
+      precio_vencimiento_compra: number;
+      precio_compra: number;
+      fecha_ultima_cupon_compra: string;
+      fecha_liquidacion_compra: string;
+      fecha_vencimiento_compra: string;
+      comision_casa_porcentaje_venta: number;
+      comision_bolsa_porcentaje_venta: number;
+      cupon_porcentaje_venta: number;
+      valor_nominal_venta: number;
+      ytm_vencimiento_porcentaje_venta: number;
+      precio_vencimiento_venta: number;
+      precio_venta: number;
+      fecha_ultima_cupon_venta: string;
+      fecha_liquidacion_venta: string;
+      fecha_vencimiento_venta: string;
+      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,

src/app/services/instruments.service.ts

@@ -12,6 +12,7 @@ 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"
@@ -30,6 +31,7 @@ export class InstrumentsService {
       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",

src/styles.scss

@@ -309,3 +309,9 @@ textarea.form-control {
     margin-bottom: 5px;
   }
 }
+
+.form-group input[type="file"] {
+  z-index: 1;
+  opacity: 1;
+  position: relative;
+}