Added CreateCommittee Component with Ui

src/app/app-routing.module.ts

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

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { FormsModule } from '@angular/forms';
 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';
 
 @NgModule({
   declarations: [
@@ -19,7 +20,8 @@ import { NotificationsComponent } from './notifications/notifications.component'
     RegisterBusinessComponent,
     MockComponent,
     EServicesComponent,
-    NotificationsComponent
+    NotificationsComponent,
+    CreateCommitteeComponent
   ],
   imports: [
     BrowserModule,

src/app/create-committee/create-committee.component.html

@@ -0,0 +1,19 @@
+<header class="tab-header">
+    <h2>Select committe members to investigate</h2>
+</header>
+
+<section>
+    <li *ngFor="let committee of committees" (click)='committee.isActive = !committee.isActive'>
+        <img src="../../assets/images/Investigator.jpg" alt="">
+        <div class="upfold">
+            <h6>{{committee.name}}</h6>
+            <span>{{committee.designation}}</span>
+        </div>
+        <div class="check-box" [ngClass]="{'isActive':committee.isActive === true }"></div>
+    </li>
+</section>
+
+<section class="user-action">
+    <button class="common-button neutral">Back</button>
+    <button class="common-button">Proceed</button>
+</section>

src/app/create-committee/create-committee.component.scss

@@ -0,0 +1,100 @@
+section {
+    margin: 2rem 0;
+    display: grid;        
+    grid-template-columns: repeat(3, 1fr);
+    list-style: none;
+
+    li {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content:center;   
+        width: 35rem;
+        height: calc( 100% - 1.5rem) ;
+        border-radius: 5rem;
+        margin: 2rem ;
+        cursor: pointer;
+        background-color: var(--shadow-grey);
+        filter: brightness(115%);
+        
+        .upfold {
+            width: 20rem;
+            padding-left: 2rem;
+
+            h6 {
+                font-size: 1.6rem;
+                color: var(--primary);
+                padding: 0.3rem 0;
+            }
+            span {
+                font-size: 1.4rem;
+                color: var(--primary);
+            }
+        }
+
+        img {
+            width: 5rem;
+            height: 5rem;
+            border-radius: 50%;
+            margin-left: 1rem;   
+        }
+
+        .check-box { 
+            width: 1.8rem;
+            background-color: white;
+            height: 1.8rem;
+            margin: 0 auto;
+            border-radius: 0.4rem;
+            box-shadow: inset 0px 1px 4px 0px var(--dark-grey);
+
+                    
+            &.isActive {
+                position: relative;
+                display: inline-block;
+                width:  1.8rem;
+                height:  1.8rem;
+                background-color: var(--success);
+                box-shadow: none;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    left: -3px;
+                    top: 45%;
+                    height: 30%;
+                    width: 2px;
+                    background-color: white;
+                    transform: translateX(10px) rotate(-45deg);
+                    transform-origin: left bottom;
+                }
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    left: -2px;
+                    bottom: 4px;
+                    height: 2px;
+                    width: 54%;
+                    background-color: white;
+                    transform: translateX(10px) rotate(-45deg);
+                    transform-origin: left bottom;
+
+                }
+            }
+        }
+    }
+}
+
+.user-action {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 10rem;
+
+    button {
+        width: 15rem;
+        margin: 0 1rem;
+        font-weight: 500;
+    }
+}
+

src/app/create-committee/create-committee.component.spec.ts

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

src/app/create-committee/create-committee.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-create-committee',
+  templateUrl: './create-committee.component.html',
+  styleUrls: ['./create-committee.component.scss']
+})
+export class CreateCommitteeComponent implements OnInit {
+
+
+  committees: Array<{
+    name: string;
+    designation: string
+    isActive: boolean,
+  }> = [{
+    name: "Robert Jr",
+    designation: 'Engineer',
+    isActive: false
+  }, {
+    name: "Tom Holland",
+    designation: 'Investigator',
+    isActive: false
+  }, {
+    name: "Criss Evans",
+    designation: 'Engineer',
+    isActive: false
+  }, {
+    name: "Natalie Portman",
+    designation: 'Engineer',
+    isActive: false
+  }, {
+    name: "Mark Ruffalo",
+    designation: 'Investigator',
+    isActive: false
+  }, {
+    name: "Paul Rudd",
+    designation: 'Engineer',
+    isActive: false
+  }, {
+    name: "Josh Brolin",
+    designation: 'Engineer',
+    isActive: false
+  }, {
+    name: "Criss Pratt",
+    designation: 'Investigator',
+    isActive: false
+  }, {
+    name: "Sacrlett Johansson",
+    designation: 'Engineer',
+    isActive: false
+  }]
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/tabs/tabs.component.html

@@ -6,6 +6,9 @@
     <nav>
         <a [routerLink]="['/tabs/e-services']"> E-Services </a>
     </nav>
+    <nav>
+        <a [routerLink]="['/tabs/create-committee']"> Create Committee </a>
+    </nav>
 
     <div class="search-input">
         <input type="text" placeholder="Search for Business Entities">