broker earnings displayed successfully

src/app/auth/auth.component.html

 <div class='parent'>
     <div class="form_login">
-        <form *ngIf='!loading' class="k-form " [formGroup]="userForm">
+        <form *ngIf='!loading' class="k-form " [formGroup]="userForm" (ngSubmit)="submitForm()">
             <fieldset class="k-form-fieldset">
                 <legend class="k-form-legend">Login to Supercredit</legend>
                 <kendo-formfield [showErrors]="'initial'">
                 </kendo-formfield>
 
                 <div class="k-form-buttons k-buttons-end">
-                    <button class="k-button k-primary" (click)="submitForm()">Submit</button>
-                </div>                
+                    <button class="k-button k-primary" >Submit</button>
+                </div>
             </fieldset>
         </form>
 
         >
         </kendo-loader>
     </div>
-</div>
+</div>

src/app/auth/auth.component.ts

   }
 
   // tslint:disable-next-line:typedef
-  submitForm() {
-    // console.log(this.userForm);
+  submitForm(): void {
     this.loading = true;
     this.authService.login(this.userForm.value.email, this.userForm.value.password);
   }

src/app/broker-loan-list/broker-loan-list.component.html

   >
     <kendo-grid-column field="Id"></kendo-grid-column>
 
-    <kendo-grid-column field="Item"></kendo-grid-column>
+    <kendo-grid-column field="Client" width="220" title="Client(s)" [class]="'topAlign'" [headerClass]="'colClient'">
+      <ng-template kendoGridCellTemplate let-dataItem>
+        <div *ngFor="let p of dataItem.Client, let idx=index ">
+          <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.ClientIds[idx])}"></div>
+          <div class="customer-name"> {{ p }}</div>
+        </div>
+      </ng-template>
+    </kendo-grid-column>
+
+
+
+    <kendo-grid-column field="Item" Title="Loan Target"></kendo-grid-column>
+    <kendo-grid-column field="Status">
+      <ng-template kendoGridCellTemplate let-dataItem>
+        <span *ngIf="dataItem.Status != 'none'" class="badge badge-success">{{dataItem.Status}}</span>
+      </ng-template>
+
+    </kendo-grid-column>
 
     <kendo-grid-column field="Amount">
       <ng-template kendoGridCellTemplate let-dataItem>
       </ng-template>
     </kendo-grid-column>
 
-    <kendo-grid-column field="broker">
+    <kendo-grid-column field="broker" Title="Broker(s)">
       <ng-template kendoGridCellTemplate let-dataItem>
         <div *ngFor="let p of dataItem.Broker, let idx=index ">
           <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.BrokerIds[idx])}"></div>

src/app/broker-reward/broker-reward.component.html

-<p>broker-reward works!</p>
+<kendo-grid
+  [data]="gridData"
+>
+  <kendo-grid-column field="Id"></kendo-grid-column>
+
+  <kendo-grid-column field="Amount">
+    <ng-template kendoGridCellTemplate let-dataItem>
+      <span >{{ dataItem.Amount | currency }}</span>
+    </ng-template>
+  </kendo-grid-column>
+  <kendo-grid-column field="Description"></kendo-grid-column>
+
+  <kendo-grid-column field="Item" Title="From Loan"></kendo-grid-column>
+  <kendo-grid-column field="Status">
+    <ng-template kendoGridCellTemplate let-dataItem>
+      <span *ngIf="dataItem.Status != 'none'" class="badge badge-success">{{dataItem.Status}}</span>
+    </ng-template>
+  </kendo-grid-column>
+
+  <kendo-grid-column field="Ts">
+    <ng-template kendoGridCellTemplate let-dataItem >
+      <div *ngIf="dataItem.Settlement != null" >
+        {{  dataItem.Ts | date: 'yyyy-MM-dd' }}
+      </div>
+    </ng-template>
+  </kendo-grid-column>
+
+
+  <kendo-grid-column field="Settlement">
+    <ng-template kendoGridCellTemplate let-dataItem >
+      <div *ngIf="dataItem.Settlement != null" >
+        {{  dataItem.Settlement | date: 'yyyy-MM-dd' }}
+      </div>
+    </ng-template>
+  </kendo-grid-column>
+
+
+</kendo-grid>

src/app/broker-reward/broker-reward.component.ts

 import { Component, OnInit } from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {GridDataResult} from '@progress/kendo-angular-grid';
+import {Observable} from 'rxjs';
+import {AuthService} from '../service/auth.service';
+import {map} from 'rxjs/operators';
+import {RewardByUserModel} from '../models/reward-by-user.model';
 
 @Component({
   selector: 'app-broker-reward',
 })
 export class BrokerRewardComponent implements OnInit {
 
-  constructor() { }
+  public gridData: RewardByUserModel[] = [] ;
+
+  constructor(private http: HttpClient, private auth: AuthService ) { }
 
   ngOnInit(): void {
+    this.gridData = [];
+    this.http.get<RewardByUserModel[]>(this.auth.getUrl('user-reward/')).subscribe(
+      rsp => {
+        rsp.forEach(v => {
+          this.gridData.push(new RewardByUserModel(v));
+        });
+      }
+    );
   }
-
 }

src/app/dashboard/dashboard.component.scss

 .container.outer{
     width:100%;
     max-width:100vw;
-    background: url('../../assets/img/body_bg.jpg') no-repeat center center fixed;
+    background: url('/assets/img/body_bg.jpg') no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;

src/app/models/reward-by-user.model.ts

+export class RewardByUserModel {
+  public Id: number;
+  public Ts: Date;
+  public To: string;
+  public Amount: number;
+  public Description: string;
+  public LoanId: string;
+  public PayOutId: number;
+  public ToFirst: string;
+  public ToMiddle: string;
+  public ToLast: string;
+  public ToTitle: string;
+  public ToDisplay: string;
+  public ToNick: string;
+  public Item: string;
+  public Status: string;
+  public Settlement: Date;
+
+  constructor(payload: Partial<RewardByUserModel>) {
+    this.Id = payload.Id || 0;
+    this.Ts = new Date(payload.Ts);
+    this.To = payload.To || '';
+    this.Amount = payload.Amount || 0;
+    this.Description = payload.Description || '';
+    this.LoanId = payload.LoanId || '';
+    this.PayOutId = payload.PayOutId || 0;
+    this.ToFirst = payload.ToFirst || '';
+    this.ToMiddle = payload.ToMiddle || '';
+    this.ToLast = payload.ToLast || '';
+    this.ToTitle = payload.ToTitle || '';
+    this.ToDisplay = payload.ToDisplay || '';
+    this.ToNick = payload.ToNick || '';
+    this.Item = payload.Item || '';
+    this.Status = payload.Status || '';
+    this.Settlement = new Date(payload.Settlement);
+  }
+}

src/app/models/reward.model.ts

     return this.lc.getUserPhotoUrl(this.From);
   }
 }
+
+
+

src/app/top-bar/top-bar.component.ts

   public initAndSubLogin(): void{
     this.login = this.authService.loggedIn.login;
     this.LoggedInUser = this.authService.loggedIn.user;
-    console.log(this);
+
     this.selectMenuShow(this.authService.loggedIn.role);
-    // console.log('subscribe auto login', this.authService.loggedIn);
+
     this.loginSub = this.authService.loginSuccess.subscribe(
       (rsp: apiV1LoginResponse) => {
         this.login = rsp.login;
         this.LoggedInUser = this.authService.loggedIn.user;
         this.selectMenuShow(rsp.role);
-        console.log ('topbar received auth events', rsp);
+
       }
     );
   }