worked on some employee and customer components
diff --git a/src/app/accounting/transaction-type/transaction-type.component.html b/src/app/accounting/transaction-type/transaction-type.component.html
index 9760c4f..6090aaa 100644
--- a/src/app/accounting/transaction-type/transaction-type.component.html
+++ b/src/app/accounting/transaction-type/transaction-type.component.html
@@ -2,7 +2,7 @@
   <h3 class="heading">Transaction Types</h3>
   <mat-divider></mat-divider>
   <div class="fineract-button">
-  <a mat-raised-button  color="primary" [routerLink]="['/navbar/managereport/create']">
+  <a mat-raised-button  color="primary" [routerLink]="['/navbar/add_transaction_type']">
     <mat-icon>add</mat-icon>Add Transaction Type</a>
     </div>
   <mat-form-field>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9f6b19f..561d641 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -56,7 +56,9 @@
 import { ChequeClearingComponent } from './accounting/cheque-clearing/cheque-clearing.component';
 import { TransactionTypeComponent } from './accounting/transaction-type/transaction-type.component';
 import { AddMemberComponent } from './customer/add-member/add-member.component';
-import { ManageMembersComponent } from './customer/manage-members/manage-members.component'
+import { ManageMembersComponent } from './customer/manage-members/manage-members.component';
+import { AddEmployeeComponent } from './employee/add-employee/add-employee.component';
+import { ManageEmployeeComponent } from './employee/manage-employee/manage-employee.component'
 
 const appRoutes: Routes = [
   { path: 'login', component: LoginComponent },
@@ -76,6 +78,9 @@
         { path: 'cheque_clearing', component: ChequeClearingComponent },
         { path: 'transaction_type', component: TransactionTypeComponent },
         { path: 'add_member', component: AddMemberComponent },
+        { path: 'manage_members', component: ManageMembersComponent },
+        { path: 'add_employee', component: AddEmployeeComponent },
+        { path: 'manage_employees', component: ManageEmployeeComponent },
   ]
 }
 ];
@@ -85,7 +90,7 @@
   declarations: [
     AppComponent,LoginComponent, NavbarComponent, DashboardComponent,
      AccountingComponent, GeneralLedgerComponent, AddJournalEntryComponent, 
-     PayrollsComponent, ChartOfAccountsComponent, AddTransactionTypeComponent, TrialBalanceComponent, ChequeClearingComponent, TransactionTypeComponent, AddMemberComponent, ManageMembersComponent
+     PayrollsComponent, ChartOfAccountsComponent, AddTransactionTypeComponent, TrialBalanceComponent, ChequeClearingComponent, TransactionTypeComponent, AddMemberComponent, ManageMembersComponent, AddEmployeeComponent, ManageEmployeeComponent
   ],
   imports: [RouterModule.forRoot(appRoutes),
     BrowserModule, BrowserAnimationsModule,
diff --git a/src/app/customer/add-member/add-member.component.html b/src/app/customer/add-member/add-member.component.html
index 97d5de1..98c10eb 100644
--- a/src/app/customer/add-member/add-member.component.html
+++ b/src/app/customer/add-member/add-member.component.html
@@ -24,40 +24,44 @@
     <mat-datepicker #picker></mat-datepicker>
   </mat-form-field>
   </form>
-  <span>Address</span>
+  <span>ADDRESS</span>
   <form class="fineract-form">
   <mat-form-field>
-    <input matInput placeholder="Lastname">
+    <input matInput placeholder="Street">
   </mat-form-field>
   <br/>
   <mat-form-field>
-    <input matInput placeholder="Lastname">
+    <input matInput placeholder="City">
   </mat-form-field>
   <br/>
   <mat-form-field>
-    <input matInput placeholder="Lastname">
+    <input matInput placeholder="Postal code">
   </mat-form-field>
   <br/>
   <mat-form-field>
-    <input matInput placeholder="Lastname">
+    <input matInput placeholder="Country">
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <input matInput placeholder="Region">
   </mat-form-field>
   </form>
-<span>Contact</span>
+<span>CONTACT</span>
 <form class="fineract-form">
 <mat-form-field>
-  <input matInput placeholder="Lastname">
+  <input matInput placeholder="Email">
 </mat-form-field>
 <br/>
 <mat-form-field>
-  <input matInput placeholder="Lastname">
+  <input matInput placeholder="Phone">
 </mat-form-field>
 <br/>
 <mat-form-field>
-  <input matInput placeholder="Lastname">
+  <input matInput placeholder="Mobile">
 </mat-form-field>
 </form>
-<span>Assign member to office(optional)</span>
-<form>
+<span>ASSIGN MEMBER TO OFFICE(OPTIONAL)</span>
+<form class="fineract-form">
   
   <mat-form-field>
     <mat-select placeholder="Assigned office">
@@ -72,8 +76,8 @@
 </mat-form-field>
 <button mat-raised-button color="primary">search</button>
 </form>
-<span>Assign member to employee(optional)</span>
-<form>
+<span>ASSIGN MEMBER TO EMPLOYEE(OPTIONAL)</span>
+<form class="fineract-form">
   
   <mat-form-field>
     <mat-select placeholder="Assigned employee">
@@ -88,8 +92,8 @@
 </mat-form-field>
 <button mat-raised-button color="primary">search</button>
 </form>
-<span>Custom Fields</span>
-<br/>
+<span>CUSTOM FIELDS</span>
+<form class="fineract-form">
 <mat-form-field>
   <input matInput placeholder="Sample customer field">
 </mat-form-field>
@@ -97,7 +101,7 @@
 <mat-form-field>
   <input matInput placeholder="employer">
 </mat-form-field>
-
+</form>
   <div>
   <button mat-raised-button class="button1" color="primary">Submit</button>
   <button mat-raised-button class="button2" color="warn">Cancel</button>
diff --git a/src/app/customer/manage-members/manage-members.component.html b/src/app/customer/manage-members/manage-members.component.html
index 4d9c93b..d846c2d 100644
--- a/src/app/customer/manage-members/manage-members.component.html
+++ b/src/app/customer/manage-members/manage-members.component.html
@@ -1,3 +1,47 @@
-<p>
-  manage-members works!
-</p>
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Manage Members</h3>
+  <mat-divider></mat-divider>
+  <div class="fineract-button">
+  <a mat-raised-button  color="primary" [routerLink]="['/navbar/add_member']">
+    <mat-icon>add</mat-icon>Add Member</a>
+    </div>
+  <mat-form-field>
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by firstName/lastName">
+  </mat-form-field>
+  
+<br>
+<mat-divider></mat-divider>
+
+<mat-table #table [dataSource]="dataSource">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="id">
+    <mat-header-cell *matHeaderCellDef>Code</mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <a routerLink="{{element.id}}">{{element.id}}</a>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="firstName">
+    <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.firstName}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="lastName">
+      <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="status">
+      <mat-header-cell *matHeaderCellDef>Current Status</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.status}} </mat-cell>
+    </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
+  
+  
+</div>
+  
diff --git a/src/app/customer/manage-members/manage-members.component.scss b/src/app/customer/manage-members/manage-members.component.scss
index e69de29..87b71f6 100644
--- a/src/app/customer/manage-members/manage-members.component.scss
+++ b/src/app/customer/manage-members/manage-members.component.scss
@@ -0,0 +1,16 @@
+.my-div{
+    margin-left: 2%;
+    margin-right:2%;
+    border-radius: 5px 5px 5px 5px;
+    background-color: #e6e6ff;
+    min-height: 100%;
+   
+  }
+  table {
+      width: 100%;
+    }
+    
+    .mat-form-field {
+      font-size: 14px;
+      width: 100%;
+    }
\ No newline at end of file
diff --git a/src/app/customer/manage-members/manage-members.component.ts b/src/app/customer/manage-members/manage-members.component.ts
index fcacd18..dc9c822 100644
--- a/src/app/customer/manage-members/manage-members.component.ts
+++ b/src/app/customer/manage-members/manage-members.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
 
 @Component({
   selector: 'app-manage-members',
@@ -6,6 +7,14 @@
   styleUrls: ['./manage-members.component.scss']
 })
 export class ManageMembersComponent implements OnInit {
+  displayedColumns = ['id','firstName','lastName','status'];
+  dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+    this.dataSource.filter = filterValue;
+  }
 
   constructor() { }
 
@@ -13,3 +22,14 @@
   }
 
 }
+export interface Element {
+  id: number;
+  firstName: string;
+  lastName: string;
+  status: boolean;
+  
+}
+
+const ELEMENT_DATA: Element[] = [
+  
+];
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 8f280fd..e17d117 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -2,7 +2,7 @@
   <span>Clients</span>
   <mat-list>
     <mat-list-item>
-      <span>View Members</span> &nbsp;|
+      <a [routerLink]="['/navbar/manage_members']">View Members</a> &nbsp;|
       &nbsp;<span>View Groups</span>
     </mat-list-item>
   </mat-list>
@@ -21,7 +21,7 @@
   <mat-list>
     <mat-list-item>
       <span>View Offices</span>&nbsp;|
-      &nbsp;<span>View Employees</span>
+      &nbsp;<a [routerLink]="['/navbar/manage_employees']">View Employees</a>
     </mat-list-item>
   </mat-list>
 </mat-card>
diff --git a/src/app/employee/add-employee/add-employee.component.html b/src/app/employee/add-employee/add-employee.component.html
new file mode 100644
index 0000000..4689635
--- /dev/null
+++ b/src/app/employee/add-employee/add-employee.component.html
@@ -0,0 +1,63 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Add Employee</h3>
+  <mat-divider></mat-divider>
+  <span>EMPLOYEE DETAILS</span>
+<form class="fineract-form">
+  <mat-form-field>
+    <input matInput placeholder="username">
+  </mat-form-field>
+<br/>
+  <mat-form-field>
+    <input matInput placeholder="Firstname">
+  </mat-form-field>
+<br/>
+  <mat-form-field>
+    <input matInput placeholder="Middlename">
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <input matInput placeholder="Lastname">
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <mat-select placeholder="Role">
+      <mat-option *ngFor="let office of offices" [value]="office.value">
+        {{ office.viewValue }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <mat-select placeholder="Office(optional)">
+      <mat-option *ngFor="let office of offices" [value]="office.value">
+        {{ office.viewValue }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <br/>
+  <mat-form-field>
+    <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
+   
+  </mat-form-field>
+
+  </form>
+  
+<span>EMPLOYEE CONTACT(OPTIONAL)</span>
+<form class="fineract-form">
+<mat-form-field>
+  <input matInput placeholder="Email">
+</mat-form-field>
+<br/>
+<mat-form-field>
+  <input matInput placeholder="Phone">
+</mat-form-field>
+<br/>
+<mat-form-field>
+  <input matInput placeholder="Mobile">
+</mat-form-field>
+</form>
+  <div>
+  <button mat-raised-button class="button1" color="primary">Submit</button>
+  <button mat-raised-button class="button2" color="warn">Cancel</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/employee/add-employee/add-employee.component.scss b/src/app/employee/add-employee/add-employee.component.scss
new file mode 100644
index 0000000..7109ed8
--- /dev/null
+++ b/src/app/employee/add-employee/add-employee.component.scss
@@ -0,0 +1,13 @@
+.fineract-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+  .button1{
+      margin-left: 50%;
+      
+      }
+  .button1, .button2{
+      width:20px;
+      display: inline-block;
+  }
\ No newline at end of file
diff --git a/src/app/employee/add-employee/add-employee.component.spec.ts b/src/app/employee/add-employee/add-employee.component.spec.ts
new file mode 100644
index 0000000..87be9fe
--- /dev/null
+++ b/src/app/employee/add-employee/add-employee.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddEmployeeComponent } from './add-employee.component';
+
+describe('AddEmployeeComponent', () => {
+  let component: AddEmployeeComponent;
+  let fixture: ComponentFixture<AddEmployeeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddEmployeeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddEmployeeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/employee/add-employee/add-employee.component.ts b/src/app/employee/add-employee/add-employee.component.ts
new file mode 100644
index 0000000..526ce35
--- /dev/null
+++ b/src/app/employee/add-employee/add-employee.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-add-employee',
+  templateUrl: './add-employee.component.html',
+  styleUrls: ['./add-employee.component.scss']
+})
+export class AddEmployeeComponent implements OnInit {
+
+  hide = true;
+
+  offices = [
+    {value: 'office-1', viewValue: 'Head office'},
+   
+  ];
+
+  employees = [
+    {value: '', viewValue: ''},
+   
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/employee/manage-employee/manage-employee.component.html b/src/app/employee/manage-employee/manage-employee.component.html
new file mode 100644
index 0000000..c6b2e94
--- /dev/null
+++ b/src/app/employee/manage-employee/manage-employee.component.html
@@ -0,0 +1,42 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Manage Employees</h3>
+  <mat-divider></mat-divider>
+  <div class="fineract-button">
+  <a mat-raised-button  color="primary" [routerLink]="['/navbar/add_employee']">
+    <mat-icon>add</mat-icon>Add Employee</a>
+    </div>
+  <mat-form-field>
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by firstName/lastName">
+  </mat-form-field>
+  
+<br>
+<mat-divider></mat-divider>
+
+<mat-table #table [dataSource]="dataSource">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="id">
+    <mat-header-cell *matHeaderCellDef>Code</mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <a routerLink="{{element.id}}">{{element.id}}</a>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="firstName">
+    <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.firstName}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="lastName">
+      <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
+    </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
+  
+  
+</div>
+  
diff --git a/src/app/employee/manage-employee/manage-employee.component.scss b/src/app/employee/manage-employee/manage-employee.component.scss
new file mode 100644
index 0000000..87b71f6
--- /dev/null
+++ b/src/app/employee/manage-employee/manage-employee.component.scss
@@ -0,0 +1,16 @@
+.my-div{
+    margin-left: 2%;
+    margin-right:2%;
+    border-radius: 5px 5px 5px 5px;
+    background-color: #e6e6ff;
+    min-height: 100%;
+   
+  }
+  table {
+      width: 100%;
+    }
+    
+    .mat-form-field {
+      font-size: 14px;
+      width: 100%;
+    }
\ No newline at end of file
diff --git a/src/app/employee/manage-employee/manage-employee.component.spec.ts b/src/app/employee/manage-employee/manage-employee.component.spec.ts
new file mode 100644
index 0000000..8ebc029
--- /dev/null
+++ b/src/app/employee/manage-employee/manage-employee.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageEmployeeComponent } from './manage-employee.component';
+
+describe('ManageEmployeeComponent', () => {
+  let component: ManageEmployeeComponent;
+  let fixture: ComponentFixture<ManageEmployeeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ManageEmployeeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ManageEmployeeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/employee/manage-employee/manage-employee.component.ts b/src/app/employee/manage-employee/manage-employee.component.ts
new file mode 100644
index 0000000..ea62ebe
--- /dev/null
+++ b/src/app/employee/manage-employee/manage-employee.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
+
+
+@Component({
+  selector: 'app-manage-employee',
+  templateUrl: './manage-employee.component.html',
+  styleUrls: ['./manage-employee.component.scss']
+})
+export class ManageEmployeeComponent implements OnInit {
+  displayedColumns = ['id','firstName','lastName'];
+  dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+    this.dataSource.filter = filterValue;
+  }
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
+export interface Element {
+  id: number;
+  firstName: string;
+  lastName: string;
+  
+}
+
+const ELEMENT_DATA: Element[] = [
+  
+];
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index d054765..9bbfd38 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -47,7 +47,8 @@
           </div>
           <div class="app-input1">
             <mat-form-field class="app-input2">
-              <input matInput placeholder="Password">
+              <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
+              <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
             </mat-form-field>
           </div>
           <br>
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.scss
similarity index 100%
rename from src/app/login/login.component.css
rename to src/app/login/login.component.scss
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index ceeab4e..7d1588e 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -6,12 +6,12 @@
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
+  styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
   selected = 'English';
 
- 
+ hide= true;
 
   constructor(private _router: Router){}