cic-staff-client/src/app/pages/pages.component.html

<!-- Begin page -->
<div class="wrapper">
  <app-sidebar></app-sidebar>

  <!-- ============================================================== -->
  <!-- Start Page Content here -->
  <!-- ============================================================== -->

  <div id="content">
    <app-topbar></app-topbar>
    <!-- Start Content-->
    <div class="container-fluid" appMenuSelection>
      <div class="card col-12">
        <div class="card-header">
          <form class="form-inline">
            <mat-form-field appearance="outline">
              <mat-label>Filter by user : </mat-label>
              <mat-select class="ml-2" id="filterUser">
                <mat-option value="default">SELECT ATTRIBUTE</mat-option>
                <mat-option value="2">2</mat-option>
                <mat-option value="3">3</mat-option>
                <mat-option value="4">4</mat-option>
                <mat-option value="5">5</mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="outline" class="ml-auto">
              <mat-label>Filter by Date</mat-label>
              <input matInput type="text" id="filterDate" placeholder="Date">
            </mat-form-field>
            <button mat-raised-button type="submit" class="btn btn-outline-secondary ml-3"> FILTER </button>
          </form>
        </div>
        <div class="row">
          <div class="card col-md-8">
            <div class="card-body">
              <div style="display: block">
                <canvas baseChart
                        [datasets]="lineChartData"
                        [labels]="lineChartLabels"
                        [options]="lineChartOptions"
                        [colors]="lineChartColors"
                        [legend]="lineChartLegend"
                        [chartType]="lineChartType"
                        (chartHover)="chartHovered($event)"
                        (chartClick)="chartClicked($event)">
                </canvas>
              </div>
            </div>
            <hr>
            <div class="card-body row">
              <div class="col-md-3 text-center">
                <h4>MASTER WALLET BALANCE</h4>
                <p>{{10000000 | number}} RCU</p>
              </div>
              <div class="col-md-3 text-center">
                <h4>TOTAL DISTRIBUTED</h4>
                <p>{{disbursements * 1000 | number}} RCU</p>
              </div>
              <div class="col-md-3 text-center">
                <h4>TOTAL SPENT</h4>
                <p>{{transactions * 100000 | number}} RCU</p>
              </div>
              <div class="col-md-3 text-center">
                <h4>TOTAL USERS</h4>
                <p>{{users * 10 | number}} users</p>
              </div>
            </div>
            <hr>
            <div class="card-body">
              <div style="display: block">
                <canvas baseChart
                        [datasets]="barChartData"
                        [labels]="barChartLabels"
                        [options]="barChartOptions"
                        [legend]="barChartLegend"
                        [chartType]="barChartType">
                </canvas>
              </div>
            </div>
          </div>
          <div class="card col-md-4">
            <div class="card-body text-center">
              <h4>TRANSFER USAGES</h4>
              <p>Transfer Usages Will Appear Here</p>
            </div>
            <hr>
            <div class="card-body">
              <h4 class="text-center">PARTNER LIVE FEED</h4>

            </div>
          </div>
        </div>
      </div>
    </div>
    <app-footer appMenuSelection></app-footer>
  </div>
  <!-- ============================================================== -->
  <!-- End Page content -->
  <!-- ============================================================== -->
</div>