Add dashboard page for officer

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ 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';
+import { DashboardComponent } from './pages/dashboard/dashboard.component';
 
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'login' },
@@ -18,6 +19,9 @@ const routes: Routes = [
         }, {
             path: 'e-services',
             component: EServicesComponent,
+        }, {
+            path: 'dashboard',
+            component: DashboardComponent,
         }, {
             path:'check-status',
             component: CheckStatusComponent

src/app/app.module.ts

@@ -30,6 +30,7 @@ import { ConcurComplianceReviewComponent } from './pages/investigate-business-en
 import { ClosingRemarksComponent } from './pages/investigate-business-entities-and-individuals/closing-remarks/closing-remarks.component';
 import { PreparePreliminaryLetterComponent } from './pages/investigate-business-entities-and-individuals/prepare-preliminary-letter/prepare-preliminary-letter.component';
 import { RespondToPreliminaryLetterComponent } from './pages/investigate-business-entities-and-individuals/respond-to-preliminary-letter/respond-to-preliminary-letter.component';
+import { DashboardComponent } from './pages/dashboard/dashboard.component';
 
 @NgModule({
   declarations: [
@@ -58,7 +59,8 @@ import { RespondToPreliminaryLetterComponent } from './pages/investigate-busines
     ConcurComplianceReviewComponent,
     ClosingRemarksComponent,
     PreparePreliminaryLetterComponent,
-    RespondToPreliminaryLetterComponent
+    RespondToPreliminaryLetterComponent,
+    DashboardComponent
   ],
   imports: [
     BrowserModule,

src/app/layout/tabs/tabs.component.html

@@ -4,8 +4,8 @@
     </figure>
     
     <nav>
+        <a *ngIf="loginName === 'Officer'" [routerLink]="['/tabs/dashboard']"> Dashboard </a>
         <a [routerLink]="['/tabs/e-services']"> E-Services </a>
-        <!-- <a [routerLink]="['/tabs/check-status']"> Application Status </a> -->
     </nav>
 
     <div class="search-input">

src/app/pages/dashboard/dashboard.component.html

@@ -0,0 +1,86 @@
+<header class="tab-header">
+    <h2>
+        Dashboard
+    </h2>
+</header>
+
+<header class="page-heading">
+    <h1> Non compliance - COM/LLPs </h1>
+    <p> A search module to filter down non compliant entities </p>
+</header>
+
+<div class="form-holder">
+    <div class="two-column-holder">
+        <app-select-input
+            label="Entity type"
+            [options]="entityTypeOptions"
+        ></app-select-input>
+        <app-select-input
+            label="Category"
+            [value]="selectedCategory"
+            [options]="categoryOptions"
+
+            (onChange)="updateSelectedCategory($event)"
+        ></app-select-input>
+        <app-generic-input
+            type="text"
+            label="UEN"
+        ></app-generic-input>
+        <app-select-input
+            label="Enforcment status"
+            [options]="enforcementStatusOptions"
+        ></app-select-input>
+        <app-date-input
+            label="AR/AD From date"
+        ></app-date-input>
+        <app-date-input
+            label="AR/AD To date"
+        ></app-date-input>
+    </div>
+    <div class="form-action-buttons">
+        <button class="common-button" (click)="submitSearch()">
+            Submit
+        </button>
+        <button class="common-button neutral" (click)="resetSearch()">
+            Reset
+        </button>
+    </div>
+
+    <section class="table" *ngIf="isShowingResults">
+        <header>
+            <div class="cell"> S/N </div>
+            <div class="cell"> UEN </div>
+            <div class="cell"> Compliance ID </div>
+            <div class="cell"> Entity name </div>
+            <div class="cell"> Last FYE </div>
+            <div class="cell"> Enforcment status </div>
+            <div class="cell"> Actions </div>
+        </header>
+    
+        <ul>
+            <li>
+                <div class="cell"> 1 </div>
+                <div class="cell"> 001 </div>
+                <div class="cell"> 20190027N </div>
+                <div class="cell"> ABC PTE.LTD </div>
+                <div class="cell"> 01/01/2021 </div>
+                <div class="cell"> Closed </div>
+                <div class="cell">
+                    <button [routerLink]="['/tabs/investigate-business-entities-and-individuals']"> Initiate Enforcment </button>
+                </div>
+            </li>
+    
+            <li>
+                <div class="cell"> 2 </div>
+                <div class="cell"> 002 </div>
+                <div class="cell"> 20190027M </div>
+                <div class="cell"> DEF PTE.LTD </div>
+                <div class="cell"> 01/01/2020 </div>
+                <div class="cell"> 1st EF letter </div>
+                <div class="cell">
+                    <button> Supress </button>
+                </div>
+            </li>
+        </ul>
+    </section>
+</div>

src/app/pages/dashboard/dashboard.component.scss

@@ -0,0 +1,136 @@
+.page-heading {
+    text-align: center;
+    line-height: 1.5;
+    margin: 3rem auto;
+
+    h1 {
+        font-size: 3rem;
+        color: var(--dark-grey);
+        filter: brightness(80%);
+        font-weight: 300;
+        letter-spacing: 0.5px;
+        margin-bottom: 1.5rem;
+    }
+
+    p {
+        font-size: 1.4rem;
+        color: var(--dark-grey);
+        width: 50%;
+        margin: 0 auto;
+    }
+}
+
+.form-holder {
+    width: calc(70% - 2rem);
+    padding: 4rem;
+    margin: 0 auto;
+}
+
+.two-column-holder {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    & > * {
+        width: calc(100% - 2rem);
+    }
+}
+
+.form-action-buttons {
+    text-align: center;
+    margin-bottom: 2rem;
+
+    button {
+        &:first-child {
+            margin-right: 2rem;
+        }
+    }
+}
+
+.table {
+    margin: 4rem auto;
+    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;
+        text-align: center;
+        height: 5.5rem;
+        font-weight: 300;
+        letter-spacing: 0.5px;
+    }
+
+    .cell {
+        &:nth-child(1) {
+            width: 10%;
+        }
+
+        &:nth-child(2) {
+            width: 10%;
+        }
+
+        &:nth-child(3), &:nth-child(4), &:nth-child(5), &:nth-child(6) {
+            width: 15%;
+        }
+
+        &:nth-child(7) {
+            width: 20rem;
+        }
+    }
+
+    ul {
+        list-style: none;        
+    }
+    
+    li {
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        text-align: center;
+        padding: 2rem 0;            
+
+        &:nth-child(even) {
+            background-color: var(--border-grey);
+        }
+
+        .cell {
+            font-size: 1.4rem;
+            color: var(--dark-grey);
+            line-height: 1.7;
+
+            &:not(:nth-child(7)) {
+                margin-top: 1rem;
+            }
+
+            h5 {
+                font-weight: 500;
+                filter: brightness(80%);
+                font-size: 1.6rem;
+            }
+
+            button {
+                background-color: var(--highlight);
+                font-size: 1.5rem;
+                letter-spacing: 0.5px;
+                color: white;
+                border-radius: 4rem;
+                height: 4rem;
+                width: 90%;
+                display: block;
+                margin: 0 auto;
+                border: 0px;
+            }
+        }
+    }
+}
+
+.table-holder, .key-value-holder {
+    width: 90%;
+    margin: 0 auto;
+}

src/app/pages/dashboard/dashboard.component.spec.ts

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

src/app/pages/dashboard/dashboard.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+    isShowingResults = false;
+
+    entityTypeOptions = [
+        'All',
+        'Local company',
+        'LLP',
+    ];
+
+    categoryOptions = [
+        'Green',
+        'Amber',
+        'Red',
+    ];
+
+    enforcementStatusOptions = [
+        '1st Enforcement Letter',
+        '2nd Enforcement Letter',
+        'Suppressed',
+    ];
+
+    selectedCategory = '';
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+    submitSearch() {
+        this.isShowingResults = true;
+    }
+
+    resetSearch() {
+        this.isShowingResults = false;
+    }
+
+    updateSelectedCategory(selectedCategory: string) {
+        this.selectedCategory = selectedCategory;
+    }
+
+}

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

@@ -7,29 +7,6 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EServicesComponent implements OnInit {
 
-    keyValues = [{
-        key: 'Receipt Number',
-        value: 'ACRA38293',
-    }, {
-        key: 'ARN',
-        value: 'ARN2021110294038',
-    }, {
-        key: 'EP Reference No.',
-        value: '20910038829384470'
-    }, {
-        key: 'Tax ID',
-        value: 'M9-0C038921',
-    }, {
-        key: 'Paid By',
-        value: 'KOH YA TING',
-    }, {
-        key: 'Payment Date',
-        value: '06/11/2021 11:28:01'
-    }, {
-        key: 'Paid Via',
-        value: 'Net Banking',
-    }];
-
     constructor() { }
 
     ngOnInit(): void {

src/app/widgets/form/select-input/select-input.component.html

@@ -1,6 +1,6 @@
 <div class="input-holder">
     <select>
-        <option *ngFor="let option of options" [value]="option"> {{ option }} </option>
+        <option *ngFor="let option of options" [value]="option" [selected]="value === option"> {{ option }} </option>
     </select>
     
     <img src="../../../../assets/icons/chevron-down.svg" alt="calendar icon">

src/app/widgets/form/select-input/select-input.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
 export interface SelectInputProperties {
     name: string,
@@ -14,10 +14,18 @@ export interface SelectInputProperties {
 export class SelectInputComponent implements OnInit {
     @Input() label = '';
     @Input() options: Array<string> = [];
+    @Input() value = '';
+
+    @Output() onChange = new EventEmitter<string>();
 
     constructor() { }
 
     ngOnInit(): void {
     }
 
+    updateValue(value: string) {
+        this.value = value;
+        this.onChange.emit(value);
+    }
+
 }