Add review non compliance step to the investigation flow

src/app/app.module.ts

@@ -25,6 +25,7 @@ import { ModifyCaseDetailsComponent } from './pages/investigate-business-entitie
 import { AssignPanelComponent } from './pages/investigate-business-entities-and-individuals/assign-panel/assign-panel.component';
 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';
 
 @NgModule({
   declarations: [
@@ -48,7 +49,8 @@ import { MultiFileUploadComponent } from './widgets/form/multi-file-upload/multi
     ModifyCaseDetailsComponent,
     AssignPanelComponent,
     TextareaComponent,
-    MultiFileUploadComponent
+    MultiFileUploadComponent,
+    ReviewNonComplianceComponent
   ],
   imports: [
     BrowserModule,

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

@@ -29,6 +29,12 @@
     <app-assign-panel
         *ngIf="state === 'ASSIGN COMMITTEE'"
     ></app-assign-panel>
+
+    <app-review-non-compliance 
+        *ngIf="state === 'REVIEW NON COMPLIANCE'"
+        [isNonCompliant]="isNonCompliant" 
+        (onNonComplianceUpdate)="isNonCompliant = $event"
+    ></app-review-non-compliance>
         
     <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';
+type State = 'VIEW INITIAL DETAILS'|'ENTER MORE DETAILS'|'ASSIGN COMMITTEE'|'REVIEW NON COMPLIANCE';
 type Role = 'Investigator'|'Hod'|'Panel';
 
 @Component({
@@ -10,6 +10,7 @@ type Role = 'Investigator'|'Hod'|'Panel';
 })
 export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnInit {
     hasEnoughData = false;
+    isNonCompliant = false;
 
     state: State;
     stateHistory: Array<State> = [];
@@ -19,6 +20,7 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
     canExecute: boolean;
     executingRole: Role;
 
+
     constructor() {
         const loginEmail = localStorage.getItem('loginEmail');
 
@@ -41,6 +43,10 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
                 this.state = 'ASSIGN COMMITTEE';
                 this.executingRole = 'Hod';
                 break;
+            case 'REVIEW NON COMPLIANCE':
+                this.state = 'REVIEW NON COMPLIANCE';
+                this.executingRole = 'Investigator';
+                break;
             default:
                 this.state = 'VIEW INITIAL DETAILS';
                 this.executingRole = 'Investigator';
@@ -66,6 +72,10 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
                 this.state = 'ASSIGN COMMITTEE';
                 this.executingRole = 'Hod';
                 break;
+            case 'ASSIGN COMMITTEE':
+                this.state = 'REVIEW NON COMPLIANCE';
+                this.executingRole = 'Investigator';
+                break;
         }
 
         localStorage.setItem('state', this.state);
@@ -81,9 +91,6 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
         }
 
         switch (this.state) {
-            case 'ENTER MORE DETAILS':
-                this.executingRole = 'Investigator';
-                break;
             case 'ASSIGN COMMITTEE':
                 this.executingRole = 'Hod';
                 break;

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

@@ -0,0 +1,37 @@
+<div class="screen-holder">
+    <h3>Review compliance of entity</h3>
+
+    <div class="files-heading">Financial statements:</div>
+    <div class="files-holder">
+        <app-file
+            name="Account statement Q1"
+            [sizeInBytes]="300000"
+            extension="xls"
+            link="/assets/files/spreadsheet.xlsx"
+        ></app-file>
+        <app-file
+            name="Account statement Q2"
+            [sizeInBytes]="340000"
+            extension="xls"
+            link="/assets/files/spreadsheet.xlsx"
+        ></app-file>
+        <app-file
+            name="Account statement Q3"
+            [sizeInBytes]="320000"
+            extension="xls"
+            link="/assets/files/spreadsheet.xlsx"
+        ></app-file>
+    </div>
+
+    <app-multi-file-upload label="Analysis documents"></app-multi-file-upload>
+
+    <app-textarea
+        label="Remarks"
+    ></app-textarea>
+
+    <div class="compliance-check">
+        <label>
+            <input type="checkbox" [(ngModel)]="isNonCompliant" (ngModelChange)="toggleIsNonCompliant($event)">
+            <span>The entity is observed to have been non-compliant with the regulations</span>
+        </label>
+    </div>

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

@@ -0,0 +1,39 @@
+.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-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/review-non-compliance/review-non-compliance.component.spec.ts

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

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

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-review-non-compliance',
+  templateUrl: './review-non-compliance.component.html',
+  styleUrls: ['./review-non-compliance.component.scss']
+})
+export class ReviewNonComplianceComponent implements OnInit {
+    @Input() isNonCompliant = false;
+    @Output() onNonComplianceUpdate = new EventEmitter<boolean>();
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+    toggleIsNonCompliant(isNonCompliant: boolean) {
+        this.isNonCompliant = isNonCompliant;
+        this.onNonComplianceUpdate.emit(isNonCompliant);
+    }
+
+}