issue #1 fixed.

src/app/app.component.html

 <app-top-bar></app-top-bar>
 
-<app-loan-add-new #loanEditComponent></app-loan-add-new>
-
 <router-outlet></router-outlet>
 
 <!--<div class="vimeo-wrapper">-->

src/app/app.module.ts

 import { ListAllLoansComponent } from './list-all-loans/list-all-loans.component';
 import { TopBarComponent } from './top-bar/top-bar.component';
 import {LoanSummaryService} from './service/loan_summary.service';
-import { LoanAddNewComponent } from './loan-add-new/loan-add-new.component';
 import { EditorModule } from '@progress/kendo-angular-editor';
 import { BasicinfoComponent } from './loan-edit/basicinfo/basicinfo.component';
 import { PeopleRewardComponent } from './loan-edit/people-reward/people-reward.component';
     ChartTopBrokersComponent,
     ListAllLoansComponent,
     TopBarComponent,
-    LoanAddNewComponent,
     BasicinfoComponent,
     PeopleRewardComponent,
     TrailIncomeComponent,

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

   private AllPeople: PeopleModel[] = [];
   public filteredPeople: PeopleModel[] = [];
   public displayedPeople: PeopleModel[] = [];
-  public personSelected: PeopleModel;
 
   public skip = 0;
   public pageSize = 12;
   public total = 0;
 
-  constructor(private ps: PeopleService, private auth: AuthService, private dcs: ClonerService) { }
+  constructor(private ps: PeopleService, private auth: AuthService) { }
 
   ngOnInit(): void {
     this.ps.getPeopleList('').subscribe(

src/app/loan-add-new/loan-add-new.component.html

-
-<div class="example-wrapper" style="opacity:1;">
-  <kendo-dialog title="Transaction" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="500" [width]="850"
-                [minHeight]="600">
-    <div class="example-wrapper">
-      <div class="row">
-        <div class="col-xs-12 col-sm-12 ">
-          <div class="pane-content">
-            <form class="k-form" [formGroup]="registerForm">
-              <fieldset class="k-form-fieldset">
-                <legend class="k-form-legend">Bank Transaction Details</legend>
-                <kendo-formfield>
-                  <kendo-label [for]="transID" text="Transaction ID"></kendo-label>
-                  <input formControlName="transID" kendoTextBox #transID required />
-
-                  <kendo-formhint>Unique transaction
-                    ID from bank </kendo-formhint>
-                  <kendo-formerror>Error: the ID is required</kendo-formerror>
-                </kendo-formfield>
-
-                <kendo-formfield>
-                  <kendo-label [for]="submissionDate" [optional]="false"
-                               text="Submission Date"></kendo-label>
-                  <kendo-datepicker #submissionDate formControlName="submissionDate"
-                                    [min]="min" [max]="max">
-                  </kendo-datepicker>
-
-                  <kendo-formhint>Date in bank</kendo-formhint>
-                </kendo-formfield>
-
-                <kendo-formfield>
-                  <kendo-label [for]="clientNames" [optional]="false"
-                               text="Client Names"></kendo-label>
-                  <kendo-multiselect
-                    #clientNames
-                    formControlName="clientNames"
-                    [textField]="'text'"
-                    [valueField]="'value'"
-                    [valuePrimitive]="true"
-                    [data]="listClientNames"
-                  >
-                  </kendo-multiselect>
-                </kendo-formfield>
-
-                <kendo-formfield>
-                  <kendo-label [for]="brokers" [optional]="false"
-                               text="Brokers Names"></kendo-label>
-                  <kendo-multiselect
-                    #brokers
-                    formControlName="brokers"
-                    [textField]="'text'"
-                    [valueField]="'value'"
-                    [valuePrimitive]="true"
-                    [data]="listClientNames"
-                  >
-                  </kendo-multiselect>
-                </kendo-formfield>
-
-                <kendo-formfield>
-                  <kendo-label [for]="referals" [optional]="false"
-                               text="Referals/BDM"></kendo-label>
-                  <kendo-multiselect
-                    #referals
-                    formControlName="referals"
-                    [textField]="'text'"
-                    [valueField]="'value'"
-                    [valuePrimitive]="true"
-                    [data]="listClientNames"
-                  >
-                  </kendo-multiselect>
-                </kendo-formfield>
-
-                <kendo-formfield>
-                  <kendo-label [for]="status" [text]="'Progress Status'"></kendo-label>
-                  <kendo-dropdownlist
-                    #status
-                    formControlName="status"
-                    [data]="listClientNames"
-                    [defaultItem]="{ text: 'Select Status', value: null }"
-                    [textField]="'text'"
-                    [valueField]="'value'"
-                    required
-                  >
-                  </kendo-dropdownlist>
-                  <kendo-formerror>Error: status is required</kendo-formerror>
-                </kendo-formfield>
-
-                <kendo-formfield>
-                  <kendo-label [for]="lender" text="Lender Organization">
-                  </kendo-label>
-                  <input formControlName="lender" kendoTextBox #lender required />
-
-                  <kendo-formhint>E.g. NAB Bank</kendo-formhint>
-                  <kendo-formerror>Error: Lender is required</kendo-formerror>
-                </kendo-formfield>
-
-                <kendo-formfield>
-                  <kendo-label [for]="limit"  text="Loan Limit">
-                  </kendo-label>
-                  <input formControlName="limit" kendoTextBox #limit required />
-
-                  <kendo-formhint>E.g. 8000</kendo-formhint>
-                  <kendo-formerror>Error: Limit is required</kendo-formerror>
-                </kendo-formfield>
-
-                <kendo-formfield>
-                  <kendo-label [for]="settlementDate" [optional]="false"
-                               text="Settlement Date"></kendo-label>
-                  <kendo-datepicker #settlementDate formControlName="settlementDate"
-                                    [min]="min" [max]="max">
-                  </kendo-datepicker>
-
-                  <kendo-formhint>Date Settled</kendo-formhint>
-                </kendo-formfield>
-
-                <!-- <div class="k-form-buttons">
-                    <button class="k-button k-primary"
-                        (click)="submitForm()">Add New </button>
-                    <button class="k-button" (click)="clearForm()">Clear</button>
-                </div> -->
-              </fieldset>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <kendo-dialog-actions>
-      <button kendoButton (click)="clearForm()">Clear</button>
-      <button kendoButton (click)="submitForm()" primary="true">Add New</button>
-    </kendo-dialog-actions>
-  </kendo-dialog>
-
-  <kendo-window [minWidth]="200" [minHeight]="125" title="About" *ngIf="windowOpened" (close)="close('window')">
-    <p style="text-align: center;">Additional info</p>
-  </kendo-window>
-</div>
-
-
-
-
-
-

src/app/loan-add-new/loan-add-new.component.scss

-.pane-content { padding: 0 10px; }
-

src/app/loan-add-new/loan-add-new.component.spec.ts

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

src/app/loan-add-new/loan-add-new.component.ts

-import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-
-
-@Component({
-  selector: 'app-loan-add-new',
-  templateUrl: './loan-add-new.component.html',
-  styleUrls: ['./loan-add-new.component.scss']
-})
-export class LoanAddNewComponent implements OnInit {
-  //popup
-  public dialogOpened = false;
-  public windowOpened = false;
-
-  //test
-  public somedata : string = "opened";
-
-
-  //form access
-
-  //@ViewChild('birthDate', {static: true}) birthDate: LoanEditComponent;
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  public close(component) {
-    this.somedata = "" + Math.random();
-    this[component + 'Opened'] = false;
-  }
-
-  public open(component) {
-    //this.somedata = "" + Math.random();
-    this[component + 'Opened'] = true;
-  }
-
-  public action(status) {
-    console.log(`Dialog result: ${status}`);
-    this.dialogOpened = false;
-  }
-
-
-
-  public min: Date = new Date(2015, 0, 1);
-  public max: Date = new Date(2030, 4, 31);
-
-  public registerForm: FormGroup = new FormGroup({
-    transID: new FormControl(),
-    submissionDate: new FormControl(new Date(2020, 0, 10)),
-    clientNames : new FormControl([1]),
-    brokers : new FormControl([2]),
-    referals : new FormControl([3]),
-    status: new FormControl(),
-    lender: new FormControl(),
-    limit: new FormControl(),
-    settlementDate: new FormControl(new Date(2020, 0, 9)),
-  });
-
-  public submitForm(): void {
-    this.registerForm.markAllAsTouched();
-    //this.action('yes');
-  }
-
-  public clearForm(): void {
-    this.registerForm.reset();
-    //this.action('no');
-  }
-
-  public listClientNames: Array<{ text: string, value: number }> = [
-    { text: 'John', value: 1 },
-    { text: 'Steven', value: 2 },
-    { text: 'William', value: 3 }
-  ];
-
-  public statis: { text: string, value: number } = { text: 'Female', value: 2 };
-
-
-}

src/app/pay-in/pay-in.component.html

       </div>
       <div [ngStyle]="{'width': allowAddNew? '70%': '100%'}" class="filter-panel-wrapper" >
           <button kendoButton icon="filter" (click)="showFilter()" >Filter</button>
-          <button kendoButton icon="filter" >Upload</button>
+<!--          <button kendoButton icon="filter" >Upload</button>-->
       </div>
     </div>
   </ng-template>

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

   <div class="inner-div">
     <div class="front">
       <div class="front__bkg-photo"  [ngStyle]="{'background-image': 'url(' + bgPhoto() + ')' }"></div>
-      <div class="front__face-photo" [ngStyle]="{'background-image': 'url(' + photoURL() +')' }">
-      </div>
+      <div class="front__face-photo" [ngStyle]="{'background-image': 'url(' + photoURL() +')' }"></div>
       <div class="front__text">
         <h3 class="front__text-header">{{contact.Display}} </h3>
         <p class="front__text-para"><i class="fas fa-map-marker-alt front-icons"></i>{{UserExtra.Role}}

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

   height: 100vh;
   width: 100vw;
 
-  background: url("https://images.unsplash.com/photo-1447433589675-4aaa569f3e05?ixlib=rb-0.3.5&s=4222852e25e0f57d9485f7889957e99a&auto=format&fit=crop&w=2000&q=80");
   background-size: cover;
-  background: #ccc;
   background-position: 0 50%;
   background: #DEB493;
 

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

   }
 
   photoURL(): string {
-    if (this.contact === undefined ) { return ''; }
+    if (this.contact === undefined ) { return 'unknown'; }
     const url = this.auth.getUrl('avatar/') + this.contact.Id ;
     return url;
   }
 
   public bgPhoto(): string {
+
     if ( !this.contact.Enabled ){
       return '../../assets/img/bg/bg-disabled-card.jpg';
     }
       case 'admin':
         return '../../assets/img/bg/bg-admin-card.jpg';
     }
-
+    // default photo
+    return '../../assets/img/bg/bg-disabled-card.jpg';
   }
 
   public onButtonClick(): void {