edit people before go to reward.

src/app/app.module.ts

 import { PeopleRewardComponent } from './loan-edit/people-reward/people-reward.component';
 import { TrailIncomeComponent } from './loan-edit/trail-income/trail-income.component';
 import { HintCardComponent } from './loan-edit/hint-card/hint-card.component';
-import { PeopleSelectComponent } from './loan-edit/people-select/people-select.component';
+import { PeopleSelectComponent } from './people-select/people-select.component';
 import { LoanDetailComponent } from './loan-detail/loan-detail.component';
 import {LoanSingleService} from './service/loan.single.service';
 import { RatingInputComponent } from './rating-input/rating-input.component';
+import { LoanEditPeopleComponent } from './loan-edit-people/loan-edit-people.component';
 
 
 
     HintCardComponent,
     PeopleSelectComponent,
     LoanDetailComponent,
-    RatingInputComponent
+    RatingInputComponent,
+    LoanEditPeopleComponent
   ],
   imports: [
     BrowserModule,

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

                          (lenderNameChanged)="onLenderNameChange($event)"
                          (NotifyNext) ="next(0)"
     ></app-loan-basic-info>
-    <app-loan-people-reward *ngIf="currentStep === 1"
+    <app-loan-edit-people *ngIf="currentStep===1"
+                          #people
+                          [Loan]="Loan"
+                          (NotifyNext)="next(1)">
+    </app-loan-edit-people>
+    <app-loan-people-reward *ngIf="currentStep === 2"
                             [Loan]="Loan"
-                            (NotifyNext) ="next(1)"
-                            (NotifyPrev) ="prev(1)"
+                            (NotifyNext) ="next(2)"
+                            (NotifyPrev) ="prev(2)"
     > </app-loan-people-reward>
-    <app-loan-trail-income *ngIf="currentStep === 2"
+    <app-loan-trail-income *ngIf="currentStep === 3"
                            [Loan]="Loan"
                            [LenderName]="LenderName"
-                           (NotifyPrev) ="prev(2)"
+                           (NotifyPrev) ="prev(3)"
     > </app-loan-trail-income>
 
     <div class="row">

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

 
   public steps = [
     { label: 'Basic Info', isValid: true , errMsg: 'There are some errors'},
-    { label: 'People Reward', isValid: true , errMsg: 'There are some errors'},
+    { label: 'People', isValid: true , errMsg: 'There are some errors'},
+    { label: 'Reward', isValid: true , errMsg: 'There are some errors'},
     { label: 'Trail Income', isValid: true, errMsg: 'There are some errors' }
   ];
 

src/app/loan-edit/people-reward/people-reward.component.html

         </ng-template>
         <ng-template
           kendoGridEditTemplate let-fg="formGroup" let-column="column" let-dataItem="dataItem">
-          <app-people-select #pps [formControl]="formGroup.get('To')" [translateId]="true" [width]="200" [initSearch]="contacts"></app-people-select>
+          <app-people-select #pps [formControl]="formGroup.get('To')" [translateId]="true" [width]="200" [initSearch]="contacts" ></app-people-select>
         </ng-template>
 
       </kendo-grid-column>

src/app/loan-edit/people-reward/people-reward.component.ts

 import {debounce} from 'ts-debounce';
 import {LoanSingleService} from '../../service/loan.single.service';
 import {ClonerService} from '../../service/clone.service';
-import {PeopleSelectComponent} from '../people-select/people-select.component';
+import {PeopleSelectComponent} from '../../people-select/people-select.component';
 
 
 
         this.paidReward.push(o);
       }else{
         this.pendingReward.push(o);
+        this.pendingReward.sort((a, b) => a.Ts > b.Ts ?  -1 : 1 );
       }
     });
   }
   }
 
   public cancelHandler({ sender, rowIndex }): void{
-    //console.log(sender);
+    // console.log(sender);
     this.closeEditor(sender, rowIndex);
   }
 
   public saveHandler({ sender, rowIndex, formGroup, isNew }): void {
     const reward = formGroup.value;
     reward.From = '0'; // Admin
+    // check all pending rewards, see if there are conflicting roles
+    const result = this.checkConflictingRoles(reward);
+    if ( result.roles.length > 1 ) {
+      console.log ( result);
+      alert ('conflicting roles' + result.id);
+      return;
+    }
     // reward.Ts = new Date(); // Now
     reward.LoanId = this.Loan.Id; // Enforce LoanId
     reward.PayOutId = 0; // make sure it is not paid
     sender.closeRow(rowIndex);
   }
 
+  private checkConflictingRoles(reward: RewardModel): {id: string, roles: string[]} {
+    console.log(reward, this.pendingReward);
+    const roles = [reward.Role];
+    this.pendingReward.forEach( v => {
+      if (v.To === reward.To) {
+          const idx = roles.findIndex(r => r === v.Role);
+          if (idx === -1) { roles.push (v.Role); }
+      }
+    });
+
+    return {id: reward.To, roles};
+  }
+
   public removeHandler({ dataItem }): void {
 
     const na = this.pendingReward.filter(v => {
       return v.Id !== dataItem.Id;
     });
-
+    this.Loan.removeReward(dataItem.Id);
     this.pendingReward = na;
     this.ls.removeReward(dataItem);
   }

src/app/models/loan.model.ts

       this.callBacks()
     );
     r.LoanId = this.Id; // Make sure Loan Id is same
-    this.Reward.push(r);
+    this.Reward.unshift(r);
     return r;
   }
 
+  public removeReward(Id: number): void {
+    const na = this.Reward.filter(v => v.Id !== Id );
+    this.Reward = na;
+  }
+
   public emptyReward(): RewardModel {
     return new RewardModel(
       0,   '',      0, this.Id,

src/app/loan-edit/people-select/people-select.component.ts → src/app/people-select/people-select.component.ts

 import {Component, forwardRef, Input, OnInit, ViewChild} from '@angular/core';
-import {AuthService} from '../../service/auth.service';
+import {AuthService} from '../service/auth.service';
 import { debounce } from 'ts-debounce';
-import {PeopleModel} from '../../models/people.model';
+import {PeopleModel} from '../models/people.model';
 import {ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {MultiColumnComboBoxComponent} from '@progress/kendo-angular-dropdowns';
 import {Observable, of} from 'rxjs';
 import {PercentPipe} from '@angular/common';
 import {map} from 'rxjs/operators';
-import {PeopleService} from '../../service/people.service';
+import {PeopleService} from '../service/people.service';
 
 
 @Component({