Merge branch 'features-o' of onunez/frontend-inversiones into development

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

@@ -477,7 +477,40 @@
     <div class="row">
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Valor nominal:</h4>
-        <div class="field">$USD {{ instrument_work.valor_nominal }}</div>
+        <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>Ingreso bruto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.ingreso_bruto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingreso neto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.ingreso_neto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>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>Total a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work.total_pagar | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio porcentaje:</h4>
+        <div class="field">
+          {{ instrument_work.precio_porcentaje | number: "1.2-4" }}%
+        </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Plazo en días:</h4>
@@ -485,26 +518,51 @@
           {{ instrument_work.plazo }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa (%):</h4>
+        <div class="field">
+          {{ instrument_work.comision_casa_porcentaje | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa (%):</h4>
+        <div class="field">
+          {{ instrument_work.comision_bolsa_porcentaje | number: "1.2-4" }} %
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Comisión casa:</h4>
         <div class="field">
-          {{ instrument_work.comision_casa_porcentaje }} %
+          $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 }} %
+          $USD {{ instrument_work.comision_bolsa | number: "1.2-4" }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Rendimiento bruto:</h4>
-        <div class="field">$USD {{ instrument_work.rendimiento_bruto }}</div>
+        <div class="field">
+          {{ instrument_work.rendimiento_bruto | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Rendimiento neto:</h4>
+        <div class="field">
+          {{ instrument_work.rendimiento_neto | number: "1.2-4" }} %
+        </div>
       </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Otros costos:</h4>
-        <div class="field">$USD {{ instrument_work.otros_costos }}</div>
+        <div class="field">
+          $USD {{ instrument_work.otros_costos | number: "1.2-4" }}
+        </div>
       </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Fecha de operación:</h4>
         <div class="field">
@@ -530,5 +588,67 @@
         </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_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>
+
+            <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/cete/cete.component.ts

@@ -91,6 +91,8 @@ export class CETE implements InstrumentComponent {
 
   ceteObject: {};
   dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
+  hasProjections: boolean;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -104,6 +106,18 @@ export class CETE implements InstrumentComponent {
     this.instrument_exists = this.instrument_work == undefined;
     this.general = this.formDataService.getGeneralInfo();
 
+    if (
+      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({
       valor_nominal: [
         this.instrument_exists ? "" : this.instrument_work.valor_nominal,

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

@@ -1,6 +1,6 @@
 <div *ngIf="!summary">
   <h4 class="card-title">
-    Cete
+    Depósitos a plazo
   </h4>
   <form
     class="form-auth-small ng-untouched ng-pristine ng-valid"
@@ -270,7 +270,7 @@
             <ng-container matColumnDef="posicion">
               <th mat-header-cell *matHeaderCellDef>#</th>
               <td mat-cell *matCellDef="let row">
-                {{ row.posicion }}
+                {{ row.posicion | number: "1.2-4" }}
               </td>
             </ng-container>
             <ng-container matColumnDef="plazo">
@@ -293,10 +293,11 @@
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
+                $USD
                 {{
                   row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                     ? "-"
-                    : row.ingreso_bruto
+                    : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
             </ng-container>
@@ -304,17 +305,20 @@
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
                 {{
-                  row.renta == "" || row.renta == undefined ? "-" : row.renta
-                }}
+                  row.renta == "" || row.renta == undefined
+                    ? "-"
+                    : (row.renta | number: "1.2-4")
+                }}%
               </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
               <td mat-cell *matCellDef="let row">
+                $USD
                 {{
                   row.ingreso_neto == "" || row.ingreso_neto == undefined
                     ? "-"
-                    : row.ingreso_neto
+                    : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
             </ng-container>
@@ -360,8 +364,11 @@
     <div class="row">
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Monto inversión:</h4>
-        <div class="field">$USD {{ instrument_work.monto_inversion }}</div>
+        <div class="field">
+          $USD {{ instrument_work.monto_inversion | number: "1.2-4" }}
+        </div>
       </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Plazo en días:</h4>
         <div class="field">
@@ -370,32 +377,54 @@
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Tasa porcentaje:</h4>
-        <div class="field">{{ instrument_work.tasa_porcentaje }} %</div>
+        <div class="field">
+          {{ instrument_work.tasa_porcentaje | number: "1.2-4" }} %
+        </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Renta porcentaje:</h4>
-        <div class="field">{{ instrument_work.renta_porcentaje }} %</div>
+        <div class="field">
+          {{ instrument_work.renta_porcentaje | number: "1.2-4" }} %
+        </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Rendimiento bruto:</h4>
-        <div class="field">$USD {{ instrument_work.rendimiento_bruto }}</div>
+        <h4>Renta:</h4>
+        <div class="field">
+          $USD {{ instrument_work.renta | number: "1.2-4" }}
+        </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Otros costos:</h4>
-        <div class="field">$USD {{ instrument_work.otros_costos }}</div>
+        <h4>Ingreso bruto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.ingreso_bruto | number: "1.2-4" }}
+        </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Fecha de operación:</h4>
+        <h4>Ingreso neto:</h4>
         <div class="field">
-          {{ instrument_work.fecha_operacion }}
+          $USD {{ instrument_work.ingreso_neto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Rendimiento bruto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.rendimiento_bruto | number: "1.2-4" }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Fecha de liquidación:</h4>
+        <h4>Rendimiento neto:</h4>
         <div class="field">
-          {{ instrument_work.fecha_liquidacion }}
+          $USD {{ instrument_work.rendimiento_neto | number: "1.2-4" }}
         </div>
       </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de operación:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_operacion }}
+        </div>
+      </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Fecha vencimiento:</h4>
         <div class="field">
@@ -403,9 +432,89 @@
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Ultima fecha de cupón:</h4>
+        <h4>Fecha inicio de vigencia:</h4>
         <div class="field">
-          {{ instrument_work.fecha_ultima_cupon }}
+          {{ instrument_work.fecha_inicio_vigencia }}
+        </div>
+      </div>
+    </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div class="instrument-calcs-summary">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-warning badge-custom-instrument"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion | number: "1.2-4" }}
+              </td>
+            </ng-container>
+            <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">
+                $USD
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : (row.ingreso_bruto | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.renta == "" || row.renta == undefined
+                    ? "-"
+                    : (row.renta | number: "1.2-4")
+                }}%
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                $USD
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : (row.ingreso_neto | number: "1.2-4")
+                }}
+              </td>
+            </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>

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

@@ -86,8 +86,11 @@ export class DAP implements InstrumentComponent {
   monto_inversion: number = 0;
   proyecciones: any;
   dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
+
   dapObject: {};
   renta: any;
+  hasProjections: boolean;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -99,9 +102,20 @@ export class DAP implements InstrumentComponent {
   ) {
     this.instrument_work = this.formDataService.getWork();
     this.instrument_exists = this.instrument_work == undefined;
-
     this.general = this.formDataService.getGeneralInfo();
 
+    if (
+      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({
       monto_inversion: [
         this.instrument_exists ? "" : this.instrument_work.monto_inversion,

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

@@ -340,29 +340,84 @@
     <div class="row">
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Valor nominal:</h4>
-        <div class="field">$USD {{ instrument_work.valor_nominal }}</div>
+        <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>Ingreso bruto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.ingreso_bruto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Ingreso neto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.ingreso_neto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>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>Ingreso neto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.ingreso_neto | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work.total_pagar | number: "1.2-4" }}
+        </div>
       </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Plazo en días:</h4>
         <div class="field">
           {{ instrument_work.plazo }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa (%):</h4>
+        <div class="field">
+          {{ instrument_work.comision_casa_porcentaje | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa (%):</h4>
+        <div class="field">
+          {{ instrument_work.comision_bolsa_porcentaje | number: "1.2-4" }} %
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Comisión casa:</h4>
         <div class="field">
-          {{ instrument_work.comision_casa_porcentaje }} %
+          $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 }} %
+          $USD {{ instrument_work.comision_bolsa | number: "1.2-4" }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Rendimiento bruto:</h4>
-        <div class="field">{{ instrument_work.rendimiento_bruto }} %</div>
+        <div class="field">
+          {{ instrument_work.rendimiento_bruto | number: "1.2-4" }} %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Rendimiento neto:</h4>
+        <div class="field">
+          {{ instrument_work.rendimiento_neto | number: "1.2-4" }} %
+        </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Fecha de operación:</h4>
@@ -376,6 +431,16 @@
           {{ instrument_work.fecha_liquidacion }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de vencimiento:</h4>
+        <div class="field">
+          {{
+            instrument_work.fecha_vencimiento == ""
+              ? ""
+              : instrument_work.fecha_vencimiento
+          }}
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Fecha de redención:</h4>
         <div class="field">

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

@@ -561,9 +561,22 @@
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Valor nominal:</h4>
         <div class="field">
-          {{ instrument_work.valor_nominal }}
+          $USD {{ instrument_work.valor_nominal | number: "1.2-4" }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_transado | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio porcentaje:</h4>
+        <div class="field">
+          {{ instrument_work.precio_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Plazo en días:</h4>
         <div class="field">
@@ -573,19 +586,37 @@
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Comisión casa:</h4>
         <div class="field">
-          {{ instrument_work.comision_casa_porcentaje }}
+          {{ instrument_work.comision_casa_porcentaje | number: "1.2-4" }}%
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Comisión bolsa:</h4>
         <div class="field">
-          {{ instrument_work.comision_bolsa_porcentaje }}
+          {{ instrument_work.comision_bolsa_porcentaje | number: "1.2-4" }}%
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Rendimiento bruto:</h4>
         <div class="field">
-          {{ instrument_work.rendimiento_bruto }}
+          $USD {{ instrument_work.rendimiento_bruto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Rendimiento neto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.rendimiento_neto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado:</h4>
+        <div class="field">
+          $USD {{ instrument_work.interes_acumulado | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work.total_pagar | number: "1.2-4" }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
@@ -612,6 +643,112 @@
           {{ instrument_work.fecha_ultima_cupon }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha inicio de vigencia:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_inicio_vigencia }}
+        </div>
+      </div>
+    </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div *ngIf="hasProjections" class="instrument-calcs-summary">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-warning badge-custom-instrument"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <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="monto">
+              <th mat-header-cell *matHeaderCellDef>Monto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.monto == "" || row.monto == undefined
+                    ? "-"
+                    : (row.monto | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : (row.ingreso_neto | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="costo_cedeval">
+              <th mat-header-cell *matHeaderCellDef>Costo CEDEVAL</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.costo_cedeval | number: "1.2-4" }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.renta | number: "1.2-4" }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="costo_transferencia">
+              <th mat-header-cell *matHeaderCellDef>Costo transferencia</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.costo_transferencia | number: "1.2-4" }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="costo_banco">
+              <th mat-header-cell *matHeaderCellDef>Costo banco</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.costo_banco | number: "1.2-4" }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="otros_costos">
+              <th mat-header-cell *matHeaderCellDef>Otros costos</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.otros_costos | number: "1.2-4" }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+
+          <mat-paginator
+            [pageSizeOptions]="[5, 10, 25, dataSource2.data.length]"
+            [length]="dataSource2.data.length"
+            [pageIndex]="0"
+            [pageSize]="10"
+          ></mat-paginator>
+        </div>
+      </div>
     </div>
   </div>
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { Component, OnInit, Input, ViewChild, OnChanges } 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";
@@ -90,10 +90,10 @@ export class PBUR implements InstrumentComponent {
   proyecciones: any;
   hasProjections: boolean;
 
+  dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
-  dataSource = new MatTableDataSource(this.proyecciones);
-
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -104,11 +104,17 @@ export class PBUR implements InstrumentComponent {
   ) {
     this.instrument_work = this.formDataService.getWork();
     this.instrument_exists = this.instrument_work == undefined;
-    console.log(this.instrument_work);
-    console.log("instrument exists");
-    console.log(this.instrument_exists);
     this.general = this.formDataService.getGeneralInfo();
 
+    if (this.instrument_work.valor_par == true) {
+      this.hasProjections = true;
+      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.paginator = this.paginator;
+      this.dataSource2.sort = this.sort;
+    } else {
+      this.hasProjections = false;
+    }
+
     //getIncomeFormat
     this.catalogService.getIncomeFormat().subscribe(res => {
       this.format_incomes = res;
@@ -227,7 +233,8 @@ export class PBUR implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_ultima_cupon
               }
-            }
+            },
+        Validators.required
       ]
     });
   }

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

@@ -562,8 +562,23 @@
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Valor nominal:</h4>
-        <div class="field">$USD {{ instrument_work.valor_nominal }}</div>
+        <div class="field">
+          $USD {{ instrument_work.valor_nominal | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado:</h4>
+        <div class="field">
+          $USD {{ instrument_work.valor_transado | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio porcentaje:</h4>
+        <div class="field">
+          {{ instrument_work.precio_porcentaje | number: "1.2-4" }}%
+        </div>
       </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Plazo en días:</h4>
         <div class="field">
@@ -573,18 +588,38 @@
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Comisión casa:</h4>
         <div class="field">
-          {{ instrument_work.comision_casa_porcentaje }} %
+          {{ instrument_work.comision_casa_porcentaje | number: "1.2-4" }}%
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Comisión bolsa:</h4>
         <div class="field">
-          {{ instrument_work.comision_bolsa_porcentaje }} %
+          {{ instrument_work.comision_bolsa_porcentaje | number: "1.2-4" }}%
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Rendimiento bruto:</h4>
-        <div class="field">{{ instrument_work.rendimiento_bruto }} %</div>
+        <div class="field">
+          $USD {{ instrument_work.rendimiento_bruto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Rendimiento neto:</h4>
+        <div class="field">
+          $USD {{ instrument_work.rendimiento_neto | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Interés acumulado:</h4>
+        <div class="field">
+          $USD {{ instrument_work.interes_acumulado | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work.total_pagar | number: "1.2-4" }}
+        </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Fecha de operación:</h4>
@@ -610,6 +645,112 @@
           {{ instrument_work.fecha_ultima_cupon }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha inicio de vigencia:</h4>
+        <div class="field">
+          {{ instrument_work.fecha_inicio_vigencia }}
+        </div>
+      </div>
+    </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div *ngIf="hasProjections" class="instrument-calcs-summary">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-warning badge-custom-instrument"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+            </ng-container>
+            <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="monto">
+              <th mat-header-cell *matHeaderCellDef>Monto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.monto == "" || row.monto == undefined
+                    ? "-"
+                    : (row.monto | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : (row.ingreso_neto | number: "1.2-4")
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="costo_cedeval">
+              <th mat-header-cell *matHeaderCellDef>Costo CEDEVAL</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.costo_cedeval | number: "1.2-4" }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.renta | number: "1.2-4" }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="costo_transferencia">
+              <th mat-header-cell *matHeaderCellDef>Costo transferencia</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.costo_transferencia | number: "1.2-4" }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="costo_banco">
+              <th mat-header-cell *matHeaderCellDef>Costo banco</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.costo_banco | number: "1.2-4" }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="otros_costos">
+              <th mat-header-cell *matHeaderCellDef>Otros costos</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.otros_costos | number: "1.2-4" }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+
+          <mat-paginator
+            [pageSizeOptions]="[5, 10, 25, dataSource2.data.length]"
+            [length]="dataSource2.data.length"
+            [pageIndex]="0"
+            [pageSize]="10"
+          ></mat-paginator>
+        </div>
+      </div>
     </div>
   </div>
 </div>

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

@@ -93,6 +93,7 @@ export class VCN implements InstrumentComponent {
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
 
   constructor(
     private formBuilder: FormBuilder,
@@ -104,9 +105,16 @@ export class VCN implements InstrumentComponent {
   ) {
     this.instrument_work = this.formDataService.getWork();
     this.instrument_exists = this.instrument_work == undefined;
-
     this.general = this.formDataService.getGeneralInfo();
 
+    if (this.instrument_work.valor_par == true) {
+      this.hasProjections = true;
+      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.paginator = this.paginator;
+      this.dataSource2.sort = this.sort;
+    } else {
+      this.hasProjections = false;
+    }
     //getIncomeFormat
     this.catalogService.getIncomeFormat().subscribe(res => {
       this.format_incomes = res;
@@ -225,7 +233,8 @@ export class VCN implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_ultima_cupon
               }
-            }
+            },
+        Validators.required
       ]
     });
   }

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

@@ -77,8 +77,6 @@ export class ComplementInfoComponent implements OnInit {
   ngOnInit() {
     this.route.params.subscribe(params => {
       this.investmentProposalID = params["id"];
-      console.log(params);
-      console.log(this.investmentProposalID);
     });
     if (this.investmentProposalID == undefined)
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
@@ -152,7 +150,6 @@ export class ComplementInfoComponent implements OnInit {
         []
       ]
     });
-    console.log(this.complementInfo);
   }
 
   get f() {
@@ -163,7 +160,6 @@ export class ComplementInfoComponent implements OnInit {
     //if (!form.valid) {
     //return false;
     //}
-    console.log(this.investmentProposalForm.value);
     this.formDataService.setComplementInfo(this.investmentProposalForm.value);
     return true;
   }

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

@@ -108,10 +108,6 @@ export class InvestmentProposalGeneralInfoComponent
         .getProposalInvestment(this.investmentProposalID)
         .subscribe(
           res => {
-            console.log("results");
-            console.log(res);
-            console.log("-------");
-            console.log(this.formDataService.getFormData());
             this.gInfo = {
               asunto: res["result"]["asunto"],
               origenes_fondo:
@@ -187,13 +183,11 @@ export class InvestmentProposalGeneralInfoComponent
 
             // Setear objeto dinamico con valores obtenidos del endpoint
             this.general = this.formDataService.getGeneralInfo();
-            console.log("GENERAL");
-            console.log(this.general);
+
             // Validar que el objeto dinamico contenga valores, si no, setear con valores obtenidos del endpoint
             if (
               Object.values(this.general).every(x => x === null || x === "")
             ) {
-              console.log("I GOT HERE");
               this.formDataService.setGeneralInfo(this.gInfo);
               this.general = this.formDataService.getGeneralInfo();
               this.generalInfoDontExists = this.general == undefined;
@@ -213,8 +207,6 @@ export class InvestmentProposalGeneralInfoComponent
             }
 
             this.instrument = this.formDataService.getWork();
-            console.log("inicializar instrumento");
-            console.log(this.instrument);
             if (
               this.instrument == undefined ||
               Object.values(this.instrument).every(x => x === null || x === "")
@@ -272,7 +264,6 @@ export class InvestmentProposalGeneralInfoComponent
     });
     this.catalogService.getInstrumentTypes().subscribe(res => {
       this.instrumentTypes = res;
-      console.log(this.generalInfoDontExists);
       if (this.generalInfoDontExists == false) {
         this.instrumentName = res.find(
           e => e.codigo == this.general.instrumentos
@@ -291,9 +282,7 @@ export class InvestmentProposalGeneralInfoComponent
     this.callForm(this.generalInfoDontExists, this.general);
   }
 
-  ngOnChanges() {
-    console.log("CHANGES");
-  }
+  ngOnChanges() {}
 
   save(form: any): boolean {
     if (!form.valid) {

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

@@ -44,10 +44,8 @@ export class InstrumentWorkComponent implements OnInit {
   ngOnInit() {
     this.route.params.subscribe(params => {
       this.investmentProposalID = params["id"];
-      console.log(params);
-      console.log(this.investmentProposalID);
     });
-    console.log("param query");
+
     if (this.investmentProposalID == undefined)
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 

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

@@ -13,7 +13,11 @@
               <li class="breadcrumb-item">Propuestas de inversión</li>
             </ol>
           </nav>
-          <a class="btn btn-primary" (click)="create_investment_proposal()">
+          <a
+            class="btn btn-primary"
+            *ngIf="userType(userRole, 'analistas')"
+            (click)="create_investment_proposal()"
+          >
             Nuevo registro
           </a>
         </div>
@@ -108,7 +112,10 @@
                           can_modify_or_send_to_review(
                             row.id_estado_inversion.codigo
                           ) ||
-                          can_finish_proposal(row.id_estado_inversion.codigo)
+                          (can_finish_proposal(
+                            row.id_estado_inversion.codigo
+                          ) &&
+                            userType(userRole, 'analistas'))
                         "
                         title="Editar"
                         class="btn btn-primary btn-custom-small"
@@ -125,13 +132,19 @@
                         title="Enviar a revisión"
                         class="btn btn-dark btn-custom-small"
                         (click)="
-                          sendToReview(row.id_inversion, row.codigo_inversion)
+                          sendToReview(
+                            row.id_inversion,
+                            row.codigo_inversion
+                          ) && userType(userRole, 'analistas')
                         "
                       >
                         <i class="fas fa-share"></i>
                       </a>
                       <a
-                        *ngIf="can_review(row.id_estado_inversion.codigo)"
+                        *ngIf="
+                          can_review(row.id_estado_inversion.codigo) &&
+                          userType(userRole, 'supervisores')
+                        "
                         title="Revisar"
                         class="btn btn-warning btn-custom-small"
                         [routerLink]="[
@@ -143,7 +156,10 @@
                         <i class="fas fa-spell-check"></i>
                       </a>
                       <a
-                        *ngIf="can_approve(row.id_estado_inversion.codigo)"
+                        *ngIf="
+                          can_approve(row.id_estado_inversion.codigo) &&
+                          userType(userRole, 'autorizadores')
+                        "
                         title="Aprobar"
                         class="btn btn-warning btn-custom-small"
                         [routerLink]="[
@@ -157,7 +173,9 @@
 
                       <a
                         *ngIf="
-                          can_write_payment_info(row.id_estado_inversion.codigo)
+                          can_write_payment_info(
+                            row.id_estado_inversion.codigo
+                          ) && userType(userRole, 'analistas')
                         "
                         title="Información de pago"
                         class="btn btn-warning btn-custom-small"
@@ -171,7 +189,8 @@
                       </a>
                       <a
                         *ngIf="
-                          can_upload_payment(row.id_estado_inversion.codigo)
+                          can_upload_payment(row.id_estado_inversion.codigo) &&
+                          userType(userRole, 'contabilidad')
                         "
                         title="Requisición de pago"
                         class="btn btn-success btn-custom-small"
@@ -183,6 +202,19 @@
                       >
                         <i class="fas fa-money-bill-wave"></i>
                       </a>
+                      <a
+                        *ngIf="
+                          can_finish_proposal(row.id_estado_inversion.codigo) &&
+                          userType(userRole, 'analistas')
+                        "
+                        title="Finalizar inversión"
+                        class="btn btn-success btn-custom-small"
+                        (click)="
+                          finishProposal(row.id_inversion, row.codigo_inversion)
+                        "
+                      >
+                        <i class="far fa-check-circle"></i>
+                      </a>
                       <!--
                       <a
                         title="Historico"

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

@@ -55,10 +55,6 @@ export class InvestmentProposalsComponent implements OnInit {
       this.authService.getJwtToken()
     );
     this.userRole = decodedToken.groups;
-    //    console.log("User role");
-    //  console.log(this.userRole);
-    //console.log(this.userRole.length == 0);
-
     this.dataSource.filterPredicate = (data, filter) => {
       const dataStr =
         data.id_inversion_instrumento.id_tipo_instrumento.nombre.toLowerCase() +
@@ -83,9 +79,30 @@ export class InvestmentProposalsComponent implements OnInit {
     this.investmentsService.getProposalInvestmentsList().subscribe(
       ans => {
         this.listProposals = ans.result;
-        console.log(this.listProposals);
-        this.dataSource.data = this.listProposals;
 
+        if (this.userType(this.userRole, "analistas")) {
+          this.listProposals;
+        } else if (this.userType(this.userRole, "contabilidad")) {
+          this.listProposals = this.listProposals.filter(proposals =>
+            ["COMPR", "LIQUI"].includes(
+              proposals["id_estado_inversion"]["codigo"]
+            )
+          );
+        } else if (this.userType(this.userRole, "autorizadores")) {
+          this.listProposals = this.listProposals.filter(proposals =>
+            ["REVIS", "APROB", "FINAL"].includes(
+              proposals["id_estado_inversion"]["codigo"]
+            )
+          );
+        } else if (this.userType(this.userRole, "supervisores")) {
+          this.listProposals = this.listProposals.filter(proposals =>
+            ["PENDI", "REVIS", "FINAL"].includes(
+              proposals["id_estado_inversion"]["codigo"]
+            )
+          );
+        }
+
+        this.dataSource.data = this.listProposals;
         this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
       },
@@ -212,7 +229,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   sendToReview(investmentProposalID: number, investmentCode: string) {
-    (async () => {
+    async () => {
       const { value: comentario } = await Swal.fire({
         title: `<h3>Enviar a revisión propuesta de inversión ${investmentCode}</h3>`,
         icon: "info",
@@ -220,7 +237,7 @@ export class InvestmentProposalsComponent implements OnInit {
         input: "textarea",
         showCancelButton: true,
         confirmButtonText: "Enviar propuesta",
-        cancelButtonText: "Cancelar",
+        cancelButtonText: "Cancelar"
         // inputValidator: value => {
         //   if (!value) {
         //     return "Debe ingresar un comentario";
@@ -229,51 +246,94 @@ export class InvestmentProposalsComponent implements OnInit {
       });
 
       //if (comentario) {
-        let reviewProposal = {
-          id_inversion: investmentProposalID,
-          step: "next",
-          comentario: comentario
-        };
-
-        this.investmentsService
-          .sendReviewProposalInvestment(reviewProposal)
-          .subscribe(
-            success => {
-              if (success) {
-                Swal.fire({
-                  allowOutsideClick: false,
-                  icon: "success",
-                  showCancelButton: false,
-                  title: "Exito",
-                  confirmButtonText: "La propuesta ha sido enviada a revisión"
-                }).then(result => {
-                  Swal.close();
-                  window.location.reload();
-                });
-              }
-            },
-            err => {
+      let reviewProposal = {
+        id_inversion: investmentProposalID,
+        step: "next",
+        comentario: comentario
+      };
+
+      this.investmentsService
+        .sendReviewProposalInvestment(reviewProposal)
+        .subscribe(
+          success => {
+            if (success) {
               Swal.fire({
-                icon: "error",
-                title: "Error al guardar",
-                text: err.message
+                allowOutsideClick: false,
+                icon: "success",
+                showCancelButton: false,
+                title: "Exito",
+                confirmButtonText: "La propuesta ha sido enviada a revisión"
+              }).then(result => {
+                Swal.close();
+                window.location.reload();
               });
             }
-          );
+          },
+          err => {
+            Swal.fire({
+              icon: "error",
+              title: "Error al guardar",
+              text: err.message
+            });
+          }
+        );
+    };
+  }
+
+  //Enviar a revision la propuesta de inversion
+  finishProposal(investmentProposalID: number, investmentCode: string) {
+    (async () => {
+      const { value: comentario } = await Swal.fire({
+        title: `<h3>Finalizar propuesta de inversión: ${investmentCode}</h3>`,
+        icon: "info",
+        input: "textarea",
+        html: `<p style="text-align:left;">Comentario:</p>`,
+        showCancelButton: true,
+        confirmButtonText: "Finalizar",
+        cancelButtonText: "Cancelar"
+      });
+
+      //if (comentario) {
+      let reviewProposal = {
+        id_inversion: investmentProposalID,
+        step: "next",
+        comentario: comentario
+      };
+
+      this.investmentsService
+        .sendReviewProposalInvestment(reviewProposal)
+        .subscribe(
+          success => {
+            if (success) {
+              Swal.fire({
+                allowOutsideClick: false,
+                icon: "success",
+                showCancelButton: false,
+                title: "Exito",
+                confirmButtonText: "La propuesta ha sido finalizada"
+              }).then(result => {
+                Swal.close();
+                window.location.href = "#/investment-proposals";
+              });
+            }
+          },
+          err => {
+            Swal.fire({
+              icon: "error",
+              title: "Error al guardar",
+              text: err.message
+            });
+          }
+        );
       //}
     })();
   }
 
-  userType(userRole: any) {
-    switch (+userRole) {
-      case 0:
-        return "Invitado";
-      case 1:
-        return "Usuario";
-      case 2:
-        return "Administrador";
-      case 3:
-        return "Super Admin";
+  userType(userRole: any, requiredRole: any) {
+    if (userRole.length == 0) {
+      return true;
     }
+
+    return userRole.includes(requiredRole);
   }
 }

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

@@ -129,39 +129,6 @@
                   </div>
                 </div>
 
-                <!-- Fecha operación -->
-                <div class="col-lg-6 col-sm-12 pr-xl-3">
-                  <div class="form-group">
-                    <label for="fecha_pago">Fecha pago: </label>
-                    <div class="input-box-container">
-                      <p>
-                        <i class="far fa-calendar" aria-hidden="true"></i>
-                      </p>
-                      <input
-                        class="input-box form-control"
-                        placeholder="Seleccione una fecha"
-                        angular-mydatepicker
-                        formControlName="fecha_pago"
-                        (click)="dp.toggleCalendar()"
-                        [options]="myDpOptions"
-                        #dp="angular-mydatepicker"
-                        [ngClass]="{
-                          'is-invalid': submitted && f.fecha_pago.errors
-                        }"
-                      />
-                    </div>
-
-                    <div
-                      *ngIf="submitted && f.fecha_pago.errors"
-                      class="invalid-feedback"
-                    >
-                      <div *ngIf="f.fecha_pago.errors.required">
-                        Campo requerido
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
                 <!-- Fecha vencimiento -->
                 <div class="col-lg-6 col-sm-12 pr-xl-3">
                   <div class="form-group">

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

@@ -87,8 +87,6 @@ export class PaymentInfoComponent implements OnInit {
     if (this.investmentProposalID == undefined)
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
-    console.log(this.investmentProposalID);
-
     this.investmentsService
       .getProposalInvestment(this.investmentProposalID)
       .subscribe(
@@ -160,8 +158,7 @@ export class PaymentInfoComponent implements OnInit {
       monto: this.investmentProposalForm.value.monto,
       id_tipo_pago: this.investmentProposalForm.value.tipo_pago,
       id_cuenta_bancaria: this.investmentProposalForm.value.cuenta_bancaria,
-      fecha_pago: this.investmentProposalForm.value.fecha_pago.singleDate
-        .formatted,
+      //fecha_pago: this.investmentProposalForm.value.fecha_pago.singleDate.formatted,
       fecha_vencimiento: this.investmentProposalForm.value.fecha_vencimiento
         .singleDate.formatted,
       id_inversion: this.investmentProposalID

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

@@ -65,10 +65,7 @@
                       <h4>Cuenta bancaria:</h4>
                       <div class="field">{{ cuenta_bancaria }}</div>
                     </div>
-                    <div class="col-sm-6">
-                      <h4>Fecha de pago:</h4>
-                      <div class="field">{{ fecha_pago }}</div>
-                    </div>
+
                     <div class="col-sm-6">
                       <h4>Fecha de vencimiento:</h4>
                       <div class="field">{{ fecha_vencimiento }}</div>
@@ -78,20 +75,11 @@
 
                 <br />
 
-                <form>
+                <form
+                  class="form-auth-small ng-untouched ng-pristine ng-valid"
+                  [formGroup]="investmentProposalForm"
+                >
                   <div class="row">
-                    <div class="col-lg-6 col-sm-12 pr-xl-6">
-                      <div class="form-group">
-                        <label for="comentario">Comentario: </label>
-
-                        <textarea
-                          rows="2"
-                          class="form-control"
-                          name="comentario"
-                        ></textarea>
-                      </div>
-                    </div>
-
                     <div class="col-lg-6 col-sm-12 pr-xl-6">
                       <div class="form-group">
                         <label for="justificacion">Archivo: </label>
@@ -114,13 +102,58 @@
                         {{ uploadedFilePath }}
                       </div>
                     </div>
+                    <!-- Fecha operación -->
+                    <div class="col-lg-6 col-sm-12 pr-xl-3">
+                      <div class="form-group">
+                        <label for="fecha_pago">Fecha pago: </label>
+                        <div class="input-box-container">
+                          <p>
+                            <i class="far fa-calendar" aria-hidden="true"></i>
+                          </p>
+                          <input
+                            class="input-box form-control"
+                            placeholder="Seleccione una fecha"
+                            angular-mydatepicker
+                            formControlName="fecha_pago"
+                            (click)="dp.toggleCalendar()"
+                            [options]="myDpOptions"
+                            #dp="angular-mydatepicker"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.fecha_pago.errors
+                            }"
+                          />
+                        </div>
+
+                        <div
+                          *ngIf="submitted && f.fecha_pago.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.fecha_pago.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
 
-                    <br />
                     <div class="col-lg-6 col-sm-12 pr-xl-6">
+                      <div class="form-group">
+                        <label for="comentario">Comentario: </label>
+
+                        <textarea
+                          rows="2"
+                          class="form-control"
+                          formControlName="comentario"
+                        ></textarea>
+                      </div>
+                    </div>
+                  </div>
+                  <br />
+                  <div class="row">
+                    <div class="col-lg-12 col-sm-12 align-right">
                       <div class="form-group">
                         <button
                           class="btn btn-primary"
-                          (click)="onSubmit()"
+                          (click)="onSubmit(investmentProposalForm)"
                           type="submit"
                         >
                           Enviar requisición de pago
@@ -128,6 +161,7 @@
                       </div>
                     </div>
                   </div>
+                  <br />
                 </form>
               </div>
             </div>

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

@@ -1,7 +1,7 @@
 import { Component, OnInit, ComponentFactoryResolver } from "@angular/core";
 import { FileUploader, FileLikeObject } from "ng2-file-upload";
 import { concat } from "rxjs";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { HttpClient, HttpEventType } from "@angular/common/http";
 import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
 import { InvestmentProposalWorkflowService } from "@app/services/investment-proposal-workflow.service";
@@ -10,6 +10,7 @@ import { CatalogsService } from "@app/services/catalogs.service";
 import { ActivatedRoute } from "@angular/router";
 import { InvestmentsService } from "@app/services/investments.service";
 import Swal from "sweetalert2";
+import { IAngularMyDpOptions } from "angular-mydatepicker";
 
 @Component({
   selector: "app-payment-requirement",
@@ -18,6 +19,37 @@ import Swal from "sweetalert2";
 })
 export class PaymentRequirementComponent implements OnInit {
   title: string = "Formulario de requisición de pago";
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
 
   form: FormGroup;
   fileData: File = null;
@@ -35,6 +67,9 @@ export class PaymentRequirementComponent implements OnInit {
   cuenta_bancaria: string = "";
   fecha_pago: string = "";
   fecha_vencimiento: string = "";
+  investmentProposalForm: FormGroup;
+  submitted: boolean = false;
+  paymentObject: Object;
 
   constructor(
     private http: HttpClient,
@@ -45,7 +80,10 @@ export class PaymentRequirementComponent implements OnInit {
     private loadInstrumentsService: InstrumentsService,
     private catalogService: CatalogsService,
     private route: ActivatedRoute,
-    private investmentService: InvestmentsService
+    private investmentService: InvestmentsService,
+    private formBuilder: FormBuilder,
+
+    private investmentsService: InvestmentsService
   ) {}
 
   ngOnInit() {
@@ -69,6 +107,11 @@ export class PaymentRequirementComponent implements OnInit {
         this.fecha_pago = resp["result"]["fecha_pago"];
         this.fecha_vencimiento = resp["result"]["fecha_pago"];
       });
+
+    this.investmentProposalForm = this.formBuilder.group({
+      comentario: [""],
+      fecha_pago: ["", Validators.required]
+    });
   }
 
   fileProgress(fileInput: any) {
@@ -90,35 +133,76 @@ export class PaymentRequirementComponent implements OnInit {
     };
   }
 
-  onSubmit() {
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  onSubmit(form: any) {
+    this.submitted = true;
+    console.log(form);
+    if (!form.valid) {
+      return false;
+    }
+
+    this.paymentObject = {
+      fecha_pago: form.value.fecha_pago.singleDate.formatted,
+      id_inversion: this.investmentProposalID
+      //comentario:
+    };
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
     const formData = new FormData();
     formData.append("id_inversion", this.investmentProposalID);
     formData.append("evidencia", this.fileData);
     formData.append("step", "next");
-    formData.append("comentario", "comentario");
+    formData.append("comentario", form.value.comentario);
 
-    this.investmentService.sendProposalInvestmentToNextStep(formData).subscribe(
-      success => {
-        if (success) {
+    this.investmentsService
+      .updatePaymentInfoProposalInvestment(
+        this.investmentProposalID,
+        this.paymentObject
+      )
+      .subscribe(
+        success => {
+          this.investmentService
+            .sendProposalInvestmentToNextStep(formData)
+            .subscribe(
+              success => {
+                if (success) {
+                  Swal.fire({
+                    allowOutsideClick: false,
+                    icon: "success",
+                    showCancelButton: false,
+                    title: "Exito",
+                    confirmButtonText: "La propuesta ha sido liquidada"
+                  }).then(result => {
+                    Swal.close();
+                    window.location.href = "#/investment-proposals";
+                  });
+                }
+              },
+              err => {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error en el servidor",
+                  text: err.message
+                });
+              }
+            );
+        },
+        err => {
           Swal.fire({
-            allowOutsideClick: false,
-            icon: "success",
-            showCancelButton: false,
-            title: "Exito",
-            confirmButtonText: "La propuesta ha sido liquidada"
-          }).then(result => {
-            Swal.close();
-            window.location.href = "#/investment-proposals";
+            icon: "error",
+            title: "Error en el servidor",
+            text: err.message
           });
         }
-      },
-      err => {
-        Swal.fire({
-          icon: "error",
-          title: "Error en el servidor",
-          text: err.message
-        });
-      }
-    );
+      );
   }
 }

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

@@ -157,8 +157,8 @@
                     <div class="timeline-panel">
                       <div class="timeline-heading">
                         <span class="badge badge-warning">Instrumento</span>
-                        <ng-template instrument-host></ng-template>
                       </div>
+                      <ng-template instrument-host></ng-template>
                     </div>
                   </li>
                 </ul>

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

@@ -267,6 +267,13 @@ export class ResultComponent implements OnInit {
 
   // Guardar propuesta de inversion (Crear)
   submit() {
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
     if (this.investmentProposalID != undefined) {
     } else {
       this.investmentService.createProposalInvestment(this.inversion).subscribe(
@@ -352,6 +359,13 @@ export class ResultComponent implements OnInit {
 
   // Actualizar la propuesta de inversion si se han realizado cambios
   update_proposal() {
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
     this.investmentService
       .updateProposalInvestment(this.investmentProposalID, this.inversion)
       .subscribe(

src/app/components/login/login.component.ts

@@ -53,7 +53,7 @@ export class LoginComponent implements OnInit {
       .subscribe(
         success => {
           if (success) {
-            window.location.href = "#/dashboard";
+            window.location.href = "#/investment-proposals";
           } else {
             Swal.fire({
               icon: "warning",

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

@@ -24,7 +24,8 @@ export const ROUTES: RouteInfo[] = [
     icon: "wb_incandescent",
     class: ""
     //allowed_roles: [2, 3]
-  },
+  }
+  /*,
   {
     path: "/investments",
     title: "Inversiones",

src/app/services/investments.service.ts

@@ -97,6 +97,20 @@ export class InvestmentsService {
       );
   }
 
+  updatePaymentInfoProposalInvestment(
+    id: string,
+    inversion: Object
+  ): Observable<boolean> {
+    return this.http
+      .put<any>(`${environment.productionApiUrl}/pagos/${id}`, inversion)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   getPaymentInfoProposalInvestment(id: string): Observable<boolean> {
     return this.http
       .get<any>(`${environment.productionApiUrl}/pagos/${id}`)

src/styles.scss

@@ -81,11 +81,14 @@ textarea.form-control {
 
   h4 {
     margin: 0 !important;
+    font-size: 1rem;
   }
 
   .field {
     margin-bottom: 10px;
-    color: #104911;
+    color: green;
+    font-weight: bold;
+    font-size: 1.25rem;
   }
 
   &:before {
@@ -129,6 +132,7 @@ textarea.form-control {
 
       .timeline-heading {
         margin-bottom: 10px;
+        font-size: 1.5rem;
       }
     }
     .timeline-panel:before {
@@ -191,14 +195,18 @@ textarea.form-control {
 }
 
 .instrument-calcs {
-  border: 1px solid #999;
   background: #eee;
+}
+
+.instrument-calcs,
+.instrument-calcs-summary {
+  border: 1px solid #999;
   padding: 10px;
   border-radius: 5px;
 
   h4 {
     margin: 0;
-    font-size: 1rem;
+    font-size: 0.9rem;
   }
 
   .field {
@@ -215,6 +223,12 @@ textarea.form-control {
   margin-bottom: 10px;
 }
 
+.badge-custom-instrument {
+  font-size: 1rem;
+  padding: 0.3em 0.7em;
+  margin-bottom: 5px;
+}
+
 .cete-table-container {
   position: relative;
   overflow: auto;