logout button installed with menu for different type of user;

src/app/dashboard/dashboard.component.scss

 .container.outer{
     width:100%;
-    background: url('../../assets/img/body_bg.jpg') no-repeat center center fixed; 
+    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;          
+    opacity:0.98;
 }
 .container.inner {
     width: 99%;

src/app/loan-edit/basicinfo/basicinfo.component.html

                 <kendo-label [for]="Settlement" [optional]="false" text="Settlement Date"></kendo-label>
                 <kendo-datepicker #Settlement name="Settlement"
                                   [(ngModel)]="Loan.Settlement"
-                                  [min]="minSettlement" [max]="maxSettlement">
+                                  [min]="minSettlement" [max]="maxSettlement" required>
                 </kendo-datepicker>
                 <kendo-formhint>Date settled or expected to be settled</kendo-formhint>
               </kendo-formfield>

src/app/loan-edit/trail-income/trail-income.component.ts

 
     let balance = -1;
     let offsetBalance = -1;
-    if ( this.Loan.PayIn.length >= 0) {
+    if ( this.Loan.PayIn.length > 0) {
       const idx = this.Loan.PayIn.length -1;
       balance = this.Loan.PayIn[idx].Balance;
       offsetBalance = this.Loan.PayIn[idx].OffsetBalance;
   public saveHandler({ sender, rowIndex, formGroup, isNew }): void {
     const v = formGroup.getRawValue();
 
+    if ( this.Loan.Lender === '')  {
+      this.errorOccurred.emit('Lender should not be empty');
+      return;
+    }
+
+    if ( this.Loan.LenderLoanNumber === '')  {
+      this.errorOccurred.emit('Lender Identification should not be empty');
+      return;
+    }
+
     if ( !this.showBalance) { v.Balance = -1; }
     if ( !this.showOffsetBalance) { v.OffsetBalance = -1; }
 

src/app/main-menu-items.ts

-import { faChartArea, faChartPie, faIdCard, faIdCardAlt, faMoneyCheck, faUniversity, faUserCircle } from '@fortawesome/free-solid-svg-icons';
+import { faChartArea, faIdCard, faIdCardAlt, faMoneyCheck, faUniversity, faUserCircle } from '@fortawesome/free-solid-svg-icons';
 
 export const mainMenuItems: any[] = [
     {
         ]
     }
 ];
+
+
+export const brokerMenuItems: any[] = [
+  {
+    text: 'broker',
+    fa: faUniversity,
+    url: './#canvas'
+  },
+];
+
+export const userMenuItems: any[] = [
+  {
+    text: 'user',
+    fa: faUniversity,
+    url: './#canvas'
+  },
+];
+
+export const peopleMenuItems: any[] = [
+  {
+    text: 'people',
+    fa: faUniversity,
+    url: './#canvas'
+  },
+];

src/app/models/api-v1-login-response.ts

 // tslint:disable-next-line:class-name
 export class apiV1LoginResponse {
 
-
-  // tslint:disable-next-line:typedef
   constructor(
     public login: boolean,
     public machineId: string,
     public session: string,
-    public sessionExpire: number // unix timestamp
+    public sessionExpire: number, // unix timestamp
+    public role: string
   ) {
     this.login = login;
     this.machineId = machineId;
     this.sessionExpire = sessionExpire;
   }
 
-  // tslint:disable-next-line:typedef
+  public static EmptyNew(): apiV1LoginResponse{
+    return new apiV1LoginResponse(
+      false, '', '', 0, ''
+    );
+  }
+
   public hasValidSession(): boolean {
     if (this.session === undefined  || this.session === '') {
       return false;
     }
   }
 
-  // tslint:disable-next-line:typedef
   public hasValidMachineId(): boolean {
     if (this.machineId === undefined  || this.machineId === '') {
       return false;

src/app/service/auth.service.ts

     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 loggedIn = new apiV1LoginResponse(false, '', '', 0 );
+    public loggedIn = apiV1LoginResponse.EmptyNew();
     loginSuccess = new EventEmitter <apiV1LoginResponse>();
 
     constructor( private http: HttpClient ,
         sfm.login,
         sfm.machineId,
         sfm.session,
-        sfm.sessionExpire
+        sfm.sessionExpire,
+        sfm.role
       );
       this.loginSuccess.emit(this.loggedIn);
       // console.log ( 'auto login emit events',  this.loggedIn);
            this.loggedIn.login = responseData.login;
            this.loggedIn.machineId = responseData['Biukop-Mid'];
            this.loggedIn.sessionExpire = responseData.sessionExpire;
+           this.loggedIn.role = responseData.role;
            this.saveSessionInfo();
            this.loginSuccess.emit(responseData);
          },
         error => {
-          const fail = new apiV1LoginResponse(false, '', '', 0);
+          const fail = apiV1LoginResponse.EmptyNew();
           this.loggedIn = fail;
           console.log('login error', error);
           this.loginSuccess.emit(this.loggedIn);
     }
 
     logout(): void {
-       this.loggedIn = new apiV1LoginResponse(false, '', '', 0);
+       this.loggedIn = apiV1LoginResponse.EmptyNew();
        localStorage.removeItem('sfm');
        this.loginSuccess.emit(this.loggedIn);
        this.router.navigate(['/login']).then(r => {

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

-<kendo-appbar id='topBar' *ngIf='login' class='appbar' [position]="'top'" [positionMode]="'sticky'">
+<kendo-appbar id='topBar' *ngIf='login && showMenu' class='appbar' [position]="'top'" [positionMode]="'sticky'">
   <kendo-appbar-section>
     <kendo-menu [items]="items" (select)="onSelect($event)">
       <ng-template kendoMenuItemTemplate let-item="item">
   </kendo-appbar-section>
   <kendo-appbar-spacer></kendo-appbar-spacer>
   <kendo-appbar-section class="actions">
-    <kendo-badge-container>
+    <kendo-badge-container *ngIf="false">
       <button class="k-button k-button-clear">
         <kendo-icon [name]="'bell'"></kendo-icon>
       </button>
   </kendo-appbar-section>
 
   <kendo-appbar-section>
-    <kendo-avatar [imageSrc]="Avatar" [shape]="'circle'" [width]="'26px'" [height]="'26px'"></kendo-avatar>
+    <kendo-avatar [imageSrc]="Avatar" [shape]="'circle'" [width]="'26px'" [height]="'26px'" (click)="logout()"></kendo-avatar>
   </kendo-appbar-section>
 </kendo-appbar>
+
+
+
+<kendo-dialog title="Please confirm" *ngIf="opened" (close)="close('cancel')" [minWidth]="250" [width]="450">
+  <p style="margin: 30px; text-align: center;">Are you sure you want to continue?</p>
+  <kendo-dialog-actions>
+    <button kendoButton (click)="close('no')">No</button>
+    <button kendoButton (click)="close('yes')" primary="true">Yes</button>
+  </kendo-dialog-actions>
+</kendo-dialog>

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

 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {MenuService} from '../service/menu.service';
 import {AuthService} from '../service/auth.service';
-import {mainMenuItems} from '../main-menu-items';
+import {brokerMenuItems, mainMenuItems, peopleMenuItems, userMenuItems} from '../main-menu-items';
 import {apiV1LoginResponse} from '../models/api-v1-login-response';
 import {Subscription} from 'rxjs';
 
+
 @Component({
   selector: 'app-top-bar',
   templateUrl: './top-bar.component.html',
 })
 export class TopBarComponent implements OnInit , OnDestroy {
   login  = false;
-  Avatar = './assets/img/avatar.png';
+  Avatar = './assets/img/logout.png';
   public items: any[] = mainMenuItems;
   private loginSub: Subscription;
+  public showMenu = true;
+
+  public opened = false;
 
-  constructor(private menuService: MenuService, private authService: AuthService,) { }
+  constructor(private menuService: MenuService,
+              private authService: AuthService) {
+  }
 
   ngOnInit(): void {
     this.initAndSubLogin();
 
   public initAndSubLogin(): void{
     this.login = this.authService.loggedIn.login;
-    console.log('subscribe auto login');
+    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.selectMenuShow(rsp.role);
         console.log ('topbar received auth events', rsp);
       }
     );
   }
 
+  private selectMenuShow(role: string): void {
+    this.showMenu = true;
+    switch ( role ){
+      case 'admin':
+        this.items = mainMenuItems;
+        break;
+      case 'broker':
+        this.items = brokerMenuItems;
+        break;
+      case 'user':
+        this.items = userMenuItems;
+        break;
+      case 'people':
+        this.items = peopleMenuItems;
+        break;
+
+      default:
+        this.showMenu = false;
+    }
+
+  }
+
   // check menuItem has fontawesome
   public menuItemHasFontawesome(item: any): boolean {
     return item.hasOwnProperty('fa');
     this.loginSub.unsubscribe();
   }
 
+  public logout(): void{
+    this.opened = true;
+  }
+
+  public close(action: string): void {
+    this.opened = false;
+    if ( action === 'yes') {
+      this.authService.logout();
+    }
+  }
 }