bug fix when entering valud data

angular.json

     }
   },
   "defaultProject": "broker"
-}
+}

package-lock.json

 {
   "name": "broker",
-  "version": "2.0.4",
+  "version": "2.0.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

 {
   "name": "broker",
-  "version": "2.0.4",
+  "version": "2.0.8",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --proxy-config proxy.conf.json",
+    "versionIncrease": "npm --no-git-tag-version version patch",
+    "start": "npm --no-git-tag-version version patch &&  ng serve --proxy-config proxy.conf.json",
     "prebuild": "npm --no-git-tag-version version patch",
     "build": "ng build ",
     "buildsfm": "npm --no-git-tag-version version patch && ng build --prod --base-href=/broker/ --deploy-url=/broker/ ",

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

-<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 class="wrapper">
+<section *ngIf= "Loans.length <=0" class="u-align-center-lg u-align-center-md u-align-center-sm u-align-center-xs u-clearfix u-custom-color-1 u-section-1" id="carousel_e380">
+  <div class="u-clearfix u-sheet u-sheet-1">
+    <div class="u-grey-80 u-shape u-shape-rectangle u-shape-1"></div>
+    <img class="u-image u-image-1" src="../../assets/img/page/client-loan-list/dfsg-min.jpg" data-image-width="1350" data-image-height="900">
+    <div class="u-opacity u-opacity-55 u-preserve-proportions u-shape u-shape-circle u-white u-shape-2"></div>
+    <div class="u-align-left u-container-style u-group u-white u-group-1">
+      <div class="u-container-layout u-container-layout-1">
+        <h1 class="u-text u-title u-text-1">{{Title}}</h1>
+        <p class="u-text u-text-2">{{welcomeMessage}}</p>
+        <p class="u-text u-text-3">{{user}}</p>
+        <a href="https://supercredit.com.au/" class="u-active-palette-2-base u-border-2 u-border-palette-2-base u-btn u-button-style u-hover-palette-2-base u-none u-text-black u-text-hover-white u-btn-1">Learn more</a>
+      </div>
+    </div>
+  </div>
+</section>
+<section *ngIf="Loans.length >=1" class="u-align-center u-clearfix u-grey-10 u-section-2" id="carousel_08d3">
+  <div class="u-custom-color-1 u-expanded-width u-shape u-shape-rectangle u-shape-1"></div>
+  <img class="u-image u-image-1" src="../../assets/img/page/client-loan-list/dffff-min.jpg" data-image-width="1200" data-image-height="800">
+  <div class="u-list u-list-1">
+    <div class="u-repeater u-repeater-1">
+      <div class="u-align-left u-container-style u-list-item u-repeater-item u-white u-list-item-1">
+        <div class="u-container-layout u-similar-container u-valign-top-md u-valign-top-sm u-valign-top-xs u-container-layout-1">
+          <h4 class="u-text u-text-1">Valuation</h4>
+          <p class="u-text u-text-2">It can give you a broad idea of the market value of a place. </p>
+        </div>
+      </div>
+      <div class="u-align-left u-container-style u-list-item u-repeater-item u-video-cover u-white u-list-item-2">
+        <div class="u-container-layout u-similar-container u-valign-top-md u-valign-top-sm u-valign-top-xs u-container-layout-2">
+          <h4 class="u-text u-text-3">Settled</h4>
+          <p class="u-text u-text-4">This is when repayment starts, you loan has been successful.</p>
+          <span *ngIf="Status ==='settled'" class="u-icon u-icon-circle u-text-palette-1-base u-icon-3" data-animation-name="slideIn" data-animation-duration="1000" data-animation-delay="0" data-animation-direction="Down"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 50 50" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-ed23"></use></svg><svg class="u-svg-content" viewBox="0 0 50 50" x="0px" y="0px" id="svg-ed23" style="enable-background:new 0 0 50 50;"><circle style="fill:#25AE88;" cx="25" cy="25" r="25"></circle><polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
+	38,15 22,33 12,25 "></polyline></svg></span>
+        </div>
+      </div>
+      <div class="u-align-left u-container-style u-list-item u-repeater-item u-video-cover u-white u-list-item-3">
+        <div class="u-container-layout u-similar-container u-valign-top-md u-valign-top-sm u-valign-top-xs u-container-layout-3">
+          <h4 class="u-text u-text-5">App in progress</h4>
+          <p class="u-text u-text-6">We process the documents for you carry workload on your behalf.</p>
+          <span *ngIf="Status ==='settled'" class="u-icon u-icon-circle u-text-palette-1-base u-icon-3" data-animation-name="slideIn" data-animation-duration="1000" data-animation-delay="0" data-animation-direction="Down"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 50 50" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-ed23"></use></svg><svg class="u-svg-content" viewBox="0 0 50 50" x="0px" y="0px" id="svg-ed23" style="enable-background:new 0 0 50 50;"><circle style="fill:#25AE88;" cx="25" cy="25" r="25"></circle><polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
+	38,15 22,33 12,25 "></polyline></svg></span>
+        </div>
+      </div>
+      <div class="u-align-left u-container-style u-list-item u-repeater-item u-video-cover u-white u-list-item-4">
+        <div class="u-container-layout u-similar-container u-valign-top-md u-valign-top-sm u-valign-top-xs u-container-layout-4">
+          <h4 class="u-text u-text-7">Processing</h4>
+          <p class="u-text u-text-8">Funding agencies and bank are in progress, we are waiting for them</p>
+          <span *ngIf="Status ==='settled'" class="u-icon u-icon-circle u-text-palette-1-base u-icon-3" data-animation-name="slideIn" data-animation-duration="1000" data-animation-delay="0" data-animation-direction="Down"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 50 50" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-ed23"></use></svg><svg class="u-svg-content" viewBox="0 0 50 50" x="0px" y="0px" id="svg-ed23" style="enable-background:new 0 0 50 50;"><circle style="fill:#25AE88;" cx="25" cy="25" r="25"></circle><polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
+	38,15 22,33 12,25 "></polyline></svg></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section *ngIf="recentLoan.Id !== '' && Loans.length >=1" class="u-clearfix u-grey-10 u-section-3" id="carousel_f06f">
+  <div class="u-clearfix u-sheet u-valign-middle-lg u-valign-middle-md u-valign-middle-sm u-valign-middle-xl u-sheet-1">
+    <h2 class="u-text u-text-1">Most Recent Loan Target<br>
+    </h2>
+    <p class="u-text u-text-2">The most recent loan is about
+      <span class="highlight">{{recentLoan.Item}}</span>,
+      with a target amount of <span class="highlight">{{recentLoan.Amount|currency}}</span>,
+      current status is <span class="highlight"> {{recentLoan.Status}}</span>.</p>
+    <h4 class="u-text u-text-5">Staff in charge</h4>
+    <div *ngFor="let p of recentLoan.Broker, let idx=index ">
+      <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(recentLoan.Broker[idx].Id)}"></div>
+      <div class="customer-name"> {{ p.Display }}</div>
+    </div>
+
+    <kendo-grid *ngIf="Loans.length > 1" [data]="Loans">
+      <kendo-grid-column field="Id"></kendo-grid-column>
+      <kendo-grid-column field="Amount"></kendo-grid-column>
+      <kendo-grid-column field="Status"></kendo-grid-column>
+      <kendo-grid-column field="Broker">
+        <ng-template kendoGridCellTemplate let-dataItem>
+          <div *ngFor="let p of dataItem.Broker, let idx=index ">
+            <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.Broker[idx].Id)}"></div>
+            <div class="customer-name"> {{ p.Display }}</div>
           </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>
+        </ng-template>
+      </kendo-grid-column>
+    </kendo-grid>
+    <div class="u-palette-2-base u-shape u-shape-circle u-shape-1"></div>
+
+  </div>
+</section>
+<section class="u-align-center u-clearfix u-image u-section-4" id="carousel_0188">
+  <div class="u-clearfix u-sheet u-valign-middle-lg u-valign-middle-md u-valign-middle-xl u-sheet-1">
+    <h1 class="u-text u-text-1">Contact Us</h1>
+    <p class="u-text u-text-2">If you have any questions about your loan, please feel free to leave your comments below. We will contact you as soon as possible.<br>
+    </p>
+    <div class="u-form u-form-1">
+      <a href="https://supercredit.com.au/" class="u-active-palette-2-base u-border-2 u-border-palette-2-base u-btn u-button-style u-hover-palette-2-base u-none u-text-black u-text-hover-white u-btn-1">Contact us</a>
     </div>
   </div>
+</section>
+
+
+<footer class="u-align-center u-clearfix u-footer u-grey-80 u-footer" id="sec-84c7"><div class="u-clearfix u-sheet u-sheet-1">
+  <p class="u-small-text u-text u-text-variant u-text-1">SuperCredit is a mortgage broker. Unlike most others our organisation offers its clients custom-designed loans that suit their individual needs.
+    That means not only that we provide a customer centric designed loans but we have access to a range of other loans from other banks and non-bank lenders.</p>
+</div></footer>
+<section class="u-backlink u-clearfix u-grey-80">
+
+  <p class="u-text">
+    <span>created with &nbsp;</span>
+  </p>
+  <a class="u-link" href="https://biukop.com.au/" target="_blank">
+    <span>Biukop Weboffice Engine version 2.0</span>
+  </a>.
+</section>
 </div>

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

 import {LoanSingleService} from '../service/loan.single.service';
 import {AuthService} from '../service/auth.service';
 import {SessionService} from '../service/session.service';
+import {AppConfig} from '../app.config';
 
 @Component({
   selector: 'app-client-loan-list',
   styleUrls: ['./client-loan-list.component.scss']
 })
 export class ClientLoanListComponent implements OnInit {
+  Title: string;
+  welcomeMessage: string;
+  user: string;
 
-  public Loans: LoanModel[] =[];
+  recentLoan: LoanModel;
+  Item: string;
+  Amount: number;
+  Status: string;
+  public Loans: LoanModel[] = [];
 
-  constructor(private ls: LoanSingleService, private ss: SessionService) { }
+  constructor(private ls: LoanSingleService, private cfg: AppConfig, private ss: SessionService) { }
 
   ngOnInit(): void {
     this.ls.getLoanByClient(this.ss.loggedIn.User.Id).subscribe(
            l.Response = v;
            this.Loans.push(l);
         });
+        if ( this.Loans.length > 0 ) {
+          this.recentLoan = this.Loans[0];
+        }
       }
     );
+    this.clientHome();
+  }
+
+  public  clientHome(): void{
+    this.Title = 'Apply new Loans';
+    this.welcomeMessage = `SuperCredit is one of the fastest growing non-bank lender in Australia helping Australians to achieve their financial goals.`;
+    this.user = 'your friendly team';
   }
 
   public goodDate(d: Date): boolean {
     const n = new Date();
     return d.getFullYear() + 10 > n.getFullYear(); // shouldn't be 10 years old.
   }
+
+  private photoURL(peopleId: any): string {
+    const url = this.cfg.getUrl('avatar/') + peopleId;
+    return 'url("' + url + '")';
+  }
 }

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

       <kendo-grid-column field="OtherRewarder" width="220" title="Beneficiary(ies)" [class]="'topAlign'" [headerClass]="'colOtherRewarder'">
         <ng-template kendoGridCellTemplate let-dataItem>
           <div *ngFor="let p of dataItem.OtherRewarder, let idx=index ">
-            <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.OtherRewarderIds[idx])}"></div>
-            <div class="customer-name"> {{ p }}</div>
+            <div *ngIf="dataItem.OtherRewarderIds.length > 0 " class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.OtherRewarderIds[idx])}"></div>
+            <div *ngIf="dataItem.OtherRewarderIds.length > 0 " class="customer-name"> {{ p }}</div>
           </div>
         </ng-template>
         <ng-template kendoGridFilterCellTemplate let-filter let-column="column">

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

   height: calc(100vh - 48px);
   position:relative;
   background-color: #46495b;
+  overflow: scroll;
 }
 
 kendo-multicolumncombobox{

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

               <div class="vertical-spacer"></div>
 
               <kendo-formfield>
-                <kendo-label [for]="Lender" text="Lender Organization">
+                <kendo-label [for]="Lender" text="Lender Organization (Funding Agency)">
                 </kendo-label>
-                <kendo-textbox name="Lender" [(ngModel)] = "Loan.Lender"  #Lender  [clearButton]="true"
-                               disabled> </kendo-textbox>
+                <kendo-textbox name="Lender" [(ngModel)] = "Loan.Lender"  #Lender  [clearButton]="true" > </kendo-textbox>
                 <kendo-formhint>info determined by trail income info</kendo-formhint>
-                <kendo-formerror>Error: Lender is required</kendo-formerror>
+                <kendo-formerror>Error: Lender is required (info determined by trail income info) </kendo-formerror>
+              </kendo-formfield>
+              <div class="vertical-spacer"></div>
+
+              <kendo-formfield>
+                <kendo-label [for]="LenderLoanNumber" text="Lender Organization">
+                </kendo-label>
+                <kendo-textbox name="LenderLoanNumber" [(ngModel)] = "Loan.LenderLoanNumber"  #LenderLoanNumber  [clearButton]="true" > </kendo-textbox>
+                <kendo-formhint>Can not be empty especially when having income</kendo-formhint>
+                <kendo-formerror>Error: LenderLoanNumber is required (an not be empty especially when having income) </kendo-formerror>
               </kendo-formfield>
               <div class="vertical-spacer"></div>
 
                 <kendo-label [for]="Settlement" [optional]="false" text="Settlement Date"></kendo-label>
                 <kendo-datepicker #Settlement name="Settlement"
                                   [(ngModel)]="Loan.Settlement"
-                                  [min]="minSettlement" [max]="maxSettlement" required>
+                                  [min]="minSettlement" [max]="maxSettlement">
                 </kendo-datepicker>
                 <kendo-formhint>Date settled or expected to be settled</kendo-formhint>
               </kendo-formfield>

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

             name="existingPayDescription"
             [data]="existingPayDescription"
             [valuePrimitive]="true"
+            [allowCustom]="true"
             [formControl]="formGroup.get(column.field)"
           >
           </kendo-combobox>

src/app/main-menu-items.ts

   },
 ];
 
+export const managerMenuItems: any[] = [
+  {
+    text: 'SFM',
+    icon: 'more-vertical',
+    items: [
+      { text: 'Summary', fa: faChartArea, url: './#dashboard'},
+      { text: '--', separator: 'true'  },
+      { text: 'Logout', icon: 'logout'},
+    ]
+  },
+  {
+    text: 'Loans',
+    icon: 'dollar',
+    items: [
+      { text: 'Start New Loan', icon: 'plus', url: './#edit-loan/' },
+      { text: 'List All', icon: 'table' , url: './#list-all-loans' },
+      { text: '--', separator: 'true'  },
+      { text: 'list income',  icon: 'dollar', url: './#list-income' },
+      { text: '--', separator: 'true'  },
+      { text: 'Uploads',  icon: 'dollar', url: './#lender-uploads' },
+    ]
+  },
+  {
+    text: 'Reward',
+    icon: 'percent',
+    items: [
+      { text: 'Overview',  icon: 'table', url: './#reward-overview' },
+      { text: 'List All',  icon: 'table', url: './#list-all-rewards' },
+      { text: '--', separator: 'true'  },
+      { text: 'By Broker', icon: 'table', url: './#list-reward-by-broker' },
+      { text: '--', separator: 'true'  },
+      { text: 'Invoice', icon: 'attachment' , url: './#reward-paid'},
+    ]
+  },
+];
+
+export const accountantMenuItems: any[] = [
+  {
+    text: 'SFM',
+    icon: 'more-vertical',
+    items: [
+      { text: 'Summary', fa: faChartArea, url: './#dashboard'},
+      { text: '--', separator: 'true'  },
+      { text: 'Logout', icon: 'logout'},
+    ]
+  },
+  {
+    text: 'Loans',
+    icon: 'dollar',
+    items: [
+      { text: 'List All', icon: 'table' , url: './#list-all-loans' },
+      { text: '--', separator: 'true'  },
+      { text: 'list income',  icon: 'dollar', url: './#list-income' },
+    ]
+  },
+  {
+    text: 'Reward',
+    icon: 'percent',
+    items: [
+      { text: 'Overview',  icon: 'table', url: './#reward-overview' },
+      { text: 'List All',  icon: 'table', url: './#list-all-rewards' },
+      { text: '--', separator: 'true'  },
+      { text: 'By Broker', icon: 'table', url: './#list-reward-by-broker' },
+      { text: '--', separator: 'true'  },
+      { text: 'Invoice', icon: 'attachment' , url: './#reward-paid'},
+    ]
+  },
+];
+
 export const peopleMenuItems: any[] = [
   {
     text: 'people',

src/app/models/loan.model.ts

       this.Item = payload.Item || '';
       this.Rating = payload.Rating || 0;
       this.Settlement = payload.Settlement ? new Date(payload.Settlement) : new Date('1900-01-01') ;
+      if ( this.Settlement.getFullYear() <= 1900 ){ this.Settlement = null ; }
       this.Description = payload.Description || '';
       this.Lender = payload.Lender || '';
       this.LenderLoanNumber = payload.LenderLoanNumber || '';
     this.Rating = resp.Rating;
     this.Status = resp.Status;
     this.Settlement = new Date(resp.Settlement);
+    if ( this.Settlement.getFullYear() <= 1900 ){ this.Settlement = null ; }
     this.Description = resp.Description;
 
     this.Lender = resp.Lender;

src/app/pay-out-details/pay-out-details.component.html

             <div class="col-sm-6">
               <div class="mb-4 ">
                 <div class="text-sm-right">
-                  <h4 class="invoice-color mb-2 mt-md-2">Invoice #{{model.Id  }}</h4>
+                  <h4 class="invoice-color mb-2 mt-md-2">Invoice #
+                    <span *ngIf="model.Id > 0"> {{ model.Id  }} </span>
+                    <span *ngIf="model.Id <= 0"> new </span>
+                  </h4>
                   <table class="invoice-to-details">
                     <tr (click)="onEditBeneficiary()">
                       <td class="left">To</td><td class="middle">:</td><td class="right"><h5 class="my-2">

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

         (click)="createPeople()"> Create People
       </button>
 
+      <p class="hint"> please make sure there is no duplicate, as system allows people with exactly same name</p>
     </div>
   </div>
 </div>
       </kendo-formfield>
       <div class="vertical-spacer"></div>
 
+      <kendo-formfield>
+        <kendo-label [for]="Middle" text="Middle Name "></kendo-label>
+        <kendo-textbox kendoTextBox #Middle   name="Last" [(ngModel)]="People.Middle"
+        ></kendo-textbox>
+        <kendo-formerror>Last Name is required</kendo-formerror>
+      </kendo-formfield>
+
       <kendo-formfield>
         <kendo-label [for]="Last" text="Last Name "></kendo-label>
         <kendo-textbox kendoTextBox #Last   name="Last" [(ngModel)]="People.Last"

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

   opacity:0.1;
 }
 
+p.hint {
+  color: yellow;
+  font-size: 1.5em;
+}
+
+
 .avatar {
   width: 100%;
 }

src/app/profile/people-profile/people-profile.component.ts

-import {Component, Input, OnInit, ViewChild, EventEmitter, Output} from '@angular/core';
+import {Component, Input, OnInit, ViewChild, EventEmitter, Output, OnChanges, SimpleChanges, QueryList, ViewChildren} from '@angular/core';
 import {MessageBoxComponent} from '../../message-box/message-box.component';
 import {FileInfo, FileRestrictions, FileSelectComponent, SelectEvent} from '@progress/kendo-angular-upload';
 import {AuthService} from '../../service/auth.service';
 import {PeopleService} from '../../service/people.service';
-import {NgForm} from '@angular/forms';
+import {NgForm, NgModel} from '@angular/forms';
 import {PeopleModel} from '../../models/people.model';
 import {SessionService} from '../../service/session.service';
 import {AppConfig} from '../../app.config';
   @Input() public People: PeopleModel = PeopleModel.EmptyNew();
   @Output() public newPeople = new EventEmitter<PeopleModel>();
 
+
   public avatarUrl = 'url(https://via.placeholder.com/128)' ;
   public myRestrictions: FileRestrictions = {
     allowedExtensions: ['.jpg', '.png', '.jpeg'],
     this.avatarUrl = 'url(' + this.config.getUrl('avatar/' + this.People.Id) + ')';
   }
 
+
   onDialogClose(status: string): void {
     console.log(status);
   }

src/app/profile/profile.component.html

 <div class="parent">
   <div class="container settings">
     <div class="row justify-content-center">
+      <div class="add-new" >
+        <kendo-icon [name]="'reload'" [size]="'medium'" [themeColor]="'warning'" (click)="onAddNew()">
+        </kendo-icon>
+      </div>
       <div class="col-sm-12">
         <app-people-profile #peopleProfile [People]="People" (newPeople)="onNewPeopleCreated($event)" ></app-people-profile>
       </div>
     </div>
-    <div  *ngIf="showAdminTool" class="admin-panel ">
+    <div  *ngIf="showAdminTool && People.Id != '' " class="admin-panel ">
       <div class="admin-label"> admin options </div>
 
       <button kendoButton class="k-button k-primary" [disabled]="!enableUserAdd"
     </div>
 <!--    <bkp-divider-shadow-bottom *ngIf="showAdminTool" ></bkp-divider-shadow-bottom>-->
 
-    <div *ngIf="showUser" class="row justify-content-center">
+    <div *ngIf="showUser && People.Id != ''" class="row justify-content-center">
       <div class="col-sm-12">
         <app-user-profile #userProfile  [People]="People" [UserExtra]="UserExtra"></app-user-profile>
 
       </div>
     </div>
 
-    <div *ngIf="showPassword" class="col-sm-12">
+    <div *ngIf="showPassword && People.Id != ''" class="col-sm-12">
       <div  class="vertical-spacer"  ><hr></div>
       <app-change-password #changePassword  [PeopleId]="People.Id" ></app-change-password>
     </div>
-    <div *ngIf="showAdminTool" class="col-sm-12">
+    <div *ngIf="showAdminTool && this.PeopleId.length > 10" class="col-sm-12">
       <div  class="admin-panel dangerous" [ngStyle]="{'height.px': deleteHeight}">
         <div class="admin-label">
           <kendo-switch *ngIf="countDownNumber<=0"

src/app/profile/profile.component.scss

 div.parent {
+  position: relative;
   display: table;
   width: 100%;
   height: 100vh;
   opacity: 0.95;
   background: url('../../assets/img/bg/bg-settings.jpg') no-repeat center center fixed;
   background-size: cover;
+
+  div.row{
+    position: relative;
+
+    div.add-new{
+      cursor: pointer;
+      position: absolute;
+      right: -10px;
+      top: -30px;
+    }
+  }
+
 }
 
 

src/app/profile/profile.component.ts

   // delete entire people
   public warnDelete = false;
   public deleteHeight = 25;
-  private countDownNumber = -1;
+  public countDownNumber = -1;
   private timer = null;
   public label = {
     visible: false,
 
   ngOnInit(): void {
     const id  = this.actRoute.snapshot.params.id;
-    if ( id !== undefined && id.length > 10 ) {
+    if ( this.ss.isAdmin()  && id !== undefined && id.length > 10) {
         this.PeopleId = id;
     }
 
-    if (this.ss.isAdmin()  && this.PeopleId !== '' ){
+    if (this.ss.isAdmin()  && this.PeopleId !== '' && this.PeopleId !== '0' ){
       if  (this.PeopleId === 'start-new-people' ){
         return;
       }else if (this.PeopleId !== '' && !this.ss.isCurrentUser(this.PeopleId)) { // admin editing someone else
       }
     }, 100); // 3ms, total 300ms = 5 seconds
   }
+
+  public onAddNew(): void{
+    this.PeopleId = '';
+    this.People = PeopleModel.EmptyNew();
+    this.People.Display = null;
+  }
 }

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 {brokerMenuItems, mainMenuItems, peopleMenuItems, userMenuItems} from '../main-menu-items';
+import {accountantMenuItems, brokerMenuItems, mainMenuItems, managerMenuItems, peopleMenuItems, userMenuItems} from '../main-menu-items';
 import {ApiV1LoginResponse} from '../models/api-v1-login-response';
 import {Subscription} from 'rxjs';
 import {PeopleModel} from '../models/people.model';
       case 'people':
         this.items = peopleMenuItems;
         break;
-
+      case 'manager':
+        this.items = managerMenuItems;
+        break;
+      case 'accountant':
+        this.items = accountantMenuItems;
+        break;
       default:
         this.showMenu = false;
     }
-
   }
 
   // check menuItem has fontawesome