setup broker and client user menu

src/app/app.module.ts

 import { LoanEditPeopleComponent } from './loan-edit-people/loan-edit-people.component';
 import { PeopleCardComponent } from './people-card/people-card.component';
 import { LenderUploadsComponent } from './lender-uploads/lender-uploads.component';
+import { BrokerLoanListComponent } from './broker-loan-list/broker-loan-list.component';
+import { BrokerRewardComponent } from './broker-reward/broker-reward.component';
+import { BrokerProfileComponent } from './broker-profile/broker-profile.component';
+import { ClientLoanListComponent } from './client-loan-list/client-loan-list.component';
+import { ClientProfileComponent } from './client-profile/client-profile.component';
 
 
 
     RatingInputComponent,
     LoanEditPeopleComponent,
     PeopleCardComponent,
-    LenderUploadsComponent
+    LenderUploadsComponent,
+    BrokerLoanListComponent,
+    BrokerRewardComponent,
+    BrokerProfileComponent,
+    ClientLoanListComponent,
+    ClientProfileComponent
   ],
   imports: [
     BrowserModule,

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

+<p>broker-loan-list works!</p>

src/app/broker-loan-list/broker-loan-list.component.spec.ts

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

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-broker-loan-list',
+  templateUrl: './broker-loan-list.component.html',
+  styleUrls: ['./broker-loan-list.component.scss']
+})
+export class BrokerLoanListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

+<p>broker-profile works!</p>

src/app/broker-profile/broker-profile.component.spec.ts

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

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-broker-profile',
+  templateUrl: './broker-profile.component.html',
+  styleUrls: ['./broker-profile.component.scss']
+})
+export class BrokerProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

+<p>broker-reward works!</p>

src/app/broker-reward/broker-reward.component.spec.ts

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

src/app/broker-reward/broker-reward.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-broker-reward',
+  templateUrl: './broker-reward.component.html',
+  styleUrls: ['./broker-reward.component.scss']
+})
+export class BrokerRewardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/canvas/canvas.component.html

-<h3 style="text-align:center"> this is canvas </h3>
-<hr>
-<kendo-menu>
-    <kendo-menu-item text="My Web Site" icon="folder">
-        <kendo-menu-item text="images" icon="folder">
-
-            <kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
-            <kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
-            <kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>
-        </kendo-menu-item>
-        <kendo-menu-item text="resources" icon="folder">
-            <kendo-menu-item text="pdf" icon="folder">
-                <kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
-                <kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
-            </kendo-menu-item>
-            <kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
-        </kendo-menu-item>
-        <kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
-        <kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
-        <kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
-        <kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
-    </kendo-menu-item>
-  </kendo-menu>
-  <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>
-
-
-<app-people-select></app-people-select>
-<button kendoButton (click)="onButtonClick()">Default</button>
-
-  <bkp-divider-text>some text</bkp-divider-text>
-  <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
-  <bkp-divider><kendo-icon [name]="'sum'"> </kendo-icon> &nbsp; Pending
-  Payments</bkp-divider>
-
-  <kendo-chart>
-    <kendo-chart-title text="Units sold"></kendo-chart-title>
-
-    <kendo-chart-category-axis>
-        <kendo-chart-category-axis-item
-            [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']"
-            [title]="{ text: 'Months' }">
-        </kendo-chart-category-axis-item>
-    </kendo-chart-category-axis>
-
-    <!-- <kendo-chart-series-defaults [highlight]="{ inactiveOpacity: 0.3 }"> -->
-    <!-- </kendo-chart-series-defaults> -->
-
-    <kendo-chart-series>
-      <kendo-chart-series-item type="area" [data]="[123, 276, 310, 212, 240, 156, 98]">
-      </kendo-chart-series-item>
-      <kendo-chart-series-item type="area" [data]="[165, 210, 287, 144, 190, 167, 212]">
-      </kendo-chart-series-item>
-      <kendo-chart-series-item type="area" [data]="[56, 140, 195, 46, 123, 78, 95]">
-      </kendo-chart-series-item>
-    </kendo-chart-series>
-  </kendo-chart>
-
-  <hr>
-
-<kendo-grid [data]="gridData" >
-    <kendo-grid-column field="ProductID" title="ID" width="40">
-    </kendo-grid-column>
-    <kendo-grid-column field="ProductName" title="Name" width="250">
-    </kendo-grid-column>
-    <kendo-grid-column field="Category.CategoryName" title="Category">
-    </kendo-grid-column>
-    <kendo-grid-column field="UnitPrice" title="Price" width="80">
-    </kendo-grid-column>
-    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
-    </kendo-grid-column>
-    <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
-        <ng-template kendoGridCellTemplate let-dataItem>
-            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
-        </ng-template>
-    </kendo-grid-column>
-</kendo-grid>
-
-<hr>
-
+<p>this is canvas</p>

src/app/canvas/canvas.component.ts

     this.menutItemSub.unsubscribe();
   }
 
-  onButtonClick(){
-    console.log("on button click default");
-    this.anyhttp();
-  }
-
-  anyhttp(){
-    this.http.get('https://svr2021.lawipac.com:8080/api/v1/').subscribe(
-      response => {
-        console.log(response);
-      }
-    );
-  }
-
-
-
 }

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

+<p>client-loan-list works!</p>

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

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

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-client-loan-list',
+  templateUrl: './client-loan-list.component.html',
+  styleUrls: ['./client-loan-list.component.scss']
+})
+export class ClientLoanListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

+<p>client-profile works!</p>

src/app/client-profile/client-profile.component.spec.ts

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

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-client-profile',
+  templateUrl: './client-profile.component.html',
+  styleUrls: ['./client-profile.component.scss']
+})
+export class ClientProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/main-menu-items.ts

-import { faChartArea, faIdCard, faIdCardAlt, faMoneyCheck, faUniversity, faUserCircle } from '@fortawesome/free-solid-svg-icons';
+import { faChartArea, faIdCard, faIdCardAlt, faMoneyCheck,
+  faUniversity, faUserCircle, faUserTie } from '@fortawesome/free-solid-svg-icons';
 
 export const mainMenuItems: any[] = [
     {
 
 export const brokerMenuItems: any[] = [
   {
-    text: 'broker',
-    fa: faUniversity,
-    url: './#canvas'
+    text: '|',
+    fa: faUserTie,
+  },
+  {
+    text: 'My Loans',
+    icon: 'categorize',
+    url: './#broker-loan-list'
+  },
+  {
+    text: 'My Earnings',
+    icon: 'dollar',
+    url: './#broker-reward'
+  },
+  {
+    text: 'Profile',
+    fa: faIdCard,
+    url: './#broker-profile'
   },
+
 ];
 
 export const userMenuItems: any[] = [
   {
-    text: 'user',
-    fa: faUniversity,
-    url: './#canvas'
+    text: '|',
+    fa: faUserCircle,
+  },
+  {
+    text: 'My Loans',
+    icon: 'categorize',
+    url: './#client-loan-list'
+  },
+  {
+    text: 'Profile',
+    fa: faIdCard,
+    url: './#client-profile'
   },
 ];