reward overview workd.

src/app/app-routing.module.ts

 import {ClientLoanListComponent} from './client-loan-list/client-loan-list.component';
 import {ClientProfileComponent} from './client-profile/client-profile.component';
 import {E403Component} from './e403/e403.component';
+import {ListAllRewardsComponent} from './list-all-rewards/list-all-rewards.component';
 
 
 const routes: Routes = [
   {path : 'broker-profile', component: BrokerProfileComponent,  canActivate: [AuthGuard]},
   {path : 'client-loan-list', component: ClientLoanListComponent, canActivate: [AuthGuard] },
   {path : 'client-profile', component: ClientProfileComponent, canActivate: [AuthGuard] },
+  {path : 'list-all-rewards', component: ListAllRewardsComponent, canActivate: [AuthGuard] },
   {path : 'e403', component: E403Component, },
 ];
 

src/app/app.module.ts

 import { ClientProfileComponent } from './client-profile/client-profile.component';
 import { E403Component } from './e403/e403.component';
 import {FileSelectModule, UploadModule} from '@progress/kendo-angular-upload';
+import { ListAllRewardsComponent } from './list-all-rewards/list-all-rewards.component';
 
 
 
     BrokerProfileComponent,
     ClientLoanListComponent,
     ClientProfileComponent,
-    E403Component
+    E403Component,
+    ListAllRewardsComponent
   ],
   imports: [
     BrowserModule,

src/app/auth/auth.component.html

 <div class='parent'>
     <div class="form_login">
+        <img src="../../assets/img/logo.png">
         <form *ngIf='!loading' class="k-form " [formGroup]="userForm" (ngSubmit)="submitForm()">
             <fieldset class="k-form-fieldset">
                 <legend class="k-form-legend">Login to Supercredit</legend>

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

+<div class="container outer">
 <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
 <div class="vertical-spacer"></div>
-<div class="container">
+<div class="container inner">
   <div class="row justify-content-center">
     <div class="col-sm-12">
       <h5> Edit : {{broker.First + ' ' + broker.Last}} </h5>
        <button kendoButton (click)="close('Ok, I got it')" primary="true">Yes</button>
   </kendo-dialog-actions>
 </kendo-dialog>
+</div>

src/app/broker-profile/broker-profile.component.scss

-div.container {
+.container.outer{
+  width:100%;
+  max-width:100vw;
+  background: url('/assets/img/body_bg.jpg') no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  opacity:0.98;
+}
+.container.inner {
   max-width: 500px;
+  min-height: calc(100vh - 48px);
+  /* background-color:chartreuse; */
 }
 
 div.vertical-spacer {

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

-<p>client-loan-list works!</p>
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-sm-4 loans" *ngFor="let loan of Loans">
+      <kendo-card [width]="'260px'">
+        <kendo-card-header class="k-hbox">
+          <kendo-avatar width="40px" height="40px" [shape]="'circle'" [icon]="'attachment'">  </kendo-avatar>
+          <div>
+            <h1 kendoCardTitle> {{ loan.Amount | currency }} </h1>
+            <span *ngIf="loan.Status != 'none'" class="badge badge-success">{{loan .Status}}</span>
+          </div>
+        </kendo-card-header>
+        <kendo-card-body>
+        <b> Address: </b> <p> {{ loan.Item }} </p>
+        </kendo-card-body>
+        <kendo-card-actions>
+          <comment-actions>
+            <p *ngIf="goodDate(loan.Settlement) " ><b> Settlement </b> {{ loan.Settlement  | date }} </p>
+          </comment-actions>
+        </kendo-card-actions>
+      </kendo-card>
+    </div>
+  </div>
+</div>

src/app/client-loan-list/client-loan-list.component.scss

+.loans {
+  margin-top: 10px;
+  height: 220px;
+  margin-bottom:20px;
+}
+
+kendo-card {
+  height:220px;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}

src/app/client-loan-list/client-loan-list.component.ts

 import { Component, OnInit } from '@angular/core';
+import {LoanModel} from '../models/loan.model';
+import {LoanSingleService} from '../service/loan.single.service';
+import {AuthService} from '../service/auth.service';
 
 @Component({
   selector: 'app-client-loan-list',
 })
 export class ClientLoanListComponent implements OnInit {
 
-  constructor() { }
+  public Loans: LoanModel[] =[];
+
+  constructor(private ls: LoanSingleService, private auth: AuthService) { }
 
   ngOnInit(): void {
+    this.ls.getLoanByClient(this.auth.loggedIn.user.Id).subscribe(
+      resp => {
+        this.Loans = [];
+        resp.forEach( v => {
+           const l = new LoanModel(v.Id);
+           l.Response = v;
+           this.Loans.push(l);
+        });
+      }
+    );
   }
 
+  public goodDate(d: Date): boolean {
+    const n = new Date();
+    return d.getFullYear() + 10 > n.getFullYear(); // shouldn't be 10 years old.
+  }
 }

src/app/list-all-rewards/list-all-rewards.component.html

+<kendo-chart [legend]="seriesLabels" >
+  <kendo-chart-axis-defaults>
+    <kendo-chart-axis-defaults-labels format="c0">
+    </kendo-chart-axis-defaults-labels>
+  </kendo-chart-axis-defaults>
+  <kendo-chart-title text="Reward vs Income (AUD) "></kendo-chart-title>
+  <kendo-chart-category-axis>
+    <kendo-chart-category-axis-item [categories]="rvi.Categories">
+    </kendo-chart-category-axis-item>
+  </kendo-chart-category-axis>
+  <kendo-chart-series >
+    <kendo-chart-series-item *ngFor="let d of rvi.Data; let idx=index"
+                             type="bar"
+                             [gap]="1" [spacing]="0.05" [data]="rvi.Data[idx]"
+                             [labels]="seriesLabels"
+    >
+    </kendo-chart-series-item>
+  </kendo-chart-series>
+</kendo-chart>

src/app/list-all-rewards/list-all-rewards.component.scss

+kendo-chart {
+  height: 600px;
+}

src/app/list-all-rewards/list-all-rewards.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListAllRewardsComponent } from './list-all-rewards.component';
+
+describe('ListAllRewardsComponent', () => {
+  let component: ListAllRewardsComponent;
+  let fixture: ComponentFixture<ListAllRewardsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ListAllRewardsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListAllRewardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/list-all-rewards/list-all-rewards.component.ts

+import { Component, OnInit } from '@angular/core';
+import {AuthService} from '../service/auth.service';
+import {HttpClient} from '@angular/common/http';
+import {RewardVsIncomeModel} from '../models/reward-vs-incom.model';
+import {SeriesLabels} from '@progress/kendo-angular-charts';
+
+@Component({
+  selector: 'app-list-all-rewards',
+  templateUrl: './list-all-rewards.component.html',
+  styleUrls: ['./list-all-rewards.component.scss']
+})
+export class ListAllRewardsComponent implements OnInit {
+
+  public rvi: RewardVsIncomeModel = new RewardVsIncomeModel();
+  public seriesLabels: SeriesLabels = {
+    visible: true, // Note that visible defaults to false
+    padding: 3,
+    font: 'bold 9px Arial, sans-serif',
+    format: 'c0'
+  };
+
+  constructor(private auth: AuthService, private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.http.get<RewardVsIncomeModel>(this.auth.getUrl('chart/reward-vs-income-monthly')).subscribe(
+      resp => { console.log(resp); this.rvi = resp; }
+    );
+  }
+
+}

src/app/main-menu-items.ts

         text: 'Reward',
         icon: 'percent',
         items: [
-            { text: 'List All',  icon: 'table', url: '#' },
-            { text: 'By Broker', icon: 'table', url: '#' },
+            { text: 'Overview',  icon: 'table', url: './#list-all-rewards#' },
+            { text: 'By Broker', icon: 'table', url: './#list-reward-by-broker' },
             { text: '--', separator: 'true'  },
             { text: 'Lender Monthly Uploads', icon: 'attachment' , url: './#uploads'}
         ]
         text: 'Clients',
         icon: 'user',
         items: [
-            { text: 'Add ', icon: 'plus', url: '#' },
-            { text: 'List All', fa: faIdCard },
-            { text: '--', separator: 'true'  },
-            { text: 'Search' , icon: 'search'},
-            { text: '--', separator: 'true'  },
-            { text: 'Broadcast', icon: 'email' },
+            { text: 'Add ', icon: 'plus', url: './#add-client' },
+            { text: 'List All', fa: faIdCard , url: './#list-all-client'},
+            { text: '--', separator: 'true' },
+            { text: 'Broadcast', icon: 'email', url: './#send-to-all-client'},
         ]
     },
 

src/app/models/reward-vs-incom.model.ts

+
+
+export class RewardVsIncomeModel {
+  Categories: string[];
+  Data: number[][2];
+}

src/app/service/auth.service.ts

 
     public apiUrl = 'https://svr2021.lawipac.com:8080/api/v1/';
     public apiWsUrl = 'wss://svr2021.lawipac.com:8080/api/v1/ws';
-    // public apiUrl = 'https://c5016.biukop.com.au:8080/api/v1/';
-    // public apiWsUrl = 'wss://c5016.biukop.com.au:8080/api/v1/ws';
+    //public apiUrl = 'https://c5016.biukop.com.au:8080/api/v1/';
+    //public apiWsUrl = 'wss://c5016.biukop.com.au:8080/api/v1/ws';
     public loggedIn = ApiV1LoginResponse.EmptyNew();
     loginSuccess = new EventEmitter <ApiV1LoginResponse>();
 

src/app/service/loan.single.service.ts

     return this.http.delete<string>(this.auth.getUrl('loan/' + id));
   }
 
+
+  public getLoanByClient(id: string): Observable<LoanModel[]> {
+    return this.http.get<LoanModel[]>(this.auth.getUrl('loan-by-client/' + id));
+  }
+
 }