ngx-admin/src/app/pages/dashboard/dashboard.component.html

<div class="row">
  <div class="col-lg-3">
    <ngx-status-card title="Light" type="primary">
      <i class="ion-ios-lightbulb-outline"></i>
    </ngx-status-card>
  </div>

  <div class="col-lg-3">
    <ngx-status-card title="Roller Shades" type="success">
      <i class="ion-ios-photos-outline"></i>
    </ngx-status-card>
  </div>

  <div class="col-lg-3">
    <ngx-status-card title="Wireless Audio" type="info">
      <i class="ion-ios-game-controller-b-outline"></i>
    </ngx-status-card>
  </div>

  <div class="col-lg-3">
    <ngx-status-card title="Coffee Maker" type="warning">
      <i class="ion-ios-lightbulb-outline"></i>
    </ngx-status-card>
  </div>
</div>

<div class="row">
  <div class="col-lg-3">
    <ngx-temperature></ngx-temperature>
  </div>

  <div class="col-lg-9">
    <ngx-electricity></ngx-electricity>
  </div>
</div>

<div class="row">
  <div class="col-lg-9">
    <ngx-rooms></ngx-rooms>
  </div>

  <div class="col-lg-3">
    <ngx-contacts></ngx-contacts>
  </div>
</div>

<div class="row">
  <div class="col-lg-3">
    <nb-card size="xsmall" class="solar-card">
      <nb-card-header>Solar Energy Consumption</nb-card-header>
      <nb-card-body>
        <ngx-solar [chartValue]="72"></ngx-solar>
      </nb-card-body>
    </nb-card>

    <ngx-team></ngx-team>
  </div>

  <div class="col-lg-3">
    <ngx-traffic></ngx-traffic>
    <ngx-weather></ngx-weather>
  </div>

  <div class="col-lg-6">
    <ngx-security-cameras></ngx-security-cameras>
  </div>
</div>