datasurvey/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html

<div class="content">
  <div class="container-fluid">
    <div class="row justify-content-around">
      <div class="col-lg-3 col-sm-6">
        <div class="card">
          <div class="card-content">
            <div class="row">
              <div class="col-xs-5 w-25 px-1">
                <div class="icon-big icon-success text-center">
                  <fa-icon [icon]="faWallet"></fa-icon>
                </div>
              </div>
              <div class="col-xs-7 w-50">
                <div class="numbers">
                  <p class="ds-title">Ganancias por plantillas</p>
                  {{ gananciasTotales | currency: 'CR' }}
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <hr />
            <br />
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6">
        <div class="card">
          <div class="card-content">
            <div class="row justify-content-center">
              <div class="col-xs-5 w-25 px-1">
                <div class="icon-big icon-users-active text-center">
                  <fa-icon [icon]="faUsers"></fa-icon>
                </div>
              </div>
              <div class="col-xs-7 w-75">
                <div class="numbers">
                  <p class="ds-title">Cantidad usuarios activos</p>
                  {{ cantUsuarioActivos }}
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <hr />
            <br />
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6">
        <div class="card">
          <div class="card-content">
            <div class="row justify-content-center">
              <div class="col-xs-4 w-25 px-1">
                <div class="icon-big icon-users-block text-center">
                  <fa-icon [icon]="faUsersSlash"></fa-icon>
                </div>
              </div>
              <div class="col-xs-5 w-75">
                <div class="numbers">
                  <p class="ds-title">Cantidad usuarios bloqueados</p>
                  {{ cantUsuarioBloqueados }}
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <hr />
            <br />
          </div>
        </div>
      </div>
    </div>
    <div class="row justify-content-around por-categoria">
      <div class="col-md-5">
        <div class="grafico-encuestas-fecha">
          <div class="card">
            <h1 class="ds-title">Cantidad de encuestas publicadas por mes</h1>

            <div class="ct-chart ct-chart-line"></div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card encuestas-por-categoria">
          <div class="card-header w-100">
            <h4 class="ds-title">Cantidad de Encuestas Publicadas por Categoria</h4>
          </div>
          <div class="card-content">
            <div class="row">
              <div class="col-md-12">
                <div class="table-responsive">
                  <table class="table">
                    <tbody>
                      <tr *ngFor="let categoria of categorias; let i = index; trackBy: trackId">
                        <td>{{ categoria.nombre }}</td>

                        <td class="text-right">
                          {{ encuestasPublicadasCategoria[i] }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card encuestas-por-categoria">
          <div class="card-header w-100">
            <h4 class="ds-title">Cantidad de Encuestas Finalizadas por Categoria</h4>
          </div>
          <div class="card-content">
            <div class="row">
              <div class="col-md-12">
                <div class="table-responsive">
                  <table class="table">
                    <tbody>
                      <tr *ngFor="let categoria of categorias; let i = index; trackBy: trackId">
                        <td>{{ categoria.nombre }}</td>

                        <td class="text-right">
                          {{ encuestasFinalzadasCategoria[i] }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>