Initialize entity investigation

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { LoginComponent } from './pages/login/login.component';
 import { MockComponent } from './widgets/mock/mock.component';
 import { RegisterBusinessComponent } from './pages/register-business/register-business.component';
 import { TabsComponent } from './layout/tabs/tabs.component';
+import { InvestigateBusinessEntitiesAndIndividualsComponent } from './pages/investigate-business-entities-and-individuals/investigate-business-entities-and-individuals.component';
 
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'login' },
@@ -23,6 +24,9 @@ const routes: Routes = [
         }, {
             path: 'register-business',
             component: RegisterBusinessComponent,
+        }, {
+            path: 'investigate-business-entities-and-individuals',
+            component: InvestigateBusinessEntitiesAndIndividualsComponent,
         }]
     },
 ];

src/app/app.module.ts

@@ -18,6 +18,10 @@ import { FileComponent } from './widgets/file/file.component';
 import { DateInputComponent } from './widgets/form/date-input/date-input.component';
 import { SelectInputComponent } from './widgets/form/select-input/select-input.component';
 import { GenericInputComponent } from './widgets/form/generic-input/generic-input.component';
+import { InvestigateBusinessEntitiesAndIndividualsComponent } from './pages/investigate-business-entities-and-individuals/investigate-business-entities-and-individuals.component';
+import { ViewCaseDetailsComponent } from './pages/investigate-business-entities-and-individuals/view-case-details/view-case-details.component';
+import { ModifyCaseDetailsComponent } from './pages/investigate-business-entities-and-individuals/modify-case-details/modify-case-details.component';
+import { AssignPanelComponent } from './pages/investigate-business-entities-and-individuals/assign-panel/assign-panel.component';
 
 @NgModule({
   declarations: [
@@ -35,7 +39,11 @@ import { GenericInputComponent } from './widgets/form/generic-input/generic-inpu
     FileComponent,
     DateInputComponent,
     SelectInputComponent,
-    GenericInputComponent
+    GenericInputComponent,
+    InvestigateBusinessEntitiesAndIndividualsComponent,
+    ViewCaseDetailsComponent,
+    ModifyCaseDetailsComponent,
+    AssignPanelComponent
   ],
   imports: [
     BrowserModule,

src/app/layout/notifications/notifications.component.html

@@ -1,7 +1,14 @@
 <ul>
     <li *ngFor="let notification of notifications">
-        <h5> {{ notification.text }} </h5>
-        <p *ngIf="notification.description"> {{ notification.description }} </p>
-        <span class="time-stamp"> {{ notification.timeStamp }} </span>
+        <a *ngIf="notification.redirectionUrl" [routerLink]="notification.redirectionUrl">
+            <h5> {{ notification.text }} </h5>
+            <p *ngIf="notification.description"> {{ notification.description }} </p>
+            <span class="time-stamp"> {{ notification.timeStamp }} </span>
+        </a>
+        <ng-container *ngIf="!notification.redirectionUrl">
+            <h5> {{ notification.text }} </h5>
+            <p *ngIf="notification.description"> {{ notification.description }} </p>
+            <span class="time-stamp"> {{ notification.timeStamp }} </span>
+        </ng-container>
     </li>
 </ul>

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

@@ -12,19 +12,23 @@ export class NotificationsComponent implements OnInit {
         description?: string,
         redirectionUrl?: string,        
     }> = [{
-        text: "New name application has been submitted",
-        description: "A new Applicant in the company name Kimao has applied for an appeal",
-        timeStamp: "1 hour ago",
+        text: 'New name application has been submitted',
+        description: 'A new Applicant in the company name Kimao has applied for an appeal',
+        timeStamp: '1 hour ago',
     }, {
-        text: "Request to create a new Committee",
-        timeStamp: "2 hours ago",
+        text: 'Entity Corp. flagged for investigation',
+        timeStamp: '2 days 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",
-        timeStamp: "1 hour ago",
+        text: 'Request to create a new Committee',
+        timeStamp: '2 hours ago',
     }, {
-        text: "Request to create a new Committee",
-        timeStamp: "2 hours ago",
+        text: 'New name application has been submitted',
+        description: 'A new Applicant in the company name Kimao has applied for an appeal',
+        timeStamp: '1 hour ago',
+    }, {
+        text: 'Request to create a new Committee',
+        timeStamp: '2 hours ago',
     }];
 
     constructor() { }

src/app/pages/e-services/e-services.component.html

@@ -34,38 +34,13 @@
         <li>
             <div class="cell"> 2 </div>
             <div class="cell">
-                <h5> Application to register Person(s) Business </h5>
+                <h5> Investigating Business Entities and Individuals </h5>
                 <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi sapiente beatae est nobis voluptatibus. Pariatur, unde enim libero dignissimos quos ipsa sed vitae ex illum rem, eius explicabo fugit nisi! </p>
             </div>
             <div class="cell"> 15 </div>
             <div class="cell">
-                <button [routerLink]="['/tabs/register-business']"> Apply </button>
-            </div>
-        </li>
-
-        <li>
-            <div class="cell"> 2 </div>
-            <div class="cell">
-                <h5> Withdrawal of Name Application </h5>
-                <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi sapiente beatae est nobis voluptatibus. Pariatur, unde enim libero dignissimos quos ipsa sed vitae ex illum rem, eius explicabo fugit nisi! </p>
-            </div>
-            <div class="cell"> 15 </div>
-            <div class="cell">
-                <button [routerLink]="['/tabs/register-business']"> Apply </button>
+                <button [routerLink]="['/tabs/investigate-business-entities-and-individuals']"> Apply </button>
             </div>
         </li>
     </ul>
-</section>
-
-<div class="table-holder">
-    <app-table 
-        [headings]="['A', 'B', 'C']"
-        [tableDetails]="[['Val 1', 'Val 2 ', 'Val 3'], ['V1', 'V2', 'V3'], ['A1', 'A2', 'A3']]"
-    ></app-table>
-</div>
-
-<div class="key-value-holder">
-    <app-key-value-holder [keyValues]="keyValues"></app-key-value-holder>
-</div>
-
-<app-file [name]="'Downladable Table'" [sizeInBytes]="30000" [extension]="'xls'" [link]="'http://localhost:4200/assets/icons/bell.svg'"></app-file>
+</section>

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

@@ -0,0 +1 @@
+<app-select-entities></app-select-entities>

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

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

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

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

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

@@ -0,0 +1,34 @@
+<header class="tab-header">
+    <h2>
+        Investigating Business Entities and Individuals
+    </h2>
+</header>
+
+<section class="bread-crumbs">
+    <span [routerLink]="['/tabs/e-services']"> E-Services </span> / 
+    <span class="current-page"> Investigating Business Entities and Individuals </span>
+</section>
+
+
+<app-view-case-details 
+    *ngIf="state === 'VIEW INITIAL DETAILS'"
+    [hasEnoughData]="hasEnoughData" 
+    (updateHasEnoughData)="hasEnoughData = $event"
+></app-view-case-details>
+
+<app-modify-case-details
+    *ngIf="state === 'ENTER MORE DETAILS'"
+></app-modify-case-details>
+
+<app-assign-panel
+    *ngIf="state === 'ASSIGN COMMITTEE'"
+></app-assign-panel>
+    
+<div class="form-action-buttons">
+    <button class="common-button neutral" *ngIf="stateHistory.length > 0" (click)="goBack()">
+        Back
+    </button>
+    <button class="common-button" (click)="proceed()">
+        Proceed
+    </button>
+</div>

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

@@ -0,0 +1,329 @@
+.form-action-buttons {
+    text-align: center;
+    margin-bottom: 2rem;
+
+    button {
+        &:first-child {
+            margin-right: 2rem;
+        }
+    }
+}
+
+.form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    width: calc(70% - 2rem);
+    padding: 4rem;
+    margin: 0 auto;
+
+    .input-holder {
+        width: calc(100% - 2rem);
+    }
+}
+
+.acknowledgement {
+    width: 100%;
+    margin: 0 auto;
+    
+    h2 {
+        font-size: 2rem;
+        color: var(--dark-grey);
+        filter: brightness(80%);
+        font-weight: 500;
+        margin: 2rem 2rem 3rem;
+    }
+
+    .container {
+        width: calc(70% - 2rem);
+        margin: 2rem auto;
+
+        @media print {
+            width: calc(100% - 2rem);
+        }
+    }
+
+    .bill-container {
+        width: 70%;
+        box-shadow: 0 0 10px var(--shadow-grey);
+        border-radius: 1rem;   
+        overflow: hidden;    
+        margin: 0 auto 5rem; 
+
+        @media print {
+            width: 100%;
+        }
+    }
+
+    .check-icon {
+        display: block;
+        width: 58px;
+        height: auto;
+        margin: 3rem auto 2rem;
+    }
+
+    h3 {
+        font-size: 3rem;
+        font-weight: normal;
+        text-align: center;
+        color: var(--success);
+    }
+
+    .bill-breakup {
+        margin-top: 3rem;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        list-style: none;
+
+        li {
+            margin: 1.8rem;
+            width: 100%;
+        }
+
+        label {
+            display: block;
+            color: var(--dark-grey);
+            font-size: 1.6rem;
+            filter: brightness(80%);
+        }
+
+        .value {
+            display: block;
+            color: var(--dark-grey);
+            opacity: 0.8;
+            font-size: 1.6rem;
+            letter-spacing: 0.5px;
+            line-height: 1.6;
+            margin-top: 1rem;
+
+            &.active {
+                color: var(--highlight);
+                font-weight: normal;
+            }
+        }
+    }
+
+    .form-action-buttons {
+        margin: 2rem 1.5rem;
+
+        @media print {
+            display: none;
+        }
+    }
+
+    .total-amount {
+        text-align: center;
+        overflow: hidden;        
+        padding: 1rem;
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--footer-grey);
+            opacity: 0.4;
+        }
+
+        & > * {
+            position: relative;
+        }
+
+        label {      
+            font-size: 2rem;      
+            color: var(--dark-grey);
+        }
+
+        span {
+            margin-left: 1rem;
+            font-size: 2.4rem;
+            color: var(--highlight);
+        }
+    }
+
+    .message-board {
+        padding: 0 2rem;
+        list-style: none;
+
+        @media print {
+            display: none;
+        }
+        
+        h5 {
+            font-size: 1.6rem;
+            color: var(--dark-grey);
+            filter: brightness(80%);
+            font-weight: 500;
+        }
+
+        li {
+            margin: 1.5rem 0;
+            line-height: 1.7;
+            letter-spacing: 0.5px;
+            font-size: 1.4rem;
+            color: var(--dark-grey);
+            opacity: 0.8;
+
+            a {
+                color: var(--highlight);
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+.receipt {
+    width: calc(100% - 4rem);
+    margin: 0 auto;
+    
+    h2 {
+        font-size: 2rem;
+        color: var(--dark-grey);
+        filter: brightness(80%);
+        font-weight: 500;
+        margin: 2rem 0;
+    }
+
+    .bill-breakup {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        list-style: none;
+
+        li {
+            margin-bottom: 1rem;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
+
+        label {
+            display: block;
+            color: var(--dark-grey);
+            font-size: 1.4rem;
+        }
+
+        .value {
+            display: block;
+            color: var(--dark-grey);
+            opacity: 0.8;
+            font-size: 1.6rem;
+            letter-spacing: 0.5px;
+            line-height: 1.6;
+            margin-left: 1rem;
+        }
+    }
+
+    .table {
+        margin: 2rem auto;
+        width: 100%;
+        border-radius: 1rem;
+        overflow: auto;
+        border: 2px solid var(--border-grey);
+        min-height: 10rem;
+    
+        header {
+            background: linear-gradient(90deg, var(--secondary) 0%, var(--primary));
+            color: white;
+            font-size: 1.6rem;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            height: 5.5rem;
+            font-weight: 300;
+            letter-spacing: 0.5px;
+        }
+    
+        .cell {
+            width: calc(100% / 6);
+
+            @media print {
+                word-break: break-all;
+            }
+
+            &:nth-child(1) {
+                text-align: center;
+                width: 10rem;
+            }
+
+            &:nth-child(2) {
+                width: calc(20% + (10% - 10rem));
+            }
+
+            &:nth-child(3) {
+                width: 20%;
+            }
+
+            &:nth-child(4) {
+                width: 20%;
+            }
+
+            &:nth-child(5) {
+                width: 10%;
+            }
+
+            &:nth-child(3) {
+                width: 20%;
+            }
+        }
+    
+        ul {
+            list-style: none;        
+        }
+        
+        li {
+            display: flex;
+            align-items: flex-start;
+            justify-content: flex-start;
+            padding: 2rem 0;
+    
+            &:nth-child(even) {
+                background-color: var(--border-grey);
+            }
+    
+            .cell {
+                font-size: 1.4rem;
+                color: var(--dark-grey);
+                line-height: 1.7;                
+            }
+        }
+    }
+
+    .message-board {
+        width: 100%;
+        margin: 4rem 0;
+        list-style: none;
+        
+        h5 {
+            font-size: 1.6rem;
+            color: var(--dark-grey);
+            filter: brightness(80%);
+            font-weight: 500;
+            margin-bottom: 1rem;
+        }
+
+        li {
+            margin: 0.5rem 0;
+            line-height: 1.7;
+            letter-spacing: 0.5px;
+            font-size: 1.4rem;
+            color: var(--dark-grey);
+            opacity: 0.8;
+
+            a {
+                color: var(--highlight);
+                font-weight: 500;
+            }
+        }
+    }
+
+    .form-action-buttons {
+        text-align: left;
+
+        @media print {
+            display: none;
+        }
+    }
+}

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

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

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

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+
+type State = 'VIEW INITIAL DETAILS'|'ENTER MORE DETAILS'|'ASSIGN COMMITTEE';
+
+@Component({
+  selector: 'app-investigate-business-entities-and-individuals',
+  templateUrl: './investigate-business-entities-and-individuals.component.html',
+  styleUrls: ['./investigate-business-entities-and-individuals.component.scss']
+})
+export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnInit {
+    hasEnoughData = false;
+
+    state: State = 'VIEW INITIAL DETAILS';
+    stateHistory: Array<State> = [];
+
+    constructor() { }
+
+    proceed() {
+        this.stateHistory.push(this.state);
+        
+        switch (this.state) {
+            case 'VIEW INITIAL DETAILS':
+                if (this.hasEnoughData) {
+                    this.state = 'ASSIGN COMMITTEE';
+                } else {
+                    this.state = 'ENTER MORE DETAILS';
+                }
+        }
+    }
+
+    goBack() {
+        const state = this.stateHistory.pop();
+
+        if (state) {
+            this.state = state;
+        }
+    }
+
+    ngOnInit(): void {
+    }
+
+}

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

@@ -0,0 +1 @@
+<p>modify-case-details works!</p>

src/app/pages/investigate-business-entities-and-individuals/modify-case-details/modify-case-details.component.spec.ts

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

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

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

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

@@ -0,0 +1,30 @@
+<div class="screen-holder">
+    <h3>Case details</h3>
+    <app-key-value-holder [keyValues]="companyDetails"></app-key-value-holder>
+
+    <h3>Board of directors</h3>
+    <app-table [headings]="boardDirectorHeadings" [data]="boardDirectorData"></app-table>
+
+    <h3>Documents</h3>
+    <div class="files-holder">
+        <app-file
+            name="Account statement"
+            [sizeInBytes]="300000"
+            extension="xls"
+            link="/assets/files/spreadsheet.xlsx"
+        ></app-file>
+        <app-file
+            name="Formal complaint"
+            [sizeInBytes]="240000"
+            extension="docx"
+            link="/assets/files/document.docx"
+        ></app-file>
+    </div>
+
+    <div class="prompt-data-outreach">
+        <label>
+            <input type="checkbox" [(ngModel)]="hasEnoughData" (ngModelChange)="toggleHasData($event)">
+            <span>Is this data enough to proceed with investigation?</span>
+        </label>
+    </div>
+</div>

src/app/pages/investigate-business-entities-and-individuals/view-case-details/view-case-details.component.scss

@@ -0,0 +1,31 @@
+.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-holder {
+    & > * {
+        margin-right: 15px;
+    }
+}
+
+.prompt-data-outreach {
+    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/view-case-details/view-case-details.component.spec.ts

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

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

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { KeyValue } from 'src/app/widgets/key-value-holder/key-value-holder.component';
+
+@Component({
+  selector: 'app-view-case-details',
+  templateUrl: './view-case-details.component.html',
+  styleUrls: ['./view-case-details.component.scss']
+})
+export class ViewCaseDetailsComponent implements OnInit {
+    @Output() updateHasEnoughData = new EventEmitter<boolean>();
+
+    @Input() hasEnoughData: boolean = false;
+
+    companyDetails: Array<KeyValue> = [{
+        key: 'Business Name',
+        value: 'Entity Corp.',
+    }, {
+        key: 'Company ID',
+        value: 'ARN2021110294038',
+    }, {
+        key: 'Source of complaint',
+        value: 'Automatic',
+    }, {
+        key: 'Reason for complaint',
+        value: 'Unusual financial activity',
+    }];
+
+    boardDirectorHeadings: Array<string> = [
+        'Name',
+        'Member since',
+    ]
+
+    boardDirectorData: Array<Array<string>> = [
+        [
+            'Rose E. Arthur',
+            'July 26, 2010',
+        ], [
+            'David A. Bryant',
+            'July 26, 2008',
+        ]
+    ]
+
+    constructor() { }
+
+    toggleHasData(toggle: boolean) {
+        this.hasEnoughData = toggle;
+        this.updateHasEnoughData.emit(toggle);
+    }
+
+    ngOnInit(): void {
+    }
+
+}

src/app/pages/login/login.component.scss

@@ -4,7 +4,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background-image: url('../../assets/images/wall.jpeg');
+    background-image: url('../../../assets/images/wall.jpeg');
     background-size: cover;
     background-position: center;
     height: 100vh;

src/app/widgets/table/table.component.html

@@ -5,7 +5,7 @@
     </header>
 
     <ol>
-        <li *ngFor="let tableDetail of tableDetails; let i = index" [ngStyle]="{'grid-template-columns': '100px repeat(' + headings.length + ', 1fr)'}">
+        <li *ngFor="let tableDetail of data; let i = index" [ngStyle]="{'grid-template-columns': '100px repeat(' + headings.length + ', 1fr)'}">
             <div class="cell"> {{ i + 1 }} </div>
             <div class="cell" *ngFor="let detail of tableDetail">                
                 <p> {{ detail }} </p>

src/app/widgets/table/table.component.ts

@@ -7,7 +7,7 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class TableComponent implements OnInit {
     @Input() headings: Array<string> = [];
-    @Input() tableDetails: Array<Array<string>> = [];
+    @Input() data: Array<Array<string>> = [];
 
 
     constructor() { }