frontend-inversiones/src/app/components/incomes/incomes.component.html

<h2 class="floating-title">{{ title }}</h2>

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 align-right">
        <div class="align-container">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a [routerLink]="['/']">Dashboard</a>
              </li>
              <li class="breadcrumb-item">Inversiones activas</li>
            </ol>
          </nav>
        </div>
      </div>

      <div class="col-12">
        <div class="align-container">
          <h4><b>Listado de inversiones</b></h4>
          <br />
          <div class="row">
            <div class="col-lg-4 col-sm-4 mr-1">
              <div class="form-group">
                <label for="instrumento">Instrumento: </label>

                <select
                  class="custom-select"
                  name="instrumento"
                  (change)="filter_by_instrument($event)"
                >
                  <option value="">Seleccione una opción</option>
                  <option
                    *ngFor="let item of instrumentTypes"
                    [value]="item.nombre"
                  >
                    {{ item.nombre }}</option
                  >
                </select>
              </div>
            </div>

            <div class="col-lg-4 col-sm-6 ml-1">
              <div class="form-group">
                <label for="instrumento">Rango de fechas: </label>

                <div class="input-box-container">
                  <p>
                    <i class="far fa-calendar" aria-hidden="true"></i>
                  </p>
                  <input
                    class="input-box form-control"
                    placeholder="Seleccione una fecha"
                    angular-mydatepicker
                    name="fecha_rango"
                    (click)="dp.toggleCalendar()"
                    (dateChanged)="filter_by_date($event)"
                    [options]="myDpOptions"
                    #dp="angular-mydatepicker"
                  />
                </div>
              </div>
            </div>
          </div>
          <br />

          <div class="form-group">
            <label for="filter" class="control-label">Filtro rápido: </label>
            <input
              name="filter"
              (keyup)="applyFilter($event)"
              class="form-control input-md"
              placeholder="Codigo inversion, empresa"
            />
          </div>
          <br />

          <div class="example-container mat-elevation-z8">
            <div class="example-table-container table-responsive">
              <table mat-table [dataSource]="dataSource" class="example-table">
                <!-- Name Column -->
                <ng-container matColumnDef="codigo_inversion">
                  <th mat-header-cell *matHeaderCellDef>Codigo</th>
                  <td mat-cell *matCellDef="let row">
                    {{ row.codigo_inversion }}
                  </td>
                </ng-container>
                <!-- Country Column -->
                <ng-container matColumnDef="nombre_inversion">
                  <th mat-header-cell *matHeaderCellDef>Nombre inversión</th>
                  <td mat-cell *matCellDef="let row">
                    {{ row.nombre_inversion }}
                  </td>
                </ng-container>

                <!-- Country Column -->
                <ng-container matColumnDef="fecha_pago">
                  <th mat-header-cell *matHeaderCellDef>Fecha de pago</th>
                  <td mat-cell *matCellDef="let row">
                    {{ row.fecha_pago }}
                  </td>
                </ng-container>

                <!-- Country Column -->
                <ng-container matColumnDef="tipo_instrumento">
                  <th mat-header-cell *matHeaderCellDef>Instrumento</th>
                  <td mat-cell *matCellDef="let row">
                    {{ row.tipo_instrumento }}
                  </td>
                </ng-container>
                <!-- Country Column -->
                <ng-container matColumnDef="empresa">
                  <th mat-header-cell *matHeaderCellDef>Empresa</th>
                  <td mat-cell *matCellDef="let row">
                    {{ row.empresa }}
                  </td>
                </ng-container>

                <!-- Country Column -->
                <ng-container matColumnDef="estado">
                  <th mat-header-cell *matHeaderCellDef>Estado</th>
                  <td mat-cell *matCellDef="let row">
                    {{ row.estado }}
                  </td>
                </ng-container>

                <!--  Column -->
                <ng-container matColumnDef="id_inversion">
                  <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
                  <td mat-cell *matCellDef="let row">
                    <div class="action-buttons">
                      <a
                        title="Detalle de la inversion"
                        class="btn btn-primary btn-custom-small"
                        (click)="view_investment_proposal(row.id_inversion)"
                      >
                        <i class="fas fa-info"></i>
                      </a>
                    </div>
                  </td>
                </ng-container>
                <ng-container matColumnDef="proyeccion_ingreso">
                  <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
                  <td mat-cell *matCellDef="let row">
                    <div class="action-buttons">
                      <a
                        title="Ingresos"
                        class="btn btn-success btn-custom-small"
                        (click)="
                          go_to_instrument_url(
                            row.id_inversion,
                            row.id_proyeccion_ingreso_instrumento,
                            row.fecha_proyeccion_pago
                          )
                        "
                      >
                        <i class="fas fa-hand-holding-usd"></i>
                        Ingresos
                      </a>
                    </div>
                  </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>
      <br />
    </div>
  </div>
</div>