From 1a86382a1500307c30c30d55c203e8a395ecbbbb Mon Sep 17 00:00:00 2001
From: "venbatechnologies@gmail.com" <venbatechnologies@gmail.com>
Date: Sat, 22 Sep 2018 09:28:17 +0530
Subject: [PATCH] master detail changes

---
 .../branch-list/branch-list.component.html    |  7 +--
 .../branch-list/branch-list.component.ts      |  8 ++-
 .../city-dialog/city-dialog.component.html    | 16 +++--
 .../city/city-list/city-list.component.html   | 55 ++++++++++++++++-
 .../city/city-list/city-list.component.scss   | 23 ++++++-
 .../city/city-list/city-list.component.ts     | 10 +++-
 ...comments-on-locality-dialog.component.html | 13 +++-
 .../comments-on-locality-list.component.html  | 53 +++++++++++++++-
 .../comments-on-locality-list.component.scss  | 22 ++++++-
 .../comments-on-locality-list.component.ts    | 10 +++-
 .../company-dialog.component.html             | 12 +++-
 .../company-list/company-list.component.html  | 54 +++++++++++++++--
 .../company-list/company-list.component.scss  | 22 ++++++-
 .../company-list/company-list.component.ts    |  9 ++-
 .../customer-behaviour-dialog.component.html  | 12 +++-
 .../customer-behaviour-list.component.html    | 51 +++++++++++++++-
 .../customer-behaviour-list.component.scss    | 22 ++++++-
 .../customer-behaviour-list.component.ts      | 10 +++-
 .../customer-segment-dialog.component.html    | 12 +++-
 .../customer-segment-list.component.html      | 54 ++++++++++++++++-
 .../customer-segment-list.component.scss      | 23 ++++++-
 .../customer-segment-list.component.ts        | 10 +++-
 .../designation-dialog.component.html         | 17 ++++--
 .../designation-list.component.html           | 52 +++++++++++++++-
 .../designation-list.component.scss           | 26 +++++++-
 .../designation-list.component.ts             | 10 +++-
 .../frequency-dialog.component.html           | 13 +++-
 .../frequency-list.component.html             | 52 +++++++++++++++-
 .../frequency-list.component.scss             | 25 +++++++-
 .../frequency-list.component.ts               |  8 ++-
 ...ustry_classification-dialog.component.html | 14 ++++-
 ...ndustry_classification-list.component.html | 52 +++++++++++++++-
 ...ndustry_classification-list.component.scss | 24 +++++++-
 .../industry_classification-list.component.ts |  9 ++-
 .../lender-hierarchy-dialog.component.html    | 14 ++++-
 .../lender-hierarchy-list.component.html      | 52 +++++++++++++++-
 .../lender-hierarchy-list.component.scss      | 26 +++++++-
 .../lender-hierarchy-list.component.ts        |  8 ++-
 .../members-occupation-dialog.component.html  | 14 ++++-
 .../members-occupation-list.component.html    | 54 ++++++++++++++++-
 .../members-occupation-list.component.scss    | 26 +++++++-
 .../members-occupation-list.component.ts      | 10 +++-
 .../pd-allocation-type-dialog.component.html  | 16 ++++-
 .../pd-allocation-type-list.component.html    | 50 +++++++++++++++-
 .../pd-allocation-type-list.component.scss    | 24 +++++++-
 .../pd-allocation-type-list.component.ts      | 10 +++-
 ...pd-location-approach-dialog.component.html | 14 ++++-
 .../pd-location-approach-list.component.html  | 54 ++++++++++++++++-
 .../pd-location-approach-list.component.scss  | 24 +++++++-
 .../pd-location-approach-list.component.ts    |  8 ++-
 .../pd-type-dialog.component.html             | 14 ++++-
 .../pd-type-list/pd-type-list.component.html  | 50 +++++++++++++++-
 .../pd-type-list/pd-type-list.component.scss  | 24 +++++++-
 .../pd/pd-type-list/pd-type-list.component.ts | 10 +++-
 .../product-dialog.component.html             | 18 ++++--
 .../product-list/product-list.component.html  | 60 ++++++++++++-------
 .../product-list/product-list.component.scss  | 26 +++++++-
 .../product-list/product-list.component.ts    | 14 ++++-
 .../regions-dialog.component.html             | 16 ++++-
 .../regions-list/regions-list.component.html  | 53 +++++++++++++++-
 .../regions-list/regions-list.component.scss  | 24 +++++++-
 .../regions-list/regions-list.component.ts    | 10 +++-
 .../relation-ship-dialog.component.html       | 16 ++++-
 .../relation-ship-list.component.html         | 52 +++++++++++++++-
 .../relation-ship-list.component.scss         | 23 ++++++-
 .../relation-ship-list.component.ts           |  9 ++-
 .../states-dialog.component.html              | 22 +++++--
 .../states-list/states-list.component.html    | 52 +++++++++++++++-
 .../states-list/states-list.component.scss    | 24 +++++++-
 .../states-list/states-list.component.ts      | 10 +++-
 .../sub-product-dialog.component.html         | 22 +++++--
 .../sub-product-list.component.html           | 52 +++++++++++++++-
 .../sub-product-list.component.scss           | 24 +++++++-
 .../sub-product-list.component.ts             | 10 +++-
 .../title-dialog/title-dialog.component.html  | 16 ++++-
 .../title-list/title-list.component.html      | 52 +++++++++++++++-
 .../title-list/title-list.component.scss      | 24 +++++++-
 .../title/title-list/title-list.component.ts  |  9 ++-
 .../activity-dialog.component.html            | 10 ++++
 .../activity-list.component.html              | 50 +++++++++++++++-
 .../activity-list.component.scss              | 24 +++++++-
 .../activity-list/activity-list.component.ts  |  9 ++-
 .../uom/uom-dialog/uom-dialog.component.html  | 12 +++-
 .../uom/uom-list/uom-list.component.html      | 51 +++++++++++++++-
 .../uom/uom-list/uom-list.component.scss      | 23 ++++++-
 .../uom/uom-list/uom-list.component.ts        |  9 ++-
 86 files changed, 1966 insertions(+), 172 deletions(-)

diff --git a/ng6-seed/src/app/settings/masters/component/branch/branch-list/branch-list.component.html b/ng6-seed/src/app/settings/masters/component/branch/branch-list/branch-list.component.html
index 12b19ce1f..b33b0042b 100644
--- a/ng6-seed/src/app/settings/masters/component/branch/branch-list/branch-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/branch/branch-list/branch-list.component.html
@@ -15,7 +15,7 @@
    
    <div class="example-container mat-elevation-z8">
    
-     <mat-table  *ngIf="dataSource.length > 0" #table [dataSource]="dataSource" matSort >
+     <mat-table [dataSource]="dataSource" matSort >
    
         <ng-container matColumnDef="SerialNo">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
@@ -53,12 +53,11 @@
        </mat-row>
      </mat-table>
 
-     <p *ngIf="dataSource.length === 0">No records found</p>
+     <!-- <div *ngIf="dataSource.length === 0">No records found</div> -->
    
      <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
    </div>
 </mat-card-content>
 
-
   
-  <p *ngIf="dataSource.length === 0">No records found</p>
\ No newline at end of file
+  <!-- <p *ngIf="dataSource.length === 0">No records found</p> -->
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/branch/branch-list/branch-list.component.ts b/ng6-seed/src/app/settings/masters/component/branch/branch-list/branch-list.component.ts
index aa4494611..ba05d7cde 100644
--- a/ng6-seed/src/app/settings/masters/component/branch/branch-list/branch-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/branch/branch-list/branch-list.component.ts
@@ -12,8 +12,7 @@ import { map } from 'rxjs/operators';
 
 import { DataSource } from '@angular/cdk/table';
 import { of as observableOf, merge } from 'rxjs';
-// import { Bra } from './../branch-list';
-// BranchListComponent
+
 import { MastersService } from '../../../../service/masters/masters.service';
 import { BranchDialogComponent } from '../branch-dialog/branch-dialog.component';
 import { Branch,States,City } from '../../../model/branch';
@@ -45,7 +44,10 @@ export class BranchListComponent implements OnInit {
                   data => {
                       this.userData = data.records;
                       // alert(this.userData);
-                      this.dataLength = data.records.length;
+                      if(data.records === ''){
+                        this.dataLength = data.records.length;  
+                      }else{
+                      this.dataLength = 0}
                       this.dataSource.data = this.userData; 
                   }
                 )
diff --git a/ng6-seed/src/app/settings/masters/component/city/city-dialog/city-dialog.component.html b/ng6-seed/src/app/settings/masters/component/city/city-dialog/city-dialog.component.html
index 2fa6c31c2..3634a055c 100644
--- a/ng6-seed/src/app/settings/masters/component/city/city-dialog/city-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/city/city-dialog/city-dialog.component.html
@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>City &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,15 +12,23 @@
   <div class="mat-dialog-title" fxFlex="15px">City</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex></div>
+</div> -->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> City &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+</div>
 </div>
-
 
 <form [formGroup]="_cityForm" (submit)="onSubmit()">
 
     <div class="form-group">
           <mat-dialog-content>
 
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                   <mat-form-field>
                         <mat-select placeholder="Pick Up State Name" required [formControl]="_cityForm.controls['fk_state_id']">
                                          <mat-option  *ngFor="let sd of stateDatas"  [value]="sd.state_id">{{ sd.name }}</mat-option>
@@ -29,7 +37,7 @@
                   </mat-form-field>
                   
             </div>
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                   <mat-form-field>
                         <input matInput type="text" placeholder="City Name" required [formControl]="_cityForm.controls['name']">
                         <mat-error *ngIf="!_cityForm.controls['name'].valid && _cityForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.html b/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.html
index 29e55065c..1d6d639c5 100644
--- a/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.html
@@ -8,7 +8,7 @@
    </div>
    <!-- displayedColumns = ['city_id','name', 'fk_state_id','state_name' , 'isactive','actions']; 
      <div class="example-container mat-elevation-z8">
-            <table>-->
+            <table>
      <div datatable>
             <table style="border-collapse: collapse">           
                    <thead>
@@ -31,7 +31,7 @@
                   </td> 
                 </tr>
               </table>
-          </div> 
+          </div> -->
 
     <!--      <div>
             <!-- <mat-table [dataSource]="dataSource">  ->
@@ -71,6 +71,55 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
           
-  
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+ 
+        
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.scss b/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.scss
index 2724e14f3..4e7bb577b 100644
--- a/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.scss
@@ -54,7 +54,7 @@
 .mat-table {
   overflow: auto;
   max-height: 500px;
-}*/
+}*
   table {
     width: 100%;
   }
@@ -66,4 +66,25 @@
 .button{
   padding-left: 6px;
     font-size: 20px;
+}*/
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.ts b/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.ts
index 86ce0f917..42bfc149f 100644
--- a/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/city/city-list/city-list.component.ts
@@ -28,9 +28,15 @@ export class CityListComponent implements OnInit {
   //, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   displayedColumns = ['city_id','name', 'fk_state_id','state_name' , 'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
 
@@ -38,7 +44,7 @@ export class CityListComponent implements OnInit {
   //    return this._MastersService.getAllCity();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getCity();
diff --git a/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-dialog/comments-on-locality-dialog.component.html b/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-dialog/comments-on-locality-dialog.component.html
index 971efad8b..b6ac23634 100644
--- a/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-dialog/comments-on-locality-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-dialog/comments-on-locality-dialog.component.html
@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>CommentOnLocality &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,6 +12,15 @@
   <div class="mat-dialog-title" fxFlex="15px">Comment On Locality</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Comment On Locality &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+</div>
 </div>
 
 
@@ -20,7 +29,7 @@
     <div class="form-group">
           <mat-dialog-content>
 
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                   <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Rating" required [formControl]="_CommentOnLocalityForm.controls['rating']">
                         <mat-error *ngIf="!_CommentOnLocalityForm.controls['rating'].valid && _CommentOnLocalityForm.controls['rating'].touched" class="mat-text-warn">You must include a Rating.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.html b/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.html
index 013d6dd64..57e785702 100644
--- a/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.html
@@ -6,7 +6,7 @@
   <div *ngIf="loader">
     <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
  </div>        
- <div datatable>
+ <!--<div datatable>
     <table style="border-collapse: collapse">           
                  <thead>
                     <th style="text-align:  center;">#</th>
@@ -60,6 +60,55 @@
         </div>
         
         <br>-->
-        
 
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
+        
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
+        
 </mat-card-content>
diff --git a/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.scss b/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.scss
index 3b5b29164..3a04bafd8 100644
--- a/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -89,5 +89,25 @@
   
   th { 
     text-align: left;
+  }*/
+  .example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .example-header {  
+    min-height: 64px;
+    padding: 8px 24px 0;
+  }
+  
+  .mat-form-field {
+    font-size: 14px;
+    width: 100%;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
   }
 
diff --git a/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.ts b/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.ts
index 8125c217a..d55cb3c44 100644
--- a/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/comments-on-locality/comments-on-locality-list/comments-on-locality-list.component.ts
@@ -28,9 +28,15 @@ export class CommentsOnLocalityListComponent implements OnInit {
 
   displayedColumns = ['comments_on_locality_id','rating','isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+  //displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
-   
+
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
 
@@ -38,7 +44,7 @@ export class CommentsOnLocalityListComponent implements OnInit {
   //    return this._MastersService.getAllCommentsOnLocality();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+//  dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getCommentsOnLocality();
diff --git a/ng6-seed/src/app/settings/masters/component/company/company-dialog/company-dialog.component.html b/ng6-seed/src/app/settings/masters/component/company/company-dialog/company-dialog.component.html
index 0bec921c2..9acbcf32b 100644
--- a/ng6-seed/src/app/settings/masters/component/company/company-dialog/company-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/company/company-dialog/company-dialog.component.html
@@ -2,7 +2,7 @@
     <h2 mat-dialog-title>Company &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div> 
   
 <div class="container"
      fxLayout
@@ -13,7 +13,17 @@
   <div class="mat-dialog-title" fxFlex="15px">Company</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Company &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   <form [formGroup]="_companyForm" (ngsubmit)="onSubmit()">
diff --git a/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.html b/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.html
index 7a49c820e..c0fd15667 100644
--- a/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.html
@@ -6,15 +6,15 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>        
-     <div datatable>
+     <!-- <div datatable>
         <table style="border-collapse: collapse">           
                    <thead>
                       <th style="text-align:  center;">#</th>
-                      <!-- <th style="text-align:  center;">Company ID</th> -->
+                      <!-- <th style="text-align:  center;">Company ID</th> ->
                       <th style="text-align:  center;">Company Name</th>
                       <th style="text-align:  center;">Company City</th>
                       <th style="text-align:  center;">Company State</th>
-                      <!-- <th style="text-align:  center;">Is Active</th> -->
+                      <!-- <th style="text-align:  center;">Is Active</th> ->
                       <th style="text-align:  center;">Action</th>
                     </thead>
     
@@ -94,7 +94,53 @@
             </mat-table>
           </div>-->
           
-          <br>
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
           
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
   
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.scss b/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.scss
index 3b5b29164..3a04bafd8 100644
--- a/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -89,5 +89,25 @@
   
   th { 
     text-align: left;
+  }*/
+  .example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .example-header {  
+    min-height: 64px;
+    padding: 8px 24px 0;
+  }
+  
+  .mat-form-field {
+    font-size: 14px;
+    width: 100%;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
   }
 
diff --git a/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.ts b/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.ts
index 32d988545..a9adb57ee 100644
--- a/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/company/company-list/company-list.component.ts
@@ -29,8 +29,15 @@ export class CompanyListComponent implements OnInit {
   //displayedColumns = ['Company_id', 'fk_city_id', 'name', 'createdon', 'fk_createdby', 'updatedon', 'fk_updatedby', 'isactive','actions'];
   displayedColumns = ['company_id', 'name', 'addressline1', 'addressline2','addressline3', 'city', 'state','city_name', 'state_name',  'pincode', 'logo','action'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+
  
   
   constructor(private dialog: MatDialog,
@@ -40,7 +47,7 @@ export class CompanyListComponent implements OnInit {
   //    return this._MastersService.getAllCompany();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getCompany();
diff --git a/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-dialog/customer-behaviour-dialog.component.html b/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-dialog/customer-behaviour-dialog.component.html
index f687d62b4..118352ce3 100644
--- a/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-dialog/customer-behaviour-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-dialog/customer-behaviour-dialog.component.html
@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>Customer Behaviour &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex>Customer Behaviour</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Customer Behaviour &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
 
 
diff --git a/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.html b/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.html
index 2b7b90e58..f023a0e38 100644
--- a/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.html
@@ -6,7 +6,7 @@
   <div *ngIf="loader">
       <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
    </div>           
-   <div datatable>
+   <!-- <div datatable>
       <table style="border-collapse: collapse">           
                  <thead>
                     <th style="text-align:  center;">#</th>
@@ -60,6 +60,55 @@
         </div>
         
         <br>-->
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
+        
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
         
 
 </mat-card-content>
diff --git a/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.scss b/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.scss
index 3b5b29164..9a2415cd2 100644
--- a/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -90,4 +90,24 @@
   th { 
     text-align: left;
   }
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
 
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.ts b/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.ts
index be8148726..1c0b79bec 100644
--- a/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/customer-behaviour/customer-behaviour-list/customer-behaviour-list.component.ts
@@ -28,9 +28,15 @@ export class CustomerBehaviourListComponent implements OnInit {
 
   displayedColumns = ['customer_behaviour_id', 'description', 'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
@@ -39,7 +45,7 @@ export class CustomerBehaviourListComponent implements OnInit {
   //    return this._MastersService.getAllCustomerBehaviour();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getCustomerBehaviour();
diff --git a/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-dialog/customer-segment-dialog.component.html b/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-dialog/customer-segment-dialog.component.html
index e836328b1..22adb586a 100644
--- a/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-dialog/customer-segment-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-dialog/customer-segment-dialog.component.html
@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>Customer Segment &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex>Customer Segment</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px"></div>
+</div> -->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Customer Segment &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
 
 
diff --git a/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.html b/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.html
index e0632e646..802d18565 100644
--- a/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.html
@@ -6,11 +6,11 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>                
-     <div datatable>
+     <!--<div datatable>
         <table style="border-collapse: collapse">           
                    <thead>
                       <th style="text-align:  center;">#</th>
-                      <!-- <th style="text-align:  center;">CustomerSegment ID</th> -->
+                      <!-- <th style="text-align:  center;">CustomerSegment ID</th> ->
                       <th style="text-align:  center;">CustomerSegment Name</th>
                       <th style="text-align:  center;">Abbrevation</th>
                       <th style="text-align:  center;">IsActive</th>
@@ -65,6 +65,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   </mat-card-content>
   
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.scss b/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.scss
index 3b5b29164..d48b35231 100644
--- a/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,24 @@
     text-align: left;
   }
 
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.ts b/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.ts
index 29e7eb6d9..c82cb9db3 100644
--- a/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/customer-segment/customer-segment-list/customer-segment-list.component.ts
@@ -27,9 +27,15 @@ export class CustomerSegmentListComponent implements OnInit {
 
   displayedColumns = ['customer_segment_id', 'abbr', 'name',  'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
@@ -38,7 +44,7 @@ export class CustomerSegmentListComponent implements OnInit {
   //    return this._MastersService.getAllCustomerSegment();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getCustomerSegment();
diff --git a/ng6-seed/src/app/settings/masters/component/designation/designation-dialog/designation-dialog.component.html b/ng6-seed/src/app/settings/masters/component/designation/designation-dialog/designation-dialog.component.html
index 85dd5b0f5..b425a40d2 100644
--- a/ng6-seed/src/app/settings/masters/component/designation/designation-dialog/designation-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/designation/designation-dialog/designation-dialog.component.html
@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>Designation &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,16 +12,23 @@
   <div class="mat-dialog-title" fxFlex="15px">Designation</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Designation &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+</div>
 </div>
-
-
 
 <form [formGroup]="_designationForm" (submit)="onSubmit()">
 
     <div class="form-group">
           <mat-dialog-content>
 
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                   <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Name" required [formControl]="_designationForm.controls['name']">
                         <mat-error *ngIf="!_designationForm.controls['name'].valid && _designationForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>
@@ -31,7 +38,7 @@
 
             <!-- //designation_id, name, short_name, createdon, fk_createdby, updatedon, fk_updatedby, isactive -->
             
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                       <mat-form-field style="width: 100%">
                             <input matInput type="text" placeholder="Short Name" required [formControl]="_designationForm.controls['short_name']">
                             <mat-error *ngIf="!_designationForm.controls['short_name'].valid && _designationForm.controls['short_name'].touched" class="mat-text-warn">You must include a Short Name.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.html b/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.html
index b0d993ac2..06204d88b 100644
--- a/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.html
@@ -6,7 +6,7 @@
   <div *ngIf="loader">
       <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
    </div>                   
-   <div datatable>
+   <!-- <div datatable>
       <table style="border-collapse: collapse">           
                  <thead>
                     <th style="text-align:  center;">#</th>
@@ -65,6 +65,56 @@
         </div>
         
         <br>-->
+
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
+        
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
         
 
 </mat-card-content>
diff --git a/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.scss b/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.scss
index 3b5b29164..632b268bc 100644
--- a/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -89,5 +89,27 @@
   
   th { 
     text-align: left;
-  }
+  }*/
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
 
diff --git a/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.ts b/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.ts
index 2ab36b0cb..f2fb3aa54 100644
--- a/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/designation/designation-list/designation-list.component.ts
@@ -29,9 +29,15 @@ export class DesignationListComponent implements OnInit {
   displayedColumns = ['designation_id', 'name', 'short_name','isactive','actions'];
   
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
@@ -40,7 +46,7 @@ export class DesignationListComponent implements OnInit {
   //    return this._MastersService.getAllDesignation();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getDesignation();
diff --git a/ng6-seed/src/app/settings/masters/component/frequency/frequency-dialog/frequency-dialog.component.html b/ng6-seed/src/app/settings/masters/component/frequency/frequency-dialog/frequency-dialog.component.html
index 49ccbd2e1..80a1bd05e 100644
--- a/ng6-seed/src/app/settings/masters/component/frequency/frequency-dialog/frequency-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/frequency/frequency-dialog/frequency-dialog.component.html
@@ -2,7 +2,7 @@
     <h2 mat-dialog-title>Frequency &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,6 +12,15 @@
   <div class="mat-dialog-title" fxFlex>Frequency</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;">Frequency &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+</div>
 </div>
 
   
@@ -21,7 +30,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+                  <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Frequency Name" required [formControl]="_frequencyForm.controls['name']">
                           <mat-error *ngIf="!_frequencyForm.controls['name'].valid && _frequencyForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.html b/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.html
index f3004e09b..97761bf29 100644
--- a/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.html
@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>         
-     <div datatable>
+     <!-- <div datatable>
         <table style="border-collapse: collapse">   
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -74,6 +74,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.scss b/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.scss
index af46dbc43..19796459f 100644
--- a/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.scss
@@ -84,7 +84,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -118,5 +118,28 @@ table {
 
 th { 
   text-align: left;
+}*/
+
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
 }
 
diff --git a/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.ts b/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.ts
index f623b76e0..3c48e5932 100644
--- a/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/frequency/frequency-list/frequency-list.component.ts
@@ -28,6 +28,12 @@ export class FrequencyListComponent implements OnInit {
 
   displayedColumns = ['frequency_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
@@ -39,7 +45,7 @@ export class FrequencyListComponent implements OnInit {
   //    return this._MastersService. getAllFrequency();
   //  }
 
-   dataSource = new UserDataSource(this._MastersService);
+  // dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getFrequency();
diff --git a/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-dialog/industry_classification-dialog.component.html b/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-dialog/industry_classification-dialog.component.html
index c358d229c..c79fd933f 100644
--- a/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-dialog/industry_classification-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-dialog/industry_classification-dialog.component.html
@@ -2,7 +2,7 @@
         <h2 mat-dialog-title>Industry Classification &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
         </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Industry Classification</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Industry Classification &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
       
       
@@ -21,7 +31,7 @@
           <div class="form-group">
                 <mat-dialog-content>
     
-                  <div class="mb-1"> 
+                  <div class="ml-xs mr-xs">
                         <mat-form-field style="width: 100%">
                               <input matInput type="text" placeholder="Classification Name" required [formControl]="_IndustryClassificationForm.controls['name']">
                               <mat-error *ngIf="!_IndustryClassificationForm.controls['name'].valid && _IndustryClassificationForm.controls['name'].touched" class="mat-text-warn">You must include a Classified Name.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.html b/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.html
index eee766509..69596a38c 100644
--- a/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.html
@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>            
-     <div datatable>
+     <!--<div datatable>
         <table style="border-collapse: collapse">   
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -75,5 +75,55 @@
               <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
             </mat-table>
           </div>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
                     
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.scss b/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.scss
index 49827ebf1..72f98f906 100644
--- a/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.scss
@@ -80,7 +80,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -114,5 +114,27 @@ table {
 
 th { 
   text-align: left;
+}*/
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
 }
 
diff --git a/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.ts b/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.ts
index 18e27206d..faefa88d0 100644
--- a/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/industry_classification/industry_classification-list/industry_classification-list.component.ts
@@ -36,9 +36,16 @@ export class IndustryClassificationListComponent implements OnInit {
   displayedColumns = ['industry_classification_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   //industry_classification_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
+
   
   constructor(private dialog: MatDialog,
     private _IMService: MastersService) { }
@@ -48,7 +55,7 @@ export class IndustryClassificationListComponent implements OnInit {
   //  }
 
   //displayedColumns: string[] = ['ID','ClassifiedName'];
-  dataSource = new UserDataSource(this._IMService);
+  //dataSource = new UserDataSource(this._IMService);
 
   
   ngOnInit() {
diff --git a/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-dialog/lender-hierarchy-dialog.component.html b/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-dialog/lender-hierarchy-dialog.component.html
index 556e1957e..bdfdff00e 100644
--- a/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-dialog/lender-hierarchy-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-dialog/lender-hierarchy-dialog.component.html
@@ -2,7 +2,7 @@
     <h2 mat-dialog-title>Lender Hierarchy &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
 fxLayout
 fxLayout.xs="column"
@@ -12,7 +12,17 @@ fxLayoutGap.xs="0">
 <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Lender Hierarchy </div>
 <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
 <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Lender Hierarchy &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   <form [formGroup]="_lenderHierarchyForm" (submit)="onSubmit()">
@@ -20,7 +30,7 @@ fxLayoutGap.xs="0">
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+                  <div class="ml-xs mr-xs">
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Lender Hierarchy Name" required [formControl]="_lenderHierarchyForm.controls['lender_hierarchy']">
                           <mat-error *ngIf="!_lenderHierarchyForm.controls['lender_hierarchy'].valid && _lenderHierarchyForm.controls['lender_hierarchy'].touched" class="mat-text-warn">You must include a Lender Hierarchy Name.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.html b/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.html
index d853be328..215905e28 100644
--- a/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.html
@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>     
-     <div datatable>
+     <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -59,6 +59,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.scss b/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.scss
index 3b5b29164..632b268bc 100644
--- a/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -89,5 +89,27 @@
   
   th { 
     text-align: left;
-  }
+  }*/
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
 
diff --git a/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.ts b/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.ts
index 79b1adc79..dd630e7f1 100644
--- a/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/lender-hierarchy/lender-hierarchy-list/lender-hierarchy-list.component.ts
@@ -28,6 +28,12 @@ export class LenderHierarchyListComponent implements OnInit {
 
   displayedColumns = ['lender_hierarchy_id', 'lender_hierarchy','isactive','actions'];
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
@@ -39,7 +45,7 @@ export class LenderHierarchyListComponent implements OnInit {
   //    return this._MastersService. getAllLenderHierarchy();
   //  }
 
-   dataSource = new UserDataSource(this._MastersService);
+  // dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
       this.getLenderHierarchy();
diff --git a/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-dialog/members-occupation-dialog.component.html b/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-dialog/members-occupation-dialog.component.html
index db0003168..345cb06f2 100644
--- a/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-dialog/members-occupation-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-dialog/members-occupation-dialog.component.html
@@ -2,7 +2,7 @@
     <h2 mat-dialog-title>Occupation of Non earning members &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Occupation of Non earning members </div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="2px"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;">Occupation of Non earning members &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   
@@ -21,7 +31,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+                  <div class="ml-xs mr-xs">
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Name" required [formControl]="_occupationForm.controls['name']">
                           <mat-error *ngIf="!_occupationForm.controls['name'].valid && _occupationForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.html b/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.html
index f3ec2f194..84f7056d1 100644
--- a/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.html
@@ -6,11 +6,11 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>        
-     <div datatable>
+     <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
-                      <!-- <th style="text-align:  center;">Occupation ID</th> -->
+                      <!-- <th style="text-align:  center;">Occupation ID</th> ->
                       <th style="text-align:  center;">Occupation Name</th>
                       <th style="text-align:  center;">IsActive</th>
                       <th style="text-align:  center;">Action</th>
@@ -79,6 +79,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.scss b/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.scss
index e29cae6e3..c0d38979f 100644
--- a/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.scss
@@ -21,7 +21,7 @@
     .header-cell{
     display:flex;
     justify-content:center;
-  }*/
+  }*
 
   .example-container {
     display: flex;
@@ -56,4 +56,26 @@
   
   th { 
     text-align: left;
-  }
\ No newline at end of file
+  }
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.ts b/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.ts
index c1c667ce9..9daf55a5b 100644
--- a/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/members-occupation/members-occupation-list/members-occupation-list.component.ts
@@ -30,6 +30,14 @@ export class MembersOccupationListComponent implements OnInit {
   displayedColumns = ['occupation_non_earning_member_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   //occupation_non_earning_member_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   
+  // @ViewChild(MatPaginator) paginator: MatPaginator;
+  // @ViewChild(MatSort) sort: MatSort;
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
@@ -45,7 +53,7 @@ export class MembersOccupationListComponent implements OnInit {
     this.getMemberOccupation();
   }
 
-  dataSource = new UserDataSource(this._memberService);
+  //dataSource = new UserDataSource(this._memberService);
 
   addMemberOccupation() {
     this.isPopupOpened = true;
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-dialog/pd-allocation-type-dialog.component.html b/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-dialog/pd-allocation-type-dialog.component.html
index 05f46c8c2..3940035af 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-dialog/pd-allocation-type-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-dialog/pd-allocation-type-dialog.component.html
@@ -2,7 +2,7 @@
             <h2 mat-dialog-title>PD Allocation Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
             </h2>
-        </div> -->
+        </div> 
           
         <div class="container"
         fxLayout
@@ -13,14 +13,24 @@
      <div class="mat-dialog-title" fxFlex fxFlexOrder="1">PD Allocation Type</div>
      <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
      <div fxFlex="2px" fxFlexOrder="2"></div>
-   </div>
+   </div>-->
+   <div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> PD Allocation Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
+</div>
+</div>
+
    
           <form [formGroup]="_PDAllocationTypeForm" (submit)="onSubmit()">
           
               <div class="form-group">
                     <mat-dialog-content>
         
-                      <div class="mb-1"> 
+                      <div class="ml-xs mr-xs">
                             <mat-form-field style="width: 100%">
                                   <input matInput type="text" placeholder="PD Allocation Type Name" required [formControl]="_PDAllocationTypeForm.controls['pd_allocation_type_name']">
                                   <mat-error *ngIf="!_PDAllocationTypeForm.controls['pd_allocation_type_name'].valid && _PDAllocationTypeForm.controls['pd_allocation_type_name'].touched" class="mat-text-warn">You must include a Name.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.html b/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.html
index 8db1d6b0b..66e7cf7aa 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.html
@@ -6,7 +6,7 @@
   <div *ngIf="loader">
       <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
   </div>           
-  <div datatable>
+  <!--<div datatable>
       <table style="border-collapse: collapse">  
                  <thead>
                     <th style="text-align:  center;">#</th>
@@ -57,7 +57,55 @@
             <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
           </mattable>
         </div>-->
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
         
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
         <br>
         
 
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.scss b/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.scss
index 3b5b29164..18ec45b41 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,25 @@
     text-align: left;
   }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.ts b/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.ts
index ff9001407..5ad0b1271 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-allocation-type-list/pd-allocation-type-list.component.ts
@@ -28,9 +28,15 @@ export class PdAllocationTypeListComponent implements OnInit {
 
   displayedColumns = ['pd_allocation_type_id','pd_allocation_type_name','isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
@@ -39,7 +45,7 @@ export class PdAllocationTypeListComponent implements OnInit {
   //    return this._MastersService.getAllPDAllocationType();
   //  }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
   
   ngOnInit() {
     this.getPDAllocationType();
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-dialog/pd-location-approach-dialog.component.html b/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-dialog/pd-location-approach-dialog.component.html
index 04bcbc70b..8108ea0ae 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-dialog/pd-location-approach-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-dialog/pd-location-approach-dialog.component.html
@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>PD Location Approach &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
   </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">PD Location Approach</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="2px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;">PD Location Approach &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
 
 
@@ -21,7 +31,7 @@
     <div class="form-group">
           <mat-dialog-content>
 
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs">
                   <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Name" required [formControl]="_pdLocationApproachForm.controls['description']">
                         <mat-error *ngIf="!_pdLocationApproachForm.controls['description'].valid && _pdLocationApproachForm.controls['description'].touched" class="mat-text-warn">You must include a Description.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.html b/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.html
index cabf987af..df1a85eb6 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.html
@@ -6,7 +6,7 @@
   <div *ngIf="loader">
       <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
   </div>         
-  <div datatable>
+  <!-- <div datatable>
       <table style="border-collapse: collapse">  
                  <thead>
                     <th style="text-align:  center;">#</th>
@@ -15,7 +15,7 @@
                     <th style="text-align:  center;">Action</th>
                   </thead>
 
-                  <!-- , createdon, fk_createdby, updatedon, fk_updatedby, isactive -->
+                  <!- , createdon, fk_createdby, updatedon, fk_updatedby, isactive ->
   
                   <tr *ngIf="MemberOccupationList.length === 0" > <td colspan="4" style="text-align:  center;"> No Records </td></tr>
               <tr *ngFor="let PAL of PdLocationApproachList; let i=index">
@@ -62,6 +62,56 @@
         </div>
         
         <br>-->
+
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
+        
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
         
 
 </mat-card-content>
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.scss b/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.scss
index 3b5b29164..18ec45b41 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,25 @@
     text-align: left;
   }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.ts b/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.ts
index b3c8b4c52..3f7459816 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-location-approach-list/pd-location-approach-list.component.ts
@@ -29,9 +29,15 @@ export class PdLocationApproachListComponent implements OnInit {
 
   displayedColumns = ['pd_allocation_type_id', 'pd_allocation_type_name', 'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-type-dialog/pd-type-dialog.component.html b/ng6-seed/src/app/settings/masters/component/pd/pd-type-dialog/pd-type-dialog.component.html
index fa7937d52..fff839b30 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-type-dialog/pd-type-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-type-dialog/pd-type-dialog.component.html
@@ -2,7 +2,7 @@
             <h2 mat-dialog-title>PD TYPE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
             </h2>
-          </div> -->
+          </div> 
           <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">PD type</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2" ></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> PD type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
           
           
@@ -21,7 +31,7 @@
               <div class="form-group">
                     <mat-dialog-content>
           
-                      <div class="mb-1"> 
+                      <div class="ml-xs mr-xs">
                             <mat-form-field style="width: 100%">
                                   <input matInput type="text" placeholder="Name" required [formControl]="_pdTypeForm.controls['type_name']">
                                   <mat-error *ngIf="!_pdTypeForm.controls['type_name'].valid && _pdTypeForm.controls['type_name'].touched" class="mat-text-warn">You must include a type_name.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.html b/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.html
index abbf22efa..53c392043 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.html
@@ -6,7 +6,7 @@
   <div *ngIf="loader">
       <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
   </div>          
-  <div datatable>
+  <!-- <div datatable>
       <table style="border-collapse: collapse">  
                  <thead>
                     <th style="text-align:  center;">S.no</th>
@@ -59,6 +59,54 @@
         </div>-->
         
         <br>
+        <div class="example-header">
+          <mat-form-field>
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+          </mat-form-field>
+        </div>
         
+        <div class="example-container mat-elevation-z8">
+        
+          <mat-table [dataSource]="dataSource" matSort >
+        
+             <ng-container matColumnDef="SerialNo">
+                 <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                 <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+             </ng-container>
+     
+            <ng-container matColumnDef="CityName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+            </ng-container>
+        
+            <ng-container matColumnDef="StateName">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+              <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+            </ng-container>
+            
+            <ng-container matColumnDef="IsActive">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+              <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                 <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                 <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+              </mat-cell>
+            </ng-container>
+     
+            <ng-container matColumnDef="Actions">
+              <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+              <mat-cell *matCellDef="let row"> 
+                 <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                 <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+               </mat-cell>
+            </ng-container>
+        
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;">
+            </mat-row>
+          </mat-table>
+        
+          <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+        </div>
+
 
 </mat-card-content>
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.scss b/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.scss
index 3b5b29164..18ec45b41 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,25 @@
     text-align: left;
   }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.ts b/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.ts
index a8047e81b..54d0bf598 100644
--- a/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/pd/pd-type-list/pd-type-list.component.ts
@@ -29,9 +29,15 @@ export class PdTypeListComponent implements OnInit {
 
   displayedColumns = ['pd_type_id', 'type_name', 'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+  //displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _PDTypeService: MastersService) { }
@@ -40,7 +46,7 @@ export class PdTypeListComponent implements OnInit {
   //    return this._PDTypeService.getAllPDType();
   //  }
 
-  dataSource = new UserDataSource(this._PDTypeService);
+//  dataSource = new UserDataSource(this._PDTypeService);
   
   ngOnInit() {
     this.getPDType();
diff --git a/ng6-seed/src/app/settings/masters/component/product/product-dialog/product-dialog.component.html b/ng6-seed/src/app/settings/masters/component/product/product-dialog/product-dialog.component.html
index cc75e2f49..fe64fd52f 100644
--- a/ng6-seed/src/app/settings/masters/component/product/product-dialog/product-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/product/product-dialog/product-dialog.component.html
@@ -1,8 +1,8 @@
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
         <h2 mat-dialog-title> Product Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
         </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Product Details</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Product Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
       
       <form [formGroup]="_productMasterForm" (submit)="onSubmit()">
@@ -20,7 +30,7 @@
           <div class="form-group">
               <mat-dialog-content>
     
-                <div class="mb-1">
+                <div class="ml-xs mr-xs">
                     <mat-form-field style="width: 100%">
                             <input matInput type="text" placeholder="Product Name" required [formControl]="_productMasterForm.controls['name']">
                             <mat-error *ngIf="!_productMasterForm.controls['name'].valid && _productMasterForm.controls['name'].touched" class="mat-text-warn">You must include a Product name.</mat-error>
@@ -28,7 +38,7 @@
                     
                 </div>    
                   
-                <div class="mb-1">
+                <div class="ml-xs mr-xs">
                     <mat-form-field style="width: 100%">
                             <input matInput type="text" placeholder="Product Abbr" required [formControl]="_productMasterForm.controls['abbr']">
                     </mat-form-field>
diff --git a/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.html b/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.html
index b30403538..cc01db53f 100644
--- a/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.html
@@ -4,37 +4,53 @@
     </div>
     <br>
 
-    <mat-form-field>
-      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
-    </mat-form-field>
+    <div class="example-header">
+      <mat-form-field>
+        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+      </mat-form-field>
+    </div>
     
-    <div class="mat-elevation-z8">
-      <table mat-table  [dataSource]="dataSource" matSort class="mat-elevation-z8">
+    <div class="example-container mat-elevation-z8">
     
-        <!-- Position Column -->
-        <ng-container matColumnDef="ID">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
-          <td mat-cell *matCellDef="let element"> {{element.ID}} </td>
+      <mat-table [dataSource]="dataSource" matSort >
+    
+         <ng-container matColumnDef="SerialNo">
+             <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+             <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+         </ng-container>
+ 
+        <ng-container matColumnDef="CityName">
+          <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+          <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
         </ng-container>
     
-        <!-- Name Column -->
-        <ng-container matColumnDef="ProductName">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-          <td mat-cell *matCellDef="let element"> {{element.ProductName}} </td>
+        <ng-container matColumnDef="StateName">
+          <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+          <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
         </ng-container>
-    
         
-        <ng-container matColumnDef="ProductAbbr">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> ProductAbbr </th>
-          <td mat-cell *matCellDef="let element"> {{element.ProductAbbr}} </td>
+        <ng-container matColumnDef="IsActive">
+          <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+          <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+             <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+             <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+          </mat-cell>
+        </ng-container>
+ 
+        <ng-container matColumnDef="Actions">
+          <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+          <mat-cell *matCellDef="let row"> 
+             <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+             <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+           </mat-cell>
         </ng-container>
     
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        
-      </table>
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns;">
+        </mat-row>
+      </mat-table>
     
-      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+      <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
     </div>
 
       <!-- Copyright 2018 Google Inc. All Rights Reserved.
diff --git a/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.scss b/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.scss
index 71f5d6a9d..70a9b7274 100644
--- a/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -89,4 +89,26 @@
   
   th { 
     text-align: left;
-  }
\ No newline at end of file
+  }*/
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.ts b/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.ts
index 3bdb9ec0c..271cdee37 100644
--- a/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/product/product-list/product-list.component.ts
@@ -32,13 +32,21 @@ export class ProductListComponent implements OnInit {
   
   //dataSource = new UserDataSource(this._ProductService);
   
-  displayedColumns: string[] = ['ID','ProductName','ProductAbbr'];
-  dataSource = new MatTableDataSource<ProductElement>(ELEMENT_DATA1);
+  // displayedColumns: string[] = ['ID','ProductName','ProductAbbr'];
+  // dataSource = new MatTableDataSource<ProductElement>(ELEMENT_DATA1);
+
+  // @ViewChild(MatPaginator) paginator: MatPaginator;
+  // @ViewChild(MatSort) sort: MatSort;
+
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-
   //Onready function
   ngOnInit() {
     this.dataSource.paginator = this.paginator;
diff --git a/ng6-seed/src/app/settings/masters/component/regions/regions-dialog/regions-dialog.component.html b/ng6-seed/src/app/settings/masters/component/regions/regions-dialog/regions-dialog.component.html
index 2fe9eaa86..9b0efdbf0 100644
--- a/ng6-seed/src/app/settings/masters/component/regions/regions-dialog/regions-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/regions/regions-dialog/regions-dialog.component.html
@@ -1,8 +1,8 @@
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
     <h2 mat-dialog-title>Region &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Region</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Region &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   
@@ -21,7 +31,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+              <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Name" required [formControl]="_regionsForm.controls['name']">
                           <mat-error *ngIf="!_regionsForm.controls['name'].valid && _regionsForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.html b/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.html
index 37809dfdb..85157c375 100644
--- a/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.html
@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
      </div>  
-     <div datatable>
+     <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -60,6 +60,57 @@
           </div>
           
           <br>-->
+
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.scss b/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.scss
index 3b5b29164..18ec45b41 100644
--- a/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,25 @@
     text-align: left;
   }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.ts b/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.ts
index 5367ff932..95377ba98 100644
--- a/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/regions/regions-list/regions-list.component.ts
@@ -30,9 +30,15 @@ export class RegionsListComponent implements OnInit {
   displayedColumns = ['region_id', 'name', 'isactive','actions'];
   //region_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   constructor(private dialog: MatDialog,
     private _regionsService: MastersService) { }
 
@@ -40,7 +46,7 @@ export class RegionsListComponent implements OnInit {
   //    return this._regionsService.getAllregions();
   //  }
 
-  dataSource = new UserDataSource(this._regionsService);
+  //dataSource = new UserDataSource(this._regionsService);
   
   ngOnInit() {
     this.getregions();
diff --git a/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-dialog/relation-ship-dialog.component.html b/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-dialog/relation-ship-dialog.component.html
index 78ec48b91..3e5e20681 100644
--- a/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-dialog/relation-ship-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-dialog/relation-ship-dialog.component.html
@@ -1,8 +1,8 @@
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
     <h2 mat-dialog-title>Relation Ship &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Relation Ship</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="2px" fxFlexOrder="2"></div>
+</div> -->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Relation Ship &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   
@@ -21,7 +31,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+              <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Name" required [formControl]="_relationShipForm.controls['name']">
                           <mat-error *ngIf="!_relationShipForm.controls['name'].valid && _relationShipForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.html b/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.html
index ff6f8dea3..faef295b1 100644
--- a/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.html
@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div>  
-    <div datatable>
+    <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -80,6 +80,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.scss b/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.scss
index e5c82000e..6f15f1f03 100644
--- a/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.scss
@@ -82,7 +82,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -118,3 +118,24 @@ th {
   text-align: left;
 }
 
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
diff --git a/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.ts b/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.ts
index 0be882a6d..47ff2fadd 100644
--- a/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/relation-ship/relation-ship-list/relation-ship-list.component.ts
@@ -41,14 +41,21 @@ export class RelationShipListComponent implements OnInit {
   displayedColumns = ['relationship_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   //relationship_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+ // displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+
   
   ngOnInit() {
     this.getRelationShip();
   }
 
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
 
   addRelationShip() {
     this.isPopupOpened = true;
diff --git a/ng6-seed/src/app/settings/masters/component/states/states-dialog/states-dialog.component.html b/ng6-seed/src/app/settings/masters/component/states/states-dialog/states-dialog.component.html
index 73baaf80b..782dd0feb 100644
--- a/ng6-seed/src/app/settings/masters/component/states/states-dialog/states-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/states/states-dialog/states-dialog.component.html
@@ -1,8 +1,8 @@
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
     <h2 mat-dialog-title>State &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">State</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div> -->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> State &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
 
   <form [formGroup]="_statesForm" (submit)="onSubmit()">
@@ -20,7 +30,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-                  <div class="mb-1"> 
+                  <div class="ml-xs mr-xs"> 
                         <mat-form-field>
                               <mat-select placeholder="Pick Up Region Name" required [formControl]="_statesForm.controls['fk_region_id']">
                                                <mat-option  *ngFor="let sd of regionDatas"  [value]="sd.region_id">{{ sd.name }}</mat-option>
@@ -29,14 +39,14 @@
                         </mat-form-field>
                   </div>
                   
-              <div class="mb-1"> 
+              <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Name" required [formControl]="_statesForm.controls['name']">
                           <mat-error *ngIf="!_statesForm.controls['name'].valid && _statesForm.controls['name'].touched" class="mat-text-warn">You must include a Name.</mat-error>
                     </mat-form-field>
               
               </div>
-              <div class="mb-1"> 
+              <div class="ml-xs mr-xs"> 
                   <!-- <mat-form-field style="width: 100%">
                                     <mat-select placeholder="Pick up Region" required [formControl]="_statesForm.controls['fk_region_id']">
                                         <mat-option *ngFor="let RD of RegionData" [value]="RD.region_id">
@@ -45,7 +55,7 @@
                                     </mat-select>
                   </mat-form-field> -->            
             </div>
-            <div class="mb-1"> 
+            <div class="ml-xs mr-xs"> 
                 <mat-form-field style="width: 100%">
                       <input matInput type="text" placeholder="Code" required [formControl]="_statesForm.controls['code']">
                       <mat-error *ngIf="!_statesForm.controls['code'].valid && _statesForm.controls['code'].touched" class="mat-text-warn">You must include a Code.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.html b/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.html
index c2ffaf4ac..5cc837937 100644
--- a/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.html
@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div> 
-    <div datatable>
+    <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -100,6 +100,56 @@
           </div>
           
           <br>-->
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.scss b/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.scss
index 3b5b29164..18ec45b41 100644
--- a/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.scss
@@ -55,7 +55,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
     display: flex;
     flex-direction: column;
@@ -91,3 +91,25 @@
     text-align: left;
   }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.ts b/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.ts
index 1a9e4203f..0a264b780 100644
--- a/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/states/states-list/states-list.component.ts
@@ -28,9 +28,15 @@ export class StatesListComponent implements OnInit {
   //displayedColumns = ['states_id', 'fk_city_id', 'name', 'createdon', 'fk_createdby', 'updatedon', 'fk_updatedby', 'isactive','actions'];
   displayedColumns = ['state_id', 'fk_region_id','region_name', 'name', 'code', 'isactive','actions'];
 
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
- 
+
   
   constructor(private dialog: MatDialog,
     private _statesService: MastersService) { }
@@ -39,7 +45,7 @@ export class StatesListComponent implements OnInit {
   //    return this._statesService.getAllStates();
   //  }
 
-  dataSource = new UserDataSource(this._statesService);
+  //dataSource = new UserDataSource(this._statesService);
   
   ngOnInit() {
     this.getState();
diff --git a/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-dialog/sub-product-dialog.component.html b/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-dialog/sub-product-dialog.component.html
index bfff31848..ef4b96dc5 100644
--- a/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-dialog/sub-product-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-dialog/sub-product-dialog.component.html
@@ -1,9 +1,9 @@
 
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
     <h2> Sub Product Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1  hover-icon" matTooltip="Close" matTooltipPosition="above" (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -13,7 +13,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Sub Product Details</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div> -->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Sub Product Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   <form [formGroup]="_subProductMasterForm" (submit)="onSubmit()">
@@ -21,7 +31,7 @@
       <div class="form-group">
           <mat-dialog-content>
 
-               <div class="mb-1"> 
+               <div class="ml-xs mr-xs"> 
                     <!-- <mat-form-field>
                             <input matInput placeholder="Pick Up Product Name" [matAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel" required
                               (ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
@@ -31,7 +41,7 @@
                                     </mat-option>
                                </mat-autocomplete>
                        </mat-form-field>  -->
-                       <div class="mb-1"> 
+                       <div class="ml-xs mr-xs"> 
                             <mat-form-field>
                                   <mat-select placeholder="Pick Up Product Name" required [formControl]="_subProductMasterForm.controls['fk_product_id']">
                                                    <mat-option  *ngFor="let sd of productDatas"  [value]="sd.product_id">{{ sd.name }}</mat-option>
@@ -46,7 +56,7 @@
               
                 </div>
               
-                <div class="mb-1"> 
+                <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Sub Product Name" required [formControl]="_subProductMasterForm.controls['name']">
                         <mat-error *ngIf="!_subProductMasterForm.controls['name'].valid && _subProductMasterForm.controls['name'].touched" class="mat-text-warn">You must include a Sub Product name.</mat-error>
@@ -55,7 +65,7 @@
                 </div>
                 
   
-                <div class="mb-1"> 
+                <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Sub Product Abbrevation" required [formControl]="_subProductMasterForm.controls['abbr']">
                         <mat-error *ngIf="!_subProductMasterForm.controls['abbr'].valid && _subProductMasterForm.controls['abbr'].touched" class="mat-text-warn">You must include a Sub Product Abbrevation.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.html b/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.html
index 77d9d4cb1..7b8596d77 100644
--- a/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.html
@@ -7,7 +7,7 @@
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div> 
 
-    <div datatable>
+    <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -90,6 +90,56 @@
           </div>-->
           
           <br>
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
 
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.scss b/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.scss
index e5c82000e..20ad983ab 100644
--- a/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.scss
@@ -82,7 +82,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -118,3 +118,25 @@ th {
   text-align: left;
 }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.ts b/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.ts
index b994ebc7f..daae6dc67 100644
--- a/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/sub-product/sub-product-list/sub-product-list.component.ts
@@ -39,10 +39,16 @@ export class SubProductListComponent implements OnInit {
   displayedColumns = ['subproduct_id','fk_product_id','product_name','name','abbr','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   //subproduct_id, fk_product_id, name, abbr, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
-  
-  dataSource = new UserDataSource(this._MastersService);
+ 
+  //dataSource = new UserDataSource(this._MastersService);
 
   
   ngOnInit() {
diff --git a/ng6-seed/src/app/settings/masters/component/title/title-dialog/title-dialog.component.html b/ng6-seed/src/app/settings/masters/component/title/title-dialog/title-dialog.component.html
index ccc45b149..964b82d15 100644
--- a/ng6-seed/src/app/settings/masters/component/title/title-dialog/title-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/title/title-dialog/title-dialog.component.html
@@ -1,8 +1,8 @@
-<!-- <div class="mb-1">
+<!-- <div class="ml-xs mr-xs">
     <h2 mat-dialog-title>Title &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div> 
 <div class="container"
      fxLayout
      fxLayout.xs="column"
@@ -12,7 +12,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Title</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;">Title &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   
@@ -21,7 +31,7 @@
       <div class="form-group">
             <mat-dialog-content>
 
-              <div class="mb-1"> 
+              <div class="ml-xs mr-xs"> 
                     <mat-form-field style="width: 100%">
                           <input matInput type="text" placeholder="Title" required [formControl]="_titleForm.controls['name']">
                           <mat-error *ngIf="!_titleForm.controls['name'].valid && _titleForm.controls['name'].touched" class="mat-text-warn">You must include a Title.</mat-error>
diff --git a/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.html b/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.html
index 7de36b7b0..be2ec794d 100644
--- a/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.html
@@ -6,7 +6,7 @@
     <div *ngIf="loader">
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div>      
-    <div datatable>
+   <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -80,6 +80,56 @@
           </div>-->
           
           <br>
+
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
           
   
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.scss b/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.scss
index 4c7ba0782..9992fa856 100644
--- a/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.scss
@@ -81,7 +81,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -117,3 +117,25 @@ th {
   text-align: left;
 }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.ts b/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.ts
index 5373d3eaf..b996dd2f9 100644
--- a/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/title/title-list/title-list.component.ts
@@ -36,10 +36,15 @@ export class TitleListComponent implements OnInit {
   displayedColumns = ['title_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
 
   //title_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
-  
-  dataSource = new UserDataSource(this._MastersService);
+
 
 
   //  get TitleList() {
diff --git a/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-dialog/activity-dialog.component.html b/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-dialog/activity-dialog.component.html
index 4e6b095bd..13fe8d44d 100644
--- a/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-dialog/activity-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-dialog/activity-dialog.component.html
@@ -13,7 +13,17 @@
   <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Type of activity</div>
   <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
   <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Company &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   <form [formGroup]="_activityMasterForm" (submit)="onSubmit()">
diff --git a/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.html b/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.html
index da8b1ad9e..d79789888 100644
--- a/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.html
@@ -7,7 +7,7 @@
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div> 
        
-    <div datatable>
+    <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -73,7 +73,55 @@
               <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
             </mat-table>
           </div>-->
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
           
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+ 
 
         
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.scss b/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.scss
index 49827ebf1..083f71b8e 100644
--- a/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.scss
@@ -80,7 +80,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -116,3 +116,25 @@ th {
   text-align: left;
 }
 
+
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.ts b/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.ts
index 2bf542b4d..9d8e711a8 100644
--- a/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/type-of-activity/activity-list/activity-list.component.ts
@@ -27,13 +27,20 @@ export class ActivityListComponent implements OnInit {
 
   displayedColumns = ['type_of_activity_id', 'name', 'createdon', 'fk_createdby', 'updatedon', 'fk_updatedby', 'isactive','actions'];
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+
  
   constructor(private dialog: MatDialog,
     private _MastersService: MastersService) { }
 
-    dataSource = new UserDataSource(this._MastersService);
+  //  dataSource = new UserDataSource(this._MastersService);
    
   ngOnInit() {
     this.getActivity();
diff --git a/ng6-seed/src/app/settings/masters/component/uom/uom-dialog/uom-dialog.component.html b/ng6-seed/src/app/settings/masters/component/uom/uom-dialog/uom-dialog.component.html
index 0fe11fc90..2e3baf30b 100644
--- a/ng6-seed/src/app/settings/masters/component/uom/uom-dialog/uom-dialog.component.html
+++ b/ng6-seed/src/app/settings/masters/component/uom/uom-dialog/uom-dialog.component.html
@@ -2,7 +2,7 @@
     <h2 mat-dialog-title>Unit of Measurement &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
     </h2>
-</div> -->
+</div>
 <div class="container"
 fxLayout
 fxLayout.xs="column"
@@ -12,7 +12,17 @@ fxLayoutGap.xs="0">
 <div class="mat-dialog-title" fxFlex fxFlexOrder="1">Unit of Measurement</div>
 <div fxFlex="20px" fxFlexOrder="3" style="text-align:right;"><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button></div>
 <div fxFlex="15px" fxFlexOrder="2"></div>
+</div>-->
+<div class="ml-xs mr-xs" style="width: 100%;" 
+fxLayout="row"
+fxLayoutAlign="center">
+<h2 mat-dialog-title style="width: 30%;"> Unit of Measurement &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
+<div style="width: 40%;"></div>
+<div style="width: 30%;text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"  (click)="onNoClick()"><mat-icon>close</mat-icon></button>
 </div>
+</div>
+
 
   
   <form [formGroup]="_uomForm" (submit)="onSubmit()">
diff --git a/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.html b/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.html
index 01db74d5f..b14c7c940 100644
--- a/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.html
+++ b/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.html
@@ -7,7 +7,7 @@
         <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
     </div> 
           
-    <div datatable>
+    <!-- <div datatable>
         <table style="border-collapse: collapse">  
                    <thead>
                       <th style="text-align:  center;">#</th>
@@ -75,5 +75,54 @@
               <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
             </mat-table>
           </div>-->
+          <div class="example-header">
+            <mat-form-field>
+              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+            </mat-form-field>
+          </div>
+          
+          <div class="example-container mat-elevation-z8">
+          
+            <mat-table [dataSource]="dataSource" matSort >
+          
+               <ng-container matColumnDef="SerialNo">
+                   <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+                   <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+               </ng-container>
+       
+              <ng-container matColumnDef="CityName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> City Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+              </ng-container>
+          
+              <ng-container matColumnDef="StateName">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> State Name </mat-header-cell>
+                <mat-cell *matCellDef="let row"> {{row.cityname}} </mat-cell>
+              </ng-container>
+              
+              <ng-container matColumnDef="IsActive">
+                <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+                <mat-cell *matCellDef="let row"><!--{{row.isactive}}-->
+                   <mat-icon *ngIf="row.isactive == 1;else notactive;" class="hover-icon" matTooltip="Active" matTooltipPosition="above">done</mat-icon>
+                   <ng-template #notactive ><mat-icon class="hover-icon" matTooltip="Inactive" matTooltipPosition="above">clear</mat-icon></ng-template> 
+                </mat-cell>
+              </ng-container>
+       
+              <ng-container matColumnDef="Actions">
+                <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+                <mat-cell *matCellDef="let row"> 
+                   <button mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editCity(row)"><mat-icon>edit</mat-icon></button>
+                   <button *ngIf="row.isactive == 1;" mat-icon-button class="hover-icon" matTooltip="Delete" matTooltipPosition="above" (click)="deleteBranch(row.city_id)"><mat-icon>delete_outline</mat-icon></button>
+                 </mat-cell>
+              </ng-container>
+          
+              <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+              <mat-row *matRowDef="let row; columns: displayedColumns;">
+              </mat-row>
+            </mat-table>
+          
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+          </div>
+
   
 </mat-card-content>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.scss b/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.scss
index 625557102..da099f8d4 100644
--- a/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.scss
+++ b/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.scss
@@ -81,7 +81,7 @@
   overflow: auto;
   max-height: 500px;
 }*/
-/* Structure */
+/* Structure *
 .example-container {
   display: flex;
   flex-direction: column;
@@ -115,4 +115,25 @@ table {
 
 th { 
   text-align: left;
+}
+*/
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.ts b/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.ts
index 53e449b0b..626d64fb5 100644
--- a/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.ts
+++ b/ng6-seed/src/app/settings/masters/component/uom/uom-list/uom-list.component.ts
@@ -44,10 +44,17 @@ export class UomListComponent implements OnInit {
   displayedColumns = ['uom_id','name','createdon','fk_createdby','updatedon','isactive','fk_updatedby','actions'];
   //uom_id, name, createdon, fk_createdby, updatedon, fk_updatedby, isactive
   
+  userData = null;
+
+  public dataLength: number;
+  public dataSource = new MatTableDataSource();
+//  displayedColumns = ['SerialNo','BranchName','CityName', 'IsActive','Actions'];
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+
   
-  dataSource = new UserDataSource(this._MastersService);
+  //dataSource = new UserDataSource(this._MastersService);
 
 
   addUOM() {