Add final screen

src/app/app.module.ts

@@ -26,6 +26,8 @@ import { AssignPanelComponent } from './pages/investigate-business-entities-and-
 import { TextareaComponent } from './widgets/form/textarea/textarea.component';
 import { MultiFileUploadComponent } from './widgets/form/multi-file-upload/multi-file-upload.component';
 import { ReviewNonComplianceComponent } from './pages/investigate-business-entities-and-individuals/review-non-compliance/review-non-compliance.component';
+import { ConcurComplianceReviewComponent } from './pages/investigate-business-entities-and-individuals/concur-compliance-review/concur-compliance-review.component';
+import { ClosingRemarksComponent } from './pages/investigate-business-entities-and-individuals/closing-remarks/closing-remarks.component';
 
 @NgModule({
   declarations: [
@@ -50,7 +52,9 @@ import { ReviewNonComplianceComponent } from './pages/investigate-business-entit
     AssignPanelComponent,
     TextareaComponent,
     MultiFileUploadComponent,
-    ReviewNonComplianceComponent
+    ReviewNonComplianceComponent,
+    ConcurComplianceReviewComponent,
+    ClosingRemarksComponent
   ],
   imports: [
     BrowserModule,

src/app/layout/notifications/notifications.component.ts

@@ -20,9 +20,21 @@ export class NotificationsComponent implements OnInit {
         timeStamp: '2 days ago',
         redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }, {
-        text: 'Request to create a new Committee',
+        text: 'Request to create a panel',
+        timeStamp: '1 day ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }, {
+        text: 'Review non-compliance for Entity Corp.',
+        timeStamp: '4 hours ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }, {
+        text: 'Concur non-compliance for Entity Corp.',
         timeStamp: '2 hours ago',
         redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }, {
+        text: 'Investigation complete',
+        timeStamp: '1 hours ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }, {
         text: 'New name application has been submitted',
         description: 'A new Applicant in the company name Kimao has applied for an appeal',

src/app/pages/investigate-business-entities-and-individuals/closing-remarks/closing-remarks.component.html

@@ -0,0 +1,9 @@
+<div class="screen-holder">
+    <h3>Investigation complete</h3>
+    <p>The investigation is complete, and the entity is marked as compliant.</p>
+    <a [routerLink]="['/tabs/e-services']">
+        <button class="common-button">
+            Go home
+        </button>
+    </a>
+</div>

src/app/pages/investigate-business-entities-and-individuals/closing-remarks/closing-remarks.component.scss

@@ -0,0 +1,17 @@
+.screen-holder {
+    width: calc(70% - 2rem);
+    padding: 4rem;
+    margin: 0 auto;
+}
+
+h3 {
+    font-size: 2rem;
+    color: var(--secondary);
+    font-weight: 500;
+    margin: 2rem 0;
+}
+
+p {
+    font-size: 1.6rem;
+    margin-bottom: 25px;
+}

src/app/pages/investigate-business-entities-and-individuals/closing-remarks/closing-remarks.component.spec.ts

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

src/app/pages/investigate-business-entities-and-individuals/closing-remarks/closing-remarks.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-closing-remarks',
+  templateUrl: './closing-remarks.component.html',
+  styleUrls: ['./closing-remarks.component.scss']
+})
+export class ClosingRemarksComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/investigate-business-entities-and-individuals/concur-compliance-review/concur-compliance-review.component.html

@@ -0,0 +1,48 @@
+<div class="screen-holder">
+    <h3>Concur on compliance result</h3>
+
+    <div class="files-heading">Financial statements:</div>
+    <div class="files-holder">
+        <app-file
+            name="Q1 Account statement"
+            [sizeInBytes]="300000"
+            extension="xls"
+            link="/assets/files/spreadsheet.xlsx"
+        ></app-file>
+        <app-file
+            name="Q2 Account statement"
+            [sizeInBytes]="340000"
+            extension="xls"
+            link="/assets/files/spreadsheet.xlsx"
+        ></app-file>
+        <app-file
+            name="Q3 Account statement"
+            [sizeInBytes]="320000"
+            extension="xls"
+            link="/assets/files/spreadsheet.xlsx"
+        ></app-file>
+    </div>
+
+    <div class="files-heading">Analysis documents:</div>
+    <div class="files-holder">
+        <app-file
+            name="Analysis"
+            [sizeInBytes]="500000"
+            extension="docx"
+            link="/assets/files/document.docx"
+        ></app-file>
+    </div>
+
+    <app-textarea
+        label="Remarks"
+        [value]="remarks"
+        (onChange)="updateRemarks($event)"
+    ></app-textarea>
+
+    <div class="compliance-check">
+        <label>
+            <input type="checkbox" [(ngModel)]="isConcurring" (ngModelChange)="toggleIsConcurring($event)">
+            <span>The panel agrees with the investigator's findings</span>
+        </label>
+    </div>
+</div>

src/app/pages/investigate-business-entities-and-individuals/concur-compliance-review/concur-compliance-review.component.scss

@@ -0,0 +1,41 @@
+.screen-holder {
+    width: calc(70% - 2rem);
+    padding: 4rem;
+    margin: 0 auto;
+}
+
+h3 {
+    font-size: 2rem;
+    color: var(--dark-grey);
+    filter: brightness(80%);
+    font-weight: 500;
+    margin: 2rem 0;
+}
+
+.files-heading {
+    font-size: 1.4rem;
+    color: var(--primary);
+    font-weight: 400;
+    letter-spacing: 0.5px;
+    margin-bottom: 5px;
+}
+
+.files-holder {
+    margin-bottom: 25px;
+    
+    & > * {
+        margin-right: 15px;
+    }
+}
+
+.compliance-check {
+    font-size: 1.4rem;
+    color: var(--dark-grey);
+    padding: 2rem;
+    text-align: center;
+    margin-top: 20px;
+
+    input {
+        margin-right: 10px;
+    }
+}

src/app/pages/investigate-business-entities-and-individuals/concur-compliance-review/concur-compliance-review.component.spec.ts

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

src/app/pages/investigate-business-entities-and-individuals/concur-compliance-review/concur-compliance-review.component.ts

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-concur-compliance-review',
+  templateUrl: './concur-compliance-review.component.html',
+  styleUrls: ['./concur-compliance-review.component.scss']
+})
+export class ConcurComplianceReviewComponent implements OnInit {
+    @Input() remarks = '';
+    @Input() isConcurring = true;
+
+    @Output() onRemarksUpdate = new EventEmitter<string>();
+    @Output() onIsConcurringUpdate = new EventEmitter<boolean>();
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+    updateRemarks(remarks: string) {
+        this.remarks = remarks;
+
+        this.onRemarksUpdate.emit(remarks);
+    }
+
+    toggleIsConcurring(isConcurring: boolean) {
+        this.isConcurring = isConcurring;
+
+        this.onIsConcurringUpdate.emit(isConcurring);
+    }
+
+
+
+}

src/app/pages/investigate-business-entities-and-individuals/investigate-business-entities-and-individuals.component.html

@@ -9,13 +9,17 @@
     <span class="current-page"> Investigating Business Entities and Individuals </span>
 </section>
 
+<app-closing-remarks 
+    *ngIf="state === 'CLOSING REMARKS'"
+></app-closing-remarks>
+
 <app-check-status
-    *ngIf="!canExecute"
+    *ngIf="!canExecute && state !== 'CLOSING REMARKS'"
     [status]="state"
     [assignedTo]="executingRole"
 ></app-check-status>
 
-<ng-container *ngIf="canExecute">
+<ng-container *ngIf="canExecute && state !== 'CLOSING REMARKS'">
     <app-view-case-details 
         *ngIf="state === 'VIEW INITIAL DETAILS'"
         [hasEnoughData]="hasEnoughData" 
@@ -32,9 +36,20 @@
 
     <app-review-non-compliance 
         *ngIf="state === 'REVIEW NON COMPLIANCE'"
+        [panelRemarks]="panelRemarks"
         [isNonCompliant]="isNonCompliant" 
         (onNonComplianceUpdate)="isNonCompliant = $event"
     ></app-review-non-compliance>
+
+    <app-concur-compliance-review 
+        *ngIf="state === 'CONCUR COMPLIANCE REVIEW'"
+
+        [isConcurring]="isPanelConcurring" 
+        [remarks]="panelRemarks"
+
+        (onIsConcurringUpdate)="isPanelConcurring = $event"
+        (onRemarksUpdate)="updatePanelRemarks($event)"
+    ></app-concur-compliance-review>
         
     <div class="form-action-buttons">
         <button class="common-button neutral" *ngIf="stateHistory.length > 0" (click)="goBack()">

src/app/pages/investigate-business-entities-and-individuals/investigate-business-entities-and-individuals.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-type State = 'VIEW INITIAL DETAILS'|'ENTER MORE DETAILS'|'ASSIGN COMMITTEE'|'REVIEW NON COMPLIANCE';
+type State = 'VIEW INITIAL DETAILS'|'ENTER MORE DETAILS'|'ASSIGN COMMITTEE'|'REVIEW NON COMPLIANCE'|'CONCUR COMPLIANCE REVIEW'|'CLOSING REMARKS';
 type Role = 'Investigator'|'Hod'|'Panel';
 
 @Component({
@@ -12,6 +12,9 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
     hasEnoughData = false;
     isNonCompliant = false;
 
+    isPanelConcurring = true;
+    panelRemarks = '';
+
     state: State;
     stateHistory: Array<State> = [];
 
@@ -22,6 +25,11 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
 
 
     constructor() {
+        const panelRemarks = localStorage.getItem('panelRemarks');
+        if (panelRemarks) {
+            this.panelRemarks = panelRemarks;
+        }
+
         const loginEmail = localStorage.getItem('loginEmail');
 
         if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('hod')) {
@@ -47,6 +55,14 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
                 this.state = 'REVIEW NON COMPLIANCE';
                 this.executingRole = 'Investigator';
                 break;
+            case 'CONCUR COMPLIANCE REVIEW':
+                this.state = 'CONCUR COMPLIANCE REVIEW';
+                this.executingRole = 'Panel';
+                break;
+            case 'CLOSING REMARKS':
+                this.state = 'CLOSING REMARKS';
+                this.executingRole = 'Investigator';
+                break;
             default:
                 this.state = 'VIEW INITIAL DETAILS';
                 this.executingRole = 'Investigator';
@@ -55,6 +71,11 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
         this.canExecute = this.loginRole === this.executingRole;
     }
 
+    updatePanelRemarks(remarks: string) {
+        this.panelRemarks = remarks;
+        localStorage.setItem('panelRemarks', remarks);
+    }
+
     proceed() {
         this.stateHistory.push(this.state);
 
@@ -76,6 +97,18 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
                 this.state = 'REVIEW NON COMPLIANCE';
                 this.executingRole = 'Investigator';
                 break;
+            case 'REVIEW NON COMPLIANCE':
+                this.state = 'CONCUR COMPLIANCE REVIEW';
+                this.executingRole = 'Panel';
+                break;
+            case 'CONCUR COMPLIANCE REVIEW':
+                if (!this.isPanelConcurring) {
+                    this.state = 'REVIEW NON COMPLIANCE';
+                } else {
+                    this.state = 'CLOSING REMARKS';
+                }
+                this.executingRole = 'Investigator';
+                break;
         }
 
         localStorage.setItem('state', this.state);
@@ -94,6 +127,9 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
             case 'ASSIGN COMMITTEE':
                 this.executingRole = 'Hod';
                 break;
+            case 'CONCUR COMPLIANCE REVIEW':
+                this.executingRole = 'Panel';
+                break;
             default:
                 this.executingRole = 'Investigator';
         }

src/app/pages/investigate-business-entities-and-individuals/review-non-compliance/review-non-compliance.component.html

@@ -1,6 +1,11 @@
 <div class="screen-holder">
     <h3>Review compliance of entity</h3>
 
+    <ng-container *ngIf="panelRemarks">
+        <div class="panel-heading">Panel remarks:</div>
+        <p class="panel-remarks">{{ panelRemarks }}</p>
+    </ng-container>
+
     <div class="files-heading">Financial statements:</div>
     <div class="files-holder">
         <app-file

src/app/pages/investigate-business-entities-and-individuals/review-non-compliance/review-non-compliance.component.scss

@@ -12,6 +12,19 @@ h3 {
     margin: 2rem 0;
 }
 
+.panel-heading {
+    font-size: 1.8rem;
+    color: var(--highlight);
+    font-weight: 400;
+    letter-spacing: 0.5px;
+    margin-bottom: 5px;
+}
+
+.panel-remarks {
+    font-size: 1.6rem;
+    margin-bottom: 25px;
+}
+
 .files-heading {
     font-size: 1.4rem;
     color: var(--primary);

src/app/pages/investigate-business-entities-and-individuals/review-non-compliance/review-non-compliance.component.ts

@@ -6,6 +6,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   styleUrls: ['./review-non-compliance.component.scss']
 })
 export class ReviewNonComplianceComponent implements OnInit {
+    @Input() panelRemarks = '';
     @Input() isNonCompliant = false;
     @Output() onNonComplianceUpdate = new EventEmitter<boolean>();
 

src/app/widgets/form/textarea/textarea.component.html

@@ -1,4 +1,4 @@
 <div class="input-holder">
     <label> {{ label }}: </label>
-    <textarea [placeholder]="placeholder ? placeholder : ''"></textarea>
+    <textarea [placeholder]="placeholder ? placeholder : ''" [ngModel]="value" (ngModelChange)="updateValue($event)"></textarea>
 </div>

src/app/widgets/form/textarea/textarea.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'app-textarea',
@@ -8,10 +8,17 @@ import { Component, Input, OnInit } from '@angular/core';
 export class TextareaComponent implements OnInit {
     @Input() label = '';
     @Input() placeholder: string|undefined;
+    @Input() value = '';
+
+    @Output() onChange = new EventEmitter<string>();
 
     constructor() { }
 
     ngOnInit(): void {
     }
 
+    updateValue(value: string) {
+        this.onChange.emit(value);
+    }
+
 }