summary page - dashboard is ready to go.

src/app/app.component.html

 <kendo-appbar id='topBar' *ngIf='login' class='appbar' [position]="'top'" [positionMode]="'sticky'">
   <kendo-appbar-section>
-    <kendo-menu [items]="items" (select)="onSelect($event)"> 
+    <kendo-menu [items]="items" (select)="onSelect($event)">
       <ng-template kendoMenuItemTemplate let-item="item">
         <span class='main-menu-item'>
           <fa-icon  *ngIf="menuItemHasFontawesome(item)" [icon]="item.fa"></fa-icon> &nbsp;
 
 <router-outlet></router-outlet>
 
-<!-- <div class="vimeo-wrapper">
-  <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0" frameborder="0"
-  allow="autoplay; fullscreen" allowfullscreen></iframe>
-  
-  <div class="overlay"></div>
-</div> -->
+<!--<div class="vimeo-wrapper">-->
+<!--  <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0" frameborder="0"-->
+<!--  allow="autoplay; fullscreen" allowfullscreen></iframe>-->
+
+<!--  <div class="overlay"></div>-->
+<!--</div>-->

src/app/chart-recent-ten-loans/chart-recent-ten-loans.component.html

 
   <kendo-grid-column
     field="OffsetBalance"
-    title="Repayment Progress"
+    title="Offset Percentage"
     [width]="230"
     [resizable]="false"
     filter="numeric"

src/app/chart-top-brokers/chart-top-brokers.component.html

 <kendo-grid [data]="gridData | async "  [scrollable]="'none'">
   <kendo-grid-column field="Rank" title="ID" width="40">
   </kendo-grid-column>
-  <kendo-grid-column field="First" title="First" width="250">
+  <kendo-grid-column field="First" title="Broker Name" minResizableWidth="250" >
     <ng-template kendoGridCellTemplate let-dataItem>
       <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem)}"></div>
       <div class="customer-name"> {{ dataItem.First }} , {{ dataItem.Last }} </div>
     </ng-template>
   </kendo-grid-column>
-  <kendo-grid-column field="NumOfLoans" title="NumOfLoans">
+  <kendo-grid-column field="License" title="License" width="80">
   </kendo-grid-column>
-  <kendo-grid-column field="NumOfSettledLoans" title="NumOfSettledLoans" width="80">
+  <kendo-grid-column field="Login" title="Login" width="80">
   </kendo-grid-column>
-  <kendo-grid-column field="NumOfUnSettledLoans" title="NumOfUnSettledLoans" width="80">
+  <kendo-grid-column field="Organization" title="Organization" width="80">
+  </kendo-grid-column>
+  <kendo-grid-column field="NumOfLoans" title="Num Of Loans" width="50" [style]="{'text-align':'center'}" >
+  </kendo-grid-column>
+  <kendo-grid-column field="NumOfUnSettledLoans" title="Non-Settled" width="80" [style]="{'text-align':'center'}">
   </kendo-grid-column>
   <kendo-grid-column field="TotalReward" title="TotalReward" width="120">
     <ng-template kendoGridCellTemplate let-dataItem>

src/app/chart-top-brokers/chart-top-brokers.component.scss

 .fullheight_grid {
   height: calc(100vh - 48px) !important;
 }
+
+.fuck-center{
+  text-align: center;
+}

src/app/dashboard/dashboard.component.html

     </div>
 
     <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
-    <bkp-divider><kendo-icon [name]="'sum'"> </kendo-icon> &nbsp; Pending Payments</bkp-divider>
+    <bkp-divider><kendo-icon [name]="'sum'"> </kendo-icon> &nbsp; Top Brokers</bkp-divider>
 
     <div class="row">
       <div class="col-sm-12">

src/app/models/top-broker.model.ts

   First: string;
   Last: string;
 
+  Login:string;
+  Organizatin: string;
+  License:string;
+
   NumOfLoans: number;
   NumOfSettledLoans: number;
   NumOfUnSettledLoans: number;