Add accounts search page.

src/app/_interceptors/error.interceptor.ts

@@ -6,7 +6,7 @@ import {
   HttpInterceptor, HttpErrorResponse
 } from '@angular/common/http';
 import {Observable, throwError} from 'rxjs';
-import {catchError, retry} from 'rxjs/operators';
+import {catchError} from 'rxjs/operators';
 import {ErrorDialogService, LoggingService} from '@app/_services';
 import {Router} from '@angular/router';
 

src/app/pages/accounts/account-search/account-search.component.html

@@ -0,0 +1,42 @@
+<!-- Begin page -->
+<div class="wrapper">
+  <app-sidebar></app-sidebar>
+
+  <!-- ============================================================== -->
+  <!-- Start Page Content here -->
+  <!-- ============================================================== -->
+
+  <div id="content">
+    <app-topbar></app-topbar>
+    <!-- Start Content-->
+    <div class="container-fluid" appMenuSelection>
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
+          <li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>
+          <li class="breadcrumb-item active" aria-current="page"><a routerLink="/accounts/search">Search</a></li>
+        </ol>
+      </nav>
+      <div class="card">
+        <mat-card-title class="card-header">
+          Accounts
+        </mat-card-title>
+        <div class="card-body">
+          <div class="row card-header">
+            <mat-form-field appearance="outline">
+              <mat-label> Search </mat-label>
+              <input matInput placeholder="Search for account by name">
+              <mat-icon matSuffix>name</mat-icon>
+              <mat-hint>Name</mat-hint>
+            </mat-form-field>
+            <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2"> SEARCH </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <app-footer appMenuSelection></app-footer>
+  </div>
+  <!-- ============================================================== -->
+  <!-- End Page content -->
+  <!-- ============================================================== -->
+</div>

src/app/pages/accounts/account-search/account-search.component.spec.ts

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

src/app/pages/accounts/account-search/account-search.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-account-search',
+  templateUrl: './account-search.component.html',
+  styleUrls: ['./account-search.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AccountSearchComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/accounts/accounts-routing.module.ts

@@ -5,9 +5,11 @@ import { AccountsComponent } from '@pages/accounts/accounts.component';
 import {CreateAccountComponent} from '@pages/accounts/create-account/create-account.component';
 import {ExportAccountsComponent} from '@pages/accounts/export-accounts/export-accounts.component';
 import {AccountDetailsComponent} from '@pages/accounts/account-details/account-details.component';
+import {AccountSearchComponent} from '@pages/accounts/account-search/account-search.component';
 
 const routes: Routes = [
   { path: '', component: AccountsComponent },
+  { path: 'search', component: AccountSearchComponent },
   // { path: 'create', component: CreateAccountComponent },
   { path: 'export', component: ExportAccountsComponent },
   { path: ':id', component: AccountDetailsComponent },

src/app/pages/accounts/accounts.module.ts

@@ -24,10 +24,18 @@ import {MatTabsModule} from '@angular/material/tabs';
 import {MatRippleModule} from '@angular/material/core';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {ReactiveFormsModule} from '@angular/forms';
+import { AccountSearchComponent } from './account-search/account-search.component';
 
 
 @NgModule({
-  declarations: [AccountsComponent, AccountDetailsComponent, CreateAccountComponent, DisbursementComponent, ExportAccountsComponent],
+  declarations: [
+    AccountsComponent,
+    AccountDetailsComponent,
+    CreateAccountComponent,
+    DisbursementComponent,
+    ExportAccountsComponent,
+    AccountSearchComponent
+  ],
   imports: [
     CommonModule,
     AccountsRoutingModule,