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