Application status UI

src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CheckStatusComponent } from './check-status/check-status.component';
 import { CreateCommitteeComponent } from './create-committee/create-committee.component';
 import { EServicesComponent } from './e-services/e-services.component';
 import { LoginComponent } from './login/login.component';
@@ -17,6 +18,9 @@ const routes: Routes = [
         }, {
             path: 'e-services',
             component: EServicesComponent,
+        }, {
+            path:'check-status',
+            component: CheckStatusComponent
         }, {
             path: 'register-business',
             component: RegisterBusinessComponent,

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { MockComponent } from './mock/mock.component';
 import { EServicesComponent } from './e-services/e-services.component';
 import { NotificationsComponent } from './notifications/notifications.component';
 import { CreateCommitteeComponent } from './create-committee/create-committee.component';
+import { CheckStatusComponent } from './check-status/check-status.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +22,8 @@ import { CreateCommitteeComponent } from './create-committee/create-committee.co
     MockComponent,
     EServicesComponent,
     NotificationsComponent,
-    CreateCommitteeComponent
+    CreateCommitteeComponent,
+    CheckStatusComponent
   ],
   imports: [
     BrowserModule,

src/app/check-status/check-status.component.html

@@ -0,0 +1,20 @@
+<header class="tab-header">
+    <h2>
+        Application Status
+    </h2>
+</header>
+
+
+<div class="search-input-container">
+    <ng-container>
+        <section class="search-input">
+            <input type="text" placeholder="Enter the Application Number" [(ngModel)]="applicationId">
+            <button (click)="checkStatus()"> Check </button>
+        </section>
+                
+        <section class="form-message" [ngClass]="{'error' : error.type === 'DANGER', 'warning' : error.type === 'WARNING' }" *ngIf="error">
+            <h5> {{ error.header }} </h5>
+            <p> {{ error.message }} </p>
+        </section>
+    </ng-container>    
+</div>

src/app/check-status/check-status.component.scss

@@ -0,0 +1,79 @@
+.search-input-container {
+    width: 60%;
+    margin: 0 auto;
+    text-align: center;
+
+    .search-input {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        background-color: white;
+        border-radius: 4rem;
+        height: 5.5rem;
+        border: 1px solid var(--border-grey);
+        width: 80%;
+        margin: 4rem auto 3rem;
+        overflow: hidden;
+    
+        input {
+            border: none;
+            background-color: transparent;
+            padding: 0 3rem;
+            font-size: 1.5rem;
+            color: var(--dark-grey);        
+            letter-spacing: 0.5px;
+            flex-grow: 1;
+    
+            &::placeholder {
+                font-weight: 300;
+            }
+        }
+    
+        button {
+            height: 100%;
+            border: none;
+            background-color: var(--highlight);
+            padding: 0 4rem;
+            color: white;
+            font-size: 1.6rem;
+            letter-spacing: 0.5px;
+            border-radius: 4rem;
+            transition: opacity 0.3s;
+
+            &:disabled {
+                opacity: 0.5;
+            }
+        }
+    }
+
+    .form-message {
+        margin: 6rem auto 2rem;
+        line-height: 1.6;
+
+        &.error {
+            h5 {
+                color: var(--error);
+            }
+        }
+
+        &.warning {
+            h5 {
+                color: var(--warning);
+            }
+        }
+
+        h5 {
+            font-size: 2rem;
+            color: var(--success);
+            filter: brightness(80%);
+            font-weight: 500;
+            margin-bottom: 1rem;
+        }
+
+        p {
+            font-size: 1.4rem;
+            font-weight: 400;
+            color: var(--dark-grey);
+        }
+    }
+}

src/app/check-status/check-status.component.spec.ts

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

src/app/check-status/check-status.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-check-status',
+    templateUrl: './check-status.component.html',
+    styleUrls: ['./check-status.component.scss']
+})
+export class CheckStatusComponent implements OnInit {
+    applicationId: string = '398248899';
+
+    error?: {
+        header: string,
+        message: string,
+        type: 'SUCCESS' | 'WARNING' | 'DANGER',
+    };
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+    checkStatus() {
+        if (this.applicationId === '398248899') {
+            this.error = {
+                header: 'Approved',
+                message: 'Your application has been approved, please view the notification to continue futher in the process',
+                type: 'SUCCESS'
+            };
+        } else if (this.applicationId === '100') {
+            this.error = {
+                header: 'Pending',
+                message: 'You\'ll be notified when there is a change in the status',
+                type: 'WARNING'
+            };
+        } else {
+            this.error = {
+                header: 'Rejected',
+                message: 'Please view the notifications to get more details regarding the rejection',
+                type: 'DANGER'
+            };
+        }
+    }
+
+}

src/app/tabs/tabs.component.html

@@ -5,9 +5,8 @@
     
     <nav>
         <a [routerLink]="['/tabs/e-services']"> E-Services </a>
-    </nav>
-    <nav>
         <a [routerLink]="['/tabs/create-committee']"> Create Committee </a>
+        <a [routerLink]="['/tabs/check-status']"> Application Status </a>
     </nav>
 
     <div class="search-input">

src/app/tabs/tabs.component.scss

@@ -19,10 +19,7 @@ $header-height: 10rem;
 
     nav {
         margin: 0 2rem;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-
+        
         @media print {
             display: none;
         }
@@ -31,6 +28,7 @@ $header-height: 10rem;
             font-size: 1.6rem;
             letter-spacing: 0.5px;
             color: var(--dark-grey);
+            margin-right: 2rem;
 
             &.active {
                 text-decoration: underline;
@@ -85,6 +83,10 @@ $header-height: 10rem;
         background-color: white;
         margin-left: 2rem;
 
+        @media print {
+            display: none;
+        }
+
         &.active {
             box-shadow: 0px 0px 10px -3px var(--primary);
             

src/styles.scss

@@ -25,6 +25,7 @@ button, a {
     --footer-grey: hsl(0, 0%, 93%);
     --error: #d07a7a;
     --success: #88b749;
+    --warning: #ffc409;
 }